fix: merge conflict

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-21T13:57:21.323Z\n"
-"PO-Revision-Date: 2024-11-21T13:57:21.323Z\n"
+"POT-Creation-Date: 2024-12-05T10:53:07.214Z\n"
+"PO-Revision-Date: 2024-12-05T10:53:07.214Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1534,6 +1534,16 @@ msgstr "You do not have access to remove the link and delete the linked event"
 msgid "An error occurred while loading the widget."
 msgstr "An error occurred while loading the widget."
 
+msgid "Linked event"
+msgstr "Linked event"
+
+msgid ""
+"This {{stageName}} event is linked to a {{linkedStageName}} event. Review "
+"the linked event details before entering data below"
+msgstr ""
+"This {{stageName}} event is linked to a {{linkedStageName}} event. Review "
+"the linked event details before entering data below"
+
 msgid "Scheduled"
 msgstr "Scheduled"
 

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/WidgetHeader.container.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { type ComponentType } from 'react';
+import { spacersNum } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core/';
+import { EnrollmentPageKeys }
+    from '../../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import { NonBundledDhis2Icon } from '../../NonBundledDhis2Icon';
+import type { PlainProps, Props } from './WidgetHeader.types';
+import { OverflowMenuComponent } from '../OverflowMenu';
+
+const styles = {
+    menu: {
+        marginLeft: 'auto',
+    },
+    icon: {
+        marginRight: spacersNum.dp8,
+    },
+};
+
+const WidgetHeaderPlain = ({
+    linkedStage,
+    linkedEvent,
+    orgUnitId,
+    currentPage,
+    relationship,
+    relationshipType,
+    stage,
+    eventId,
+    classes,
+}: Props) => {
+    const { icon } = linkedStage;
+    return (
+        <>
+            {icon && (
+                <div className={classes.icon}>
+                    <NonBundledDhis2Icon
+                        name={icon?.name}
+                        color={icon?.color}
+                        width={30}
+                        height={30}
+                        cornerRadius={2}
+                    />
+                </div>
+            )}
+            <span> {linkedStage.name} </span>
+            {currentPage === EnrollmentPageKeys.VIEW_EVENT && (
+                <div className={classes.menu}>
+                    <OverflowMenuComponent
+                        linkedEvent={linkedEvent}
+                        relationshipId={relationship}
+                        relationshipType={relationshipType}
+                        orgUnitId={orgUnitId}
+                        originEventId={eventId}
+                        stageWriteAccess={stage?.access?.data?.write}
+                    />
+                </div>
+            )}
+        </>
+    );
+};
+
+export const WidgetHeader: ComponentType<PlainProps> = withStyles(styles)(WidgetHeaderPlain);

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/WidgetHeader.types.js

@@ -0,0 +1,20 @@
+// @flow
+import { EnrollmentPageKeys }
+    from '../../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import type { ProgramStage } from '../../../metaData';
+
+export type PlainProps = {|
+    orgUnitId: string,
+    linkedEvent: { event: string },
+    linkedStage: ProgramStage,
+    currentPage: $Values<typeof EnrollmentPageKeys> | string,
+    relationship: string,
+    relationshipType: string,
+    stage: ProgramStage,
+    eventId: string,
+|};
+
+export type Props = {|
+    ...PlainProps,
+    ...CssClasses,
+|};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { WidgetHeader } from './WidgetHeader.container';

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js

@@ -1,62 +1,35 @@
 // @flow
 import React from 'react';
-import { colors, spacersNum } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import { withStyles } from '@material-ui/core/';
 import type { Props } from './WidgetTwoEventWorkspace.types';
 import { useMetadataForProgramStage } from '../DataEntries/common/ProgramStage/useMetadataForProgramStage';
 import { Widget } from '../Widget';
-import { useLinkedEventByOriginId, useClientDataValues } from './hooks';
+import { useLinkedEventByOriginId } from './hooks/useLinkedEventByOriginId';
 import { WidgetTwoEventWorkspaceComponent } from './WidgetTwoEventWorkspace.component';
