diff --git a/src/modules/InvitationForPunchOut/http/InvitationForPunchOutApiClient.ts b/src/modules/InvitationForPunchOut/http/InvitationForPunchOutApiClient.ts index 02e799620..bcc10d76d 100644 --- 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 { 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 index 01d8f1cd8..10ef905fd 100644 --- 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 index cb7d34914..114b1c47a 100644 --- 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 index cb4fdc7b4..fe59784c2 100644 --- 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(emptyGeneralInfo); const [confirmationChecked, setConfirmationChecked] = useState(true); + const [isOnline, setIsOnline] = useState( + 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 index 14f48ee98..6744c7cab 100644 --- 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 index 7f8e8a314..7d738c2e2 100644 --- 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( generalInfo.endTime ? generalInfo.endTime.toString() : null ); + const [isOnline, setIsOnline] = useState( + generalInfo.isOnline ? generalInfo.isOnline : false + ); useEffect(() => { if (filterForProjects.length <= 0) { @@ -378,6 +383,33 @@ const GeneralInfo = ({ }} disabled={isDisabled} /> + {isEditMode ? ( + + Create Teams meeting + + ) : ( + + + { + setIsOnline(!isOnline); + setGeneralInfo((gi) => { + return { + ...gi, + isOnline: !isOnline, + }; + }); + }} + > + Create Teams meeting + + + + )} {errors && errors['location'] && ( diff --git a/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.style.ts b/src/modules/InvitationForPunchOut/views/CreateAndEditIPO/Summary/Summary.style.ts index 84ce89bec..a6e4652ee 100644 --- 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 index 9c31babd2..9d269d794 100644 --- 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 = ({ Location - - {generalInfo.location - ? generalInfo.location - : '-'} - + + + {generalInfo.location + ? generalInfo.location + : '-'} + + + + Teams meeting + + diff --git a/src/modules/InvitationForPunchOut/views/ViewIPO/GeneralInfo/GeneralInfo.tsx b/src/modules/InvitationForPunchOut/views/ViewIPO/GeneralInfo/GeneralInfo.tsx index 0b8ab7203..f7fb6e546 100644 --- 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([]); + 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 = ({ Location - - {invitation.location ? invitation.location : '-'} - + + + {getLocationText()} + + diff --git a/src/modules/InvitationForPunchOut/views/ViewIPO/types.d.ts b/src/modules/InvitationForPunchOut/views/ViewIPO/types.d.ts index 9f4a07227..56f83287c 100644 --- 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[];