Feature/eap full form

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

@@ -5,10 +5,7 @@ import {
     TextInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    isNotDefined,
-    randomString,
-} from '@togglecorp/fujs';
+import { randomString } from '@togglecorp/fujs';
 import {
     type ArrayError,
     getErrorObject,
@@ -17,17 +14,23 @@ import {
 } from '@togglecorp/toggle-form';
 
 import NonFieldError from '#components/NonFieldError';
+import { formatSourceLink } from '#utils/common';
 import { type PartialDref } from '#views/DrefApplicationForm/schema';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type SourceInformationFormFields = NonNullable<PartialDref['source_information']>[number];
+type SourceInformationFormFields = NonNullable<
+    PartialDref['source_information']
+>[number];
 
 interface Props {
     value: SourceInformationFormFields;
     error: ArrayError<SourceInformationFormFields> | undefined;
-    onChange: (value: SetValueArg<SourceInformationFormFields>, index: number) => void;
+    onChange: (
+        value: SetValueArg<SourceInformationFormFields>,
+        index: number
+    ) => void;
     onRemove: (index: number) => void;
     index: number;
     disabled?: boolean;
@@ -47,39 +50,17 @@ function SourceInformationInput(props: Props) {
 
     const strings = useTranslation(i18n);
 
-    const onFieldChange = useFormObject(
-        index,
-        onChange,
-        () => ({
-            client_id: randomString(),
-        }),
-    );
+    const onFieldChange = useFormObject(index, onChange, () => ({
+        client_id: randomString(),
+    }));
 
-    const error = (value && value.client_id && errorFromProps)
+    const error = value && value.client_id && errorFromProps
         ? getErrorObject(errorFromProps?.[value.client_id])
         : undefined;
 
     const handleSourceFieldChange = useCallback(
-        (newValue: string | undefined) => {
-            if (
-                isNotDefined(newValue)
-                || newValue.startsWith('http://')
-                || newValue.startsWith('https://')
-                || newValue === 'h'
-                || newValue === 'ht'
-                || newValue === 'htt'
-                || newValue === 'http'
-                || newValue === 'http:'
-                || newValue === 'http:/'
-                || newValue === 'https'
-                || newValue === 'https:'
-                || newValue === 'https:/'
-            ) {
-                onFieldChange(newValue, 'source_link');
-                return;
-            }
-
-            onFieldChange(`https://${newValue}`, 'source_link');
+        (linkValue: string | undefined) => {
+            onFieldChange(formatSourceLink(linkValue), 'source_link');
         },
         [onFieldChange],
     );

app/src/utils/common.ts

@@ -72,6 +72,27 @@ export function joinStrings(
     return values.filter(Boolean).join(separator);
 }
 
+export function formatSourceLink(value: string | undefined): string | undefined {
+    if (
+        isNotDefined(value)
+            || value.startsWith('http://')
+            || value.startsWith('https://')
+            || value === 'h'
+            || value === 'ht'
+            || value === 'htt'
+            || value === 'http'
+            || value === 'http:'
+            || value === 'http:/'
+            || value === 'https'
+            || value === 'https:'
+            || value === 'https:/'
+    ) {
+        return value;
+    }
+
+    return `https://${value}`;
+}
+
 export function hasChanged(prevValue: unknown, newValue: unknown) {
     // NOTE: we consider `null` and `undefined` as same for
     // this scenario

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

@@ -64,6 +64,21 @@ function EapTableActions(props: Props) {
         setShowExportModal(false);
     }, []);
 
+    const latestVersion = useMemo(() => {
+        if (eap.eap_type === EAP_TYPE_SIMPLIFIED) {
+            return eap.latest_simplified_eap ?? undefined;
+        }
+
+        if (eap.eap_type === EAP_TYPE_FULL) {
+            return eap.latest_full_eap ?? undefined;
+        }
+
+        return undefined;
+    }, [eap]);
+
+    const isCreated = isDefined(latestVersion);
+    const isLocked = isDefined(details) && !!details.data.is_locked;
+
     const isLatestVersion = useMemo(() => {
         if (eap.eap_type === EAP_TYPE_SIMPLIFIED) {
             return eap.latest_simplified_eap === details?.data.id;
@@ -76,10 +91,23 @@ function EapTableActions(props: Props) {
         return false;
     }, [eap, details]);
 
-    const isEditable = details?.data.is_locked === false && (
-        eap.status === EAP_STATUS_UNDER_DEVELOPMENT
-            || eap.status === EAP_STATUS_NS_ADDRESSING_COMMENTS
-    ) && isLatestVersion;
+    const isEditable = useMemo(() => {
+        if (isCreated && !isLatestVersion) {
+            return false;
+        }
+
+        if (isLocked) {
+            return false;
+        }
+
+        if (eap.status !== EAP_STATUS_UNDER_DEVELOPMENT
+            && eap.status !== EAP_STATUS_NS_ADDRESSING_COMMENTS
+        ) {
+            return false;
+        }
+
+        return true;
+    }, [isCreated, isLatestVersion, isLocked, eap]);
 
     return (
         <ListView layout="block">
@@ -105,7 +133,7 @@ function EapTableActions(props: Props) {
             )}
             {type === 'development' && (
                 <>
-                    {eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+                    {eap.eap_type === EAP_TYPE_SIMPLIFIED && isCreated && (
                         <Link
                             to="simplifiedEapExport"
                             urlParams={{ eapId: eap.id }}
@@ -118,7 +146,7 @@ function EapTableActions(props: Props) {
                             {strings.previewExportLinkLabel}
                         </Link>
                     )}
-                    {eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+                    {eap.eap_type === EAP_TYPE_SIMPLIFIED && isCreated && (
                         <Button
                             name={false}
                             onClick={setShowExportModalTrue}

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

@@ -0,0 +1,11 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "approvalConfirmButton": "Confirm",
+        "approvalCancelButton": "Cancel",
+        "approvalFullEapHeading": "Submit for approval",
+        "approvalFullEapDescription": "Are you sure you to submit Eap Full Form for approval?",
+        "approvalUpdateSuccessMessage": "Status updated successfully!",
+        "approvalUpdateFailedMessage": "Failed to update the status!"
+    }
+}

app/src/views/EapFullForm/ApprovalModal/index.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import {
+    Button,
+    ListView,
+    Modal,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import { type components } from '#generated/types';
+import useAlert from '#hooks/useAlert';
+import {
+    EAP_STATUS_UNDER_DEVELOPMENT,
+    EAP_STATUS_UNDER_REVIEW,
+} from '#utils/constants';
+import {
+    type GoApiBody,
+    useLazyRequest,
+} from '#utils/restRequest';
+
+import i18n from './i18n.json';
+
+type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>;
+type EapStatus = components['schemas']['EapEapStatusEnumKey'];
+
+interface Props {
+    onClose: () => void;
+    eapId: string;
+    status: EapStatus;
+    readOnly?: boolean;
+}
+function ApprovalModal(props: Props) {
+    const {
+        onClose,
+        eapId,
+        status,
+        readOnly,
+    } = props;
+    const alert = useAlert();
+
+    const strings = useTranslation(i18n);
+
+    const disabled = useMemo(() => status !== EAP_STATUS_UNDER_DEVELOPMENT, [status]);
+
+    const { trigger: triggerStatusUpdate } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/eap-registration/{id}/status/',
+        pathVariables: {
+            id: Number(eapId),
+        },
+        body: (fields: EapStatusBody) => fields,
+        onSuccess: () => {
+            alert.show(strings.approvalUpdateSuccessMessage, { variant: 'success' });
+        },
+        formData: true,
+        onFailure: () => {
+            alert.show(strings.approvalUpdateFailedMessage, { variant: 'danger' });
+        },
+    });
+
+    // FIXME: fix typings in the server
+    const requestBody = useMemo<EapStatusBody>(
+        () => ({
+            status: EAP_STATUS_UNDER_REVIEW,
+            review_checklist_file: undefined,
+        } as EapStatusBody),
+        [],
+    );
+
+    return (
+        <Modal
+            heading={strings.approvalFullEapHeading}
+            onClose={onClose}
+            footerActions={(
+                <ListView>
+                    <Button
+                        name={requestBody}
+                        onClick={triggerStatusUpdate}
+                        disabled={disabled || readOnly}
+                    >
+                        {strings.approvalConfirmButton}
+                    </Button>
+                    <Button name={undefined} onClick={onClose}>
+                        {strings.approvalCancelButton}
+                    </Button>
+                </ListView>
+            )}
+        >
+            {strings.approvalFullEapDescription}
+        </Modal>
+    );
+}
+
+export default ApprovalModal;

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

@@ -0,0 +1,9 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "fullContactNameLabel": "Name",
+        "fullContactTitleLabel": "Title",
+        "fullContactEmailLabel": "Email",
+        "fullContactPhoneLabel": "Phone number"
+    }
+}

app/src/views/EapFullForm/ContactInputsSection/index.tsx

@@ -0,0 +1,97 @@
+import {
+    InputSection,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import {
+    type PartialEapFullFormType,
+    type ValidContactFieldPrefixes,
+} from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    namePrefix: ValidContactFieldPrefixes;
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function ContactInputsSection(props: Props) {
+    const {
+        title: sectionTitle,
+        description,
+        namePrefix,
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        readOnly,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const error = getErrorObject(formError);
+
+    const name = `${namePrefix}_name` satisfies keyof PartialEapFullFormType;
+    const title = `${namePrefix}_title` satisfies keyof PartialEapFullFormType;
+    const email = `${namePrefix}_email` satisfies keyof PartialEapFullFormType;
+    const phoneNumber = `${namePrefix}_phone_number` satisfies keyof PartialEapFullFormType;
+
+    return (
+        <InputSection
+            title={sectionTitle}
+            description={description}
+            numPreferredColumns={2}
+        >
+            <TextInput
+                label={strings.fullContactNameLabel}
+                name={name}
+                value={value?.[name]}
+                onChange={setFieldValue}
+                error={error?.[name]}
+                disabled={disabled}
+                readOnly={readOnly}
+            />
+            <TextInput
+                label={strings.fullContactTitleLabel}
+                name={title}
+                value={value?.[title]}
+                onChange={setFieldValue}
+                error={error?.[title]}
+                disabled={disabled}
+                readOnly={readOnly}
+            />
+            <TextInput
+                label={strings.fullContactEmailLabel}
+                name={email}
+                value={value?.[email]}
+                onChange={setFieldValue}
+                error={error?.[email]}
+                disabled={disabled}
+                readOnly={readOnly}
+            />
+            <TextInput
+                label={strings.fullContactPhoneLabel}
+                name={phoneNumber}
+                value={value?.[phoneNumber]}
+                onChange={setFieldValue}
+                error={error?.[phoneNumber]}
+                disabled={disabled}
+                readOnly={readOnly}
+            />
+        </InputSection>
+    );
+}
+
+export default ContactInputsSection;