feat(gcal): add Google Meet

packages/client/components/GoogleMeetProviderLogo.tsx

@@ -0,0 +1,13 @@
+import logo from '../styles/theme/images/graphics/google-meet-icon.svg'
+import React from 'react'
+
+const GoogleMeetProviderLogo = () => {
+  return (
+    <div
+      className='h-6 w-6 bg-contain bg-no-repeat'
+      style={{backgroundImage: `url(${logo})`}}
+    ></div>
+  )
+}
+
+export default GoogleMeetProviderLogo

packages/client/components/ZoomProviderLogo.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import logo from '../styles/theme/images/graphics/zoom-logo.svg'
+
+const ZoomProviderLogo = () => {
+  return (
+    <div
+      className='h-6 w-6 bg-contain bg-no-repeat'
+      style={{backgroundImage: `url(${logo})`}}
+    ></div>
+  )
+}
+
+export default ZoomProviderLogo

packages/client/modules/userDashboard/components/GcalModal/GcalModal.tsx

@@ -20,6 +20,8 @@ import StyledError from '../../../../components/StyledError'
 import DialogContainer from '../../../../components/DialogContainer'
 import {Close} from '@mui/icons-material'
 import PlainButton from '../../../../components/PlainButton/PlainButton'
+import VideoConferencing from './VideoConferencing'
+import {GcalVideoTypeEnum} from '../../../../__generated__/StartTeamPromptMutation.graphql'
 
 const Wrapper = styled('div')({
   display: 'flex',
@@ -84,6 +86,7 @@ const GcalModal = (props: Props) => {
   const [inviteError, setInviteError] = useState<null | string>(null)
   const [rawInvitees, setRawInvitees] = useState('')
   const [invitees, setInvitees] = useState([] as string[])
+  const [videoType, setVideoType] = useState<GcalVideoTypeEnum | null>(null)
 
   const team = useFragment(
     graphql`
@@ -123,7 +126,8 @@ const GcalModal = (props: Props) => {
       startTimestamp,
       endTimestamp,
       timeZone,
-      invitees
+      invitees,
+      videoType: videoType ?? undefined
     }
     handleStartActivityWithGcalEvent(input)
   }
@@ -181,6 +185,10 @@ const GcalModal = (props: Props) => {
     setInviteAll((inviteAll) => !inviteAll)
   }
 
+  const handleChangeVideoType = (option: GcalVideoTypeEnum | null) => {
+    setVideoType(option)
+  }
+
   return (
     <StyledDialogContainer>
       <DialogTitle>
@@ -215,7 +223,8 @@ const GcalModal = (props: Props) => {
               setEnd={setEnd}
             />
           </div>
-          <p className='pt-3 text-xs leading-4'>{'Invite others to your Google Calendar event'}</p>
+          <VideoConferencing videoType={videoType} handleChangeVideoType={handleChangeVideoType} />
+          <p className='pt-2 text-xs leading-4'>{'Invite others to your Google Calendar event'}</p>
           <BasicTextArea
             name='rawInvitees'
             onChange={onInvitesChange}

packages/client/modules/userDashboard/components/GcalModal/VideoConferencing.tsx

@@ -0,0 +1,60 @@
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import {Close} from '@mui/icons-material'
+import React from 'react'
+import {MenuPosition} from '../../../../hooks/useCoords'
+import useMenu from '../../../../hooks/useMenu'
+import VideoConferencingMenu from './VideoConferencingMenu'
+import RaisedButton from '../../../../components/RaisedButton'
+import {Elevation} from '../../../../styles/elevation'
+import GoogleMeetProviderLogo from '../../../../components/GoogleMeetProviderLogo'
+import ZoomProviderLogo from '../../../../components/ZoomProviderLogo'
+import {GcalVideoTypeEnum} from '../../../../__generated__/StartTeamPromptMutation.graphql'
+
+type Props = {
+  videoType: GcalVideoTypeEnum | null
+  handleChangeVideoType: (videoType: GcalVideoTypeEnum | null) => void
+}
+
+const VideoConferencing = (props: Props) => {
+  const {videoType, handleChangeVideoType} = props
+  const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_CENTER)
+
+  const selectedOptionLabel = videoType === 'meet' ? 'Google Meet' : 'Zoom'
+
+  return (
+    <div>
+      {videoType ? (
+        <div className='bg-gray-100 flex items-center rounded py-3 px-2'>
+          {videoType === 'meet' ? <GoogleMeetProviderLogo /> : <ZoomProviderLogo />}
+          <span className='text-gray-500 text-md h-[38px] py-2 pl-2 font-normal'>
+            {selectedOptionLabel}
+          </span>
+          <Close
+            className='text-gray-500 ml-auto cursor-pointer hover:opacity-50'
+            onClick={() => handleChangeVideoType(null)}
+          />
+        </div>
+      ) : (
+        <div className='py-3'>
+          <RaisedButton
+            onClick={togglePortal}
+            ref={originRef}
+            className='rounded py-1.5 px-4'
+            elevationHovered={Elevation.Z3}
+          >
+            {'Add Video Conferencing'} <ArrowDropDownIcon />
+          </RaisedButton>
+        </div>
+      )}
+      {menuPortal(
+        <VideoConferencingMenu
+          menuProps={menuProps}
+          videoType={videoType}
+          handleChangeVideoType={handleChangeVideoType}
+        />
+      )}
+    </div>
+  )
+}
+
+export default VideoConferencing

packages/client/modules/userDashboard/components/GcalModal/VideoConferencingMenu.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Menu from '../../../../components/Menu'
+import MenuItem from '../../../../components/MenuItem'
+import {MenuProps} from '../../../../hooks/useMenu'
+import GoogleMeetProviderLogo from '../../../../components/GoogleMeetProviderLogo'
+import ZoomProviderLogo from '../../../../components/ZoomProviderLogo'
+import {GcalVideoTypeEnum} from '../../../../__generated__/StartTeamPromptMutation.graphql'
+
+type Props = {
+  menuProps: MenuProps
+  handleChangeVideoType: (option: GcalVideoTypeEnum | null) => void
+  videoType: GcalVideoTypeEnum | null
+}
+
+const VideoConferencingMenu = (props: Props) => {
+  const {menuProps, handleChangeVideoType, videoType} = props
+  if (videoType) return null
+  return (
+    <Menu ariaLabel={'Select a video conferencing option'} {...menuProps}>
+      <MenuItem
+        onClick={() => handleChangeVideoType('meet')}
+        label={
+          <div className='flex items-center p-3 hover:cursor-pointer'>
+            <GoogleMeetProviderLogo />
+            <label className='text-gray-500 pl-2 text-sm font-normal hover:cursor-pointer'>
+              Google Meet
+            </label>
+          </div>
+        }
+      ></MenuItem>
+      <MenuItem
+        isDisabled
+        label={
+          <div className='flex items-center p-3 hover:cursor-not-allowed'>
+            <ZoomProviderLogo />
+            <label className='text-gray-500 pl-2 text-sm font-normal hover:cursor-not-allowed'>
+              Zoom (Coming Soon!)
+            </label>
+          </div>
+        }
+      ></MenuItem>
+    </Menu>
+  )
+}
+
+export default VideoConferencingMenu

packages/server/graphql/mutations/helpers/createGcalEvent.ts

@@ -26,7 +26,7 @@ const createGcalEvent = async (input: Input) => {
   if (!featureFlags.includes('gcal')) {
     return standardError(new Error('Does not have gcal feature flag'), {userId: viewerId})
   }
-  const {startTimestamp, endTimestamp, title, timeZone, invitees} = gcalInput
+  const {startTimestamp, endTimestamp, title, timeZone, invitees, videoType} = gcalInput
 
   const gcalAuth = await dataLoader.get('freshGcalAuth').load({teamId, userId: viewerId})
   if (!gcalAuth) {
@@ -51,6 +51,18 @@ const createGcalEvent = async (input: Input) => {
 
 ` // add a newline to separate the link from the rest of the description
 
+  const conferenceData =
+    videoType === 'meet'
+      ? {
+          createRequest: {
+            requestId: meetingId,
+            conferenceSolutionKey: {
+              type: 'hangoutsMeet'
+            }
+          }
+        }
+      : undefined
+
   const event = {
     summary: title,
     description,
@@ -69,13 +81,15 @@ const createGcalEvent = async (input: Input) => {
         {method: 'email', minutes: emailRemindMinsBeforeMeeting},
         {method: 'popup', minutes: popupRemindMinsBeforeMeeting}
       ]
-    }
+    },
+    conferenceData
   }
 
   try {
     await calendar.events.insert({
       calendarId: 'primary',
-      requestBody: event
+      requestBody: event,
+      conferenceDataVersion: 1
     })
   } catch (err) {
     const error = err instanceof Error ? err : new Error('Unable to create event in gcal')

packages/server/graphql/public/typeDefs/_legacy.graphql

@@ -7375,6 +7375,11 @@ enum ReactableEnum {
   RESPONSE
 }
 
+enum GcalVideoTypeEnum {
+  meet
+  zoom
+}
+
 type AddReflectTemplatePayload {
   error: StandardMutationError
   reflectTemplate: ReflectTemplate

packages/server/graphql/public/typeDefs/startTeamPrompt.graphql

@@ -56,6 +56,10 @@ input CreateGcalEventInput {
   """
   timeZone: String!
   """
+  The type of video call to added to the gcal event. If not provided, no video call will be added
+  """
+  videoType: GcalVideoTypeEnum
+  """
   The emails that will be invited to the gcal event. If not provided, the no one will be invited
   """
   invitees: [Email!]

packages/server/graphql/public/types/CreateGcalEventInput.ts

@@ -5,6 +5,7 @@ import {
   GraphQLInt,
   GraphQLList
 } from 'graphql'
+import GcalVideoTypeEnum from '../../types/GcalVideoTypeEnum'
 import GraphQLEmailType from '../../types/GraphQLEmailType'
 
 const CreateGcalEventInput = new GraphQLInputObjectType({
@@ -30,15 +31,23 @@ const CreateGcalEventInput = new GraphQLInputObjectType({
       type: new GraphQLList(new GraphQLNonNull(GraphQLEmailType)),
       description:
         'The email addresses that will be invited to the gcal event. If not provided, no one will be invited'
+    },
+    videoType: {
+      type: GcalVideoTypeEnum,
+      description:
+        'The type of video call to be used in the meeting. Null if no video call will be used'
     }
   })
 })
 
+type GcalVideoTypeEnum = 'meet' | 'zoom'
+
 export type CreateGcalEventInputType = {
   title: string
   startTimestamp: number
   endTimestamp: number
   timeZone: string
+  videoType?: GcalVideoTypeEnum
   invitees?: string[]
 }
 

packages/server/graphql/types/GcalVideoTypeEnum.ts

@@ -0,0 +1,12 @@
+import {GraphQLEnumType} from 'graphql'
+
+const GcalVideoTypeEnum = new GraphQLEnumType({
+  name: 'GcalVideoTypeEnum',
+  description: 'The type of video conferencing used in the gcal event',
+  values: {
+    meet: {},
+    zoom: {}
+  }
+})
+
+export default GcalVideoTypeEnum