diff --git a/app/package.json b/app/package.json index ea3ee7d2a9..fd752598d3 100644 --- a/app/package.json +++ b/app/package.json @@ -48,6 +48,7 @@ "@togglecorp/toggle-request": "^1.0.0-beta.3", "@turf/bbox": "^6.5.0", "@turf/buffer": "^6.5.0", + "diff": "^8.0.2", "exceljs": "^4.3.0", "file-saver": "^2.0.5", "html-to-image": "^1.11.11", diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx index b25ad826a3..ec94e3d3b5 100644 --- a/app/src/App/routes/index.tsx +++ b/app/src/App/routes/index.tsx @@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({ }, }); +type DefaultDrefDetailChild = 'dref-detail'; +const drefProcessLayout = customWrapRoute({ + parent: rootLayout, + path: 'dref-process', + forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild, + component: { + render: () => import('#views/DrefProcess'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'DREF Process', + visibility: 'anything', + }, +}); + +const drefDetail = customWrapRoute({ + parent: drefProcessLayout, + path: 'dref-detail' satisfies DefaultDrefDetailChild, + component: { + render: () => import('#views/DrefDetail'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Response and Imminent DREF', + visibility: 'anything', + }, +}); + +const eapDetail = customWrapRoute({ + parent: drefProcessLayout, + path: 'eap-detail', + component: { + render: () => import('#views/EarlyActionProtocols'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Early Action Protocols', + visibility: 'anything', + }, +}); + type DefaultPreparednessChild = 'global-summary'; const preparednessLayout = customWrapRoute({ parent: rootLayout, @@ -715,6 +759,49 @@ const accountMyFormsThreeW = customWrapRoute({ }, }); +const accountMyFormsEap = customWrapRoute({ + parent: accountMyFormsLayout, + path: 'eap-applications', + component: { + render: () => import('#views/AccountMyFormsEap'), + props: {}, + }, + context: { + title: 'Account - EAP Applications', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const fullEapForm = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/full', + component: { + render: () => import('#views/EapFullForm'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Full Forms', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const simplifiedEapForm = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/simplified', + component: { + render: () => import('#views/SimplifiedEapForm'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Simplified EAP Form', + visibility: 'is-authenticated', + }, +}); + const accountNotifications = customWrapRoute({ parent: accountLayout, path: 'notifications', @@ -1094,6 +1181,65 @@ const fieldReportDetails = customWrapRoute({ }, }); +type DefaultEapRegistrationChild = 'new'; +const eapRegistrationLayout = customWrapRoute({ + parent: rootLayout, + path: 'eap-registration', + forwardPath: 'new' satisfies DefaultEapRegistrationChild, + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'EAP Process', + visibility: 'is-authenticated', + }, +}); + +const newEapDevelopmentRegistration = customWrapRoute({ + parent: eapRegistrationLayout, + path: 'new' satisfies DefaultEapRegistrationChild, + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'New EAP Development Registration', + visibility: 'is-authenticated', + permissions: ({ isGuestUser }) => !isGuestUser, + }, +}); + +const eapDevelopmentRegistrationForm = customWrapRoute({ + parent: eapRegistrationLayout, + path: ':eapId/', + component: { + render: () => import('#views/EapRegistration'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'View EAP', + visibility: 'is-authenticated', + }, +}); + +const simplifiedEapExport = customWrapRoute({ + parent: rootLayout, + path: 'eap/:eapId/export', + component: { + render: () => import('#views/SimplifiedEapExport'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Simplified EAP Export', + visibility: 'is-authenticated', + }, +}); + type DefaultPerProcessChild = 'new'; const perProcessLayout = customWrapRoute({ parent: rootLayout, @@ -1317,6 +1463,7 @@ const wrappedRoutes = { accountMyFormsPer, accountMyFormsDref, accountMyFormsThreeW, + accountMyFormsEap, resources, search, allThreeWProject, @@ -1353,6 +1500,9 @@ const wrappedRoutes = { termsAndConditions, operationalLearning, montandonLandingPage, + newEapDevelopmentRegistration, + fullEapForm, + simplifiedEapForm, ...regionRoutes, ...countryRoutes, ...surgeRoutes, @@ -1363,6 +1513,12 @@ const wrappedRoutes = { // Redirects preparednessOperationalLearning, obsoleteFieldReportDetails, + drefDetail, + eapDetail, + drefProcessLayout, + eapRegistrationLayout, + eapDevelopmentRegistrationForm, + simplifiedEapExport, }; export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes)); diff --git a/app/src/components/Navbar/i18n.json b/app/src/components/Navbar/i18n.json index 0132def3ce..e0ed399edb 100644 --- a/app/src/components/Navbar/i18n.json +++ b/app/src/components/Navbar/i18n.json @@ -40,6 +40,7 @@ "userMenuDrefProcessDescription":"Disaster Response Emergency Fund (DREF) is the quickest way of getting funding directly to local humanitarian actors. Use one of the links below to submit a DREF Application or an update.", "userMenuCreateDrefApplication":"Create DREF Application", "myDrefApplications": "My DREF Applications", + "earlyActionProtocols": "Early Action Protocols (EAP)", "userMenuSurge":"The section displays the summary of deployments within current and ongoing emergencies. Login to see available details", "userMenuSurgeGlobalOverview":"Surge Global Overview", "userMenuOperationalToolbox":"Operational Toolbox", diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx index be067b2ef4..0786bdea76 100644 --- a/app/src/components/Navbar/index.tsx +++ b/app/src/components/Navbar/index.tsx @@ -370,12 +370,20 @@ function Navbar(props: Props) { {strings.myDrefApplications} + + {strings.earlyActionProtocols} + ['schemas']['ExportStatusEnum']; +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; @@ -45,8 +49,10 @@ function PerExportModal(props: Props) { export_id: Number(perId), export_type: 'per' as const, per_country: Number(countryId), - is_pga: false, - }), + is_pga: undefined, + version: undefined, + diff: undefined, + } satisfies ExportBody), [perId, countryId], ); diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx new file mode 100644 index 0000000000..a5be123493 --- /dev/null +++ b/app/src/components/domain/Admin2Input/index.tsx @@ -0,0 +1,337 @@ +import { + useCallback, + useMemo, +} from 'react'; +import { CloseLineIcon } from '@ifrc-go/icons'; +import { + Button, + ButtonLayout, + Container, + InputError, + ListView, + Modal, +} from '@ifrc-go/ui'; +import { useBooleanState } from '@ifrc-go/ui/hooks'; +import { isNotDefined } from '@togglecorp/fujs'; +import { + MapBounds, + MapLayer, + MapSource, +} from '@togglecorp/re-map'; +import turfBbox from '@turf/bbox'; +import { + type FillLayer, + type LineLayer, + type MapboxGeoJSONFeature, + type SymbolLayer, +} from 'mapbox-gl'; + +import GoMapContainer from '#components/GoMapContainer'; +import useCountry from '#hooks/domain/useCountry'; +import { + COLOR_BLACK, + COLOR_DARK_GREY, + COLOR_LIGHT_GREY, + COLOR_PRIMARY_RED, + COLOR_TEXT, + COLOR_TEXT_ON_DARK, + DEFAULT_MAP_PADDING, + DURATION_MAP_ZOOM, +} from '#utils/constants'; + +import BaseMap from '../BaseMap'; + +interface Props { + name: NAME; + value: number[] | null | undefined; + onChange: (newValue: number[] | undefined, name: NAME) => void; + countryId: number; + error?: React.ReactNode; +} + +function Admin2Input(props: Props) { + const { + name, + value, + onChange, + countryId, + error, + } = props; + + const countryDetails = useCountry({ id: countryId }); + const iso3 = countryDetails?.iso3; + + const bounds = useMemo(() => { + if (!countryDetails) { + return undefined; + } + + return turfBbox(countryDetails.bbox); + }, [ + countryDetails, + ]); + + const adminOneLabelLayerOptions: Omit = useMemo(() => ({ + type: 'symbol', + paint: { + 'text-opacity': [ + 'match', + ['get', 'country_id'], + countryId, + 1, + 0, + ], + }, + layout: { + 'text-offset': [ + 0, 1, + ], + visibility: 'visible', + }, + }), [countryId]); + + const adminTwoLineLayerOptions: Omit | undefined = useMemo(() => { + if (!iso3) { + return undefined; + } + + return { + type: 'line', + 'source-layer': `go-admin2-${iso3}-staging`, + paint: { + 'line-color': COLOR_BLACK, + 'line-opacity': 1, + }, + layout: { + visibility: 'visible', + }, + }; + }, [iso3]); + + const adminTwoFillLayerOptions = useMemo((): Omit | undefined => { + if (!iso3) { + return undefined; + } + const defaultColor: NonNullable['fill-color'] = [ + 'case', + ['boolean', ['feature-state', 'hovered'], false], + COLOR_DARK_GREY, + COLOR_LIGHT_GREY, + ]; + const options: Omit = { + type: 'fill', + 'source-layer': `go-admin2-${iso3}-staging`, + paint: { + 'fill-color': (!value || value.length <= 0) + ? defaultColor + : [ + 'match', + ['get', 'id'], + ...value.map((admin2Id) => [ + admin2Id, + COLOR_PRIMARY_RED, + ]).flat(), + defaultColor, + ], + 'fill-outline-color': COLOR_DARK_GREY, + 'fill-opacity': 1, + }, + layout: { + visibility: 'visible', + }, + }; + return options; + }, [iso3, value]); + + const adminTwoLabelLayerOptions = useMemo((): Omit | undefined => { + const textColor: NonNullable['text-color'] = ( + value && value.length > 0 + ? [ + 'match', + ['get', 'id'], + ...value.map((admin2Id) => [ + admin2Id, + COLOR_TEXT_ON_DARK, + ]).flat(), + COLOR_TEXT, + ] + : COLOR_TEXT + ); + + const options: Omit = { + type: 'symbol', + 'source-layer': `go-admin2-${iso3}-centroids`, + paint: { + 'text-color': textColor, + 'text-opacity': 1, + }, + layout: { + 'text-field': ['get', 'name'], + 'text-anchor': 'center', + 'text-size': 10, + }, + }; + return options; + }, [iso3, value]); + + const handleAdmin2Click = useCallback((clickedFeature: MapboxGeoJSONFeature) => { + const properties = clickedFeature?.properties as { + id: number; + admin1_id: number; + code: string; + admin1_name: string; + name?: string; + }; + if (isNotDefined(properties.id)) { + return false; + } + + const valueIndex = value?.findIndex((admin2Id) => admin2Id === properties.id) ?? -1; + + if (valueIndex === -1) { + onChange([...(value ?? []), properties.id], name); + } else { + onChange(value?.toSpliced(valueIndex, 1), name); + } + + return false; + }, [value, name, onChange]); + + const [ + showModal, + { + setTrue: setShowModalTrue, + setFalse: setShowModalFalse, + }, + ] = useBooleanState(false); + + const removeSelection = useCallback((admin2Id: number) => { + const index = value?.findIndex((selectedAdmin2Id) => selectedAdmin2Id === admin2Id) ?? -1; + + if (index !== -1) { + onChange(value?.toSpliced(index, 1), name); + } + }, [value, onChange, name]); + + return ( + + + Select areas + + )} + withCompactMessage + empty={!value || value.length === 0} + > + + {value?.map((admin2Id) => ( + + + + )} + > + {admin2Id} + + ))} + + + {error && ( + + {error} + + )} + {showModal && ( + + Done + + )} + > + + )} + > + + {bounds && ( + + )} + {/* eslint-disable-next-line max-len */} + {adminTwoFillLayerOptions && adminTwoLineLayerOptions && adminTwoLabelLayerOptions && ( + <> + + + + + + + + + )} + + + )} + + ); +} + +export default Admin2Input; diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx index ec4a793584..125d6138fc 100644 --- a/app/src/components/domain/BaseMap/index.tsx +++ b/app/src/components/domain/BaseMap/index.tsx @@ -28,7 +28,7 @@ export type Props = Omit & { withDisclaimer?: boolean; } & Partial>; -function BaseMap(props: Props) { +function BaseMapWithoutErrorBoundary(props: Props) { const { baseLayers, mapStyle, @@ -101,7 +101,7 @@ function BaseMap(props: Props) { ); } -function BaseMapWithErrorBoundary(props: Props) { +function BaseMap(props: Props) { return ( )} > - @@ -118,4 +118,4 @@ function BaseMapWithErrorBoundary(props: Props) { ); } -export default BaseMapWithErrorBoundary; +export default BaseMap; diff --git a/app/src/components/domain/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx index 0bcebcca03..837b67168f 100644 --- a/app/src/components/domain/DrefExportModal/index.tsx +++ b/app/src/components/domain/DrefExportModal/index.tsx @@ -24,6 +24,7 @@ import { type TypeOfDrefEnum, } from '#utils/constants'; import { + type GoApiBody, useLazyRequest, useRequest, } from '#utils/restRequest'; @@ -33,6 +34,7 @@ import styles from './styles.module.css'; type ExportTypeEnum = components<'read'>['schemas']['ExportTypeEnum']; type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum']; +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; @@ -83,9 +85,11 @@ function DrefExportModal(props: Props) { export_id: id, export_type: type, is_pga: includePga, - selector: '#pdf-preview-ready', + // selector: '#pdf-preview-ready', per_country: undefined, - }; + version: undefined, + diff: undefined, + } satisfies ExportBody; }, [ id, diff --git a/app/src/components/domain/EapExportModal/i18n.json b/app/src/components/domain/EapExportModal/i18n.json new file mode 100644 index 0000000000..19fee027c1 --- /dev/null +++ b/app/src/components/domain/EapExportModal/i18n.json @@ -0,0 +1,13 @@ +{ + "namespace": "eapExportModal", + "strings": { + "exportTitle": "Export EAP", + "preparingExport": "Preparing for export...", + "waitingExport": "Waiting for the export to complete...", + "exportFailed": "Export failed", + "exportSuccessfully": "Export completed successfully!", + "downloadLinkDescription": "Click on the download link below!", + "downloadLinkLabel": "Download PDF", + "failureToExportMessage":"Failed to export PDF." + } +} diff --git a/app/src/components/domain/EapExportModal/index.tsx b/app/src/components/domain/EapExportModal/index.tsx new file mode 100644 index 0000000000..669d7a6b65 --- /dev/null +++ b/app/src/components/domain/EapExportModal/index.tsx @@ -0,0 +1,197 @@ +import { + useEffect, + useMemo, + useState, +} from 'react'; +import { DownloadLineIcon } from '@ifrc-go/icons'; +import { + Message, + Modal, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + isDefined, + isNotDefined, +} from '@togglecorp/fujs'; + +import Link from '#components/Link'; +import { type components } from '#generated/types'; +import useAlert from '#hooks/useAlert'; +import { EAP_TYPE_SIMPLIFIED } from '#utils/constants'; +import { + type GoApiBody, + useLazyRequest, + useRequest, +} from '#utils/restRequest'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +type EapType = components['schemas']['EapEapTypeEnumKey']; +type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum']; + +type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>; + +const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum; +const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum; +const EXPORT_STATUS_ERRORED = 2 satisfies ExportStatusEnum; + +interface Props { + eapId: number; + eapType: EapType; + version?: number; + onClose: () => void; + diff?: boolean; +} + +function EapExportModal(props: Props) { + const { + eapId, + eapType, + onClose, + version, + diff, + } = props; + + const strings = useTranslation(i18n); + const alert = useAlert(); + + const [exportId, setExportId] = useState(); + + const exportTriggerBody = useMemo( + () => ({ + export_id: eapId, + export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified' : 'full', + selector: '#pdf-preview-ready', + is_pga: undefined, + per_country: undefined, + version, + diff, + }), + [eapId, eapType, version, diff], + ); + + const { + pending: exportPending, + error: exportError, + trigger: triggerExport, + } = useLazyRequest({ + method: 'POST', + useCurrentLanguageForMutation: true, + url: '/api/v2/pdf-export/', + body: exportTriggerBody, + onSuccess: (response) => { + if (isDefined(response.id)) { + setExportId(response.id); + } + }, + onFailure: () => { + alert.show( + strings.failureToExportMessage, + { variant: 'danger' }, + ); + }, + }); + + useEffect(() => { + triggerExport(null); + }, [triggerExport]); + + const { + pending: exportStatusPending, + response: exportStatusResponse, + error: exportStatusError, + } = useRequest({ + skip: isNotDefined(exportId), + url: '/api/v2/pdf-export/{id}/', + // FIXME: typings should be fixed in the server + pathVariables: isDefined(exportId) ? ({ id: String(exportId) }) : undefined, + shouldPoll: (poll) => { + if (poll?.errored || poll?.value?.status !== EXPORT_STATUS_PENDING) { + return -1; + } + + return 5000; + }, + }); + + const exportStatus = useMemo(() => { + if (exportPending) { + return 'PREPARE'; + } + + if (exportStatusPending || exportStatusResponse?.status === EXPORT_STATUS_PENDING) { + return 'WAITING'; + } + + if (isDefined(exportStatusError) + || isDefined(exportError) + || (isDefined(exportStatusResponse) + && exportStatusResponse.status === EXPORT_STATUS_ERRORED) + ) { + return 'FAILED'; + } + + if (isDefined(exportStatusResponse) + && isDefined(exportStatusResponse.status === EXPORT_STATUS_COMPLETED) + && isDefined(exportStatusResponse.pdf_file) + ) { + return 'SUCCESS'; + } + + return 'NOT_STARTED'; + }, [ + exportPending, + exportStatusError, + exportError, + exportStatusPending, + exportStatusResponse, + ]); + + return ( + + {exportStatus === 'PREPARE' && ( + + )} + {exportStatus === 'WAITING' && ( + + )} + {exportStatus === 'FAILED' && ( + + )} + {exportStatus === 'SUCCESS' && ( + } + external + > + {strings.downloadLinkLabel} + + )} + /> + )} + + ); +} + +export default EapExportModal; diff --git a/app/src/components/domain/EapExportModal/styles.module.css b/app/src/components/domain/EapExportModal/styles.module.css new file mode 100644 index 0000000000..2de1f5fc87 --- /dev/null +++ b/app/src/components/domain/EapExportModal/styles.module.css @@ -0,0 +1,5 @@ +.dref-export-modal { + .icon { + font-size: var(--go-ui-height-icon-multiplier); + } +} diff --git a/app/src/components/domain/GoMultiFileInput/index.tsx b/app/src/components/domain/GoMultiFileInput/index.tsx index d4f8f74916..c15ffb3603 100644 --- a/app/src/components/domain/GoMultiFileInput/index.tsx +++ b/app/src/components/domain/GoMultiFileInput/index.tsx @@ -31,7 +31,7 @@ import { transformObjectError } from '#utils/restRequest/error'; import i18n from './i18n.json'; -export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/'; +export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/' | '/api/v2/eap-file/multiple/'; interface FileUploadResult { id: number; diff --git a/app/src/components/domain/GoSingleFileInput/index.tsx b/app/src/components/domain/GoSingleFileInput/index.tsx index dc885dfe7b..af10bd7883 100644 --- a/app/src/components/domain/GoSingleFileInput/index.tsx +++ b/app/src/components/domain/GoSingleFileInput/index.tsx @@ -23,7 +23,7 @@ import { transformObjectError } from '#utils/restRequest/error'; import i18n from './i18n.json'; -export type SupportedPaths = '/api/v2/per-file/' | '/api/v2/dref-files/' | '/api/v2/flash-update-file/' | '/api/v2/per-document-upload/'; +export type SupportedPaths = '/api/v2/per-file/' | '/api/v2/dref-files/' | '/api/v2/flash-update-file/' | '/api/v2/per-document-upload/' | '/api/v2/eap-file/'; type Props = Omit, 'value'> & { name: NAME; diff --git a/app/src/components/domain/ImageWithCaptionInput/i18n.json b/app/src/components/domain/ImageWithCaptionInput/i18n.json index 2ac3a6a3ec..f10ddae406 100644 --- a/app/src/components/domain/ImageWithCaptionInput/i18n.json +++ b/app/src/components/domain/ImageWithCaptionInput/i18n.json @@ -1,7 +1,8 @@ { "namespace": "imageWithCaptionInput", "strings": { - "imageWithCaptionEnterCaption": "Enter Caption", - "imageWithCaptionPreview": "preview" + "captionInputPlaceholder": "Enter Caption", + "previewFallbackText": "Preview not available", + "defaultLabel": "Select an image" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/ImageWithCaptionInput/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx index cf74833d98..ce5df74d19 100644 --- a/app/src/components/domain/ImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx @@ -21,22 +21,28 @@ import NonFieldError from '#components/NonFieldError'; import i18n from './i18n.json'; -type Value = { - id?: number | undefined; +type InputValue = { + id?: number; client_id: string; - caption?: string | undefined; + caption?: string | null; }; -interface Props { +type OutputValue = { + id?: number; + client_id: string; + caption?: string; +} + +interface Props { className?: string; - name: N; + name: NAME; url: SupportedPaths; - value: Value | null | undefined; - onChange: (value: SetValueArg | undefined, name: N) => void; - error: ObjectError | undefined; + value: InputValue | null | undefined; + onChange: (value: SetValueArg | undefined, name: NAME) => void; + error: ObjectError | undefined; fileIdToUrlMap: Record; setFileIdToUrlMap?: React.Dispatch>>; - label: React.ReactNode; + label?: React.ReactNode; before?: React.ReactNode; after?: React.ReactNode; disabled?: boolean; @@ -46,6 +52,8 @@ interface Props { // FIXME: Move this to components function ImageWithCaptionInput(props: Props) { + const strings = useTranslation(i18n); + const { className, readOnly, @@ -56,15 +64,13 @@ function ImageWithCaptionInput(props: Props) setFileIdToUrlMap, onChange, error: formError, - label, + label = strings.defaultLabel, before, after, disabled, useCurrentLanguageForMutation, } = props; - const strings = useTranslation(i18n); - const setFieldValue = useFormObject( name, onChange, @@ -113,13 +119,14 @@ function ImageWithCaptionInput(props: Props) // FIXME: Make Go single file input with preview description={isDefined(fileUrl) ? ( {strings.imageWithCaptionPreview} ) : undefined} clearable useCurrentLanguageForMutation={useCurrentLanguageForMutation} + error={error?.id} > {label} @@ -130,7 +137,7 @@ function ImageWithCaptionInput(props: Props) readOnly={readOnly} onChange={setFieldValue} error={error?.caption} - placeholder={strings.imageWithCaptionEnterCaption} + placeholder={strings.captionInputPlaceholder} disabled={disabled} /> )} diff --git a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json index a9dca445a8..d454e9df57 100644 --- a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json +++ b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json @@ -1,8 +1,9 @@ { "namespace": "multiImageWithCaptionInput", "strings": { - "removeImagesButtonTitle": "Remove", - "imagePreviewAlt": "preview", - "enterCaptionPlaceholder": "Enter Caption" + "removeImageButtonTitle": "Remove", + "imagePreviewFallbackText": "Preview not available", + "defaultLabel": "Select images", + "captionInputPlaceholder": "Enter caption" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx index c7e2be8461..2222db54b4 100644 --- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx @@ -29,22 +29,28 @@ import NonFieldError from '#components/NonFieldError'; import i18n from './i18n.json'; import styles from './styles.module.css'; -type Value = { +type InputValue = { + id?: number; client_id: string; + caption?: string | null; +}; + +type OutputValue = { id?: number; + client_id: string; caption?: string; -}; +} interface Props { className?: string; name: N; url: SupportedPaths; - value: Value[] | null | undefined; - onChange: (value: SetValueArg, name: N) => void; - error: ArrayError | undefined; + value: InputValue[] | null | undefined; + onChange: (value: SetValueArg, name: N) => void; + error: ArrayError | undefined; fileIdToUrlMap: Record; setFileIdToUrlMap?: React.Dispatch>>; - label: React.ReactNode; + label?: React.ReactNode; readOnly?: boolean; before?: React.ReactNode; after?: React.ReactNode; @@ -54,6 +60,8 @@ interface Props { // FIXME: Move this to components function MultiImageWithCaptionInput(props: Props) { + const strings = useTranslation(i18n); + const { className, name, @@ -63,7 +71,7 @@ function MultiImageWithCaptionInput(props: Prop setFileIdToUrlMap, onChange, error: formError, - label, + label = strings.defaultLabel, readOnly, before, after, @@ -71,8 +79,6 @@ function MultiImageWithCaptionInput(props: Prop useCurrentLanguageForMutation = false, } = props; - const strings = useTranslation(i18n); - const error = getErrorObject(formError); const { @@ -185,8 +191,8 @@ function MultiImageWithCaptionInput(props: Prop (props: Prop /> {strings.imagePreviewAlt} @@ -206,7 +212,7 @@ function MultiImageWithCaptionInput(props: Prop value={fileValue?.caption} onChange={handleCaptionChange} error={imageError?.caption} - placeholder={strings.enterCaptionPlaceholder} + placeholder={strings.captionInputPlaceholder} readOnly={readOnly} disabled={disabled} /> diff --git a/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx new file mode 100644 index 0000000000..d94c47b047 --- /dev/null +++ b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx @@ -0,0 +1,90 @@ +import { useCallback } from 'react'; +import { + type CheckboxProps, + InputError, +} from '@ifrc-go/ui'; +import { _cs } from '@togglecorp/fujs'; + +import styles from './styles.module.css'; + +function TimeSpanCheck(props: CheckboxProps) { + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + checkmarkClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + checkmarkContainerClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + inputClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + labelContainerClassName, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + description, + + className: classNameFromProps, + disabled, + error, + indeterminate, + invertedLogic = false, + label, + name, + onChange, + readOnly, + tooltip, + value, + withBackground, + withDarkBackground, + ...otherProps + } = props; + + const handleChange = useCallback( + (e: React.FormEvent) => { + const v = e.currentTarget.checked; + onChange( + invertedLogic ? !v : v, + name, + ); + }, + [name, onChange, invertedLogic], + ); + + const checked = invertedLogic ? !value : value; + + const className = _cs( + styles.checkbox, + classNameFromProps, + !indeterminate && checked && styles.checked, + withBackground && styles.withBackground, + withDarkBackground && styles.withDarkBackground, + disabled && styles.disabledCheckbox, + readOnly && styles.readOnly, + ); + + return ( + + ); +} + +export default TimeSpanCheck; diff --git a/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css new file mode 100644 index 0000000000..00ca96a56f --- /dev/null +++ b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css @@ -0,0 +1,29 @@ +.time-span-check { + display: flex; + align-items: center; + justify-content: center; + border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-gray-50); + border-radius: var(--go-ui-border-radius-md); + cursor: pointer; + padding: 0 var(--go-ui-spacing-3xs); + min-width: 1.5rem; + height: 1.5rem; + text-align: center; + font-size: var(--go-ui-font-size-sm); + + &.checked { + border-color: var(--go-ui-color-primary-red); + background-color: var(--go-ui-color-primary-red); + color: var(--go-ui-color-text-on-dark); + } + + .input { + position: absolute; + opacity: 0; + margin: 0; + padding: 0; + width: 0; + height: 0; + pointer-events: none; + } +} diff --git a/app/src/components/domain/OperationActivityInput/i18n.json b/app/src/components/domain/OperationActivityInput/i18n.json new file mode 100644 index 0000000000..56bb302145 --- /dev/null +++ b/app/src/components/domain/OperationActivityInput/i18n.json @@ -0,0 +1,8 @@ +{ + "namespace": "operationActivityInput", + "strings": { + "operationPriorityActionLabel": "Priority action", + "operationTimeFrameLabel": "Time Frame", + "operationTimeValueLabel": "Time Value" + } +} diff --git a/app/src/components/domain/OperationActivityInput/index.tsx b/app/src/components/domain/OperationActivityInput/index.tsx new file mode 100644 index 0000000000..408118ed56 --- /dev/null +++ b/app/src/components/domain/OperationActivityInput/index.tsx @@ -0,0 +1,168 @@ +import { useCallback } from 'react'; +import { DeleteBinTwoLineIcon } from '@ifrc-go/icons'; +import { + Button, + Checklist, + InlineLayout, + ListView, + SelectInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { stringValueSelector } from '@ifrc-go/ui/utils'; +import { + type ArrayError, + getErrorObject, + getErrorString, + type SetValueArg, + useFormObject, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; + +import { type OperationActivityFormFields } from './schema'; +import TimeSpanCheck from './TimeSpanCheck'; + +import i18n from './i18n.json'; + +const defaultActivityValue: OperationActivityFormFields = { + client_id: '-1', +}; + +type TimeframeOption = components['schemas']['EapTimeframeEnum']; + +function timeframeKeySelector(option: TimeframeOption) { + return option.key; +} + +const timeValueKeySelector = ( + option: { key: number; value: string }, +) => option.key; + +interface Props { + value: OperationActivityFormFields; + error: ArrayError | undefined; + onChange: (value: SetValueArg, index: number) => void; + onRemove: (index: number) => void; + index: number; + disabled?: boolean; +} + +function OperationActivityInput(props: Props) { + const { + error: errorFromProps, + onChange, + value, + index, + onRemove, + disabled, + } = props; + + const strings = useTranslation(i18n); + + const { + eap_timeframe, + eap_years_timeframe_value, + eap_months_timeframe_value, + eap_days_timeframe_value, + eap_hours_timeframe_value, + } = useGlobalEnums(); + const onFieldChange = useFormObject(index, onChange, defaultActivityValue); + + const error = (value && value.client_id && errorFromProps) + ? getErrorObject(errorFromProps?.[value.client_id]) + : undefined; + + const getTimeValueOptions = useCallback( + (timeframe?: number) => { + switch (timeframe) { + case 10: + return eap_years_timeframe_value ?? []; + case 20: + return eap_months_timeframe_value ?? []; + case 30: + return eap_days_timeframe_value ?? []; + case 40: + return eap_hours_timeframe_value ?? []; + default: + return []; + } + }, + [ + eap_years_timeframe_value, + eap_months_timeframe_value, + eap_days_timeframe_value, + eap_hours_timeframe_value, + ], + ); + + const timeValueOptions = getTimeValueOptions(value?.timeframe); + + const handleTimeframeChange = useCallback( + (newTimeframe: TimeframeOption['key'] | undefined) => { + onFieldChange(newTimeframe, 'timeframe'); + onFieldChange([], 'time_value'); + }, + [onFieldChange], + ); + + return ( + + + + )} + > + + + + + {value?.timeframe && ( + + )} + + + + ); +} + +export default OperationActivityInput; diff --git a/app/src/components/domain/OperationActivityInput/schema.ts b/app/src/components/domain/OperationActivityInput/schema.ts new file mode 100644 index 0000000000..c6042a3e3b --- /dev/null +++ b/app/src/components/domain/OperationActivityInput/schema.ts @@ -0,0 +1,27 @@ +import { + type ObjectSchema, + type PartialForm, + undefinedValue, +} from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; + +type OperationActivity = components['schemas']['OperationActivity']; + +export type OperationActivityFormFields = PartialForm> & { + client_id: string; +} + +type OperationActivitySchema = ObjectSchema; + +const schema: OperationActivitySchema = { + fields: (): ReturnType => ({ + client_id: {}, + id: { defaultValue: undefinedValue }, + activity: {}, + time_value: {}, + timeframe: {}, + }), +}; + +export default schema; diff --git a/app/src/components/printable/PrintableContainer/index.tsx b/app/src/components/printable/PrintableContainer/index.tsx new file mode 100644 index 0000000000..c0d248eefa --- /dev/null +++ b/app/src/components/printable/PrintableContainer/index.tsx @@ -0,0 +1,49 @@ +import { + Heading, + type HeadingProps, +} from '@ifrc-go/ui/printable'; +import { getSpacingValue } from '@ifrc-go/ui/utils'; + +import styles from './styles.module.css'; + +interface Props { + heading?: React.ReactNode; + headingLevel?: HeadingProps['level']; + breakBefore?: boolean; + breakAfter?: boolean; + children?: React.ReactNode; +} + +function PrintableContainer(props: Props) { + const { + heading, + headingLevel = 3, + breakAfter, + breakBefore, + children, + } = props; + + const spacing = getSpacingValue('3xl', -headingLevel); + + return ( + <> + {breakBefore &&
} + {heading && ( + + {heading} + + )} + {children} +
+ {breakAfter &&
} + + ); +} + +export default PrintableContainer; diff --git a/app/src/components/printable/PrintableContainer/styles.module.css b/app/src/components/printable/PrintableContainer/styles.module.css new file mode 100644 index 0000000000..904bf35cd1 --- /dev/null +++ b/app/src/components/printable/PrintableContainer/styles.module.css @@ -0,0 +1,17 @@ +.page-break { + break-before: page; + + @media screen { + margin: var(--go-ui-spacing-lg) 0; + border: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-separator); + } +} + +.heading:has(+ :empty), +.heading:has(+ .heading + :empty) { + display: none; +} + +.block-spacing:has(+ :empty) { + display: none; +} diff --git a/app/src/components/printable/PrintableDataDisplay/index.tsx b/app/src/components/printable/PrintableDataDisplay/index.tsx new file mode 100644 index 0000000000..7d4075356c --- /dev/null +++ b/app/src/components/printable/PrintableDataDisplay/index.tsx @@ -0,0 +1,164 @@ +import { useMemo } from 'react'; +import { + BooleanOutput, + type BooleanOutputProps, + DateOutput, + type DateOutputProps, + NumberOutput, + type NumberOutputProps, +} from '@ifrc-go/ui'; +import { useSpacingToken } from '@ifrc-go/ui/hooks'; +import { + DEFAULT_INVALID_TEXT, + DEFAULT_PRINT_DATE_FORMAT, + fullSpacings, + gapSpacings, + paddingSpacings, + type SpacingType, +} from '@ifrc-go/ui/utils'; +import { _cs } from '@togglecorp/fujs'; + +import styles from './styles.module.css'; + +interface BaseProps { + className?: string; + label?: React.ReactNode; + strongValue?: boolean; + strongLabel?: boolean; + withoutLabelColon?: boolean; + invalidText?: React.ReactNode; + variant?: 'block' | 'inline' | 'contents'; + withPadding?: boolean; + withBackground?: boolean; + spacing?: SpacingType; +} + +interface BooleanProps extends BooleanOutputProps { + valueType: 'boolean', +} + +interface NumberProps extends NumberOutputProps { + valueType: 'number', +} + +interface DateProps extends DateOutputProps { + valueType: 'date', +} + +interface TextProps { + valueType: 'text', + value: string | null | undefined; +} + +interface NodeProps { + valueType?: never; + value?: React.ReactNode; +} + +type Props = BaseProps & ( + NodeProps | TextProps | DateProps | NumberProps | BooleanProps +); + +function PrintableDataDisplay(props: Props) { + const { + className, + label, + strongLabel, + strongValue, + withoutLabelColon, + invalidText = DEFAULT_INVALID_TEXT, + variant = 'inline', + withPadding, + withBackground, + spacing, + ...otherProps + } = props; + + const valueComponent = useMemo(() => { + if (otherProps.valueType === 'number') { + return ( + + ); + } + + if (otherProps.valueType === 'date') { + return ( + + ); + } + + if (otherProps.valueType === 'boolean') { + return ( + + ); + } + + if (!(otherProps.value instanceof Date)) { + return otherProps.value || invalidText; + } + + return invalidText; + }, [otherProps, invalidText]); + + const spacingClassName = useSpacingToken({ + spacing, + offset: -3, + modes: withPadding ? fullSpacings : gapSpacings, + }); + + const innerPaddingClassName = useSpacingToken({ + spacing, + offset: -3, + modes: paddingSpacings, + }); + + return ( +
+
+ {label} +
+
+ {valueComponent} +
+
+ ); +} + +export default PrintableDataDisplay; diff --git a/app/src/components/printable/PrintableDataDisplay/styles.module.css b/app/src/components/printable/PrintableDataDisplay/styles.module.css new file mode 100644 index 0000000000..7add934f47 --- /dev/null +++ b/app/src/components/printable/PrintableDataDisplay/styles.module.css @@ -0,0 +1,44 @@ +.printable-data-display { + &.inline-variant { + display: flex; + flex-direction: row; + } + + &.block-variant { + display: flex; + flex-direction: column; + } + + &.contents-variant { + display: contents; + } + + &.with-background { + background-color: var(--go-ui-color-background); + + &.contents-variant { + .value, + .label { + background-color: var(--go-ui-color-background); + } + } + } + + .label { + &.with-colon::after { + content: ':'; + } + } + + .value { + &.text-type { + text-align: justify; + white-space: pre-wrap; + } + } + + .strong { + color: var(--go-ui-color-black); + font-weight: var(--go-ui-font-weight-semibold); + } +} diff --git a/app/src/components/printable/PrintableDescription/index.tsx b/app/src/components/printable/PrintableDescription/index.tsx new file mode 100644 index 0000000000..1843a9402a --- /dev/null +++ b/app/src/components/printable/PrintableDescription/index.tsx @@ -0,0 +1,88 @@ +import { + Fragment, + useMemo, +} from 'react'; +import { + _cs, + isNotDefined, +} from '@togglecorp/fujs'; +import { diffSentences } from 'diff'; + +import styles from './styles.module.css'; + +interface Props { + value?: string | null; + className?: string; + prevValue?: string | null; +} + +function PrintableDescription(props: Props) { + const { + className, + value, + prevValue, + } = props; + + const diff = useMemo(() => { + if (isNotDefined(value) || isNotDefined(prevValue)) { + return undefined; + } + + return diffSentences(prevValue, value); + }, [value, prevValue]); + + if (isNotDefined(diff)) { + return ( +
+ {value} +
+ ); + } + + return ( +
+ {diff.map((part, index) => { + const { added, removed, value: partValue } = part; + + if (added) { + return ( + + {partValue} + + ); + } + + if (removed) { + return ( + + {partValue} + + ); + } + + return ( + // eslint-disable-next-line react/no-array-index-key + + {partValue} + + ); + })} +
+ ); +} + +export default PrintableDescription; diff --git a/app/src/components/printable/PrintableDescription/styles.module.css b/app/src/components/printable/PrintableDescription/styles.module.css new file mode 100644 index 0000000000..a52f405f09 --- /dev/null +++ b/app/src/components/printable/PrintableDescription/styles.module.css @@ -0,0 +1,18 @@ +.printable-description { + text-align: justify; + white-space: pre-wrap; + overflow-wrap: break-word; + + &.with-diff-view { + .added { + background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent); + color: var(--go-ui-color-green); + } + + .removed { + background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent); + text-decoration: line-through; + color: var(--go-ui-color-red); + } + } +} diff --git a/app/src/components/printable/PrintablePage/index.tsx b/app/src/components/printable/PrintablePage/index.tsx new file mode 100644 index 0000000000..66c9583459 --- /dev/null +++ b/app/src/components/printable/PrintablePage/index.tsx @@ -0,0 +1,101 @@ +import React, { + useEffect, + useRef, + useState, +} from 'react'; +import { Heading } from '@ifrc-go/ui/printable'; +import { _cs } from '@togglecorp/fujs'; + +import ifrcLogo from '#assets/icons/ifrc-square.png'; + +import styles from './styles.module.css'; + +interface Props { + className?: string; + children: React.ReactNode; + heading: React.ReactNode; + description: React.ReactNode; + dataReady?: boolean; +} + +function PrintablePage(props: Props) { + const { + className, + children, + heading, + description, + dataReady = false, + } = props; + + const [previewReady, setPreviewReady] = useState(false); + + const mainRef = useRef(null); + + useEffect(() => { + if (!dataReady) { + return; + } + + const mainContainer = mainRef.current; + + async function waitForImages() { + if (!mainContainer) { + return; + } + + const images = mainContainer.querySelectorAll('img'); + + if (images.length === 0) { + setPreviewReady(true); + return; + } + + const promises = Array.from(images).map( + (image) => { + if (image.complete) { + return undefined; + } + + return new Promise((accept) => { + image.addEventListener('load', () => { + accept(true); + }); + }); + }, + ); + + await Promise.all(promises); + setPreviewReady(true); + } + + waitForImages(); + }, [dataReady]); + + return ( +
+
+ IFRC + + {heading} + +
+ {description} +
+
+ {children} + {previewReady &&
} +
+ ); +} + +export default PrintablePage; diff --git a/app/src/components/printable/PrintablePage/styles.module.css b/app/src/components/printable/PrintablePage/styles.module.css new file mode 100644 index 0000000000..06f063c82c --- /dev/null +++ b/app/src/components/printable/PrintablePage/styles.module.css @@ -0,0 +1,38 @@ +.printable-page { + font-family: 'Open Sans', sans-serif; + font-size: var(--go-ui-font-size-export); + + @media screen { + margin: var(--go-ui-spacing-xl) auto; + background-color: var(--go-ui-color-foreground); + padding: var(--go-ui-export-page-margin); + width: 210mm; + min-height: 297mm; + } + + .header-section { + display: grid; + grid-template-areas: + "logo heading" + "desc desc"; + margin-block-end: var(--go-ui-spacing-xl); + + .ifrc-logo { + width: 6rem; + height: 6rem; + grid-area: logo; + } + + .heading { + text-align: end; + grid-area: heading; + } + + .description { + grid-area: desc; + text-align: end; + color: var(--go-ui-color-primary-blue); + font-size: var(--go-ui-font-size-lg); + } + } +} diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts index 8d3ec82ce2..08630617dc 100644 --- a/app/src/utils/constants.ts +++ b/app/src/utils/constants.ts @@ -56,8 +56,8 @@ export const CATEGORY_RISK_VERY_HIGH = 5; // Colors export const COLOR_WHITE = '#ffffff'; -// export const COLOR_TEXT = '#313131'; -// export const COLOR_TEXT_ON_DARK = '#ffffff'; +export const COLOR_TEXT = '#313131'; +export const COLOR_TEXT_ON_DARK = '#ffffff'; export const COLOR_LIGHT_GREY = '#e0e0e0'; export const COLOR_DARK_GREY = '#a5a5a5'; export const COLOR_BLACK = '#000000'; @@ -196,6 +196,29 @@ export const multiMonthSelectDefaultValue = listToMap( () => false, ); +// FIXME these need to satisfy some enum export const ERU_READINESS_READY = 1; export const ERU_READINESS_CAN_CONTRIBUTE = 2; export const ERU_READINESS_NO_CAPACITY = 3; + +// FIXME these need to satisfy some enum +export const EAP_TYPE_SIMPLIFIED = 20; +export const EAP_TYPE_FULL = 10; + +// Timeframe + +// FIXME these need to satisfy some enum +export const TIMEFRAME_YEAR = 10; +// export const TIMEFRAME_MONTHS = 20; +// export const TIMEFRAME_DAYS = 30; +// export const TIMEFRAME_HOURS = 40; + +type EapStatus = components['schemas']['EapEapStatusEnumKey']; + +export const EAP_STATUS_UNDER_DEVELOPMENT = 10 satisfies EapStatus; +export const EAP_STATUS_UNDER_REVIEW = 20 satisfies EapStatus; +export const EAP_STATUS_NS_ADDRESSING_COMMENTS = 30 satisfies EapStatus; +export const EAP_STATUS_TECHNICALLY_VALIDATED = 40 satisfies EapStatus; +export const EAP_STATUS_APPROVED = 50 satisfies EapStatus; +export const EAP_STATUS_PFA_SIGNED = 60 satisfies EapStatus; +export const EAP_STATUS_ACTIVATED = 70 satisfies EapStatus; diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx new file mode 100644 index 0000000000..515dedf65d --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx @@ -0,0 +1,193 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { ArrowRightFillIcon } from '@ifrc-go/icons'; +import { + Button, + DropdownMenu, + Label, + ListView, + Modal, + RawFileInput, +} from '@ifrc-go/ui'; +import { + isDefined, + listToMap, +} from '@togglecorp/fujs'; + +import DropdownMenuItem from '#components/DropdownMenuItem'; +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; +import useAlert from '#hooks/useAlert'; +import { + EAP_STATUS_ACTIVATED, + EAP_STATUS_APPROVED, + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_PFA_SIGNED, + EAP_STATUS_TECHNICALLY_VALIDATED, + EAP_STATUS_UNDER_DEVELOPMENT, + EAP_STATUS_UNDER_REVIEW, +} from '#utils/constants'; +import { + type GoApiBody, + useLazyRequest, +} from '#utils/restRequest'; + +type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>; +type EapStatus = components['schemas']['EapEapStatusEnumKey']; + +const validStatusTransition: Record = { + [EAP_STATUS_UNDER_DEVELOPMENT]: [EAP_STATUS_UNDER_REVIEW], + [EAP_STATUS_UNDER_REVIEW]: [ + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_TECHNICALLY_VALIDATED, + ], + [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [ + EAP_STATUS_UNDER_REVIEW, + ], + [EAP_STATUS_TECHNICALLY_VALIDATED]: [ + EAP_STATUS_UNDER_REVIEW, + EAP_STATUS_APPROVED, + ], + [EAP_STATUS_APPROVED]: [EAP_STATUS_PFA_SIGNED], + [EAP_STATUS_PFA_SIGNED]: [EAP_STATUS_ACTIVATED], + [EAP_STATUS_ACTIVATED]: [], +}; + +export interface Props { + eapId: number; + status: EapStatus; + onStatusUpdate?: () => void; +} + +function EapStatus(props: Props) { + const { + eapId, + status, + onStatusUpdate, + } = props; + + const alert = useAlert(); + + const { eap_eap_status: eapStatusOptions } = useGlobalEnums(); + const [newStatus, setNewStatus] = useState(); + const [checklistFile, setChecklistFile] = useState(); + + const statusLabelMapping = listToMap( + eapStatusOptions, + ({ key }) => key, + ({ value }) => value, + ); + + const { trigger: triggerStatusUpdate } = useLazyRequest({ + method: 'POST', + url: '/api/v2/eap-registration/{id}/status/', + pathVariables: { + id: eapId, + }, + body: (fields: EapStatusBody) => fields, + onSuccess: () => { + setNewStatus(undefined); + if (onStatusUpdate) { + onStatusUpdate(); + } + + alert.show( + 'Status updated successfully!', + { variant: 'success' }, + ); + }, + formData: true, + onFailure: () => { + alert.show( + 'Failed to update the status!', + { variant: 'danger' }, + ); + }, + }); + + // FIXME: fix typings in the server + const requestBody = useMemo( + () => ({ + status: newStatus, + review_checklist_file: checklistFile, + } as EapStatusBody), + [newStatus, checklistFile], + ); + + const handleStatusUpdateCancel = useCallback(() => { + setNewStatus(undefined); + }, []); + + return ( + <> + + {eapStatusOptions?.map((option) => ( + + {option.value} + + ))} + + {isDefined(newStatus) && ( + + Confirm + + )} + > + +
+ Are you sure you want to update the status? +
+ +
+ {statusLabelMapping?.[status]} +
+ +
+ {statusLabelMapping?.[newStatus]} +
+ + {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && ( + + + Select review checklist file + + + + )} + + + )} + + ); +} + +export default EapStatus; diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json new file mode 100644 index 0000000000..1404c3e356 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json @@ -0,0 +1,9 @@ +{ + "namespace":"accountMyFormsEap", + "strings":{ + "eapStartFullLink": "Start Full EAP", + "eapStartSimplifiedLink": "Start sEAP", + "eapEditFullLink": "Edit Full EAP", + "eapEditSimplifiedLink": "Edit sEAP" + } +} diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx new file mode 100644 index 0000000000..c4bc42dc5f --- /dev/null +++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx @@ -0,0 +1,171 @@ +import { + useCallback, + useState, +} from 'react'; +import { + DocumentPdfLineIcon, + DownloadTwoLineIcon, +} from '@ifrc-go/icons'; +import { + Button, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + isDefined, + isNotDefined, +} from '@togglecorp/fujs'; + +import EapExportModal from '#components/domain/EapExportModal'; +import Link from '#components/Link'; +import { + EAP_STATUS_NS_ADDRESSING_COMMENTS, + EAP_STATUS_UNDER_DEVELOPMENT, + EAP_TYPE_FULL, + EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; + +import { type EapExpandedListItem } from '../utils'; + +import i18n from './i18n.json'; + +export interface Props { + expandedListItem: EapExpandedListItem; +} + +function EapTableActions(props: Props) { + const { expandedListItem } = props; + + const { + type, + eap, + details, + } = expandedListItem; + + const [exportWithDiffView, setExportWithDiffView] = useState(false); + const [showExportModal, setShowExportModal] = useState(false); + + const strings = useTranslation(i18n); + + const setShowExportModalTrue = useCallback((withDiff?: boolean) => { + setExportWithDiffView(!!withDiff); + setShowExportModal(true); + }, []); + + const setShowExportModalFalse = useCallback(() => { + setExportWithDiffView(false); + setShowExportModal(false); + }, []); + + return ( + <> + + {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && ( + } + > + Preview export + + )} + {type === 'development' && details?.data.is_locked && isDefined(eap.review_checklist_file) && ( + } + > + Review Checklist + + )} + {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && ( + + )} + {type === 'development' + && eap.eap_type === EAP_TYPE_SIMPLIFIED + && isDefined(details?.data.version) + && details.data.version > 1 + && ( + + )} + {type === 'registration' && isNotDefined(eap.eap_type) && isNotDefined(details) && ( + + + {strings.eapStartSimplifiedLink} + + + {strings.eapStartFullLink} + + + )} + {type === 'development' + && !details?.data.is_locked + && eap.eap_type === EAP_TYPE_SIMPLIFIED + && (eap.status === EAP_STATUS_UNDER_DEVELOPMENT + || (eap.status === EAP_STATUS_NS_ADDRESSING_COMMENTS + && eap.latest_simplified_eap === details?.data.id)) + && ( + + {strings.eapEditSimplifiedLink} + + )} + {type === 'development' && !details?.data.is_locked && eap.eap_type === EAP_TYPE_FULL && ( + + {strings.eapEditFullLink} + + )} + + {showExportModal && isDefined(eap.eap_type) && ( + + )} + + ); +} + +export default EapTableActions; diff --git a/app/src/views/AccountMyFormsEap/Filters/i18n.json b/app/src/views/AccountMyFormsEap/Filters/i18n.json new file mode 100644 index 0000000000..9aab9233d2 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/Filters/i18n.json @@ -0,0 +1,6 @@ +{ + "namespace": "accountMyFormsEap", + "strings": { + "filterStatusPlaceholder": "Select Status" + } +} diff --git a/app/src/views/AccountMyFormsEap/Filters/index.tsx b/app/src/views/AccountMyFormsEap/Filters/index.tsx new file mode 100644 index 0000000000..8ebee10365 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/Filters/index.tsx @@ -0,0 +1,47 @@ +import { SelectInput } from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { stringValueSelector } from '@ifrc-go/ui/utils'; +import { type EntriesAsList } from '@togglecorp/toggle-form'; + +import { type components } from '#generated/types'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; + +import i18n from './i18n.json'; + +type TypeOfEapStatus = components<'read'>['schemas']['EapEapStatusEnumKey']; +function typeOfEapStatusKeySelector({ key } : { key: TypeOfEapStatus }) { + return key; +} + +export interface FilterValue { + status?: TypeOfEapStatus | undefined; +} + +interface Props { + value: FilterValue; + onChange: (...args: EntriesAsList) => void; +} + +function Filters(props: Props) { + const { + value, + onChange, + } = props; + + const strings = useTranslation(i18n); + const { eap_eap_status: eapStatusTypeOptions } = useGlobalEnums(); + + return ( + + ); +} + +export default Filters; diff --git a/app/src/views/AccountMyFormsEap/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json new file mode 100644 index 0000000000..4fcb4dcfd7 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/i18n.json @@ -0,0 +1,11 @@ +{ + "namespace": "eapApplication", + "strings": { + "eapRegistrationLink": "Register Your EAP", + "eapApplicationsHeading": "EAP Application", + "eapLastUpdated": "Last Updated", + "eapName": "Name/Phase", + "eapType": "EAP Type", + "eapStatus": "Status" + } +} diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx new file mode 100644 index 0000000000..98c4220421 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/index.tsx @@ -0,0 +1,349 @@ +import { + useCallback, + useMemo, + useState, +} from 'react'; +import { + Container, + Pager, + type RowOptions, + Table, + TableBodyContent, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + createDateColumn, + createElementColumn, + createEmptyColumn, + createExpandColumn, + createExpansionIndicatorColumn, + createStringColumn, + numericIdSelector, +} from '@ifrc-go/ui/utils'; +import { + isDefined, + isNotDefined, + listToMap, +} from '@togglecorp/fujs'; + +import Link from '#components/Link'; +import useFilterState from '#hooks/useFilterState'; +import { + EAP_STATUS_APPROVED, + EAP_STATUS_PFA_SIGNED, + EAP_STATUS_TECHNICALLY_VALIDATED, + EAP_TYPE_FULL, + EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; +import { useRequest } from '#utils/restRequest'; + +import EapStatus, { type Props as EapStatusProps } from './EapStatus'; +import EapTableActions, { type Props as EapTableActionProps } from './EapTableActions'; +import Filters, { type FilterValue } from './Filters'; +import { + type EapExpandedItem, + type EapExpandedListItem, + type EapListItem, +} from './utils'; + +import i18n from './i18n.json'; + +type Key = EapListItem['id']; +const ITEM_PER_PAGE = 6; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + const { + filter, + offset, + limit, + rawFilter, + filtered, + setFilterField, + page, + setPage, + } = useFilterState({ + filter: {}, + pageSize: ITEM_PER_PAGE, + }); + + const { + response: eapListResponse, + pending: eapListPending, + retrigger: reloadEapList, + } = useRequest({ + url: '/api/v2/eap-registration/', + preserveResponse: true, + query: { + offset, + limit, + status: filter.status, + }, + }); + + const [expandedRow, setExpandedRow] = useState(); + const handleExpandClick = useCallback( + (row: EapListItem) => { + setExpandedRow( + (prevValue) => (prevValue?.id === row.id ? undefined : row), + ); + }, + [], + ); + + const aggregatedColumns = useMemo( + () => ([ + createExpansionIndicatorColumn(false), + createDateColumn( + 'created_at', + strings.eapLastUpdated, + (item) => item.modified_at, + ), + createStringColumn( + 'name', + strings.eapName, + (item) => { + const baseYear = new Date(item.created_at).getFullYear(); + + let addedYear = baseYear; + + if (item.eap_type === EAP_TYPE_FULL) { + addedYear = baseYear + 5; + } else if (item.eap_type === EAP_TYPE_SIMPLIFIED) { + addedYear = baseYear + 2; + } + + return `${item.country_details?.name}: + ${item.disaster_type_details?.name} + ${baseYear} - ${addedYear}`; + }, + ), + createStringColumn( + 'eap_type_display', + strings.eapType, + (item) => item.eap_type_display, + ), + createElementColumn( + 'status_display', + strings.eapStatus, + EapStatus, + (key, row) => ({ + eapId: key, + status: row.status, + onStatusUpdate: reloadEapList, + }), + ), + createExpandColumn( + 'expandRow', + '', + (row) => ({ + onClick: handleExpandClick, + expanded: row.id === expandedRow?.id, + }), + ), + ]), + [ + strings.eapLastUpdated, + strings.eapName, + strings.eapType, + strings.eapStatus, + expandedRow, + handleExpandClick, + reloadEapList, + ], + ); + + const eapExpandedItems = useMemo(() => ( + listToMap( + eapListResponse?.results, + (eapListItem) => eapListItem.id, + (eapListItem) => { + const { + simplified_eap_details, + full_eap_details, + modified_at, + eap_type, + status, + } = eapListItem; + + const eapStarted = simplified_eap_details.length > 0 || full_eap_details.length > 0; + + const items = [ + { + label: 'EAP Development Registration', + lastUpdated: modified_at, + eap: eapListItem, + type: 'registration', + details: undefined, + disabled: false, + } satisfies EapExpandedListItem, + ...(eap_type === EAP_TYPE_SIMPLIFIED + ? simplified_eap_details.map((simplifiedEap) => ({ + label: `EAP Application v${simplifiedEap.version}`, + lastUpdated: simplifiedEap.modified_at, + eap: eapListItem, + type: 'development', + details: { + eapType: EAP_TYPE_SIMPLIFIED, + data: simplifiedEap, + }, + disabled: false, + } satisfies EapExpandedListItem)).toReversed() + : [] + ), + ...(eap_type === EAP_TYPE_FULL + ? full_eap_details.map((fullEap) => ({ + label: `EAP Application v${fullEap.version}`, + lastUpdated: fullEap.modified_at, + eap: eapListItem, + type: 'development', + details: { + eapType: EAP_TYPE_FULL, + data: fullEap, + }, + disabled: false, + } satisfies EapExpandedListItem)).toReversed() + : [] + ), + ((isNotDefined(eap_type) || !eapStarted) + ? ({ + label: 'EAP Application v1', + eap: eapListItem, + type: 'development', + details: undefined, + disabled: true, + } satisfies EapExpandedListItem) + : undefined + ), + { + label: 'Technically Validated', + eap: eapListItem, + type: 'validated', + details: undefined, + disabled: status < EAP_STATUS_TECHNICALLY_VALIDATED, + } satisfies EapExpandedListItem, + { + label: 'Approved', + eap: eapListItem, + type: 'approved', + details: undefined, + disabled: status < EAP_STATUS_APPROVED, + } satisfies EapExpandedListItem, + { + label: 'PFA Signed', + eap: eapListItem, + type: 'signed', + details: undefined, + disabled: status < EAP_STATUS_PFA_SIGNED, + } satisfies EapExpandedListItem, + ].filter(isDefined).toReversed(); + + return { + eap: eapListItem, + expandedItems: items, + } satisfies EapExpandedItem; + }, + ) + ), [eapListResponse]); + + const detailColumns = useMemo( + () => ([ + createExpansionIndicatorColumn( + true, + (row) => !!row.disabled, + ), + createDateColumn( + 'created_at', + strings.eapLastUpdated, + (row) => row.lastUpdated, + ), + createStringColumn( + 'title', + '', + (row) => row.label, + { withLightText: (item) => !!item.disabled }, + ), + createEmptyColumn(), + createElementColumn( + 'actions', + '', + EapTableActions, + (_, row) => ({ + expandedListItem: row, + }), + ), + createEmptyColumn(), + ]), + [strings.eapLastUpdated], + ); + + const rowModifier = useCallback( + ({ row, datum }: RowOptions) => { + if (datum.id !== expandedRow?.id) { + return row; + } + + const subRows = eapExpandedItems?.[expandedRow.id]; + + return ( + <> + {row} + expandedItem.label} + data={subRows?.expandedItems} + columns={detailColumns} + expandedContent + /> + + ); + }, + [ + expandedRow, + detailColumns, + eapExpandedItems, + ], + ); + + return ( + + )} + headerActions={( + + {strings.eapRegistrationLink} + + )} + footerActions={( + + )} + > + + + ); +} diff --git a/app/src/views/AccountMyFormsEap/utils.ts b/app/src/views/AccountMyFormsEap/utils.ts new file mode 100644 index 0000000000..4287a54b43 --- /dev/null +++ b/app/src/views/AccountMyFormsEap/utils.ts @@ -0,0 +1,34 @@ +import { + type EAP_TYPE_FULL, + type EAP_TYPE_SIMPLIFIED, +} from '#utils/constants'; +import { type GoApiResponse } from '#utils/restRequest'; + +type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>; +export type EapListItem = NonNullable[number]; + +interface SimplifiedEapDetails { + eapType: typeof EAP_TYPE_SIMPLIFIED; + data: EapListItem['simplified_eap_details'][number]; +} + +interface FullEapDetails { + eapType: typeof EAP_TYPE_FULL; + data: EapListItem['full_eap_details'][number]; +} + +export type EapExpandedListItem = { + label: string; + lastUpdated?: string; + eap: EapListItem; + type: 'registration' | 'development' | 'review' | 'revision' | 'validated' | 'approved' | 'signed'; + disabled?: boolean; + + // Only applicable for development type + details: SimplifiedEapDetails | FullEapDetails | undefined; +}; + +export type EapExpandedItem = { + eap: EapListItem; + expandedItems: EapExpandedListItem[]; +}; diff --git a/app/src/views/AccountMyFormsLayout/i18n.json b/app/src/views/AccountMyFormsLayout/i18n.json index 6b70856db7..c23cf7ce5b 100644 --- a/app/src/views/AccountMyFormsLayout/i18n.json +++ b/app/src/views/AccountMyFormsLayout/i18n.json @@ -4,6 +4,7 @@ "fieldReportTabTitle": "Field Report", "perTabTitle": "PER", "drefTabTitle": "DREF", - "threeWTabTitle": "3W" + "threeWTabTitle": "3W", + "eapApplications": "EAP Applications" } } \ No newline at end of file diff --git a/app/src/views/AccountMyFormsLayout/index.tsx b/app/src/views/AccountMyFormsLayout/index.tsx index 5364a38441..c7eaac05d2 100644 --- a/app/src/views/AccountMyFormsLayout/index.tsx +++ b/app/src/views/AccountMyFormsLayout/index.tsx @@ -35,6 +35,11 @@ export function Component() { > {strings.threeWTabTitle} + + {strings.eapApplications} + diff --git a/app/src/views/DrefApplicationForm/index.tsx b/app/src/views/DrefApplicationForm/index.tsx index 226d5a1c49..58b95680cd 100644 --- a/app/src/views/DrefApplicationForm/index.tsx +++ b/app/src/views/DrefApplicationForm/index.tsx @@ -308,6 +308,7 @@ export function Component() { const loadResponseToFormValue = useCallback((response: GetDrefResponse) => { handleDrefLoad(response); + const { planned_interventions, proposed_action, diff --git a/app/src/views/DrefDetail/i18n.json b/app/src/views/DrefDetail/i18n.json new file mode 100644 index 0000000000..47ce2fe4c4 --- /dev/null +++ b/app/src/views/DrefDetail/i18n.json @@ -0,0 +1,15 @@ +{ + "namespace": "drefDetail", + "strings": { + "drefIntroHeading": "DREF Intro", + "drefIntroDetailOne": "Every year, small and medium-sized disasters occur in silence. Without media attention or international visibility, they can struggle to attract funding—putting affected communities at risk of being completely neglected.", + "drefIntroDetailTwo": "To support these smaller disasters, or to provide initial funding before launching an Emergency Appeal, we rapidly channel funding to Red Cross and Red Crescent Societies through the DREF—enabling them to deliver fast and effective local humanitarian action.", + "drefProcessHeading": "Dref Process", + "drefProcessSubHeading": "We provide funding in two ways:", + "drefProcessListOne": "A loan facility: start-up funding for the IFRC and National Societies to respond to large-scale disasters, which will later be reimbursed by donor contributions to an Emergency Appeal.", + "drefProcessListTwo": "A grant facility: funding for National Society responses to small- and medium-sized disasters. This is used when no Emergency Appeal will be launched or when support from other actors is not foreseen.", + "drefProcessDetailOne": "The fund is demand-driven and locally-owned. It is open to all 191 National Societies that submit funding applications and plans of action reflecting locally identified priorities and needs.", + "drefProcessDetailTwo": "On average, the DREF supports more than 100 responses to small and medium-sized disasters every year.", + "drefDrefApplication": "DREF Application" + } +} diff --git a/app/src/views/DrefDetail/index.tsx b/app/src/views/DrefDetail/index.tsx new file mode 100644 index 0000000000..33869faf08 --- /dev/null +++ b/app/src/views/DrefDetail/index.tsx @@ -0,0 +1,58 @@ +import { + Container, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import SurgeContentContainer from '#components/domain/SurgeContentContainer'; +import Link from '#components/Link'; + +import i18n from './i18n.json'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + return ( + + + +
{strings.drefIntroDetailOne}
+
{strings.drefIntroDetailTwo}
+ + +
{strings.drefProcessSubHeading}
+
    +
  • + {strings.drefProcessListOne} +
    • +
  • + {strings.drefProcessListTwo} +
    • +
+
+ {strings.drefProcessDetailOne} +
+
+ {strings.drefProcessDetailTwo} +
+ + + {strings.drefDrefApplication} + + + + ); +} + +Component.displayName = 'DrefDetail'; diff --git a/app/src/views/DrefProcess/i18n.json b/app/src/views/DrefProcess/i18n.json new file mode 100644 index 0000000000..01904a6dda --- /dev/null +++ b/app/src/views/DrefProcess/i18n.json @@ -0,0 +1,9 @@ +{ + "namespace": "drefProcess", + "strings": { + "eapHeading": "Disaster Response Emergency Fund (DREF)", + "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.", + "eapProcessDrefTab": "Response And Imminent Dref", + "eapProcessEapTab": "Early Action Protocols (EAP)" + } +} diff --git a/app/src/views/DrefProcess/index.tsx b/app/src/views/DrefProcess/index.tsx new file mode 100644 index 0000000000..2ed605891a --- /dev/null +++ b/app/src/views/DrefProcess/index.tsx @@ -0,0 +1,37 @@ +import { Outlet } from 'react-router-dom'; +import { NavigationTabList } from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import NavigationTab from '#components/NavigationTab'; +import Page from '#components/Page'; + +import i18n from './i18n.json'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + return ( + + + + {strings.eapProcessDrefTab} + + + {strings.eapProcessEapTab} + + + + + ); +} + +Component.displayName = 'DrefProcess'; diff --git a/app/src/views/EapFullForm/index.tsx b/app/src/views/EapFullForm/index.tsx new file mode 100644 index 0000000000..e6d0317fee --- /dev/null +++ b/app/src/views/EapFullForm/index.tsx @@ -0,0 +1,12 @@ +import Page from '#components/Page'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + return ( + + {/* TODO: Add EAP form */} + Full EAP Form + + ); +} diff --git a/app/src/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json new file mode 100644 index 0000000000..9a8304afc0 --- /dev/null +++ b/app/src/views/EapRegistration/i18n.json @@ -0,0 +1,51 @@ +{ + "namespace": "eapRegistration", + "strings": { + "eapRegistrationHeading": "EAP Development Registration", + "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 {link}", + "eapRegistrationLink": "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", + "eapBackButton": "Back", + "eapCancelButton": "Cancel", + "eapRegistrationFailure": "Sorry could not register new EAP right now!", + "eapRegistrationSuccess": "Successfully created a new EAP!", + "eapNotSure": "Not Sure", + "eapDevelopmentRegistrationHeading": "EAP Development Registration", + "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application.", + "eapFailedToLoad": "Failed to Load", + "eapRegistrationUpdateMessage": "EAP Registration updated Successfully.", + "eapRegistrationFailureMessage": "Failed to update EAP Registration" + } +} diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx new file mode 100644 index 0000000000..698e6a4c90 --- /dev/null +++ b/app/src/views/EapRegistration/index.tsx @@ -0,0 +1,555 @@ +import { + type ElementRef, + useCallback, + useRef, +} from 'react'; +import { + useLocation, + useParams, +} from 'react-router-dom'; +import { + ConfirmButton, + Container, + DateInput, + InputSection, + ListView, + Radio, + RadioInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + resolveToComponent, + stringValueSelector, +} from '@ifrc-go/ui/utils'; +import { + isDefined, + isNotDefined, + isTruthyString, +} from '@togglecorp/fujs'; +import { + createSubmitHandler, + getErrorObject, + getErrorString, + useForm, +} from '@togglecorp/toggle-form'; + +import CountrySelectInput from '#components/domain/CountrySelectInput'; +import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput'; +import FormFailedToLoadMessage from '#components/domain/FormFailedToLoadMessage'; +import NationalSocietyMultiSelectInput from '#components/domain/NationalSocietyMultiSelectInput'; +import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput'; +import Link from '#components/Link'; +import Page from '#components/Page'; +import useGlobalEnums from '#hooks/domain/useGlobalEnums'; +import useAlert from '#hooks/useAlert'; +import useRouting from '#hooks/useRouting'; +import { + type GoApiBody, + type GoApiResponse, + useLazyRequest, + useRequest, +} from '#utils/restRequest'; +import { transformObjectError } from '#utils/restRequest/error'; + +import { + defaultFormValue, + formSchema, +} from './schema'; + +import i18n from './i18n.json'; + +type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>; +type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>; +type EapTypeOption = NonNullable[number]; + +function eapTypeKeySelector(option: EapTypeOption) { + return option.key; +} + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + const alert = useAlert(); + const { navigate } = useRouting(); + const { eapId: eapIdFromParams } = useParams<{ eapId: string }>(); + + const { state } = useLocation(); + const eapId = eapIdFromParams ?? state?.eapId as string | undefined; + const isReadOnly = state?.mode === 'view'; + + const { + value, + setFieldValue, + error: formError, + setError, + setValue, + validate, + } = useForm(formSchema, { value: defaultFormValue }); + + const { + eap_eap_type: eapFormOptions, + } = useGlobalEnums(); + + const error = getErrorObject(formError); + const formContentRef = useRef>(null); + + const { + pending: fetchingEap, + error: eapError, + } = useRequest({ + skip: isNotDefined(eapId), + url: '/api/v2/eap-registration/{id}/', + pathVariables: isTruthyString(eapId) ? { + id: Number(eapId), + } : undefined, + onSuccess: (response) => { + const { + ...formValues + } = response; + setValue(formValues); + }, + }); + + const { + pending: eapRegistrationPending, + trigger: eapRegister, + } = useLazyRequest({ + method: 'POST', + url: '/api/v2/eap-registration/', + body: (body: EapRegisterRequestBody) => body, + onSuccess: () => { + const message = strings.eapRegistrationSuccess; + alert.show( + message, + { variant: 'success' }, + ); + navigate('accountMyFormsEap'); + }, + onFailure: (err) => { + const { + value: { + formErrors, + }, + } = err; + + setError(transformObjectError(formErrors, () => undefined)); + + alert.show( + strings.eapRegistrationFailure, + { variant: 'danger' }, + ); + }, + }); + + const { + pending: updateEapRegistrationPending, + trigger: updateEapRegistration, + } = useLazyRequest({ + url: '/api/v2/eap-registration/{id}/', + method: 'PATCH', + pathVariables: { + id: Number(eapId), + }, + body: (formFields: EapRegisterRequestBody) => formFields, + onSuccess: (response) => { + alert.show( + strings.eapRegistrationUpdateMessage, + { variant: 'success' }, + ); + navigate( + 'accountMyFormsEap', + { params: { eapId: response.id } }, + ); + }, + onFailure: (err) => { + const { + value: { + formErrors, + messageForNotification, + }, + } = err; + + setError(transformObjectError( + formErrors, + () => undefined, + )); + + alert.show( + strings.eapRegistrationFailureMessage, + { + variant: 'danger', + description: messageForNotification, + }, + ); + }, + }); + + const handleCountryChange = useCallback( + (val: number | undefined, name: 'country') => { + setFieldValue(val, name); + }, + [setFieldValue], + ); + + const handleEapTypeClick = useCallback(() => { + if (isReadOnly) { + return; + } + setFieldValue(null, 'eap_type'); + }, [isReadOnly, setFieldValue]); + + const handleSubmissionTimeClick = useCallback(() => { + if (isReadOnly) { + return; + } + setFieldValue(null, 'expected_submission_time'); + }, [isReadOnly, setFieldValue]); + + const eapRegistration = useCallback(() => { + const handler = createSubmitHandler( + validate, + setError, + (formValues) => { + if (isNotDefined(eapId)) { + eapRegister(formValues as EapRegisterRequestBody); + } else { + updateEapRegistration({ + ...formValues, + id: eapId, + } as EapRegisterRequestBody); + } + }, + ); + handler(); + }, [ + setError, + validate, + eapRegister, + updateEapRegistration, + eapId, + ]); + + const handleFormError = useCallback(() => { + setTimeout(() => formContentRef.current?.scrollIntoView(), 200); + }, []); + + const handleEapRegistration = useCallback(() => { + const handler = createSubmitHandler( + validate, + setError, + eapRegistration, + handleFormError, + ); + handler(); + }, [ + handleFormError, + eapRegistration, + validate, + setError, + ]); + + const disabled = eapRegistrationPending || fetchingEap || updateEapRegistrationPending; + + const handleNationalSocietyInputChange = useCallback((newValue: number | undefined) => { + setFieldValue(newValue, 'national_society'); + setFieldValue(newValue, 'country'); + }, [setFieldValue]); + + if (isDefined(eapError)) { + return ( + + ); + } + + return ( + + {strings.eapRegistrationLink} + + ), + }, + )} + actions={( + + {eapId ? strings.eapBackButton : strings.eapCancelButton} + + )} + elementRef={formContentRef} + withBackgroundColorInMainSection + > + + + + + + + + + + + + + + + + {strings.eapNotSure} + + + + + + + {strings.eapNotSure} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {strings.eapSubmitButton} + + + + ); +} diff --git a/app/src/views/EapRegistration/schema.ts b/app/src/views/EapRegistration/schema.ts new file mode 100644 index 0000000000..17dca9c0b7 --- /dev/null +++ b/app/src/views/EapRegistration/schema.ts @@ -0,0 +1,56 @@ +import { + emailCondition, + type ObjectSchema, + type PartialForm, +} from '@togglecorp/toggle-form'; + +import { type GoApiBody } from '#utils/restRequest'; + +type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>; + +export const defaultFormValue: FormFields = { + eap_type: undefined, + expected_submission_time: undefined, +}; + +type FormFields = PartialForm; + +type FormSchema = ObjectSchema; +type FormSchemaFields = ReturnType + +export const formSchema: FormSchema = { + fields: (): FormSchemaFields => ({ + national_society: { + required: true, + }, + country: { + required: true, + }, + disaster_type: { + required: true, + }, + eap_type: {}, + expected_submission_time: {}, + partners: { + required: true, + }, + national_society_contact_name: {}, + national_society_contact_title: {}, + national_society_contact_email: { + validations: [emailCondition], + }, + national_society_contact_phone_number: {}, + ifrc_contact_name: {}, + ifrc_contact_title: {}, + ifrc_contact_email: { + validations: [emailCondition], + }, + ifrc_contact_phone_number: {}, + dref_focal_point_name: {}, + dref_focal_point_title: {}, + dref_focal_point_email: { + validations: [emailCondition], + }, + dref_focal_point_phone_number: {}, + }), +}; diff --git a/app/src/views/EarlyActionProtocols/i18n.json b/app/src/views/EarlyActionProtocols/i18n.json new file mode 100644 index 0000000000..9472e2952a --- /dev/null +++ b/app/src/views/EarlyActionProtocols/i18n.json @@ -0,0 +1,14 @@ +{ + "namespace": "earlyActionProtocols", + "strings": { + "eapRegistrationLink": "Register your EAP", + "eapContent": "What is an EAP?", + "eapContentHeading": "Early Action Protocols (EAPs) are a core mechanism of the IFRC's Forecast-based Financing (FbF) approach, designed to ensure that humanitarian action happens before a disaster strikes, rather than only responding afterwards.", + "eapContentSubHeadingOne": "An EAP is a pre-agreed plan developed by a Nation Society together with partners, which outlines:", + "eapDescriptionOne": "The triggers (based on scientific forecasts and risk analysis) that indicate when a hazard is likely to impact communities.", + "eapDescriptionTwo": "The early actions to be implemented once those triggers are met - practical, life-saving measures that reduce the impacts of the forecasted disaster.", + "eapDescriptionThree": "The roles, responsibilities, and budget required to carry out these actions quickly and effectively.", + "eapContentSubHeadingTwo": "Why are the EAPs Important?", + "eapContentSubHeadingThree": "What is the EAP Application Process?" + } +} diff --git a/app/src/views/EarlyActionProtocols/index.tsx b/app/src/views/EarlyActionProtocols/index.tsx new file mode 100644 index 0000000000..98ac8ff321 --- /dev/null +++ b/app/src/views/EarlyActionProtocols/index.tsx @@ -0,0 +1,71 @@ +import { + Container, + ExpandableContainer, + ListView, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import Link from '#components/Link'; + +import i18n from './i18n.json'; + +/** @knipignore */ +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + + return ( + + {strings.eapRegistrationLink} + + )} + > + + +

