Skip to content

Commit 6bc8692

Browse files
barshathakuribarshathakuri
committed
eap(eap-registration-form): Add EAP Registration Form
1 parent 0a71414 commit 6bc8692

File tree

5 files changed

+463
-6
lines changed

5 files changed

+463
-6
lines changed

‎app/src/views/EapApplications/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ export function Component() {
1515
<Container
1616
childrenContainerClassName={styles.eapFormLinks}
1717
>
18-
{/* FIXME: Add eap registration link */}
1918
<Link
20-
to="home"
19+
to="eapDevelopmentRegistration"
2120
variant="secondary"
2221
>
2322
{strings.eapRegistrationLink}

‎app/src/views/EapRegistration/i18n.json‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,39 @@
22
"namespace": "eapRegistration",
33
"strings": {
44
"eapRegistrationHeading": "EAP Development Registration",
5-
"eapRegistrationDescription": "The purpose of this form is for you to notify the IFRC team of the start of your EAP process. If you need assistance with the initiation of the process, send us a message."
5+
"eapRegistrationDescription": "Use the following page to submit your National Society's interest in following the Early Action Protocol (EAP) application process. Once you submit this form, the EAP team members will contact you to start the procedure. You can find more information on the process and different ways to apply on this page.",
6+
"eapApplicationDetails": "Application Details",
7+
"eapNationalSociety": "National Society (NS)",
8+
"eapNationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
9+
"eapCountry": "Country",
10+
"eapCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
11+
"eapDisasterType": "Disaster Type",
12+
"eapDisasterTypeDescription": "Select the disaster type for which the EAP is needed.",
13+
"eapType": "EAP Type",
14+
"eapTypeDescription": "Select the EAP type. Find details of both under this link.",
15+
"eapSubmission": "Expected Time of Submission",
16+
"eapSubmissionDescription": "Include the proposed time of submission, accounting for the time it will take to deliver the application.",
17+
"eapPartnersInvolved": "Partners Involved",
18+
"eapPartnersInvolvedDescription": "Select from the list the partners involved in this process. Add as many as needed or select not applicable if no partners involved.",
19+
"eapContacts": "Contacts",
20+
"eapNSContact": "National Society Contact",
21+
"eapNSContactDescription": "National Society contact responsible for the EAP process",
22+
"eapNSName": "Name",
23+
"eapNSTitle": "Title",
24+
"eapNSEmail": "Email",
25+
"eapNSPhoneNumber": "Phone Number",
26+
"eapIFRCContact": "IFRC Contact",
27+
"eapIFRCContactDescription": "The most senior staff in the National Society responsible and knowledgable about the disaster event.",
28+
"eapIFRCName": "Name",
29+
"eapIFRCTitle": "Title",
30+
"eapIFRCEmail": "Email",
31+
"eapIFRCPhoneNumber": "Phone Number",
32+
"eapFocalPoint": "DREF Focal Point",
33+
"eapFocalPointDescription": "The DREF contact person form IFRC",
34+
"eapFocalPointName": "Name",
35+
"eapFocalPointTitle": "Title",
36+
"eapFocalPointEmail": "Email",
37+
"eapFocalPointPhoneNumber": "Phone Number",
38+
"eapSubmitButton": "Submit"
639
}
740
}

‎app/src/views/EapRegistration/index.tsx‎

Lines changed: 326 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,344 @@
1+
import {
2+
useCallback,
3+
useMemo,
4+
} from 'react';
5+
import {
6+
Button,
7+
Container,
8+
DateInput,
9+
InputSection,
10+
MultiSelectInput,
11+
RadioInput,
12+
TextInput,
13+
} from '@ifrc-go/ui';
114
import { useTranslation } from '@ifrc-go/ui/hooks';
15+
import {
16+
numericIdSelector,
17+
stringNameSelector,
18+
} from '@ifrc-go/ui/utils';
19+
import {
20+
createSubmitHandler,
21+
getErrorObject,
22+
useForm,
23+
} from '@togglecorp/toggle-form';
224

25+
import CountrySelectInput from '#components/domain/CountrySelectInput';
26+
import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
27+
import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
328
import Page from '#components/Page';
429

30+
import {
31+
type EapRegistrationInput,
32+
formSchema,
33+
} from './schema';
34+
535
import i18n from './i18n.json';
36+
import styles from './styles.module.css';
37+
38+
interface Props {
39+
disabled?: boolean;
40+
eap: Partial<EapRegistrationInput>;
41+
}
42+
43+
const eapFormOptions = [
44+
{ value: 'full', label: 'Full application' },
45+
{ value: 'simplified', label: 'Simplified application' },
46+
{ value: 'not_sure', label: 'Not Sure' },
47+
];
648

