{props.selectedPane}
*/}\n \n
\n {invitePeopleString}
\n \r\n\r\n{/*\r\n \r\n \r\n {\r\n if (e.keyCode === 13 && props.localVideoRendererIsBusy) {\r\n e.preventDefault();\r\n }\r\n } }\r\n // disabled={cameraDisabled}\r\n onClick={showHideChatFeature}\r\n className={controlButtonStyle}\r\n >\r\n {\r\n if (e.keyCode === 13 && props.localVideoRendererIsBusy) {\r\n e.preventDefault();\r\n }\r\n } }\r\n disabled={cameraDisabled}\r\n onClick={cameraOnClick}\r\n className={controlButtonStyle}\r\n >\r\n \r\n \r\n \r\n {props.isLocalScreenShareSupportedInBrowser() && (\r\n \r\n
\r\n );\r\n}else {\r\n return ( \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
\r\n \r\n {cameraActive ?
\r\n \r\n \r\n {micActive ?
\r\n \r\n {props.screenShareActive ? (\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","import { mergeStyles, IPivotStyles, getTheme } from '@fluentui/react';\r\n\r\n//const headerShadow = 'rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px';\r\nconst palette = getTheme().palette;\r\nexport const pivotItemStyles: Partial\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n","// © Microsoft Corporation. All rights reserved.\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Label, Spinner, SpinnerSize } from '@fluentui/react';\nimport { RemoteVideoStream, VideoStreamRenderer, VideoStreamRendererView } from '@azure/communication-calling';\nimport { videoHint, mediaContainer } from './styles/StreamMedia.styles';\nimport { utils } from 'Utils/Utils';\nimport staticMediaSVG from '../assets/staticmedia.svg';\nimport { Image, ImageFit } from '@fluentui/react';\n\nexport interface RemoteStreamMediaProps {\n label: string;\n stream: RemoteVideoStream | undefined;\n isParticipantStreamSelected: boolean;\n}\n\nexport default (props: RemoteStreamMediaProps): JSX.Element => {\n let rendererView: VideoStreamRendererView;\n\n const streamId = props.stream ? utils.getStreamId(props.label, props.stream) : `${props.label} - no stream`;\n\n const [activeStreamBeingRendered, setActiveStreamBeingRendered] = useState(false);\n const [showRenderLoading, setShowRenderLoading] = useState(false);\n\n const imageProps = {\n src: staticMediaSVG.toString(),\n imageFit: ImageFit.contain,\n styles: {\n root: {\n width: '100%',\n height: '100%',\n display: activeStreamBeingRendered ? 'none' : 'block'\n }\n }\n };\n\n const loadingStyle = {\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n };\n\n const {label, stream, isParticipantStreamSelected} = props;\n\n const renderRemoteStream = useCallback(async () => {\n const container = document.getElementById(streamId);\n if (container && stream && stream.isAvailable && isParticipantStreamSelected) {\n // if we are already rendering a stream we don't want to start rendering the same stream\n if (activeStreamBeingRendered) {\n return;\n }\n\n // set the flag that a stream is being rendered\n setActiveStreamBeingRendered(true);\n setShowRenderLoading(true);\n const renderer: VideoStreamRenderer = new VideoStreamRenderer(stream);\n // this can block a really long time if we fail to be subscribed to the call and it has to retry\n const rendererView = await renderer.createView({ scalingMode: 'Crop' });\n setShowRenderLoading(false);\n if (container && container.childElementCount === 0) {\n container.appendChild(rendererView.target);\n }\n } else {\n setActiveStreamBeingRendered(false);\n\n if (rendererView) {\n rendererView.dispose();\n }\n }\n }, [stream, isParticipantStreamSelected, setShowRenderLoading, setActiveStreamBeingRendered]);\n\n useEffect(() => {\n if (!stream) {\n return;\n }\n\n stream.on('isAvailableChanged', renderRemoteStream);\n\n if (stream.isAvailable) {\n renderRemoteStream();\n }\n }, [stream, isParticipantStreamSelected, renderRemoteStream]);\n\n return (\n \n
\n );\n};\n","import { connect } from 'react-redux';\nimport MediaGallery from '../components/MediaGallery';\nimport { State } from '../core/reducers';\n\nconst mapStateToProps = (state: State) => ({\n userId: state.sdk.userId,\n displayName: state.calls.callAgent?.displayName,\n remoteParticipants: state.calls.remoteParticipants,\n dominantParticipants: state.calls.dominantParticipants,\n localVideoStream: state.streams.localVideoStream\n});\n\nconst connector: any = connect(mapStateToProps);\nexport default connector(MediaGallery);\n","import React, { useState } from 'react';\r\nimport { mediaGalleryGridStyle, mediaGalleryStyle } 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\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}\r\n\r\nexport default (props: MediaGalleryProps): JSX.Element => {\r\n const [gridCol, setGridCol] = useState(1);\r\n const [gridRow, setGridRow] = useState(1);\r\n\r\n const calculateNumberOfRows = React.useCallback(\r\n (participants, gridCol) => Math.ceil((participants.length + 1) / gridCol),\r\n []\r\n );\r\n const calculateNumberOfColumns = React.useCallback(\r\n (participants) => (participants && participants.length > 0 ? Math.ceil(Math.sqrt(participants.length + 1)) : 1),\r\n []\r\n );\r\n const getMediaGalleryTilesForParticipants = (participants: RemoteParticipant[], userId: string, displayName: string) => {\r\n const remoteParticipantsMediaGalleryItems = participants.map((participant) => (\r\n \n { showRenderLoading &&
\n \r\n x.isAvailable) ? participant.videoStreams.find(x => x.isAvailable) : participant.videoStreams[0]}\r\n isParticipantStreamSelected={props.dominantParticipants.filter(p => p.participantId === utils.getId(participant.identifier)).length > 0}\r\n label={participant.displayName ?? utils.getId(participant.identifier)}\r\n />\r\n
\r\n ));\r\n\r\n // create a LocalStreamMedia component for the local participant\r\n const localParticipantMediaGalleryItem = (\r\n \r\n
\r\n );\r\n\r\n // add the LocalStreamMedia at the beginning of the list\r\n remoteParticipantsMediaGalleryItems.unshift(localParticipantMediaGalleryItem);\r\n\r\n return remoteParticipantsMediaGalleryItems;\r\n };\r\n\r\n const numberOfColumns = calculateNumberOfColumns(props.remoteParticipants);\r\n if (numberOfColumns !== gridCol) setGridCol(numberOfColumns);\r\n const numberOfRows = calculateNumberOfRows(props.remoteParticipants, gridCol);\r\n if (numberOfRows !== gridRow) setGridRow(numberOfRows);\r\n\r\n return (\r\n \r\n {getMediaGalleryTilesForParticipants(props.remoteParticipants, props.userId, props.displayName)}\r\n
\r\n );\r\n};\r\n","import { mergeStyles, getTheme } from '@fluentui/react';\n\nconst palette = getTheme().palette;\nexport const fullScreenStyle = mergeStyles({\n padding: '0.5em',\n borderRight: '1px solid rgba(0,0,0,0.05)',\n height: '100%',\n width: '100%',\n background: palette.neutralLighterAlt\n});\n\nexport const hiddenFullScreenStyle = mergeStyles({\n display: 'none',\n borderRight: '1px solid rgba(0,0,0,0.05)',\n height: '100%',\n width: '100%',\n background: palette.neutralLighterAlt\n});\n\nexport const loadingStyle = mergeStyles({\n height: '100%',\n display: 'flex',\n justifyContent: 'center'\n});\n","import React, { useEffect, useState } from 'react';\nimport { ParticipantStream } from '../core/reducers';\nimport { hiddenFullScreenStyle, fullScreenStyle, loadingStyle } from './styles/MediaFullScreen.styles';\nimport { RemoteVideoStream, VideoStreamRenderer, VideoStreamRendererView } from '@azure/communication-calling';\nimport { Spinner, SpinnerSize } from '@fluentui/react';\nimport { utils } from 'Utils/Utils';\n\nexport interface MediaFullScreenProps {\n activeScreenShareStream: ParticipantStream;\n}\n\nexport default (props: MediaFullScreenProps): JSX.Element => {\n const [loading, setLoading] = useState(true);\n const fullScreenStreamMediaId = 'fullScreenStreamMediaId';\n let rendererView: VideoStreamRendererView;\n\n /**\n * Start stream after DOM has rendered\n */\n\n const activeScreenShareStream = props.activeScreenShareStream;\n\n const renderStream = async () => {\n if (activeScreenShareStream && activeScreenShareStream.stream) {\n const stream: RemoteVideoStream = activeScreenShareStream.stream;\n const renderer: VideoStreamRenderer = new VideoStreamRenderer(stream);\n rendererView = await renderer.createView({ scalingMode: 'Fit' });\n\n const container = document.getElementById(fullScreenStreamMediaId);\n if (container && container.childElementCount === 0) {\n setLoading(false);\n container.appendChild(rendererView.target);\n }\n } else {\n if (rendererView) {\n rendererView.dispose();\n }\n }\n };\n useEffect(() => {\n renderStream();\n }, [activeScreenShareStream, renderStream]);\n\n const displayName =\n props.activeScreenShareStream.user.displayName ?? utils.getId(props.activeScreenShareStream.user.identifier);\n\n return (\n <>\n {loading && (\n \n
\n )}\n \n \n );\n};\n","// © Microsoft Corporation. All rights reserved.\r\n/* eslint-disable react/display-name */\r\nimport React, { useState, useEffect } from 'react';\r\nimport { Label, Overlay, Stack } from '@fluentui/react';\r\nimport Header from '../containers/Header';\r\nimport MediaGallery from '../containers/MediaGallery';\r\nimport MediaFullScreen from './MediaFullScreen';\r\nimport CommandPanel, { CommandPanelTypes } from './CommandPanel';\r\nimport { Constants } from '../core/constants';\r\nimport WaitingScreen from './WaitingScreen';\r\n//import { ChatClient} from \"@azure/communication-chat\";\r\n//import { AzureCommunicationTokenCredential } from \"@azure/communication-common\";\r\n//import { utils } from '../Utils/Utils';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport appconfig from \"../appconfig.json\";\r\nimport axios from 'axios'; \r\nimport { store } from \"App\";\r\nimport {\r\n headerStyles,\r\n containerStyles,\r\n paneStyles,\r\n hiddenContainerClassName,\r\n activeContainerClassName,\r\n loadingStyle,\r\n overlayStyles,\r\n} from './styles/GroupCall.styles';\r\nimport {\r\n Call,\r\n LocalVideoStream,\r\n AudioDeviceInfo,\r\n VideoDeviceInfo,\r\n RemoteParticipant,\r\n CallAgent,\r\n DeviceManager,\r\n CallEndReason\r\n} from '@azure/communication-calling';\r\nimport { ParticipantStream } from 'core/reducers/index.js';\r\nimport { ChatClient, ChatThreadClient } from '@azure/communication-chat';\r\nimport setLanguage, { translations } from 'translation';\r\n//import CloseCaptions from 'containers/CloseCaptions';\r\n\r\nexport interface GroupCallProps {\r\n userId: string;\r\n displayName: string;\r\n userToken: string;\r\n groupId: string;\r\n call: Call;\r\n callAgent: CallAgent;\r\n chatClient: ChatClient;\r\n deviceManager: DeviceManager;\r\n mic: boolean;\r\n remoteParticipants: RemoteParticipant[];\r\n callState: string;\r\n localVideo: boolean;\r\n localVideoStream: LocalVideoStream;\r\n screenShareStreams: ParticipantStream[];\r\n audioDeviceInfo: AudioDeviceInfo;\r\n videoDeviceInfo: VideoDeviceInfo;\r\n audioDeviceList: AudioDeviceInfo[];\r\n videoDeviceList: VideoDeviceInfo[];\r\n screenWidth: number;\r\n shareScreen: boolean;\r\n setAudioDeviceInfo(deviceInfo: AudioDeviceInfo): void;\r\n setVideoDeviceInfo(deviceInfo: VideoDeviceInfo): void;\r\n setLocalVideoStream(stream: LocalVideoStream | undefined): void;\r\n mute(): void;\r\n enableMic(): void;\r\n isGroup(): void;\r\n joinGroup(): void;\r\n endCallHandler(): void;\r\n\r\n setupCallClient(unsupportedStateHandler: () => void): void;\r\n setupCallAgent(displayName: string): void;\r\n setGroup(groupId: string): void;\r\n startCallHandler(): void;\r\n unsupportedStateHandler: () => void;\r\n callEndedHandler: (reason: CallEndReason) => void;\r\n setMic(mic: boolean): void;\r\n receivedChatMessage: string;\r\n serverCallId: string;\r\n otpToken: string;\r\n}\r\n\r\n\r\n\r\n\r\n\r\nlet allMessages: string;\r\nlet localProps: GroupCallProps;\r\nexport default (props: GroupCallProps): JSX.Element => {\r\n\r\n localProps = props;\r\n const [selectedPane, setSelectedPane] = useState(CommandPanelTypes.None);\r\n //const [receivedChatMessage, setReceivedChatMessage] = useState(props.receivedChatMessage);\r\n const activeScreenShare = props.screenShareStreams && props.screenShareStreams.length === 1;\r\n\r\n const { callAgent, call, setGroup, joinGroup, setupCallAgent, setupCallClient, unsupportedStateHandler } = props;\r\n \r\n const queryParams = new URLSearchParams(window.location.search);\r\n //const meetingLink = queryParams.get(\"meetingLink\");\r\n const meetingLink = props.groupId;\r\n const fullname = queryParams.get(\"fullname\");\r\n \r\n \r\n useEffect(() => {\r\n setupCallClient(unsupportedStateHandler);\r\n setupCallAgent(fullname == null ? \"\" : fullname);\r\n }, []);\r\n\r\n useEffect(() => {\r\n props.setMic(true);\r\n setGroup(meetingLink == null ? \"\" : meetingLink);\r\n }, [setupCallClient, unsupportedStateHandler]);\r\n\r\n useEffect(() => {\r\n if (callAgent && !call) {\r\n joinGroup();\r\n \r\n }\r\n \r\n }, [callAgent, call, joinGroup]);\r\n if (props.serverCallId) {\r\n //alert(\"Server Call ID = \"+props.serverCallId);\r\n }\r\n \r\n return (\r\n \r\n {/* */}\r\n\r\n
)\r\n ) : (\r\n \r\n \r\n
\r\n )}\r\n \", \"\");\r\n message = message.replace(\"
\", \"\");\r\n const formattedMessage = \"\";\r\n this.setState({\r\n message: '',\r\n messages: this.state.messages + \"\" + formattedMessage\r\n })\r\n }\r\n\r\n \r\n if (allMessages) {\r\n this.setState({\r\n message: '',\r\n messages: allMessages\r\n })\r\n }\r\n\r\n document.getElementById(\"chat_message_box\")?.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Enter\") {\r\n this.handleSendMessage();\r\n }\r\n });\r\n }\r\n componentDidUpdate() {\r\n allMessages = this.state.messages;\r\n }\r\n initiateChatClient = async () => {\r\n\r\n const chatClient = localProps.chatClient;\r\n\r\n //await chatClient.startRealtimeNotifications();\r\n const groupIdArr = localProps.groupId.split(\"/\");\r\n const threadId = groupIdArr[5];\r\n console.log(\"initiateChatClient threadId = \" + threadId);\r\n chatClient.on(\"chatMessageReceived\", (e: any) => {\r\n console.log(\"Notification chatMessageReceived!\");\r\n if (e.sender.communicationUserId != localProps.userId) {\r\n this.renderReceivedMessage(e.message, e.sender.communicationUserId);\r\n }\r\n else {\r\n this.renderSentMessage(e.message, localProps.userId); \r\n }\r\n });\r\n this.chatThreadClient = await chatClient.getChatThreadClient(threadId);\r\n }\r\n\r\n state = {\r\n messages: '',\r\n message: ''\r\n };\r\n handleMessageChange = (event: any) => { \r\n this.setState({\r\n message: event.target.value,\r\n messages: this.state.messages\r\n })\r\n\r\n };\r\n\r\n handleSendMessage = async () => {\r\n this.chatThreadClient?.getProperties()\r\n let sendMessageRequest = { content: this.state.message };\r\n let sendMessageOptions = { senderDisplayName: localProps.displayName };\r\n try {\r\n if (this.state.message != \"\" && this.state.message != null) {\r\n await this.chatThreadClient?.sendMessage(sendMessageRequest, sendMessageOptions);\r\n } \r\n } catch (err) {\r\n alert(err);\r\n /* let error: string = JSON.stringify(err);\r\n if (error.includes(\"Forbbiden\")) {\r\n this.initiateChatClient();\r\n await this.chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);\r\n } */\r\n\r\n }\r\n this.setState({\r\n message: '',\r\n messages: this.state.messages\r\n })\r\n }\r\n\r\n renderReceivedMessage = async (message: string, user: string) => {\r\n message = message.replace(\"
\", \"\");\r\n message = message.replace(\"
\", \"\");\r\n const formattedMessage = \"\";\r\n this.setState({\r\n message: '',\r\n messages: this.state.messages + formattedMessage\r\n })\r\n this.updateScroll();\r\n }\r\n\r\n\r\n renderSentMessage = async (message: string, user: string) => {\r\n if(message != ''){\r\n const formattedMessage = \"\";\r\n this.setState({\r\n message: '',\r\n messages: this.state.messages +formattedMessage\r\n })}\r\n this.updateScroll();\r\n }\r\n\r\n updateScroll() {\r\n let element = document.getElementById(\"messages-container\") as HTMLElement;\r\n element.scrollTop = element.scrollHeight - 100;\r\n }\r\n\r\n \r\n\r\n submitFile = (event:any) => {\r\n\t\tconst formData = new FormData();\r\n const selectedFile:File = event.target.files[0];\r\n\t\tconst allowedFileExtensions = ['pdf','jpeg','png','jpg','doc','docx'];\r\n var ext = selectedFile.name.split(\".\")[1];\r\n \r\n if(! allowedFileExtensions.includes(ext)){\r\n\t\t alert(\"مسموح بهذه الملفات فقط ['pdf','jpeg','png','jpg','doc','docx']\")\r\n return false;\r\n } \r\n else if (selectedFile.size > 16777216){ \r\n\t\t alert(\"حجم الملف لا يزيد عن15 ميجا\")\r\n return false;\r\n }\r\n const queryParams = new URLSearchParams(window.location.search);\r\n const meetingID:any = queryParams.get(\"meetingID\");\r\n formData.append(\"callId\",meetingID);\r\n formData.append('file', selectedFile);\r\n \r\n const requestOptions = {\r\n method: \"POST\",\r\n // headers: myHeaders,\r\n body: formData\r\n \r\n };\r\n const url = appconfig.azure_reports_url + \"/Attatchment/customer/upload\";\r\n fetch( url, requestOptions)\r\n .then((response) => response.text())\r\n .then((result) => {\r\n //alert(JSON.stringify(result))\r\n //this.saveFileURL(result.link);\r\n\t\t\t\tconsole.log('Share file success response:', result);\r\n /* this.setState({\r\n message: result.link\r\n }); */\r\n this.setState({\r\n message: \"تم مشاركة الملف بنجاح\"\r\n });\r\n this.handleSendMessage();\r\n let uploadFileBtn = document.getElementById('uploadFileBtn') as HTMLInputElement;\r\n uploadFileBtn.value = \"\"; \r\n\t\t\t})\r\n\t\t\t.catch((error) => {\r\n alert('Error:'+JSON.stringify(error));\r\n\t\t\t\tconsole.error('Error:', error);\r\n\t\t\t});\r\n return true;\r\n\t}\r\n\r\n saveFileURL = (fileurl:string) =>{\r\n const queryParams = new URLSearchParams(window.location.search);\r\n const meetingID = queryParams.get(\"meetingID\");\r\n const requestBody = {\r\n \"Attachments\":[fileurl,fileurl]\r\n } \r\n\r\n let common = store.getState().common;\r\n const config = {\r\n headers: {\r\n api_token: common.token\r\n }\r\n }; \r\n // alert(JSON.stringify(requestBody));\r\n //https://gosivvas-report-api-uat.azurewebsites.net/api/addattachment/06191951-be2f-43ed-a382-0b9095e8c2ad\r\n const url = appconfig.azure_reports_url + \"/api/addattachment/\"+meetingID;\r\n axios.post(url, requestBody , config).then(response => {\r\n // alert(JSON.stringify(response));\r\n console.log(\"saveFileUrl msg = \"+response);\r\n }).catch(error => {\r\n alert(JSON.stringify(error));\r\n })\r\n }\r\n openFileAppload = ()=>{\r\n let uploadFileBtn = document.getElementById('uploadFileBtn') as HTMLInputElement;\r\n uploadFileBtn.click();\r\n }\r\n\r\n render() {\r\n if (localProps.callState === Constants.CONNECTED) {\r\n\r\n return (\r\n\r\n
\r\n )\r\n } else {\r\n return (\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 There is no active calls
\r\n )\r\n }\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport axios from 'axios';\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport appconfig from \"./../appconfig.json\";\r\nimport { connect } from \"react-redux\";\r\nimport { State } from '../core/reducers';\r\nimport setLanguage from 'translation';\r\n\r\nexport interface WaitingProps {\r\n callState: string;\r\n otpToken: string;\r\n meetingId: string;\r\n meetingLink: string;\r\n serviceType: string;\r\n}\r\n \r\n\r\nclass WaitingScreen extends Component {\r\n\r\n constructor(public props: WaitingProps) {\r\n super(props);\r\n }\r\n\r\n\r\n \r\n\r\n startChat = function () {\r\n window[\"startChat\"]();\r\n }\r\n state = {\r\n waitingCount: \"\"\r\n }\r\n\r\n startWaitingTime = new Date();\r\n // queueLoadingCounter = 0;\r\n fetchWaitingCount = () => {\r\n //this.queueLoadingCounter++;\r\n this.setState({\r\n waitingCount: \"\"\r\n })\r\n const queryParams = new URLSearchParams(window.location.search);\r\n const meetingID = queryParams.get(\"meetingID\");\r\n const serviceType = queryParams.get(\"serviceType\");\r\n console.log('waiting screen > meeting id = ' + meetingID);\r\n console.log('waiting screen > serviceType = ' + serviceType);\r\n //https://endak-momrah-calling-bot.azurewebsites.net/api/customer/bb6c5a97-8963-4a31-91fe-2b6cdb8d66e6/waiting\r\n const url = appconfig.azure_reports_url + '/api/customer/' + meetingID + '/waiting/' + serviceType;\r\n console.log('waiting screen > waiting api url = ' + url);\r\n const config = {\r\n headers: { \r\n // Authorization: `Bearer ${this.props.otpToken}`,\r\n api_token: this.props.otpToken\r\n }\r\n };\r\n axios.get(url , config).then(response => {\r\n \r\n console.log(\"fetchWaitingCount : count = \"+response.data.count);\r\n //alert(this.queueLoadingCounter);\r\n // if(response.data.count > 0 || this.queueLoadingCounter > 2){\r\n if(response.data.count > 0 ){\r\n this.setState({\r\n waitingCount: response.data.count\r\n })\r\n }else{\r\n\r\n this.setState({\r\n waitingCount: 0\r\n })\r\n }\r\n })\r\n }\r\n\r\n checkWaitingTimeIsExpired = () => {\r\n let currentTime = new Date();\r\n var timeDiffInSeconds = (currentTime.getTime() - this.startWaitingTime.getTime()) / 1000;\r\n if (timeDiffInSeconds > parseInt(appconfig.waiting_expiry_in_minutes) * 60) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const meetingID = urlParams.get(\"meetingID\");\r\n let isPublic = urlParams.get(\"isPublic\");\r\n window.location.href = window.location.href.split('?')[0] + \"waitingTimeExpired?meetingID=\" + meetingID + \"&isPublic=\" + isPublic;\r\n }\r\n }\r\n\r\n fetchWaitingCountInterval = setInterval(this.fetchWaitingCount, 10000);\r\n checkWaitingTimeIsExpiredInterval = setInterval(this.checkWaitingTimeIsExpired, 30000);\r\n componentWillUnmount(): void {\r\n clearInterval(this.fetchWaitingCountInterval);\r\n clearInterval(this.checkWaitingTimeIsExpiredInterval);\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.fetchWaitingCount();\r\n // this.startCall();\r\n const language = localStorage.getItem(\"lang\") ;\r\n setLanguage(language);\r\n //alert(language);\r\n }\r\n\r\n exitCall = () => {\r\n this.utility.endCall();\r\n }\r\n\r\n //startCall = () =>{\r\n // const config = {\r\n // headers: {\r\n // api_token: this.props.otpToken\r\n // }\r\n // };\r\n // const requestBody = {\r\n // \"Id\": this.props.meetingId,\r\n // \"ServiceType\": this.props.serviceType,\r\n // \"MeetingUrl\": this.props.meetingLink,\r\n // };\r\n // const url = appconfig.azure_url + \"/api/customer-meeting/start\";\r\n // axios.post(url, requestBody , config).then(response => {\r\n // console.log(JSON.stringify(response));\r\n // })\r\n //}\r\n\r\n utility = {\r\n endCall: async (): Promise\r\n
\r\n \r\n );\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (state: State, props: WaitingProps) => ({\r\n callState: state.calls.callState,\r\n otpToken: state.common.token,\r\n meetingId: state.common.meetingID,\r\n serviceType:state.common.serviceType,\r\n meetingLink: state.common.meetingLink,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any, props: WaitingProps) => ({\r\n\r\n});\r\n\r\nconst connector: any = connect(mapStateToProps, mapDispatchToProps);\r\nexport default connector(WaitingScreen);\r\n\r\n\r\n\r\n","import { IStackItemStyles, IStackStyles, getTheme, mergeStyles } from '@fluentui/react';\r\n\r\nconst palette = getTheme().palette;\r\nexport const headerStyles: IStackItemStyles = {\r\n root: {\r\n width: '100%'\r\n }\r\n};\r\nexport const containerStyles: IStackStyles = {\r\n root: {\r\n height: '100%',\r\n minHeight: '9.375rem',\r\n width: '100%'\r\n }\r\n};\r\nexport const paneStyles: IStackItemStyles = {\r\n root: {\r\n width: '17.875rem'\r\n }\r\n};\r\nexport const overlayStyles: IStackItemStyles = {\r\n root: {\r\n background: palette.white,\r\n marginTop: '4rem'\r\n }\r\n};\r\nexport const hiddenContainerClassName: IStackItemStyles = {\r\n root: {\r\n border: `solid 1px ${palette.neutralLighterAlt}`,\r\n height: '100%',\r\n display: 'none'\r\n }\r\n};\r\nexport const activeContainerClassName: IStackItemStyles = {\r\n root: {\r\n border: `solid 1px ${palette.neutralLighterAlt}`,\r\n height: 'calc(100% - 3px)',\r\n display: 'initial'\r\n }\r\n};\r\n\r\nexport const loadingStyle = mergeStyles({\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n});\r\nexport const clipIcon = mergeStyles({\r\n position: 'absolute',\r\n top: '10px',\r\n fontSize: '20px',\r\n color: '#84BC47 !important',\r\n});","import { connect } from 'react-redux';\r\nimport GroupCall, { GroupCallProps } from '../components/GroupCall';\r\nimport { joinGroup, setMicrophone } from '../core/sideEffects';\r\nimport { initCallAgent, initCallClient} from '../core/sideEffects';\r\nimport { setLocalVideoStream } from '../core/actions/streams';\r\nimport { setVideoDeviceInfo, setAudioDeviceInfo } from '../core/actions/devices';\r\nimport {\r\n AudioDeviceInfo,\r\n VideoDeviceInfo,\r\n LocalVideoStream\r\n} from '@azure/communication-calling';\r\nimport { State } from '../core/reducers';\r\nimport { setGroup } from 'core/actions/calls';\r\nimport { setMic } from '../core/actions/controls';\r\n\r\nconst mapStateToProps = (state: State, props: GroupCallProps) => ({\r\n userId: state.sdk.userId,\r\n userToken: state.sdk.userToken,\r\n displayName:state.sdk.displayName,\r\n callAgent: state.calls.callAgent,\r\n chatClient: state.calls.chatClient,\r\n deviceManager: state.devices.deviceManager,\r\n group: state.calls.group,\r\n screenWidth: props.screenWidth,\r\n call: state.calls.call,\r\n shareScreen: state.controls.shareScreen,\r\n mic: state.controls.mic,\r\n groupCallEndReason: state.calls.groupCallEndReason,\r\n isGroup: () => state.calls.call && state.calls.call.direction !== 'Incoming' && !!state.calls.group,\r\n joinGroup: async () => {\r\n state.calls.callAgent &&\r\n \r\n await joinGroup(\r\n state.calls.callAgent,\r\n {\r\n // groupId: state.calls.group\r\n meetingLink: state.calls.group\r\n },\r\n {\r\n videoOptions: { localVideoStreams: state.streams.localVideoStream ? [state.streams.localVideoStream] : undefined },\r\n //audioOptions: { muted: !state.controls.mic }\r\n audioOptions: { muted: false }\r\n }\r\n );\r\n },\r\n remoteParticipants: state.calls.remoteParticipants,\r\n callState: state.calls.callState,\r\n localVideo: state.controls.localVideo,\r\n localVideoStream: state.streams.localVideoStream,\r\n screenShareStreams: state.streams.screenShareStreams,\r\n videoDeviceInfo: state.devices.videoDeviceInfo,\r\n audioDeviceInfo: state.devices.audioDeviceInfo,\r\n videoDeviceList: state.devices.videoDeviceList,\r\n audioDeviceList: state.devices.audioDeviceList,\r\n cameraPermission: state.devices.cameraPermission,\r\n microphonePermission: state.devices.microphonePermission,\r\n receivedChatMessage: state.calls.chatMessage\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any , props: GroupCallProps) => ({\r\n mute: () => dispatch(setMicrophone(false)),\r\n setMic: (mic: boolean) => dispatch(setMic(mic)),\r\n setAudioDeviceInfo: (deviceInfo: AudioDeviceInfo) => {\r\n dispatch(setAudioDeviceInfo(deviceInfo));\r\n },\r\n setVideoDeviceInfo: (deviceInfo: VideoDeviceInfo) => {\r\n dispatch(setVideoDeviceInfo(deviceInfo));\r\n },\r\n setLocalVideoStream: (localVideoStream: LocalVideoStream) => dispatch(setLocalVideoStream(localVideoStream)),\r\n setupCallClient: (unsupportedStateHandler: () => void) =>\r\n dispatch(initCallClient( unsupportedStateHandler)),\r\n setupCallAgent: (displayName: string) =>\r\n dispatch(initCallAgent(displayName, props.endCallHandler)),\r\n setGroup: (groupId: string) => dispatch(setGroup(groupId)),\r\n \r\n});\r\n\r\nconst connector: any = connect(mapStateToProps, mapDispatchToProps);\r\nexport default connector(GroupCall);\r\n","// © Microsoft Corporation. All rights reserved.\nimport React, { useEffect } from 'react';\nimport { Stack, Toggle, Image, ImageFit } from '@fluentui/react';\nimport { MicIcon, CallVideoIcon } from '@fluentui/react-icons-northstar';\nimport { Constants } from '../core/constants'; \nimport {\n VideoStreamRendererView,\n VideoDeviceInfo,\n AudioDeviceInfo,\n LocalVideoStream,\n VideoStreamRenderer\n} from '@azure/communication-calling';\nimport staticMediaSVG from '../assets/staticmedia.svg';\nimport {\n toggleStyle,\n imgStyles,\n toggleButtonsBarToken,\n localPreviewContainerStyle,\n toggleButtonsBarStyle,\n localPreviewStyle\n} from './styles/LocalPreview.styles';\n \n\nexport interface LocalPreviewProps {\n setMic(mic: boolean): void;\n mic: boolean;\n setLocalVideoStream(device: LocalVideoStream | undefined): void;\n videoDeviceInfo: VideoDeviceInfo;\n audioDeviceInfo: AudioDeviceInfo;\n videoDeviceList: VideoDeviceInfo[];\n audioDeviceList: AudioDeviceInfo[];\n localVideoStream: LocalVideoStream;\n}\n\nlet rendererView: VideoStreamRendererView;\n\nexport default (props: LocalPreviewProps): JSX.Element => {\n props.setMic(true);\n const imageProps = {\n src: staticMediaSVG.toString(),\n imageFit: ImageFit.cover,\n maximizeFrame: true\n };\n\n const handleLocalVideoOnOff = (_ev: React.MouseEvent\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 {/*We appreciate your time waiting ,a customer service agent will assist you soon ........ Number of Customers waiting: 2 customers*/}\r\n\r\n \r\n \r\n \r\n نقدر لك انتظارك, \r\n
\r\n ممثل خدمة العملاء فى خدمة عملاء اخرين يرجى الانتظار ... \r\n
\r\n أمامك فى الانتظار : \r\n \r\n {this.state.waitingCount} \r\n عملاء \r\n
\r\n \r\n \r\n ممثل خدمة العملاء فى خدمة عملاء اخرين يرجى الانتظار ... \r\n
\r\n أمامك فى الانتظار : \r\n \r\n {this.state.waitingCount} \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 \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","import { connect } from 'react-redux';\nimport PublicConfigurationScreen, { PublicConfigurationScreenProps } from '../components/PublicConfiguration';\nimport { setGroup } from '../core/actions/calls';\nimport { setVideoDeviceInfo, setAudioDeviceInfo } from '../core/actions/devices';\nimport { initCallAgent, initCallClient, updateDevices } from '../core/sideEffects';\nimport { setMic } from '../core/actions/controls';\nimport { State } from '../core/reducers';\nimport { AudioDeviceInfo, VideoDeviceInfo, LocalVideoStream } from '@azure/communication-calling';\nimport { setLocalVideoStream } from '../core/actions/streams';\nimport { setMeetingID, setMeetingLink, setMeetingStartTime } from '../core/actions/common';\n\nconst mapStateToProps = (state: State, props: PublicConfigurationScreenProps) => ({\n deviceManager: state.devices.deviceManager,\n callAgent: state.calls.callAgent,\n group: state.calls.group,\n mic: state.controls.mic,\n screenWidth: props.screenWidth,\n localVideoStream: state.streams.localVideoStream,\n audioDeviceInfo: state.devices.audioDeviceInfo,\n videoDeviceInfo: state.devices.videoDeviceInfo,\n videoDeviceList: state.devices.videoDeviceList,\n audioDeviceList: state.devices.audioDeviceList,\n cameraPermission: state.devices.cameraPermission,\n microphonePermission: state.devices.microphonePermission,\n meetingID:state.common.meetingID,\n meetingLink:state.common.meetingLink,\n fullName:state.common.fullName,\n nin: state.common.nin,\n otpToken: state.common.token,\n meetingStartTime:state.common.meetingStartTime,\n mobile: state.common.mobile,\n serviceType: state.common.serviceType,\n subServiceType: state.common.subServiceType,\n}) ;\n\nconst mapDispatchToProps = (dispatch: any, props: PublicConfigurationScreenProps) => ({\n setLocalVideoStream: (localVideoStream: LocalVideoStream) => dispatch(setLocalVideoStream(localVideoStream)),\n setMic: (mic: boolean) => dispatch(setMic(mic)),\n setAudioDeviceInfo: (deviceInfo: AudioDeviceInfo) => dispatch(setAudioDeviceInfo(deviceInfo)),\n setVideoDeviceInfo: (deviceInfo: VideoDeviceInfo) => dispatch(setVideoDeviceInfo(deviceInfo)),\n setupCallClient: (unsupportedStateHandler: () => void) =>\n dispatch(initCallClient( unsupportedStateHandler)),\n setupCallAgent: (displayName: string) =>\n dispatch(initCallAgent(displayName, props.callEndedHandler)),\n setGroup: (groupId: string) => dispatch(setGroup(groupId)),\n updateDevices: () => dispatch(updateDevices()),\n setMeetingID:(meetingID:string) => dispatch(setMeetingID(meetingID)),\n setMeetingLink:(meetingLink:string) => dispatch(setMeetingLink(meetingLink)),\n setMeetingStartTime:(meetingStartTime:string) => dispatch(setMeetingStartTime(meetingStartTime))\n})\n\nconst connector: any = connect(mapStateToProps, mapDispatchToProps);\nexport default connector(PublicConfigurationScreen);\n\n","import React, { Component } from 'react'\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport appconfig from \"./../appconfig.json\";\r\nimport axios from 'axios';\r\n\r\nclass AfterWorkingHours extends Component {\r\n /*openCallMe = () =>{\r\n var url = \"http://www.google.com/\";\r\n window.location.href = url;\r\n }\r\n \r\n openContactUs = () =>{\r\n var url = \"http://www.google.com/\";\r\n window.location.href = url;\r\n }*/\r\n\r\n componentDidMount(): void {\r\n this.loadWorkingHoursMessage();\r\n }\r\n loadWorkingHoursMessage = () => {\r\n let admin_messageAR = document.getElementById(\"admin_message\") as HTMLElement;\r\n let admin_messageEN = document.getElementById(\"admin_messageEN\") as HTMLElement;\r\n let default_message = document.getElementById(\"default_message\") as HTMLElement;\r\n let url = appconfig.azure_reports_url + \"/api/workinghrs\";\r\n let lang = localStorage.getItem(\"lang\");\r\n axios.get(url).then(response => {\r\n if (response.data.OffHourMessage != \"\") {\r\n default_message.style.display = \"none\";\r\n admin_messageEN.innerHTML = response.data.OffHourMessage[0];\r\n admin_messageAR.innerHTML = response.data.OffHourMessage[1];\r\n if(lang == \"en\"){\r\n admin_messageEN.style.display = \"\";\r\n admin_messageAR.style.display = \"none\";\r\n }else{\r\n admin_messageAR.style.display = \"\";\r\n admin_messageEN.style.display = \"none\";\r\n }\r\n } else {\r\n admin_messageAR.style.display = \"none\";\r\n admin_messageEN.style.display = \"none\";\r\n default_message.style.display = \"\";\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n\r\n let isPublic = \"true\";\r\n\r\n if (isPublic == \"true\") {\r\n return (\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
\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 \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 {props.deviceManager ? (\r\n\r\n 750 ? fullScreenStyle : verticalStackStyle}\r\n style={{ textAlign: \"center\" }}\r\n horizontal={props.screenWidth > 750}\r\n horizontalAlign=\"center\"\r\n verticalAlign=\"center\"\r\n tokens={props.screenWidth > 750 ? configurationStackTokens : undefined}\r\n >\r\n\r\n \r\n\r\n\r\n \r\n\r\n \r\n ) : (\r\n
\r\n \r\n {props.deviceManager ? (\r\n\r\n
\r\n\r\n
\r\n\r\n \r\n {\r\n if (callStarted) return;\r\n callStarted = true;\r\n let callBtn = document.getElementById(\"startCallBtn\") as HTMLButtonElement;\r\n callBtn?.setAttribute(\"disabled\", \"disabled\");\r\n callBtn.style.backgroundColor = \"#CCCCCC\";\r\n\r\n const queryParams = new URLSearchParams(window.location.search)\r\n // let fullName = queryParams.get(\"fullname\");\r\n // let serviceType = queryParams.get(\"serviceType\");\r\n //let mobile = queryParams.get(\"mobile\");\r\n // let nin = queryParams.get(\"nin\");\r\n let isPublic = queryParams.get(\"isPublic\");\r\n \r\n /* if (serviceType == null) {\r\n serviceType = \"gosi-establishment\";\r\n } */\r\n //serviceType = \"gosi-public\";\r\n initiateNewCall(props.fullName, props.commercialNumber, props.serviceType, props.mobile, props.nin, isPublic);\r\n\r\n\r\n }}\r\n >\r\n {buttonText}\r\n \r\n
\r\n\r\n \r\n {/*
*/}\r\n
\r\n\r\n )\r\n } else {\r\n return <>\r\n }\r\n\r\n }\r\n}\r\n\r\nexport default AfterWorkingHours;\r\n","import React , {Component} from 'react'\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nclass UnSupportedBrowserScreen extends Component{\r\n /*openCallMe = () =>{\r\n var url = \"http://www.google.com/\";\r\n window.location.href = url;\r\n }\r\n \r\n openContactUs = () =>{\r\n var url = \"http://www.google.com/\";\r\n window.location.href = url;\r\n }*/\r\n \r\n render(){\r\n return (\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 من الاحد الى الخميس بين الساعة 08:00 صباحاً الى الساعة 06:00 مساءً\r\n \r\n\r\n \r\n الجمعة بين الساعة 02:00 مساءً الى الساعة 06:00 مساءً\r\n \r\n\r\n \r\n السبت بين الساعة 09:00 صباحاً الى الساعة 02:00 مساءً\r\n \r\n \r\n\r\n
\r\n - \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default UnSupportedBrowserScreen;","import React, { Component } from \"react\"\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport { setFullName, setMobile, setNin, setCommercialNumber, setServiceType, setToken } from \"../core/actions/common\";\r\nimport { connect } from \"react-redux\";\r\nimport { State } from '../core/reducers';\r\nimport appconfig from \"./../appconfig.json\";\r\nimport axios from 'axios';\r\nimport setLanguage, { translations } from 'translation';\r\n//import { store } from \"App\";\r\n\r\n\r\nexport interface CommonProps {\r\n serviceType: string;\r\n fullName: string;\r\n nin: string;\r\n mobile: string;\r\n commercialNumber: string;\r\n setServiceType(serviceType: string): void;\r\n setFullName(fullName: string): void;\r\n setNin(nin: string): void;\r\n setCommercialNumber(commercialNumber: string): void;\r\n setMobile(mobile: string): void;\r\n setToken(token: string): void;\r\n}\r\n\r\n\r\n\r\nclass InputForm extends Component {\r\n\r\n constructor(public props: CommonProps) {\r\n super(props);\r\n }\r\n\r\n state = {\r\n nin: '',\r\n commercialNumber: '',\r\n mobile: ''\r\n }\r\n /* state = {\r\n language:\"en\",\r\n pageDirection: \"ltr\",\r\n textAlignment: \"left\",\r\n }\r\n */\r\n absherIntegrationStatus: boolean = true;\r\n componentDidMount(): void {\r\n /* const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n let language = languageSelector.value;\r\n \r\n if(language == \"ar\"){\r\n this.setState({\r\n language:\"ar\",\r\n pageDirection: \"rlt\",\r\n textAlignment: \"right\"\r\n })\r\n }else{\r\n this.setState({\r\n language:\"en\",\r\n pageDirection: \"ltr\",\r\n textAlignment: \"left\"\r\n })\r\n } */\r\n this.checkAbsherIntegration();\r\n setLanguage(\"ar\");\r\n }\r\n checkAbsherIntegration = () => {\r\n this.absherIntegrationStatus = false;\r\n /*\r\n let url = appconfig.azure_reports_url + \"/report/absherstatus\";\r\n fetch(url).then(response => {\r\n return response.json();\r\n }).then(json => {\r\n console.log(\"absher statusresponse = \" + json.status)\r\n if (json.status == \"enabled\") {\r\n this.absherIntegrationStatus = true;\r\n } else {\r\n this.absherIntegrationStatus = false;\r\n }\r\n }).catch(error => {\r\n alert(\"Fetch absher status error > \" + error)\r\n }) \r\n*/\r\n }\r\n handleServiceChange = (serviceTy: string) => {\r\n let serviceDescriptions = document.getElementById('serviceDescription') as HTMLElement;\r\n let serviceTitle = document.getElementById('serviceTitle') as HTMLElement;\r\n serviceDescriptions.innerHTML = '';\r\n\r\n let documentDescription = document.getElementById('documentDescription') as HTMLElement;\r\n let documentTitle = document.getElementById('documentTitle') as HTMLElement;\r\n \r\n\r\n\r\n if (serviceTy == \"0\") {\r\n serviceDescriptions.innerHTML = \"\";\r\n serviceTitle.innerHTML = \"\";\r\n documentDescription.innerHTML = \"\";\r\n documentTitle.innerHTML = \"\";\r\n\r\n }\r\n\r\n if (serviceTy == \"moi-absher\") {\r\n serviceTitle.innerHTML = \"\";\r\n serviceTitle.innerHTML = \"تعريف بالخدمة\";\r\n serviceDescriptions.innerHTML = \"\";\r\n serviceDescriptions.innerHTML = \"تمكين المواطنين والمواطنات كبار السن والمرضى وذوي الإعاقة من التواصل مع المختصين في الأحوال المدنية من خلال اتصال فيديو عن بُعد لتفعيل أو تحديث حسباتهم في منصة أبشر دون الحاجة لزيارة مراكز الأحوال المدنية\";\r\n\r\n documentTitle.innerHTML = \"\";\r\n documentTitle.innerHTML = \"المتطلبات\";\r\n documentDescription.innerHTML = \"\";\r\n documentDescription.innerHTML = \"تعبئة نموذج تفعيل أو تحديث حساب أبشر - إرفاق صورة من الهوية - ارفاق ما يثبت أنه من الفئة المستهدفة\";\r\n\r\n\r\n }\r\n if (serviceTy == \"moi-data\") {\r\n serviceTitle.innerHTML = \"\";\r\n serviceTitle.innerHTML = \"تعريف بالخدمة\";\r\n serviceDescriptions.innerHTML = \"\";\r\n serviceDescriptions.innerHTML = \"تمكين جميع المستفيدين من التواصل مع المختصين في الأحوال المدنية من خلال اتصال فيديو عن بُعد لرفع الشكاوي أو الملاحظات والمقترحات من أماكن تواجدهم دون الحاجة لزيارة مراكز الأحوال المدنية\";\r\n\r\n documentTitle.innerHTML = \"\";\r\n documentTitle.innerHTML = \"المتطلبات\";\r\n documentDescription.innerHTML = \"\";\r\n documentDescription.innerHTML = \"ارفاق صورة من الخلل الظاهر في منصة أبشر أو التطبيق - توفير الوثائق بناء على حالة ومتطلب المستفيد\";\r\n\r\n }\r\n if (serviceTy == \"moi-compliant\") {\r\n serviceTitle.innerHTML = \"\";\r\n serviceTitle.innerHTML = \"تعريف بالخدمة\";\r\n serviceDescriptions.innerHTML = \"\";\r\n serviceDescriptions.innerHTML = \"تمكين جميع المستفيدين من التواصل مع المختصين في الأحوال المدنية من خلال اتصال فيديو عن بُعد لرفع الشكاوي أو الملاحظات والمقترحات من أماكن تواجدهم دون الحاجة لزيارة مراكز الأحوال المدنية\";\r\n\r\n documentTitle.innerHTML = \"\";\r\n documentTitle.innerHTML = \"\";\r\n documentDescription.innerHTML = \"\";\r\n documentDescription.innerHTML = \"\";\r\n\r\n }\r\n }\r\n openWelcomeScreen = () => {\r\n const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n let language = languageSelector.value;\r\n let entity = document.getElementById('entity') as HTMLInputElement;\r\n\r\n let nin = document.getElementById('nin') as HTMLInputElement;\r\n let name = document.getElementById('fullname') as HTMLInputElement;\r\n let mobile = document.getElementById('mobile') as HTMLInputElement;\r\n let email = document.getElementById('email') as HTMLInputElement;\r\n let ninRequiredMsg = document.getElementById('ninRequiredMsg') as HTMLElement;\r\n let nameRequiredMsg = document.getElementById('nameRequiredMsg') as HTMLElement;\r\n let mobileRequiredMsg = document.getElementById('mobileRequiredMsg') as HTMLElement;\r\n let emailRequiredMsg = document.getElementById('emailRequiredMsg') as HTMLElement;\r\n let securityVonfirmRequiredMsg = document.getElementById('securityVonfirmRequiredMsg') as HTMLElement;\r\n let entityRequiredMsg = document.getElementById('entityRequiredMsg') as HTMLElement;\r\n var numbersExp = /^[0-9]+$/;\r\n let validInputs = true;\r\n let nmaeRegex = /[a-zA-Z\\u0600-\\u06FF]+\\d*/;\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/; // Example usage \r\n const isValidEmail = emailRegex.test(email.value);\r\n if (nin.value != \"\") {\r\n if (!nin.value.match(numbersExp) || nin.value.length != 10 || !(nin.value.startsWith(\"1\") || nin.value.startsWith(\"2\"))) {\r\n //ninRequiredMsg.innerHTML = \"ية غير صحيح\";\r\n ninRequiredMsg.innerHTML = translations[language][\"validation_invalid_nin\"];\r\n ninRequiredMsg.style.display = '';\r\n validInputs = false;\r\n } else {\r\n ninRequiredMsg.style.display = 'none';\r\n }\r\n }\r\n if (nin.value === \"\") {\r\n ninRequiredMsg.style.display = '';\r\n validInputs = false;\r\n } else {\r\n ninRequiredMsg.style.display = 'none';\r\n }\r\n\r\n if(entity.value === \"0\"){\r\n entityRequiredMsg.style.display = '';\r\n validInputs = false;\r\n }else{\r\n entityRequiredMsg.style.display = 'none';\r\n }\r\n\r\n if (name.value == \"\") {\r\n nameRequiredMsg.style.display = '';\r\n validInputs = false;\r\n } else if (nmaeRegex.test(name.value)) {\r\n nameRequiredMsg.style.display = 'none';\r\n } else {\r\n nameRequiredMsg.style.display = '';\r\n nameRequiredMsg.textContent = translations[language][\"validation_name\"];\r\n validInputs = false;\r\n }\r\n\r\n if (mobile.value == \"\") {\r\n mobileRequiredMsg.style.display = '';\r\n mobile.focus();\r\n validInputs = false;\r\n } else {\r\n mobileRequiredMsg.style.display = 'none';\r\n }\r\n\r\n if (mobile.value != \"\") {\r\n if (!mobile.value.match(numbersExp) || mobile.value.length != 10) {\r\n //mobileRequiredMsg.innerHTML = \"يجب ان يكون رقم الجوال مكون من ١٠ ارقام\";\r\n mobileRequiredMsg.innerHTML = translations[language][\"validation_invalid_mobile\"];\r\n mobileRequiredMsg.style.display = '';\r\n mobile.focus();\r\n validInputs = false;\r\n } else {\r\n mobileRequiredMsg.style.display = 'none';\r\n }\r\n }\r\n \r\n if (email.value != \"\") {\r\n if (isValidEmail == false) {\r\n emailRequiredMsg.style.display = '';\r\n email.focus();\r\n validInputs = false;\r\n } else {\r\n emailRequiredMsg.style.display = 'none';\r\n }\r\n }\r\n let securityConfirm = document.getElementById('securityConfirm') as HTMLInputElement;\r\n let submitbtn = document.getElementById('submitbtn') as HTMLButtonElement;\r\n if (securityConfirm.checked == false) {\r\n submitbtn.style.backgroundColor = \"#006937\";\r\n securityVonfirmRequiredMsg.style.display = '';\r\n validInputs = false;\r\n } else {\r\n securityVonfirmRequiredMsg.style.display = 'none';\r\n }\r\n this.props.setFullName(name.value);\r\n this.props.setNin(nin.value);\r\n this.props.setServiceType(entity.value);\r\n this.props.setMobile(mobile.value);\r\n localStorage.setItem(\"emailAddress\", email.value);\r\n\r\n //alert(this.absherIntegrationStatus);\r\n if (validInputs != false) {\r\n window.location.href = \"?isPublic=true&config=true&fullname=\" + name.value + \"&nin=\" + nin.value + \"&mobile=\" + mobile.value + \"&serviceType=\" + entity.value;\r\n }\r\n ///return true;\r\n }\r\n\r\n sendOtp = () => {\r\n let nin = document.getElementById('nin') as HTMLInputElement;\r\n let name = document.getElementById('fullname') as HTMLInputElement;\r\n let mobile = document.getElementById('mobile') as HTMLInputElement;\r\n let submitbtn = document.getElementById('submitbtn') as HTMLInputElement;\r\n let submitButtonSpinner = document.getElementById('submitButtonSpinner') as HTMLInputElement;\r\n\r\n submitButtonSpinner.style.display = '';\r\n submitbtn.disabled = true;\r\n\r\n let otp_url = appconfig.azure_reports_url + \"/api/sendcustomerotp\";\r\n const body = {\r\n \"nin\": nin.value,\r\n \"mobile\": mobile.value,\r\n \"fullname\": name.value\r\n };\r\n\r\n const options = {\r\n headers: {\r\n \"Content-Type\": \"application/json\"\r\n }\r\n };\r\n\r\n axios.post(otp_url, body, options).then(response => {\r\n console.log(\"send otp response = \" + response);\r\n //alert(JSON.stringify(response));\r\n if (response.data.successMessage) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const client = urlParams.get('client');\r\n window.location.href = \"otp?isPublic=true&config=true&client=\" + client;\r\n } else {\r\n submitButtonSpinner.style.display = 'none';\r\n submitbtn.disabled = false;\r\n //alert(\"Failed to send otp\");\r\n alert('تعذر ارسال رمز التحقق، الرجاء المحاولة في وقت لاحق');\r\n }\r\n }).catch(err => {\r\n submitButtonSpinner.style.display = 'none';\r\n submitbtn.disabled = false;\r\n console.log(err);\r\n alert('تعذر ارسال رمز التحقق، الرجاء المحاولة في وقت لاحق');\r\n });\r\n }\r\n\r\n\r\n checkNinOnlyDigits = (event: any) => {\r\n\r\n const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n let language = languageSelector.value;\r\n let ninRequiredMsg = document.getElementById('ninRequiredMsg') as HTMLElement;\r\n const re = /^[0-9\\b]+$/;\r\n //const re = /^[\\u0660-\\u0669\\u06F0-\\u06F90-9]/g;\r\n if (event.target.value === '' || re.test(event.target.value)) {\r\n this.setState({ nin: event.target.value })\r\n ninRequiredMsg.style.display = 'none'\r\n } else {\r\n ninRequiredMsg.style.display = '';\r\n ninRequiredMsg.innerHTML = translations[language][\"validation_only_digits\"]; //\" غير مسموح باستخدام الحروف\";\r\n }\r\n\r\n }\r\n\r\n \r\n checkMobileOnlyDigits = (event: any) => {\r\n const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n let language = languageSelector.value;\r\n let mobileRequiredMsg = document.getElementById('mobileRequiredMsg') as HTMLElement;\r\n const re = /^[0-9\\b]+$/;\r\n if (event.target.value === '' || re.test(event.target.value)) {\r\n this.setState({ mobile: event.target.value })\r\n mobileRequiredMsg.style.display = 'none'\r\n } else {\r\n mobileRequiredMsg.style.display = '';\r\n mobileRequiredMsg.innerHTML = translations[language][\"validation_only_digits\"];//\" غير مسموح باستخدام الحروف\";\r\n }\r\n }\r\n render() {\r\n\r\n return (\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 عذراً المتصفح المستخدم غير مدعوم ، نأمل تغيير المتصفح واستخدام Google Chrome \r\n
\r\n شكراً لتواصلك معنا عبر خدمة الزيارة الافتراضية\r\n\r\n\r\n \r\n
\r\n \r\n عذراً المتصفح المستخدم غير مدعوم ، نأمل تغيير المتصفح واستخدام Google Chrome \r\n
\r\n شكراً لتواصلك معنا عبر خدمة الزيارة الافتراضية\r\n\r\n\r\n \r\n
\r\n\r\n
\r\n );\r\n }\r\n}\r\nconst mapStateToProps = (state: State, props: CommonProps) => ({\r\n serviceType: state.common.serviceType\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch: any, props: CommonProps) => ({\r\n setServiceType: (serviceType: string) => dispatch(setServiceType(serviceType)),\r\n setFullName: (fullName: string) => dispatch(setFullName(fullName)),\r\n setNin: (nin: string) => dispatch(setNin(nin)),\r\n setCommercialNumber: (commercialNumber: string) => dispatch(setCommercialNumber(commercialNumber)),\r\n setMobile: (mobile: string) => dispatch(setMobile(mobile)),\r\n setToken: (token: string) => dispatch(setToken(token))\r\n});\r\n\r\nconst connector: any = connect(mapStateToProps, mapDispatchToProps);\r\nexport default connector(InputForm);\r\n\r\n","// © Microsoft Corporation. All rights reserved.\r\nimport React, { useState, useEffect} from 'react';\r\nimport GroupCall from './containers/GroupCall';\r\nimport { createStore, applyMiddleware } from 'redux';\r\nimport { Provider } from 'react-redux';\r\nimport { reducer } from './core/reducers';\r\nimport thunk from 'redux-thunk';\r\nimport PublicConfigurationScreen from './containers/PublicConfiguration';\r\nimport { loadTheme, initializeIcons } from '@fluentui/react';\r\nimport { utils } from './Utils/Utils';\r\nimport { CallEndReason } from '@azure/communication-calling';\r\nimport AfterWorkingHours from 'components/AfterWorkingHours';\r\nimport UnSupportedBrowserScreen from 'components/UnSupportedBrowseScreen';\r\nimport InputForm from 'components/InputForm';\r\nimport {persistStore,persistReducer} from 'redux-persist';\r\nimport storage from 'redux-persist/lib/storage';\r\nimport {PersistGate} from 'redux-persist/integration/react'\r\nimport appconfig from \"./appconfig.json\";\r\n \r\n\r\n\r\n\r\nconst sdkVersion = require('../package.json').dependencies['@azure/communication-calling'];\r\nconst lastUpdated = `Last Updated ${utils.getBuildTime()} with @azure/communication-calling:${sdkVersion}`;\r\n\r\nloadTheme({});\r\ninitializeIcons();\r\n\r\n\r\nconst persistConfig = {\r\n key : 'persist-key',\r\n storage\r\n }\r\n \r\nconst persistedReducer = persistReducer(persistConfig,reducer)\r\n\r\n//const store = createStore(reducer, applyMiddleware(thunk));\r\nexport const store = createStore(persistedReducer, applyMiddleware(thunk));\r\nexport const persistedStore = persistStore(store)\r\n \r\n\r\nconst App = () => {\r\n const [page, setPage] = useState('home');\r\n const [callEndReason, setCallEndReason] = useState\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
\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
\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 \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
\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 أتعهد انا مستخدم هذه الخدمة بعدم تسجيل هذه المكالمة وأن احافظ على سرية البيانات الواردة فيها التزاماً بكافة الأحكام والقواعد الواردة في نظام مكافحة الجرائم المعلوماتية الصادر بالمرسوم الملكي رقم م/17 وتاريخ 1428/03/08, وبجميع الأنظمة ذات الصلة \r\n
\r\n \r\n الرجاء الموافقه على الإقرار \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return <>;\r\n }\r\n };\r\n\r\n if (page === 'home') {\r\n if( getGroupIdFromUrl()) {\r\n setPage('call');\r\n }\r\n }\r\n \r\n /* if (page === 'home' && isConfigPage()) {\r\n \r\n setPage('configuration');\r\n }*/\r\n //alert(page);\r\n //return {`The call has ended with this error code (Code: ${callEndReason?.code} Subcode: ${callEndReason?.subCode})`}
\r\n\r\n \r\n \r\n Learn more\r\n \r\n about why this Azure Communication Services call has ended.\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\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 تتيح هذه الخدمة إمكانية عقد زيارة افتراضية والتواصل مع موظف خدمة العملاء عبر الاتصال المرئي لتنفيذ المطلوب بكل سهولة ويسر\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
\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 \r\n
\r\n \r\n
\r\n استمرار
\r\n \r\n
\r\n );\r\n } \r\n } //render\r\n \r\n}\r\n\r\nexport default WelcomdeScreen","import React, { Component } from \"react\"\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nimport axios from 'axios';\r\nimport appconfig from \"./../appconfig.json\";\r\nimport { Provider } from 'react-redux';\r\nimport { store, persistedStore } from \"App\";\r\nimport { PersistGate } from \"redux-persist/integration/react\";\r\nimport {translations} from 'translation'; \r\n\r\n\r\n\r\nclass Rating extends Component {\r\n\r\n constructor(public props: any) {\r\n super(props);\r\n this.handleCommentChange = this.handleCommentChange.bind(this);\r\n this.handleReasonChange = this.handleReasonChange.bind(this);\r\n \r\n }\r\n\r\n common = store.getState().common;\r\n queryParams = new URLSearchParams(window.location.search);\r\n isPublic = this.queryParams.get(\"isPublic\");\r\n source = this.queryParams.get(\"source\");\r\n\r\n showUnhappyReason = () => {\r\n const reasonLabel = document.getElementById('unhappyReasonLabel');\r\n if (reasonLabel) {\r\n reasonLabel.style.display = '';\r\n }\r\n\r\n const reasonText = document.getElementById('unhappyReason');\r\n if (reasonText) {\r\n reasonText.style.display = '';\r\n }\r\n }\r\n\r\n hideUnhappyReason = () => {\r\n const reasonLabel = document.getElementById('unhappyReasonLabel');\r\n if (reasonLabel) {\r\n reasonLabel.style.display = 'none';\r\n }\r\n\r\n const reasonText = document.getElementById('unhappyReason');\r\n if (reasonText) {\r\n reasonText.style.display = 'none';\r\n }\r\n }\r\n\r\n setRating = (rateVal: string) => {\r\n\r\n //unselect all other ratings\r\n for (var i = 1; i <= 5; i++) {\r\n const divElementId = \"divRating_\" + i;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #EFEFEF';\r\n }\r\n }\r\n\r\n if (rateVal == '1' || rateVal == '2') {\r\n this.showUnhappyReason();\r\n } else {\r\n this.hideUnhappyReason();\r\n }\r\n\r\n this.setState({\r\n rating: rateVal\r\n })\r\n\r\n const divElementId = \"divRating_\" + rateVal;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #666';\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n\r\n setEmpRating = (rateVal: string) => {\r\n\r\n //unselect all other ratings\r\n for (var i = 1; i <= 5; i++) {\r\n const divElementId = \"divEmpRating_\" + i;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #EFEFEF';\r\n }\r\n }\r\n\r\n/* \r\n if (rateVal == '1' || rateVal == '2') {\r\n this.showUnhappyReason();\r\n } else {\r\n this.hideUnhappyReason();\r\n } */\r\n\r\n this.setState({\r\n empRating: rateVal\r\n })\r\n\r\n const divElementId = \"divEmpRating_\" + rateVal;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #666';\r\n }\r\n\r\n }\r\n\r\n\r\n setDigitalHumanRating = (rateVal: string) => {\r\n\r\n for (var i = 1; i <= 5; i++) {\r\n const divElementId = \"divDHRating_\" + i;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #EFEFEF';\r\n }\r\n }\r\n \r\n\r\n this.setState({\r\n digitalHumanRating: rateVal\r\n })\r\n\r\n const divElementId = \"divDHRating_\" + rateVal;\r\n var element = document.getElementById(divElementId);\r\n if (element) {\r\n element.style.border = '1px solid #666';\r\n }\r\n\r\n }\r\n\r\n\r\n state = {\r\n rating: \"0\",\r\n empRating: \"0\",\r\n digitalHumanRating:\"0\",\r\n comments: \"\",\r\n reasonForBadRating: \"\"\r\n }\r\n\r\n handleCommentChange(event: any) {\r\n this.setState({\r\n comments: event.target.value\r\n });\r\n }\r\n\r\n handleReasonChange(event: any) {\r\n this.setState({\r\n reasonForBadRating: event.target.value\r\n })\r\n }\r\n\r\n\r\n saveUserFeedback = () => {\r\n const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n let language = languageSelector.value;\r\n if (this.state.rating == \"0\") {\r\n //alert(\"رجاء تقييم الخدمة\");\r\n alert(translations[language][\"service_rating_is_required\"]);\r\n return;\r\n }\r\n\r\n if (this.state.empRating == \"0\") {\r\n //alert(\"رجاء تقييم الموظف\");\r\n alert(translations[language][\"employee_rating_is_required\"]);\r\n return;\r\n }\r\n\r\n \r\n //alert(\"digitalHumanRating = \"+this.state.digitalHumanRating);\r\n\r\n if (this.source == \"DigitalHuman\" && this.state.digitalHumanRating == \"0\") {\r\n //alert(\"رجاء تقييم الانسان الرقمى\");\r\n alert(translations[language][\"digital_human_rating_is_required\"]);\r\n return;\r\n }\r\n if (this.state.rating == \"1\" || this.state.rating == \"2\") {\r\n if (this.state.reasonForBadRating == \"\") {\r\n //alert(\"الرجاء ذكر عدم رضاك عن الخدمة\");\r\n alert(translations[language][\"unsatisfaction_reason_is_required\"]);\r\n return;\r\n }\r\n }\r\n const body = {\r\n \"ratings\": this.state.empRating,\r\n \"serviceRatings\": this.state.rating,\r\n \"DigitalHumanRating\":this.state.digitalHumanRating,\r\n \"comments\": this.state.comments,\r\n \"reasonForBadRating\": this.state.reasonForBadRating\r\n };\r\n\r\n /* const options = {\r\n headers: {\r\n 'api_token': this.common.token,\r\n 'Access-Control-Allow-Origin': \"*\"\r\n }\r\n }; */\r\n const config = {\r\n headers: {\r\n // Authorization: `Bearer ${this.common.token}`,\r\n api_token: this.common.token\r\n }\r\n };\r\n\r\n //alert(\"saveUserFeedback token >>\"+this.common.token);\r\n console.log(\"save user feedback body > \" + body);\r\n console.log(\"save user feedback config > \" + config);\r\n\r\n\r\n const meetingID = this.queryParams.get(\"meetingID\");\r\n\r\n const url = appconfig.azure_reports_url + '/api/customer-meeting/feedback/' + meetingID;\r\n console.log(\"save user feedback url > \" + url);\r\n axios.post(url, body, config).then(response => {\r\n console.log(\"user feedback saved with status = \" + response.status);\r\n let afterRatingUrl = window.location.href.replace(\"rating\", \"afterRating\")\r\n window.location.href = afterRatingUrl + \"&isPublic=\" + this.isPublic;\r\n });\r\n\r\n }\r\n\r\n\r\n render() {\r\n let className = \"\";\r\n if (this.isPublic == \"true\") {\r\n className = \"main-container\";\r\n } else {\r\n className = \"private-container\";\r\n }\r\n \r\n return (\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
\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 \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\nconst RatingWrapper = () => {\r\n return (\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\r\n\r\n
\r\n\r\n \r\n
\r\n\r\n\r\n this.setRating('5')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى تماما\r\n this.setRating('4')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى\r\n this.setRating('3')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n محايد\r\n this.setRating('2')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n غير راضى\r\n this.setRating('1')}>\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 {this.source == \"DigitalHuman\" &&\r\n this.setEmpRating('5')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى تماما\r\n this.setEmpRating('4')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى\r\n this.setEmpRating('3')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n محايد\r\n this.setEmpRating('2')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n غير راضى\r\n this.setEmpRating('1')}>\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\r\n \r\n
\r\n this.setDigitalHumanRating('5')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى تماما\r\n this.setDigitalHumanRating('4')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n راضى\r\n this.setDigitalHumanRating('3')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n محايد\r\n this.setDigitalHumanRating('2')}>\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n غير راضى\r\n this.setDigitalHumanRating('1')}>\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
\r\n ملاحظات واقتراحات
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ' + message + '
';\r\n this.messagesContainer.innerHTML = this.messages;\r\n } \r\n \r\n \r\n renderSentMessage = async (message:string) => { \r\n this.messages += '' + message + '
';\r\n this.messagesContainer.innerHTML = this.messages;\r\n }\r\n\r\n handleSendMessage = async () => { \r\n let message = this.messagebox?.value;\r\n\r\n\t\tlet sendMessageRequest = { content: message };\r\n\t\tlet sendMessageOptions = { senderDisplayName : 'Jack' };\r\n\t\tlet sendChatMessageResult = await this.chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);\r\n\t\tlet messageId = sendChatMessageResult.id;\r\n\r\n\t\tthis.messagebox.value = '';\r\n\t\tconsole.log(`Message sent!, message id:${messageId}`);\r\n }\r\n\r\n\r\n \r\n\r\n \r\n handleHangeUp = async () => { \r\n await this.call.hangUp();\r\n\r\n\t\t// toggle button states\r\n\t\tthis.hangUpButton.disabled = true;\r\n\t\tthis.callButton.disabled = false;\r\n\t\tthis.callStateElement.innerText = '-';\r\n\r\n\t\t// toggle chat states\r\n\t\tthis.chatBox.style.display = \"none\";\r\n\t\tthis.messages = \"\";\r\n }\r\n \r\n render(){\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\nexport default Chat;","import React , { Component } from \"react\"\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\n \r\nclass AfterRating extends Component{\r\n queryParams = new URLSearchParams(window.location.search);\r\n isPublic = this.queryParams.get(\"isPublic\");\r\n render(){\r\n let className = \"\";\r\n if(this.isPublic == \"true\"){\r\n className = \"main-container\";\r\n }else{\r\n className = \"private-container\";\r\n }\r\n return(\r\n Azure Communication Services
\r\nCalling and Chat Quickstart
\r\n \r\n \r\nCall state -
\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\nexport default AfterRating;\r\n","import React , { Component } from \"react\"\r\nimport 'bootstrap/dist/css/bootstrap.css';\r\nclass WaitinfSessionExpired extends Component{\r\n \r\n /*openHome = () => {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n let isPublic = urlParams.get(\"isPublic\");\r\n window.location.href = \"/?isPublic=\"+isPublic; \r\n }*/\r\n render(){\r\n return(\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\nexport default WaitinfSessionExpired;\r\n","import React, { Component } from \"react\";\r\nimport appconfig from \"./../appconfig.json\";\r\nimport axios from 'axios';\r\n\r\n\r\nimport { Provider } from 'react-redux';\r\nimport { store, persistedStore } from \"App\";\r\nimport { PersistGate } from \"redux-persist/integration/react\";\r\n\r\nimport { setToken } from \"core/actions/common\";\r\n\r\nclass OTPInput extends Component {\r\n\r\n common = store.getState().common;\r\n\r\n nin = this.common.nin;\r\n name = this.common.fullName;\r\n mobile = this.common.mobile;\r\n serviceType = this.common.serviceType;\r\n\r\n\r\n verifyOtp = () => {\r\n let otp = document.getElementById('otp') as HTMLInputElement;\r\n if(otp.value == ''){\r\n alert(\"برجاء ادخال رمز التحقق\")\r\n return false;\r\n }\r\n let otp_url = appconfig.azure_reports_url + \"/api/verifyotp\";\r\n const body = {\r\n \"nin\": this.nin,\r\n \"otp\": otp.value\r\n };\r\n const options = {\r\n headers: {\r\n \"Content-Type\" : \"application/json\"\r\n }\r\n };\r\n axios.post(otp_url, body , options).then(response => {\r\n console.log(\"Verify otp response = \" + response);\r\n let message = response.data.Message;\r\n // alert(JSON.stringify(response));\r\n if (message == false) {\r\n alert(\"رمز التحقق غير صحيح\");\r\n } else {\r\n store.dispatch(setToken(response.data.token));\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const client = urlParams.get('client');\r\n window.location.href = \"/?isPublic=true&config=true&fullname=\" + this.name + \"&nin=\" + this.nin + \"&mobile=\" + this.mobile + \"&serviceType=\" + this.serviceType+ \"&client=\" + client\r\n }\r\n\r\n\r\n }).catch(err => {\r\n console.log(err);\r\n // alert(err);\r\n alert(\"رمز التحقق غير صحيح\"); \r\n });\r\n return true;\r\n }\r\n\r\n\r\n resendOtp = () => {\r\n \r\n let submitbtn = document.getElementById('resendOtp') as HTMLInputElement;\r\n let submitButtonSpinner = document.getElementById('submitButtonSpinner') as HTMLInputElement;\r\n \r\n submitButtonSpinner.style.display = '';\r\n submitbtn.disabled = true;\r\n \r\n let otp_url = appconfig.azure_url + \"/api/sendcustomerotp\";\r\n const body = {\r\n \"nin\": this.nin,\r\n \"mobile\": this.mobile,\r\n \"fullname\": this.name\r\n };\r\n\r\n const options = {\r\n headers: {\r\n \"Content-Type\" : \"application/json\"\r\n }\r\n };\r\n\r\n axios.post(otp_url, body , options).then(response => {\r\n console.log(\"send otp response = \" + response);\r\n //alert(JSON.stringify(response));\r\n if (response.data.successMessage) {\r\n window.location.href = \"otp?isPublic=true&config=true\";\r\n } else {\r\n submitButtonSpinner.style.display = 'none';\r\n submitbtn.disabled = false;\r\n //alert(\"Failed to send otp\");\r\n alert('تعذر ارسال رمز التحقق، الرجاء المحاولة في وقت لاحق');\r\n }\r\n }).catch(err => {\r\n submitButtonSpinner.style.display = 'none';\r\n submitbtn.disabled = false;\r\n console.log(err);\r\n alert('تعذر ارسال رمز التحقق، الرجاء المحاولة في وقت لاحق');\r\n });\r\n }\r\n\r\n render() {\r\n\r\n return (\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نقدر وقتك، و نفيدك بأن جميع الموظفين مشغولون في خدمة عملاء آخرين. نأمل منك المحاولة في وقت لاحق\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\nconst OTPWrapper = () => {\r\n return (\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 إبدأ من هنا
\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 {this.mobile?.substring(this.mobile.length-4,this.mobile.length)+\"******\"} \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 \r\n\r\n\r\nconst RatingWrapper = () => {\r\n return (\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 \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 \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 document.getElementById('root'),() =>{\r\n\r\n /* const languageSelector = document.getElementById(\"languageSelector\") as HTMLInputElement;\r\n const language = localStorage.getItem(\"lang\") || \"en\"; \r\n languageSelector.value = language; */\r\n // const urlParams = new URLSearchParams(window.location.search);\r\n//const client = urlParams.get('client');\r\n \r\n //const logoBox = document.getElementById(\"logoBox\") as HTMLDivElement;\r\n //logoBox.className = \"logoBoxSABusiness\";\r\n //logoBox.className = \"logoBoxSABusiness\";\r\n //const internalLogo = document.getElementById(\"internalLogo\") as HTMLDivElement;\r\n /* if(client == \"masdr\"){\r\n logoBox.className = \"logoBoxMasdr\";\r\n }else{\r\n logoBox.className = \"logoBox\";\r\n } */\r\n // internalLogo.className = \"internalLogo\"; \r\n }\r\n);\r\n ","module.exports = __webpack_public_path__ + \"static/media/staticmedia.3545b0ef.svg\";"],"sourceRoot":""}\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 }/>\r\n }/>\r\n }/>\r\n \r\n \r\n \r\n
\r\n openUrl('https://masdr.sa/home')}> جميع الحقوق محفوظة © 2023Powered by
\r\n \r\n