Skip to content

Commit dd1f5f8

Browse files
committed
feat(mon-pix): remove error message on input
1 parent 59b160e commit dd1f5f8

File tree

4 files changed

+164
-128
lines changed

4 files changed

+164
-128
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import PixBackgroundHeader from '@1024pix/pix-ui/components/pix-background-header';
2+
import PixBlock from '@1024pix/pix-ui/components/pix-block';
3+
import PixButton from '@1024pix/pix-ui/components/pix-button';
4+
import PixInput from '@1024pix/pix-ui/components/pix-input';
5+
import { on } from '@ember/modifier';
6+
import { action } from '@ember/object';
7+
import { service } from '@ember/service';
8+
import Component from '@glimmer/component';
9+
import { tracked } from '@glimmer/tracking';
10+
import { t } from 'ember-intl';
11+
12+
const ERROR_MESSAGE = {
13+
INVALID_EMAIL: 'pages.fill-in-participant-external-id.errors.invalid-external-id-email',
14+
INVALID_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.invalid-external-id',
15+
MISSING_EXTERNAL_ID: 'pages.fill-in-participant-external-id.errors.missing-external-id',
16+
};
17+
export default class FillInParticipantExternalId extends Component {
18+
@service intl;
19+
@service campaignStorage;
20+
21+
@tracked participantExternalId = this.previousParticipantExternalId || null;
22+
@tracked isLoading = false;
23+
@tracked errorMessage = ERROR_MESSAGE[this.previousError] ? this.intl.t(ERROR_MESSAGE[this.previousError]) : null;
24+
25+
get previousError() {
26+
return this.campaignStorage.get(this.args.campaign.code, 'error');
27+
}
28+
get previousParticipantExternalId() {
29+
return this.campaignStorage.get(this.args.campaign.code, 'previousParticipantExternalId');
30+
}
31+
32+
@action
33+
submit(event) {
34+
event.preventDefault();
35+
36+
if (!this.participantExternalId) {
37+
this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.missing-external-id', {
38+
idPixLabel: this.args.campaign.idPixLabel,
39+
});
40+
return;
41+
}
42+
43+
if (this.participantExternalId.length > 255) {
44+
this.errorMessage = this.intl.t('pages.fill-in-participant-external-id.errors.max-length-external-id', {
45+
idPixLabel: this.args.campaign.idPixLabel,
46+
});
47+
return;
48+
}
49+
50+
this.errorMessage = null;
51+
return this.args.onSubmit(this.participantExternalId);
52+
}
53+
54+
@action
55+
updateParticipantExternalId(event) {
56+
this.participantExternalId = event.target.value;
57+
}
58+
59+
@action
60+
resetErrorMessage() {
61+
if (!this.errorMessage) return;
62+
63+
this.errorMessage = null;
64+
}
65+
66+
@action
67+
cancel() {
68+
this.errorMessage = null;
69+
return this.args.onCancel();
70+
}
71+
72+
get idPixInputType() {
73+
if (this.args.campaign.idPixType === 'EMAIL') {
74+
return 'email';
75+
} else if (this.args.campaign.idPixType === 'STRING') {
76+
return 'text';
77+
}
78+
return null;
79+
}
80+
81+
get idPixInputSubLabel() {
82+
if (this.args.campaign.idPixType === 'EMAIL') {
83+
return this.intl.t('pages.sign-up.fields.email.help');
84+
} else if (this.args.campaign.idPixInputType === 'STRING') {
85+
return '';
86+
}
87+
return null;
88+
}
89+
90+
<template>
91+
{{! template-lint-disable no-action require-input-label no-unknown-arguments-for-builtin-components }}
92+
<main role="main">
93+
<PixBackgroundHeader>
94+
<PixBlock class="fill-in-participant-external-id">
95+
<h1 class="fill-in-participant-external-id__title">{{t "pages.fill-in-participant-external-id.first-title"}}
96+
</h1>
97+
<p class="fill-in-participant-external-id__announcement">
98+
{{t "pages.fill-in-participant-external-id.announcement"}}
99+
</p>
100+
101+
<form {{on "submit" this.submit}} class="fill-in-participant-external-id__form">
102+
<PixInput
103+
@id="external-id"
104+
@value={{this.participantExternalId}}
105+
@errorMessage={{this.errorMessage}}
106+
@validationStatus={{if this.errorMessage "error"}}
107+
@requiredLabel={{true}}
108+
{{on "input" this.resetErrorMessage}}
109+
{{on "change" this.updateParticipantExternalId}}
110+
@subLabel={{this.idPixInputSubLabel}}
111+
type={{this.idPixInputType}}
112+
aria-autocomplete="none"
113+
>
114+
<:label>{{@campaign.idPixLabel}}</:label>
115+
</PixInput>
116+
117+
{{#if @campaign.externalIdHelpImageUrl}}
118+
<img
119+
class="fill-in-participant-external-id__help"
120+
src={{@campaign.externalIdHelpImageUrl}}
121+
alt={{@campaign.alternativeTextToExternalIdHelpImage}}
122+
/>
123+
{{/if}}
124+
125+
<div class="fill-in-participant-external-id__buttonbar">
126+
<PixButton @variant="secondary" @triggerAction={{this.cancel}}>
127+
{{t "pages.fill-in-participant-external-id.buttons.cancel"}}
128+
</PixButton>
129+
130+
<PixButton @type="submit">
131+
{{t "pages.fill-in-participant-external-id.buttons.continue"}}
132+
</PixButton>
133+
</div>
134+
</form>
135+
</PixBlock>
136+
</PixBackgroundHeader>
137+
</main>
138+
</template>
139+
}

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

-47
This file was deleted.

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

-76
This file was deleted.

mon-pix/tests/integration/components/routes/campaigns/invited/fill-in-participant-external-id-test.js

+25-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { render } from '@1024pix/ember-testing-library';
2-
// eslint-disable-next-line no-restricted-imports
3-
import { find } from '@ember/test-helpers';
2+
import { fillIn } from '@ember/test-helpers';
43
import { hbs } from 'ember-cli-htmlbars';
54
import { t } from 'ember-intl/test-support';
65
import { module, test } from 'qunit';
@@ -28,7 +27,7 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
2827
this.set('campaign', campaign);
2928

3029
// given
31-
await render(
30+
const screen = await render(
3231
hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
3332
@campaign={{this.campaign}}
3433
@onSubmit={{this.onSubmitStub}}
@@ -38,7 +37,7 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
3837

3938
// then
4039
assert.dom('img').exists();
41-
assert.ok(find('img').getAttribute('alt').includes(campaign.alternativeTextToExternalIdHelpImage));
40+
assert.ok(screen.getByRole('img', { name: campaign.alternativeTextToExternalIdHelpImage }));
4241
});
4342
});
4443

