Feature/104099 ipo lage knapp for å opprette teamsmøte innkallelse frontend

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
  );

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;
 };
 

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,

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 });

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`

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>

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);

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>
 

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>

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[];