Add Description for country pages tabs

src/App/PageError/i18n.json

@@ -0,0 +1,13 @@
+{
+    "namespace": "errorPage",
+    "strings": {
+        "errorPageIssueMessage": "Oops! Looks like we ran into some issue!",
+        "errorPageUnexpectedMessage": "Something unexpected happened!",
+        "errorPageHide": "Hide Error",
+        "errorPageShowError": "Show Full Error",
+        "errorPageStackTrace": "Stack trace not available",
+        "errorSeeDeveloperConsole": "See the developer console for more details",
+        "errorPageGoBack": "Go back to homepage",
+        "errorPageReload": "Reload"
+    }
+}

src/App/PageError/index.tsx

@@ -1,15 +1,18 @@
 import { useCallback, useEffect } from 'react';
 import { useRouteError } from 'react-router-dom';
 
-import useBooleanState from '#hooks/useBooleanState';
 import Button from '#components/Button';
 import Link from '#components/Link';
+import useBooleanState from '#hooks/useBooleanState';
+import useTranslation from '#hooks/useTranslation';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 function PageError() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const errorResponse = useRouteError() as unknown as any;
+    const strings = useTranslation(i18n);
 
     useEffect(
         () => {
@@ -40,33 +43,28 @@ function PageError() {
             <div className={styles.container}>
                 <div className={styles.content}>
                     <h1 className={styles.heading}>
-                        {/* FIXME: use translations */}
-                        Oops! Looks like we ran into some issue!
+                        {strings.errorPageIssueMessage}
                     </h1>
                     <div className={styles.message}>
-                        {/* FIXME: use translations */}
                         {errorResponse?.error?.message
                             ?? errorResponse?.message
-                            ?? 'Something unexpected happened!'}
+                            ?? strings.errorPageUnexpectedMessage}
                     </div>
                     <Button
                         name={undefined}
                         onClick={toggleFullErrorVisibility}
                         variant="tertiary"
                     >
-                        {/* FIXME: use translations */}
-                        {fullErrorVisible ? 'Hide Error' : 'Show Full Error'}
+                        {fullErrorVisible ? strings.errorPageHide : strings.errorPageShowError}
                     </Button>
                     {fullErrorVisible && (
                         <>
                             <div className={styles.stack}>
-                                {/* FIXME: use translations */}
                                 {errorResponse?.error?.stack
-                                    ?? errorResponse?.stack ?? 'Stack trace not available'}
+                                    ?? errorResponse?.stack ?? strings.errorPageStackTrace}
                             </div>
                             <div className={styles.actions}>
-                                {/* FIXME: use translations */}
-                                See the developer console for more details
+                                {strings.errorSeeDeveloperConsole}
                             </div>
                         </>
                     )}
@@ -78,15 +76,13 @@ function PageError() {
                         external
                         variant="secondary"
                     >
-                        {/* FIXME: use translations */}
-                        Go back to homepage
+                        {strings.errorPageGoBack}
                     </Link>
                     <Button
                         name={undefined}
                         onClick={handleReloadButtonClick}
                     >
-                        {/* FIXME: use translations */}
-                        Reload
+                        {strings.errorPageReload}
                     </Button>
                 </div>
             </div>

src/views/CountryNsOverviewActivities/Map/index.tsx

@@ -49,6 +49,7 @@ import {
 } from '#utils/constants';
 
 import useCountry from '#hooks/domain/useCountry';
+import TextOutput from '#components/TextOutput';
 import Message from '#components/Message';
 import Link from '#components/Link';
 import BaseMap from '#components/domain/BaseMap';
@@ -436,6 +437,13 @@ function CountryThreeWNationalSocietyProjectsMap(props: Props) {
                                 coordinates={clickedPointProperties.lngLat}
                                 onCloseButtonClick={handlePointClose}
                                 heading={clickedPointProperties.countryName}
+                                headerDescription={(
+                                    <TextOutput
+                                        value={projectList?.map((i) => i.modified_at)}
+                                        label="Last Updated"
+                                    // valueType="date"
+                                    />
+                                )}
                                 childrenContainerClassName={styles.mapPopupContent}
                             >
                                 {(clickedPointProjectsResponsePending

src/views/CountryNsOverviewActivities/i18n.json

@@ -23,7 +23,7 @@
         "nSProjectStatus": "Project Status",
         "nSProjectDataNotAvailable": "Data not available!",
         "addNSActivity": "Add NS Activity",
-        "nSActivityDescription": "The following data displays the International activities of the National Society which includes emergency or non-emergency related projects and programmes. The displayed data is based on reporting and may not be fully indicative of all the activities.",
+        "nSActivityDescription": "The following data displays the current and ongoing emergencies within the country that are reported by the National Societies and partners. The displayed data is based on reporting and may not be fully indicative of all activities.",
         "nSFailedToCreateExport": "Failed to generate export."
     }
 }

src/views/CountryNsOverviewCapacity/i18n.json

@@ -8,7 +8,7 @@
         "perAssessmentDateLabel": "Assessment date",
         "perStartPerProcess": "Start PER Process",
         "perViewLink": "View",
-        "nSOverviewCapacityDescription": "This following are various processes and assessment that the NS has done with IFRC that address National Society development, capacity, preparedness, and others.",
-        "nsOverviewCapacityLink": "IFRC Evaluations Database"
+        "nSOverviewCapacityDescription": "The following are various processes and assessment that the NS has done with IFRC that address National Society development, capacity, preparedness, and others.",
+        "nsOverviewCapacityLink": "IFRC Evaluations Database",
     }
 }

src/views/CountryNsOverviewCapacity/index.tsx

@@ -1,5 +1,4 @@
 import { useOutletContext } from 'react-router-dom';
-import { ArrowRightUpLineIcon } from '@ifrc-go/icons';
 import { isDefined, isNotDefined } from '@togglecorp/fujs';
 
 import BlockLoading from '#components/BlockLoading';

src/views/CountryNsOverviewStrategicPriorities/i18n.json

@@ -8,6 +8,7 @@
         "countryPlanKeyFigureRequestedAmount": "Federation-Wide Requested Amount (CHF)",
         "strengthsHeading": "Strengths (PER process)",
         "keyDevelopmentPrioritiesHeading": "Key Development Priorities (PER process)",
-        "notAvailableMessage": "Strategic priorities not available!"
+        "notAvailableMessage": "Strategic priorities not available!",
+        "strategicPrioritiesDescription": "The following data highlights the focus areas the National Society, as well as the ongoing partnerships and support as applicable."
     }
 }