@@ -147,18 +146,39 @@ module('Integration | Component | routes/campaigns/invited/fill-in-participant-e
147146
test(`initialize error and previous external id`, async function (assert) {
148147
this.set('campaign', campaign);
149148

150-
// given
149+
// given & when
151150
const screen = await render(
152151
hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
153152
@campaign={{this.campaign}}
154153
@onSubmit={{this.onSubmitStub}}
155154
@onCancel={{this.onCancelStub}}
156155
/>`,
157156
);
157+
158+
// then
158159
const input = screen.getByLabelText(/idpix/);
159160
assert.strictEqual(input.value, '1234TOTO');
160161
assert.ok(screen.getByText(t('pages.fill-in-participant-external-id.errors.invalid-external-id-email')));
161162
});
163+
164+
test(`remove error message when update input`, async function (assert) {
165+
this.set('campaign', campaign);
166+
167+
// given
168+
const screen = await render(
169+
hbs`<Routes::Campaigns::Invited::FillInParticipantExternalId
170+
@campaign={{this.campaign}}
171+
@onSubmit={{this.onSubmitStub}}
172+
@onCancel={{this.onCancelStub}}
173+
/>`,
174+
);
175+
176+
// when
177+
await fillIn(screen.getByLabelText(/idpix/), '1234');
178+
179+
// then
180+
assert.notOk(screen.queryByText(t('pages.fill-in-participant-external-id.errors.invalid-external-id-email')));
181+
});
162182
});
163183
});
164184
});

0 commit comments

Comments
 (0)