749
/** @knipignore */
850
// eslint-disable-next-line import/prefer-default-export
9-
export function Component() {
51+
export function Component(props: Props) {
52+
const {
53+
eap,
54+
disabled,
55+
} = props;
56+
1057
const strings = useTranslation(i18n);
58+
const defaultFormValue = useMemo(() => ({
59+
national_society: eap?.national_society,
60+
country: eap?.country,
61+
disaster_type: eap?.disaster_type,
62+
eap_type: eap?.eap_type,
63+
eap_start_date: eap?.eap_start_date,
64+
eap_end_date: eap?.eap_end_date,
65+
partner_involved: eap?.partner_involved,
66+
eap_national_society_name: eap?.eap_national_society_name,
67+
eap_national_society_title: eap?.eap_national_society_title,
68+
eap_national_society_email: eap?.eap_national_society_email,
69+
eap_national_society_phone_number: eap?.eap_national_society_phone_number,
70+
eap_ifrc_name: eap?.eap_ifrc_name,
71+
eap_ifrc_title: eap?.eap_ifrc_title,
72+
eap_ifrc_email: eap?.eap_ifrc_email,
73+
eap_ifrc_phone_number: eap?.eap_ifrc_phone_number,
74+
eap_focal_point_name: eap?.eap_focal_point_name,
75+
eap_focal_point_title: eap?.eap_focal_point_title,
76+
eap_focal_point_email: eap?.eap_focal_point_email,
77+
eap_focal_point_phone_number: eap?.eap_focal_point_phone_number,
78+
}), [eap]);
79+
80+
const {
81+
value,
82+
setFieldValue,
83+
error: formError,
84+
setError,
85+
validate,
86+
} = useForm(formSchema, { value: defaultFormValue });
87+
88+
const error = getErrorObject(formError);
89+
90+
const handleCountryChange = useCallback(
91+
(val: number | undefined, name: 'country') => {
92+
setFieldValue(val, name);
93+
},
94+
[setFieldValue],
95+
);
96+
97+
const eapRegistration = useCallback(() => {
98+
const handler = createSubmitHandler(
99+
validate,
100+
setError,
101+
(val) => {
102+
// FIXME: Remove this after API integration
103+
// eslint-disable-next-line no-console
104+
console.log('value', val);
105+
},
106+
);
107+
handler();
108+
}, [
109+
setError,
110+
validate,
111+
]);
112+
113+
const handleFormSubmit = createSubmitHandler(validate, setError, eapRegistration);
11114

12115
return (
13116
<Page
117+
mainSectionClassName={styles.eapRegistrationForm}
14118
heading={strings.eapRegistrationHeading}
15119
description={strings.eapRegistrationDescription}
120+
withBackgroundColorInMainSection
16121
>
17-
{/* TODO: Add the form */}
18-
Application Details
122+
<Container
123+
heading={strings.eapApplicationDetails}
124+
childrenContainerClassName={styles.content}
125+
>
126+
<InputSection
127+
title={strings.eapNationalSociety}
128+
description={strings.eapNationalSocietyDescription}
129+
withAsteriskOnTitle
130+
>
131+
<NationalSocietySelectInput
132+
error={error?.national_society}
133+
name="national_society"
134+
onChange={setFieldValue}
135+
value={value?.national_society}
136+
disabled={disabled}
137+
/>
138+
</InputSection>
139+
<InputSection
140+
title={strings.eapCountry}
141+
description={strings.eapCountryDescription}
142+
withAsteriskOnTitle
143+
>
144+
<CountrySelectInput
145+
error={error?.country}
146+
name="country"
147+
onChange={handleCountryChange}
148+
value={value?.country}
149+
disabled={disabled}
150+
/>
151+
</InputSection>
152+
<InputSection
153+
title={strings.eapDisasterType}
154+
description={strings.eapDisasterTypeDescription}
155+
withAsteriskOnTitle
156+
>
157+
<DisasterTypeSelectInput
158+
name="disaster_type"
159+
value={value?.disaster_type}
160+
onChange={setFieldValue}
161+
error={error?.disaster_type}
162+
disabled={disabled}
163+
/>
164+
</InputSection>
165+
<InputSection
166+
title={strings.eapType}
167+
// TODO: Add link here
168+
description={strings.eapTypeDescription}
169+
withAsteriskOnTitle
170+
>
171+
<RadioInput
172+
name="eap_type"
173+
value={value?.eap_type}
174+
onChange={setFieldValue}
175+
options={eapFormOptions}
176+
keySelector={(option) => option.value}
177+
labelSelector={(option) => option.label}
178+
error={error?.eap_type}
179+
/>
180+
</InputSection>
181+
<InputSection
182+
title={strings.eapSubmission}
183+
description={strings.eapSubmissionDescription}
184+
withAsteriskOnTitle
185+
numPreferredColumns={2}
186+
>
187+
<DateInput
188+
name="eap_start_date"
189+
onChange={setFieldValue}
190+
value={value?.eap_start_date}
191+
/>
192+
<DateInput
193+
name="eap_end_date"
194+
onChange={setFieldValue}
195+
value={value?.eap_end_date}
196+
/>
197+
</InputSection>
198+
<InputSection
199+
title={strings.eapPartnersInvolved}
200+
description={strings.eapPartnersInvolvedDescription}
201+
withAsteriskOnTitle
202+
>
203+
<MultiSelectInput
204+
name="partner_involved"
205+
value={value?.partner_involved}
206+
onChange={setFieldValue}
207+
keySelector={numericIdSelector}
208+
labelSelector={stringNameSelector}
209+
options={[]}
210+
/>
211+
</InputSection>
212+
</Container>
213+
<Container
214+
heading={strings.eapContacts}
215+
>
216+
<InputSection
217+
title={strings.eapNSContact}
218+
description={strings.eapNSContactDescription}
219+
numPreferredColumns={2}
220+
>
221+
<TextInput
222+
label={strings.eapNSName}
223+
name="eap_national_society_name"
224+
value={value?.eap_national_society_name}
225+
onChange={setFieldValue}
226+
error={error?.eap_national_society_name}
227+
disabled={disabled}
228+
/>
229+
<TextInput
230+
label={strings.eapNSTitle}
231+
name="eap_national_society_title"
232+
value={value?.eap_national_society_title}
233+
onChange={setFieldValue}
234+
error={error?.eap_national_society_title}
235+
disabled={disabled}
236+
/>
237+
<TextInput
238+
label={strings.eapNSEmail}
239+
name="eap_national_society_email"
240+
value={value?.eap_national_society_email}
241+
onChange={setFieldValue}
242+
error={error?.eap_national_society_email}
243+
disabled={disabled}
244+
/>
245+
<TextInput
246+
label={strings.eapNSPhoneNumber}
247+
name="eap_national_society_phone_number"
248+
value={value?.eap_national_society_phone_number}
249+
onChange={setFieldValue}
250+
error={error?.eap_national_society_phone_number}
251+
disabled={disabled}
252+
/>
253+
</InputSection>
254+
<InputSection
255+
title={strings.eapIFRCContact}
256+
description={strings.eapIFRCContactDescription}
257+
numPreferredColumns={2}
258+
>
259+
<TextInput
260+
label={strings.eapIFRCName}
261+
name="eap_ifrc_name"
262+
value={value?.eap_ifrc_name}
263+
onChange={setFieldValue}
264+
error={error?.eap_ifrc_name}
265+
disabled={disabled}
266+
/>
267+
<TextInput
268+
label={strings.eapIFRCTitle}
269+
name="eap_ifrc_title"
270+
value={value?.eap_ifrc_title}
271+
onChange={setFieldValue}
272+
error={error?.eap_ifrc_title}
273+
disabled={disabled}
274+
/>
275+
<TextInput
276+
label={strings.eapIFRCEmail}
277+
name="eap_ifrc_email"
278+
value={value?.eap_ifrc_email}
279+
onChange={setFieldValue}
280+
error={error?.eap_ifrc_email}
281+
disabled={disabled}
282+
/>
283+
<TextInput
284+
label={strings.eapIFRCPhoneNumber}
285+
name="eap_ifrc_phone_number"
286+
value={value?.eap_ifrc_phone_number}
287+
onChange={setFieldValue}
288+
error={error?.eap_ifrc_phone_number}
289+
disabled={disabled}
290+
/>
291+
</InputSection>
292+
<InputSection
293+
title={strings.eapFocalPoint}
294+
description={strings.eapFocalPointDescription}
295+
numPreferredColumns={2}
296+
>
297+
<TextInput
298+
label={strings.eapFocalPointName}
299+
name="eap_focal_point_name"
300+
value={value?.eap_focal_point_name}
301+
onChange={setFieldValue}
302+
error={error?.eap_focal_point_name}
303+
disabled={disabled}
304+
/>
305+
<TextInput
306+
label={strings.eapFocalPointTitle}
307+
name="eap_focal_point_title"
308+
value={value?.eap_focal_point_title}
309+
onChange={setFieldValue}
310+
error={error?.eap_focal_point_title}
311+
disabled={disabled}
312+
/>
313+
<TextInput
314+
label={strings.eapFocalPointEmail}
315+
name="eap_focal_point_email"
316+
value={value?.eap_focal_point_email}
317+
onChange={setFieldValue}
318+
error={error?.eap_focal_point_email}
319+
disabled={disabled}
320+
/>
321+
<TextInput
322+
label={strings.eapFocalPointPhoneNumber}
323+
name="eap_focal_point_phone_number"
324+
value={value?.eap_focal_point_phone_number}
325+
onChange={setFieldValue}
326+
error={error?.eap_focal_point_phone_number}
327+
disabled={disabled}
328+
/>
329+
</InputSection>
330+
</Container>
331+
<div className={styles.footer}>
332+
<Button
333+
name={undefined}
334+
onClick={handleFormSubmit}
335+
type="submit"
336+
variant="secondary"
337+
disabled={disabled}
338+
>
339+
{strings.eapSubmitButton}
340+
</Button>
341+
</div>
19342
</Page>
20343
);
21344
}

0 commit comments

Comments
 (0)