Skip to content

Commit e91a814

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

File tree

4 files changed

+287
-6
lines changed

4 files changed

+287
-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: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,38 @@
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"
638
}
739
}

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

Lines changed: 242 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,260 @@
1+
import {
2+
Container,
3+
DateInput,
4+
InputSection,
5+
RadioInput,
6+
SelectInput,
7+
TextInput,
8+
} from '@ifrc-go/ui';
19
import { useTranslation } from '@ifrc-go/ui/hooks';
10+
import {
11+
numericIdSelector,
12+
stringNameSelector,
13+
} from '@ifrc-go/ui/utils';
214

15+
import CountrySelectInput from '#components/domain/CountrySelectInput';
16+
import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
17+
import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
318
import Page from '#components/Page';
419

520
import i18n from './i18n.json';
21+
import styles from './styles.module.css';
22+
23+
interface Props {
24+
disabled?: boolean;
25+
}
26+
27+
const eapFormOptions = [
28+
{ value: 'full', label: 'Full application' },
29+
{ value: 'simplified', label: 'Simplified application' },
30+
{ value: 'not_sure', label: 'Not Sure' },
31+
];
632

733
/** @knipignore */
834
// eslint-disable-next-line import/prefer-default-export
9-
export function Component() {
35+
export function Component(props: Props) {
36+
const {
37+
disabled,
38+
} = props;
39+
1040
const strings = useTranslation(i18n);
1141

1242
return (
1343
<Page
44+
mainSectionClassName={styles.eapRegistrationForm}
1445
heading={strings.eapRegistrationHeading}
1546
description={strings.eapRegistrationDescription}
47+
withBackgroundColorInMainSection
1648
>
17-
{/* TODO: Add the form */}
18-
Application Details
49+
<Container
50+
heading={strings.eapApplicationDetails}
51+
childrenContainerClassName={styles.content}
52+
>
53+
<InputSection
54+
title={strings.eapNationalSociety}
55+
description={strings.eapNationalSocietyDescription}
56+
withAsteriskOnTitle
57+
>
58+
<NationalSocietySelectInput
59+
error={undefined}
60+
name="national_society"
61+
onChange={() => {}}
62+
value={undefined}
63+
disabled={disabled}
64+
/>
65+
</InputSection>
66+
<InputSection
67+
title={strings.eapCountry}
68+
description={strings.eapCountryDescription}
69+
withAsteriskOnTitle
70+
>
71+
<CountrySelectInput
72+
error={undefined}
73+
name="country"
74+
onChange={() => {}}
75+
value={undefined}
76+
disabled={disabled}
77+
/>
78+
</InputSection>
79+
<InputSection
80+
title={strings.eapDisasterType}
81+
description={strings.eapDisasterTypeDescription}
82+
withAsteriskOnTitle
83+
>
84+
<DisasterTypeSelectInput
85+
name="disaster_type"
86+
value={undefined}
87+
onChange={() => {}}
88+
error={undefined}
89+
disabled={disabled}
90+
/>
91+
</InputSection>
92+
<InputSection
93+
title={strings.eapType}
94+
// TODO: Add link here
95+
description={strings.eapTypeDescription}
96+
withAsteriskOnTitle
97+
>
98+
<RadioInput
99+
name=""
100+
value={undefined}
101+
onChange={() => {}}
102+
options={eapFormOptions}
103+
keySelector={(option) => option.value}
104+
labelSelector={(option) => option.label}
105+
error={undefined}
106+
/>
107+
</InputSection>
108+
<InputSection
109+
title={strings.eapSubmission}
110+
description={strings.eapSubmissionDescription}
111+
withAsteriskOnTitle
112+
numPreferredColumns={2}
113+
>
114+
<DateInput
115+
name=""
116+
onChange={() => {}}
117+
value={undefined}
118+
/>
119+
<DateInput
120+
name=""
121+
onChange={() => {}}
122+
value={undefined}
123+
/>
124+
</InputSection>
125+
<InputSection
126+
title={strings.eapPartnersInvolved}
127+
description={strings.eapPartnersInvolvedDescription}
128+
withAsteriskOnTitle
129+
>
130+
<SelectInput
131+
name=""
132+
value={undefined}
133+
onChange={() => {}}
134+
keySelector={numericIdSelector}
135+
labelSelector={stringNameSelector}
136+
options={[]}
137+
/>
138+
</InputSection>
139+
</Container>
140+
<Container
141+
heading={strings.eapContacts}
142+
>
143+
<InputSection
144+
title={strings.eapNSContact}
145+
description={strings.eapNSContactDescription}
146+
numPreferredColumns={2}
147+
>
148+
<TextInput
149+
label={strings.eapNSName}
150+
name=""
151+
value={undefined}
152+
onChange={() => {}}
153+
error={undefined}
154+
disabled={disabled}
155+
/>
156+
<TextInput
157+
label={strings.eapNSTitle}
158+
name=""
159+
value={undefined}
160+
onChange={() => {}}
161+
error={undefined}
162+
disabled={disabled}
163+
/>
164+
<TextInput
165+
label={strings.eapNSEmail}
166+
name=""
167+
value={undefined}
168+
onChange={() => {}}
169+
error={undefined}
170+
disabled={disabled}
171+
/>
172+
<TextInput
173+
label={strings.eapNSPhoneNumber}
174+
name=""
175+
value={undefined}
176+
onChange={() => {}}
177+
error={undefined}
178+
disabled={disabled}
179+
/>
180+
</InputSection>
181+
<InputSection
182+
title={strings.eapIFRCContact}
183+
description={strings.eapIFRCContactDescription}
184+
numPreferredColumns={2}
185+
>
186+
<TextInput
187+
label={strings.eapIFRCName}
188+
name=""
189+
value={undefined}
190+
onChange={() => {}}
191+
error={undefined}
192+
disabled={disabled}
193+
/>
194+
<TextInput
195+
label={strings.eapIFRCTitle}
196+
name=""
197+
value={undefined}
198+
onChange={() => {}}
199+
error={undefined}
200+
disabled={disabled}
201+
/>
202+
<TextInput
203+
label={strings.eapIFRCEmail}
204+
name=""
205+
value={undefined}
206+
onChange={() => {}}
207+
error={undefined}
208+
disabled={disabled}
209+
/>
210+
<TextInput
211+
label={strings.eapIFRCPhoneNumber}
212+
name=""
213+
value={undefined}
214+
onChange={() => {}}
215+
error={undefined}
216+
disabled={disabled}
217+
/>
218+
</InputSection>
219+
<InputSection
220+
title={strings.eapFocalPoint}
221+
description={strings.eapFocalPointDescription}
222+
numPreferredColumns={2}
223+
>
224+
<TextInput
225+
label={strings.eapFocalPointName}
226+
name=""
227+
value={undefined}
228+
onChange={() => {}}
229+
error={undefined}
230+
disabled={disabled}
231+
/>
232+
<TextInput
233+
label={strings.eapFocalPointTitle}
234+
name=""
235+
value={undefined}
236+
onChange={() => {}}
237+
error={undefined}
238+
disabled={disabled}
239+
/>
240+
<TextInput
241+
label={strings.eapFocalPointEmail}
242+
name=""
243+
value={undefined}
244+
onChange={() => {}}
245+
error={undefined}
246+
disabled={disabled}
247+
/>
248+
<TextInput
249+
label={strings.eapFocalPointPhoneNumber}
250+
name=""
251+
value={undefined}
252+
onChange={() => {}}
253+
error={undefined}
254+
disabled={disabled}
255+
/>
256+
</InputSection>
257+
</Container>
19258
</Page>
20259
);
21260
}

‎app/src/views/EapRegistration/styles.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.eap-registration-form {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--go-ui-spacing-md);
5+
6+
.content {
7+
display: flex;
8+
flex-direction: column;
9+
gap: var(--go-ui-spacing-md);
10+
}
11+
}

0 commit comments

Comments
 (0)