feat(eap): add PrintableDescription component

frozenhelium · frozenhelium · commit f8c973be080f · 2025-12-14T14:39:56.000+05:45
- With support for the diff view
diff --git 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/components/PerExportModal/index.tsx b/app/src/components/PerExportModal/index.tsx
@@ -14,11 +14,15 @@ import {
 
 import Link from '#components/Link';
 import { type components } from '#generated/types';
-import { useRequest } from '#utils/restRequest';
+import {
+    type GoApiBody,
+    useRequest,
+} from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
 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;
@@ -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/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/index.tsx b/app/src/components/domain/EapExportModal/index.tsx
@@ -41,6 +41,7 @@ interface Props {
     eapType: EapType;
     version?: number;
     onClose: () => void;
+    diff?: boolean;
 }
 
 function EapExportModal(props: Props) {
@@ -49,6 +50,7 @@ function EapExportModal(props: Props) {
         eapType,
         onClose,
         version,
+        diff,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -59,13 +61,14 @@ function EapExportModal(props: Props) {
     const exportTriggerBody = useMemo<ExportBody>(
         () => ({
             export_id: eapId,
-            export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified-eap' : 'full-eap',
+            export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified' : 'full',
             selector: '#pdf-preview-ready',
-            is_pga: false,
+            is_pga: undefined,
             per_country: undefined,
             version,
+            diff,
         }),
-        [eapId, eapType, version],
+        [eapId, eapType, version, diff],
     );
 
     const {
diff --git a/app/src/components/printable/PrintableDescription/index.tsx 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 (
+            <div className={_cs(styles.printableDescription, className)}>
+                {value}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={_cs(
+                styles.printableDescription,
+                styles.withDiffView,
+                className,
+            )}
+        >
+            {diff.map((part, index) => {
+                const { added, removed, value: partValue } = part;
+
+                if (added) {
+                    return (
+                        <span
+                            className={styles.added}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                if (removed) {
+                    return (
+                        <span
+                            className={styles.removed}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Fragment key={index}>
+                        {partValue}
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+}
+
+export default PrintableDescription;
diff --git a/app/src/components/printable/PrintableDescription/styles.module.css 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/utils/constants.ts b/app/src/utils/constants.ts
@@ -222,4 +222,3 @@ 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/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
@@ -1,8 +1,6 @@
 {
     "namespace":"accountMyFormsEap",
     "strings":{
-        "eapViewLabel": "View",
-        "eapEditLabel": "Edit",
         "eapStartFullLink": "Start Full EAP",
         "eapStartSimplifiedLink": "Start sEAP",
         "eapEditFullLink": "Edit Full EAP",
diff --git a/app/src/views/AccountMyFormsEap/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json
@@ -6,7 +6,6 @@
         "eapLastUpdated": "Last Updated",
         "eapName": "Name/Phase",
         "eapType": "EAP Type",
-        "eapStatus": "Status",
-        "eapRegistration": "EAP Registration"
+        "eapStatus": "Status"
     }
 }
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
@@ -251,31 +251,31 @@ export function Component() {
 
     const detailColumns = useMemo(
         () => ([
-            createExpansionIndicatorColumn<EapExpandedListItem, string>(
+            createExpansionIndicatorColumn<EapExpandedListItem, string | number>(
                 true,
                 (row) => !!row.disabled,
             ),
-            createDateColumn<EapExpandedListItem, string>(
+            createDateColumn<EapExpandedListItem, string | number>(
                 'created_at',
                 strings.eapLastUpdated,
                 (row) => row.lastUpdated,
             ),
-            createStringColumn<EapExpandedListItem, string>(
+            createStringColumn<EapExpandedListItem, string | number>(
                 'title',
                 '',
                 (row) => row.label,
                 { withLightText: (item) => !!item.disabled },
             ),
-            createEmptyColumn<EapExpandedItem, string>(),
-            createElementColumn<EapExpandedListItem, string, EapTableActionProps>(
+            createEmptyColumn<EapExpandedListItem, string | number>(),
+            createElementColumn<EapExpandedListItem, string | number, EapTableActionProps>(
                 'actions',
                 '',
                 EapTableActions,
                 (_, row) => ({
                     expandedListItem: row,
                 }),
             ),
-            createEmptyColumn<EapExpandedItem, string>(),
+            createEmptyColumn<EapExpandedListItem, string | number>(),
         ]),
         [strings.eapLastUpdated],
     );
diff --git a/app/src/views/SimplifiedEapExport/i18n.json b/app/src/views/SimplifiedEapExport/i18n.json
@@ -1,6 +1,8 @@
 {
     "namespace": "simplifiedEapExport",
     "strings": {
+        "pageTitleSimplifiedText": "Simplified",
+        "pageTitleEapText": "Early Action Protocol",
         "sEapNoLabel": "sEAP No",
         "totalBudgetLabel": "Total Budget",
         "readinessLabel": "Readiness",
@@ -33,7 +35,6 @@
         "conditionsToDeliverHeading": "Conditions to deliver the Early Action",
         "earlyActionCapacityHeading": "Experience and/or capacity to implement the early actions",
         "rcrcMovementInvolvementHeading": "RCRC Movement partners, Governmental/other agencies consulted/involved",
-        "budgetHeading": "Budget",
         "contactInformationHeading": "Contact information",
         "contactInformationDescription": "For further information, specifically related to this simplified EAP please contact:"
     }
diff --git a/app/src/views/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"namespace":"accountMyFormsEap",`
`3`	`3`	`"strings":{`
`4`		`- "eapViewLabel": "View",`
`5`		`- "eapEditLabel": "Edit",`
`6`	`4`	`"eapStartFullLink": "Start Full EAP",`
`7`	`5`	`"eapStartSimplifiedLink": "Start sEAP",`
`8`	`6`	`"eapEditFullLink": "Edit Full EAP",`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`	`"eapLastUpdated": "Last Updated",`
`7`	`7`	`"eapName": "Name/Phase",`
`8`	`8`	`"eapType": "EAP Type",`
`9`		`- "eapStatus": "Status",`
`10`		`- "eapRegistration": "EAP Registration"`
	`9`	`+ "eapStatus": "Status"`
`11`	`10`	`}`
`12`	`11`	`}`