+ {strings.eapContentHeading} +

+

+ {strings.eapContentSubHeadingOne} +

    +
  • + {strings.eapDescriptionOne} +
    • +
  • + {strings.eapDescriptionTwo} +
    • +
  • + {strings.eapDescriptionThree} +
    • +
+

+ + {/* TODO: Add remaining content */} + + {/* TODO: Add real content and replace with strings */} + EAP content sub heading description two + + + {/* TODO: Add real content and replace with strings */} + EAP content sub heading description three + + + + ); +} + +Component.displayName = 'EarlyActionProtocols'; diff --git a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx index 3a496a9b05..2a2835e370 100644 --- a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx +++ b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx @@ -208,9 +208,8 @@ function ComponentInput(props: Props) { {answerStats.map((answerStat) => ( (); + const [searchParams] = useSearchParams(); + + const version = searchParams.get('version') ?? undefined; + const showDiff = searchParams.get('diff') ?? undefined; + + const strings = useTranslation(i18n); + + const { + pending: eapRegistrationPending, + response: eapRegistrationResponse, + } = useRequest({ + skip: isFalsyString(eapId), + url: '/api/v2/eap-registration/{id}/', + pathVariables: isTruthyString(eapId) ? { + id: Number(eapId), + } : undefined, + }); + + const selectedSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find( + (simplifiedEap) => String(simplifiedEap.version) === String(version), + ); + + const latestSimplifiedEapVersion = eapRegistrationResponse?.latest_simplified_eap; + const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find( + (simplifiedEap) => simplifiedEap.version === latestSimplifiedEapVersion, + ); + + const currentSimplifiedEap = selectedSimplifiedEap ?? latestSimplifiedEap; + const currentSimplifiedEapId = currentSimplifiedEap?.id; + + const prevSimplifiedEapVersion = isDefined(currentSimplifiedEap?.version) + && currentSimplifiedEap.version > 1 + ? currentSimplifiedEap.version - 1 + : undefined; + const prevSimplifiedEap = eapRegistrationResponse?.simplified_eap_details.find( + (simplifiedEap) => simplifiedEap.version === prevSimplifiedEapVersion, + ); + + const { + pending: simplifiedEapPending, + response: simplifiedEapResponse, + } = useRequest({ + skip: isNotDefined(currentSimplifiedEapId), + url: '/api/v2/simplified-eap/{id}/', + pathVariables: isDefined(currentSimplifiedEapId) ? { + id: Number(currentSimplifiedEapId), + } : undefined, + }); + + const { + pending: prevSimplifiedEapPending, + response: prevSimplifiedEapResponse, + } = useRequest({ + skip: isNotDefined(prevSimplifiedEap) || showDiff?.toLowerCase() !== 'true', + url: '/api/v2/simplified-eap/{id}/', + pathVariables: isDefined(prevSimplifiedEap) ? { + id: Number(prevSimplifiedEap.id), + } : undefined, + }); + + const { eap_sector, eap_approach } = useGlobalEnums(); + + const eapSectorTitleMap = listToMap( + eap_sector, + ({ key }) => key, + ({ value }) => value, + ); + + const eapApproachTitleMap = listToMap( + eap_approach, + ({ key }) => key, + ({ value }) => value, + ); + + const { + disaster_type_details, + country_details, + } = eapRegistrationResponse ?? {}; + + const { + cover_image_file, + admin2_details, + + total_budget, + readiness_budget, + pre_positioning_budget, + early_action_budget, + people_targeted, + seap_timeframe, + seap_lead_time, + operational_timeframe, + + prioritized_hazard_and_impact, + risks_selected_protocols, + + overall_objective_intervention, + potential_geographical_high_risk_areas, + assisted_through_operation, + trigger_statement, + trigger_threshold_justification, + next_step_towards_full_eap, + planned_operations, + enable_approaches, + + early_action_capability, + rcrc_movement_involvement, + + national_society_contact_name, + national_society_contact_email, + national_society_contact_title, + national_society_contact_phone_number, + } = simplifiedEapResponse ?? {}; + + const { + prioritized_hazard_and_impact: prev_prioritized_hazard_and_impact, + risks_selected_protocols: prev_risks_selected_protocols, + overall_objective_intervention: prev_overall_objective_intervention, + potential_geographical_high_risk_areas: prev_potential_geographical_high_risk_areas, + assisted_through_operation: prev_assisted_through_operation, + trigger_statement: prev_trigger_statement, + trigger_threshold_justification: prev_trigger_threshold_justification, + next_step_towards_full_eap: prev_next_step_towards_full_eap, + early_action_capability: prev_early_action_capability, + rcrc_movement_involvement: prev_rcrc_movement_involvement, + } = prevSimplifiedEapResponse ?? {}; + + const eapTitle = [ + country_details?.name, + admin2_details?.map(({ name }) => name).join(', '), + disaster_type_details?.name, + ].filter(isTruthyString).join(' | '); + + const previewReady = !eapRegistrationPending + && !simplifiedEapPending + && !prevSimplifiedEapPending; + + return ( + + {strings.pageTitleSimplifiedText} +
+ {strings.pageTitleEapText} + + )} + description={eapTitle ?? '--'} + dataReady={previewReady} + > + {isDefined(cover_image_file?.file) && ( + + + + )} + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {planned_operations?.map((operation) => ( + + + + + + +
+ + + {operation.indicators.map((indicator) => ( + + ))} +
+ + +
    + {operation.readiness_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + +
    + {operation.prepositioning_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + +
    + {operation.early_action_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + + ))} + + + {enable_approaches?.map((approach) => ( + + + + + +
+ + + {approach.indicators.map((indicator) => ( + + ))} +
+ + +
    + {approach.readiness_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + +
    + {approach.prepositioning_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + +
    + {approach.early_action_activities.map((activity) => ( +
  1. + {activity.activity} +
    2. + ))} +
+ + + ))} + + + + + + + + + + {/* + + + + */} + + + + + + + + + + ); +} + +Component.displayName = 'SimplifiedEapExport'; diff --git a/app/src/views/SimplifiedEapExport/styles.module.css b/app/src/views/SimplifiedEapExport/styles.module.css new file mode 100644 index 0000000000..c9628d6851 --- /dev/null +++ b/app/src/views/SimplifiedEapExport/styles.module.css @@ -0,0 +1,11 @@ +.meta-items { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; +} + +.indicator-items { + display: grid; + grid-gap: var(--go-ui-width-separator-md); + grid-template-columns: 2fr 1fr; +} diff --git a/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx b/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx new file mode 100644 index 0000000000..4f49a02336 --- /dev/null +++ b/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx @@ -0,0 +1,86 @@ +import { + InputSection, + TextInput, +} from '@ifrc-go/ui'; +import { + type EntriesAsList, + type Error, + getErrorObject, +} from '@togglecorp/toggle-form'; + +import { + type PartialSimplifiedEapType, + type ValidContactFieldPrefixes, +} from '../schema'; + +interface Props { + title?: React.ReactNode; + description?: React.ReactNode; + namePrefix: ValidContactFieldPrefixes; + value: PartialSimplifiedEapType; + setFieldValue: (...entries: EntriesAsList) => void; + error: Error | undefined; + disabled?: boolean; +} + +function ContactInputsSection(props: Props) { + const { + title: sectionTitle, + description, + namePrefix, + value, + setFieldValue, + error: formError, + disabled, + } = props; + + const error = getErrorObject(formError); + + const name = `${namePrefix}_name` satisfies keyof PartialSimplifiedEapType; + const title = `${namePrefix}_title` satisfies keyof PartialSimplifiedEapType; + const email = `${namePrefix}_email` satisfies keyof PartialSimplifiedEapType; + const phoneNumber = `${namePrefix}_phone_number` satisfies keyof PartialSimplifiedEapType; + + return ( + + + + + + + ); +} + +export default ContactInputsSection; diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json new file mode 100644 index 0000000000..13d35da69f --- /dev/null +++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json @@ -0,0 +1,43 @@ +{ + "namespace": "simplifiedEapForm", + "strings": { + "deliverHeading": "Conditions to deliver the Early Action", + "deliverEarlyActions": "Experience and/or capacity to implement the early actions", + "deliverEarlyActionsDescription": "Assumptions or minimum conditions needed to deliver on the early actions (including issues to be resolved.) Explain how the National Society will be able to delive on the early actions, what experiences and/or capacities they have related to be intervention. Are there issues to be addressed in order for the Naional Society to deliver on these actions? How will these issues be resolved?", + "deliverEarlyActionsTooltip": "This is an opportunity for the National Society to describe their experience in dealing with the selected hazard, their capacity in the intervention sectors and early action activities. Where there are gaps in capacity or systemic issues, then these can be addressed through the annual readiness activities. For example, the National Society may have a general response plan, but may use the readiness activities to develop detailed Standard Operating Procedures outlining who will do what when, and then do an annual test simulation of the simplified EAP to ensure that roles and responsibilities are clear in terms of delivering the early actions.", + "deliverDescription": "Description", + "deliverInvolved": "RCRC Movement partners, Governmental/other agencies consulted/involved", + "deliverInvolvedDescription": "Explain who was part of the development of this plan, how were they involved and if they have any role on the implementation of the actions. Add any relevant information of the National Society's role in the National Disaster Response System.", + "deliverInvolvedTooltipDescriptionOne": "It is important to establish that the National Society has the mandate to act early, in advance of a hazard and it can reduce the time required to agree to activate the early actions activities if partners government and non-government stakeholders are aware and involved in planning the simplified EAP. This mandate may need to be confirmed at the local level, as well as the region and national level.", + "deliverInvolvedTooltipDescriptionTwo": "The simplified EAP aims to make connections", + "deliverInvolvedTooltipDescriptionThree": "With national level partners, including government stakeholders, Met Service, civil society and other national or local experts. Planning for a simplified EAP can be an opportunity to develop these relationships and may be useful to define roles and responsibilities in a Memorandum of Understanding (MoU). This could be defined during the development of the simplified EAP or can be done as part of the kickoff activities, once a simplified EAP has been approved for funding. The Red Cross Red Crescent Climate Centre developed this guide – {guideLink} The guide includes some useful information, included under section 4, guiding questions and in annex A, a draft MoU, which could potentially be adapted for other partners.", + "guideLink": "Collaborating with national climate and weather agencies: a guide to getting started.", + "deliverInvolvedTooltipDescriptionFour": "Other general considerations:", + "deliverInvolvedTooltipListOne": "The simplified EAP should plan to target events that are forecasted/predicted to have an above average impact and that have caused humanitarian impacts in the past", + "deliverInvolvedTooltipListTwo": "The minimum standard for monitoring and evaluation is that each simplified EAP includes a lessons learned workshop.", + "deliverInvolvedTooltipListThree": "While not requested as part of the simplified EAP, National Societies should have a draft plan or SOP in place to monitor the forecasts/indicators, to activate the simplified EAP and deliver the early action activities within the lead time.", + "deliverInvolvedTooltipListFour": "The roles and responsibilities should be clear, who will do what at what time.", + "budgetHeading": "Budget", + "deliverTotalBudget": "Total budget", + "deliverTotalBudgetTooltip": "The maximum budget available for a National Society under a simplified EAP is CHF 200,000 over two years. In this field, the National Society should reflect the total amount of the budget (which should match the budget template). The total budget includes 65% maximum for readiness activities and prepositioned stock, with the balance funding the early action activities and needs to be inclusive of the IFRC’s indirect costs (6.5%). Additionally, the IFRC Delegation may add 10% of the total budget to support the simplified EAP implementation bringing the final budget to CHF 220,000 over two years. If a National Society has any questions on the budget, please consult the IFRC’s Country or Country Cluster Delegation. Readiness, pre-positioning, early action: These fields should reflect the plan and budget split across the three types of eligible activities and match the total budget.", + "deliverTotalBudgetDescription": "Add the expected budget amount.", + "deliverTotalBudgetTooltipDescription": "The budget template for the simplified EAP can be found {hereLink}. Please note that the budget template has a tab with guidelines on how to use it. ", + "hereLink": "here", + "deliverTotalBudgetTooltipListOne": "For a National Society, the maximum budget of a simplified EAP is CHF 200,000 (less IFRC indirect costs of 6.5%). This is around CHF 187,794.", + "deliverTotalBudgetTooltipListTwo": "For the IFRC, the delegation can access a maximum budget of 10% of the National Society Simplified EAP budget (less IFRC indirect costs of 6.5%).", + "deliverTotalBudgetTooltipListThree": "The total budget of the simplified EAP, including National Society and IFRC allocations, cannot exceed CHF 220,000. ", + "deliverTotalBudgetTooltipListFour": "All the activities in the ‘planned operation’ and ‘enabling approaches’ section need to be reflected in the budget (even if there is no cost related to an activity, a note should be included in the budget to explain that for example, there is no cost for this activity, or costs are combined with another activity (such as training combining two or more topics), or costs are covered by another project or donor. This helps when doing the cross check between the planned intervention matrix and the budget.", + "deliverTotalBudgetTooltipListFive": "Readiness activities (column C) should be done in YEAR 1 and/or YEAR 2 (column E) – ideally done in both years, although there may be some activities that only need to be done once. If the activity happens in both years insert the activity twice and select YEAR 1 for the first line and YEAR 2 for the second line.", + "deliverTotalBudgetTooltipListSix": "Pre-positioning activities (column C) are done in YEAR 1 (column E) – and should be done as soon as the project agreement is in place and funds are received by the National Society. All stock needs to have a minimum shelf life of two years.", + "deliverTotalBudgetTooltipListSeven": "Early Action activities (column C) should be budgeted under “year early action” YEAR EA (column E), these activities will be done only when the trigger is reached (which could be in year one, or year two, or may not happen in the duration of the simplified EAP).", + "deliverTotalBudgetTooltipListEight": "A maximum of 65% of the budget can be allocated combined to readiness and pre-positioning activities. You can check these percentages in the tab called “Summary by Year”, under column B.", + "deliverTotalBudgetTooltipListNine": "National Societies have flexibility to move between budget headings up to 10% of the approved simplified EAP budget.", + "deliverBudgetLabel": "Budget", + "deliverReadinessLabel": "Readiness", + "deliverPrepositioning": "Prepositioning", + "deliverBudgetDetails": "Budget details", + "deliverBudgetDetailsDescription": "Add here the page from the budget template called “EAP for publication”. Explain your selection criteria for who will be targeted.", + "earlyAction": "Early Action", + "upload": "Upload" + } +} diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx new file mode 100644 index 0000000000..3a7714cf51 --- /dev/null +++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx @@ -0,0 +1,248 @@ +import { + Container, + InfoPopup, + InputSection, + ListView, + NumberInput, + TextArea, + TextOutput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { resolveToComponent } from '@ifrc-go/ui/utils'; +import { + type EntriesAsList, + type Error, + getErrorObject, + getErrorString, +} from '@togglecorp/toggle-form'; + +import GoSingleFileInput from '#components/domain/GoSingleFileInput'; +import Link from '#components/Link'; +import TabPage from '#components/TabPage'; + +import { type PartialSimplifiedEapType } from '../schema'; + +import i18n from './i18n.json'; + +interface Props { + value: PartialSimplifiedEapType; + setFieldValue: (...entries: EntriesAsList) => void; + error: Error | undefined; + disabled?: boolean; + fileIdToUrlMap: Record; + setFileIdToUrlMap?: React.Dispatch>>; +} + +function DeliveryAndBudget(props: Props) { + const { + value, + setFieldValue, + error: formError, + disabled, + fileIdToUrlMap, + setFileIdToUrlMap, + } = props; + + const strings = useTranslation(i18n); + const error = getErrorObject(formError); + + return ( + + + + +