Remove blocker to add/edit DREF form for other languages.

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

@@ -30,6 +30,7 @@ interface Props<N> {
     name: N;
     url: SupportedPaths;
     value: Value | null | undefined;
+    readOnly: boolean;
     onChange: (value: SetValueArg<Value> | undefined, name: N) => void;
     error: ObjectError<Value> | undefined;
     fileIdToUrlMap: Record<number, string>;
@@ -44,6 +45,7 @@ interface Props<N> {
 function ImageWithCaptionInput<const N extends string | number>(props: Props<N>) {
     const {
         className,
+        readOnly,
         name,
         value,
         url,
@@ -92,6 +94,7 @@ function ImageWithCaptionInput<const N extends string | number>(props: Props<N>)
                 name="id"
                 accept="image/*"
                 value={value?.id}
+                readOnly={readOnly}
                 onChange={handleFileInputChange}
                 url={url}
                 fileIdToUrlMap={fileIdToUrlMap}
@@ -116,6 +119,7 @@ function ImageWithCaptionInput<const N extends string | number>(props: Props<N>)
                     className={styles.captionInput}
                     name="caption"
                     value={value?.caption}
+                    readOnly={readOnly}
                     onChange={setFieldValue}
                     error={error?.caption}
                     placeholder={strings.imageWithCaptionEnterCaption}

app/src/components/domain/LanguageMismatchMessage/i18n.json

@@ -1,8 +1,8 @@
 {
     "namespace": "languageMismatchMessage",
     "strings": {
-        "languageMismatchErrorTitle": "Edit not available in selected language!",
-        "languageMismatchErrorMessage": "This form was originally created in {originalLanguage} and cannot be edited in a different language!",
-        "languageMismatchHelpMessage": "Please change the language to {originalLanguage} to edit it!"
+        "languageMismatchErrorTitle": "Edit not available in {selectedLanguage} language!",
+        "languageMismatchErrorMessage": "This is because form was originally created in {originalLanguage} language and edits cannot be edited in the {selectedLanguage} language.",
+        "languageMismatchHelpMessage": "To make changes, please switch to the original language of the form."
     }
 }

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

@@ -14,14 +14,16 @@ interface Props {
     // FIXME: typings should be fixed in the server
     // this should be of type Language
     originalLanguage: string | undefined;
+    selectedLanguage: Language;
 }
 
 function LanguageMismatchMessage(props: Props) {
     const strings = useTranslation(i18n);
 
     const {
         title = strings.languageMismatchErrorTitle,
-        originalLanguage = 'en',
+        originalLanguage,
+        selectedLanguage,
     } = props;
 
     return (
@@ -32,16 +34,13 @@ function LanguageMismatchMessage(props: Props) {
                 resolveToString(
                     strings.languageMismatchErrorMessage,
                     // FIXME: this should not require cast
-                    { originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--' },
-                )
-            }
-            actions={
-                resolveToString(
-                    strings.languageMismatchHelpMessage,
-                    // FIXME: this should not require cast
-                    { originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--' },
+                    {
+                        originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--',
+                        selectedLanguage: languageNameMapEn[selectedLanguage] ?? '--',
+                    },
                 )
             }
+            actions={strings.languageMismatchHelpMessage}
         />
     );
 }

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

@@ -45,6 +45,7 @@ interface Props<N> {
     label: React.ReactNode;
     icons?: React.ReactNode;
     actions?: React.ReactNode;
+    readOnly?: boolean;
     disabled?: boolean;
 }
 
@@ -62,6 +63,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
         label,
         icons,
         actions,
+        readOnly,
         disabled,
     } = props;
 
@@ -139,6 +141,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                 icons={icons}
                 actions={actions}
                 withoutPreview
+                readOnly={readOnly}
                 disabled={disabled}
             >
                 {label}
@@ -168,7 +171,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                     ariaLabel={strings.removeImagesButtonTitle}
                                     variant="secondary"
                                     spacing="none"
-                                    disabled={disabled}
+                                    disabled={disabled || readOnly}
                                 >
                                     <DeleteBinLineIcon />
                                 </IconButton>
@@ -187,6 +190,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                     onChange={handleCaptionChange}
                                     error={imageError?.caption}
                                     placeholder={strings.enterCaptionPlaceholder}
+                                    readOnly={readOnly}
                                     disabled={disabled}
                                 />
                             </div>

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

@@ -31,6 +31,7 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     disabled?: boolean;
+    readOnly: boolean;
 }
 
 function SourceInformationInput(props: Props) {
@@ -41,6 +42,7 @@ function SourceInformationInput(props: Props) {
         index,
         onRemove,
         disabled,
+        readOnly,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -92,6 +94,7 @@ function SourceInformationInput(props: Props) {
                 value={value.source_name}
                 error={error?.source_name}
                 onChange={onFieldChange}
+                readOnly={readOnly}
                 disabled={disabled}
             />
             <TextInput
@@ -101,14 +104,15 @@ function SourceInformationInput(props: Props) {
                 value={value.source_link}
                 error={error?.source_link}
                 onChange={handleSourceFieldChange}
+                readOnly={readOnly}
                 disabled={disabled}
             />
             <Button
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
                 variant="tertiary"
-                disabled={disabled}
+                disabled={disabled || readOnly}
                 title={strings.sourceInformationDeleteButton}
             >
                 <DeleteBinTwoLineIcon />

app/src/utils/constants.ts

@@ -83,8 +83,9 @@ export const FONT_FAMILY_HEADER = 'Montserrat';
 // FIXME: fix typing in server (medium priority)
 // This should not be the same as OperationType.
 export type DrefStatus = components<'read'>['schemas']['DrefDrefStatusEnumKey'];
-// const DREF_STATUS_COMPLETED = 1 satisfies DrefStatus;
-export const DREF_STATUS_IN_PROGRESS = 0 satisfies DrefStatus;
+export const DREF_STATUS_DRAFT = 1 satisfies DrefStatus;
+export const DREF_STATUS_FINALIZED = 3 satisfies DrefStatus;
+export const DREF_STATUS_APPROVED = 4 satisfies DrefStatus;
 
 export type TypeOfDrefEnum = components<'read'>['schemas']['DrefDrefDrefTypeEnumKey'];
 export const DREF_TYPE_IMMINENT = 0 satisfies TypeOfDrefEnum;

app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx

@@ -30,6 +30,7 @@ import {
 import useUserMe from '#hooks/domain/useUserMe';
 import useFilterState from '#hooks/useFilterState';
 import {
+    DREF_STATUS_APPROVED,
     DREF_TYPE_LOAN,
     type TypeOfDrefEnum,
 } from '#utils/constants';
@@ -230,13 +231,15 @@ function ActiveDrefTable(props: Props) {
 
                     const {
                         unpublished_op_update_count,
-                        is_published,
+                        status,
                         has_ops_update,
                         has_final_report,
                         country_details,
                         is_dref_imminent_v2,
                     } = originalDref;
 
+                    const is_published = status === DREF_STATUS_APPROVED;
+
                     const canAddOpsUpdate = (is_published ?? false)
                         && (applicationType === 'DREF' || applicationType === 'OPS_UPDATE')
                         && !has_final_report

app/src/views/AccountMyFormsDref/DrefTableActions/i18n.json

@@ -2,6 +2,7 @@
     "namespace": "accountMyFormsDref",
     "strings": {
         "dropdownActionApproveLabel": "Approved",
+        "dropdownActionFinalizeLabel": "Finalize",
         "dropdownActionAllocationFormLabel": "Allocation Form",
         "dropdownActionAddOpsUpdateLabel": "Add Operational Update",
         "dropdownActionCreateFinalReportLabel": "Create Final Report",
@@ -10,10 +11,13 @@
         "dropdownActionEditLabel": "Edit",
         "drefApprovalSuccessTitle": "Successfully approved the DREF!",
         "drefApprovalFailureTitle": "Failed to approve the DREF!",
+        "drefFinalizeSuccessTitle": "Successfully finalized the DREF!",
+        "drefFinalizeFailureTitle": "Failed to finalize the DREF!",
         "drefApprovalInProgressTitle": "Approval in progress...",
         "drefAccountCouldNotCreate": "Could not create new operational update",
         "drefAccountCouldNotCreateFinalReport": "Could not create final report",
         "drefAccountConfirmMessage": "You're about to Approve this DREF. Once approved, it can no longer be edited. Are you sure you want to Approve?",
+        "drefAccountFinalizeConfirmMessage": "You're about to Finalize this DREF. Once finalize, it can no longer be edited. Are you sure you want to Finalize?",
         "dropdownActionImminentNewOpsUpdateConfirmationHeading": "Confirm addition of Operational Update",
         "dropdownActionImminentNewOpsUpdateConfirmationMessage": "The DREF type will be changed to Response (from Imminent) for the Operational Update. Once created, you'll be able to change it to other types except Imminent. Are you sure you want to add an Operational Update?"
     }