src/views/CountryNsOverviewStrategicPriorities/index.tsx

@@ -112,7 +112,7 @@ export function Component() {
         () => {
             if (
                 isNotDefined(assessmentResponse)
-                    || isNotDefined(assessmentResponse.area_responses)
+                || isNotDefined(assessmentResponse.area_responses)
             ) {
                 return undefined;
             }
@@ -134,7 +134,7 @@ export function Component() {
         () => {
             if (
                 isNotDefined(assessmentResponse)
-                    || isNotDefined(assessmentResponse.area_responses)
+                || isNotDefined(assessmentResponse.area_responses)
             ) {
                 return undefined;
             }
@@ -171,7 +171,10 @@ export function Component() {
     const hasCountryPlan = countryResponse?.has_country_plan;
 
     return (
-        <div className={styles.countryNsOverviewStrategicPriorities}>
+        <Container
+            childrenContainerClassName={styles.countryNsOverviewStrategicPriorities}
+            headerDescription={strings.strategicPrioritiesDescription}
+        >
             {(perPending || countryPlanPending) && (
                 <BlockLoading />
             )}
@@ -292,7 +295,7 @@ export function Component() {
                     )}
                 </div>
             )}
-        </div>
+        </Container>
     );
 }
 

src/views/CountryNsOverviewStrategicPriorities/styles.module.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--go-ui-spacing-2xl);
-    padding: var(--go-ui-spacing-2xl) 0;
+    /* padding: var(--go-ui-spacing-2xl) 0; */
 
     .per-components {
         display: grid;

src/views/CountryOngoingActivitiesEmergencies/i18n.json

@@ -10,6 +10,7 @@
         "countryOngoingActivitiesKeyFiguresBudget": "Funding Requirements (CHF)",
         "countryOngoingActivitiesKeyFiguresDref": "These are small to medium scale emergency operations funded through the Disaster Relief Emergency Fund (DREF).The DREF provides immediate financial support to National Red Cross and Red Crescent Societies, enabling them to carry out their unique role as first responders after a disaster.",
         "countryOngoingActivitiesKeyFiguresTargetPop": "Targeted Population",
-        "countryOngoingActivitiesKeyFiguresDrefTitle": "DREF"
+        "countryOngoingActivitiesKeyFiguresDrefTitle": "DREF",
+        "editCountryLink": "Edit Country"
     }
 }

