equinor · VRiveland · Jul 27, 2023 · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023
diff --git a/src/modules/InvitationForPunchOut/http/InvitationForPunchOutApiClient.ts b/src/modules/InvitationForPunchOut/http/InvitationForPunchOutApiClient.ts
@@ -31,6 +31,7 @@ type InvitationResponse = {
     participants: ParticipantInvitationResponse[];
     mcPkgScope: McPkgScopeResponse[];
     commPkgScope: CommPkgScopeResponse[];
+    isOnline: boolean;
 };
 
 type McPkgScopeResponse = {
@@ -531,6 +532,7 @@ class InvitationForPunchOutApiClient extends ApiClient {
         participants: ParticipantDto[],
         mcPkgScope: string[] | null,
         commPkgScope: string[] | null,
+        isOnline: boolean,
         setRequestCanceller?: RequestCanceler
     ): Promise<number> {
         const endpoint = '/Invitations';
@@ -551,6 +553,7 @@ class InvitationForPunchOutApiClient extends ApiClient {
                     participants: participants,
                     mcPkgScope: mcPkgScope,
                     commPkgScope: commPkgScope,
+                    isOnline: isOnline,
                 },
                 settings
             );

diff --git a/src/modules/InvitationForPunchOut/types.d.ts b/src/modules/InvitationForPunchOut/types.d.ts
@@ -19,6 +19,7 @@ export type GeneralInfoDetails = {
     date: Date | undefined;
     startTime: Date | undefined;
     endTime: Date | undefined;
+    isOnline?: boolean;
     location?: string | null;
 };
 

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/CreateIPO.tsx b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/CreateIPO.tsx
@@ -48,6 +48,7 @@ const emptyGeneralInfo: GeneralInfoDetails = {
         minutes: initialEnd.getMinutes(),
     }),
     location: '',
