feat(eap): add ExplanatoryNote components in both EAP form replacing tooltip

    - add IconButton in InfoModal
    - hide export button for staging and production

Author: shreeyash07

app/src/components/ExplanatoryNote/index.tsx

@@ -0,0 +1,34 @@
+import { InformationLineIcon } from '@ifrc-go/icons';
+
+import InfoModal from '#components/domain/InfoModal';
+
+import styles from './styles.module.css';
+
+interface Props {
+    content: React.ReactNode;
+    heading: string;
+    ariaLabel: string;
+    title: string;
+}
+
+function ExplanatoryNote(props: Props) {
+    const {
+        content,
+        heading,
+        ariaLabel,
+        title,
+    } = props;
+
+    return (
+        <InfoModal
+            name={undefined}
+            heading={heading}
+            modalContent={content}
+            icon={(<InformationLineIcon className={styles.icon} />)}
+            ariaLabel={ariaLabel}
+            title={title}
+        />
+    );
+}
+
+export default ExplanatoryNote;

app/src/components/ExplanatoryNote/styles.module.css

@@ -0,0 +1,4 @@
+.icon {
+    /* FIXME: use variables */
+    font-size: 1rem;
+}

app/src/components/domain/EapOperationActivityListInput/index.tsx

@@ -6,7 +6,7 @@ import { AddLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
-    InfoPopup,
+    Description,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -24,6 +24,7 @@ import {
 
 import EapOperationActivityInput from '#components/domain/EapOperationActivityInput';
 import { type OperationActivityFormFields } from '#components/domain/EapOperationActivityInput/schema';
+import ExplanatoryNote from '#components/ExplanatoryNote';
 import Link from '#components/Link';
 import NonFieldError from '#components/NonFieldError';
 
@@ -123,9 +124,16 @@ function EapOperationActivityListInput<const NAME extends FormName>(props: Props
             heading={(
                 <ListView spacing="sm">
                     {title}
-                    {description && (
-                        <InfoPopup
-                            description={description}
+                    {(title && description) && (
+                        <ExplanatoryNote
+                            heading={title}
+                            ariaLabel={title}
+                            title={title}
+                            content={(
+                                <Description>
+                                    {description}
+                                </Description>
+                            )}
                         />
                     )}
                 </ListView>

app/src/components/domain/InfoModal/index.tsx

@@ -1,24 +1,44 @@
 import {
     Button,
     type ButtonProps,
+    IconButton,
     Modal,
 } from '@ifrc-go/ui';
 import { useBooleanState } from '@ifrc-go/ui/hooks';
 
+type IconButtonProps = {
+    icon: React.ReactNode;
+    ariaLabel: string;
+    label?: never;
+    title: string;
+}
+
+type LabelButtonProps = {
+    icon?: never;
+    ariaLabel?: string;
+    label?: string;
+}
+
+type ButtonTypeProps = IconButtonProps | LabelButtonProps;
+
 // FIXME: make the props consistent with other similar components
 // e.g. DropdownMenu
-interface Props extends ButtonProps<undefined> {
+interface BaseProps extends ButtonProps<undefined> {
     heading?: string;
     modalContent: React.ReactNode;
-    label?: string;
 }
 
+type Props = BaseProps & ButtonTypeProps;
+
 // FIXME: this component should be in `/components`
 function InfoModal(props: Props) {
     const {
         heading,
         label,
         modalContent,
+        ariaLabel,
+        title,
+        icon,
         ...otherButtonProps
     } = props;
 
@@ -32,14 +52,25 @@ function InfoModal(props: Props) {
 
     return (
         <>
-            <Button
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherButtonProps}
-                name={undefined}
-                onClick={setShowInfoModalTrue}
-            >
-                {label}
-            </Button>
+            {icon ? (
+                <IconButton
+                    name={undefined}
+                    onClick={setShowInfoModalTrue}
+                    ariaLabel={ariaLabel}
+                    title={title}
+                >
+                    {icon}
+                </IconButton>
+            ) : (
+                <Button
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherButtonProps}
+                    name={undefined}
+                    onClick={setShowInfoModalTrue}
+                >
+                    {label}
+                </Button>
+            )}
             {showInfoModal && (
                 <Modal
                     onClose={setShowInfoModalFalse}

app/src/views/AccountMyFormsEap/EapTableActions/index.tsx

@@ -19,6 +19,7 @@ import {
 
 import EapExportModal from '#components/domain/EapExportModal';
 import Link from '#components/Link';
+import { environment } from '#config';
 import {
     EAP_STATUS_NS_ADDRESSING_COMMENTS,
     EAP_STATUS_PENDING_PFA,
@@ -151,7 +152,7 @@ function EapTableActions(props: Props) {
             )}
             {type === 'development' && (
                 <>
-                    {eap.eap_type === EAP_TYPE_SIMPLIFIED && isCreated && (
+                    {environment === 'testing' && eap.eap_type === EAP_TYPE_SIMPLIFIED && isCreated && (
                         <Link
                             to="eapSimplifiedExport"
                             urlParams={{ eapId: eap.id }}
@@ -164,7 +165,7 @@ function EapTableActions(props: Props) {
                             {strings.previewExportLinkLabel}
                         </Link>
                     )}
-                    {eap.eap_type === EAP_TYPE_FULL && isCreated && (
+                    {environment === 'testing' && eap.eap_type === EAP_TYPE_FULL && isCreated && (
                         <Link
                             to="eapFullExport"
                             urlParams={{ eapId: eap.id }}

app/src/views/EapFullForm/EapActivationProcess/i18n.json

@@ -10,10 +10,10 @@
         "activationProcessExplanatoryLabel": "Explanatory Note",
         "activationProcessRequiredPointsLabel": "Required Points",
         "activationImplementationExplanatoryNote": "As a crucial component of the EAP, once the trigger has been reached, everyone involved should be knowledgeable about what will be done, where, when and by whom. The described implementation process shows that each step of the activation has been thought through and considered and that implementation in the lead time available is possible. The set of tasks described in this section should cover all activities from the moment the trigger is reached (Day 1) to the completion of post-impact surveys (Day X).",
-        "activationImplementationRequiredPoint1": "Include a matrix/flowchart for a quick overview of the early action implementation process.",
-        "activationImplementationRequiredPoint2": "Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider).",
-        "activationImplementationRequiredPoint3": "For each action, include at which level it will take place (HQ, branch, community).",
-        "activationImplementationRequiredPoint4": "Each NS should have a detailed version of this process, including communication flows, for each task and the name of the person responsible with their contact information. This document should be regularly updated.",
+        "activationRequiredPoint1": "Include a matrix/flowchart for a quick overview of the early action implementation process.",
+        "activationRequiredPoint2": "Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider).",
+        "activationRequiredPoint3": "For each action, include at which level it will take place (HQ, branch, community).",
+        "activationRequiredPoint4": "Each NS should have a detailed version of this process, including communication flows, for each task and the name of the person responsible with their contact information. This document should be regularly updated.",
         "activationProcessUploadLabel": "Upload",
         "activationTriggerTitle": "Trigger activation system",
         "activationTriggerDescription1": "Describe the automatic system used to monitor the forecasts, generate the intervention map and send the alert message when the trigger is reached.",
@@ -31,9 +31,9 @@
         "activationSelectionDescription3": "If  the EAP is intending to use Social Protection systems or other government      beneficiary databases, indicate how the potential number of targeted households be selected",
         "activationSelectionExplanatoryNote": "FbF aims to protect the most vulnerable from the impact of extreme weather events. Based on the analysis on vulnerability and exposure (in section 3) and on the described mechanism for identifying intervention areas/communities (in section 4- Intervention area), it needs to be clear, how vulnerability criteria and impact forecasts will be applied to determine who will be targeted.",
         "activationStopMechanismTitle": "Stop Mechanism",
-        "activationStopMechanismDescription1": "Indicate on which day of activation the stop mechanism is foreseen, and who is responsible to give the signal to stop.",
-        "activationStopMechanismDescription2": "Describe when the stop mechanism begins and whether in-kind/cash distribution would be stopped or not. For cash actions cancelled, how would this be coordinated with the financial service provider? For in-kind distribution, what would happen with the perishable items?",
-        "activationStopMechanismDescription3": "Explain how it would be communicated to communities and stakeholders that the activities are being stopped.",
+        "activationStopDescription1": "Indicate on which day of activation the stop mechanism is foreseen, and who is responsible to give the signal to stop.",
+        "activationStopDescription2": "Describe when the stop mechanism begins and whether in-kind/cash distribution would be stopped or not. For cash actions cancelled, how would this be coordinated with the financial service provider? For in-kind distribution, what would happen with the perishable items?",
+        "activationStopDescription3": "Explain how it would be communicated to communities and stakeholders that the activities are being stopped.",
         "activationStopMechanismExplanatoryNote": "For forecast triggers with a lead time of more than three days, the EAP should include the description of a stop mechanism. This means that if a later forecast – prior to the start of activities (related to the early action(s)) shows that the event is no longer likely to occur, the activation of the EAP will be stopped to avoid generating further use of resources. For example, if the 6-day forecast on Day 1 indicates high risk of heavy rainfall and thereby triggers the activation and the new 6-day-forecast released on Day 3 shows that the risk has significantly lowered, the trigger level is no longer reached. If the start of distributions was planned for Day 4, activation should be stopped. Items that have been purchased based on the trigger being reached and are not distributed due to the stop mechanism should be stored in the warehouse for a future activation. For forecast triggers with a lead time of less than 3 days, the EAP should include the description of what the National Society would do if the forecast changes in strength or location within the last three days before the event.",
         "activationAttachFilesTitle": "Attach Relevant Files",
         "activationAttachFilesDescription": "Attach any additional maps, documentation, files, images, etc.",