src/views/CountryOngoingActivitiesEmergencies/index.tsx

@@ -5,6 +5,7 @@ import {
     FundingIcon,
     FundingCoverageIcon,
     TargetedPopulationIcon,
+    PencilFillIcon,
 } from '@ifrc-go/icons';
 import {
     isDefined,
@@ -17,15 +18,21 @@ import InfoPopup from '#components/InfoPopup';
 import HighlightedOperations from '#components/domain/HighlightedOperations';
 import ActiveOperationMap from '#components/domain/ActiveOperationMap';
 import AppealsTable from '#components/domain/AppealsTable';
+import Container from '#components/Container';
 import KeyFigure from '#components/KeyFigure';
+import Link from '#components/Link';
+import { adminUrl } from '#config';
 import useTranslation from '#hooks/useTranslation';
-import { type CountryOutletContext } from '#utils/outletContext';
+import useAuth from '#hooks/domain/useAuth';
 import { getPercentage } from '#utils/common';
+import { type CountryOutletContext } from '#utils/outletContext';
+import { resolveUrl } from '#utils/resolveUrl';
 import { useRequest } from '#utils/restRequest';
 
+import EmergencyAlertsTable from './EmergencyAlerts';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
-import EmergencyAlertsTable from './EmergencyAlerts';
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
@@ -36,6 +43,8 @@ export function Component() {
         countryResponse,
     } = useOutletContext<CountryOutletContext>();
 
+    const { isAuthenticated } = useAuth();
+
     const {
         pending: aggregatedAppealPending,
         response: aggregatedAppealResponse,
@@ -48,13 +57,21 @@ export function Component() {
     const bbox = isDefined(countryResponse) ? getBbox(countryResponse.bbox) : undefined;
 
     return (
-        <div
-            className={styles.countryOngoingActivitiesEmergencies}
+        <Container
+            childrenContainerClassName={styles.countryOngoingActivitiesEmergencies}
+            headerDescription={strings.countryOngoingActivitiesEmergenciesDescription}
+            actions={isAuthenticated && (
+                <Link
+                    external
+                    href={resolveUrl(adminUrl, `api/country/${countryId}/change/`)}
+                    variant="secondary"
+                    icons={<PencilFillIcon />}
+                >
+                    {strings.editCountryLink}
+                </Link>
+            )}
         >
             {aggregatedAppealPending && <BlockLoading />}
-            <div>
-                {strings.countryOngoingActivitiesEmergenciesDescription}
-            </div>
             {!aggregatedAppealPending && aggregatedAppealResponse && (
                 <div className={styles.keyFigureList}>
                     <KeyFigure
@@ -134,6 +151,6 @@ export function Component() {
                     countryId={Number(countryId)}
                 />
             )}
-        </div>
+        </Container>
     );
 }

src/views/CountryOngoingActivitiesThreeWActivities/i18n.json

@@ -21,6 +21,7 @@
         "responseActivities": "Response Activities",
         "activitiesBySector": "Activities by Sector",
         "dataNotAvailable": "No Activities",
-        "threeWViewAllActivityLabel": "View all Activities"
+        "threeWViewAllActivityLabel": "View all Activities",
+        "threeWActivityDescription": "The following data displays the current and ongoing emergencies within the country that are reported by the National Societies and partners. The displayed data is based on reporting and may not be fully indicative of all the activities."
     }
 }

src/views/CountryOngoingActivitiesThreeWActivities/index.tsx

@@ -328,7 +328,7 @@ export function Component() {
     return (
         <div className={styles.threewActivities}>
             <Container
-                withHeaderBorder
+                headerDescription={strings.threeWActivityDescription}
                 footerContent={(
                     <div className={styles.chartDescription}>
                         <InformationLineIcon className={styles.icon} />

src/views/CountryOngoingActivitiesThreeWProjects/i18n.json

@@ -26,6 +26,7 @@
         "otherNSProjects": "Projects by Other NS ({count})",
         "programmeType": "Programme Type",
         "projectStatus": "Project Status",
-        "countryThreeWDataNotAvailable": "Data not available!"
+        "countryThreeWDataNotAvailable": "Data not available!",
+        "threeWProjectDescription": "The following data displays the ongoing programmes and projects within the country that are not linked to specific emergencies. The displayed data is based on reporting and may not be fully indicative of all the projects."
     }
 }

src/views/CountryOngoingActivitiesThreeWProjects/index.tsx

@@ -344,11 +344,12 @@ export function Component() {
         <Container
             className={styles.countryThreeWProjects}
             childrenContainerClassName={styles.content}
+            headerDescription={strings.threeWProjectDescription}
             actions={(
                 isDefined(userMe?.id) && (
                     <div className={styles.countryThreeWActions}>
                         <Link
-                            variant="primary"
+                            variant="secondary"
                             to="newThreeWProject"
                             state={{ reportingNsId: countryId }}
                         >

src/views/CountryOngoingActivitiesThreeWProjects/styles.module.css

@@ -1,8 +1,8 @@
 .country-three-w-projects {
     display: flex;
     flex-direction: column;
-    padding: var(--go-ui-spacing-2xl) 0;
     gap: var(--go-ui-spacing-2xl);
+    /* padding: var(--go-ui-spacing-2xl) 0; */
 
     .content {
         display: grid;

src/views/CountryProfile/styles.module.css

@@ -1,3 +1,6 @@
 .country-profile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-2xl);
     padding: var(--go-ui-spacing-2xl) 0;
 }

src/views/CountryProfileRiskWatch/i18n.json

@@ -6,6 +6,8 @@
         "risksByMonthDescription": "The table below displays available information about specific disaster risks for each month. When you move the slider from month to month, the information will update automatically. Hold Shift to select a range of months -- this will display the cumulative number of people exposed and at risk of displacement. Selecting \"Yearly Avg\" will display the annual figures from INFORM and the total number of people exposed and at risk of being displaced per country per year.",
         "eapHeading": "Early Action Protocols (EAPs)",
         "eapDownloadButtonLabel": "Download the EAP",
-        "eapDescription": "EAPs are a formal plan that guide timely and effective implementation of early actions for extreme weather events, based on pre-agreed triggers."
+        "eapDescription": "EAPs are a formal plan that guide timely and effective implementation of early actions for extreme weather events, based on pre-agreed triggers.",
+        "riskWatchDescription": "The following dataset displays information about the modeled impact of specific forecasted or detected natural hazards.",
+        "riskWatchSubmitDREF": "Submit a DREF"
     }
 }

src/views/CountryProfileRiskWatch/index.tsx

@@ -115,7 +115,20 @@ export function Component() {
     );
 
     return (
-        <div className={styles.countryRiskWatch}>
+        <Container
+            childrenContainerClassName={styles.countryRiskWatch}
+            headerDescription={strings.riskWatchDescription}
+            actions={(
+                // TODO: Add a link for submit a Dref
+                <Link
+                    external
+                    href="/"
+                    variant="secondary"
+                >
+                    {strings.riskWatchSubmitDREF}
+                </Link>
+            )}
+        >
             {pendingImminentEventCounts && (
                 <BlockLoading />
             )}
@@ -182,7 +195,7 @@ export function Component() {
                 variant="country"
                 countryId={Number(countryId)}
             />
-        </div>
+        </Container>
     );
 }