ERU: Update in eru form and eru page by shreeyash07 · Pull Request #2269 · IFRCGo/go-web-app

shreeyash07 · 2026-03-11T11:14:06Z

Addresses

Issue(s): ERU Readiness 2.0

Depends On

ERU Update

Changes

add options to select contribution type in update ERU form
group list from ns contribution in readiness info modal
filter national societies in ERU Type card to only which holds the ERU
add new components "ReadinessIconList" and "EruReadinessList"

This PR Ensures:

No typos or grammatical errors
No conflict markers left in the code
No unwanted comments, temporary files, or auto-generated files
No inclusion of secret keys or sensitive data
No console.log statements meant for debugging
All CI checks have passed

changeset-bot · 2026-03-11T11:14:13Z

⚠️ No Changeset found

Latest commit: 3e3cb28

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

frozenhelium

P.S. I have not verified the UI, do we have the design for this?

frozenhelium · 2026-03-12T04:28:07Z

...iew/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx

+export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]> & {
+    eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];
+    updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];


Suggested change

export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]> & {

eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];

updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];

export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[number]> & {

eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[number]['eru_owner_details'];

updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessTypeResponse['results']>[0]>['eru_readiness']>[number]['updated_at'];

frozenhelium · 2026-03-12T04:29:02Z

...iew/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx

 import i18n from './i18n.json';

-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
+type GetEruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;


Suggested change

type GetEruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;

type EruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;

frozenhelium · 2026-03-12T04:32:28Z

...iew/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx

+                        {isDefined(groupedByNsContribution?.[HOLDSERU]) && (
+                            <ListView
+                                layout="block"
+                                spacing="2xs"
+                            >
+                                <Heading level={6}>
+                                    {strings.eruHoldingERUTitle}
+                                </Heading>
+                                {groupedByNsContribution?.[HOLDSERU]?.map((readiness) => (
+                                    <Container
+                                        key={readiness.id}
+                                        heading={
+                                            readiness.eruOwner
+                                                .national_society_country_details.society_name
+                                        }
+                                        headingLevel={5}
+                                        withDarkBackground
+                                        withPadding
+                                    >
+                                        <ListView
+                                            layout="grid"
+                                            numPreferredGridColumns={3}
+                                            minGridColumnSize="6rem"
+                                        >
+                                            <ReadinessIcon
+                                                readinessType={readiness.equipment_readiness}
+                                                label={strings.eruEquipmentReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={readiness.people_readiness}
+                                                label={strings.eruPeopleReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={readiness.funding_readiness}
+                                                label={strings.eruFundingReadiness}
+                                            />
+                                        </ListView>
+                                    </Container>
+                                ))}
+                            </ListView>
+                        )}


Heading 5 after Heading 6 looks semantically incorrect, lets try to restructure this in the patter which also makes sense semantically

eg:

<Container headingLevel={5}> <ListView> <Container headingLevel={6}> {...} </Container> </ListView> </Container>

frozenhelium · 2026-03-12T04:33:04Z

...iew/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx

+                                <Heading level={6}>
+                                    {strings.eruSupportERUTitle}
+                                </Heading>
+                                {groupedByNsContribution?.[SUPPORTERU]?.map((readiness) => (
+                                    <Container
+                                        key={readiness.id}
+                                        heading={
+                                            readiness.eruOwner
+                                                .national_society_country_details.society_name
+                                        }
+                                        headingLevel={5}
+                                        withDarkBackground
+                                        withPadding
+                                    >
+                                        <ListView
+                                            layout="grid"
+                                            numPreferredGridColumns={3}
+                                            minGridColumnSize="6rem"
+                                        >
+                                            <ReadinessIcon
+                                                readinessType={readiness.equipment_readiness}
+                                                label={strings.eruEquipmentReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={readiness.people_readiness}
+                                                label={strings.eruPeopleReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={readiness.funding_readiness}
+                                                label={strings.eruFundingReadiness}
+                                            />
+                                        </ListView>
+                                    </Container>
+                                ))}
+                            </ListView>
+                        )}


Let's restructure to make it semantically correct as well

frozenhelium · 2026-03-12T04:33:45Z

...eOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx

+                        {isDefined(groupedByNsContribution?.[HOLDSERU]) && (
+                            <ListView
+                                layout="block"
+                                spacing="2xs"
+                            >
+                                <Heading level={6}>
+                                    {strings.emergencyHoldingERUTitle}
+                                </Heading>
+                                {groupedByNsContribution?.[HOLDSERU]?.map((eruType) => (
+                                    <Container
+                                        key={eruType.id}
+                                        heading={eruType.type_display}
+                                        headingLevel={5}
+                                        withDarkBackground
+                                        withPadding
+                                    >
+                                        <ListView
+                                            layout="grid"
+                                            minGridColumnSize="6rem"
+                                            numPreferredGridColumns={3}
+                                        >
+                                            <ReadinessIcon
+                                                readinessType={eruType.equipment_readiness}
+                                                label={strings.eruNSEquipmentReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={eruType.people_readiness}
+                                                label={strings.eruNSPeopleReadiness}
+                                            />
+                                            <ReadinessIcon
+                                                readinessType={eruType.funding_readiness}
+                                                label={strings.eruNSFundingReadiness}
+                                            />
+                                        </ListView>
+                                    </Container>
+                                ))}
+                            </ListView>


Let's restructure to make it semantically correct as well

frozenhelium · 2026-03-12T04:35:53Z

app/src/utils/constants.ts

+export const HOLDSERU = 1 satisfies TypeOfNsContributionEnum;
+export const SUPPORTERU = 2 satisfies TypeOfNsContributionEnum;


Suggested change

export const HOLDSERU = 1 satisfies TypeOfNsContributionEnum;

export const SUPPORTERU = 2 satisfies TypeOfNsContributionEnum;

export const NS_CONTRIBUTION_HOLDS_ERU = 1 satisfies TypeOfNsContributionEnum;

export const NS_CONTRIBUTION_SUPPORTS_ERU = 2 satisfies TypeOfNsContributionEnum;

frozenhelium · 2026-03-12T04:36:43Z

translationMigrations/000072-1773227737554.json

We will need to regenerate this

frozenhelium · 2026-03-12T04:39:58Z

app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx

        nationalSocieties: joinStrings(unique(item.readinessList.map((v) => (
-            v.eruOwner.national_society_country_details.society_name
+            v.ns_contribution === HOLDSERU
+                ? v.eruOwner.national_society_country_details.society_name
+                : undefined
        ))).filter(isDefined)),


This expression will be clearer if we apply filter first, to extract societies with the required condition and then apply mapping by the society name

frozenhelium · 2026-03-12T04:41:14Z

app/src/views/EruReadinessForm/EruInputItem/index.tsx

+function contributionLabelSelector(option: ContributionOption) {
+    return option.value;
+}


We should be able to re-use something like stringValueSelector here

frozenhelium · 2026-03-12T04:41:42Z

app/src/views/EruReadinessForm/EruInputItem/index.tsx

+function contributionKeySelector(option: ContributionOption) {
+    return option.key;
+}


If key is not enum, we should be able to re-use existing key selectors from utils/selectors

using existing key selectors gave error so not making any changes.

shreeyash07 · 2026-03-12T08:11:17Z

P.S. I have not verified the UI, do we have the design for this?

You can see the updated ERU section in Figma, and for more context there's a ticket linked in the PR description.

- add options to select contribution type in update ERU form - group list from ns contribution in readiness info modal - filter national societies in ERU Type card to only which holds the ERU

shreeyash07 force-pushed the feat/eru-update branch from ec4889c to c31fd50 Compare March 11, 2026 11:15

shreeyash07 requested review from AdityaKhatri, barshathakuri, frozenhelium, subinasr and tnagorra March 11, 2026 11:17

frozenhelium requested changes Mar 12, 2026

View reviewed changes

shreeyash07 force-pushed the feat/eru-update branch from a56f597 to ccd18ff Compare March 12, 2026 08:07

shreeyash07 requested a review from frozenhelium March 12, 2026 08:12

shreeyash07 added 3 commits March 12, 2026 14:03

feat(surge-eru): update in eru surge page

96dbf07

- add options to select contribution type in update ERU form - group list from ns contribution in readiness info modal - filter national societies in ERU Type card to only which holds the ERU

fixup! feat(surge-eru): update in eru surge page

ccd18ff

fixup! feat(surge-eru): update in eru surge page

3e3cb28

	type GetEruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
	type EruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;

		export const HOLDSERU = 1 satisfies TypeOfNsContributionEnum;
		export const SUPPORTERU = 2 satisfies TypeOfNsContributionEnum;

Conversation

shreeyash07 commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Addresses

Depends On

Changes

This PR Ensures:

Uh oh!

changeset-bot bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

frozenhelium left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shreeyash07 commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shreeyash07 commented Mar 11, 2026 •

edited

Loading

changeset-bot bot commented Mar 11, 2026 •

edited

Loading