diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/EapApplications/index.tsx index dd9f788b5..4714d689a 100644 --- a/app/src/views/EapApplications/index.tsx +++ b/app/src/views/EapApplications/index.tsx @@ -15,9 +15,8 @@ export function Component() { - {/* FIXME: Add eap registration link */} {strings.eapRegistrationLink} diff --git a/app/src/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json index 9b7a06dd0..6a935c53f 100644 --- a/app/src/views/EapRegistration/i18n.json +++ b/app/src/views/EapRegistration/i18n.json @@ -2,6 +2,41 @@ "namespace": "eapRegistration", "strings": { "eapRegistrationHeading": "EAP Development Registration", - "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." + "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.", + "eapApplicationDetails": "Application Details", + "eapNationalSociety": "National Society (NS)", + "eapNationalSocietyDescription": "Select National Society that is planning to apply for the EAP", + "eapCountry": "Country", + "eapCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.", + "eapDisasterType": "Disaster Type", + "eapDisasterTypeDescription": "Select the disaster type for which the EAP is needed.", + "eapType": "EAP Type", + "eapTypeDescription": "Select the EAP type. Find details of both under this link.", + "eapSubmission": "Expected Time of Submission", + "eapSubmissionDescription": "Include the proposed time of submission, accounting for the time it will take to deliver the application.", + "eapPartnersInvolved": "Partners Involved", + "eapPartnersInvolvedDescription": "Select from the list the partners involved in this process. Add as many as needed or select not applicable if no partners involved.", + "eapContacts": "Contacts", + "eapNSContact": "National Society Contact", + "eapNSContactDescription": "National Society contact responsible for the EAP process", + "eapNSName": "Name", + "eapNSTitle": "Title", + "eapNSEmail": "Email", + "eapNSPhoneNumber": "Phone Number", + "eapIFRCContact": "IFRC Contact", + "eapIFRCContactDescription": "The most senior staff in the National Society responsible and knowledgable about the disaster event.", + "eapIFRCName": "Name", + "eapIFRCTitle": "Title", + "eapIFRCEmail": "Email", + "eapIFRCPhoneNumber": "Phone Number", + "eapFocalPoint": "DREF Focal Point", + "eapFocalPointDescription": "The DREF contact person form IFRC", + "eapFocalPointName": "Name", + "eapFocalPointTitle": "Title", + "eapFocalPointEmail": "Email", + "eapFocalPointPhoneNumber": "Phone Number", + "eapSubmitButton": "Submit", + "eapCancelButton": "Cancel", + "eapSaveAndClose": "Save and Close" } } diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx index 31698b3c5..7eb081037 100644 --- a/app/src/views/EapRegistration/index.tsx +++ b/app/src/views/EapRegistration/index.tsx @@ -1,21 +1,359 @@ +import { useCallback } from 'react'; +import { + Button, + Container, + DateInput, + InputSection, + MultiSelectInput, + RadioInput, + TextInput, +} from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + createSubmitHandler, + getErrorObject, + useForm, +} from '@togglecorp/toggle-form'; +import CountrySelectInput from '#components/domain/CountrySelectInput'; +import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput'; +import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput'; import Page from '#components/Page'; +import { + formSchema, + type FormType, +} from './schema'; + import i18n from './i18n.json'; +import styles from './styles.module.css'; + +interface Option { + label: string; + key: string; +} + +function partnerInvolvedKeySelector(option: Option) { + return option.key; +} +function partnerInvolvedLabelSelector(option: Option) { + return option.label; +} + +// FIXME: This is dummy data +const eapFormOptions = [ + { key: 'full', label: 'Full application' }, + { key: 'simplified', label: 'Simplified application' }, + { key: 'not_sure', label: 'Not Sure' }, +]; + +function eapTypeKeySelector(option: Option) { + return option.key; +} +function eapTypeLabelSelector(option: Option) { + return option.label; +} + +interface Props { + disabled?: boolean; +} /** @knipignore */ // eslint-disable-next-line import/prefer-default-export -export function Component() { +export function Component(props: Props) { + const { + disabled, + } = props; + const strings = useTranslation(i18n); + const defaultFormValue: FormType = {}; + + const { + value, + setFieldValue, + error: formError, + setError, + validate, + } = useForm(formSchema, { value: defaultFormValue }); + + const error = getErrorObject(formError); + + const handleCountryChange = useCallback( + (val: number | undefined, name: 'country') => { + setFieldValue(val, name); + }, + [setFieldValue], + ); + + const eapRegistration = useCallback(() => { + const handler = createSubmitHandler( + validate, + setError, + (val) => { + // FIXME: Remove this after API integration + // eslint-disable-next-line no-console + console.log('value', val); + }, + ); + handler(); + }, [ + setError, + validate, + ]); + + const handleFormSubmit = createSubmitHandler(validate, setError, eapRegistration); + return ( + + + + )} + withBackgroundColorInMainSection > - {/* TODO: Add the form */} - Application Details + + + + + + + + + + + + + + + + + + {/* FIXME: Add Partners Involved Options */} + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
); } diff --git a/app/src/views/EapRegistration/schema.ts b/app/src/views/EapRegistration/schema.ts new file mode 100644 index 000000000..7417e0a1c --- /dev/null +++ b/app/src/views/EapRegistration/schema.ts @@ -0,0 +1,67 @@ +import { + type ObjectSchema, + type PartialForm, +} from '@togglecorp/toggle-form'; + +export interface EapRegistrationInput { + national_society: number; + country: number; + disaster_type: number; + eap_type: string; + eap_start_date: string; + eap_end_date: string; + partner_involved: string[]; + eap_national_society_name: string; + eap_national_society_title: string; + eap_national_society_email: string; + eap_national_society_phone_number: string; + eap_ifrc_name: string; + eap_ifrc_title: string; + eap_ifrc_email: string; + eap_ifrc_phone_number: string; + eap_focal_point_name: string; + eap_focal_point_title: string; + eap_focal_point_email: string; + eap_focal_point_phone_number: string; +} + +export type FormType = PartialForm; + +type FormSchema = ObjectSchema; +export const formSchema: FormSchema = { + fields: () => ({ + national_society: { + required: true, + }, + country: { + required: true, + }, + disaster_type: { + required: true, + }, + eap_type: { + required: true, + }, + eap_start_date: { + required: true, + }, + eap_end_date: { + required: true, + }, + partner_involved: { + required: true, + }, + eap_national_society_name: {}, + eap_national_society_title: {}, + eap_national_society_email: {}, + eap_national_society_phone_number: {}, + eap_ifrc_name: {}, + eap_ifrc_title: {}, + eap_ifrc_email: {}, + eap_ifrc_phone_number: {}, + eap_focal_point_name: {}, + eap_focal_point_title: {}, + eap_focal_point_email: {}, + eap_focal_point_phone_number: {}, + }), +}; diff --git a/app/src/views/EapRegistration/styles.module.css b/app/src/views/EapRegistration/styles.module.css new file mode 100644 index 000000000..ccb3cb2cb --- /dev/null +++ b/app/src/views/EapRegistration/styles.module.css @@ -0,0 +1,17 @@ +.eap-registration-form { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + + .content { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + } + + .footer { + display: flex; + align-items: center; + justify-content: center; + } +}