' + element.name + ' ' + 'Uploaded Successfully, ' + '
' + '\\n'\r\n })\r\n var convertText = newText.replace(/<[^>]+>/g, '');\r\n // console.log(convertText);\r\n // const urlParams = new URLSearchParams(window.location.search);\r\n // const caseNumber = urlParams.get('caseNo');\r\n setLoader(true);\r\n const result: any = await createSendFiles(acceptedFiles);\r\n if (result) {\r\n const resultData = result.data;\r\n // console.log(resultData, result.success)\r\n if (resultData.success && Array.isArray(resultData.data)) {\r\n if (resultData.data.length > 0) {\r\n //console.log(result.data)\r\n resultData.data.forEach((res: any) => {\r\n // console.log(res)\r\n props.onSendMessage(res.fileUrl);\r\n setLoader(false);\r\n });\r\n }\r\n } else {\r\n setLoader(false);\r\n }\r\n }\r\n // console.log(result, 'result')\r\n }, [])\r\n\r\n const onSendFiles = async (acceptedFiles: any) => {\r\n var newText = '';\r\n acceptedFiles.forEach((file: any) => {\r\n const element = file;\r\n newText += '' + element.name + ' ' + 'Uploaded Successfully, ' + '
' + '\\n'\r\n })\r\n var convertText = newText.replace(/<[^>]+>/g, '');\r\n // console.log(convertText);\r\n // const urlParams = new URLSearchParams(window.location.search);\r\n // const caseNumber = urlParams.get('caseNo');\r\n setLoader(true);\r\n const result: any = await createSendFiles(acceptedFiles);\r\n if (result) {\r\n const resultData = result.data;\r\n // console.log(resultData, resultData.success)\r\n if (resultData.success && Array.isArray(resultData.data)) {\r\n if (resultData.data.length > 0) {\r\n //console.log(result.data)\r\n resultData.data.forEach((res: any) => {\r\n // console.log(res)\r\n props.onSendMessage(res.fileUrl);\r\n setLoader(false);\r\n });\r\n }\r\n } else {\r\n setLoader(false);\r\n }\r\n }\r\n }\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({ noClick: true, onDrop })\r\n // console.log(selectedPane, CommandPanelTypes, 'CommandPanelTypes')\r\n return (\r\n\r\n
\r\n \r\n {selectedPane}\r\n
\r\n \r\n { props.setSelectedPane('Chat') }} />\r\n
\r\n \r\n
\r\n \r\n
\r\n {'Chat'}
\r\n \r\n { setSelectedPaneChat(false); props.setSelectedPane(selectedPane === 'Chat' ? 'none' : selectedPane); }} />\r\n
\r\n \r\n \r\n \r\n {isDragActive && \r\n
\r\n Drag Files Here
}\r\n {loader && ' + element.name + ' ' + 'Uploaded Successfully, ' + '
' + '\\n'\r\n // })\r\n // var convertText = newText.replace(/<[^>]+>/g, '');\r\n // console.log(convertText);\r\n // // props.onSendMessage(convertText);\r\n // }, [])\r\n\r\n // const { getRootProps, getInputProps, isDragActive } = useDropzone({ noClick: true, onDrop })\r\n\r\n\r\n return (\r\n \r\n\r\n */}\r\n \r\n {message.senderDisplayName}}\r\n mine={message.mine}\r\n />\r\n \r\n ),\r\n attached: message.attached\r\n };\r\n })}\r\n />\r\n
\r\n {/* */}\r\n \r\n {(useremail.substring(useremail.lastIndexOf(\"@\") + 1)).toLowerCase() !== 'liscr.com' ? (\r\n \r\n \r\n ) : (\r\n // \r\n \r\n )}\r\n {\r\n const liveAuthor = `${message.senderDisplayName} says `;\r\n const messageContentItem = (\r\n \r\n // {props.users[message.sender.communicationUserId] === undefined\r\n // ? ''\r\n // : props.users[message.sender.communicationUserId].emoji}\r\n //
\r\n ''\r\n ),\r\n key: index,\r\n contentPosition: message.mine ? 'end' : 'start',\r\n message: (\r\n \r\n Hello {username}!
You are connected live with the Duty Officer.
How can we assist you?\r\n
\r\n You are connected live with the Duty Officer.
How can we assist you?\r\n
\r\n While the duty officer is joining, please provide additional information regarding your call today.\r\n
\r\n \r\n // Hello {username}!
You are connected live with the Duty Officer.
Please have the IMO Number readily available for faster response.
How can we assist you?\r\n //
\r\n You are connected live with the Duty Officer.
Please have the IMO Number readily available for faster response.
How can we assist you?\r\n //
\r\n Hello {username}!
You are connected live with the Duty Officer.
How can we assist you?\r\n
\r\n You are connected live with the Duty Officer.
How can we assist you?\r\n
\r\n While the duty officer is joining, please provide additional information regarding your call today.\r\n
\r\n \r\n
\r\n );\r\n return {\r\n gutter: message.mine ? (\r\n ''\r\n ) : (\r\n // {readReceiptIcon(message)}
\r\n \r\n \r\n \r\n
\r\n )}\r\n ' + element.name + ' ' + 'Uploaded Successfully, ' + '
' + '\\n'\r\n }\r\n var convertText = newText.replace(/<[^>]+>/g, '');\r\n if (!props.loader) {\r\n props.onSendFiles(files);\r\n }\r\n // props.onSendMessage(convertText);\r\n }\r\n };\r\n\r\n return (\r\n\r\n \r\n {/* {\r\n if (!textValueOverflow) {\r\n addMessage();\r\n }\r\n }}\r\n /> */}\r\n {/* \r\n \r\n */}\r\n \r\n {({ getRootProps, getInputProps }) => (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n","import { mergeStyles } from '@fluentui/react';\r\n\r\nconst TypingIndicatorContainerStyle = mergeStyles({\r\n height: '2.125rem',\r\n display: 'flex',\r\n alignItems: 'center'\r\n});\r\n\r\nconst TypingIndicatorListStyle = mergeStyles({\r\n fontWeight: 400,\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n paddingRight: '0.1875rem'\r\n});\r\n\r\nconst TypingIndicatorVerbStyle = mergeStyles({\r\n fontWeight: 400,\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n paddingRight: '0.1875rem'\r\n});\r\n\r\nexport { TypingIndicatorContainerStyle, TypingIndicatorListStyle, TypingIndicatorVerbStyle };\r\n","import { connect } from 'react-redux';\r\n\r\nimport TypingIndicator from '../components/TypingIndicator';\r\nimport { State } from '../core/reducers/index';\r\nimport { PARTICIPANTS_THRESHOLD, MAXIMUM_LENGTH_OF_TYPING_USERS } from '../constants';\r\nimport { ChatParticipant } from '@azure/communication-chat';\r\nimport { CommunicationUserIdentifier } from '@azure/communication-common';\r\n\r\nconst mapStateToProps = (state: State) => ({\r\n generateTypingIndicatorList: () => {\r\n let typingUsersFromStore = state.chat.typingUsers;\r\n let contosoUsers = state.contosoClient.users;\r\n let currentContosoUser = state.contosoClient.user;\r\n\r\n let typingIndicator = '';\r\n let typingUsers = typingUsersFromStore.filter(\r\n (typingUser: ChatParticipant) =>\r\n (typingUser.id as CommunicationUserIdentifier).communicationUserId !== currentContosoUser.identity\r\n );\r\n if (typingUsers.length === 0 || state.threadMembers.threadMembers.length >= PARTICIPANTS_THRESHOLD) {\r\n return typingIndicator;\r\n }\r\n // if we have at least one other participant we want to show names for the first 2\r\n if (typingUsers.length > 0) {\r\n typingIndicator += typingUsers\r\n .filter(\r\n (typingUser: ChatParticipant) =>\r\n contosoUsers[(typingUser.id as CommunicationUserIdentifier).communicationUserId] !== undefined\r\n )\r\n .slice(0, 2)\r\n .map(\r\n (typingUserWithEmoji: any) =>\r\n `${contosoUsers[typingUserWithEmoji.id.communicationUserId].emoji}${typingUserWithEmoji.displayName}`\r\n )\r\n .join(', ');\r\n }\r\n // if we have more than 2 other participants we want to show the number of other participants\r\n if (typingUsers.length > 2) {\r\n var len = typingUsers.length - 2;\r\n typingIndicator += ` and ${len} other${len === 1 ? '' : 's'}`;\r\n }\r\n if (typingIndicator.length > MAXIMUM_LENGTH_OF_TYPING_USERS) {\r\n typingIndicator = `${typingUsers.length} participant${typingUsers.length === 1 ? '' : 's'}`;\r\n }\r\n return typingIndicator;\r\n },\r\n\r\n generateTypingIndicatorVerb: () => {\r\n let typingUsersFromStore = state.chat.typingUsers;\r\n let currentContosoUser = state.contosoClient.user;\r\n\r\n let typingIndicatorVerb = '';\r\n let typingUsers = typingUsersFromStore.filter(\r\n (typingUser: ChatParticipant) =>\r\n (typingUser.id as CommunicationUserIdentifier).communicationUserId !== currentContosoUser.identity\r\n );\r\n if (typingUsers.length === 0 || state.threadMembers.threadMembers.length >= PARTICIPANTS_THRESHOLD) {\r\n return typingIndicatorVerb;\r\n }\r\n typingIndicatorVerb = (typingUsers.length > 1 ? ' are' : ' is') + ' typing...';\r\n return typingIndicatorVerb;\r\n }\r\n});\r\n\r\nexport default connect(mapStateToProps)(TypingIndicator);\r\n","import React from 'react';\r\n\r\nimport {\r\n TypingIndicatorContainerStyle,\r\n TypingIndicatorListStyle,\r\n TypingIndicatorVerbStyle\r\n} from './styles/TypingIndicator.styles';\r\n\r\nexport interface TypingIndicatorProps {\r\n generateTypingIndicatorList(): string;\r\n generateTypingIndicatorVerb(): string;\r\n}\r\n\r\nexport default (props: TypingIndicatorProps): JSX.Element => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {\r\n if (ev.which === ENTER_KEY && !textValueOverflow) {\r\n addMessage();\r\n }\r\n props.onSendTypingNotification(lastSentTypingNotificationDate, setLastSentTypingNotificationDate);\r\n }}\r\n styles={TextFieldStyleProps}\r\n />\r\n
\r\n \r\n {props.generateTypingIndicatorList()}\r\n {props.generateTypingIndicatorVerb()}\r\n
\r\n );\r\n};\r\n","import { mergeStyles } from '@fluentui/react';\r\n\r\nconst chatAreaContainerStyle = mergeStyles({\r\n height: '100%',\r\n width: '100%',\r\n marginLeft: '0%',\r\n marginRight: '6%',\r\n paddingBottom: '1rem',\r\n overflow: 'auto'\r\n});\r\n\r\nexport { chatAreaContainerStyle };\r\n","import { connect } from 'react-redux';\r\n\r\nimport ChatArea from '../components/ChatArea';\r\nimport { State } from '../core/reducers/index';\r\nimport { updateTypingUsers } from '../core/chatSideEffects';\r\n\r\nconst mapStateToProps = (state: State) => ({\r\n typingNotifications: state.chat.typingNotifications\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any) => ({\r\n onUpdateTypingUsers: () => dispatch(updateTypingUsers())\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ChatArea);\r\n","import { Stack } from '@fluentui/react';\r\nimport React, { useEffect } from 'react';\r\n\r\nimport ChatThread from '../containers/ChatThread';\r\nimport SendBox from '../containers/SendBox';\r\nimport TypingIndicator from '../containers/TypingIndicator';\r\nimport { chatAreaContainerStyle } from './styles/ChatArea.styles';\r\n\r\nexport interface ChatAreaProps {\r\n onUpdateTypingUsers(): void;\r\n typingNotifications: any;\r\n loader: any;\r\n onSendFiles(files: any): void;\r\n dynamicCls: any;\r\n}\r\n\r\nexport default (props: ChatAreaProps): JSX.Element => {\r\n const { onUpdateTypingUsers, loader, onSendFiles, dynamicCls } = props;\r\n\r\n useEffect(() => {\r\n let listener: NodeJS.Timeout = setInterval(() => {\r\n onUpdateTypingUsers();\r\n }, 500);\r\n return () => {\r\n clearInterval(listener);\r\n };\r\n }, [onUpdateTypingUsers]);\r\n\r\n return (\r\n Please provide any information that you have
\r\n {invitePeopleString}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {/* {\r\n \r\n
\r\n );\r\n};\r\n","import { BlobServiceClient } from '@azure/storage-blob';\r\nimport { utils } from 'Utils/Utils';\r\nimport { Feedback } from './Feedback';\r\n\r\nconst getCanvasBlob = (canvas: HTMLCanvasElement): Promise\r\n \r\n \r\n
\r\n \r\n } */}\r\n \r\n
}\r\n {/* {((props.employeesCount > 0)) && */}\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n );\r\n};\r\n","// © Microsoft Corporation. All rights reserved.\r\n\r\nimport React, { useCallback, useEffect, useState, useRef } from 'react';\r\nimport { Label, Spinner, SpinnerSize } from '@fluentui/react';\r\nimport { RemoteVideoStream, VideoStreamRenderer, VideoStreamRendererView } from '@azure/communication-calling';\r\nimport { videoHint, mediaContainer, labelnamevideo } from './styles/StreamMedia.styles';\r\nimport { utils } from 'Utils/Utils';\r\nimport staticMediaSVG from '../assets/staticmedia.svg';\r\nimport { Image, ImageFit } from '@fluentui/react';\r\n\r\nexport interface RemoteStreamMediaProps {\r\n label: string;\r\n stream: RemoteVideoStream | undefined;\r\n isParticipantStreamSelected: boolean;\r\n selectedPane:string;\r\n}\r\n\r\nexport const RemoteStreamMedia = (props: RemoteStreamMediaProps): JSX.Element => {\r\n const rendererView = useRef\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n","import { connect } from 'react-redux';\r\nimport { MediaGallery, MediaGalleryProps } from '../components/MediaGallery';\r\nimport { State } from '../core/reducers';\r\n\r\nconst mapStateToProps = (state: State, props: MediaGalleryProps) => ({\r\n userId: state.sdk.userId,\r\n displayName: state.calls.callAgent?.displayName,\r\n remoteParticipants: state.calls.remoteParticipants,\r\n dominantParticipants: state.calls.dominantParticipants,\r\n localVideoStream: state.streams.localVideoStream,\r\n selectedPane: props.selectedPane,\r\n});\r\n\r\nconst connector: any = connect(mapStateToProps);\r\nexport default connector(MediaGallery);\r\n","import React, { useMemo, useState } from 'react';\r\nimport {\r\n mediaGalleryGridStyle,\r\n mediaGalleryStyle,\r\n mediaGallerySubstageStyle,\r\n substageMediaGalleryStyle\r\n} from './styles/MediaGallery.styles';\r\nimport { RemoteParticipant, LocalVideoStream } from '@azure/communication-calling';\r\nimport { utils } from '../Utils/Utils';\r\nimport { LocalStreamMedia } from './LocalStreamMedia';\r\nimport { RemoteStreamMedia } from './RemoteStreamMedia';\r\nimport { SelectionState } from 'core/RemoteStreamSelector';\r\nimport { Stack } from '@fluentui/react';\r\nimport { Constants } from '../core/constants';\r\n\r\nexport interface MediaGalleryProps {\r\n userId: string;\r\n displayName: string;\r\n remoteParticipants: RemoteParticipant[];\r\n localVideoStream: LocalVideoStream;\r\n dominantParticipants: SelectionState[];\r\n selectedPane: string;\r\n}\r\n\r\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\r\n const [gridCol, setGridCol] = useState(1);\r\n const [gridRow, setGridRow] = useState(1);\r\n\r\n\r\n // For now we are only going to support up to a 4x3 grid or 10 participants in a call\r\n // Since this is a sample, we will just hard-code how we want the grid to scale\r\n // the rows and columns for the number of users in the call\r\n const rows = [1, 1, 2, 2, 2, 2, 3, 3, 3, 3];\r\n const cols = [1, 2, 2, 2, 3, 3, 3, 3, 3, 4];\r\n\r\n const dominantParticipantCount = utils.isSafari() ? Constants.DOMINANT_PARTICIPANTS_COUNT_SAFARI : Constants.DOMINANT_PARTICIPANTS_COUNT;\r\n // console.log(dominantParticipantCount)\r\n if (dominantParticipantCount < 0 || dominantParticipantCount > rows.length - 1) {\r\n console.warn(`Please use a value for dominant participants between 0 <= x <= ${rows.length - 1}`);\r\n }\r\n\r\n const numRemoteParticipantsToRender = Math.min(dominantParticipantCount, rows.length - 1);\r\n\r\n const clamp = (num: number, min: number, max: number) => Math.min(Math.max(num, min), max);\r\n\r\n const getMediaGalleryTilesForParticipants = (\r\n participants: RemoteParticipant[],\r\n displayName: string\r\n ): JSX.Element[] => {\r\n // console.log(gridCol >= 1, gridCol, gridCol > 1, gridCol < 1)\r\n const remoteParticipantsMediaGalleryItems = participants.map((participant) => (\r\n \r\n
\r\n \r\n {showRenderLoading &&
\r\n \r\n
\r\n \r\n 1 ? ' second_full_mob_mult_video_warpper' : ' frist_full_mob_mult_video_warpper'))}>\r\n p.participantId === utils.getId(participant.identifier)).length > 0\r\n }\r\n label={participant.displayName ?? utils.getId(participant.identifier)}\r\n selectedPane={props.selectedPane}\r\n />\r\n
\r\n ));\r\n\r\n // for now we will always add the local user to the main stage\r\n const localParticipantMediaGalleryItem = (\r\n 1 ? ' second_full_mob_mult_video_warpper' : ' frist_full_mob_mult_video_warpper'))}>\r\n
\r\n );\r\n\r\n remoteParticipantsMediaGalleryItems.unshift(localParticipantMediaGalleryItem);\r\n\r\n return remoteParticipantsMediaGalleryItems;\r\n };\r\n\r\n const getSubstageMediaGalleryTilesForParticipants = (participants: RemoteParticipant[]): JSX.Element[] => {\r\n const remoteParticipantsMediaGalleryItems = participants.map((participant) => (\r\n \r\n
\r\n ));\r\n\r\n return remoteParticipantsMediaGalleryItems;\r\n };\r\n\r\n // determine number of rows/columns to add to the grid\r\n const numberStreamsToRender = useMemo(() => clamp(props.remoteParticipants.length, 0, numRemoteParticipantsToRender), [props.remoteParticipants.length])\r\n if (cols[numberStreamsToRender] !== gridCol) {\r\n if (numberStreamsToRender > cols.length - 1) {\r\n throw `attempting to set up a number of columns in the gallery for an unexpected number of participants ${numberStreamsToRender}`\r\n }\r\n setGridCol(cols[numberStreamsToRender]);\r\n }\r\n\r\n if (rows[numberStreamsToRender] !== gridRow) {\r\n if (numberStreamsToRender > rows.length - 1) {\r\n throw `attempting to set up a number of rows in the gallery for an expected unnumber of participants ${numberStreamsToRender}`\r\n }\r\n setGridRow(rows[numberStreamsToRender]);\r\n }\r\n\r\n // sort by dominance\r\n const participantsToLayout = props.remoteParticipants.sort((a, b) => {\r\n const isParticipantADominant =\r\n props.dominantParticipants.filter((p) => p.participantId === utils.getId(a.identifier)).length > 0;\r\n const isParticipantBDominant =\r\n props.dominantParticipants.filter((p) => p.participantId === utils.getId(b.identifier)).length > 0;\r\n if (isParticipantADominant && !isParticipantBDominant) {\r\n return -1;\r\n } else if (!isParticipantADominant && isParticipantBDominant) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n // console.log(numRemoteParticipantsToRender, participantsToLayout);\r\n const mainStageParticipants = participantsToLayout.slice(0, numRemoteParticipantsToRender);\r\n const substageParticipants = participantsToLayout.slice(numRemoteParticipantsToRender);\r\n // don't show the substage if its not necessary\r\n const isSubstageVisible = substageParticipants.length > 0;\r\n // console.log(props.selectedPane, 'selectedPane11')\r\n return (\r\n \r\n \r\n
\r\n \r\n {isSubstageVisible && (\r\n \r\n {getMediaGalleryTilesForParticipants(mainStageParticipants, props.displayName)}\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n};\r\n","import React, { useState, useEffect, Fragment } from 'react';\r\nimport { LocalSettings } from './LocalSettings';\r\nimport ParticipantStack from '../containers/ParticipantStack';\r\nimport ChatArea from '../containers/ChatArea';\r\nimport FormOptionnal from './FormOptional';\r\nimport { VideoDeviceInfo, AudioDeviceInfo, DeviceManager, LocalVideoStream } from '@azure/communication-calling';\r\nimport { Stack } from '@fluentui/react';\r\nimport { CloseIcon } from '@fluentui/react-icons-northstar';\r\nimport {\r\n fullHeightStyles,\r\n paneHeaderStyle,\r\n settingsContainerStyle,\r\n paneHeaderTextStyle\r\n} from './styles/CommandPanel.styles';\r\nimport { Footer } from './Footer';\r\n\r\nexport interface CommandPanelAllProps {\r\n videoDeviceInfo: VideoDeviceInfo;\r\n videoDeviceList: VideoDeviceInfo[];\r\n audioDeviceList: AudioDeviceInfo[];\r\n audioDeviceInfo: AudioDeviceInfo;\r\n setVideoDeviceInfo(device: VideoDeviceInfo): void;\r\n setAudioDeviceInfo(device: AudioDeviceInfo): void;\r\n deviceManager: DeviceManager;\r\n selectedPanePeople: any;\r\n selectedPaneSettings: any;\r\n selectedPaneAdd: any;\r\n setSelectedPanePeople: any;\r\n setSelectedPaneSettings: any;\r\n setSelectedPaneAdd: any;\r\n darkColor: string;\r\n setLocalVideoStream(stream: LocalVideoStream | undefined): void;\r\n}\r\n\r\nexport const CommandPanelAll = (props: CommandPanelAllProps): JSX.Element => {\r\n // console.log(props.darkColor, 'darkColor')\r\n return (\r\n \r\n
\r\n \r\n {'Settings'}\r\n
\r\n \r\n { props.setSelectedPaneSettings(false) }} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {'Additional Information'}\r\n
\r\n \r\n { props.setSelectedPaneAdd(false) }} />\r\n
\r\n \r\n
\r\n \r\n {'People'}\r\n
\r\n \r\n { props.setSelectedPanePeople(false) }} />\r\n
\r\n '\r\n });\r\n }\r\n var empCount: any = employeesCount;\r\n if (empCount === 1) {\r\n //saveChatMessages(concatString);\r\n stopRecord();\r\n }\r\n }\r\n }\r\n }\r\n }\r\n //console.log(selectedPane, 'selectedPane')\r\n\r\n // useEffect(() => {\r\n // const checkMutedParticipants = () => {\r\n // remoteParticipants.forEach((participant) => {\r\n // if (participant.isSpeaking && participant.isMuted) {\r\n // console.log('Unmute1', participant.identifier.communicationUserId, participant);\r\n // }\r\n // console.log('Unmute2', participant.identifier.communicationUserId, participant);\r\n // });\r\n // };\r\n\r\n // const timerId = setInterval(checkMutedParticipants, 2000); // Check every 2 seconds\r\n\r\n // return () => {\r\n // clearInterval(timerId);\r\n // };\r\n // }, [remoteParticipants]);\r\n\r\n return (\r\n
\r\n \r\n
\r\n )}\r\n {(props.callState === Constants.CONNECTED) ? (\r\n \r\n \r\n
\r\n {props.message}
*/}\r\n \r\n
\r\n {/* \r\n
\r\n \r\n {stars.map((s, index) => {\r\n let style = inactiveColor;\r\n if (index < value) {\r\n style = activeColor;\r\n }\r\n return (\r\n handleChange(index)}>{s}\r\n )\r\n })}\r\n
\r\n )\r\n}","import React from \"react\";\r\nimport Radio from \"@material-ui/core/Radio\";\r\nimport RadioGroup from \"@material-ui/core/RadioGroup\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: (props: any) => ({\r\n color: \"black\",\r\n // margin: theme.spacing(1),\r\n fontSize: '18px',\r\n '& PrivateRadioButtonIcon': {\r\n color: props.darkColor\r\n }\r\n }),\r\n radio: (props: any) => ({\r\n color: `${props.darkColor} !important`,\r\n '&$checked': {\r\n color: `${props.darkColor} !important`\r\n }\r\n }),\r\n checked: {},\r\n formControlLabel: {\r\n fontSize: '18px'\r\n },\r\n formControlLabelRoot: {\r\n color: '#000000 !important'\r\n }\r\n}));\r\n\r\nconst RadioInput = (props: any) => {\r\n const classes = useStyles(props);\r\n // console.log(props)\r\n const { label, value, setValue, name, inputs, darkColor } = props;\r\n\r\n return (\r\n {props.message}
\r\n Thank you for joining the call. Please fill out an Survey
{'2. Was there anything we could improve?'}
\r\n {'1. To what extent do you agree with the following statement :'}
\r\n The connection process to the duty officer was simple, straightforward, and painless.
\r\n \r\n
\r\n {errorStatementMsg &&\r\n Please Select the option\r\n }\r\n {'3. How satisfied are you with the ConnectNow application?'}
\r\n {'Sorry to hear that! How could we improve?'}
\r\n {'What do you love about ConnectNow?'}
\r\n {'2. How long did it take you to connect with the Duty Officer?'}
\r\n \r\n 10 min\"]}\r\n darkColor={props.darkColor}\r\n />\r\n
\r\n {errorHLMsg &&\r\n Please Select the option\r\n }\r\n {'4. How likely are you to recommend ConnectNow application to your colleague?'}
\r\n \r\n
\r\n {errorcoapplicant &&\r\n Please Select the option\r\n }\r\n \r\n \r\n \r\n {(props.page !== 'call' || isMobile) && 
}\r\n {/* \r\n All flags are not alike\r\n */}\r\n {isMobile ? (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Header);\r\n","import { IStackTokens, mergeStyles, getTheme, IStackItemStyles } from '@fluentui/react';\r\nimport heroSVG from '../../assets/hero.svg';\r\n\r\nconst palette = getTheme().palette;\r\nexport const containerTokens: IStackTokens = {\r\n childrenGap: '3.4375rem'\r\n};\r\nexport const upperStackStyle = mergeStyles({\r\n background: `url(` + heroSVG.toString() + `) no-repeat center`,\r\n selectors: {\r\n '@media (max-width: 53.4375rem)': {\r\n padding: '0.625rem'\r\n }\r\n }\r\n});\r\nexport const upperStackTokens: IStackTokens = {\r\n childrenGap: '2.625rem'\r\n};\r\nexport const upperStackButtons: IStackTokens = {\r\n childrenGap: '1.0rem'\r\n};\r\nexport const stackItemStyles: IStackItemStyles = {\r\n root: {\r\n width: '100%'\r\n }\r\n};\r\nexport const headerStyle = mergeStyles({\r\n fontWeight: 600,\r\n fontSize: '2.5rem',\r\n textAlign: 'center'\r\n});\r\nexport const datePickerStyle = mergeStyles({\r\n width: '100%',\r\n height: '34.8px'\r\n});\r\nexport const liststackItemStyles: IStackItemStyles = {\r\n root: {\r\n width: '25%'\r\n }\r\n};\r\nexport const stackBtnItemStyles: IStackItemStyles = {\r\n root: {\r\n width: '100%',\r\n textAlign: 'center',\r\n marginTop: '1.375rem !important'\r\n }\r\n};\r\nexport const buttonStyle = mergeStyles({\r\n fontWeight: 600,\r\n fontSize: '0.875rem', // 14px\r\n width: '12rem',\r\n height: '2.5rem',\r\n borderRadius: 3,\r\n padding: '0.625rem',\r\n});\r\nexport const videoCameraIconStyle = mergeStyles({\r\n marginRight: '0.375rem',\r\n fontSize: '1.375rem'\r\n});\r\n\r\nexport const listItemStyle = mergeStyles({\r\n paddingLeft: '2em',\r\n textIndent: '-1em'\r\n});\r\nexport const nestedStackTokens: IStackTokens = {\r\n childrenGap: '0.75rem'\r\n};\r\nexport const listStyle = mergeStyles({\r\n listStyleType: 'none',\r\n fontSize: '0.875rem',\r\n margin: 0,\r\n padding: 0,\r\n listStylePosition: 'outside'\r\n});\r\nexport const iconStyle = mergeStyles({\r\n marginRight: '0.4375rem',\r\n color: palette.themePrimary\r\n});\r\nexport const imgStyle = mergeStyles({\r\n width: '27.25rem',\r\n height: '20.125rem',\r\n selectors: {\r\n '@media (max-width: 67.1875rem)': {\r\n display: 'none'\r\n }\r\n }\r\n});\r\nexport const dateTextStyle = mergeStyles({\r\n fontSize: '14px',\r\n fontWeight: 600,\r\n color: 'rgb(50, 49, 48)',\r\n margin: '0px',\r\n display: 'block',\r\n padding: '5px 0px',\r\n overflowWrap: ' break-word',\r\n});\r\nexport const dateInputStyle = mergeStyles({\r\n selectors: {\r\n 'input': {\r\n fontFamily: '\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif',\r\n fontSize: '0.875rem',\r\n fontWeight: 600,\r\n boxShadow: 'none',\r\n margin: '0px',\r\n padding: '6px 8px',\r\n boxSizing: 'border-box',\r\n borderRadius: '0px',\r\n background: 'none transparent',\r\n color: 'rgb(50, 49, 48)',\r\n width: '100%',\r\n minWidth: '0px',\r\n textOverflow: 'ellipsis',\r\n outline: '0px',\r\n minHeight: 'inherit',\r\n lineHeight: '1.5rem',\r\n flexGrow: 1,\r\n overflow: 'auto',\r\n border: '1px solid rgb(96, 94, 92)'\r\n },\r\n }\r\n});","// Copyright (c) Microsoft Corporation.\r\n// Licensed under the MIT license.\r\n\r\nimport { mergeStyles } from '@fluentui/react';\r\n\r\nexport const TextFieldStyleProps = {\r\n root: {\r\n marginTop: '0.5rem !important',\r\n },\r\n fieldGroup: {\r\n height: '2.3rem'\r\n }\r\n};\r\n\r\nexport const inputBoxStyle = mergeStyles({\r\n boxSizing: 'border-box',\r\n borderRadius: '0.125rem'\r\n});\r\n\r\nexport const inputBoxTextStyle = mergeStyles({\r\n fontSize: '0.875rem',\r\n fontWeight: 600,\r\n lineHeight: '1.5rem',\r\n '::-webkit-input-placeholder': {\r\n fontSize: '0.875rem',\r\n fontWeight: 600\r\n },\r\n '::-moz-placeholder': {\r\n fontSize: '0.875rem',\r\n fontWeight: 600\r\n },\r\n ':-moz-placeholder': {\r\n fontSize: '0.875rem',\r\n fontWeight: 600\r\n }\r\n});\r\n","// Copyright (c) Microsoft Corporation.\r\n// Licensed under the MIT license.\r\n\r\nimport { TextField } from '@fluentui/react';\r\nimport React, { Fragment, useState } from 'react';\r\nimport { inputBoxStyle, inputBoxTextStyle, TextFieldStyleProps } from './styles/DisplayField.styles';\r\n\r\ninterface DisplayNameFieldProps {\r\n setErrorMsg(errorMsg: string): void;\r\n setValue(displayValue: string): void;\r\n setEmptyWarning?(isEmpty: boolean): void;\r\n isEmpty?: boolean;\r\n defaultValue?: string;\r\n errorMsg?: string;\r\n DISPLAY_NAME_MAX_CHARS?: number;\r\n TEXTFIELD_LABEL?: string;\r\n TEXTFIELD_ID?: string;\r\n TEXTFIELD_PLACEHOLDER?: string;\r\n TEXTFIELD_EMPTY_ERROR_MSG?: string;\r\n TEXTFIELD_EXCEEDS_MAX_CHARS?: string;\r\n type?: string;\r\n required?: boolean;\r\n}\r\n\r\nconst hasValidLength = (name: string, maxchar: number): boolean => {\r\n return name.length <= maxchar;\r\n};\r\n\r\nexport const DisplayTextField = (props: DisplayNameFieldProps): JSX.Element => {\r\n const { setValue, setEmptyWarning, isEmpty,\r\n defaultValue,\r\n setErrorMsg,\r\n errorMsg,\r\n DISPLAY_NAME_MAX_CHARS,\r\n TEXTFIELD_LABEL,\r\n TEXTFIELD_ID,\r\n TEXTFIELD_PLACEHOLDER,\r\n TEXTFIELD_EMPTY_ERROR_MSG,\r\n type,\r\n required\r\n } = props;\r\n const TEXTFIELD_EXCEEDS_MAX_CHARS = `${TEXTFIELD_LABEL} cannot exceed ${DISPLAY_NAME_MAX_CHARS} characters`;\r\n const [isInvalidLength, setIsInvalidLength] = useState\r\n \r\n \r\n setAnchor(null)}\r\n component={Link}\r\n to=\"/\"\r\n >\r\n \r\n \r\n Home \r\n \r\n setAnchor(null)}\r\n component={Link}\r\n to=\"/College\"\r\n >\r\n \r\n \r\n College \r\n \r\n setAnchor(null)}\r\n component={Link}\r\n to=\"/About\"\r\n >\r\n \r\n \r\n About \r\n \r\n setAnchor(null)}\r\n component={Link}\r\n to=\"/Personal\"\r\n >\r\n \r\n \r\n Personal \r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n {/* \r\n {/* \r\n {/* \r\n {/* \r\n {/* \r\n {/* \r\n Menu 6\r\n */}\r\n\r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n {/* } color=\"secondary\" className={classes.buttonEmeColor}>\r\n Emergency\r\n \r\n } color=\"secondary\" className={classes.buttonLoginColor}>\r\n Login\r\n */}\r\n
\r\n \r\n {rejoinButton &&\r\n
\r\n {headerTitle}
\r\n\t\t\t\t\t\tSelect date & time
\r\n\t\t\t\t\t\t\t\t\t{/*\r\n
\r\n );\r\n};\r\n","export const timezones = [\r\n { Id: \"Dateline Standard Time\", DisplayName: \"(UTC-12:00) International Date Line West\", DaylightName: \"Dateline Daylight Time\", StandardName: \"Dateline Standard Time\" },\r\n { Id: \"UTC-11\", DisplayName: \"(UTC-11:00) Coordinated Universal Time-11\", DaylightName: \"UTC-11\", StandardName: \"UTC-11\" },\r\n { Id: \"Aleutian Standard Time\", DisplayName: \"(UTC-10:00) Aleutian Islands\", DaylightName: \"Aleutian Daylight Time\", StandardName: \"Aleutian Standard Time\" },\r\n { Id: \"Hawaiian Standard Time\", DisplayName: \"(UTC-10:00) Hawaii\", DaylightName: \"Hawaiian Daylight Time\", StandardName: \"Hawaiian Standard Time\" },\r\n { Id: \"Marquesas Standard Time\", DisplayName: \"(UTC-09:30) Marquesas Islands\", DaylightName: \"Marquesas Daylight Time\", StandardName: \"Marquesas Standard Time\" },\r\n { Id: \"Alaskan Standard Time\", DisplayName: \"(UTC-09:00) Alaska\", DaylightName: \"Alaskan Daylight Time\", StandardName: \"Alaskan Standard Time\" },\r\n { Id: \"UTC-09\", DisplayName: \"(UTC-09:00) Coordinated Universal Time-09\", DaylightName: \"UTC-09\", StandardName: \"UTC-09\" },\r\n { Id: \"Pacific Standard Time (Mexico)\", DisplayName: \"(UTC-08:00) Baja California\", DaylightName: \"Pacific Daylight Time (Mexico)\", StandardName: \"Pacific Standard Time (Mexico)\" },\r\n { Id: \"UTC-08\", DisplayName: \"(UTC-08:00) Coordinated Universal Time-08\", DaylightName: \"UTC-08\", StandardName: \"UTC-08\" },\r\n { Id: \"Pacific Standard Time\", DisplayName: \"(UTC-08:00) Pacific Time (US & Canada)\", DaylightName: \"Pacific Daylight Time\", StandardName: \"Pacific Standard Time\" },\r\n { Id: \"US Mountain Standard Time\", DisplayName: \"(UTC-07:00) Arizona\", DaylightName: \"US Mountain Daylight Time\", StandardName: \"US Mountain Standard Time\" },\r\n { Id: \"Mountain Standard Time (Mexico)\", DisplayName: \"(UTC-07:00) Chihuahua, La Paz, Mazatlan\", DaylightName: \"Mountain Daylight Time (Mexico)\", StandardName: \"Mountain Standard Time (Mexico)\" },\r\n { Id: \"Mountain Standard Time\", DisplayName: \"(UTC-07:00) Mountain Time (US & Canada)\", DaylightName: \"Mountain Daylight Time\", StandardName: \"Mountain Standard Time\" },\r\n { Id: \"Yukon Standard Time\", DisplayName: \"(UTC-07:00) Yukon\", DaylightName: \"Yukon Daylight Time\", StandardName: \"Yukon Standard Time\" },\r\n { Id: \"Central America Standard Time\", DisplayName: \"(UTC-06:00) Central America\", DaylightName: \"Central America Daylight Time\", StandardName: \"Central America Standard Time\" }, { Id: \"Central Standard Time\", DisplayName: \"(UTC-06:00) Central Time (US & Canada)\", DaylightName: \"Central Daylight Time\", StandardName: \"Central Standard Time\" },\r\n { Id: \"Easter Island Standard Time\", DisplayName: \"(UTC-06:00) Easter Island\", DaylightName: \"Easter Island Daylight Time\", StandardName: \"Easter Island Standard Time\" },\r\n { Id: \"Central Standard Time (Mexico)\", DisplayName: \"(UTC-06:00) Guadalajara, Mexico City, Monterrey\", DaylightName: \"Central Daylight Time (Mexico)\", StandardName: \"Central Standard Time (Mexico)\" },\r\n { Id: \"Canada Central Standard Time\", DisplayName: \"(UTC-06:00) Saskatchewan\", DaylightName: \"Canada Central Daylight Time\", StandardName: \"Canada Central Standard Time\" },\r\n { Id: \"SA Pacific Standard Time\", DisplayName: \"(UTC-05:00) Bogota, Lima, Quito, Rio Branco\", DaylightName: \"SA Pacific Daylight Time\", StandardName: \"SA Pacific Standard Time\" }, { Id: \"Eastern Standard Time (Mexico)\", DisplayName: \"(UTC-05:00) Chetumal\", DaylightName: \"Eastern Daylight Time (Mexico)\", StandardName: \"Eastern Standard Time (Mexico)\" },\r\n { Id: \"Eastern Standard Time\", DisplayName: \"(UTC-05:00) Eastern Time (US & Canada)\", DaylightName: \"Eastern Daylight Time\", StandardName: \"Eastern Standard Time\" },\r\n { Id: \"Haiti Standard Time\", DisplayName: \"(UTC-05:00) Haiti\", DaylightName: \"Haiti Daylight Time\", StandardName: \"Haiti Standard Time\" },\r\n { Id: \"Cuba Standard Time\", DisplayName: \"(UTC-05:00) Havana\", DaylightName: \"Cuba Daylight Time\", StandardName: \"Cuba Standard Time\" },\r\n { Id: \"US Eastern Standard Time\", DisplayName: \"(UTC-05:00) Indiana (East)\", DaylightName: \"US Eastern Daylight Time\", StandardName: \"US Eastern Standard Time\" },\r\n { Id: \"Turks And Caicos Standard Time\", DisplayName: \"(UTC-05:00) Turks and Caicos\", DaylightName: \"Turks and Caicos Daylight Time\", StandardName: \"Turks and Caicos Standard Time\" },\r\n { Id: \"Paraguay Standard Time\", DisplayName: \"(UTC-04:00) Asuncion\", DaylightName: \"Paraguay Daylight Time\", StandardName: \"Paraguay Standard Time\" },\r\n { Id: \"Atlantic Standard Time\", DisplayName: \"(UTC-04:00) Atlantic Time (Canada)\", DaylightName: \"Atlantic Daylight Time\", StandardName: \"Atlantic Standard Time\" },\r\n { Id: \"Venezuela Standard Time\", DisplayName: \"(UTC-04:00) Caracas\", DaylightName: \"Venezuela Daylight Time\", StandardName: \"Venezuela Standard Time\" },\r\n { Id: \"Central Brazilian Standard Time\", DisplayName: \"(UTC-04:00) Cuiaba\", DaylightName: \"Central Brazilian Daylight Time\", StandardName: \"Central Brazilian Standard Time\" },\r\n { Id: \"SA Western Standard Time\", DisplayName: \"(UTC-04:00) Georgetown, La Paz, Manaus, San Juan\", DaylightName: \"SA Western Daylight Time\", StandardName: \"SA Western Standard Time\" },\r\n { Id: \"Pacific SA Standard Time\", DisplayName: \"(UTC-04:00) Santiago\", DaylightName: \"Pacific SA Daylight Time\", StandardName: \"Pacific SA Standard Time\" },\r\n { Id: \"Newfoundland Standard Time\", DisplayName: \"(UTC-03:30) Newfoundland\", DaylightName: \"Newfoundland Daylight Time\", StandardName: \"Newfoundland Standard Time\" },\r\n { Id: \"Tocantins Standard Time\", DisplayName: \"(UTC-03:00) Araguaina\", DaylightName: \"Tocantins Daylight Time\", StandardName: \"Tocantins Standard Time\" },\r\n { Id: \"E. South America Standard Time\", DisplayName: \"(UTC-03:00) Brasilia\", DaylightName: \"E. South America Daylight Time\", StandardName: \"E. South America Standard Time\" },\r\n { Id: \"SA Eastern Standard Time\", DisplayName: \"(UTC-03:00) Cayenne, Fortaleza\", DaylightName: \"SA Eastern Daylight Time\", StandardName: \"SA Eastern Standard Time\" },\r\n { Id: \"Argentina Standard Time\", DisplayName: \"(UTC-03:00) City of Buenos Aires\", DaylightName: \"Argentina Daylight Time\", StandardName: \"Argentina Standard Time\" },\r\n { Id: \"Greenland Standard Time\", DisplayName: \"(UTC-03:00) Greenland\", DaylightName: \"Greenland Daylight Time\", StandardName: \"Greenland Standard Time\" },\r\n { Id: \"Montevideo Standard Time\", DisplayName: \"(UTC-03:00) Montevideo\", DaylightName: \"Montevideo Daylight Time\", StandardName: \"Montevideo Standard Time\" },\r\n { Id: \"Magallanes Standard Time\", DisplayName: \"(UTC-03:00) Punta Arenas\", DaylightName: \"Magallanes Daylight Time\", StandardName: \"Magallanes Standard Time\" },\r\n { Id: \"Saint Pierre Standard Time\", DisplayName: \"(UTC-03:00) Saint Pierre and Miquelon\", DaylightName: \"Saint Pierre Daylight Time\", StandardName: \"Saint Pierre Standard Time\" }, { Id: \"Bahia Standard Time\", DisplayName: \"(UTC-03:00) Salvador\", DaylightName: \"Bahia Daylight Time\", StandardName: \"Bahia Standard Time\" },\r\n { Id: \"UTC-02\", DisplayName: \"(UTC-02:00) Coordinated Universal Time-02\", DaylightName: \"UTC-02\", StandardName: \"UTC-02\" },\r\n { Id: \"Mid-Atlantic Standard Time\", DisplayName: \"(UTC-02:00) Mid-Atlantic - Old\", DaylightName: \"Mid-Atlantic Daylight Time\", StandardName: \"Mid-Atlantic Standard Time\" },\r\n { Id: \"Azores Standard Time\", DisplayName: \"(UTC-01:00) Azores\", DaylightName: \"Azores Daylight Time\", StandardName: \"Azores Standard Time\" },\r\n { Id: \"Cape Verde Standard Time\", DisplayName: \"(UTC-01:00) Cabo Verde Is.\", DaylightName: \"Cabo Verde Daylight Time\", StandardName: \"Cabo Verde Standard Time\" },\r\n { Id: \"UTC\", DisplayName: \"(UTC) Coordinated Universal Time\", DaylightName: \"Coordinated Universal Time\", StandardName: \"Coordinated Universal Time\" },\r\n { Id: \"GMT Standard Time\", DisplayName: \"(UTC+00:00) Dublin, Edinburgh, Lisbon, London\", DaylightName: \"GMT Daylight Time\", StandardName: \"GMT Standard Time\" },\r\n { Id: \"Greenwich Standard Time\", DisplayName: \"(UTC+00:00) Monrovia, Reykjavik\", DaylightName: \"Greenwich Daylight Time\", StandardName: \"Greenwich Standard Time\" },\r\n { Id: \"Sao Tome Standard Time\", DisplayName: \"(UTC+00:00) Sao Tome\", DaylightName: \"Sao Tome Daylight Time\", StandardName: \"Sao Tome Standard Time\" },\r\n { Id: \"Morocco Standard Time\", DisplayName: \"(UTC+01:00) Casablanca\", DaylightName: \"Morocco Daylight Time\", StandardName: \"Morocco Standard Time\" },\r\n { Id: \"W. Europe Standard Time\", DisplayName: \"(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna\", DaylightName: \"W. Europe Daylight Time\", StandardName: \"W. Europe Standard Time\" },\r\n { Id: \"Central Europe Standard Time\", DisplayName: \"(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague\", DaylightName: \"Central Europe Daylight Time\", StandardName: \"Central Europe Standard Time\" },\r\n { Id: \"Romance Standard Time\", DisplayName: \"(UTC+01:00) Brussels, Copenhagen, Madrid, Paris\", DaylightName: \"Romance Daylight Time\", StandardName: \"Romance Standard Time\" },\r\n { Id: \"Central European Standard Time\", DisplayName: \"(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb\", DaylightName: \"Central European Daylight Time\", StandardName: \"Central European Standard Time\" },\r\n { Id: \"W. Central Africa Standard Time\", DisplayName: \"(UTC+01:00) West Central Africa\", DaylightName: \"W. Central Africa Daylight Time\", StandardName: \"W. Central Africa Standard Time\" },\r\n { Id: \"Jordan Standard Time\", DisplayName: \"(UTC+02:00) Amman\", DaylightName: \"Jordan Daylight Time\", StandardName: \"Jordan Standard Time\" },\r\n { Id: \"GTB Standard Time\", DisplayName: \"(UTC+02:00) Athens, Bucharest\", DaylightName: \"GTB Daylight Time\", StandardName: \"GTB Standard Time\" },\r\n { Id: \"Middle East Standard Time\", DisplayName: \"(UTC+02:00) Beirut\", DaylightName: \"Middle East Daylight Time\", StandardName: \"Middle East Standard Time\" },\r\n { Id: \"Egypt Standard Time\", DisplayName: \"(UTC+02:00) Cairo\", DaylightName: \"Egypt Daylight Time\", StandardName: \"Egypt Standard Time\" },\r\n { Id: \"E. Europe Standard Time\", DisplayName: \"(UTC+02:00) Chisinau\", DaylightName: \"E. Europe Daylight Time\", StandardName: \"E. Europe Standard Time\" },\r\n { Id: \"Syria Standard Time\", DisplayName: \"(UTC+02:00) Damascus\", DaylightName: \"Syria Daylight Time\", StandardName: \"Syria Standard Time\" },\r\n { Id: \"West Bank Standard Time\", DisplayName: \"(UTC+02:00) Gaza, Hebron\", DaylightName: \"West Bank Gaza Daylight Time\", StandardName: \"West Bank Gaza Standard Time\" },\r\n { Id: \"South Africa Standard Time\", DisplayName: \"(UTC+02:00) Harare, Pretoria\", DaylightName: \"South Africa Daylight Time\", StandardName: \"South Africa Standard Time\" },\r\n { Id: \"FLE Standard Time\", DisplayName: \"(UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius\", DaylightName: \"FLE Daylight Time\", StandardName: \"FLE Standard Time\" },\r\n { Id: \"Israel Standard Time\", DisplayName: \"(UTC+02:00) Jerusalem\", DaylightName: \"Jerusalem Daylight Time\", StandardName: \"Jerusalem Standard Time\" },\r\n { Id: \"South Sudan Standard Time\", DisplayName: \"(UTC+02:00) Juba\", DaylightName: \"South Sudan Daylight Time\", StandardName: \"South Sudan Standard Time\" },\r\n { Id: \"Kaliningrad Standard Time\", DisplayName: \"(UTC+02:00) Kaliningrad\", DaylightName: \"Russia TZ 1 Daylight Time\", StandardName: \"Russia TZ 1 Standard Time\" },\r\n { Id: \"Sudan Standard Time\", DisplayName: \"(UTC+02:00) Khartoum\", DaylightName: \"Sudan Daylight Time\", StandardName: \"Sudan Standard Time\" },\r\n { Id: \"Libya Standard Time\", DisplayName: \"(UTC+02:00) Tripoli\", DaylightName: \"Libya Daylight Time\", StandardName: \"Libya Standard Time\" },\r\n { Id: \"Namibia Standard Time\", DisplayName: \"(UTC+02:00) Windhoek\", DaylightName: \"Namibia Daylight Time\", StandardName: \"Namibia Standard Time\" },\r\n { Id: \"Arabic Standard Time\", DisplayName: \"(UTC+03:00) Baghdad\", DaylightName: \"Arabic Daylight Time\", StandardName: \"Arabic Standard Time\" },\r\n { Id: \"Turkey Standard Time\", DisplayName: \"(UTC+03:00) Istanbul\", DaylightName: \"Turkey Daylight Time\", StandardName: \"Turkey Standard Time\" },\r\n { Id: \"Arab Standard Time\", DisplayName: \"(UTC+03:00) Kuwait, Riyadh\", DaylightName: \"Arab Daylight Time\", StandardName: \"Arab Standard Time\" },\r\n { Id: \"Belarus Standard Time\", DisplayName: \"(UTC+03:00) Minsk\", DaylightName: \"Belarus Daylight Time\", StandardName: \"Belarus Standard Time\" },\r\n { Id: \"Russian Standard Time\", DisplayName: \"(UTC+03:00) Moscow, St. Petersburg\", DaylightName: \"Russia TZ 2 Daylight Time\", StandardName: \"Russia TZ 2 Standard Time\" },\r\n { Id: \"E. Africa Standard Time\", DisplayName: \"(UTC+03:00) Nairobi\", DaylightName: \"E. Africa Daylight Time\", StandardName: \"E. Africa Standard Time\" },\r\n { Id: \"Volgograd Standard Time\", DisplayName: \"(UTC+03:00) Volgograd\", DaylightName: \"Volgograd Daylight Time\", StandardName: \"Volgograd Standard Time\" },\r\n { Id: \"Iran Standard Time\", DisplayName: \"(UTC+03:30) Tehran\", DaylightName: \"Iran Daylight Time\", StandardName: \"Iran Standard Time\" },\r\n { Id: \"Arabian Standard Time\", DisplayName: \"(UTC+04:00) Abu Dhabi, Muscat\", DaylightName: \"Arabian Daylight Time\", StandardName: \"Arabian Standard Time\" },\r\n { Id: \"Astrakhan Standard Time\", DisplayName: \"(UTC+04:00) Astrakhan, Ulyanovsk\", DaylightName: \"Astrakhan Daylight Time\", StandardName: \"Astrakhan Standard Time\" },\r\n { Id: \"Azerbaijan Standard Time\", DisplayName: \"(UTC+04:00) Baku\", DaylightName: \"Azerbaijan Daylight Time\", StandardName: \"Azerbaijan Standard Time\" },\r\n { Id: \"Russia Time Zone 3\", DisplayName: \"(UTC+04:00) Izhevsk, Samara\", DaylightName: \"Russia TZ 3 Daylight Time\", StandardName: \"Russia TZ 3 Standard Time\" },\r\n { Id: \"Mauritius Standard Time\", DisplayName: \"(UTC+04:00) Port Louis\", DaylightName: \"Mauritius Daylight Time\", StandardName: \"Mauritius Standard Time\" },\r\n { Id: \"Saratov Standard Time\", DisplayName: \"(UTC+04:00) Saratov\", DaylightName: \"Saratov Daylight Time\", StandardName: \"Saratov Standard Time\" },\r\n { Id: \"Georgian Standard Time\", DisplayName: \"(UTC+04:00) Tbilisi\", DaylightName: \"Georgian Daylight Time\", StandardName: \"Georgian Standard Time\" },\r\n { Id: \"Caucasus Standard Time\", DisplayName: \"(UTC+04:00) Yerevan\", DaylightName: \"Caucasus Daylight Time\", StandardName: \"Caucasus Standard Time\" },\r\n { Id: \"Afghanistan Standard Time\", DisplayName: \"(UTC+04:30) Kabul\", DaylightName: \"Afghanistan Daylight Time\", StandardName: \"Afghanistan Standard Time\" },\r\n { Id: \"West Asia Standard Time\", DisplayName: \"(UTC+05:00) Ashgabat, Tashkent\", DaylightName: \"West Asia Daylight Time\", StandardName: \"West Asia Standard Time\" },\r\n { Id: \"Ekaterinburg Standard Time\", DisplayName: \"(UTC+05:00) Ekaterinburg\", DaylightName: \"Russia TZ 4 Daylight Time\", StandardName: \"Russia TZ 4 Standard Time\" },\r\n { Id: \"Pakistan Standard Time\", DisplayName: \"(UTC+05:00) Islamabad, Karachi\", DaylightName: \"Pakistan Daylight Time\", StandardName: \"Pakistan Standard Time\" },\r\n { Id: \"Qyzylorda Standard Time\", DisplayName: \"(UTC+05:00) Qyzylorda\", DaylightName: \"Qyzylorda Daylight Time\", StandardName: \"Qyzylorda Standard Time\" },\r\n { Id: \"India Standard Time\", DisplayName: \"(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi\", DaylightName: \"India Daylight Time\", StandardName: \"India Standard Time\" },\r\n { Id: \"Sri Lanka Standard Time\", DisplayName: \"(UTC+05:30) Sri Jayawardenepura\", DaylightName: \"Sri Lanka Daylight Time\", StandardName: \"Sri Lanka Standard Time\" },\r\n { Id: \"Nepal Standard Time\", DisplayName: \"(UTC+05:45) Kathmandu\", DaylightName: \"Nepal Daylight Time\", StandardName: \"Nepal Standard Time\" },\r\n { Id: \"Central Asia Standard Time\", DisplayName: \"(UTC+06:00) Astana\", DaylightName: \"Central Asia Daylight Time\", StandardName: \"Central Asia Standard Time\" },\r\n { Id: \"Bangladesh Standard Time\", DisplayName: \"(UTC+06:00) Dhaka\", DaylightName: \"Bangladesh Daylight Time\", StandardName: \"Bangladesh Standard Time\" },\r\n { Id: \"Omsk Standard Time\", DisplayName: \"(UTC+06:00) Omsk\", DaylightName: \"Omsk Daylight Time\", StandardName: \"Omsk Standard Time\" },\r\n { Id: \"Myanmar Standard Time\", DisplayName: \"(UTC+06:30) Yangon (Rangoon)\", DaylightName: \"Myanmar Daylight Time\", StandardName: \"Myanmar Standard Time\" },\r\n { Id: \"SE Asia Standard Time\", DisplayName: \"(UTC+07:00) Bangkok, Hanoi, Jakarta\", DaylightName: \"SE Asia Daylight Time\", StandardName: \"SE Asia Standard Time\" },\r\n { Id: \"Altai Standard Time\", DisplayName: \"(UTC+07:00) Barnaul, Gorno-Altaysk\", DaylightName: \"Altai Daylight Time\", StandardName: \"Altai Standard Time\" },\r\n { Id: \"W. Mongolia Standard Time\", DisplayName: \"(UTC+07:00) Hovd\", DaylightName: \"W. Mongolia Daylight Time\", StandardName: \"W. Mongolia Standard Time\" },\r\n { Id: \"North Asia Standard Time\", DisplayName: \"(UTC+07:00) Krasnoyarsk\", DaylightName: \"Russia TZ 6 Daylight Time\", StandardName: \"Russia TZ 6 Standard Time\" },\r\n { Id: \"N. Central Asia Standard Time\", DisplayName: \"(UTC+07:00) Novosibirsk\", DaylightName: \"Novosibirsk Daylight Time\", StandardName: \"Novosibirsk Standard Time\" },\r\n { Id: \"Tomsk Standard Time\", DisplayName: \"(UTC+07:00) Tomsk\", DaylightName: \"Tomsk Daylight Time\", StandardName: \"Tomsk Standard Time\" },\r\n { Id: \"China Standard Time\", DisplayName: \"(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi\", DaylightName: \"China Daylight Time\", StandardName: \"China Standard Time\" },\r\n { Id: \"North Asia East Standard Time\", DisplayName: \"(UTC+08:00) Irkutsk\", DaylightName: \"Russia TZ 7 Daylight Time\", StandardName: \"Russia TZ 7 Standard Time\" },\r\n { Id: \"Singapore Standard Time\", DisplayName: \"(UTC+08:00) Kuala Lumpur, Singapore\", DaylightName: \"Malay Peninsula Daylight Time\", StandardName: \"Malay Peninsula Standard Time\" },\r\n { Id: \"W. Australia Standard Time\", DisplayName: \"(UTC+08:00) Perth\", DaylightName: \"W. Australia Daylight Time\", StandardName: \"W. Australia Standard Time\" },\r\n { Id: \"Taipei Standard Time\", DisplayName: \"(UTC+08:00) Taipei\", DaylightName: \"Taipei Daylight Time\", StandardName: \"Taipei Standard Time\" },\r\n { Id: \"Ulaanbaatar Standard Time\", DisplayName: \"(UTC+08:00) Ulaanbaatar\", DaylightName: \"Ulaanbaatar Daylight Time\", StandardName: \"Ulaanbaatar Standard Time\" },\r\n { Id: \"Aus Central W. Standard Time\", DisplayName: \"(UTC+08:45) Eucla\", DaylightName: \"Aus Central W. Daylight Time\", StandardName: \"Aus Central W. Standard Time\" },\r\n { Id: \"Transbaikal Standard Time\", DisplayName: \"(UTC+09:00) Chita\", DaylightName: \"Transbaikal Daylight Time\", StandardName: \"Transbaikal Standard Time\" },\r\n { Id: \"Tokyo Standard Time\", DisplayName: \"(UTC+09:00) Osaka, Sapporo, Tokyo\", DaylightName: \"Tokyo Daylight Time\", StandardName: \"Tokyo Standard Time\" },\r\n { Id: \"North Korea Standard Time\", DisplayName: \"(UTC+09:00) Pyongyang\", DaylightName: \"North Korea Daylight Time\", StandardName: \"North Korea Standard Time\" },\r\n { Id: \"Korea Standard Time\", DisplayName: \"(UTC+09:00) Seoul\", DaylightName: \"Korea Daylight Time\", StandardName: \"Korea Standard Time\" },\r\n { Id: \"Yakutsk Standard Time\", DisplayName: \"(UTC+09:00) Yakutsk\", DaylightName: \"Russia TZ 8 Daylight Time\", StandardName: \"Russia TZ 8 Standard Time\" },\r\n { Id: \"Cen. Australia Standard Time\", DisplayName: \"(UTC+09:30) Adelaide\", DaylightName: \"Cen. Australia Daylight Time\", StandardName: \"Cen. Australia Standard Time\" },\r\n { Id: \"AUS Central Standard Time\", DisplayName: \"(UTC+09:30) Darwin\", DaylightName: \"AUS Central Daylight Time\", StandardName: \"AUS Central Standard Time\" },\r\n { Id: \"E. Australia Standard Time\", DisplayName: \"(UTC+10:00) Brisbane\", DaylightName: \"E. Australia Daylight Time\", StandardName: \"E. Australia Standard Time\" },\r\n { Id: \"AUS Eastern Standard Time\", DisplayName: \"(UTC+10:00) Canberra, Melbourne, Sydney\", DaylightName: \"AUS Eastern Daylight Time\", StandardName: \"AUS Eastern Standard Time\" }, { Id: \"West Pacific Standard Time\", DisplayName: \"(UTC+10:00) Guam, Port Moresby\", DaylightName: \"West Pacific Daylight Time\", StandardName: \"West Pacific Standard Time\" },\r\n { Id: \"Tasmania Standard Time\", DisplayName: \"(UTC+10:00) Hobart\", DaylightName: \"Tasmania Daylight Time\", StandardName: \"Tasmania Standard Time\" },\r\n { Id: \"Vladivostok Standard Time\", DisplayName: \"(UTC+10:00) Vladivostok\", DaylightName: \"Russia TZ 9 Daylight Time\", StandardName: \"Russia TZ 9 Standard Time\" },\r\n { Id: \"Lord Howe Standard Time\", DisplayName: \"(UTC+10:30) Lord Howe Island\", DaylightName: \"Lord Howe Daylight Time\", StandardName: \"Lord Howe Standard Time\" },\r\n { Id: \"Bougainville Standard Time\", DisplayName: \"(UTC+11:00) Bougainville Island\", DaylightName: \"Bougainville Daylight Time\", StandardName: \"Bougainville Standard Time\" },\r\n { Id: \"Russia Time Zone 10\", DisplayName: \"(UTC+11:00) Chokurdakh\", DaylightName: \"Russia TZ 10 Daylight Time\", StandardName: \"Russia TZ 10 Standard Time\" },\r\n { Id: \"Magadan Standard Time\", DisplayName: \"(UTC+11:00) Magadan\", DaylightName: \"Magadan Daylight Time\", StandardName: \"Magadan Standard Time\" },\r\n { Id: \"Norfolk Standard Time\", DisplayName: \"(UTC+11:00) Norfolk Island\", DaylightName: \"Norfolk Daylight Time\", StandardName: \"Norfolk Standard Time\" },\r\n { Id: \"Sakhalin Standard Time\", DisplayName: \"(UTC+11:00) Sakhalin\", DaylightName: \"Sakhalin Daylight Time\", StandardName: \"Sakhalin Standard Time\" },\r\n { Id: \"Central Pacific Standard Time\", DisplayName: \"(UTC+11:00) Solomon Is., New Caledonia\", DaylightName: \"Central Pacific Daylight Time\", StandardName: \"Central Pacific Standard Time\" },\r\n { Id: \"Russia Time Zone 11\", DisplayName: \"(UTC+12:00) Anadyr, Petropavlovsk-Kamchatsky\", DaylightName: \"Russia TZ 11 Daylight Time\", StandardName: \"Russia TZ 11 Standard Time\" }, { Id: \"New Zealand Standard Time\", DisplayName: \"(UTC+12:00) Auckland, Wellington\", DaylightName: \"New Zealand Daylight Time\", StandardName: \"New Zealand Standard Time\" },\r\n { Id: \"UTC+12\", DisplayName: \"(UTC+12:00) Coordinated Universal Time+12\", DaylightName: \"UTC+12\", StandardName: \"UTC+12\" },\r\n { Id: \"Fiji Standard Time\", DisplayName: \"(UTC+12:00) Fiji\", DaylightName: \"Fiji Daylight Time\", StandardName: \"Fiji Standard Time\" },\r\n { Id: \"Kamchatka Standard Time\", DisplayName: \"(UTC+12:00) Petropavlovsk-Kamchatsky - Old\", DaylightName: \"Kamchatka Daylight Time\", StandardName: \"Kamchatka Standard Time\" },\r\n { Id: \"Chatham Islands Standard Time\", DisplayName: \"(UTC+12:45) Chatham Islands\", DaylightName: \"Chatham Islands Daylight Time\", StandardName: \"Chatham Islands Standard Time\" }, { Id: \"UTC+13\", DisplayName: \"(UTC+13:00) Coordinated Universal Time+13\", DaylightName: \"UTC+13\", StandardName: \"UTC+13\" },\r\n { Id: \"Tonga Standard Time\", DisplayName: \"(UTC+13:00) Nuku'alofa\", DaylightName: \"Tonga Daylight Time\", StandardName: \"Tonga Standard Time\" },\r\n { Id: \"Samoa Standard Time\", DisplayName: \"(UTC+13:00) Samoa\", DaylightName: \"Samoa Daylight Time\", StandardName: \"Samoa Standard Time\" },\r\n { Id: \"Line Islands Standard Time\", DisplayName: \"(UTC+14:00) Kiritimati Island\", DaylightName: \"Line Islands Daylight Time\", StandardName: \"Line Islands Standard Time\" }\r\n]","// © Microsoft Corporation. All rights reserved.\r\nimport React, { Fragment, useEffect, useState } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { v1 as createGUID } from 'uuid';\r\nimport PropTypes from 'prop-types';\r\nimport SwipeableViews from 'react-swipeable-views';\r\nimport { Link } from 'react-router-dom';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport DateRangeIcon from '@material-ui/icons/DateRange';\r\nimport VideocamIcon from '@material-ui/icons/Videocam';\r\nimport MaterialUiPhoneNumber from \"material-ui-phone-number\";\r\nimport \"flatpickr/dist/themes/light.css\";\r\nimport Flatpickr from \"react-flatpickr\";\r\nimport { AppBar, Tabs, Tab, Box, Button } from '@material-ui/core';\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport CancelIcon from '@material-ui/icons/Cancel';\r\nimport Check from '@material-ui/icons/Check';\r\nimport TextareaAutosize from '@mui/material/TextareaAutosize';\r\nimport Autocomplete from '@mui/material/Autocomplete';\r\nimport TextFields from '@mui/material/TextField';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport Select from '@material-ui/core/Select';\r\nimport ArrowForwardIcon from '@material-ui/icons/ArrowForward';\r\nimport SettingsApplicationsRoundedIcon from '@material-ui/icons/SettingsApplicationsRounded';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport PlayArrowIcon from '@material-ui/icons/PlayArrow';\r\nimport { Carousel } from '@trendyol-js/react-carousel';\r\nimport { Spinner } from '@fluentui/react';\r\n// import ColorPicker from 'react-color-picker'\r\n// import 'react-color-picker/index.css'\r\nimport {\r\n localStorageAvailable,\r\n getDisplayFirstNameFromLocalStorage,\r\n saveDisplayFirstNameToLocalStorage,\r\n getDisplayLastNameFromLocalStorage,\r\n saveDisplayLastNameToLocalStorage,\r\n getDisplayEmailFromLocalStorage,\r\n saveDisplayEmailToLocalStorage,\r\n getDisplayMobileFromLocalStorage,\r\n saveDisplayMobileToLocalStorage,\r\n getDisplayIMOFromLocalStorage,\r\n saveDisplayIMOToLocalStorage,\r\n getDisplayHEXIDFromLocalStorage,\r\n saveDisplayHEXIDToLocalStorage,\r\n getDisplayMMSIFromLocalStorage,\r\n saveDisplayMMSIToLocalStorage,\r\n saveDisplayTCToLocalStorage,\r\n getDisplayTCFromLocalStorage\r\n} from '../Utils/localStorage';\r\n\r\nimport ship1 from \"../ship1.jpg\";\r\nimport ship2 from \"../ship2.jpg\";\r\nimport ship3 from \"../ship3.jpg\";\r\nimport ship4 from \"../ship4.jpg\";\r\nimport ship5 from \"../ship5.jpg\";\r\nimport ship6 from \"../ship6.jpg\";\r\nimport ship7 from \"../ship7.jpg\";\r\nimport ship8 from \"../ship8.jpg\";\r\nimport ship9 from \"../ship9.jpg\";\r\nimport ship10 from \"../ship10.jpg\";\r\nimport ship11 from \"../ship11.jpg\";\r\nimport ship12 from \"../ship12.jpg\";\r\nimport ship13 from \"../ship13.jpg\";\r\nimport ship14 from \"../ship14.jpg\";\r\nimport ship15 from \"../ship15.jpg\";\r\nimport ship16 from \"../ship16.jpg\";\r\n\r\nimport Liberianlogo from \"../Liberian-Registry-logo.png\";\r\nimport topLiberianlogo from \"../Liberianlogo.png\";\r\n\r\n\r\nimport landingpage from \"../login_page.png\";\r\nimport { createThread, createThreads, isValidThread, createscheduleMeeting, getMeetingInfoData, createMeetingUserDetails, createThreadHelper } from '../core/chatSideEffects';\r\nimport { getThreadId } from '../Utils/Utils';\r\nimport { timezones } from './TimeZones';\r\nimport { State } from '../core/reducers';\r\n\r\nconst mapDispatchToProps = (dispatch: any) => ({\r\n isValidThread: async (threadId: string, groupId: string) => dispatch(isValidThread(threadId, groupId))\r\n});\r\n\r\nconst mapStateToProps = (state: State) => ({\r\n serverCallId: state.calls.serverCallId,\r\n createThreadHandler: (groupId: string, threadId: string) => {\r\n createThread(groupId, threadId, state.calls.serverCallId);\r\n },\r\n});\r\n\r\nexport interface HomeScreenProps {\r\n startCallHandler(threadId: boolean, name: string, status: number, groupId: string): void;\r\n startCallLoader(loader: boolean): void;\r\n startCall(loader: boolean): void;\r\n joinTeamsMeeting(meetingLink: string): void;\r\n createThreadHandler(groupId: string, threadId: string): void;\r\n isValidThread(threadId: string | null, groupId: string): any;\r\n scheduleMeeting(): any;\r\n lightColor: string;\r\n darkColor: string;\r\n homeColor: string;\r\n setUpAgent(name: string): any;\r\n rejoin: boolean;\r\n pageLoader: boolean;\r\n reCall(): any;\r\n serverCallId: any;\r\n meetingData: any;\r\n}\r\n// const useStyles = makeStyles((theme) => ({\r\n// root: (props) => ({\r\n// backgroundColor: props.backgroundColor,\r\n// color: theme.color,\r\n// }),\r\n// }));\r\nconst useStyles = makeStyles((theme) => ({\r\n // root: {\r\n // flexGrow: 1,\r\n // backgroundColor: 'red',\r\n // '&$selected': {\r\n // backgroundColor: 'blue',\r\n // }\r\n // },\r\n\r\n active_tab: (props: any) => ({\r\n backgroundColor: '#fff',\r\n color: props.darkColor,\r\n textTransform: \"none\",\r\n fontSize: '18px',\r\n fontWeight: 'bold',\r\n fontFamily: 'Segoe UI',\r\n minWidth: '255px',\r\n }),\r\n\r\n default_tabStyle: (props: any) => ({\r\n color: '#fff',\r\n opacity: 1,\r\n fontWeight: 'bold',\r\n textTransform: \"none\",\r\n // borderRight: '1px solid #fff',\r\n fontSize: '18px',\r\n fontFamily: 'Segoe UI',\r\n minWidth: '255px',\r\n background: props.darkColor,\r\n }),\r\n field: {\r\n width: '100%'\r\n },\r\n fieldnamepanel1: {\r\n width: '100%',\r\n fontSize: '24px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n fieldnamepanel2: {\r\n width: '83%',\r\n fontSize: '24px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n labelStyles: (props: any) => ({\r\n fontSize: '20px', color: `${props.darkColor}`, fontWeight: 400\r\n }),\r\n buttonLoginColor: (props: any) => ({\r\n background: props.darkColor,\r\n textTransform: \"none\",\r\n height: '54px',\r\n width: '100%',\r\n fontSize: '22px',\r\n fontWeight: 400,\r\n boxShadow: '0px 3px 1px -2px rgb(0 0 0 / 0%), 0px 2px 2px 0px rgb(0 0 0 / 0%), 0px 1px 5px 0px rgb(0 0 0 / 0%)',\r\n '&:hover': {\r\n background: props.lightColor,\r\n },\r\n }),\r\n\r\n learnbuttonLoginColor: (props: any) => ({\r\n width: '160px',\r\n height: '40px',\r\n fontSize: '18px',\r\n // color: props.homeColor,\r\n // background: '#3c3e3e00',\r\n // border: `2px solid ${props.homeColor}`,\r\n background: props.darkColor,\r\n color: '#fff',\r\n border: `2px solid ${props.darkColor}`,\r\n '&:hover': {\r\n background: props.darkColor,\r\n color: '#fff',\r\n border: `2px solid ${props.darkColor}`,\r\n },\r\n }),\r\n\r\n\r\n\r\n fristnamepanelm1: {\r\n height: '85px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n emaifristnamepanelm1: {\r\n height: '64px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n callbackfristnamepanelm1: {\r\n height: '64px',\r\n marginTop: '25px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n agreepanelm1: {\r\n height: '64px',\r\n marginTop: '12px',\r\n fontFamily: 'Segoe UI',\r\n },\r\n buttonsagreepanelm1: {\r\n // marginTop: '12px',\r\n // marginBottom: '25px'\r\n // textAlign:'center'\r\n },\r\n termslink: (props: any) => ({\r\n color: props.darkColor,\r\n textDecoration: 'none',\r\n // fontWeight: 'bold',\r\n\r\n }),\r\n errormassagepanel: {\r\n color: '#D92E30',\r\n fontSize: '12px',\r\n textAlign: 'left',\r\n float: 'left'\r\n\r\n },\r\n errormassagedevice: {\r\n color: '#D92E30',\r\n fontSize: '24px',\r\n textAlign: 'center'\r\n },\r\n Selectdatedpanelm1: {\r\n color: '#707070',\r\n width: '100%',\r\n border: '0px',\r\n height: ' 37px',\r\n fontSize: '16px',\r\n marginTop: '0px',\r\n borderBottom: '1px solid #ccc'\r\n\r\n },\r\n\r\n Selectlabelnamep1: (props: any) => ({\r\n color: props.darkColor,\r\n fontSize: '18px',\r\n textAlign: 'left',\r\n width: '100%',\r\n fontWeight: 500\r\n }),\r\n\r\n DescriptionSelecttext: {\r\n color: '#707070',\r\n width: '100%',\r\n fontSize: '13px',\r\n textAlign: 'left',\r\n marginTop: '12px',\r\n border: '1px solid #B4BBC0',\r\n\r\n },\r\n\r\n gmttimevalue1: {\r\n color: '#707070',\r\n fontSize: '13px',\r\n textAlign: 'left',\r\n width: '100%',\r\n background: '#fff'\r\n },\r\n\r\n timezoneheader1: {\r\n marginTop: '14px'\r\n },\r\n datetimezoneheader1: {\r\n marginTop: '14px'\r\n },\r\n paneHeaderTextStyle: {\r\n fontSize: '1.375rem',\r\n fontWeight: 600,\r\n // width: '69px',\r\n float: 'left',\r\n margin: '9px',\r\n color: '#fff'\r\n }\r\n\r\n}));\r\nfunction TabPanel(props: any) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n Name
\r\n \r\n {' '}\r\n Name cannot be empty{' '}\r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n {/* 
*/}\r\n {/* \r\n
\r\n \r\n 
\r\n
*/}\r\n \r\n \r\n
\r\n Duty Officer Video Call
(DOVC)
\r\n {/* (DOVC)
ALL FLAGS ARE NOT ALIKE
*/}\r\n - \r\n
- Connect Now with one of our
Duty Officers available 24/7 \r\n - Provides immediate
real-time solutions \r\n - One click away from
high-quality live service \r\n
\r\n \r\n
\r\n \r\n
\r\n Connect with Duty Officer
\r\n {(cameraEnabled && microphoneEnabled && cameraEnabled === \"false\" && microphoneEnabled === \"false\") ? (\r\n \r\n Your camera and microphone is turned off. Please enable and refresh the page to proceed.\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {meetingType == 'connectNow' ? \r\n \r\n onValueChange(e)}\r\n defaultValue={displayFirstName}\r\n autoComplete='off'\r\n />\r\n {errorFNMsg &&\r\n {errorFNMsg}\r\n }\r\n \r\n \r\n onValueChange(e)}\r\n defaultValue={displayLastName}\r\n autoComplete='off'\r\n />\r\n {errorLNMsg &&\r\n {errorLNMsg}\r\n }\r\n \r\n \r\n onValueChange(e)}\r\n defaultValue={displayEmail}\r\n autoComplete='off'\r\n />\r\n {errorEmailMsg &&\r\n {errorEmailMsg}\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n :\r\n \r\n {scheduleStatus ? (\r\n \r\n {thankStatus ? (\r\n \r\n {/* \r\n \r\n }\r\n\r\n \r\n ) : (\r\n \r\n \r\n {\r\n // let selectedDate = date[0];\r\n // let currentDate = new Date();\r\n // let selectedDateWithCurrentTime = new Date(\r\n // \tselectedDate.setHours(\r\n // \t\tcurrentDate.getHours(),\r\n // \t\tcurrentDate.getMinutes(),\r\n // \t\tcurrentDate.getSeconds()\r\n // \t)\r\n // );\r\n // console.log(\r\n // \t\"selectedDateWithCurrentTime\",\r\n // \tselectedDateWithCurrentTime\r\n // );\r\n setDateTimeValue(date);\r\n if (date) {\r\n setDTErrorMsg('');\r\n }\r\n }}\r\n />\r\n {errorDTMsg &&\r\n {errorDTMsg}\r\n }\r\n \r\n \r\n {/* \r\n Time Zone \r\n \r\n */}\r\n (\r\n \r\n \r\n {/* \r\n \r\n } color=\"secondary\" className={classes.buttonLoginColor} onClick={() => clickSchedule()}>\r\n Schedule\r\n \r\n } color=\"secondary\" className={classes.buttonLoginColor} onClick={() => { setMeetingType('connectNow'); }}>\r\n Reset\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n }\r\n \r\n\r\n {/* \r\n \r\n ----\r\n \r\n {/* \r\n ----\r\n */}\r\n \r\n \r\n
\r\n \r\n
*/}\r\n\r\n {/* {(dateTimeValue && dutyOfficerDetails) &&\r\n \r\n
\r\n \r\n {new Date(dateTimeValue[0]).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}\r\n
Your meeting has been scheduled at {daysArray[new Date(dateTimeValue[0]).getDay()]}, {monthNames[new Date(dateTimeValue[0]).getMonth()]} {(new Date(dateTimeValue[0]).getDate())} {new Date(dateTimeValue[0]).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })} with {dutyOfficerDetails.jobTitle} ({dutyOfficerDetails.displayName})
\r\n } */}\r\n\r\n {(dateTimeValue && dutyOfficerDetails) &&\r\n Your meeting has been scheduled with
\r\n {dutyOfficerDetails.displayName} ({dutyOfficerDetails.jobTitle}) at {daysArray[new Date(dateTimeValue[0]).getDay()]}, {monthNames[new Date(dateTimeValue[0]).getMonth()]} {(new Date(dateTimeValue[0]).getDate())} {new Date(dateTimeValue[0]).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}\r\n {/* {dateTimeValue &&\r\n at {daysArray[new Date(dateTimeValue[0]).getDay()]}, {monthNames[new Date(dateTimeValue[0]).getMonth()]} {(new Date(dateTimeValue[0]).getDate())} {new Date(dateTimeValue[0]).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}
\r\n } */}\r\n \r\n {dutyOfficerDetails &&\r\n 
\r\n }\r\n
\r\n\r\n A link will be sent via email to meet your expert at the scheduled time.
\r\n\r\n } color=\"secondary\" className={classes.buttonLoginColor} onClick={() => { setMeetingType('connectNow'); }}>\r\n Close\r\n \r\n Select Date & Time
\r\n Description (Optional)
\r\n Connect Live or On-demand with the Duty Officer
*/}\r\n\r\n \r\n
\r\n {/* \r\n {\r\n if (!name) {\r\n setEmptyWarning(true);\r\n } else {\r\n setEmptyWarning(false);\r\n await setupCallAgent(callClient, name);\r\n props.startCallHandler();\r\n }\r\n }}\r\n >\r\n
*/}\r\n {props.message}
\r\n Anil P: Hi
Ramakrishna Parimi: How are you?
Anil P: FIne
\";\r\n // console.log(str.replace(/
'\r\n });\r\n }\r\n var empCount: any = employeesCount;\r\n // console.log(\"concatString\", employeesCount)\r\n if (empCount === 1) {\r\n //console.log(\"concatString\")\r\n //saveChatMessages(concatString.replace(/
\r\n {/* Learn more about\r\n browsers and platforms supported by the web calling sdk */}\r\n 
*/}\r\n {/* */}\r\n {/* \r\n
*/}\r\n {/* */}\r\n
\r\n );\r\n } else if (page === 'error') {\r\n window.document.title = 'Call Ended';\r\n return (\r\n To continue using duty officer video call (DOVC) application, please use Chrome/Edge.
\r\n {/*The following table represents the set of supported browsers which are currently available. We support the most recent three major versions of the browser (most recent three minor versions for Safari) unless otherwise indicated.
*/}\r\n\r\n {/*\r\n
\r\n );\r\n } else {\r\n return <>\r\n }\r\n };\r\n const clickSettingIcon = async () => {\r\n setSettingBox(!settingBox)\r\n // console.log(true, 'const clickConnectNow = async () => {')\r\n }\r\n const handleClick1 = () => {\r\n // console.log('111111111111111', colorPicker1)\r\n if (colorPicker2) {\r\n setColorPicker2(!colorPicker2)\r\n }\r\n setColorPicker1(!colorPicker1)\r\n // console.log(true, 'const clickConnectNow = async () => {')\r\n }\r\n const handleClick2 = () => {\r\n if (colorPicker1) {\r\n setColorPicker1(!colorPicker1)\r\n }\r\n // console.log('111111111111111', colorPicker2)\r\n setColorPicker2(!colorPicker2)\r\n // console.log(true, 'const clickConnectNow = async () => {')\r\n }\r\n const onValueChange = (e: any) => {\r\n const name = e.target.name;\r\n const newValue = e.target.value;\r\n //console.log(newValue, name)\r\n if (newValue === undefined) {\r\n return;\r\n }\r\n if (name === 'color1') {\r\n setDarkColor1(newValue);\r\n } else if (name === 'color2') {\r\n setLightColor1(newValue);\r\n }\r\n else if (name === 'color3') {\r\n setHomeColor(newValue);\r\n }\r\n };\r\n const onValueBlur = (e: any) => {\r\n const name = e.target.name;\r\n const newValue = e.target.value;\r\n //console.log(newValue, name)\r\n if (newValue === undefined) {\r\n return;\r\n }\r\n if (name === 'color1') {\r\n setDarkColor(newValue);\r\n } else if (name === 'color2') {\r\n setLightColor(newValue);\r\n }\r\n else if (name === 'color3') {\r\n setHomeColor(newValue);\r\n }\r\n };\r\n const handleChangeComplete = (color: any, event: any) => {\r\n setDarkColor(color.hex);\r\n setDarkColor1(color.hex);\r\n };\r\n const handleChangeComplete2 = (color: any, event: any) => {\r\n setLightColor(color.hex);\r\n setLightColor1(color.hex);\r\n };\r\n\r\n return {`The call has ended with this error code (Code: ${callEndReason?.code} Subcode: ${callEndReason?.subCode})`}
\r\n {/* \r\n Learn more about\r\n why this Azure Communication Services call has ended.
*/}\r\n \r\n \r\n {/* {(page === 'endCall' && loader) ? : } */}\r\n\r\n \r\n {page === 'configuration' ? '' : {\r\n // pagereload();\r\n // setPage('configuration');\r\n leaveMeeting(false, true);\r\n window.history.pushState({}, '', window.location.href.split('?')[0]);\r\n window.history.pushState({}, '', window.location.href + '?page=call' + '&&meetingId=' + sessionStorage.getItem('meetingId'));\r\n window.location.reload();\r\n }}\r\n darkColor={darkColor}\r\n lightColor={lightColor}\r\n />\r\n }\r\n \r\n \r\n {settingBox &&\r\n \r\n {getContent()}\r\n \r\n ) : (\r\n \r\n \r\n
\r\n \r\n clickSettingIcon()} />\r\n
\r\n \r\n {colorPicker1 &&\r\n onValueChange(e)}\r\n defaultValue={homeColor}\r\n autoComplete='off'\r\n /> */}\r\n
\r\n }\r\n {loader ? (\r\n \r\n
\r\n }\r\n {colorPicker2 &&\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n \r\n onValueBlur(e)}\r\n onChange={(e) => onValueChange(e)}\r\n defaultValue={darkColor}\r\n value={darkColor1}\r\n autoComplete='off'\r\n />\r\n
\r\n\r\n \r\n \r\n \r\n \r\n onValueChange(e)}\r\n onBlur={(e) => onValueBlur(e)}\r\n defaultValue={lightColor}\r\n value={lightColor1}\r\n autoComplete='off'\r\n />
\r\n {/* \r\n