Skip to content

Commit d496188

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

File tree

4 files changed

+250
-6
lines changed

4 files changed

+250
-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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
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."
66
}
77
}

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

Lines changed: 241 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,259 @@
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+
className={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="Application Details"
51+
childrenContainerClassName={styles.content}
52+
>
53+
<InputSection
54+
title="National Society (NS)"
55+
description="Select National Society that is planning to apply for the EAP"
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="Country"
68+
description="The country will be pre-populated based on the NS selection, but can be adapted as needed."
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="Disaster Type"
81+
description="Select the disaster type for which the EAP is needed."
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="EAP Type"
94+
// TODO: Add link here
95+
description="Select the EAP type. Find details of both under this link."
96+
>
97+
<RadioInput
98+
name=""
99+
value={undefined}
100+
onChange={() => {}}
101+
options={eapFormOptions}
102+
keySelector={(option) => option.value}
103+
labelSelector={(option) => option.label}
104+
error={undefined}
105+
/>
106+
</InputSection>
107+
<InputSection
108+
title="Expected Time of Submission"
109+
description="Include the proposed time of submission, accounting for the time it will take to deliver the application."
110+
withAsteriskOnTitle
111+
numPreferredColumns={2}
112+
>
113+
<DateInput
114+
name=""
115+
onChange={() => {}}
116+
value={undefined}
117+
/>
118+
<DateInput
119+
name=""
120+
onChange={() => {}}
121+
value={undefined}
122+
/>
123+
</InputSection>
124+
<InputSection
125+
title="Partners Involved"
126+
description="Select from the list the partners involved in this process. Add as many as needed or select not applicable if no partners involved."
127+
withAsteriskOnTitle
128+
>
129+
<SelectInput
130+
name=""
131+
value={undefined}
132+
onChange={() => {}}
133+
keySelector={numericIdSelector}
134+
labelSelector={stringNameSelector}
135+
options={[]}
136+
/>
137+
</InputSection>
138+
</Container>
139+
<Container
140+
heading="Contacts"
141+
>
142+
<InputSection
143+
title="National Society Contact"
144+
description="National Society contact responsible for the EAP process"
145+
numPreferredColumns={2}
146+
>
147+
<TextInput
148+
label="Name"
149+
name=""
150+
value={undefined}
151+
onChange={() => {}}
152+
error={undefined}
153+
disabled={disabled}
154+
/>
155+
<TextInput
156+
label="Title"
157+
name=""
158+
value={undefined}
159+
onChange={() => {}}
160+
error={undefined}
161+
disabled={disabled}
162+
/>
163+
<TextInput
164+
label="Email"
165+
name=""
166+
value={undefined}
167+
onChange={() => {}}
168+
error={undefined}
169+
disabled={disabled}
170+
/>
171+
<TextInput
172+
label="Phone Number"
173+
name=""
174+
value={undefined}
175+
onChange={() => {}}
176+
error={undefined}
177+
disabled={disabled}
178+
/>
179+
</InputSection>
180+
<InputSection
181+
title="IFRC Contact"
182+
description="The most senior staff in the National Society responsible and knowledgable about the disaster event."
183+
numPreferredColumns={2}
184+
>
185+
<TextInput
186+
label="Name"
187+
name=""
188+
value={undefined}
189+
onChange={() => {}}
190+
error={undefined}
191+
disabled={disabled}
192+
/>
193+
<TextInput
194+
label="Title"
195+
name=""
196+
value={undefined}
197+
onChange={() => {}}
198+
error={undefined}
199+
disabled={disabled}
200+
/>
201+
<TextInput
202+
label="Email"
203+
name=""
204+
value={undefined}
205+
onChange={() => {}}
206+
error={undefined}
207+
disabled={disabled}
208+
/>
209+
<TextInput
210+
label="Phone Number"
211+
name=""
212+
value={undefined}
213+
onChange={() => {}}
214+
error={undefined}
215+
disabled={disabled}
216+
/>
217+
</InputSection>
218+
<InputSection
219+
title="DREF Focal Point"
220+
description="The DREF contact person form IFRCF"
221+
numPreferredColumns={2}
222+
>
223+
<TextInput
224+
label="Name"
225+
name=""
226+
value={undefined}
227+
onChange={() => {}}
228+
error={undefined}
229+
disabled={disabled}
230+
/>
231+
<TextInput
232+
label="Title"
233+
name=""
234+
value={undefined}
235+
onChange={() => {}}
236+
error={undefined}
237+
disabled={disabled}
238+
/>
239+
<TextInput
240+
label="Email"
241+
name=""
242+
value={undefined}
243+
onChange={() => {}}
244+
error={undefined}
245+
disabled={disabled}
246+
/>
247+
<TextInput
248+
label="Phone Number"
249+
name=""
250+
value={undefined}
251+
onChange={() => {}}
252+
error={undefined}
253+
disabled={disabled}
254+
/>
255+
</InputSection>
256+
</Container>
19257
</Page>
20258
);
21259
}

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

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

0 commit comments

Comments
 (0)