-import { OverflowMenuComponent } from './OverflowMenu';
-import {
-    EnrollmentPageKeys,
-} from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
-import { NonBundledDhis2Icon } from '../NonBundledDhis2Icon';
+import { useClientDataValues } from './hooks/useClientDataValues';
+import { WidgetWrapper } from './WidgetWrapper';
+import { WidgetHeader } from './WidgetHeader';
 
-const styles = {
-    menu: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: spacersNum.dp8,
-        justifyContent: 'end',
-        background: colors.white,
-        borderTopLeftRadius: 3,
-        borderTopRightRadius: 3,
-        borderStyle: 'solid',
-        borderColor: colors.grey400,
-        borderWidth: 1,
-        borderBottomWidth: 0,
-    },
-    header: {
-        display: 'flex',
-        alignItems: 'center',
-        padding: spacersNum.dp8,
-    },
-    icon: {
-        marginRight: spacersNum.dp8,
-    },
-};
-
-const WidgetTwoEventWorkspacePlain = ({
+export const WidgetTwoEventWorkspace = ({
     eventId,
     programId,
     orgUnitId,
     currentPage,
-    classes,
+    stage,
+    type,
 }: Props) => {
     const {
         linkedEvent,
-        relationship,
         dataValues,
+        relationship,
         relationshipType,
         isError: isLinkedEventError,
         isLoading: isLinkedEventLoading,
     } = useLinkedEventByOriginId({ originEventId: eventId });
 
     const {
         formFoundation,
-        stage,
+        stage: linkedStage,
         isLoading: isLoadingMetadata,
         isError: isMetadataError,
     } = useMetadataForProgramStage({
@@ -86,54 +59,38 @@ const WidgetTwoEventWorkspacePlain = ({
         );
     }
 
-    if (!linkedEvent || !formFoundation || !stage) {
+    if (!linkedEvent || !formFoundation || !linkedStage) {
         return null;
     }
 
     return (
-        <div>
-            {currentPage === EnrollmentPageKeys.VIEW_EVENT && (
-                <div className={classes.menu}>
-                    <OverflowMenuComponent
+        <WidgetWrapper
+            type={type}
+            stage={stage}
+            linkedStage={linkedStage}
+            widget={
+                <Widget
+                    header={
+                        <WidgetHeader
+                            linkedStage={linkedStage}
+                            linkedEvent={linkedEvent}
+                            orgUnitId={orgUnitId}
+                            currentPage={currentPage}
+                            stage={linkedStage}
+                            eventId={eventId}
+                            relationship={relationship}
+                            relationshipType={relationshipType}
+                        />
+                    }
+                    noncollapsible
+                >
+                    <WidgetTwoEventWorkspaceComponent
                         linkedEvent={linkedEvent}
-                        relationshipId={relationship}
-                        relationshipType={relationshipType}
-                        orgUnitId={orgUnitId}
-                        originEventId={eventId}
-                        stageWriteAccess={stage?.access?.data?.write}
+                        formFoundation={formFoundation}
+                        dataValues={clientValuesWithSubValues}
                     />
-                </div>
-            )}
-
-            <Widget
-                header={
-                    <div className={classes.header}>
-                        {stage.icon && (
-                            <div className={classes.icon}>
-                                <NonBundledDhis2Icon
-                                    name={stage.icon?.name}
-                                    color={stage.icon?.color}
-                                    width={30}
-                                    height={30}
-                                    cornerRadius={2}
-                                />
-                            </div>
-                        )}
-                        <span> {stage.name} </span>
-                    </div>
-                }
-                noncollapsible
-            >
-                <WidgetTwoEventWorkspaceComponent
-                    linkedEvent={linkedEvent}
-                    formFoundation={formFoundation}
-                    dataValues={clientValuesWithSubValues}
-                />
-            </Widget>
-        </div>
+                </Widget>
+            }
+        />
     );
 };
-
-export const WidgetTwoEventWorkspace = withStyles(
-    styles,
-)(WidgetTwoEventWorkspacePlain);

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js

@@ -2,13 +2,17 @@
 import {
     EnrollmentPageKeys,
 } from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import { WidgetTwoEventWorkspaceWrapperTypes } from './index';
+import type { ProgramStage } from '../../metaData';
 
-type PlainProps = {|
+export type Props = {|
     programId: string,
     eventId: string,
     orgUnitId: string,
     stageId: string,
-    currentPage: $Values<typeof EnrollmentPageKeys>,
+    currentPage: $Values<typeof EnrollmentPageKeys> | string,
+    stage?: ProgramStage,
+    type?: $Values<typeof WidgetTwoEventWorkspaceWrapperTypes>,
 |}
 
 export type LinkedEvent = {|
@@ -17,8 +21,3 @@ export type LinkedEvent = {|
     occurredAt: string,
     orgUnit: string,
 |}
-
-export type Props = {|
-    ...PlainProps,
-    ...CssClasses,
-|}

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspaceWrapper.const.js

@@ -0,0 +1,5 @@
+// @flow
+
+export const WidgetTwoEventWorkspaceWrapperTypes = {
+    EDIT_EVENT: 'editEvent',
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/WidgetWrapper.container.js

@@ -0,0 +1,74 @@
+// @flow
+import React from 'react';
+import { colors, spacersNum, IconLink16 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/';
+import type { Props } from './WidgetWrapper.types';
+import { WidgetTwoEventWorkspaceWrapperTypes } from '../index';
+
+const styles = {
+    container: {
+        width: 'fit-content',
+        marginBottom: '16px',
+        margin: '16px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingBottom: spacersNum.dp16,
+        fontWeight: 500,
+        fontSize: 16,
+        color: colors.grey800,
+    },
+    referalResponse: {
+        padding: spacersNum.dp16,
+        backgroundColor: colors.blue100,
+        borderRadius: '3px',
+    },
+    linkedEvent: {
+        color: colors.blue900,
+        verticalAlign: 'middle',
+        display: 'flex',
+        fontSize: '16px',
+        fontWeight: '500',
+    },
+    icon: {
+        marginRight: spacersNum.dp8,
+    },
+    decription: {
+        margin: `${spacersNum.dp8}px 0`,
+    },
+};
+
+const WidgetWrapperPlain = ({ widget, type, stage, linkedStage, classes }: Props) => {
+    if (type === WidgetTwoEventWorkspaceWrapperTypes.EDIT_EVENT) {
+        return (
+            <div className={classes.container}>
+                <div className={classes.header}> {stage?.name} </div>
+                <div className={classes.referalResponse}>
+                    <div className={classes.linkedEvent}>
+                        <span className={classes.icon}>
+                            <IconLink16 color={colors.blue800} />
+                        </span>
+                        <div>{i18n.t('Linked event')}</div>
+                    </div>
+                    <div className={classes.decription}>
+                        {i18n.t(
+                            'This {{stageName}} event is linked to a {{linkedStageName}} event. Review the linked event details before entering data below',
+                            {
+                                linkedStageName: linkedStage?.name,
+                                stageName: stage?.name,
+                                interpolation: { escapeValue: false },
+                            },
+                        )}
+                    </div>
+                    {widget}
+                </div>
+            </div>
+        );
+    }
+
+    return <>{widget}</>;
+};
+
+export const WidgetWrapper = withStyles(styles)(WidgetWrapperPlain);

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/WidgetWrapper.types.js

@@ -0,0 +1,15 @@
+// @flow
+import { WidgetTwoEventWorkspaceWrapperTypes } from '../index';
+import type { ProgramStage } from '../../../metaData';
+
+type PlainProps = {|
+    widget: any,
+    linkedStage: ProgramStage,
+    stage?: ProgramStage,
+    type?: $Values<typeof WidgetTwoEventWorkspaceWrapperTypes>,
+|};
+
+export type Props = {|
+    ...PlainProps,
+    ...CssClasses,
+|};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { WidgetWrapper } from './WidgetWrapper.container';