+    isOnline: false,
 };
 
 const initialParticipants: Participant[] = [
@@ -351,7 +352,8 @@ const CreateIPO = (): JSX.Element => {
                     generalInfo.location ? generalInfo.location : null,
                     ipoParticipants,
                     mcPkgScope,
-                    commPkgScope
+                    commPkgScope,
+                    generalInfo.isOnline ? generalInfo.isOnline : false
                 );
                 analystics.trackUserAction(IpoCustomEvents.CREATED, {
                     project: generalInfo.projectName,

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/EditIPO.tsx b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/EditIPO.tsx
@@ -47,6 +47,7 @@ const emptyGeneralInfo: GeneralInfoDetails = {
     startTime: new Date(),
     endTime: new Date(),
     location: '',
+    isOnline: false,
 };
 
 const EditIPO = (): JSX.Element => {
@@ -66,6 +67,9 @@ const EditIPO = (): JSX.Element => {
         useState<GeneralInfoDetails>(emptyGeneralInfo);
     const [confirmationChecked, setConfirmationChecked] =
         useState<boolean>(true);
+    const [isOnline, setIsOnline] = useState<boolean>(
+        generalInfo.isOnline ? generalInfo.isOnline : false
+    );
     const [selectedCommPkgScope, setSelectedCommPkgScope] = useState<
         CommPkgRow[]
     >([]);
@@ -465,6 +469,7 @@ const EditIPO = (): JSX.Element => {
                     minutes: endTime.getMinutes(),
                 }),
                 location: invitation.location ? invitation.location : '',
+                isOnline: invitation.isOnline,
             };
             setGeneralInfo({ ...info });
             setInitialGeneralInfo({ ...info });

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/GeneralInfo/GeneralInfo.style.ts b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/GeneralInfo/GeneralInfo.style.ts
@@ -61,7 +61,14 @@ export const DateTimeContainer = styled.div`
 `;
 
 export const LocationContainer = styled.div`
-    width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+`;
+
+export const TeamsMeetingContainer = styled.span`
+    width: 550px;
 `;
 
 export const PoTypeContainer = styled.div`

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/GeneralInfo/GeneralInfo.tsx b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/GeneralInfo/GeneralInfo.tsx
@@ -9,6 +9,7 @@ import {
     PoTypeContainer,
     TextContainer,
     Column,
+    TeamsMeetingContainer,
 } from './GeneralInfo.style';
 import {
     GeneralInfoDetails,
@@ -28,6 +29,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { useInvitationForPunchOutContext } from '../../../context/InvitationForPunchOutContext';
 import { Label } from '@equinor/eds-core-react';
 import { DatePicker, TimePicker } from '@mui/x-date-pickers';
+import { Tooltip } from '@equinor/eds-core-react';
 
 export const poTypes: SelectItem[] = [
     { text: 'DP (Discipline Punch)', value: 'DP' },
@@ -70,6 +72,9 @@ const GeneralInfo = ({
     const [endTime, setEndTime] = useState<string | null>(
         generalInfo.endTime ? generalInfo.endTime.toString() : null
     );
+    const [isOnline, setIsOnline] = useState<boolean>(
+        generalInfo.isOnline ? generalInfo.isOnline : false
+    );
 
     useEffect(() => {
         if (filterForProjects.length <= 0) {
@@ -378,6 +383,33 @@ const GeneralInfo = ({
                             }}
                             disabled={isDisabled}
                         />
+                        {isEditMode ? (
+                            <Checkbox disabled checked={isOnline}>
+                                Create Teams meeting
+                            </Checkbox>
+                        ) : (
+                            <Tooltip
+                                title="Can't be changed later"
+                                placement="bottom"
+                            >
+                                <TeamsMeetingContainer>
+                                    <Checkbox
+                                        checked={isOnline}
+                                        onChange={(): void => {
+                                            setIsOnline(!isOnline);
+                                            setGeneralInfo((gi) => {
+                                                return {
+                                                    ...gi,
+                                                    isOnline: !isOnline,
+                                                };
+                                            });
+                                        }}
+                                    >
+                                        Create Teams meeting
+                                    </Checkbox>
+                                </TeamsMeetingContainer>
+                            </Tooltip>
+                        )}
                     </LocationContainer>
                     {errors && errors['location'] && (
                         <ErrorContainer>

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.style.ts b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.style.ts
@@ -45,6 +45,11 @@ export const Subsection = styled.div`
     }
 `;
 
+export const LocationDetails = styled.div`
+    display: flex;
+    align-items: cente;
+`;
+
 export const TableSection = styled.div`
     margin-top: calc(var(--grid-unit) * 2);
     margin-bottom: calc(var(--grid-unit) * 4);

diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.tsx b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.tsx
@@ -12,6 +12,7 @@ import {
     Subsection,
     TableSection,
     Column,
+    LocationDetails,
 } from './Summary.style';
 import { Table, Typography } from '@equinor/eds-core-react';
 import { getFileName, getFileTypeIconName } from '../../utils';
@@ -27,6 +28,7 @@ import McPkgsTable from '../../ViewIPO/Scope/McPkgsTable';
 import React from 'react';
 import ReportsTable from '../../ViewIPO/Scope/ReportsTable';
 import { getAttachmentDownloadLink } from '../utils';
+import Checkbox from '@procosys/components/Checkbox';
 
 const { Body, Row, Cell, Head } = Table;
 
@@ -200,11 +202,20 @@ const Summary = ({
                             <Typography token={{ fontSize: '12px' }}>
                                 Location
                             </Typography>
-                            <Typography variant="body_long">
-                                {generalInfo.location
-                                    ? generalInfo.location
-                                    : '-'}
-                            </Typography>
+                            <LocationDetails>
+                                <Typography variant="body_long">
+                                    {generalInfo.location
+                                        ? generalInfo.location
+                                        : '-'}
+                                </Typography>
+
+                                <Checkbox
+                                    disabled
+                                    checked={generalInfo.isOnline}
+                                >
+                                    Teams meeting
+                                </Checkbox>
+                            </LocationDetails>
                         </Subsection>
                     </Section>
 

diff --git a/src/modules/InvitationForPunchOut/views/ViewIPO/GeneralInfo/GeneralInfo.tsx b/src/modules/InvitationForPunchOut/views/ViewIPO/GeneralInfo/GeneralInfo.tsx
@@ -18,6 +18,7 @@ import {
     AttendedStatusDto,
     NotesDto,
 } from '@procosys/modules/InvitationForPunchOut/http/InvitationForPunchOutApiClient';
+import Checkbox from '@procosys/components/Checkbox';
 
 interface GeneralInfoProps {
     invitation: Invitation;
@@ -46,6 +47,14 @@ const GeneralInfo = ({
 }: GeneralInfoProps): JSX.Element => {
     const [participants, setParticipants] = useState<Participant[]>([]);
 
+    const getLocationText = (): string => {
+        if (invitation.location && invitation.isOnline)
+            return `${invitation.location} and Teams meeting`;
+        else if (invitation.location) return invitation.location;
+        else if (invitation.isOnline) return 'Teams meeting';
+        else return '-';
+    };
+
     useEffect(() => {
         const newParticipants = invitation.participants.sort(
             (p1, p2): number => p1.sortKey - p2.sortKey
@@ -126,9 +135,11 @@ const GeneralInfo = ({
                     <Typography token={{ fontSize: '12px' }}>
                         Location
                     </Typography>
-                    <Typography variant="body_long">
-                        {invitation.location ? invitation.location : '-'}
-                    </Typography>
+                    <DetailContainer>
+                        <Typography variant="body_long">
+                            {getLocationText()}
+                        </Typography>
+                    </DetailContainer>
                 </ProjectInfoDetail>
             </ProjectInfoContainer>
             <HeaderContainer>

diff --git a/src/modules/InvitationForPunchOut/views/ViewIPO/types.d.ts b/src/modules/InvitationForPunchOut/views/ViewIPO/types.d.ts
@@ -82,6 +82,7 @@ export type Invitation = {
     };
     startTimeUtc: string;
     endTimeUtc: string;
+    isOnline?: boolean;
     participants: Participant[];
     mcPkgScope: McPkgScope[];
     commPkgScope: CommPkgScope[];