{title}
\n \r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n}","import React, { Fragment, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport * as session from './../scripts/session';\nimport { userIsAdmin } from './../scripts/helper';\nimport { training_url } from \"./../constants/urls\";\nimport { userRolePopUp } from './ellipsisHeaderTooltip';\nimport * as settings from '../scripts/settings';\nimport { checkBillingAccount } from '../utility/utility';\nimport MfaTooltip from './mfa/tooltip';\n\nconst isWholesale = () => { return session.IsWholesale() };\n\nconst profileLinkPath = () => {\n return userIsAdmin() ? '/admin/profile' : '/profile';\n}\n\nconst supportLink = () => {\n if (!isWholesale())\n return (\n \r\n \r\n
\r\n \r\n
\r\n \r\n Mandatory Multi-factor authentication (MFA) security protocols for portal access are coming soon! We set it to Optional for a while so you can enjoy a sneak preview. Check out the guides in Momentum University to learn more.\r\n \r\n
\r\n \r\n \r\n Mandatory Multi-factor authentication (MFA) security protocols for portal access are coming soon! We set it to Optional for a while so you can enjoy a sneak preview. Check out the guides in Momentum University to learn more.\r\n \r\n
\n
\n )\n}\n\nexport default dropDownMenu;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport logo from './../../images/m_logo.svg';\nimport GlobalSearch from './../../components/global_search';\nimport * as actions from './../../store/actions';\nimport { store } from '../../store/store';\nimport dropDownMenu from './../../components/dropdown_menu';\nimport { connect } from 'react-redux';\n\nclass NavBar extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n }\n }\n\n componentWillReceiveProps(props) {\n if (props.loading !== this.state.loading)\n this.setState({ loading: props.loading });\n }\n\n toggleSidebar = () => {\n let action = { type: actions.TOGGLE_SIDEBAR };\n store.dispatch(action);\n }\n\n render() {\n if (this.state.loading) {\n return (\n - \n {profileDropDownLinks()}\n
- Log Out \n
\n
\n )\n }\n else {\n let finalLogo = !sessionStorage.customLogoSmall || sessionStorage.customLogoSmall == '' ? logo : sessionStorage.customLogoSmall;\n return (\n \n \n \n \n
\n {dropDownMenu()}\n \n
\n )\n }\n }\n}\n\nconst mapStateToProps = (state) => {\n let isLoading = true;\n if (state.reducer.themes_loaded && state.reducer.themes_loaded === true)\n isLoading = false;\n return {\n loading: isLoading\n }\n}\n\nexport default connect(mapStateToProps)(NavBar);","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Tooltip } from '@progress/kendo-popups-react-wrapper';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as settings from './../../scripts/session';\r\nimport * as config from './../../requests/config'\r\n\r\nclass Voicemail extends Component {\r\n\r\n constructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\n 
'\n \n \n \n
\n {dropDownMenu()}\n {loading_error}
);\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 validateEmail=(setting)=>{\r\n if(!setting.email_is_valid)\r\n return \r\n \r\n Voice Messaging\r\n
\r\n \r\n
\r\n \r\n Send All Calls to Voicemail\r\n
\r\n \r\n \r\n Send Busy Calls to Voicemail\r\n
\r\n \r\n \r\n Send Unanswered Calls to Voicemail\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n {this.getForwardOption()}\r\n
\r\n \r\n
\r\n \r\n Notify me by Email when new messages arrive\r\n
\r\n \r\n \r\n {this.props.onHandleChangeEmail(model.notify_me_email_when_new_messages_arrive,e)}}\r\n />\r\n {this.validateEmails(model.notify_me_email_when_new_messages_arrive)}\r\n
\r\n \r\n \r\n Email a carbon copy of the message\r\n
\r\n \r\n \r\n {this.props.onHandleChangeEmail(model.email_carbon_copy_message,e)}}/>\r\n {this.validateEmails(model.email_carbon_copy_message)}\r\n
\r\n \r\n \r\n Transfer on '0' to Phone Number\r\n
\r\n \r\n \r\n {this.props.onHandleChangePhone(model.transfer_on_0_to_phone_number,e)}}/>\r\n
\r\n '{setting.email}' Not a valid email
\r\n if(!EmailValidator.validate(setting.email))\r\n return '{setting.email}' Not a valid email
\r\n }\r\n validateEmails=(setting)=>{\r\n if(!setting.email_is_valid){\r\n if(setting.email){\r\n let emailsArray = setting.email.split(',');\r\n for(let cnt = 0; cnt < emailsArray.length; cnt ++){\r\n if(!EmailValidator.validate(emailsArray[cnt].trim()))\r\n return '{emailsArray[cnt].trim()}' Not a valid email
\r\n }\r\n }\r\n else{\r\n return Not a valid email
\r\n }\r\n \r\n }\r\n }\r\n getForwardOption(){\r\n //console.log(this.props)\r\n let model = this.props.model;\r\n switch(model.forward_to_email.processing){\r\n case \"0\":\r\n return (\r\n \r\n
\r\n );\r\n case \"1\":\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {this.validateEmails(model.forward_to_email)}\r\n
\r\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 VoicemailSettingsModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport VoicemailSettingsModal from './modals/voicemailSettingsModal';\r\nimport * as EmailValidator from 'email-validator';\r\nimport { fetchData, post } from './../requests/api_calls';\r\nimport format from 'string-format';\r\nimport * as config from './../requests/config';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\n\r\nclass VoicemailSettingsButton extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeForward = this.changeForward.bind(this);\r\n\r\n this.state = { \r\n //settings_available: false,\r\n showModal: false,\r\n loading: true, \r\n loading_error: \"\",\r\n saving_loading: false,\r\n saving_show_success: false,\r\n saving_error_message: \"\",\r\n voice_messaging: {\r\n selected: false,\r\n api: \"VoiceMessage\",\r\n },\r\n send_all_calls_to_vm: {\r\n selected: false,\r\n api: \"SendAllCallsToVoicemail\"\r\n },\r\n send_busy_calls_to_vm: {\r\n selected: false,\r\n api: \"SendBusyCallsToVoicemail\"\r\n \r\n },\r\n send_unanswered_calls_to_vm: {\r\n forward_value: null,\r\n selected: false,\r\n api: \"SendUnansweredCallstoVoicemail\",\r\n email: \"\",\r\n waiting_indicator: false\r\n },\r\n forward_to_email: {\r\n api: \"ForwardToEmail\",\r\n processing: \"\", //multiple or single\r\n email: \"\",\r\n email_is_valid:true,\r\n waiting_indicator: false\r\n },\r\n notify_me_email_when_new_messages_arrive: {\r\n selected: false,\r\n api: \"NotifyMebyEmailwhennewmessagesarrive\",\r\n email: \"\",\r\n email_is_valid:true\r\n },\r\n email_carbon_copy_message: {\r\n selected: false,\r\n api: \"EmailaCarbonCopyoftheMessage\",\r\n email: \"\",\r\n email_is_valid:true\r\n },\r\n transfer_on_0_to_phone_number: {\r\n selected: false,\r\n api: \"Transfer_0_to_Phone_Number\",\r\n phone_number: \"\"\r\n } ,\r\n PostData: {\r\n ServiceNumber: this.props.ServiceNumber,\r\n PBXUserID: this.props.PBXUserID,\r\n //Voice Messaging\r\n isActive:false,\r\n //Send All Calls to Voicemail\r\n alwaysRedirectToVoiceMail:false,\r\n //Send Busy Calls to Voicemail\r\n busyRedirectToVoiceMail:false,\r\n //Send Unanswered Calls to Voicemail\r\n noAnswerRedirectToVoiceMail:false,\r\n //Forward to multiple email / Forward to one email\r\n processing:false,\r\n //Forward email\r\n voiceMessageDeliveryEmailAddress:\"\",\r\n //Phone Message Waiting Indicator\r\n usePhoneMessageWaitingIndicator:false,\r\n //Notify me by Email when new message arrive\r\n sendVoiceMessageNotifyEmail:false,\r\n voiceMessageNotifyEmailAddress:\"\",\r\n //Carbon copy\r\n sendCarbonCopyVoiceMessage:false,\r\n voiceMessageCarbonCopyEmailAddress:\"\",\r\n //Transfer on '0' to Phone Number\r\n transferOnZeroToPhoneNumber:false,\r\n transferPhoneNumber:\"\",\r\n outOfPrimaryZoneRedirectToVoiceMail:false\r\n }\r\n };\r\n }\r\n\r\n changeOnOffValue =(setting, event)=>{\r\n let checked = event.target.checked;\r\n setting.selected = checked;\r\n this.updateSetting(setting);\r\n }\r\n\r\n changeEmailValue =(setting, event)=>{\r\n let email = event.target.value.trim();\r\n setting.email = email;\r\n setting.email_is_valid = EmailValidator.validate(email);\r\n if(setting.api === this.state.send_unanswered_calls_to_vm.api){\r\n if(this.state.send_unanswered_calls_to_vm.processing === \"0\"){\r\n setting.email_is_valid = EmailValidator.validate(email);\r\n let emailsArray = setting.email.split(',');\r\n for(let cnt = 0; cnt < emailsArray.length; cnt ++){\r\n if(!EmailValidator.validate(emailsArray[cnt]))\r\n setting.email_is_valid = false;\r\n }\r\n }\r\n }\r\n this.updateSetting(setting);\r\n }\r\n\r\n changeWaitingIndicator =(setting, event)=>{\r\n let checked = event.target.checked;\r\n setting.waiting_indicator = checked;\r\n this.updateSetting(setting);\r\n }\r\n\r\n changePhoneNumber =(setting, event)=>{\r\n let value = event.target.value.trim();\r\n setting.phone_number = value;\r\n this.updateSetting(setting);\r\n }\r\n\r\n updateSetting=(setting)=>{\r\n switch(setting.api){\r\n case this.state.voice_messaging.api:\r\n this.setState({...{voice_messaging: setting}})\r\n break;\r\n case this.state.send_all_calls_to_vm.api:\r\n this.setState({...{send_all_calls_to_vm: setting}})\r\n break;\r\n case this.state.send_busy_calls_to_vm.api:\r\n this.setState({...{send_busy_calls_to_vm: setting}})\r\n break;\r\n case this.state.send_unanswered_calls_to_vm.api:\r\n this.setState({...{send_unanswered_calls_to_vm: setting}})\r\n break;\r\n case this.state.notify_me_email_when_new_messages_arrive.api:\r\n this.setState({...{notify_me_email_when_new_messages_arrive: setting}})\r\n break;\r\n case this.state.email_carbon_copy_message.api:\r\n this.setState({...{email_carbon_copy_message: setting}})\r\n break;\r\n case this.state.transfer_on_0_to_phone_number.api:\r\n this.setState({...{transfer_on_0_to_phone_number: setting}})\r\n break;\r\n case this.state.forward_to_email.api:\r\n this.setState({...{forward_to_email: setting}})\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n handleClose() {\r\n this.setState({...this.state, showModal: false });\r\n }\r\n\r\n handleSave=()=> {\r\n let state = this.state;\r\n state.saving_loading = true;\r\n state.saving_show_success = false;\r\n \r\n\r\n let PostData = state.PostData;\r\n PostData.AccountNumber = this.props.AccountNumber;\r\n PostData.DirectoryNumber = this.props.DirectoryNumber;\r\n PostData.isActive = this.state.voice_messaging.selected;\r\n PostData.alwaysRedirectToVoiceMail = this.state.send_all_calls_to_vm.selected;\r\n PostData.busyRedirectToVoiceMail = this.state.send_busy_calls_to_vm.selected;\r\n PostData.noAnswerRedirectToVoiceMail = this.state.send_unanswered_calls_to_vm.selected;\r\n \r\n if(this.state.forward_to_email.processing === \"0\"){\r\n PostData.processing = \"0\";\r\n }else if(this.state.forward_to_email.processing === \"1\"){\r\n PostData.processing = \"1\";\r\n }\r\n\r\n PostData.voiceMessageDeliveryEmailAddress = this.state.forward_to_email.email;\r\n PostData.usePhoneMessageWaitingIndicator = this.state.forward_to_email.waiting_indicator;\r\n\r\n PostData.sendVoiceMessageNotifyEmail = this.state.notify_me_email_when_new_messages_arrive.selected;\r\n PostData.voiceMessageNotifyEmailAddress = this.state.notify_me_email_when_new_messages_arrive.email;\r\n\r\n PostData.sendCarbonCopyVoiceMessage = this.state.email_carbon_copy_message.selected;\r\n PostData.voiceMessageCarbonCopyEmailAddress = this.state.email_carbon_copy_message.email;\r\n\r\n PostData.transferOnZeroToPhoneNumber = this.state.transfer_on_0_to_phone_number.selected;\r\n PostData.transferPhoneNumber = this.state.transfer_on_0_to_phone_number.phone_number;\r\n this.setState(state);\r\n\r\n let body = JSON.stringify(PostData);\r\n\t\tlet headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n post(\"usr/VMSettings\",\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state};\r\n\t\t\tif(response.ok){\r\n state.saving_show_success = true;\r\n\t\t\t\tstate.saving_loading = false;\r\n state.saving_error_message = \"\";\r\n this.props.OnVMSettingChange(this.state.PostData);\r\n\t\t\t}\r\n\t\t\telse{\r\n\t\t\t\tstate.saving_loading = false;\r\n\t\t\t\tstate.saving_error_message = \"Failed Save\";\r\n }\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state};\r\n\t\t\tstate.saving_loading = false;\r\n state.saving_error_message = \"Failed Save\";\r\n this.setState(state);\r\n\t\t});\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true,saving_show_success:false, loading: true, saving_error_message:\"\", });\r\n let apiPath = format('usr/VMSettings?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}&ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',this.props);\r\n fetchData(apiPath).then((data) => {\r\n let newState = this.getNewState(data);\t\r\n this.setState(newState);\r\n }).catch((message)=>{\r\n let state = {...this.state};\r\n state.loading = false;\r\n state.loading_error = message.toString();\r\n this.setState(state);\r\n });\r\n }\r\n\r\n changeForward(event){\r\n let setting = this.state.forward_to_email;\r\n setting.processing = event.target.value;\r\n this.updateSetting(setting);\r\n }\r\n\r\n\tcomponentDidMount() {\t\r\n let apiPath = format('usr/VMSettings?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}&ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',this.props);\r\n fetchData(apiPath).then((data) => {\r\n let newState = this.getNewState(data);\t\r\n this.setState(newState);\r\n }).catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state};\r\n state.loading = false;\r\n state.loading_error = message\r\n this.setState(state);\r\n });\r\n\t}\r\n\r\n getNewState = (data) => {\r\n let state = {...this.state};\r\n state.loading = false;\r\n if (data !== null) {\r\n state.PostData = data;\r\n state.loading_error = \"\";\r\n state.voice_messaging.selected = data.isActive;\r\n state.send_all_calls_to_vm.selected = data.alwaysRedirectToVoiceMail;\r\n state.send_busy_calls_to_vm.selected = data.busyRedirectToVoiceMail;\r\n state.send_unanswered_calls_to_vm.selected = data.noAnswerRedirectToVoiceMail;\r\n\r\n if(data.processing === 0)\r\n state.forward_to_email.processing = \"0\";\r\n else if(data.processing === 1)\r\n state.forward_to_email.processing = \"1\";\r\n \r\n state.forward_to_email.email = data.voiceMessageDeliveryEmailAddress;\r\n state.forward_to_email.waiting_indicator = data.usePhoneMessageWaitingIndicator;\r\n state.forward_to_email.email_is_valid = true;\r\n\r\n data.voiceMessageNotifyEmailAddress = data.voiceMessageNotifyEmailAddress?data.voiceMessageNotifyEmailAddress: \"\";\r\n state.notify_me_email_when_new_messages_arrive.selected = data.sendVoiceMessageNotifyEmail;\r\n state.notify_me_email_when_new_messages_arrive.email = data.voiceMessageNotifyEmailAddress;\r\n state.notify_me_email_when_new_messages_arrive.email_is_valid = true;\r\n\r\n \r\n data.voiceMessageCarbonCopyEmailAddress = data.voiceMessageCarbonCopyEmailAddress?data.voiceMessageCarbonCopyEmailAddress: \"\";\r\n state.email_carbon_copy_message.selected = data.sendCarbonCopyVoiceMessage;\r\n state.email_carbon_copy_message.email = data.voiceMessageCarbonCopyEmailAddress;\r\n state.email_carbon_copy_message.email_is_valid = true;\r\n\r\n data.transferPhoneNumber = data.transferPhoneNumber?data.transferPhoneNumber: \"\";\r\n state.transfer_on_0_to_phone_number.selected = data.transferOnZeroToPhoneNumber;\r\n state.transfer_on_0_to_phone_number.phone_number = data.transferPhoneNumber;\r\n //state.settings_available = true;\r\n }\r\n else{\r\n //state.settings_available = false;\r\n }\r\n return state;\r\n \r\n }\r\n render() {\r\n // if(!this.state.settings_available)\r\n // return ();\r\n\r\n return (\r\n \r\n Voicemail Settings\r\n \r\n \r\n {this.props.onHandleChangeEmail(model.forward_to_email,e)}}\r\n className=\"form-control\" placeholder=\"add an email address\" />\r\n {this.validateEmails(model.forward_to_email)}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.getSaveButton()}\r\n \r\n
\r\n {this.getSaveMessage()}\r\n Success!
\r\n )\r\n }\r\n else if(this.state.saving_loading){\r\n return ({this.state.saving_error_message}
)\r\n }\r\n }\r\n};\r\n\r\n\r\n\r\nexport default VoicemailSettingsButton;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\n\r\nconst busy_greetings = \"busy_greetings\";\r\nconst busy_greetings_personal_greetings = \"busy_personal_greetings\";\r\nconst no_answer_greeting = \"no_answer_greetings\";\r\nconst no_answer_greetings_personal_greeting = \"no_answer_greeting_personal_greetings\";\r\nconst alternate_no_answer_greetings_1_name = \"alternate_no_answer_greetings_1_name\"\r\nconst alternate_no_answer_greetings_2_name = \"alternate_no_answer_greetings_2_name\"\r\nconst alternate_no_answer_greetings_3_name = \"alternate_no_answer_greetings_3_name\"\r\nconst alternate_no_answer_greetings_1_audio = \"alternate_no_answer_greetings_1_audio\"\r\nconst alternate_no_answer_greetings_2_audio = \"alternate_no_answer_greetings_2_audio\"\r\nconst alternate_no_answer_greetings_3_audio = \"alternate_no_answer_greetings_3_audio\"\r\nconst alternate_no_answer_greetings_1_selected = \"alternate_no_answer_greetings_1_selected\"\r\nconst alternate_no_answer_greetings_2_selected = \"alternate_no_answer_greetings_2_selected\"\r\nconst alternate_no_answer_greetings_3_selected = \"alternate_no_answer_greetings_3_selected\"\r\nconst number_of_rings_before_greeting = \"number_of_rings_before_greeting\"\r\nconst auto_login_to_voice_portal_when_calling_from_my_phone = \"auto_login_to_voice_portal_when_calling_from_my_phone\"\r\n\r\nclass ManageGreetingsModal extends Component {\r\n \r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n this.state = { showModal: false };\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n }\r\n \r\n changeAlternateName=(alternate_obj, name)=>{\r\n alternate_obj.name = name;\r\n }\r\n\r\n changeAlternateAudio=(alternate_obj, audio)=>{\r\n alternate_obj.audio_selected = audio;\r\n }\r\n\r\n // changeAlternateSelected=(alternate_obj, selected)=>{\r\n // alternate_obj.audio_selected = selected;\r\n // } \r\n \r\n handleChanges=(type,event)=>{\r\n let newModel = {...this.props.Model}\r\n switch(type){\r\n case busy_greetings:\r\n newModel.busy_greeting.type = event.target.value.trim();\r\n break;\r\n case busy_greetings_personal_greetings:\r\n newModel.busy_greeting.audio_selected = event.target.value.trim();\r\n break;\r\n case no_answer_greeting:\r\n newModel.no_answer_greeting.type = event.target.value.trim();\r\n break;\r\n case no_answer_greetings_personal_greeting:\r\n newModel.no_answer_greeting.audio_selected = event.target.value.trim();\r\n break;\r\n case alternate_no_answer_greetings_1_name:\r\n this.changeAlternateName(newModel.no_answer_greeting.alternate_1, event.target.value.trim())\r\n break;\r\n case alternate_no_answer_greetings_2_name:\r\n this.changeAlternateName(newModel.no_answer_greeting.alternate_2, event.target.value.trim())\r\n break;\r\n case alternate_no_answer_greetings_3_name:\r\n this.changeAlternateName(newModel.no_answer_greeting.alternate_3, event.target.value.trim())\r\n break;\r\n case alternate_no_answer_greetings_1_audio:\r\n this.changeAlternateAudio(newModel.no_answer_greeting.alternate_1, event.target.value.trim())\r\n break;\r\n case alternate_no_answer_greetings_2_audio:\r\n this.changeAlternateAudio(newModel.no_answer_greeting.alternate_2, event.target.value.trim())\r\n break;\r\n case alternate_no_answer_greetings_3_audio:\r\n this.changeAlternateAudio(newModel.no_answer_greeting.alternate_3, event.target.value.trim())\r\n break;\r\n // case alternate_no_answer_greetings_1_selected:\r\n // this.changeAlternateSelected(state.no_answer_greeting.alternate_1, true)\r\n // this.changeAlternateSelected(state.no_answer_greeting.alternate_2, false)\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_3, false)\r\n // break;\r\n // case alternate_no_answer_greetings_2_selected:\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_2, true)\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_1, false)\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_3, false)\r\n // break;\r\n // case alternate_no_answer_greetings_3_selected:\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_3, true)\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_1, false)\r\n // this.changeAlternateSelected(newModel.alternate_no_answer_greetings_2, false)\r\n // break;\r\n case number_of_rings_before_greeting:\r\n newModel.number_of_rings_before_greeting = event.target.value.trim();\r\n break;\r\n case auto_login_to_voice_portal_when_calling_from_my_phone:\r\n newModel.auto_login = event.target.checked;\r\n break;\r\n\r\n }\r\n this.props.onHandleChangeModel(newModel);\r\n }\r\n\r\n render() {\r\n let model = this.props.Model;\r\n let loading = model.loading;\r\n if(loading){\r\n return ( {loading_error}
);\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n );\r\n }\r\n\r\n getBusyPersonalGreeting=()=>{\r\n let model = this.props.Model;\r\n if(model.busy_greeting.type !== \"1\")\r\n return \"\";\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {this.getBusyPersonalGreeting()}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {this.noAnswerUnavailable()}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { this.handleChanges(no_answer_greeting, e)}} />\r\n
\r\n \r\n \r\n { this.handleChanges(alternate_no_answer_greetings_1_name, e)}}\r\n />\r\n {this.getTexboxRequiredError(model.no_answer_greeting.type === \"2\", model.no_answer_greeting.alternate_1.name)}\r\n \r\n \r\n {this.getDropdownRequiredError(model.no_answer_greeting.type === \"2\", model.no_answer_greeting.alternate_1.audio_selected )}\r\n
\r\n \r\n
\r\n \r\n { this.handleChanges(no_answer_greeting, e)}}/>\r\n
\r\n \r\n \r\n { this.handleChanges(alternate_no_answer_greetings_2_name, e)}}/>\r\n {this.getTexboxRequiredError(model.no_answer_greeting.type == \"3\", model.no_answer_greeting.alternate_2.name)}\r\n \r\n \r\n {this.getDropdownRequiredError(model.no_answer_greeting.type === \"3\", model.no_answer_greeting.alternate_2.audio_selected )}\r\n
\r\n \r\n
\r\n \r\n \" name=\"radio\" type=\"radio\" value=\"4\" \r\n disabled={!model.audio_files_selection_enable}\r\n checked={model.no_answer_greeting.type === \"4\"} \r\n onChange={(e)=>{ this.handleChanges(no_answer_greeting, e)}}/>\r\n
\r\n \r\n \r\n { this.handleChanges(alternate_no_answer_greetings_3_name, e)}}/>\r\n {this.getTexboxRequiredError(model.no_answer_greeting.type === \"4\", model.no_answer_greeting.alternate_3.name)}\r\n \r\n \r\n {this.getDropdownRequiredError(model.no_answer_greeting.type === \"4\", model.no_answer_greeting.alternate_3.audio_selected )}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Auto-login to Voice Portal when calling from my phone\r\n
\r\n \r\n \r\n {this.getDropdownRequiredError(model.busy_greeting.type === \"1\", model.busy_greeting.audio_selected )}\r\n
)\r\n }\r\n\r\n noAnswerUnavailable=()=>{\r\n let model = this.props.Model;\r\n\r\n if(model.no_answer_greeting.type !== \"1\")\r\n return \"\";\r\n\r\n return (\r\n \r\n {this.getDropdownRequiredError(model.no_answer_greeting.type === \"1\", model.no_answer_greeting.audio_selected )}\r\n
)\r\n }\r\n \r\n getTexboxRequiredError=(validate, value)=>{\r\n let requiredElem = (Required!
);\r\n if(!validate) return \"\";\r\n\r\n if(!value){\r\n return requiredElem\r\n }\r\n\r\n if(value && !value.trim()){\r\n return requiredElem\r\n }\r\n }\r\n \r\n getDropdownRequiredError=(validate, value)=>{\r\n let requiredElem = (Required!
);\r\n if(!validate) return \"\";\r\n\r\n if(value === \"0\"){\r\n return requiredElem;\r\n }\r\n }\r\n};\r\n\r\nexport default ManageGreetingsModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport ManageGreetingsModal from './modals/manageGreetingsModal';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport { fetchData, post } from './../requests/api_calls';\r\nimport format from 'string-format';\r\nimport * as config from './../requests/config';\r\n\r\nclass ManageGreetingsButton extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = this.getDefaultModel();\r\n }\r\n\r\n getDefaultModel=()=>{\r\n return { \r\n manage_available: false,\r\n showModal: false,\r\n loading: false, \r\n loading_error: \"\",\r\n saving_enable: false,\r\n saving_loading: false,\r\n saving_show_success: false,\r\n saving_error_message: \"\",\r\n busy_greeting: {\r\n type: 0, //system or personal,\r\n audio_selected: \"0\",\r\n error_message: \"\"\r\n }, \r\n no_answer_greeting: {\r\n type: 0, //system or personal, alternative 1, alternative 2, alternative 3\r\n //Only audio_selected for personal\r\n audio_selected: \"0\",\r\n error_message: \"\",\r\n alternate_1:\r\n {\r\n name: \"\",\r\n audio_selected: \"0\",\r\n error_message: \"\"\r\n },\r\n alternate_2:\r\n {\r\n name: \"\",\r\n audio_selected: \"0\",\r\n error_message: \"\"\r\n },\r\n alternate_3:\r\n {\r\n name: \"\",\r\n audio_selected: \"0\",\r\n error_message: \"\"\r\n }\r\n }, \r\n audio_files:[\r\n \r\n ],\r\n audio_files_selection_enable: false,\r\n number_of_rings_before_greeting: 2, //number\r\n auto_login: false\r\n };\r\n }\r\n getAudioById=(audio_files, id)=>{\r\n let filtered = audio_files.filter(x=>x.id.toString() === id.toString());\r\n // console.log(ids);\r\n // console.log(audio_files);\r\n // console.log(id.toString());\r\n if(filtered.length > 0)\r\n return filtered[0];\r\n\r\n return null;\r\n }\r\n\r\n IsModelValid=()=>{\r\n let state = {...this.state};\r\n let isValid = true;\r\n state.saving_error_message = \"\";\r\n if(state.busy_greeting.type === \"1\" && state.busy_greeting.audio_selected === \"0\" )\r\n isValid = false;\r\n\r\n if(state.no_answer_greeting.type === \"1\" && state.no_answer_greeting.audio_selected === \"0\" )\r\n isValid = false;\r\n\r\n if(state.no_answer_greeting.type === \"2\" && !state.no_answer_greeting.alternate_1.name)\r\n isValid = false;\r\n if(state.no_answer_greeting.type === \"3\" && !state.no_answer_greeting.alternate_2.name)\r\n isValid = false;\r\n\r\n if(state.no_answer_greeting.type === \"4\" && !state.no_answer_greeting.alternate_3.name)\r\n isValid = false;\r\n \r\n if(state.no_answer_greeting.type === \"2\" && state.no_answer_greeting.alternate_1.audio_selected === \"0\")\r\n isValid = false;\r\n\r\n if(state.no_answer_greeting.type === \"3\" && state.no_answer_greeting.alternate_2.audio_selected === \"0\")\r\n isValid = false;\r\n\r\n if(state.no_answer_greeting.type === \"4\" && state.no_answer_greeting.alternate_3.audio_selected === \"0\")\r\n isValid = false;\r\n \r\n return isValid;\r\n }\r\n\r\n handleSave=()=> {\r\n let state = {...this.state};\r\n if(!this.IsModelValid()) {\r\n state.saving_error_message = \"Please check field with errors\";\r\n this.setState(state);\r\n return;\r\n }; \r\n \r\n state.saving_error_message = \"\";\r\n state.saving_loading = true;\r\n state.saving_show_success = false;\r\n state.saving_enable = false;\r\n\r\n\r\n let postData = {};\r\n postData.PBXUserID = this.props.PBXUserID;\r\n postData.ServiceNumber = this.props.ServiceNumber;\r\n\r\n postData.BusyAnnouncementSelection = state.busy_greeting.type;\r\n\r\n if(parseInt(state.busy_greeting.type) === 0){\r\n postData.BusyPersonalAudioFile = null;\r\n }\r\n else if(parseInt(state.busy_greeting.type) === 1){\r\n let selectedAudio = this.getAudioById(state.audio_files, state.busy_greeting.audio_selected);\r\n if(selectedAudio){\r\n postData.BusyPersonalAudioFile ={\r\n AudioName: selectedAudio.audio_name,\r\n FileType: selectedAudio.file_type,\r\n IsGroup: selectedAudio.is_group\r\n }\r\n }\r\n \r\n }\r\n\r\n postData.noAnswerAnnouncementSelection = state.no_answer_greeting.type;\r\n if(state.no_answer_greeting.type === \"0\"){\r\n postData.NoAnswerPersonalAudioFile = null;\r\n }\r\n else if(state.no_answer_greeting.type === \"1\"){\r\n let selectedAudio = this.getAudioById(state.audio_files, state.no_answer_greeting.audio_selected);\r\n if(selectedAudio){\r\n postData.NoAnswerPersonalAudioFile = {\r\n AudioName: selectedAudio.audio_name,\r\n FileType: selectedAudio.file_type,\r\n IsGroup: selectedAudio.is_group\r\n }\r\n }\r\n \r\n }else if(state.no_answer_greeting.type === \"2\"){\r\n let selectedAudio = this.getAudioById(state.audio_files, state.no_answer_greeting.alternate_1.audio_selected);\r\n if(selectedAudio){\r\n postData.GreetingName = state.no_answer_greeting.alternate_1.name,\r\n postData.NoAnswerPersonalAudioFile = {\r\n AudioName: selectedAudio.audio_name,\r\n FileType: selectedAudio.file_type,\r\n IsGroup: selectedAudio.is_group\r\n }\r\n }\r\n }\r\n else if(state.no_answer_greeting.type === \"3\"){\r\n let selectedAudio = this.getAudioById(state.audio_files, state.no_answer_greeting.alternate_2.audio_selected);\r\n if(selectedAudio){\r\n postData.GreetingName = state.no_answer_greeting.alternate_2.name,\r\n postData.NoAnswerPersonalAudioFile = {\r\n AudioName: selectedAudio.audio_name,\r\n FileType: selectedAudio.file_type,\r\n IsGroup: selectedAudio.is_group\r\n }\r\n }\r\n }\r\n else if(state.no_answer_greeting.type === \"4\"){\r\n let selectedAudio = this.getAudioById(state.audio_files, state.no_answer_greeting.alternate_3.audio_selected);\r\n if(selectedAudio){\r\n postData.GreetingName = state.no_answer_greeting.alternate_3.name,\r\n postData.NoAnswerPersonalAudioFile = {\r\n AudioName: selectedAudio.audio_name,\r\n FileType: selectedAudio.file_type,\r\n IsGroup: selectedAudio.is_group\r\n }\r\n }\r\n }\r\n postData.NoAnswerNumberOfRings = state.number_of_rings_before_greeting;\r\n postData.VoicePortalAutoLogin = state.auto_login;\r\n let body = JSON.stringify(postData);\r\n\t\tlet headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n\r\n post(\"usr/VMManageGreeting\",\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state};\r\n state.saving_enable = true;\r\n\t\t\tif(response.ok){\r\n state.saving_show_success = true;\r\n\t\t\t\tstate.saving_loading = false;\r\n state.saving_error_message = \"\";\r\n\t\t\t}\r\n\t\t\telse{\r\n\t\t\t\tstate.saving_loading = false;\r\n\t\t\t\tstate.saving_error_message = \"Failed Save\";\r\n }\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n let state = {...this.state};\r\n state.saving_loading = false;\r\n state.saving_enable = true;\r\n state.saving_error_message = \"Failed Save\";\r\n this.setState(state);\r\n });\r\n \r\n this.setState(state);\r\n }\r\n\r\n handleChangeState=(model)=>{\r\n this.setState(model);\r\n }\r\n\r\n handleClose() {\r\n let state = {...this.state};\r\n state.showModal = false;\r\n state.loading= false;\r\n state.loading_error= \"\";\r\n state.saving_enable= true;\r\n state.saving_loading= false;\r\n state.saving_show_success= false;\r\n state.saving_error_message= \"\";\r\n this.setState(state);\r\n }\r\n\r\n handleShow() {\r\n let state = this.getDefaultModel();\r\n state.manage_available = true;\r\n state.showModal = true;\r\n state.loading = true;\r\n state.saving_show_success=false;\r\n state.saving_error_message = \"\";\r\n this.setState(state);\r\n\r\n let apiPath = format('usr/VMManageGreeting?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',this.props);\r\n fetchData(apiPath).then((data) => {\r\n if(data){\r\n let model = this.getModel(data);\r\n this.setState(model);\r\n }\r\n else{\r\n let state = {...this.state};\r\n state.saving_enable = false;\r\n state.loading= false;\r\n state.loading_error = \"Loading Fail\";\r\n state.manage_available = false;\r\n this.setState(state);\r\n }\r\n }).catch((message)=>{\r\n let state = {...this.state};\r\n state.loading = false;\r\n state.saving_enable = false;\r\n state.loading_error = message;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n getAudioFileID=(audio_files, audioFile)=>{\r\n let result = audio_files.\r\n filter(x=> \r\n x.audio_name === audioFile.AudioName && \r\n x.file_type === audioFile.FileType && \r\n x.is_group === audioFile.IsGroup);\r\n if(result.length > 0){\r\n return result[0].id;\r\n }\r\n\r\n console.log(\"failedto find\")\r\n return null;\r\n }\r\n\r\n getModel=(data)=>{\r\n let state = {...this.state};\r\n state.loading = false;\r\n state.saving_enable = true;\r\n state.manage_available = true;\r\n state.busy_greeting.type = data.BusyAnnouncementSelection.toString();\r\n state.audio_files = data.AudioFileList.map((x,index)=> {\r\n return {\r\n id: (index + 1).toString(),\r\n audio_name: x.AudioName, \r\n file_type: x.FileType, \r\n is_group:x.IsGroup\r\n }\r\n });\r\n\r\n state.audio_files_selection_enable = state.audio_files.length > 0 ;\r\n if(data.BusyAnnouncementSelection===1 && state.audio_files_selection_enable){\r\n if(data.BusyPersonalAudioFile){\r\n let audioFile = data.BusyPersonalAudioFile;\r\n state.busy_greeting.audio_selected = this.getAudioFileID(state.audio_files, audioFile)\r\n }\r\n }\r\n\r\n state.no_answer_greeting.type = data.NoAnswerAnnouncementSelection.toString();\r\n if(data.NoAnswerAnnouncementSelection===1 && state.audio_files_selection_enable){\r\n if(data.NoAnswerPersonalAudioFile && data.NoAnswerPersonalAudioFile){\r\n let audioFile = data.NoAnswerPersonalAudioFile;\r\n state.no_answer_greeting.audio_selected = this.getAudioFileID(state.audio_files, audioFile)\r\n }\r\n }\r\n\r\n if(data.NoAnswerAnnouncementSelection===2 && state.audio_files_selection_enable){\r\n if(data.NoAnswerPersonalAudioFile){\r\n let audioFile = data.NoAnswerPersonalAudioFile;\r\n state.no_answer_greeting.alternate_1.name = data.GreetingName;\r\n state.no_answer_greeting.alternate_1.audio_selected= this.getAudioFileID(state.audio_files, audioFile)\r\n }\r\n }\r\n\r\n if(data.NoAnswerAnnouncementSelection===3 && state.audio_files_selection_enable){\r\n if(data.NoAnswerPersonalAudioFile){\r\n let audioFile = data.NoAnswerPersonalAudioFile;\r\n state.no_answer_greeting.alternate_2.name = data.GreetingName;\r\n state.no_answer_greeting.alternate_2.audio_selected= this.getAudioFileID(state.audio_files, audioFile)\r\n }\r\n }\r\n\r\n if(data.NoAnswerAnnouncementSelection===4 && state.audio_files_selection_enable){\r\n if(data.NoAnswerPersonalAudioFile){\r\n let audioFile = data.NoAnswerPersonalAudioFile;\r\n state.no_answer_greeting.alternate_3.name = data.GreetingName;\r\n state.no_answer_greeting.alternate_3.audio_selected = this.getAudioFileID(state.audio_files, audioFile)\r\n }\r\n }\r\n\r\n state.number_of_rings_before_greeting = data.NoAnswerNumberOfRings;\r\n state.auto_login = data.VoicePortalAutoLogin;\r\n return state;\r\n \r\n }\r\n\r\n\r\n\tcomponentDidMount() {\t\t\r\n let apiPath = format('usr/VMManageGreeting?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',this.props);\r\n fetchData(apiPath).then((data) => {\r\n if(data){\r\n let state = {...this.state};\r\n state.manage_available = true;\r\n this.setState(state);\r\n }\r\n else{\r\n let state = {...this.state};\r\n state.saving_enable = false;\r\n state.loading= false;\r\n state.loading_error = \"Loading Fail\";\r\n state.manage_available = false;\r\n this.setState(state);\r\n }\r\n }).catch((message)=>{\r\n let state = {...this.state};\r\n state.loading = false;\r\n state.saving_enable = false;\r\n state.loading_error = message;\r\n this.setState(state);\r\n });\r\n\t}\r\n\r\n render() {\r\n // if(!this.state.manage_available)\r\n // return ();\r\n\r\n return (\r\n \r\n Manage Greetings\r\n\r\n \r\n
\r\n {this.getSaveButton()}\r\n \r\n
\r\n {this.getSaveMessage()}\r\n Success!
\r\n )\r\n }\r\n else if(this.state.saving_loading){\r\n return ({this.state.saving_error_message}
)\r\n }\r\n }\r\n};\r\n\r\nexport default ManageGreetingsButton;\r\n","import React from 'react';\nimport { DataLoadingSpinner } from './spinners';\n\nconst saveStatus = (props) => {\n if (props.saving) {\n let savingMessage = '';\n if (props.SavingMessage !== '')\n {\n savingMessage = (\n {props.SavingMessage}\n );\n }\n return (\n \n {savingMessage}\n
\n )\n } else if (props.error || props.statusMessage) {\n let statusClass = props.error ? ' error text-danger' : ' success text-success';\n let okBtnClass = props.hideOkBtn ? 'hidden' :'btn'\n return (\n \n {props.statusMessage}\n \n
\n )\n } else return null\n}\n\nexport default saveStatus;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport SaveStatus from '../../../components/save_status';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\n\r\nexport default class messageDeposit extends Component {\r\n constructor() {\r\n super();\r\n this.openModal = this.openModal.bind(this);\r\n this.closeModal = this.closeModal.bind(this);\r\n console.log(this);\r\n //initial state values\r\n this.state = {\r\n loading: false,\r\n showModal: false,\r\n userGetGreeting: {},\r\n ErrorMessage: \"\"\r\n }\r\n\r\n\r\n }\r\n componentDidMount() {\r\n // here executes code when component is loaded\r\n\r\n }\r\n\r\n fetchUserVoiceMessagingUserGetGreeting = async (voipSwitch, userid, accountNumber, directoryNumber, serviceNumber, pBXUserID) => {\r\n await this.setState({ loading: true });\r\n let path = 'usr/UserVoiceMessagingUserGetGreeting?switchName=' +\r\n voipSwitch + '&userId=' + userid + '&AccountNumber=' + accountNumber +\r\n '&DirectoryNumber=' + directoryNumber + '&ServiceNumber=' + serviceNumber + '&PBXUserID=' + pBXUserID;\r\n console.log(\"url\", path);\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n //console.log('Data', data);\r\n this.setState({\r\n userGetGreeting: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n userGetGreeting: {},\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n\r\n }\r\n\r\n modalBody = () => {\r\n // checkbox html?\r\n }\r\n\r\n openModal() {\r\n this.setState({ showModal: true });\r\n const { VoipSwitch, userId, AccountNumber, DirectoryNumber, ServiceNumber, PBXUserID } = sessionStorage;\r\n this.fetchUserVoiceMessagingUserGetGreeting(VoipSwitch, userId, AccountNumber, DirectoryNumber, ServiceNumber, PBXUserID)\r\n }\r\n\r\n closeModal() {\r\n this.setState({ showModal: false, ErrorMessage: \"\" });\r\n }\r\n\r\n handleInputChange = (e) => {\r\n const { name } = e.target;\r\n let { userGetGreeting } = this.state;\r\n userGetGreeting[name] = !userGetGreeting[name];\r\n this.setState({\r\n ...this.state,\r\n userGetGreeting\r\n })\r\n }\r\n\r\n modalContent() {\r\n if (this.state.loading) {\r\n return \r\n
\r\n );\r\n }\r\n\r\n handleSubmit = async () => {\r\n await this.setState({ loading: true });\r\n const { VoipSwitch, userId, AccountNumber, DirectoryNumber, ServiceNumber, PBXUserID } = sessionStorage;\r\n const apiPath = \"usr/UserVoiceMessagingUserModifyGreeting\";\r\n let { userGetGreeting: requestData } = this.state;\r\n\r\n let dto = {\r\n AccountNumber: AccountNumber,\r\n DirectoryNumber: DirectoryNumber,\r\n ServiceNumber: ServiceNumber,\r\n PBXUserID: PBXUserID,\r\n uvmg: requestData,\r\n }\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(dto)).then((data) => data).catch(err => console.error(err));\r\n if (response.ok) {\r\n this.setState({ ErrorMessage: \"Success\" })\r\n this.fetchUserVoiceMessagingUserGetGreeting(VoipSwitch, userId, AccountNumber, DirectoryNumber, ServiceNumber, PBXUserID);\r\n } else {\r\n this.setState({ ErrorMessage: response.message })\r\n this.fetchUserVoiceMessagingUserGetGreeting(VoipSwitch, userId, AccountNumber, DirectoryNumber, ServiceNumber, PBXUserID);\r\n }\r\n }\r\n\r\n\r\n\r\n render() {\r\n\r\n return (\r\n \r\n Message Deposit\r\n \r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \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.state.ErrorMessage !== \"\" && !this.state.loading ? {this.state.ErrorMessage} : null}\r\n
\r\n \r\n {this.renderResult()}\r\n {this.error()}\r\n
\r\n \r\n
\r\n
\r\n \r\n
);\r\n }\r\n\r\n\r\n if(countSuccess > 0){\r\n successComponent = \r\n (- \r\n {\r\n this.props.saveResult.map((e,i)=>{\r\n let rowNumber = i+1;\r\n if(e.BlockedNumberAlreadyExist){\r\n return
- #{rowNumber}. {e.BlockedNumber} already block in '{e.Criteria}' ;\r\n }\r\n else if(e.ErrorBlocking){\r\n return
- #{rowNumber}. {e.BlockedNumber} an error saving the number ;\r\n }\r\n })\r\n }\r\n
\r\n
);\r\n }\r\n\r\n return (\r\n - \r\n {\r\n this.props.saveResult.map((e,i)=>{\r\n let rowNumber = i+1;\r\n if(!e.BlockedNumberAlreadyExist && e.Blocked){\r\n return
- #{rowNumber}. {e.BlockedNumber} successfully block in '{e.Criteria}' ;\r\n }\r\n })\r\n }\r\n
\r\n {successComponent}\r\n {errorComponent}\r\n
\r\n );\r\n }\r\n\r\n loading(){\r\n if(this.props.loading)\r\n return {this.props.ErrorMessage}
)\r\n }\r\n return errorMessage;\r\n }\r\n};\r\n\r\nclass SavingMessageControl extends Component {\r\n render() {\r\n\r\n let loadingMessage = \"\";\r\n if(this.props.showLoading){\r\n loadingMessage = (\r\n {loadingMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass SaveButton extends Component {\r\n render() {\r\n if(this.props.disabled)\r\n return ();\r\n else\r\n return ();\r\n }\r\n};\r\n\r\nexport default VoicemailBlockModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\n\r\nclass VoicemailDeleteModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n this.props.handleShow();\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Delete\r\n\r\n \r\n {this.props.body}\r\n
\r\n \r\n {this.loading()}\r\n
\r\n \r\n \r\n
\r\n \n
\n Generate New Voicemail Pin\n
\n Click the Reset button below to temporarily reset your Voicemail PIN to {this.state.PIN}. When you access your voicemail with this temporary PIN, you will be prompted to assign a new PIN.
\n Reset Voicemail Pin\n Generate New Voicemail Pin\n
\n
\n \n
\n {this.props.SuccessMessage}
\n )\n }\n\n let loadingMessage = \"\";\n if(this.props.showLoading){\n loadingMessage = ({this.props.ErrorMessage}
)\n }\n\n return (\n \n {successMessage}\n {loadingMessage}\n {errorMessage}\n
\n );\n }\n};\n\nexport default PinResetModal;","import React, { Component } from 'react';\n// import { Tooltip } from '@progress/kendo-popups-react-wrapper';\n// import '@progress/kendo-ui';\nimport {Popover, OverlayTrigger} from 'react-bootstrap'\n\nclass InfoPop extends Component {\n\n\tcomponentWillMount() {}\n\n\trender() {\n\t\tconst message = this.props.message;\n\t\tlet popop = \r\n\t\t\t\t{ this.props.label }\r\n\t\t\t\t{ hasInfo &&\r\n\t\t\t\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nexport default LongSwitch;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport Voicemail from './voicemail';\r\nimport VoicemailSettingsButton from './../voicemailSettingsButton';\r\nimport ManageGreetingsButton from './../manageGreetingsButton';\r\nimport MessageDepositButton from './modals/messageDepositButton'\r\nimport VoicemailBlockModal from './../modals/voicemailBlockModal';\r\nimport VoicemailDeleteModal from './../modals/voicemailDeleteModal';\r\nimport PinResetModal from '../voicemails/modals/pinResetModal'\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport LongSwitch from './../../components/long_switch';\r\nimport { fetchData, postData, post, postDataWithCustomHeader } from './../../requests/api_calls';\r\nimport * as settings from './../../scripts/session';\r\nimport * as config from './../../requests/config'\r\nimport format from 'string-format';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst VMsConfirmationMsg = \"Are you sure you want to block all calls and voicemails from these numbers?\";\r\nconst VMConfirmationMsg = \"Are you sure you want to block all calls and voicemails from this number?\";\r\nconst maxVmInCard = 5;\r\n\r\nclass Voicemails extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState();\r\n\r\n this.handleHideSendModal = this.handleHideSendModal.bind(this);\r\n this.handleSend = this.handleSend.bind(this);\r\n this.handleChangeEmailText = this.handleChangeEmailText.bind(this);\r\n };\r\n\r\n initialState = () => {\r\n return {\r\n enable: false,\r\n voicemail_switch: {\r\n visible: false,\r\n isActive: true,\r\n show_success: false,\r\n show_error: false,\r\n loading: false,\r\n vm_settings: null\r\n },\r\n voicemails: [],\r\n voicemail_count: 0,\r\n voicemail_fetch_error: \"\",\r\n loading: true,\r\n activevm: {\r\n account_number: \"\",\r\n directory_number: \"\",\r\n filename: \"\"\r\n },\r\n sendModal: {\r\n show: false,\r\n emailText: \"\",\r\n emailTextValid: true,\r\n errorMessage: \"\",\r\n loading: false,\r\n },\r\n delete: {\r\n voicemails: [],\r\n error_message: [],\r\n loading: false\r\n },\r\n block: {\r\n voicemails: [],\r\n error_message: [],\r\n show_dialog: false,\r\n show_success: false,\r\n loading: false,\r\n save_result: []\r\n }\r\n };\r\n }\r\n\r\n handleDeleteModalShow() {\r\n this.setState({ ...{ delete: { voicemails: [], error_message: [], show_dialog: true } } });\r\n }\r\n\r\n handleDeleteVM() {\r\n let selected_voicemails = this.state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.selected;\r\n });\r\n\r\n this.setState({ ...{ delete: { voicemails: selected_voicemails, error_message: [] } } });\r\n selected_voicemails.forEach(element => {\r\n let body = {\r\n AccountNumber: element.AccountNumber,\r\n DirectoryNumber: element.DirectoryNumber,\r\n FileName: element.Location,\r\n access_token: settings.storedAccessToken(),\r\n x_policy: settings.storedXPolicy(),\r\n };\r\n let headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded', \r\n 'Accept': 'text/html'\r\n }\r\n postDataWithCustomHeader(\"vm/VMDelete\", body, headers)\r\n .then(response => {\r\n\r\n let newdeletedvms = this.state.delete.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n\r\n if (response.ok) {\r\n let newvoicemails = this.state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n this.setState({ ...{ voicemails: newvoicemails, voicemail_count: this.state.voicemail_count - 1, delete: { voicemails: newdeletedvms } } });\r\n }\r\n else {\r\n let error_message = this.state.delete.error_message;\r\n error_message.push(response.message);\r\n this.setState({ ...{ delete: { error_message: error_message, voicemails: newdeletedvms } } });\r\n }\r\n\r\n })\r\n .catch((message) => {\r\n let newdeletedvms = this.state.delete.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n\r\n let error_message = this.state.delete.error_message;\r\n error_message.push(message.toString());\r\n this.setState({ ...{ delete: { error_message: error_message, voicemails: newdeletedvms } } });\r\n });\r\n });\r\n }\r\n\r\n\r\n handleBlockModalShow() {\r\n this.setState({ ...{ block: { voicemails: [], error_message: [], show_dialog: true, show_success: false, loading: false, save_result: [] } } });\r\n }\r\n\r\n handleBlockModalClose() {\r\n let state = { ...this.state };\r\n state.voicemails.forEach((vmLocal, index) => {\r\n vmLocal.selected = false;\r\n });\r\n state.block.voicemails = [];\r\n state.block.error_message = [];\r\n state.block.show_dialog = false;\r\n state.block.show_success = false;\r\n state.block.loading = false;\r\n state.block.save_result = [];\r\n this.setState(state);\r\n }\r\n\r\n handleBlockVM() {\r\n let state = { ...this.state };\r\n let selected_block_numbers = state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.selected;\r\n }).map(e => e.FromPhone);\r\n state.block.voicemails = selected_block_numbers;\r\n state.block.error_message = [];\r\n state.block.loading = true;\r\n this.setState(state);\r\n\r\n let body = {\r\n BlockNumbers: selected_block_numbers,\r\n AccountNumber: this.props.AccountNumber,\r\n DirectoryNumber: this.props.DirectoryNumber,\r\n PBXUserID: this.props.PBXUserID,\r\n };\r\n\r\n body = JSON.stringify(body);\r\n let header = {\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy(),\r\n 'Content-Type': 'application/json',\r\n 'Accept': 'application/json'\r\n }\r\n post(\"vm/VMBlock\", \"POST\", body)\r\n .then(response => {\r\n let state = { ...this.state };\r\n state.block.loading = false;\r\n state.block.show_success = response.ok;\r\n if (!response.ok)\r\n state.block.error_message.push(\"Failed to save\");\r\n else {\r\n state.block.save_result = JSON.parse(response.message);\r\n }\r\n this.setState(state);\r\n })\r\n .catch((message) => {\r\n let state = { ...this.state };\r\n state.block.loading = false;\r\n state.block.error_message.push(\"Failed to save\");\r\n state.block.show_success = false;\r\n this.setState(state);\r\n });\r\n\r\n }\r\n\r\n handleChangeEmailText(event) {\r\n let sendModal = this.state.sendModal;\r\n sendModal.emailText = event.target.value;\r\n sendModal.errorMessage = \"\";\r\n sendModal.emailTextValid = true;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n }\r\n\r\n handleSend() {\r\n let sendModal = this.state.sendModal;\r\n\r\n if (!this.validateEmail()) {\r\n sendModal.emailTextValid = false;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n return;\r\n }\r\n\r\n sendModal.emailTextValid = true;\r\n sendModal.loading = true;\r\n sendModal.errorMessage = null;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n\r\n let body = {\r\n AccountNumber: this.state.activevm.account_number,\r\n DirectoryNumber: this.state.activevm.directory_number,\r\n FileName: this.state.activevm.filename,\r\n ToEmail: this.state.sendModal.emailText,\r\n access_token: settings.storedAccessToken(),\r\n x_policy: settings.storedXPolicy(),\r\n };\r\n\r\n let headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded', \r\n 'Accept': 'text/html'\r\n }\r\n postDataWithCustomHeader(\"vm/VMForward\", body, headers)\r\n .then(response => {\r\n if (response.ok) {\r\n this.setState({ ...{ sendModal: { show: false, emailText: \"\", errorMessage: \"\" } } });\r\n }\r\n else {\r\n this.setState({ ...{ sendModal: { show: true, emailText: this.state.sendModal.emailText, errorMessage: \"Error: Please contact administrator\" } } });\r\n }\r\n }\r\n ).catch((message) => {\r\n this.setState({ ...{ sendModal: { show: true, emailText: this.state.sendModal.emailText, errorMessage: \"Error: Please contact administrator\" } } });\r\n\r\n });\r\n }\r\n\r\n handleHideSendModal() {\r\n\r\n let sendModal = this.state.sendModal;\r\n sendModal.show = false;\r\n sendModal.emailText = \"\";\r\n this.setState({ ...{ sendModal: sendModal } });\r\n }\r\n\r\n handledSelectChanged = (vm, event) => {\r\n let voicemails_data = this.state.voicemails.map((vmLocal, index) => {\r\n if (vmLocal.Location === vm.Location) {\r\n vmLocal.selected = !vmLocal.selected;\r\n }\r\n return vmLocal;\r\n });\r\n let state = { ...this.state };\r\n state.voicemails = voicemails_data;\r\n this.setState(state);\r\n }\r\n\r\n handleShowSendModal = (vm, event) => {\r\n let activevm =\r\n {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n let sendModal = this.state.sendModal;\r\n sendModal.show = true;\r\n sendModal.emailText = \"\";\r\n sendModal.emailTextValid = true;\r\n sendModal.errorMessage = \"\";\r\n this.setState({ ...{ sendModal: sendModal, activevm: activevm } });\r\n }\r\n\r\n handleDownload = (vm, event) => {\r\n let activevm = {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n this.setState({ ...{ activevm: activevm } });\r\n\r\n setTimeout(() => {\r\n this.refs.downloadSubmit.submit();\r\n }, 500);\r\n }\r\n\r\n handlePlay = (vm, event) => {\r\n let activevm = {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n this.setState({ ...{ activevm: activevm } });\r\n\r\n setTimeout(() => {\r\n this.refs.playSubmit.submit();\r\n }, 500);\r\n }\r\n\r\n onHandleVoicemail = (event) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.isActive = event.target.checked;\r\n state.voicemail_switch.loading = true;\r\n state.voicemail_switch.show_success = false;\r\n state.voicemail_switch.show_error = false;\r\n\r\n state.voicemail_switch.vm_settings.isActive = event.target.checked\r\n this.setState(state);\r\n\r\n let body = JSON.stringify(state.voicemail_switch.vm_settings);\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n post(\"usr/VMSettings\", \"POST\", body, headers)\r\n .then(response => {\r\n let state = { ...state };\r\n state.voicemail_switch.loading = false;\r\n if (response.ok) {\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n\r\n if (state.voicemail_switch.isActive) {\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', this.props);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n else {\r\n state.loading = false;\r\n }\r\n }\r\n else {\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n }\r\n this.setState(state);\r\n })\r\n .catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.loading = false;\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n handleVMSettingChange = (vmSetting) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.isActive = vmSetting.isActive;\r\n this.setState(state);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.AccountNumber !== prevProps.AccountNumber ||\r\n this.props.DirectoryNumber !== prevProps.DirectoryNumber ||\r\n this.props.ServiceNumber !== prevProps.ServiceNumber ||\r\n this.props.PBXUserID !== prevProps.PBXUserID) {\r\n this.enableUserMessaging(this.props);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.enableUserMessaging(this.props);\r\n }\r\n\r\n enableUserMessaging = (props) => {\r\n this.setState(this.initialState());\r\n let basicData = { ServiceNumber: this.props.ServiceNumber, PBXUserID: this.props.PBXUserID };\r\n let apiUrl = \"\";\r\n if (this.props.ServiceNumber && this.props.PBXUserID)\r\n apiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}', basicData);\r\n else if (this.props.ServiceNumber)\r\n apiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}', basicData);\r\n else if (this.props.PBXUserID)\r\n apiUrl = format('usr/AssignedServices?PBXUserID={PBXUserID}', basicData);\r\n\r\n // let state = {...this.state};\r\n // state.enable = true;\r\n // state.loading = false;\r\n // this.loadSettings(props);\r\n fetchData(apiUrl).then((data) => {\r\n let state = { ...this.state };\r\n state.enable = false;\r\n state.loading = false;\r\n if (data) {\r\n //console.log(\"user/AssignedServices\");\r\n //console.log(data);\r\n let filterService = data.filter((item) => { return item.ServiceName === \"VoiceMessagingUser\" && item.IsActiveSpecified })\r\n //console.log(filterService);\r\n if (filterService.length > 0) {\r\n let service = filterService[0];\r\n state.enable = true;\r\n state.loading = true;\r\n // if(service.IsActive){\r\n // state.enable = true;\r\n // state.loading = true;\r\n // console.log(\"enableUserMessaging.props\")\r\n // console.log(props);\r\n // this.loadSettings(props);\r\n // }\r\n this.loadSettings(props);\r\n }\r\n }\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.enable = false;\r\n state.loading = false;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n loadSettings = (props) => {\r\n let vmOnOffApi = format('usr/VMSettings?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}&AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n fetchData(vmOnOffApi).then((data) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.visible = true;\r\n state.voicemail_switch.vm_settings = data;\r\n if (data !== null) {\r\n // console.log(\"loadSettings\")\r\n // console.log(data);\r\n state.voicemail_switch.isActive = data.isActive;\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n if (state.voicemail_switch.isActive) {\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n else {\r\n state.loading = false;\r\n }\r\n }\r\n else {\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.show_error = true;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n fetchVoiceMails = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n\r\n if (data) {\r\n this.loadData(data);\r\n }\r\n else {\r\n let state = { ...this.state };\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n state.loading = 0;\r\n this.setState(state);\r\n }\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n state.loading = 0;\r\n state.voicemail_fetch_error = message.toString()\r\n });\r\n }\r\n\r\n loadData = (data) => {\r\n let state = { ...this.state };\r\n\r\n let voicemails_data = this.sortedByDate(data);\r\n if (data.length > maxVmInCard) {\r\n state.all_voicemails = voicemails_data;\r\n voicemails_data = data.slice(0, maxVmInCard);\r\n }\r\n voicemails_data = voicemails_data.map((vm, index) => {\r\n vm.selected = false;\r\n return vm;\r\n });\r\n state.voicemails = voicemails_data;\r\n state.voicemail_count = data.length;\r\n state.loading = false;\r\n\r\n this.setState(state);\r\n }\r\n\r\n sortedByDate = (data) => {\r\n data.sort((a, b) => new Date(b.DateTimeLocal) - new Date(a.DateTimeLocal));\r\n return data;\r\n }\r\n\r\n voicemailsTable = () => {\r\n if (this.state.voicemail_switch.visible && !this.state.voicemail_switch.isActive)\r\n return ();\r\n\r\n if (this.state.voicemails.length > 0) {\r\n return (\r\n | \r\n | \r\n | Play | \r\nPhone | \r\nDate | \r\n\r\n |
|---|
\r\n Voicemail is a not a feature of this service\r\n
\r\n )\r\n }\r\n else {\r\n return (\r\n\r\n No recent voicemails\r\n
\r\n )\r\n }\r\n }\r\n\r\n\r\n render() {\r\n let playUrl = config.baseApiUrl + \"vm/VMPlay\";\r\n let saveUrl = config.baseApiUrl + \"vm/VMSave\";\r\n if (this.state.loading) {\r\n return (\r\n\r\n
);\r\n }\r\n\r\n let voiceCount = \"\"\r\n if (this.state.enable)\r\n voiceCount = this.state.voicemail_count;\r\n\r\n return (\r\n \r\n
\r\n \r\n
Voicemail
\r\n\r\n
\r\n \r\n
\r\n {this.getVoiceMailAction()}\r\n\r\n\r\n \r\n Send Voicemail \r\n \r\n \r\n \r\n \r\n
\r\n {this.sendModalLoading()}\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n errorMessage() {\r\n if (!this.state.sendModal.loading && this.state.sendModal.errorMessage && this.state.sendModal.errorMessage !== \"\")\r\n return \r\n
\r\n \r\n
Voicemail {voiceCount}
\r\n\r\n {this.getVoiceMailOnOff()}\r\n
\r\n \r\n {this.voicemailsTable()}\r\n
\r\n \r\n Delete Selected |\r\n Forward Selected\r\n
\r\n {/*\r\n
*/}\r\n \r\n {this.getVoiceMailAction()}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.errorMessage()}\r\n \r\n {this.sendModalLoading()}\r\n
\r\n \r\n
\r\n {this.state.sendModal.errorMessage}
;\r\n\r\n if (this.state.sendModal.emailTextValid === false)\r\n return Invalid Email
;\r\n\r\n return \"\";\r\n }\r\n\r\n sendModalLoading() {\r\n if (this.state.sendModal.loading)\r\n return {message}
\r\n });\r\n\r\n // let vm_block_error_body = \r\n // (\r\n // {\r\n // this.state.block.error_message.map((message, index)=>{ \r\n // return
);\r\n\r\n // let vm_block_error_body = this.state.block.error_message.map((message, index)=>{ \r\n // return {message}
\r\n // })\r\n // }\r\n // {message}
\r\n // });\r\n\r\n // Decide which confirmation message will be displayed on the block calls modal\r\n let confirmationMsg = selectedVMcount > 1 ? VMsConfirmationMsg : VMConfirmationMsg;\r\n\r\n return (Success!
\r\n \r\n }\r\n\r\n let showError = \"\";\r\n if (vm_switch.show_error) {\r\n showError = The switch failed! Please try again.
\r\n }\r\n\r\n let showLoading = \"\"\r\n if (vm_switch.loading) {\r\n showLoading = \r\n
;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n getVoiceMailAction = () => {\r\n if (!this.state.enable)\r\n return \"\";\r\n return (\r\n
\r\n \r\n
);\r\n }\r\n};\r\n\r\nexport default Voicemails;","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../components/spinners';\r\nimport { Grid, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../scripts/helper';\r\n\r\nexport default class BSCallLogsTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n LocationAccountNumber: '',\r\n BSCallLogs: props.BsLogs,\r\n loading: props.isLoading,\r\n logs: [],\r\n Sort: [],\r\n skip: 0\r\n }\r\n // this.gridScroll = this.gridScroll.bind(this);\r\n };\r\n\r\n\r\n componentDidMount() {\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.BsLogs != this.state.BSCallLogs) {\r\n this.setState({ BSCallLogs: props.BsLogs });\r\n }\r\n if (props.isLoading != this.state.loading) {\r\n this.setState({ loading: props.isLoading });\r\n }\r\n }\r\n\r\n\r\n searchStatus = () => {\r\n if (this.state.loading) {\r\n return maxVmInCard ? 'view-more' : 'hidden'}>\r\n View All Voicemails & Details\r\n
\r\n \r\n No results for the filters selected.\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n sortListings = (sort, logs = null) => {\r\n let returnObj = [];\r\n if (this.state.BSCallLogs) {\r\n if (logs == null) logs = this.state.BSCallLogs.slice();\r\n let sortedSet = orderBy(logs, sort);\r\n returnObj = sortedSet;\r\n if (sort.length) {\r\n returnObj = helper.blanksAfterZ(sortedSet, sort);\r\n }\r\n }\r\n return returnObj;\r\n }\r\n\r\n sortChange = async (event) => {\r\n await this.setState({\r\n BSCallLogs: this.sortListings(event.sort),\r\n Sort: event.sort\r\n });\r\n }\r\n\r\n // gridScroll = (event) => {\r\n // const e = event.nativeEvent;\r\n // if (e.target.scrollTop + 30 >= e.target.scrollHeight - e.target.clientHeight) {\r\n // //TODO: grab more data from the source\r\n // this.props.GetBSCallLogs(this.state.BSCallLogs.length);//skip method\r\n // }\r\n // }\r\n\r\n gridContent = () => {\r\n if (this.state.loading || this.state.BSCallLogs.length === 0 ) {\r\n return (\r\n{this.searchStatus()}
\r\n )\r\n } else {\r\n let colWidth = this.props.isWidget ? '105px' : '165px';\r\n if (this.props.isWidget) {\r\n return (\r\n \r\n {this.gridContent()}\r\n
\r\n );\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from './spinners';\r\nimport { Grid, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../scripts/helper';\r\n\r\nexport default class SansayCallLogsTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n LocationAccountNumber: '',\r\n SansayCallLogs: props.SansayLogs,\r\n loading: props.isLoading,\r\n logs: [],\r\n Sort: [],\r\n }\r\n };\r\n\r\n\r\n componentDidMount() {\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.SansayLogs != this.state.SansayCallLogs) {\r\n this.setState({ SansayCallLogs: props.SansayLogs });\r\n }\r\n if (props.isLoading != this.state.loading) {\r\n this.setState({ loading: props.isLoading });\r\n }\r\n }\r\n\r\n\r\n searchStatus = () => {\r\n if (this.state.loading) {\r\n return \r\n No results for the filters selected.\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n sortListings = (sort, logs = null) => {\r\n let returnObj = [];\r\n if (this.state.SansayCallLogs) {\r\n if (logs == null) logs = this.state.SansayCallLogs.slice();\r\n let sortedSet = orderBy(logs, sort);\r\n returnObj = sortedSet;\r\n if (sort.length) {\r\n returnObj = helper.blanksAfterZ(sortedSet, sort);\r\n }\r\n }\r\n return returnObj;\r\n }\r\n\r\n sortChange = async (event) => {\r\n await this.setState({\r\n SansayCallLogs: this.sortListings(event.sort),\r\n Sort: event.sort\r\n });\r\n }\r\n\r\n gridContent = () => {\r\n if (this.state.loading || this.state.SansayCallLogs.length === 0) {\r\n return (\r\n{this.searchStatus()}
\r\n )\r\n } else {\r\n let colWidth = this.props.isWidget === true ? '30px' : '150px';\r\n let smallColWidth = this.props.isWidget === true ? '30px' : '100px'\r\n return (\r\n \r\n {this.gridContent()}\r\n
\r\n );\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from './spinners';\r\nimport { Grid, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../scripts/helper';\r\n\r\nexport default class FaxCallLogsTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n LocationAccountNumber: '',\r\n FaxCallLogs: props.FaxCallLogs,\r\n loading: props.isLoading,\r\n logs: [],\r\n Sort: [],\r\n isWidget: props.isWidget ? props.isWidget : false\r\n }\r\n };\r\n\r\n\r\n componentDidMount() {\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.FaxCallLogs != this.state.FaxCallLogs) {\r\n this.setState({ FaxCallLogs: props.FaxCallLogs });\r\n }\r\n if (props.isLoading != this.state.loading) {\r\n this.setState({ loading: props.isLoading });\r\n }\r\n }\r\n\r\n searchStatus = () => {\r\n if (this.state.loading) {\r\n return \r\n No results for the filters selected.\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n sortListings = (sort, logs = null) => {\r\n let returnObj = [];\r\n if (this.state.FaxCallLogs) {\r\n if (logs == null) logs = this.state.FaxCallLogs.slice();\r\n let sortedSet = orderBy(logs, sort);\r\n returnObj = sortedSet;\r\n if (sort.length) {\r\n returnObj = helper.blanksAfterZ(sortedSet, sort);\r\n }\r\n }\r\n return returnObj;\r\n }\r\n\r\n sortChange = async (event) => {\r\n await this.setState({\r\n FaxCallLogs: this.sortListings(event.sort),\r\n Sort: event.sort\r\n });\r\n }\r\n\r\n gridContent = () => {\r\n let colWidth = this.props.isWidget === true ? '150px' : '250px';\r\n let smallColWidth = this.props.isWidget === true ? '85px' : '100px'\r\n if (this.state.loading || !this.state.FaxCallLogs || this.state.FaxCallLogs.length === 0) {\r\n return (\r\n{this.searchStatus()}
\r\n )\r\n } else if (this.props.isWidget) {\r\n return (\r\n \r\n {this.gridContent()}\r\n
\r\n );\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport format from 'string-format';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport * as apiCalls from '../requests/api_calls';\r\nimport moment from 'moment';\r\n\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport * as settings from '../scripts/settings';\r\nimport BSCallLogsTab from '../components/bs_call_logs_tab';\r\nimport SansayCallLogsTab from '../components/sansay_call_logs_tab';\r\nimport FaxCallLogsTab from '../components/fax_call_logs_tab';\r\n\r\nclass CallLogs extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n LocationAccountNumber: '',\r\n BSCallLogs: [],\r\n SansayCallLogs: [],\r\n FaxCallLogs: [],\r\n tab: 'bs',\r\n loading: false,\r\n call_category: (sessionStorage.usercl_call_category || \"1\"),\r\n call_type: (sessionStorage.usercl_call_type || \"1\"),\r\n status_type: (sessionStorage.usercl_status_type || \"1\"),\r\n date_type: (sessionStorage.usercl_date_type || \"1\"), // Today\r\n from_date: (sessionStorage.usercl_from_date ||moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\")),\r\n to_date: (sessionStorage.usercl_to_date || moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\")),\r\n ServiceNumber: props.ServiceNumber,\r\n PBXUserID: props.PBXUserID,\r\n isIpTrunking: props.isIpTrunking\r\n }\r\n this.handleCallType = this.handleCallType.bind(this);\r\n this.handleStatusType = this.handleStatusType.bind(this);\r\n this.handleDate = this.handleDate.bind(this);\r\n this.handleChangeFromDate = this.handleChangeFromDate.bind(this);\r\n this.handleChangeToDate = this.handleChangeToDate.bind(this);\r\n this.UpdateStoreAndListings = this.UpdateStoreAndListings.bind(this);\r\n };\r\n\r\n UpdateStoreAndListings = () => {\r\n settings.setCLFilters(this.state.call_type, this.state.status_type, this.state.call_category, \r\n this.state.date_type, this.state.from_date, this.state.to_date, this.state.PBXUserID\r\n );\r\n this.fetchCallLogs(this.getApiUrl(this.props), settings.noResultsMsg);\r\n }\r\n\r\n handleChangeFromDate(event) {\r\n let from = moment(event.sender._oldText, \"M/D/YYYY\");\r\n if (from.isValid()) {\r\n this.setState({ ...{ from_date: from.format(\"YYYY-MM-DD\") } }, () => {\r\n let to = moment(this.state.to_date);\r\n if (to.isValid() && to.isSameOrAfter(from)) {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: true } }, this.UpdateStoreAndListings);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleChangeToDate(event) {\r\n let to = moment(event.sender._oldText, \"M/D/YYYY\");\r\n if (to.isValid()) {\r\n this.setState({ ...{ to_date: to.format(\"YYYY-MM-DD\") } }, () => {\r\n let from = moment(this.state.from_date);\r\n if (from.isValid() && from.isSameOrBefore(to)) {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: true } }, this.UpdateStoreAndListings);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleDate(event) {\r\n switch (event.target.value) {\r\n case \"1\":\r\n this.setState({\r\n ...{\r\n BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.UpdateStoreAndListings);\r\n return;\r\n case \"2\":\r\n this.setState({\r\n ...{\r\n BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(1, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").subtract(1, \"days\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.UpdateStoreAndListings);\r\n return;\r\n case \"3\":\r\n this.setState({\r\n ...{\r\n BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(6, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.UpdateStoreAndListings);\r\n return;\r\n case \"4\":\r\n this.setState({\r\n ...{\r\n BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(29, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.UpdateStoreAndListings);\r\n return;\r\n case \"5\":\r\n this.setState({\r\n ...{\r\n BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(89, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.UpdateStoreAndListings);\r\n return;\r\n case \"6\":\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: \"From\", to_date: \"To\" } });\r\n settings.setCLFilters(this.state.call_type, this.state.status_type, this.state.call_category, \r\n this.state.date_type, this.state.from_date, this.state.to_date, this.state.PBXUserID\r\n );\r\n return;\r\n }\r\n \r\n }\r\n\r\n handleCallType(event) {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], call_type: event.target.value, loading: true } }, this.UpdateStoreAndListings);\r\n }\r\n\r\n handleStatusType(event) {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], status_type: event.target.value, loading: true } }, this.UpdateStoreAndListings);\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: true } });\r\n this.fetchCallLogs(this.getApiUrl(this.props), settings.noResultsMsg);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: true } });\r\n this.fetchCallLogs(this.getApiUrl(nextProps), settings.noResultsMsg);\r\n }\r\n\r\n fetchCallLogs = async (apiPath) => {\r\n let selectedTab = this.state.tab;\r\n await this.setState({ loading: true });\r\n apiCalls.fetchData(apiPath).then(async (data) => {\r\n if (data !== null && data !== undefined) {\r\n let isIpTrunking = false;\r\n let { BSCallLogs, SansayCallLogs, FDRCallLogs } = data;\r\n if (BSCallLogs.length === 0 && SansayCallLogs.length > 0) {\r\n selectedTab = 'sansay';\r\n isIpTrunking = true; \r\n }\r\n else if (BSCallLogs.length === 0 && SansayCallLogs.length === 0 && (FDRCallLogs && FDRCallLogs.length > 0))\r\n selectedTab = 'fax';\r\n else\r\n selectedTab = 'bs';\r\n\r\n await this.setState({\r\n BSCallLogs: this.revisedData(BSCallLogs), \r\n SansayCallLogs: this.revisedData(SansayCallLogs,true), \r\n FaxCallLogs: this.revisedData(FDRCallLogs, false, true), \r\n loading: false, \r\n tab: selectedTab,\r\n isIpTrunking: isIpTrunking\r\n });\r\n } else this.setState({ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], logs: [], loading: false });\r\n }).catch((msg) => console.error(msg));\r\n }\r\n\r\n revisedData = (data, isIPTrunking = false, isFax = false) => {\r\n let revisedData = [];\r\n if (isIPTrunking)\r\n revisedData = data.map((item, idx) => {\r\n item.Release_Time = new Date(item.Release_Time);\r\n item.Start_Time = new Date(item.Start_Time);\r\n return item;\r\n });\r\n else if (isFax)\r\n revisedData = data.map((item, idx) => {\r\n item.StartTime = new Date(item.StartTime);\r\n return item;\r\n });\r\n else\r\n revisedData = data.map((item, idx) => {\r\n item.Date = new Date(item.Date);\r\n return item;\r\n });\r\n\r\n return revisedData;\r\n }\r\n\r\n\r\n extension = () => {\r\n let ext = this.props.Extension;\r\n if (ext) {\r\n return ({ext})\r\n } else return null;\r\n }\r\n\r\n callLogFilter = (htmlSelect) => {\r\n return (\r\n \r\n {htmlSelect}\r\n
\r\n )\r\n }\r\n\r\n getTab() {\r\n let { tab, BSCallLogs, SansayCallLogs, FaxCallLogs, loading } = this.state;\r\n switch (tab) {\r\n case 'bs':\r\n if (BSCallLogs.length > 20) {\r\n BSCallLogs = BSCallLogs.slice(0, 20);\r\n }\r\n return (\r\n \r\n
);\r\n }\r\n let newProps = this.props;\r\n let callLogsLink = format(\"call_logs_all/{LocationAccountNumber}\", this.props);\r\n\r\n if (!newProps.PBXUserID || newProps.PBXUserID === '') callLogsLink += '/1';\r\n else callLogsLink += '/' + newProps.PBXUserID;\r\n\r\n if (!newProps.ServiceNumber || newProps.ServiceNumber === '') callLogsLink += '/1';\r\n else callLogsLink += '/' + newProps.ServiceNumber;\r\n \r\n return (\r\n \r\n
\r\n \r\n
Call Logs
\r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n getApiUrl(props) {\r\n\r\n let finalToDate = this.state.to_date + '%2023:59:59';\r\n let newOptions = {\r\n call_type: this.state.call_type,\r\n status_type: this.state.status_type,\r\n call_category: this.state.call_category,\r\n from_date: this.state.from_date,\r\n to_date: finalToDate\r\n };\r\n\r\n let apiUrl = format('usr/GetCallLogs?LocationAccountNumber={LocationAccountNumber}&PBXUserID={PBXUserID}&ServiceNumber={ServiceNumber}', props);\r\n apiUrl += format(\"&CallType={call_type}&CallStatus={status_type}&CallCategory={call_category}&FromDate={from_date}&ToDate={to_date}\", newOptions);\r\n return apiUrl;\r\n }\r\n};\r\n\r\nexport default CallLogs;","import React, { Component } from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport LongSwitch from './../components/long_switch';\r\nimport { fetchData, post} from './../requests/api_calls';\r\nimport format from 'string-format';\r\nimport * as config from './../requests/config';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\n\r\nclass BasicFeatures extends Component {\r\n\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.state = this.initialState();\r\n\r\n\t\tthis.onChangeBasic = this.onChangeBasic.bind(this);\r\n\t}\r\n\r\n\tinitialState =()=>{\r\n\t\treturn {\r\n\t\t\tloading: true,\r\n\t\t\tanynomous_call_rejection: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"CallRejection\",\r\n\t\t\t\t\tassigned_service: \"AnonymousCallRejection\",\r\n\t\t\t\t\tlabel: \"Anonymous Call Rejection\",\r\n\t\t\t\t\tinfo: \"Reject incoming callers with directory or identifying Caller ID information displaying 'Anonymous'.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tbargein_exempt: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"BargeIn\",\r\n\t\t\t\t\tassigned_service: \"BargeinExempt\",\r\n\t\t\t\t\tlabel: \"Barge-In Exempt\",\r\n\t\t\t\t\tinfo: \"Barge-in Exempt allows you to block barge-in attempts from other users with Directed Call Pickup with Barge-in\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tcaller_id: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"CallerId\",\r\n\t\t\t\t\tassigned_service: \"ExternalCallingLineIDDelivery\",\r\n\t\t\t\t\tlabel: \"Caller ID\",\r\n\t\t\t\t\tinfo: \"Identify your caller before picking up the telephone.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tcall_waiting: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"CallWaiting\",\r\n\t\t\t\t\tassigned_service: \"CallWaiting\",\r\n\t\t\t\t\tlabel: \"Call Waiting\",\r\n\t\t\t\t\tinfo: \"Switch to a new incoming call while you are already on another call.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tconnected_line_id_restrictions: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"LineIdRestriction\",\r\n\t\t\t\t\tassigned_service: \"ConnectedLineIdentificationRestriction\",\r\n\t\t\t\t\tlabel: \"Connected Line ID Restrictions\",\r\n\t\t\t\t\tinfo: \"Restricts your number from showing as the “calling” number when you are making a transfer to someone internally.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tdo_not_disturb: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"DontDisturb\",\r\n\t\t\t\t\tassigned_service: \"DoNotDisturb\",\r\n\t\t\t\t\tlabel: \"Do Not Disturb\",\r\n\t\t\t\t\tinfo: \"Callers will receive a message stating you are busy and be sent to your Voicemail.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tmusic_on_hold: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"MusicOnHold\",\r\n\t\t\t\t\tassigned_service: \"MusicOnHoldUser\",\r\n\t\t\t\t\tlabel: \"Music On Hold\",\r\n\t\t\t\t\tinfo: \"Select if you want the party you are speaking with to hear hold music when placed on hold.\"\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\toutbound_caller_id_block: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tenable: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n\t\t\t\tshow_error: false,\r\n\t\t\t\tdetails:{\r\n\t\t\t\t\tapi: \"OutboundCallerIdBlock\",\r\n\t\t\t\t\tassigned_service: \"CallingLineIDDeliveryBlocking\",\r\n\t\t\t\t\tlabel: \"Outbound Caller ID Block\",\r\n\t\t\t\t\tinfo: \"Block your Caller ID information from being displayed when you call someone.\"\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\tcomponentDidMount() {\r\n\t\tthis.fetchAssignedServices();\r\n\t}\r\n\r\n componentDidUpdate(prevProps){\r\n if(\r\n this.props.ServiceNumber !== prevProps.ServiceNumber ||\r\n this.props.PBXUserID !== prevProps.PBXUserID){\r\n this.fetchAssignedServices();\r\n }\r\n\t}\r\n\t\r\n\tfetchAssignedServices=()=>{\r\n\t\tthis.setState(this.initialState());\r\n\t\tlet basicData = { ServiceNumber:this.props.ServiceNumber, PBXUserID:this.props.PBXUserID };\r\n\t\tlet apiUrl = \"\";\r\n\t\tif(this.props.ServiceNumber && this.props.PBXUserID)\r\n\t\t\tapiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',basicData);\r\n\t\telse if(this.props.ServiceNumber)\r\n\t\t\tapiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}',basicData);\r\n\t\telse if(this.props.PBXUserID)\r\n\t\t\tapiUrl = format('usr/AssignedServices?PBXUserID={PBXUserID}',basicData);\r\n\r\n fetchData(apiUrl).then((data) => {\r\n if (data) {\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.anynomous_call_rejection)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.caller_id)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.call_waiting)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.connected_line_id_restrictions)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.do_not_disturb)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.music_on_hold)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.outbound_caller_id_block)\r\n\t\t\t\tthis.enableBasicFeature(data, this.state.bargein_exempt)\r\n\t\t\t\tthis.setState({...{loading:false }})\r\n }\r\n else{\r\n\t\t\t\tthis.setDisableAll();\r\n }\r\n }).catch((message)=>{\r\n\t\t\tthis.setDisableAll();\r\n });\r\n\t}\r\n\r\n\tsetLoadingToFalse=()=>{\r\n\t\t//check if this mount\r\n\t\tif(!this.refs.mainDiv) return;\r\n\r\n\t\tlet state = this.state;\r\n\t\tstate.loading = false;\r\n\t\tstate.anynomous_call_rejection.loading = false;\r\n\t\tstate.bargein_exempt.loading = false;\r\n\t\tstate.call_waiting.loading = false;\r\n\t\tstate.caller_id.loading = false;\r\n\t\tstate.connected_line_id_restrictions.loading = false;\r\n\t\tstate.do_not_disturb.loading = false;\r\n\t\tstate.music_on_hold.loading = false;\r\n\t\tstate.outbound_caller_id_block.loading = false;\r\n\t\t\r\n\t\tthis.setState(state);\r\n\t}\r\n\r\n\tsetDisableAll=()=>{\r\n\t\t//check if this mount\r\n\t\tif(!this.refs.mainDiv) return;\r\n\r\n\t\tlet state = this.state;\r\n\t\tstate.loading = false;\r\n\t\tstate.anynomous_call_rejection.enable = false;\r\n\t\tstate.bargein_exempt.enable = false;\r\n\t\tstate.call_waiting.enable = false;\r\n\t\tstate.caller_id.enable = false;\r\n\t\tstate.connected_line_id_restrictions.enable = false;\r\n\t\tstate.do_not_disturb.enable = false;\r\n\t\tstate.music_on_hold.enable = false;\r\n\t\tstate.outbound_caller_id_block.enable = false;\r\n\r\n\t\tstate.anynomous_call_rejection.loading = false;\r\n\t\tstate.bargein_exempt.loading = false;\r\n\t\tstate.call_waiting.loading = false;\r\n\t\tstate.caller_id.loading = false;\r\n\t\tstate.connected_line_id_restrictions.loading = false;\r\n\t\tstate.do_not_disturb.loading = false;\r\n\t\tstate.music_on_hold.loading = false;\r\n\t\tstate.outbound_caller_id_block.loading = false;\r\n\t\t\r\n\t\tthis.setState(state);\r\n\t}\r\n\r\n\tenableBasicFeature =(data, feature)=>{\r\n\t\tlet service = this.getService(data, feature.details.assigned_service);\r\n\t\tfeature.loading = false;\r\n\t\tif(service){\r\n\t\t\tfeature.enable = true;\r\n\t\t\tfeature.selected = service.IsActive;\r\n\t\t\tfeature.loading = false;\r\n\t\t}\r\n\t\tthis.setBasicFeature(feature);\r\n\t}\r\n\r\n\tgetService=(data, serviceName)=>{\r\n\t\tlet filterData = data.filter((item)=>{ return item.ServiceName === serviceName && item.IsActiveSpecified})\r\n\t\tif(filterData.length > 0){\r\n\t\t\treturn filterData[0];\r\n\t\t}\r\n\t\treturn null;\r\n\t}\r\n\r\n fetchBasicFeatures = (state, errorMsg) => {\r\n\t\t// \tMethod:\"CallRejection\", \r\n\t\t// \tServiceNumber:\"\", \r\n\t\t// \tPBXUserID:\"\" \r\n\t\tlet basicData = {Method:state.details.api, ServiceNumber:this.props.ServiceNumber, PBXUserID:this.props.PBXUserID };\r\n\t\tlet apiUrl = \"\";\r\n\t\tif(this.props.ServiceNumber && this.props.PBXUserID)\r\n\t\t\tapiUrl = format('usr/{Method}?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',basicData);\r\n\t\telse if(this.props.ServiceNumber)\r\n\t\t\tapiUrl = format('usr/{Method}?ServiceNumber={ServiceNumber}',basicData);\r\n\t\telse if(this.props.PBXUserID)\r\n\t\t\tapiUrl = format('usr/{Method}?PBXUserID={PBXUserID}',basicData);\r\n\t\t\r\n fetchData(apiUrl).then((data) => {\r\n\t\t\tstate.loading = false;\r\n if (data) {\r\n\t\t\t\tstate.selected = data.SettingValue;\r\n }\r\n else{\r\n\t\t\t\tstate.show_error = true;\r\n\t\t\t}\r\n\t\t\tthis.setBasicFeature(state);\r\n }).catch((message)=>{\r\n\t\t\tstate.loading = false;\r\n\t\t\tstate.show_error = true;\r\n\t\t\tthis.setBasicFeature(state);\r\n });\r\n }\r\n\r\n onChangeBasic =(state, event)=>{\r\n\t\tlet checked = event.target.checked;\r\n\t\tlet bodyJson = {\r\n\t\t\tServiceNumber: this.props.ServiceNumber,\r\n\t\t\tPBXUserID: this.props.PBXUserID,\r\n\t\t\tSettingValue: checked\r\n\t\t};\r\n\t\tlet body = JSON.stringify(bodyJson);\r\n\t\tlet headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.defaultXpolicy\r\n\t\t};\r\n\t\tstate.selected = checked;\r\n\t\tstate.loading = true;\r\n\t\tstate.show_success = false;\r\n\t\tstate.show_error = false;\r\n\t\tthis.setToFalseAllSuccessAndError();\r\n\t\tthis.setBasicFeature(state);\r\n\r\n\t\tpost(\"usr/\" + state.details.api, \"POST\", body, headers)\r\n\t\t.then(response =>{\r\n\t\t\tif(response.ok)\r\n\t\t\t{\r\n\t\t\t\tstate.selected = checked;\r\n\t\t\t\tstate.loading = false;\r\n\t\t\t\tstate.show_success = true;\r\n\t\t\t\tthis.setBasicFeature(state);\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tstate.selected = checked;\r\n\t\t\t\tstate.loading = false;\r\n\t\t\t\tstate.show_error = true;\r\n\t\t\t\tthis.setBasicFeature(state);\r\n\t\t\t}\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n\t\t\tstate.selected = checked;\r\n\t\t\t\tstate.loading = false;\r\n\t\t\t\tstate.show_error = true;\r\n\t\t\t\tthis.setBasicFeature(state);\r\n\t\t});\r\n\t}\r\n\t\r\n setBasicFeature = (newState) => {\r\n\t\t//check if this mount\r\n\t\tif(!this.refs.mainDiv) return;\r\n\t\t// BServiceID:2\r\n\t\t// IsActive:true\r\n\t\t// IsActiveSpecified:true\r\n\t\t// ServiceName:\"AnonymousCallRejection\"\r\n switch(newState.details.api){\r\n\t\t\tcase \"CallRejection\":\r\n\t\t\t\tthis.setState({...{anynomous_call_rejection: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"CallerId\": \r\n\t\t\t\tthis.setState({...{caller_id: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"CallWaiting\":\r\n\t\t\t\tthis.setState({...{call_waiting: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"LineIdRestriction\":\r\n\t\t\t\tthis.setState({...{connected_line_id_restrictions: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"DontDisturb\":\r\n\t\t\t\tthis.setState({...{do_not_disturb: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"MusicOnHold\":\r\n\t\t\t\tthis.setState({...{music_on_hold: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"OutboundCallerIdBlock\":\r\n\t\t\t\tthis.setState({...{outbound_caller_id_block: newState}});\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"BargeIn\":\r\n\t\t\t\tthis.setState({...{bargein_exempt: newState}});\r\n\t\t\t\tbreak;\r\n\t\t}\r\n }\r\n\r\n\tsetToFalseAllSuccessAndError = () =>{\r\n\t\tlet state = this.state;\r\n\t\tstate.anynomous_call_rejection.show_success = false;\r\n\t\tstate.anynomous_call_rejection.show_error = false;\r\n\t\tstate.bargein_exempt.show_success = false;\r\n\t\tstate.bargein_exempt.show_error = false;\r\n\t\tstate.caller_id.show_success = false;\r\n\t\tstate.caller_id.show_error = false;\r\n\t\tstate.call_waiting.show_success = false;\r\n\t\tstate.call_waiting.show_error = false;\r\n\t\tstate.connected_line_id_restrictions.show_success = false;\r\n\t\tstate.connected_line_id_restrictions.show_error = false;\r\n\t\tstate.do_not_disturb.show_success = false;\r\n\t\tstate.do_not_disturb.show_error = false;\r\n\t\tstate.music_on_hold.show_success = false;\r\n\t\tstate.music_on_hold.show_error = false;\r\n\t\tstate.outbound_caller_id_block.show_success = false;\r\n\t\tstate.outbound_caller_id_block.show_error = false;\r\n\t\tthis.setState(state);\r\n\t}\r\n\r\n\tviewMoreLink = () => {\r\n\t\tlet account = config.storedAccountNumber();\r\n\t\tif (account) {\r\n\t\t\tlet sn = \"\";\r\n\t\t\tif (this.props.ServiceNumber !== \"\") {\r\n\t\t\t\tsn = this.props.ServiceNumber;\r\n\t\t\t} else {\r\n\t\t\t\tlet pbx = this.props.PBXUserID;\r\n\t\t\t\tlet idx = pbx.indexOf(\"@\");\r\n\t\t\t\tsn = pbx.substr(0, idx);\r\n\t\t\t}\r\n\t\t\tlet iframeUrl = '/iframe_page/MSP_SUBSCRIBER/' + account + '/' + sn;\r\n\t\t\treturn View All Features\r\n\t\t} else return null;\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn(\r\n\t\t\t\r\n
\r\n \r\n
\r\n Call Logs\r\n {this.props.ServiceNumber} {this.extension()}\r\n
\r\n\r\n
\r\n \r\n {this.callLogFilter()}\r\n {this.callLogFilter()}\r\n {this.callLogFilter()}\r\n
\r\n {\r\n (this.state.date_type === \"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 {this.getTab()}\r\n
\r\n \r\n View All Call Logs & Details\r\n
\r\n \r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n\r\n\trenderBasicFeatureControl=()=>{\r\n\r\n\t\tlet enableFeatures = [];\r\n\t\tlet state = this.state;\r\n\t\tif(state.anynomous_call_rejection.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.anynomous_call_rejection));\r\n\t\tif(state.bargein_exempt.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.bargein_exempt));\r\n\t\tif(state.caller_id.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.caller_id));\r\n\t\tif(state.call_waiting.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.call_waiting));\r\n\t\tif(state.connected_line_id_restrictions.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.connected_line_id_restrictions));\r\n\t\tif(state.do_not_disturb.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.do_not_disturb));\r\n\t\tif(state.music_on_hold.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.music_on_hold));\r\n\t\tif(state.outbound_caller_id_block.enable)\r\n\t\t\tenableFeatures.push(this.getBasicFeatureItem(enableFeatures.length, state.outbound_caller_id_block));\r\n\t\t\r\n\t\tif(enableFeatures.length < 8){\r\n\t\t\tlet emptyMessage = \"\";\r\n\t\t\tif(state.loading){\r\n\t\t\t\temptyMessage = (\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t
Basic Features
\r\n\t\t\t\t\r\n\t\t\t\t\t{this.renderBasicFeatureControl()}\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t{this.viewMoreLink()}\r\n\t\t\t\t\t
\r\n\t\t\t\tNo basic features options
);\r\n\t\t\t}\r\n\r\n\t\t\tlet cnt = 8 - enableFeatures.length;\r\n\t\t\tenableFeatures.push(\r\n\t\t\t\t{emptyMessage}\r\n\t\t\t
);\r\n\t\t}\r\n\t\treturn enableFeatures;\r\n\t}\r\n\r\n\tgetBasicFeatureItem(key, state){\r\n\t\tlet showSuccess = \"\";\r\n\t\tif(state.show_success){\r\n\t\t\tshowSuccess = Success!
\r\n\t\t\t\t\r\n\t\t}\r\n\r\n\t\tlet showError = \"\";\r\n\t\tif(state.show_error){\r\n\t\t\tshowError = The switch failed! Please try again.
\r\n\t\t}\r\n\r\n\t\tlet showLoading = \"\"\r\n\t\tif(state.loading){\r\n\t\t\tshowLoading = \r\n\t\t\t\t\t
;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{this.onChangeBasic(state,e)}}\r\n\t\t\t\t\tlabel={state.details.label} info={state.details.info} />\r\n\t\t\t\t\t{showSuccess}\r\n\t\t\t\t\t{showError}\r\n\t\t\t\t\t{showLoading}\r\n\t\t\t
);\r\n\t}\r\n\r\n}\r\n\r\nexport default BasicFeatures;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { connect } from 'react-redux';\r\nimport { fetchData, post } from '../../../requests/api_calls';\r\nimport * as config from '../../../requests/config';\r\nimport * as helper from '../../../scripts/helper';\r\n\r\nconst StructureNum = \"StructureNum\",\r\n City = \"City\",\r\n ElevationNum = \"ElevationNum\",\r\n State = \"State\",\r\n UnitType = \"UnitType\",\r\n UnitNum = \"UnitNum\",\r\n ZipCode = \"ZipCode\",\r\n StreetName = \"StreetName\",\r\n StreetNumber = \"StreetNumber\",\r\n HouseNumber = \"HouseNumber\",\r\n PostDirectional = \"PostDirectional\",\r\n PreDirectional = \"PreDirectional\",\r\n StreetType = \"StreetType\",\r\n StreetSuffix = \"StreetSuffix\",\r\n Street1 = \"Street1\",\r\n Street2 = \"Street2\",\r\n PhoneNumber = \"PhoneNumber\",\r\n DirectionPrefix = \"DirectionPrefix\",\r\n DirectionSuffix = \"DirectionSuffix\",\r\n ElevationType = \"ElevationType\",\r\n StructureType = \"StructureType\",\r\n County = \"County\"\r\n\r\nconst emptye911Address = {\r\n savingLoading: false,\r\n savingShowSuccess: false,\r\n savingErrorMessage: \"\",\r\n savingShowError: false,\r\n showAddress: false,\r\n StructureNum: \"\",\r\n City: \"\",\r\n ElevationNum: \"\",\r\n State: \"\",\r\n UnitType: \"\",\r\n UnitNum: \"\",\r\n ZipCode: \"\",\r\n StreetName: \"\",\r\n HouseNumber: \"\",\r\n StreetNumber: \"\",\r\n PostDirectional: \"\",\r\n PreDirectional: \"\",\r\n StreetType: \"\",\r\n StreetSuffix: \"\",\r\n Street1: \"\",\r\n Street2: \"\",\r\n PhoneNumber: \"\",\r\n IsActive: false,\r\n Address1: '',\r\n Address2: '',\r\n DirectionPrefix:\"\",\r\n DirectionSuffix:\"\",\r\n ElevationType :\"\",\r\n StructureType :\"\",\r\n County :\"\"\r\n};\r\n\r\nconst states = {\r\n 'Alabama': 'AL',\r\n 'Alaska': 'AK',\r\n 'American Samoa': 'AS',\r\n 'Arizona': 'AZ',\r\n 'Arkansas': 'AR',\r\n 'California': 'CA',\r\n 'Colorado': 'CO',\r\n 'Connecticut': 'CT',\r\n 'Delaware': 'DE',\r\n 'District Of Columbia': 'DC',\r\n 'Federated States Of Micronesia': 'FM',\r\n 'Florida': 'FL',\r\n 'Georgia': 'GA',\r\n 'Guam': 'GU',\r\n 'Hawaii': 'HI',\r\n 'Idaho': 'ID',\r\n 'Illinois': 'IL',\r\n 'Indiana': 'IN',\r\n 'Iowa': 'IA',\r\n 'Kansas': 'KS',\r\n 'Kentucky': 'KY',\r\n 'Louisiana': 'LA',\r\n 'Maine': 'ME',\r\n 'Marshall Islands': 'MH',\r\n 'Maryland': 'MD',\r\n 'Massachusetts': 'MA',\r\n 'Michigan': 'MI',\r\n 'Minnesota': 'MN',\r\n 'Mississippi': 'MS',\r\n 'Missouri': 'MO',\r\n 'Montana': 'MT',\r\n 'Nebraska': 'NE',\r\n 'Nevada': 'NV',\r\n 'New Hampshire': 'NH',\r\n 'New Jersey': 'NJ',\r\n 'New Mexico': 'NM',\r\n 'New York': 'NY',\r\n 'North Carolina': 'NC',\r\n 'North Dakota': 'ND',\r\n 'Northern Mariana Islands': 'MP',\r\n 'Ohio': 'OH',\r\n 'Oklahoma': 'OK',\r\n 'Oregon': 'OR',\r\n 'Palau': 'PW',\r\n 'Pennsylvania': 'PA',\r\n 'Puerto Rico': 'PR',\r\n 'Rhode Island': 'RI',\r\n 'South Carolina': 'SC',\r\n 'South Dakota': 'SD',\r\n 'Tennessee': 'TN',\r\n 'Texas': 'TX',\r\n 'Utah': 'UT',\r\n 'Vermont': 'VT',\r\n 'Virgin Islands': 'VI',\r\n 'Virginia': 'VA',\r\n 'Washington': 'WA',\r\n 'West Virginia': 'WV',\r\n 'Wisconsin': 'WI',\r\n 'Wyoming': 'WY'\r\n};\r\n\r\nclass e911Modal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = {\r\n showUser911: props.showUser911,\r\n E911ButtonText: props.showUser911 ? 'Temporarily Update Current 911 Service Address' : 'See 911 Address List',\r\n elist911Loading: false,\r\n list911: [\r\n emptye911Address\r\n ],\r\n existingList911: [\r\n emptye911Address\r\n ],\r\n e911AddressLoading: false,\r\n e911Address: emptye911Address,\r\n existinge911Address: emptye911Address,\r\n AccountNumber: this.props.AccountNumber,\r\n ServiceNumber: this.props.ServiceNumber,\r\n showModal: props.showModal || false\r\n };\r\n this.getE911List = this.getE911List.bind(this);\r\n this.getList911Addresses = this.getList911Addresses.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n handleClose() {\r\n let state = { ...this.state };\r\n state.showModal = false;\r\n this.setState(state);\r\n }\r\n\r\n handleShow() {\r\n let state = { ...this.state };\r\n state.e911AddressLoading = true;\r\n state.elist911Loading = true;\r\n state.showModal = true;\r\n state.list911 = [];\r\n state.e911Address = null;\r\n this.setState(state);\r\n\r\n let list911 = `usr/Get911List?AccountNumber=${state.AccountNumber}`;\r\n this.fetch911List(list911);\r\n if (this.state.showUser911) {\r\n let list911Address = `usr/Get911Address?ServiceNumber=${state.ServiceNumber}`;\r\n this.fetch911Address(list911Address);\r\n }\r\n }\r\n\r\n fetch911List = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n\r\n let state = { ...this.state };\r\n if (data) {\r\n state.existingList911 = data;\r\n state.list911 = state.existingList911 && state.existingList911.length > 0 ? state.existingList911.slice() : [];\r\n }\r\n state.elist911Loading = false;\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.elist911Loading = false;\r\n fetch_error: message.toString()\r\n this.setState(state);\r\n });\r\n }\r\n\r\n fetch911Address = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n //console.log(JSON.stringify(data));\r\n let state = { ...this.state };\r\n state.e911Address = data;\r\n state.existinge911Address = data;\r\n state.e911AddressLoading = false;\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.e911AddressLoading = false;\r\n fetch_error: message.toString()\r\n this.setState(state);\r\n });\r\n }\r\n\r\n getE911List = () => {\r\n if (this.state.elist911Loading) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n if (this.state.existingList911.length === 0) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n let addresses = [];\r\n\r\n this.state.existingList911.forEach((e99Address, i) => {\r\n e99Address.Address1 = '';\r\n e99Address.Address2 = '';\r\n let addressLine1 = this.getAddressLine1(e99Address);\r\n let addressLine2 = this.getAddressLine2(e99Address);\r\n\r\n e99Address.Address1 = addressLine1;\r\n e99Address.Address2 = addressLine2;\r\n\r\n addresses.push((\r\n No address
\r\n\r\n
\r\n );\r\n }\r\n if (editableAddress.showAddress) {\r\n addresses.push((this.addressForm(addresses.length, editableAddress, i, \"911List\")));\r\n }\r\n else {\r\n addresses.push(No address
\r\n| */}\r\n | Phone Number | \r\nAddress | \r\nStatus | \r\n\r\n |
|---|
\r\n
\r\n );\r\n }\r\n\r\n if (!this.state.existinge911Address) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n let e99Address = this.state.existinge911Address;\r\n let addresses = [];\r\n e99Address.Address1 = '';\r\n e99Address.Address2 = '';\r\n let addressLine1 = this.getAddressLine1(e99Address);\r\n let addressLine2 = this.getAddressLine2(e99Address);\r\n\r\n e99Address.Address1 = addressLine1;\r\n e99Address.Address2 = addressLine2;\r\n\r\n addresses.push((\r\n No address
\r\n| Phone Number | \r\nAddress | \r\nStatus | \r\n\r\n |
|---|
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Fill in all that apply and allow 10 minutes for address to validate in our system after updating.
\r\n\r\n Reset\r\n Reset to Primary Address\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(indexInArray, StreetNumber, type, x) }} />\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {/* \r\n { this.handleOnChange(indexInArray, StreetSuffix, type, x) }} /> */}\r\n {/* */}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(indexInArray, StreetName, type, x) }} />\r\n
\r\n \r\n {/*
\r\n \r\n \r\n { this.handleOnChange(indexInArray, StreetName, type, x) }}/>\r\n
*/}\r\n \r\n \r\n \r\n
\r\n \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.handleOnChange(indexInArray, StreetSuffix, type, x) }} />\r\n
\r\n \r\n
\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.handleOnChange(indexInArray, UnitNum, type, x) }} />\r\n
\r\n \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.handleOnChange(indexInArray, ElevationNum, type, x) }} />\r\n
\r\n \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.handleOnChange(indexInArray, StructureNum, type, x) }} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(indexInArray, City, type, x) }} />\r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(indexInArray, County, type, x) }} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(indexInArray, ZipCode, type, x) }} />\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {saveElement}\r\n {closeElement}\r\n
\r\n \r\n
\r\n Phone Numbers
\r\n {this.getE911List()}\r\n\r\n
\r\n Addresses
\r\n {this.getList911Addresses()}\r\n\r\n
\r\n \r\n
\r\n {this.props.SuccessMessage}
\r\n )\r\n }\r\n\r\n let loadingMessage = \"\";\r\n if (this.props.showLoading) {\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n\r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass SaveButton extends Component {\r\n render() {\r\n if (this.props.disabled)\r\n return ();\r\n else\r\n return ();\r\n }\r\n};\r\n\r\nexport default e911Modal;","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { fetchData } from './../requests/api_calls';\r\nimport format from 'string-format';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport * as settings from './../scripts/settings';\r\nimport E911Modal from './profile/modals/e911Modal';\r\n\r\nclass ProfileInfo extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props)\r\n }\r\n\r\n initialState = (props) => {\r\n return {\r\n fetch_error: \"\",\r\n loading: true,\r\n profile: {},\r\n isIpTrunking: props && props.isIpTrunking ? props.isIpTrunking : false,\r\n hasE911: true\r\n };\r\n }\r\n componentDidMount() {\r\n this.fetchProfileInfo(this.getProfileApiUrl(), settings.noResultsMsg);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.ServiceNumber !== prevProps.ServiceNumber ||\r\n this.props.PBXUserID !== prevProps.PBXUserID) {\r\n this.fetchProfileInfo(this.getProfileApiUrl(prevProps), settings.noResultsMsg);\r\n }\r\n }\r\n\r\n fetchProfileInfo = (apiPath, errorMsg) => {\r\n this.setState(this.initialState(this.props));\r\n fetchData(apiPath).then((data) => {\r\n if (data !== null && data !== undefined) {\r\n this.loadData(data);\r\n this.setState({ loading: false });\r\n }\r\n else {\r\n this.setState({ profile: {}, loading: false });\r\n }\r\n }).catch((message) => {\r\n this.setState({ ...{ loading: false, fetch_error: message.toString() } });\r\n });\r\n }\r\n\r\n loadData = (data) => {\r\n let b911 = false;\r\n if (data.HasE911 && data.HasE911.toString() === 'true')\r\n b911 = true;\r\n this.setState({ ...{ profile: data, loading: false, hasE911: b911 } });\r\n }\r\n\r\n render() {\r\n let profileURL = '/profile/';\r\n if (this.state.profile.ServiceNumber && this.state.profile.ServiceNumber !== '')\r\n profileURL += this.state.profile.ServiceNumber;\r\n else\r\n profileURL += \"%20\";\r\n\r\n if (this.state.profile.PBXUserId && this.state.profile.PBXUserId !== '')\r\n profileURL += '/' + this.state.profile.PBXUserId;\r\n\r\n if (this.state.loading) {\r\n return (\r\n \r\n
);\r\n }\r\n return (\r\n \r\n
\r\n \r\n
Profile
\r\n\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n getRegularProfile() {\r\n let profile = \"\";\r\n profile = (\r\n
\r\n \r\n
\r\n {this.getName()}
\r\n\r\n\r\n
\r\n \r\n\r\n {this.props.IsAdmin ? this.getAdminProfile() : this.getRegularProfile()}\r\n\r\n
\r\n
\r\n \r\n
\r\n View Profile\r\n
\r\n \r\n
);\r\n\r\n let department = \"\";\r\n department = (\r\n {this.getCompany()}
\r\n {this.state.profile.Designation}
\r\n \r\n {this.state.profile.E911Street1} {this.state.profile.E911Street2}
{this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n
);\r\n\r\n let serviceNumber = \"\";\r\n serviceNumber = (\r\n \r\n Department\r\n
\r\n {this.state.profile.Department}
\r\n \r\n
);\r\n\r\n let email = \"\";\r\n email = (\r\n \r\n Service Number:\r\n
\r\n {this.state.profile.ServiceNumber}Ext. {this.state.profile.Extension}
\r\n \r\n
);\r\n\r\n let userid = \"\";\r\n // if(this.state.profile.PBXUserId)\r\n userid = (\r\n \r\n Email:\r\n
\r\n {this.state.profile.Email}
\r\n \r\n
);\r\n\r\n let enterpriseID = \"\"\r\n // if(this.state.profile.ParentAccountNumber)\r\n enterpriseID = (\r\n \r\n User ID:\r\n
\r\n {this.state.profile.PBXUserId}
\r\n \r\n
);\r\n\r\n let groupID = \"\"\r\n // if(this.state.profile.LocationAccountNumber)\r\n groupID = (\r\n \r\n Enterprise ID:\r\n
\r\n {this.state.profile.ParentAccountNumber}
\r\n \r\n
);\r\n\r\n let emapID = \"\"\r\n // if(this.state.profile.ImapID)\r\n if (this.state.isIpTrunking === false)\r\n emapID = (\r\n \r\n Group ID:\r\n
\r\n {this.state.profile.LocationAccountNumber}
\r\n \r\n
);\r\n\r\n\r\n let networkClass = \"\"\r\n // if(this.state.profile.ImapID)\r\n if (this.state.isIpTrunking === false)\r\n networkClass = (\r\n \r\n IMAP ID:\r\n
\r\n {this.state.profile.ImapID}
\r\n \r\n
);\r\n\r\n let portalLoginUsername = \"\";\r\n // if(this.state.profile.PortalUsername)\r\n portalLoginUsername = (\r\n \r\n Network Class of Service:\r\n
\r\n {this.state.profile.NetworkCOS}
\r\n \r\n
);\r\n\r\n let groupEmailMobilePagerYahooId = \"\";\r\n // if(this.state.profile.Email ||\r\n // this.state.profile.Mobile ||\r\n // this.state.profile.Pager ||\r\n // this.state.profile.YahooId ){\r\n if (this.state.isIpTrunking === false)\r\n groupEmailMobilePagerYahooId = (\r\n \r\n Portal Login Username:\r\n
\r\n {this.state.profile.PortalUsername}
\r\n \r\n
);\r\n // }\r\n\r\n\r\n let e911AddressSection = \"\"\r\n // if(this.state.profile.E911Street1 ||\r\n // this.state.profile.E911Street2 ||\r\n // this.state.profile.E911City ||\r\n // this.state.profile.E911State ||\r\n // this.state.profile.E911Zip)\r\n e911AddressSection = (\r\n \r\n Email:\r\n
\r\n {this.state.profile.Email}
\r\n Mobile:\r\n {this.state.profile.Mobile}
\r\n Pager:\r\n {this.state.profile.Pager}
\r\n YahooId:\r\n {this.state.profile.YahooId}
\r\n \r\n
);\r\n\r\n\r\n let location = \"\";\r\n // if(this.state.profile.Location)\r\n location = (\r\n \r\n E911 Address:\r\n
\r\n {this.state.profile.E911Street1} {this.state.profile.E911Street2}
\r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n \r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n
);\r\n\r\n\r\n let phoneModel = \"\";\r\n // if(this.state.profile.Location)\r\n phoneModel = (\r\n \r\n Location:\r\n
\r\n {this.state.profile.Location}
\r\n \r\n
);\r\n\r\n\r\n let macAddress = \"\";\r\n // if(this.state.profile.DeviceMAC)\r\n macAddress = (\r\n \r\n Phone Model:\r\n
\r\n {this.state.profile.DeviceModel}
\r\n \r\n
);\r\n\r\n let language = \"\";\r\n // if(this.state.profile.Language)\r\n if (this.state.isIpTrunking === false)\r\n language = (\r\n \r\n Mac Address:\r\n
\r\n {this.state.profile.DeviceMAC}
\r\n \r\n
);\r\n\r\n let timezone = \"\";\r\n // if(this.state.profile.TimeZone)\r\n timezone = (\r\n \r\n Language:\r\n
\r\n {this.state.profile.Language}
\r\n \r\n
);\r\n\r\n let temporarilyUpdate911ServiceAddress = \"\";\r\n // if(this.state.profile.Email)\r\n temporarilyUpdate911ServiceAddress = (\r\n \r\n TimeZone:\r\n
\r\n {this.state.profile.TimeZone}
\r\n \r\n
);\r\n\r\n let passwordRecovery = \"\";\r\n passwordRecovery = (\r\n \r\n
\r\n \r\n
);\r\n\r\n return (\r\n \r\n Password Recovery Email:\r\n
\r\n {this.state.profile.Email}
\r\n {/* \r\n */}\r\n \r\n {profile}\r\n {userid}\r\n {enterpriseID}\r\n {department}\r\n {groupID}\r\n {serviceNumber}\r\n {emapID}\r\n {portalLoginUsername}\r\n {networkClass}\r\n {groupEmailMobilePagerYahooId}\r\n {e911AddressSection}\r\n {location}\r\n {phoneModel}\r\n {macAddress}\r\n {language}\r\n {timezone}\r\n {temporarilyUpdate911ServiceAddress}\r\n {passwordRecovery}\r\n
);\r\n }\r\n\r\n getRegularProfile_bk() {\r\n\r\n\r\n let department = \"\";\r\n // if(this.state.profile.Location)\r\n department = (\r\n \r\n
);\r\n\r\n let location = \"\";\r\n // if(this.state.profile.Location)\r\n location = (\r\n \r\n Department :\r\n
\r\n {this.state.profile.Department}
\r\n \r\n
);\r\n\r\n let serviceNumber = \"\";\r\n // if(this.state.profile.ServiceNumber)\r\n serviceNumber = (\r\n \r\n Location:\r\n
\r\n {this.state.profile.Location}
\r\n \r\n
);\r\n\r\n let userID = \"\";\r\n // if(this.state.profile.ServiceNumber)\r\n userID = (\r\n \r\n Service Number:\r\n
\r\n {this.state.profile.ServiceNumber}Ext. {this.state.profile.Extension}
\r\n \r\n
);\r\n\r\n\r\n let portalLoginUsername = \"\";\r\n // if(this.state.profile.PortalUsername)\r\n portalLoginUsername = (\r\n \r\n User ID:\r\n \r\n
\r\n \r\n
);\r\n\r\n let phoneModel = \"\";\r\n // if(this.state.profile.Location)\r\n phoneModel = (\r\n \r\n Portal Login Username:\r\n
\r\n {this.state.profile.PortalUsername}
\r\n \r\n
);\r\n\r\n\r\n let macAddress = \"\";\r\n // if(this.state.profile.DeviceMAC)\r\n macAddress = (\r\n \r\n Phone Model:\r\n
\r\n {this.state.profile.DeviceModel}
\r\n \r\n
);\r\n\r\n let timezone = \"\";\r\n // if(this.state.profile.TimeZone)\r\n timezone = (\r\n \r\n Mac Address:\r\n
\r\n {this.state.profile.DeviceMAC}
\r\n \r\n
);\r\n\r\n let passwordRecovery = \"\";\r\n passwordRecovery = (\r\n \r\n TimeZone:\r\n
\r\n {this.state.profile.TimeZone}
\r\n \r\n
);\r\n\r\n return (\r\n \r\n Password Recovery Email:\r\n
\r\n {this.state.profile.Email}
\r\n \r\n {department}\r\n {location}\r\n {serviceNumber}\r\n {userID}\r\n {portalLoginUsername}\r\n {phoneModel}\r\n {macAddress}\r\n {timezone}\r\n {passwordRecovery}\r\n
);\r\n }\r\n\r\n\r\n getAdminProfile() {\r\n let profile = \"\";\r\n profile = (\r\n
);\r\n\r\n let portalLoginUsername = \"\";\r\n portalLoginUsername = (\r\n {this.getCompany()}
\r\n {this.state.profile.Designation}
\r\n \r\n {this.state.profile.SVCStreet1} {this.state.profile.SVCStreet2}
{this.state.profile.SVCCity}, {this.state.profile.SVCState} {this.state.profile.SVCZip}\r\n
\r\n {this.state.profile.SVCCity}, {this.state.profile.SVCState} {this.state.profile.SVCZip}\r\n
\r\n
);\r\n\r\n let e911AddressSection = \"\"\r\n e911AddressSection = (\r\n \r\n Portal Login Username:\r\n
\r\n {this.state.profile.PortalUsername}
\r\n \r\n
);\r\n\r\n let passwordRecovery = \"\";\r\n passwordRecovery = (\r\n \r\n E911 Address:\r\n
\r\n {this.state.profile.E911Street1} {this.state.profile.E911Street2}
\r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n \r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n
\r\n
);\r\n\r\n return (\r\n \r\n Password Recovery Email:\r\n
\r\n {this.state.profile.Email}
\r\n \r\n {profile}\r\n {portalLoginUsername}\r\n {e911AddressSection}\r\n {/* {passwordRecovery} */}\r\n
)\r\n }\r\n\r\n getName() {\r\n if (this.state.loading)\r\n return \"\";\r\n\r\n if (this.props.IsAdmin) {\r\n if (this.state.profile.FirstName || this.state.profile.LastName)\r\n return this.state.profile.FirstName + \" \" + this.state.profile.LastName;\r\n else\r\n return \"Admin\";\r\n }\r\n else {\r\n if (this.state.profile.FirstName || this.state.profile.LastName)\r\n return (\r\n \r\n {this.state.profile.FirstName + \" \" + this.state.profile.LastName} \r\n Calling Line ID: {this.state.profile.CallingLineFirstName + \" \" + this.state.profile.CallingLineLastName}\r\n \r\n );\r\n else {\r\n return (Not Available)\r\n }\r\n }\r\n }\r\n getProfileApiUrl = () => {\r\n let apiUrl = 'usr/UserProfile';\r\n\r\n if (this.props.ServiceNumber && this.props.PBXUserID) {\r\n apiUrl += \"?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}\";\r\n }\r\n else if (this.props.ServiceNumber) {\r\n apiUrl += \"?ServiceNumber={ServiceNumber}\";\r\n }\r\n else if (this.props.PBXUserID) {\r\n apiUrl += \"?PBXUserID={PBXUserID}\";\r\n }\r\n return format(apiUrl, this.props);\r\n }\r\n\r\n getCompany() {\r\n if (this.props.IsAdmin)\r\n return (\r\n \r\n {this.state.profile.CustomerName}
\r\n Enterprise ID: {this.state.profile.ParentAccountNumber}\r\n \r\n
) : app?.ApplicatoinName.toLowerCase().trim() === \"voice analytics\" &&\r\n ({app.ApplicatoinName}\r\n window.open(app.ApplicationURL, \"_blank\")} className=\"btn\">Connect\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n \r\n )\r\n }\r\n\r\n appList = () => {\r\n if (this.state.loading) {\r\n return {app.ApplicatoinName}\r\n window.open(app.ApplicationURL, \"_blank\")} className=\"btn\">Connect\r\n
\r\n \r\nNo applications are available.
\r\n }\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\nexport default Applications;","import React from 'react';\r\nimport { GridCell } from '@progress/kendo-react-grid';\r\n\r\n\r\n\r\nclass WrappedCell extends GridCell {\r\n\r\n render() {\r\n let fieldName = this.props.field;\r\n return (\r\n \r\n
\r\n \r\n
Applications
\r\n\r\n {this.appList()}\r\n {/*
\r\n \r\n View All Applications\r\n
*/}\r\n {this.props.dataItem[fieldName]}
\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getEditViewButton = () => {\r\n // if (this.state.ContactDetails.CanEdit === true)\r\n return (\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 } else return;\r\n }\r\n\r\n speedDialSetting = () => {\r\n let current = JSON.parse(JSON.stringify(this.state.ContactDetails.SpeedDialCode));\r\n let existing = JSON.parse(JSON.stringify(this.state.ContactDetails.OldSpeedDialCode));\r\n let codes = this.state.SpeedDialCodes;\r\n if (existing !== '' && _.indexOf(codes, existing) < 0) {\r\n codes.push(existing);\r\n codes.sort();\r\n }\r\n\r\n if (this.state.SpeedDialEnabled && codes && codes.length > 1 && codes != undefined) {\r\n return (\r\n Enable Speed Dial:
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n this.handleOnChange(\"SpeedDialCode\", e)}\r\n value={current}\r\n className=\"form-control\">\r\n \r\n {this.formatSpeedDialOption(codes)}\r\n
\r\n
\r\n )\r\n } else return;\r\n }\r\n\r\n getSaveMessage = () => {\r\n if (this.state.saving)\r\n {\r\n return (\r\n
Note: Some Speed Dial codes conflict with certain Feature Access Codes. See below for a list of conflicting Speed Dial codes that completely over-ride their Feature Access Code functionality when active: \r\n
\r\n
\r\n \r\n
\r\n #31 Calling Line ID Delivery Blocking Persistent Deactivation
\r\n #40 Call Forwarding Busy To Voice Mail Deactivation
\r\n #41 Call Forwarding No Answer To Voice Mail Deactivation
\r\n #43 Call Waiting Persistent Deactivation
\r\n #58 Group Call Park
\r\n #70 Night Service Activation Manual Override
\r\n #71 Night Service Deactivation Manual Override
\r\n #72 Forced Forwarding Activation
\r\n #73 Forced Forwarding Deactivation
\r\n #76 Call Forwarding Selective Activation
\r\n #77 Call Forwarding Selective Deactivation
\r\n #80 Make Outgoing Call as Call Center
\r\n #81 Make Personal Outgoing Call
\r\n #83 Escalate Call to Supervisor
\r\n
\r\n \r\n #40 Call Forwarding Busy To Voice Mail Deactivation
\r\n #41 Call Forwarding No Answer To Voice Mail Deactivation
\r\n #43 Call Waiting Persistent Deactivation
\r\n #58 Group Call Park
\r\n #70 Night Service Activation Manual Override
\r\n #71 Night Service Deactivation Manual Override
\r\n #72 Forced Forwarding Activation
\r\n #73 Forced Forwarding Deactivation
\r\n #76 Call Forwarding Selective Activation
\r\n #77 Call Forwarding Selective Deactivation
\r\n #80 Make Outgoing Call as Call Center
\r\n #81 Make Personal Outgoing Call
\r\n #83 Escalate Call to Supervisor
\r\n
\r\n {this.state.saveResultsMessage}\r\n
\r\n );\r\n } else if (this.state.savingShowSuccess) {\r\n return (\r\n Success
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n}\r\n\r\n render() {\r\n let { Name, TN, CanEdit, SpeedDialCode } = this.state.ContactDetails;\r\n if (this.state.isAdd) {\r\n return (\r\n \r\n \r\n Add Contact\r\n
\r\n \r\n
\r\n \r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\r\n
\r\n
\r\n \r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\r\n
\r\n \r\n { if (this.props.enabled === true) this.props.onChange(this.props.id, e) }} />\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n \r\n { if (this.props.enabled === true) this.props.onChange(this.props.id, e) }} />\r\n
\r\n );\r\n }\r\n }\r\n};\r\n\r\nContactTextField.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n textvalue: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n onChange: PropTypes.func\r\n}\r\n\r\nexport default AddEditEnterpriseContact;","import React, { Component } from 'react';\r\nimport * as apiCalls from '../requests/api_calls';\r\nimport WrappedCell from '../components/wordWrappedCell'\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { DataLoadingSpinner } from '../components/spinners';\r\nimport { connect } from 'react-redux';\r\nimport { headerToolTip } from '../components/ellipsisHeaderTooltip';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\n//\r\nimport AddEditContact from './profile/modals/addEditUserContactModal';\r\n//\r\n\r\nexport default class UserContactWidget extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const handleDeleteItem = this.handleDeleteItem.bind(this);\r\n const updateFromModal = this.updateFromModal.bind(this);\r\n const SpeedDialCodes = this.provideSpeedDialCodes.bind(this);\r\n\r\n class ContactEditButton extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n //let { Name, TN, SpeedDialCode, CanEdit } = this.props.dataItem;\r\n return (\r\n \r\n {\r\n event.target.value = null;\r\n }}\r\n />\r\n \r\n
)\r\n }\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener('loadend', () => {\r\n let body = reader.result.split(',')[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'ContactBook/UploadUserLevelContacts';\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n UserId: sessionStorage.SelectedUserId\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n });\r\n this.fetchContactDetails();\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n });\r\n }\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n uploadBtn = () => {\r\n return (\r\n \r\n {\r\n event.target.value = null;\r\n }}\r\n />\r\n \r\n\r\n
)\r\n }\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener('loadend', () => {\r\n let body = reader.result.split(',')[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'ContactBook/UploadUserLevelContacts';\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n UserId: sessionStorage.SelectedUserId\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n });\r\n this.fetchContactDetails();\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n });\r\n }\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n gridContent = () => {\r\n if (this.state.loading) {\r\n return \r\n
\r\n )\r\n }\r\n};","import React, { Component } from 'react';\r\nimport Voicemails from './voicemails/card';\r\nimport CallLogs from './call_logs';\r\nimport BasicFeatures from './basic_features';\r\nimport ProfileInfo from './profile_info';\r\nimport Applications from './applications';\r\nimport EnterpriseContactWidget from './user_contact_widget';\r\nimport { connect } from 'react-redux';\r\nimport { userIsAdmin, redirectToLanding, atRootPath } from './../scripts/helper';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport Masonry from \"react-masonry-component\";\r\nimport { fetchData } from \"./../requests/api_calls\";\r\n//import TC_MODAL from './modals/termsAndConditionsModal';\r\n\r\nclass Dashboard extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n const profileInfo = this.profileInfo.bind(this);\r\n const voicemail = this.voicemail.bind(this);\r\n const applications = this.applications.bind(this);\r\n const basicFeatures = this.basicFeatures.bind(this);\r\n const enterpriseDirectory = this.enterpriseDirectory.bind(this);\r\n let widgets = [\r\n { toggle: 'showProfileInfo', functionName: profileInfo, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showVoicemail', functionName: voicemail, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showEnterpriseContacts', functionName: enterpriseDirectory, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showBasicFeatures', functionName: basicFeatures, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showApplications', functionName: applications, widgetRow: 0, widgetColumn: 0 },\r\n\r\n ];\r\n let isIpTrunking = sessionStorage.isSelectedServiceIpTrunking !== null && sessionStorage.isSelectedServiceIpTrunking !== undefined ? sessionStorage.isSelectedServiceIpTrunking : false;\r\n isIpTrunking = isIpTrunking !== undefined && isIpTrunking !== null && isIpTrunking.toString() === 'true' ? true : false;\r\n\r\n this.state = {\r\n serviceLoading: props.serviceLoading,\r\n ServiceNumber: props.ServiceNumber,\r\n PBXUserID: props.PBXUserID,\r\n AccountNumber: props.AccountNumber,\r\n DirectoryNumber: props.DirectoryNumber,\r\n Extension: props.Extension,\r\n widgets: widgets,\r\n showProfileInfo: true,\r\n showVoicemail: isIpTrunking ? false : true,\r\n showCallLogs: true,\r\n showApplications: true,\r\n showBasicFeatures: isIpTrunking ? false : true,\r\n showEnterpriseContacts: isIpTrunking ? false : true,\r\n\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (userIsAdmin() && atRootPath()) {\r\n redirectToLanding();\r\n }\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.serviceLoading !== this.state.serviceLoading || (props.ServiceNumber !== undefined && props.ServiceNumber !== this.state.ServiceNumber) ||\r\n (props.PBXUserID !== undefined && props.PBXUserID !== this.state.PBXUserID)) {\r\n this.setState({\r\n serviceLoading: props.serviceLoading,\r\n ServiceNumber: props.ServiceNumber,\r\n PBXUserID: props.PBXUserID,\r\n AccountNumber: props.AccountNumber,\r\n DirectoryNumber: props.DirectoryNumber,\r\n Extension: props.Extension,\r\n showProfileInfo: props.showProfileInfo !== null && props.showProfileInfo !== undefined ? props.showProfileInfo : this.state.showProfileInfo,\r\n showVoicemail: props.showVoicemail !== null && props.showVoicemail !== undefined ? props.showVoicemail : this.state.showVoicemail,\r\n showCallLogs: props.showCallLogs !== null && props.showCallLogs !== undefined ? props.showCallLogs : this.state.showCallLogs,\r\n showApplications: props.showApplications !== null && props.showApplications !== undefined ? props.showApplications : this.state.showApplications,\r\n showBasicFeatures: props.showBasicFeatures !== null && props.showBasicFeatures !== undefined ? props.showBasicFeatures : this.state.showBasicFeatures,\r\n showEnterpriseContacts: props.showEnterpriseContacts !== null && props.showEnterpriseContacts !== undefined ? props.showEnterpriseContacts : this.state.showEnterpriseContacts\r\n });\r\n }\r\n }\r\n\r\n enterpriseDirectory = () => {\r\n let { IsWholesale } = sessionStorage;\r\n if (this.state.PBXUserID && this.state.PBXUserID.length > 0 && this.state.showEnterpriseContacts === true && IsWholesale.toString().toLowerCase() == \"true\")\r\n return \r\n
\r\n
\r\n \r\n {
\r\n \r\n {this.uploadBtn()}\r\n
\r\n {/* {this.getName()}
*/}\r\n{displayTitle()} {this.state.ContactsCopy.length}
\r\n\r\n
\r\n
\r\n \r\n {this.gridContent()}\r\n \r\n \r\n Remove Contact? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Are you sure you wish to remove this contact from User Directory?
\r\n {columnWidgets}\r\n
\r\n );\r\n columnWidgets = [];\r\n columnWidgets = columnObj.column2.map((f) => {\r\n return f;\r\n });\r\n let column2 = (\r\n \r\n {columnWidgets}\r\n
\r\n );\r\n\r\n //call logs must take the entirety of the 3rd column. no other widget can be rendered there:\r\n let column3 = (\r\n \r\n {this.state.showCallLogs === true ? this.callLogs() : null}\r\n
\r\n );\r\n\r\n return (\r\n \r\n {/* \r\n {column1}\r\n {column2}\r\n {column3}\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n let isLoading = this.state.serviceLoading;\r\n\r\n \r\n \r\n if (isLoading === false){\r\n if(this.state.AccountNumber === undefined && this.state.DirectoryNumber === undefined && this.state.ServiceNumber === undefined)\r\n {\r\n return No Service associated with User. Please select a Menu item on the left
\r\n }else{\r\n return this.renderColumns();\r\n }\r\n }\r\n \r\n else\r\n return \r\n \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n recordRadioDataField = (val, key, type = \"radio\") => {\r\n return (\r\n \r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n
\r\n )\r\n }\r\n\r\n pauseResumeRadioDataField = (val, key, type = \"radio\") => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n />\r\n
\r\n
\r\n )\r\n }\r\n\r\n inputDataField = (val, key, type = 'text') => {\r\n if (type === \"text\" || type === \"number\") {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n Cancel\r\n
\r\n )\r\n }\r\n\r\n modalBody = () => {\r\n if (!this.state.Loading) {\r\n if (this.state.Settings && this.state.Settings !== null) {\r\n let {\r\n PropertyChanged,\r\n enableCallRecordingAnnouncementField,\r\n enableRecordCallRepeatWarningToneField,\r\n enableVoiceMailRecordingField,\r\n pauseResumeNotificationField,\r\n recordCallRepeatWarningToneTimerSecondsField,\r\n recordingOptionField,\r\n isVoiceMessagingAssignedField,\r\n displayCallRecordingConnectField\r\n } = this.state.Settings;\r\n const isVoiceMessagingAssigned = this.state.Settings.isVoiceMessagingAssignedField\r\n return (\r\n \r\n
\r\n {this.formButtons()}\r\n
\r\n )\r\n } else {\r\n return (\r\n Record Call:
\r\n {this.dataRow(\"\", this.recordRadioDataField(recordingOptionField.toString(), \"recordingOptionField\"))}\r\n {this.dataRow(\"Play Call Recording Start/Stop Announcement\", this.inputDataField(enableCallRecordingAnnouncementField, \"enableCallRecordingAnnouncementField\", \"checkbox\"))}\r\n {isVoiceMessagingAssigned === false ? null : (this.dataRow(\"Record Voice Messaging\", this.inputDataField(enableVoiceMailRecordingField, \"enableVoiceMailRecordingField\", \"checkbox\")))}\r\nPause / Resume Notification:
\r\n {this.dataRow(\"\", this.pauseResumeRadioDataField(pauseResumeNotificationField.toString(), \"pauseResumeNotificationField\"))}\r\nRecording Notification:
\r\n {this.dataRow(\"Repeat Call Record Warning Tone\", this.callWarningTone(enableRecordCallRepeatWarningToneField, recordCallRepeatWarningToneTimerSecondsField))}seconds\r\n {/*\"enter amount between 10 seconds and 1800 seconds\"
*/}\r\n {\"* Repeat Record Call Warning Tone Timer: Value must be >= 10 and <= 1800\"}\r\n {sessionStorage.hasCallRecordingMenu === 'true'\r\n ? (this.dataRow(\"Display Call Recording Connect Access Link in User Dashboard\", this.inputDataField(this.state.displayCallRecordingConnectField, \"displayCallRecordingConnectField\", \"checkbox\")))\r\n : null}\r\n\r\n {this.formButtons()}\r\n
No Available Data
\r\n )\r\n }\r\n } else {\r\n return\r\n
\r\n }\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({ showConfirmModal: false });\r\n this.props.RefreshDataSource();\r\n }\r\n\r\n cardContent = () => {\r\n return (\r\n \r\n {this.state.ErrorMsg}\r\n
\r\n No Available Data
\r\n }\r\n // } else {\r\n // returnNo Available Data
\r\n )\r\n }\r\n } else {\r\n return\r\n
\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n}","import React, { Component, Fragment } from 'react';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport CallRecordingUsers from './callRecordingUsers';\r\nimport VoiceUserSettings from './voiceUserSettings';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { userIsAdmin, } from '../../scripts/helper';\r\n\r\nexport default class CallRecordingMain extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n loading: false,\r\n tab: \"users\",\r\n UsersList: [],\r\n FullListings: [],\r\n Settings: null,\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchUserLists();\r\n this.fetchCallRecordingUrl();\r\n }\r\n\r\n fetchCallRecordingUrl = async () => {\r\n await this.setState({ loading: true });\r\n let path = 'admin/GetCallRecordingUrl';\r\n await apiCalls.fetchData(path).then((data) => {\r\n if (data) {\r\n this.setState({\r\n Link: data[0].ApplicationURL,\r\n });\r\n } else {\r\n this.setState({\r\n Link: 'https://' + process.env.REACT_APP_CALL_RECORDING_ENV + '/SAML/Login' + '?came_from=%2Fdashboard',\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchUserLists = async () => {\r\n await this.setState({ loading: true });\r\n let path = 'admin/UserCallRecordingList';\r\n await apiCalls.fetchData(path).then((data) => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data));\r\n this.setState({\r\n UsersList: data,\r\n FullListings: copy,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n UsersList: [],\r\n FullListings: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n tabDisplay = () => {\r\n return (\r\n \r\n
\r\n {this.cardContent()}\r\n \r\n \r\n
\r\n \r\n this.changeTab('users')}\r\n >\r\n Call Recording Users\r\n \r\n this.changeTab('settings')}\r\n >\r\n Voice User Settings\r\n \r\n
\r\n );\r\n };\r\n\r\n changeTab = (tabName) => {\r\n this.setState({ tab: tabName })\r\n }\r\n\r\n getTab() {\r\n let { tab, loading, UsersList, FullListings } = this.state;\r\n switch (tab) {\r\n case \"users\":\r\n return \r\n
\r\n \r\n {this.getTab()}\r\n
\r\n \r\n
\r\n }\r\n }\r\n\r\n render() {\r\n // let MIAREC_DOMAIN = process.env.REACT_APP_CALL_RECORDING_ENV;\r\n // let link = 'https://' + MIAREC_DOMAIN + '/SAML/Login' + '?came_from=%2Fdashboard';\r\n //console.log(\"DASH LINK\", link);\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React from \"react\";\r\n// https://icons.getbootstrap.com/\r\n\r\nexport const dashboard = (\r\n \r\n);\r\n\r\nexport const locations = (\r\n \r\n);\r\n\r\nexport const servicesAndUsers = (\r\n \r\n);\r\n\r\nexport const devices = (\r\n \r\n);\r\n\r\nexport const trunking = (\r\n \r\n);\r\n\r\nexport const enterpriseSettings = (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {!sessionStorage.emulatedUser || sessionStorage.emulatedUser == false ? Call Recording
\r\n\r\n Admin Dashboard\r\n
: null}\r\n {/* {this.tabDisplay()} */}\r\n {this.cardContent()}\r\n \n \n \n this.exportUsers()}>Export Users\n
\n )\n } else return null;\n }\n\n exportUsers = () => {\n this.refs.downloadCsv.submit();\n this.refs.exportBtn.text = 'Downloading...';\n setTimeout(() => { \n this.refs.exportBtn.text = 'Export Users';\n }, 2000);\n }\n\n deviceStatus = () => {\n if (this.props.updated) {\n return (\n \n {this.realtimeRegistrationStatus()}\n Update\n
\n )\n } else if (this.state && this.state.loading) {\n return (\n \n
\n )\n } else return Check Registration Status\n }\n\n render() {\n return (\n \n
\n )\n }\n}\n\nexport default DeviceStatuses;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \n {this.deviceStatus()}\n
\n \n {this.exportBtn()}\n
\n Click the Reset button below to temporarily reset your Voicemail PIN to 8642. When you access your voicemail with this temporary PIN, you will be prompted to assign a new PIN.
\r\n Reset Voicemail Pin\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n MAC Addresses:
\r\n{this.state.resultsMsg}
\n }\n }\n\n servicesCardInlineStyle = () => {\n // offset by 30 to account for missing table headers\n if (this.state.loading) return { height: this.state.gridHeight + 100 + 'px' }\n }\n\n servicesContent = () => {\n return (\n\n
\n )\n }\n\n render() {\n return (\n \n
\n Services & Users\n {this.state.services.length || null} \n \n \n {this.activeFilters()}\n \n \n\n
\n\n
\n \n \n
\n {/* */}\n \n {this.gridContent()}\n {this.resultsMessage()}\n
\n \n
\n )\n }\n\n};\n\nconst mapStateToProps = (state) => {\n return {\n locationAddress: state.reducer.LocationAddress,\n locationAccountNumber: state.reducer.LocationAccountNumber // from location seletion in devices component\n }\n}\n\nexport default connect(mapStateToProps)(withRouter(Services));","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { fetchData } from './../requests/api_calls';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as settings from './../scripts/settings';\r\nimport { headerToolTip } from '../components/ellipsisHeaderTooltip';\r\n\r\nclass Services extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sips: [],\r\n preFilter: props.location.state?props.location.state.preFilter:null,\r\n loading: true,\r\n gridHeight: (window.innerHeight - 210) + 'px'\r\n }\r\n this.fetchSips = this.fetchSips.bind(this);\r\n this.searchSips = this.searchSips.bind(this);\r\n this.sortChange = this.sortChange.bind(this);\r\n this.pageChange = this.pageChange.bind(this);\r\n const setServiceAndRedirect = this.setServiceAndRedirect.bind(this);\r\n\r\n class SelectServiceLink extends GridCell {\r\n render() {\r\n let item = this.props.dataItem;\r\n let textClass = item.PilotRegistered ? 'text-success' : 'text-danger';\r\n if (item.HasProfile) {\r\n return (\r\n \n {this.servicesContent()}\n
\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Trunking {this.state.sips.length}
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {/**/}\r\n \r\n {this.gridContent()}\r\n
\r\n {this.state.resultsMsg}
\r\n\r\n
\r\n )\r\n }\r\n};\r\n\r\nexport default Services;","import React, { Component } from 'react';\r\n\r\nclass SuperLink extends Component {\r\n\r\n render() {\r\n return(\r\n { this.props.label }\r\n );\r\n }\r\n}\r\n\r\nexport default SuperLink;","export default __webpack_public_path__ + \"static/media/credit-card-logos.4b65f716.png\";","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport SuperLink from './../../components/super_link'\r\nimport CCLogos from './../../images/credit-card-logos.png';\r\nimport CheckOne from './../../images/check_one.gif';\r\nimport CheckTwo from './../../images/check_two.gif';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\n\r\n\r\nclass PayModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.setSchedule = this.setSchedule.bind(this);\r\n this.setStep = this.setStep.bind(this);\r\n this.state = { step: \"choose\", recurValue: \"\", showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n setSchedule(event){\r\n \tthis.setState({recurValue: event.target.value})\r\n }\r\n\r\n setStep(event) {\r\n \tconsole.log(event.target.dataset.step)\r\n\r\n \tif (event.target.dataset.step == 'choose') {\r\n\t\tthis.handleClose()\r\n \t}\r\n \tthis.setState({step: event.target.dataset.step})\r\n\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \t\tMake a Payment\r\n \r\n\r\n \r\n {this.sipsContent()}\r\n
\r\n \r\n\t \r\n\t\t\t\t{this.getStep()}\r\n\r\n\t\t\t
\r\n \r\n\t
\r\n\t
\r\n \t\t)\r\n \t} else if (this.state.step == \"confirm\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t 213123123\r\n\t
\r\n\t \r\n\t $123.32\r\n\t
\r\n\t \r\n\t 1/22/2018\r\n\t
\r\n\t \r\n\t One-time Credit Card Payment\r\n\t
\r\n\t \r\n\t AR24FG298\r\n\t
\r\n\t \r\n\t
\r\n\t \t\r\n\t
\r\n\t \r\n\t
\r\n\t
\r\n )\r\n } else if (this.state.step == \"start\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t John Smith\r\n\t
\r\n\t \r\n\t American Express\r\n\t
\r\n\t \r\n\t XXX XXX XXX 1291\r\n\t
\r\n\t \r\n\t 6/19\r\n\t
\r\n\t \r\n\t 123.32\r\n\t
\r\n\t \r\n\t One-time Credit Card Payment\r\n\t
\r\n \t\r\n\t \t\r\n\t\t\t \r\n\t
\r\n\t \t\r\n\t \t\r\n\t
\r\n\t \r\n\t\t\t\t
\r\n\r\n\t\t
\r\n\t
\r\n\t )\r\n } else if (this.state.step == \"completed-bd\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t \r\n\t\t
\r\n\r\n\t\t \r\n\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t \t\r\n\t\t \t\r\n\t\t \t
\r\n\t\t
\r\n\r\n\t\t \r\n\t\t \t
\r\n\t\t \r\n\t\t\t
\r\n\t\t \t\r\n\t\t\t \r\n\t\t\t {console.log(\"value changed to:\" + e.sender.value())}}\r\n\t\t\t\t />\r\n\t\t\t
\r\n\t\t \t\r\n\t\t\t
\r\n\t\t \r\n\t\t\t \r\n\t\t\t \r\n\t\t\t
\r\n\t\t \t\r\n\t\t
\r\n\t\t {this.getSchedule()}\r\n\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t
\r\n\t\t \r\n\t
\r\n\t \t\r\n\t \t\r\n\t
\r\n\t\t \r\n\t
\r\n\t
\r\n \t\t)\r\n \t} else if (this.state.step == \"confirm-bd\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t John Smith\r\n\t
\r\n\t \r\n\t Savings\r\n\t
\r\n\t \r\n\t XXX XXX XXX\r\n\t
\r\n\t \r\n\t XXX XXX XXX\r\n\t
\r\n\t \r\n\t AR24FG298\r\n\t
\r\n\t \r\n\t
\r\n\t \t\r\n\t
\r\n\t \r\n\t
\r\n\t
\r\n )\r\n } else if (this.state.step == \"start-bd\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t John Smith\r\n\t
\r\n\t \r\n\t Savings\r\n\t
\r\n\t \r\n\t XXX XXX XXX\r\n\t
\r\n\t \r\n\t XXX XXX XXX\r\n\t
\r\n \t\r\n\t \t\r\n\t\t\t \r\n\t
\r\n\t \t\r\n\t \t\r\n\t
\r\n\t \r\n\t\t 
\r\n\t\t 
\r\n\r\n\t\t
\r\n\t
\r\n\t )\r\n } else if (this.state.step == \"choose\") {\r\n \t\treturn (\r\n\t\t\t\r\n\t\t \t
\r\n\t\t \r\n\t\t\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t As it appears on your checks\r\n\t\t\t\t
\r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t \r\n\t\t\t\t \t\r\n\t\t\t\t \t\r\n\t\t\t\t
\r\n\t\t\t\t \r\n\t\t \t
\r\n\t\t \r\n\t\t \r\n\t\t\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\t Recurring Payment
\r\n\t\tFunds will be drafted no earlier than three days before your invoice's due date. Please be advised when you set up a recurring payment method any past due balance as well as current charges will be charged on your first scheduled payment date.
\r\n\t\t\t \r\n\t\t\t\t\r\n\t\t \t\r\n\t\t
\r\n\t\t\t \r\n\t
\r\n\t \t\r\n\t \t\r\n\t
\r\n\t\t \r\n\t\t\t\t
\r\n\t )\r\n \t}\r\n }\r\n\r\n getSchedule() {\r\n \tif (this.state.recurValue == \"once\") {\r\n \treturn (\r\n\t \tChoose a payment option, edit recurring payment information, or cancel recurring payment option.
\r\n\t\t\r\n\t\t \t
\r\n\t\t \r\n\t\t \t\t\r\n\t\t \t
\r\n\t\t \t\r\n\t\t \t\t\r\n\t\t \t
\r\n\t\t \r\n \t\r\n \t\r\n
\r\n\t )\r\n \t}\r\n }\r\n};\r\n\r\nexport default PayModal;\r\n","export default \"data:image/gif;base64,R0lGODlhgQFDAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/MM//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8zzP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xmzMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswAM8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZzJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkzM5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bMzGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZmM2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZMzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMAzDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDMMwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAzzAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAMwAAALu7S+PjXP//e83Med7ehP39mLu7cPn5mOzslN/fmdHRlrGxhf/6Zv/6bP/9lf/5kf/7mYiCNv/3mdLDVP3teP/oZv/uiEM9I//smf/gfYl8U97Mmf/hmf/Sa//ai76YTP/Mg+7Mmf/Umf/QlP/QmeS2icyjev///yH5BAEAAP8ALAAAAACBAUMAAAj/AAUgGIDgmoAEAgkevHKtBcMrCa4ZbCFRosOGBQMlYNiiYMWDIAeKHJAQQUiCChEiHGlyJUmXLEGibHnSJMqSIGGerJmyZE+eMVXiFCoy51CgPYnONFoUZlKfNJ1GrbkzKFSqSpsinSrVaNevTJfqzNrzqdOEBoUKTcu0RceZA1qsTOBWgNuBbum+PdgirFahUHta7atV8FOeJa2yQLl4YOMBLEA+joyQMOSEkzFLZrzZcefLCDN7Ds159NWsQP2KxWpXM2nHCi1Hhm06c2XMpUELEH356V+BrFd6PZqA8snHJQ16Tqk8KcOK0KNLn069uvXr2LNr3869u/fv4MOL/x9Pvrx5iRqpLr32tC9bsL/j+56v1ar8+qvt0/fLH7X/1PDlJyB+BKpGk34EGlYgWQfux2BwpxEnIYIKKmgghCOBZNlQbA2UHFwNJhjihWMBGKFV/WFIX4UjghXgVPelWOKMJzqoIow2WvWihf/ReB+PN5JYI46FiTTSNSy5xJZxXE1oo4/DIWhUYLNBlpttu3H2mm4jGYfll1q2ZppsuHlG22VnVgnmmJqlWSaaVpoZp268dfmZl2GSuaWaYa6pG5luurnnnZ/R9JhJpjUX2UzvBdYkhUQauOKPv0m12oM9Ohnik5peupVZEfoIYpQggqqjo5JGmilLpnpKaasxrv86KXMnKcmaob5R1ZeoU7mWpZx4AstfUSIepdioJUIKZEwxErtfsV01q5C0myLK5VIiLosti8YiixO1JlLIZG4mNZocqVKqZSKv3Kp7qou3wuqqp5iuay+8yZaq6lb8ukvvkKkKWe/Anz7K4rz7sisSe012mB9IhG5pbbB0hqnwrMbJ1ufGwjqVsa9+fiyomHOKXPKbakb8K5x8sjmyxo6Zk8A5LaCjFW8Um4wlzH+i7CvPLbOssp+4OquoALRmC62Elu6bbrcthooqWRCjppCAVatH04oJdZu1Ul1TjZBqMv1W9kHm8EMOP+gotLY59ahjDzvwxHPOQPDscxhCnmb/HdNNKI7dFeCG7fQf4X97aLZLQDV6W6NNuobOPuXoQ44+58RNOeXiZH6O5fqwY4/clXsOejn7qMP55eR0HncL6sQtTjlwC+B5C5mrMzvosatDkOexm+Ph2EVd7WxL5ojDeklxg+65APXAnXo9ny/PEtzCoy4A6/r0fvr0viMAN+bUxz23AJtbClwCm65vbUvfgFTP9ODQ0w483Ggz0DzuxONOOKhjWTnioTfj5OR9X8NRYlZzwLCURCfDM1HAFEeQwEFIAA77UKxyAg536KMc4kBHPdChvA+GcIQtSBs5HhPCBKADd5abHedE+ELhDUB5/ADh5G6oIRsqbx+t89lA/8ShjXM0LVXniMc2PgfCyrWOhjVTmwx1GD0YNjGGk6MizcxhwnJIMW1N/KIURWiOzFAvHPbw1EcGZo540EN0sSOj2hLmqHO441VOQ5iMoOYteJ1qg7ximGGWxMDb8EMbCZDHOxbpD6MocpH38IkgFvmOdUiSktsQnAD8QclGouQKlHyHIMImAEVC5CSTpKQ8BuAOdeCMUAjQBjg28g4sFAULlBxJKN8RSZBwUhAKSUcobenLd8gDIZzc5SoRQElbkgQBwlxHUYQpyp9VxCU7O8cjF3mFmgjTH8bbZSYhpkh5gIMcN7vSnRjDsYrV5krqHNRtXgaydlJMUQNgFIkCcf+NUyayFfJ4JE3kAVAvLFIoBA3oIkdCUC888iAm8UIrHPqOVnhDJPcIKDUjmMh3rGaR8nDoDAjSDnTARCJIUyD75CERLyRkkekg6Dv6QZCQBvQa3mDfQbzRHAGAVKQKmQFAVcINecRUmK24BzcqKg9BXGOZ75DIDNAiiJheY5QSGQBK1zghcsAjpg5tRTqm8o6xGuWqAfUCN1zC0pHaQx8Ii2vUeBUwWVWrrkEiisNslS8E8POU9wAoQbJRS5MENh0CIewp/SFYBCx1sQA9yGNFYlTJssKsLmHsMhVy2KsY0yn74FBzQqQ/LFwVoCKZ6UG2gdOmEBQcRWmFIFzyWZ//MJYV2YDROlrxDgTwNJPgmCQ0n4rTlbSiHwdh6QD46REMSuRMB/KqZVhKU+NQl07XGCmeWCoI2JaDHfzwFbOeabyfAOYsxdPKlIrkNz1Gq0I4EZC5Fkaqvz6kHvXgKTYcY0zI8NQbjXlHIAiCjWvsFzLvcCkLCowNygi4T/2tEii1ixlFcsM21TxTOKK3VYMIKB/lMCoLIqylfjJGEKN8zBWS+isBl+kdrODGOxU5DgGso6wC6Ed/39Hga0SSTPdAUocjktWoxaMeCVEkcokiytW0NilXnUk54CGUshisUpraI6vu+p8/9jHLKtkrSBxGE4YMWCTmCHIkB1LWgczA/8cgafMA3rzmAdQ2yCM1SW2bAkoZo4Sx/VRKbXVS0cL2BB/lQCnxfINIbtC0zTVp6iwFko5rvIMowjRKoZ2JAIbw9gpaqfQybWxp2RJknE9mSVn5wU8iOxdJhqEMPbqBkEq3QponMTACI8KKd4CzJSzlLa4R0A51WKZo7uzZyEIGS5bZU0P1hNg7p62boyXtKX9ViTZY8N/UykMgBc6zT5f53zh/OwH69RCkUaLjqxplG4vkLd8QwNIrdHsmj7R0U+6G0ncJgIApNWbVWBvohKRS1wIo8Fiv4VIBTLIV+s6GU+P9DogFGZgD6QdPJSKIpmR3KSy9xjbckVVFFwwd7f9oCSijilmftsIflV5KvJ9KEG60grcsH4g+4mFDIuVIrpzaMtB7pckj2vUgjmsN5BTCzzODpMA5Rdqd4cxms6o5zlanup2P6ctWsCLqUlEsMnk7ZziPxRuGponJB4UAcsAWJYMWQKUFsd+wKBIhEB/IU4XSD2zU8s3nXiqn/7sSqGf0GmNVSHEN/lRpxoO5z+0Jb/ZBjz9t49aRqfSAWZqyBHBjxeDkpyVZsNt1RAYfZbvW0vo6rXZd5XipUe+q2lusDC5MQA/56x2hHpoI/zfAgdjpk0e8Sm7jFPggGcfNTQ9LFyNA4TMQ9ei1lOHL4KPDEapHOBiT4Nb44xqs4Fj/gZFO9zcLYpzA1+9sHqx3ri8G8ZRRJGbgvBiWfnt/HeZUO/hR3o/TG6f34FTYQFM70VqVlhMfR3lDlyJe1oACcy8CgC6tciMMExaEVBT21U/4UHaRhBByRmdYZ1j+t3UIgWdwh1kE5WdEYlqJ92bRIQ9bxhBcdxDu4Fw2eCnmoA60xXXMJAi5pRqsgCSvVhEVpxIMkQ5vlmd2hlkMlxyjZlCCs3gRsVmxhH12UnQCoQ35gEpmF3LQgQ3rQ2nFxVIRiBAG9m9IVjTrlWw602w5ozJAA21pMldhuDgrg0/6xCADkADZhjQEZW/ChRKKdA/eEIgRxUuF2FsgQVAzgA2G/ygABtWIjbhkpYSEldZbredbqXZqQnVVgoNycCUQKJUa7VASAueBgiCJUYcArdCIQShuK0FzCLAN9xBVHTcAitSIj/hUI/GK2MBdZYhBF0UQDOcNhDgD8NBqkRcjA8APJcVjM+BUPEgQtMZS39B2bdeIEpEOtOZTqegNQ6UO7BBa/oJlW5ZS5OVzhpNlxhMv4fIvFCKKZcNXnTIQ+GBzFUGF2RCE21gS+CgRo+Z5EAeQ+BYdmPWPgvBrRmGCItENUWVRgmMOiFYlJgGBkJYAUQUdUecFFTEDudUTvGhn1wCRiRVygtCBSEeFwVURo4SAdSYd7rArwXhseSIA+pANBP/XeCSEOuzADeDAkdzADvYTDhx3BXXjDuKwDk7VePDADuIgh3BhMhlCh4hBlYxzRKvhevGRV7ZHjBKoFfugDfPQE9QDD0PZP/gjOuwQDmiZDfAwN2zpP+HQDkP5lj15lHNZl/cTlGfpP9zgDkPJDvFwl35pl3MJD/VwjfriF+RAD0i2M/XUMSvzhvN0MpU5GXTIegYTOvEwmG7UDuSTRWrDD3BjUqZJOaRJPR+EmjLzjlyWV/0Cm0YXL3gkI0lnhhhyEoHQdjl0Qugwmq0DRlMUQvwnPjm0D3K0Ni+0Q0+ZAOaQQr25NsGJQr95GavTm3IUQC0RfIChFTBDDlfwRnP/AzrwgBJmSZfgEA/wcD9zM5gggQ/asJ71I5jp2T/zGQ/goD/aIJjyaT/0gJbuiRD5MCBMRxWsMi4sEQgy05qUMhzQFnwyeSzy0YbyNJmRyYZu6IbPRm3GYW0tMVoB43QEc47lKC9RQ6JZtpuTMiV8uDlJ0XMgMZqoQw7kKDXRozZ6s2Wt6UIuNJov+hc9p6JC53M0IaSuGaL1gqKaqWVftkFDWjAPaHRi5h5aBhIqiqC6AUE9EYd6eFcoKqGQwZ2qYRxE4XTpZBrYBJVkiirOgqWHwhMUE3zCYhpXuBtiGqGgUo45IaeSx05tuhnS5i2QwkevOV5e6npLOl/ESKBT/3FmP+eAOmFe9TgrOJIeC8ITQupeQ4KoUyM1SioQlgqPnhKqr9lXVtqg5xWMT9qleEVXrJqkmioVFagUFwhffgWmNKEnJIMfnapJr8R2umGltKkgfNp5EdIXgToYP9MmfXqml9FeYvoqxlGgpnp0fLil34KtCWKsv2qhHDo08WShl6mmLxGMi4F0qsoo3cFP59Gu48Gu3gGv7jqv2yGv4GGv5YGv9Lqv/AoeX+mayyWbAGNXWrmiTmGkRyem1hqbg7qwrLebR0oWCCuwWjGxO1KoBis1FxuxAEuHyupH9EGqBYuqhMqkdCQSItqx6QGyq+epGduwIaGwYAYVKbuxX/8hsyxrskBCIzlLsB77qPNBFFEytDILSGHosEcbEugiJCaRqUETNMW6rNDlMxKjpuTaptsCJpaqtHoqtE4rRCfjJluLL0krHF0bLv/qLkN7tmbLFEsboUtbopUysUZLMGT7qTDLh7GZFRa7t/ayNP62qjWBsw+IsiYqqihbuF9mtxrbuJ/KuK8KgSNxG21rH8LKthPSGW4LJfChuULRGEZxpdsSKYR7jt6ZrZsyrTThE1mDrIsWGbS3XIbCtZ1ypcOSibcLsVUrt7RLhwjaGm0Lup8Lp7T7u3AbGsQbvLkCEwDQvM77vNAbvQAQCNJbvdZ7vdibvdprvdS7vdDbvd7/G77iO77cS77fa77XC77ou77s277u+77nC7/yy77qG771O7/4q733O777S7/5+78AHMDk278CXMAEjL0HXMD5m8D6i78MrMAQHMH+K8EQ/MDSa8EUvL4YXL7zu8EZ/MEg/LweHMLiO8LNa8IknL0oLMIOnMIu/MLxC8Pwi8IrLMMxjL41XL05bMM8jMM97L40/MMa3L47HL1FLMRIjMBJ7MMDvMT8S8Qt7MRSPMOBUMVWfMVYnMVavMVc3MVe/MVVbL5gPMZkXMZmfMVEfMZgPMVs3MZu/MZwHMdyPMd0XMd2fMd4nMd6vMd83Md+/MfPuwLhK8iAXMdWcMiEXMJW/1DI2ovIfbwCh7zIVoDBKxAIiczIb1zJhxwIi6y/nbwCl4zJ0VvJlpy/k0zCk2wFkAwAp7y9rSzKmczJrNy9kNzJh9y8qjzJsnzLudzJAADJwAzIkQy+tdy8xczKqozLtizIlnzLpJzMHyzLzjvJwazMhFzMlQzK0AzLU8zJ1DzLpDzLv2zJpMzMi1zFqTzOmxzKe8zJlYzL7jzLyezNu0y92VzO5PzNH5zNz5vKp6zJ7wzQoGzJ0szNUvzM3SvL2fzPpSzNslzP07vI/OzHmvzNBS3N/PzODH3OAy3JR0y+Ew3P4LzQBO3LpPzRBl3A/PzQgkzSJ3zOnfzQHh3R4//Mznlc0e580Z9cyqccxtM70OYsziCsyf1sz9Trz6pc0Klcyiktxfl81CUtz1XMzA0N0+LszwXNx9J8yqksyF0d0US91ORc1fIcwl090/fszR6tykD9yk2NxMG8yr98y9YMzbwsyXhtzOv8x9Ac13R9zI5c117t1bbsy/scycg81y2N2HMt0Y5t2G8Ny9qM0pFd2Za9xDZ90jZ92c672Xjs2Zz9wnS9za5M2W8c2KSdvSH9w6MN2tLr1qFtw+Wc2OEL2wadzqvtyXA91bTtvbYd2y980ontzGydy9psy82cyI4MzJCdx7rMzNqszKxczMut1p3N1Lk81FY83I6tzcD/DNjJPc3JzNzATcEEXcwKPdabzMk8Tc9ArdG83cfDDN9Bjc72bdQEDdU0jc6uDcDnfcvp3dG6/M1Y/d5QzdTlrcAkDeAebeBB3cruTc25rceIzN5Avd9o3dBeXdKQTL0+vc/N7M00LeFj/eAJvc4k3t8JDr8rLdPjDM4/PeInjtQdruJyzMtT/c4YLs4r3eDozOAh3OJWTd8xDtERTeP6vOIK3N5rneNGbeLrXNEtjeB8DOHqnc4QbdFR3dVBHcJMLtVjXdMyHuXePOU2ruTsK9eJXcurHMzJzMtsrtfELczXvNPUnddt3sud7ch0fdji3dh5PtjDHeeN7dho7r0BAQEAOw==\"","export default \"data:image/gif;base64,R0lGODlhggFJAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/MM//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8zzP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xmzMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswAM8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZzJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkzM5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bMzGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZmM2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZMzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMAzDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDMMwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAzzAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAMwAAANHRVIWENe7uYbu7TP//dP//hv//lry7b+7ujv39md3dhfn5mPPzmOXlmbGxhf/7kv/8mImIUtPRmP71bf/1mf/viUI9I//smf/eZv/jf//imb6ZTf/RcejFiOjMmYRtR//Ylf/Mg//Okv/QmPbLlcmjeNuyhf///yH5BAEAAP8ALAAAAACCAUkAAAj/ABEMQCAgwbWCCAUiaHHt2pUrLRQiRJhAgMSKFS8mHEjRIkeMHgmCVDjw40aRJzuSRLmyY8aSKF+yhGlyJUyVJmXijBny5kifO3OGRBCgKICiRosiIBky5U+eNmdqlElzak+NLak2fXrSZEKRBBWCden06oCCB0EibCHgmtAEDK8kgPmQbYK6V4BmvYqTBUe2All0DTtAcEW/GhEXRqjYsADAhfUCpSq1adStPR3v3XwT62SPjdeC/lqQ8FKhUGtKtqqTa+ugKO1ifq2zpODAQBXvpbw4sW3RaT3KDL6SYaAWERleC+RwAPPlc61KV727q0ecHXdqf0oddVWyl12X/6U9my9l2Nm5T2c9eHz56tVfr39rvv7nqN7Xt8/oVuLG4LIt1FBDLTAHF3QNQaQRY79x9BtCN5XU00mQtRTYfvXtFVpFkG34GGi/XcjhaIfl9luJIgrgYYei4SbQe5+dl1FCGPIkI4waBfhXjUJplp9KE6HIUYodnriRjxIJdBBBFQ5E3EfGldSQRQYy951W82VZFnw/ikeeZ1ZBKFV3Yb7knn7nOailWurBRh1ZN355X4w40scZe1wORmZ+TqbnUXAyxYXRFde0YNBBzFUmJ1Rn7ojlYiP6lqKHoanpHY4CAOWVRF0GOSGn/lU0J0orgjipkUVeiBuNi5IJHmo8Mv+6KJAoogdSRX1hFtqTwzkVJX8DogXoq2DauZqrrnrZlIRoXnfjXno2O6t6xjbL5ZrbXXfnm21Sa2N93YIbq62ZfsuUkn5WNOyMhqJUkGzImduorHVWFqCYkNaXLXm2GVmqqpEB7Bil/hYsMIMHx4nZtaO2mG9jOwpscL6p9vZwiIt1OuOXxFLk2EuKhbSkxSKNHBOhA6as8sost+zyyzDHLPPMNNds880456zzzjz37PPPDQXC1U39ecrWsHeSu+2Y5h7LdMfKSotp1E7HmmyGfD79bNWtKjovt+NSXazW9X7t8Fa8inwl1qmNbTW2S5OrsLVZZxv31m7PffW5Gk//Le7dfk8b9rxKr0YuTCRdw1lwSIK9sdLgEWtn5LeWjeupmOdL0sATO8ZipBaH5mLoGBNM5Gij3xYw6RJnrvrmCF98uuumym6756ivrrrpt8dOamf5jvx6n2K72XZV1codbd3e9k231FlWu3a4XUsf39/Tm9X2vtpLvr233nMP/ZVP/rdljz2eySrb1k+UsIqo1v762xHvvbbb+iU5kDcJ8G+Z/frbXgC1gz/NAY9pYLOQq8b2pvwBsDuNm9+6RAY17OXNblzDUPH09j0NKu96IJyMN+jRDQR0Ix8CiEc75MENfWQveghsGp4MBz7qeVBhvJlhDJ3Hw5UUDVcgeRKY/8plEt04DHepk58ShYTE+00GHdPh3Kn2sQ51oOMnUsyXOgawj8JcER0VE0xJztFFvxjtHPJYxz4K4o1w0KMg+DghN+ohAHYAEX5fLMg5tug+1kHKG2H0Xxgd9rv3/Ut3R4xfEmeHyEX2jom+iyS6AFayhTUMI+HQhxrfJrkuejIcNmSYRuyRwQSgo4v6KAg66BEPdsDjHXZ0lgA2sg9uoNCU+uAGAmyJEHys44QCOEf/KpKPbrwDHvKIpUbo4Y31+I+Y/svlSlrIS/xoJB/ckAc80DGAVNZDlwOwR7nGWZsXlYmIPPFUS5gFFHVGyJyq2Ui22LlOeKbTTJQZFnBo5f8nFoCTBfxbITzY0Q06elKNXGRj/6i4xp+kUpvvkEc8JsoOZraEmbzJojpSqEKE8COb26xdUwaKTHbkhB3vWM054rHJn+SjmQPAB0zYMdE0fpIe7WhHF2kHSSaWsJEDUMc/m5JLOuJmH/Dgh5/kMZCfdNEbO4XdHRNgGk9RFTtiaSdGUhMSnbwoXMbT1kCgpay2bGQ4ozKJCxXCjnYAcYTxOOY7JnpMAWATAb6MBz6uaBFbCrOhqrSnLlvYzW5I0yT0OAdfwck0mGZlHPAoI2MQOrB1+LIcadQkPtJoRdeV7pSITAA7yCG46qUmlbks5i5vaZ5zvJGZFEkNPiYaDxP/umZA4Tnf+DpozQ9eknBP6Q9HzCckdwlko2+EizuWe4+O9GO57hCER2T63OVKdx/dYIcAvgHde+TkHswNJh+hu9wZICQeAsDHcrnxjhS+i7zuMEk+SHYOhCw3JuB1R3MxAt9+cAOwgnBHP1DDjRwOBBvwtcg60CGAeUR3lg6GbxcGcgXoukstCMCCO+RSrhZAdx4hgS+IL7JejAqgutCNI1MJEmDzMtiIAypd7CDGU/jRzpFZbOIhczzj2AmvKkjzCXO+gQ+EXEMQ98iGQxhz5GwwZwYBO3I67tGcwEj5yZBqMpUFEQ++JjnJ19iGUrHplzAL5o1smcFyspHkJiJg/0oFFkcrGnIWJQmCzUdGyJSnfI1vkDgbF/aIPhw7JI6o+R57Fgg+9LGNVgB6IOJANKLd0QrzekHKrXCHP3ai5GvsVwD3aEWSKQ3iinw5HX1uSZ8r8kYWbOMaTmbz6gRxjYqooxttOciUcGs9GgI3WuK7Wg6DDZXyvUSIJ2GOPxYT4G8IYB/ZcEdGssEKbQgk1CK5R7UJAt5pswIcpnaHRFoBblAr7rvfrsgIuQFea9d5IK/21Hkb2pBmCmDOVB53ufPdkVDXgy7XEMf1ZPQNIWqjBa1ohTlIJABzZLow0QUHC7BhZoRh4cisyMZtspGOA7MiHUIKMOhELoBbC0TNe/+h8qffSOeGHGqCX+1joO/IN4JoVeZicufzCj2mZXkG5sTDCXMeMgt3I2C5qiz4WRKAdIvEuyJIr0jBPYL0kwvXXfO4Bj1kqhBBSHckCL9CVq0+VZF0Y9fX4CYLKq30Sb06X14HGCsEkcTD9LgiqB5dOZa77Kykwx0CH0AX3GFpTQslyUf3blb025O4d0TOV2BjPCqSdcwUnMMIeUei0F5rTg57g8DmoAdzW1pjG7kshApETFMpkOWqG+UFWW5J1JwR2ZM99vElSNZf04p07NIeuqSytO1dETWj5tVRb0o8pqRugfSjwZ3XSO8lQutWXOUaUN5tptScfHygOtMTNg3/oXxfkgC74xp9rwk2/u0O8osf8CShMiu8snsFv6P417hvQuZseyPr+v9L8iE1xiI1xju7s0Q2RjEMZ0aX80gJ6BjCgzblMXQJ8A58xXTuMEsJ8HQCwAriVhhTxxbLdRsc6IGBMXWNgWrXYA7dwGrdYH7Yx0sG0QrqxQoM8lys0BDf0BjywHwC8EYKMXUroYIDphD5FWYKQWnYkG8fwQ4S1Q6JJU8ZgWDnh33vAA60tlyZlhCvJggg0Q+01hDi8CX6ZRIzcH50BxNH+A1AdA3Wt1z4AA8qQoUNAWLI4YYeWHHxYCB09i00l1bXQmzIczznFFYbpE8jEmQEwRyqJw8j/zKC3VRwtZd70DeJs6c4uOcRtJcQSpYO82BYOAFeRthn6iVuONEP6WB9L/EOPrgPL7GJ03YNnugUqWgRFwdoqEYR6MBS+lBRrdRFZTED2oYPr4YFAmEO7uAFH6JmkXcY0bUNFdYKLUAw7qBxCHEFrcAK22AOqJIO8+cXVCZ2y9UOUAQTLdBtAkBp/4YA1MYRaIcVGBJWFxQ3A3QeCxI1OucqaaMQV7cRhHIFgSAI4zCJFSEPKDcQTZcAQjgA9zUQbZeOH4gArzZCdqVk2YBCa3USb9d67jAP35BpINYVD8lF+IB258AOgMGBLGCRPJZ14OgQ30Br6QAOxyVMCIFU7P+wHm+nZuYFde7naR+Ri0a2DeNRhgSBDazQCtjgNWpmX5W2DR6YfUEihLY3AAcpD3yoiICYc6DXNeFTOV+JHYvyQxr4J5E0dBVGR1CXgQkgDxzYkBIZHMmXdUnIlgKgZuKkLuQnOpGRg7dRhSmDGnPWEeyAdil0iSghi1IYYmmhginzDQMBRiASh/URh+d3l9cQkkyneAMgixJBZRSBfUJhX9mAEKGWfjZHYpjIdCvzFIOJgSIxddhlmIy0Y4rkgAaYSLVpG17zOOekGD/mQ26SAIEgjYAli/3AjLbhad+AalCGGMvxDVmXDqDBnIQilQZxD9sgnX62dB35DTnYk0T/BJHlaBjf8BzY4Bjq4EIWMSXdwHUPaRCeyJ1J6JFzxobOgmolgVRXcQ4tuBXgMA8qaCigRnjbQHJO8ml3cWTSSWktsGKqwXjX9p0eWQ/dwELa+FyrthXLdQ4yxQIBSoSRAWtXUHDfwBbogHaOI0uk1z1swqI/oibn43mFY07BoRrI9hTcgF4F4ZjSdh1U1hDbxhFBeg1Dem0DQm4SsTIh0Wl9Vm4ysVxr5ZANcQ8RUURNURDdsEb1x3Iq4xFFOg80uXQWoWTnZZMv4Q34QJE7NQD9UKUEmgCR1hCC8Hz84V0eoQ7KIYYMllJQwXimpjLUWV+O+Q2t9htIl1LQB2sD/7ZTH6mD36RdX9ObFpGPVTVV5bGYl6EpZCMdwLWPQectDNYOAiAP2cUO/9VLuoQQbyQPE9GqN1FL7YVevRVKMOGnliQR5zCIP0hYNBUP5IBM6yBw3WBRfVNM+FBkI7EO9ycAh4UA59AOJLEP79AOepUT6OBL+7BK8XAOu/EOCIUA3DpXLBUP8gCFynQlNLVXCeBaELoPK4YQyBRXUfh5Lvopv0UfYRlzMIRB/eoliHh6HPMSgdCm6uBKcwVOwLdLfpFL9vBTqaRXv+qtMfWhv0FFG9VTAhgw60BaJ9GC0fQNsdSAsbGXFOFYzqqAqmVLgCQAgfAYNDUw2iAPLuQX/P+gDeYQCAMpAPwgFMn1g8BEQomVNCSEQtiUSsMkLpQBTKylIwIhD1znWuygSZKFAC9bOb7pa3jzbo1BqdDjKXyZmzUWgRdhMmGlejFBaAjwTPeaWP1DEvGwU6pUUsgkTHxVLPoArhm7sR9VTA8bCFlytTfUExmZEUJTEOu6StbKdRtxuM+qWzW6P2+rteDCP2y7Eq7FIy6rLFvrtczDPpTKuRjSa5WETx+iiPwEuAaUIl5lEoNED2mED+AKWAUJD+VAW+YqV3E1UeugD/95GQohuCARGodrE24GPKrzsiLBDrN1rj8rE8Kbq4TjtOIjGgNbqV4pJILrqaWFvZHruR3/lLX0gi3tAXRvVkou+1steo8aiA5TOib7YLem5ElcJF+MJRTFyy3b+7nWpLrTuif+6x7hAjgh9K9ssxP5W8DCFnqTSqO2SojtARNkSVwJ2HNWqyFA8TkbCyqlcURnwzcH2K5bNDv7Oyaq6yEYTEkueyQLaBvRe73ah4/ZK4gzobx0Ar78xB6P05Xv0cA4FBLAmTv8aDPPATRGvDNF/DJJ3DNLLDNNfMRQbMRPHMVUXMU3Q8DHUsI0/Gvdi8UCEcCuEb1wI2T++hFizL8Z5MU1+r0IAcZc7Dde3ENlHL656h2KIXpPkcAPBMHykca/Bb11c7h4XBZuHC6CbEHElsgD/9wpgYgRaMvGnTvHPgy6kow3yrPD6zMSK8zDMqTI6lM58uK/fsQCJVwTmTwYj4xFqFLKLFEjlMNPmgzKsCLL9BLLbQw7dbexu1M6nXN3D6hEONbLwZw5hGFEOhQjbiw1NmTJomuvjszAeuyHZ3tBBCtK9FFD3vO52EzLZOzM2nPD6us04Ly+g9g+22y93rsZbVxB14sYOfwj1GvLUuW9J3xABWHDObI+vWnDuwwmqXzJ6ezK4mvKMDzL6QwU9VyPfKHQrdupVeNAl7rQPEdAEIQZAHDRGJ3RGr3RFx0IHP3RIB3SIj3SJA3SHj3SJ13SKK3SGJ3SLP3SMB3TMu3SMv9d0zZ90zid0yFN0zrd0zXN0xwN1D8N00Lt00bt00V91Eq91Exd0knd1FD91B2N1EQN1VZt01J91Vq91Ted1Vyt01nt1U5d1V9d1iZt1mid1i8t1mpN1iLN1iu91m2t1nA913Yd1Xdt1GFN1XKd119d134d2GAt2Dm91z1d14BN2DGd2Ird2CzN2I5t2IO91oFQ2ZZ92Zid2Zq92Zzd2Z792aBt2Y492ksd2qZ92qid2mGt2p1N2q792rAd27I927Rd27Z927id27q927zd277928Ad3Hm9AixN3MJ93Mhd01aw3Ma91lZg2yuw3M9tBWK9AoHQ3HbN3Mm93WVt3cv/HQjPTdLgfdErgN2xTd1WEN0AQN0qzd7DXdnmrdPuzd30jdHevd4nHd3hvdwXnd7UPd787d/hDQDRXeCEPd4YTd0G3t/pTd78bd3l3eBtLd0prd8Ovt8Szt/rTdwCTuCVPeD1Td/greD4bd0ezd4QbuLEPd4fPt7eTeKBDeEZjd4uft3W7eHpXd7XjeBtDd43jt8Njt4r/t3T7dEp3uIRbuMhTt8m7t41Ht1Gft0AgOAsXuRT/twyHtgw3t9RruNQft/kLdpz/eJSzuMILuM3juI2XuZWvuRMzuZTTtwQ7uTPTeV1buVPfuAgruZQLt1gDuRS3tZknt5mHt4yzt6V/93RdT7k+O3m9W3j7K3gAA7e8D3lcD7pQI7ehC3kVq7g3q3eQu7l853WCB7pPg7kQ37fNL7mjK7pjp7cBq7eBK7h6+3fxh3g053rFx7ogq3fui7rvn7hsz7rIG7WEh7rGm7htd7czB3kHI7hrx7tOJ3k0l7t1r7d8e3hlQ7c2V7b3X7t3K3hEt7ekK3W4v7tHz3qEy7hcJ3l4B7iKl7rL63urx3vtF7S9J7Wmu7uTo3u7x7cJn7iv57jtq7sCj7u2l3gxW7XHy7vD07wBW7w143wDa7wV/3fXi7rAW7hCT/iA27wsv7vvL3jFv7kZE7pHD7irJ7m2/7ec37nHq7j/+CN8pm+5oSu7f4u398d5zLO4pT+8zif6Adf56cu8ro95yN+5SV+5K1+0ir/5fx+10jP35hO4nBO5wc/8bwO1Yhu6oqu9Hwe5yXu44me6Ea/2z1f5R5e4mKP6VeO3s2+9Xld5mrP9Erv9irv51HP1AEO3z0P82H/5B9O9Qt/9rYt5Zq+6joe82D/9C8u53Jv14c+6f/d6H9f8zLf9zmv8x3N5ppe9XSv6j7O6Iaf2yH/8P496xz+7Buu3cSO5YWf3QkO+wXv7A6v38Yd7CFv1cdu6BOv6w+v+rSO+/Je+nMdEAA7\"","export default __webpack_public_path__ + \"static/media/E911retail.5abf1f79.pdf\";","export default __webpack_public_path__ + \"static/media/E911WL.a09f85fb.pdf\";","import React, { Component, Fragment } from \"react\";\r\nimport { Modal } from 'react-bootstrap';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { storedUserRole } from '../../../scripts/helper';\r\n\r\nexport default class CR_MODAL extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n //showCRModal: getTCValue() ? false : true,\r\n loading: false,\r\n //TCFlag: getTCValue(),\r\n showCRModal: false,\r\n TCFlag: \"\",\r\n submitted: false,\r\n UserID: sessionStorage.userId,\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // if (storedUserRole() === 'SUPER_ADMIN') {\r\n // this.fetchEnterpriseTerms();\r\n // } else {\r\n // this.fetchUserTerms();\r\n // }\r\n this.fetchEnterpriseCallRecordingPopUpCount();\r\n }\r\n\r\n fetchEnterpriseCallRecordingPopUpCount = async () => {\r\n let path = \"admin/GetEnterpriseCallRecordingPopUp\";\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n //showCRModal: data[0].TCFlag == true ? false : true,\r\n showCRModal: data[0].ShowedCount >= 3 ? false : true,\r\n //ShowedCount: data[0].ShowedCount,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n saveEnterpriseCallRecordingPopUpCount = async () => {\r\n await this.setState({ loading: true });\r\n //let path = storedUserRole() === 'SUPER_ADMIN' ? \"admin/UpdateEnterpriseTC\" : `usr/UpdateServiceTC?userId=${this.state.UserID}`;\r\n let path = \"admin/SaveEnterpriseCallRecordingPopUpCount\";\r\n\r\n //console.log(\"DTO\", dto);\r\n let response = await apiCalls.post(path, \"POST\").then(data => data).catch(err => console.error(err));\r\n if (response.ok) {\r\n sessionStorage.setItem(\"CallRecordingModalLoaded\", true);\r\n this.setState({ loading: false, showCRModal: false, submitted: true });\r\n } else {\r\n console.log(response);\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n callRecordingModal = () => {\r\n let { emulatedUser } = sessionStorage;\r\n if (!emulatedUser || emulatedUser == \"false\") {\r\n // no visibility when user emulates from RPX\r\n return (\r\n \r\n {/*
\r\n Please review the recent email communications from Momentum Telecom for important information. Contact your Momentum account manager (or Customer Support at 888.538.3960) to learn more and get details.
*/}\r\nIn preparation for this change, please review the recent email communications from Momentum Telecom for important information.
\r\nTo facilitate quick account setup, System Administrators should provide an updated list of Call Recording portal Administrators and Supervisors to our customer care team via email at: ccare@momentumtelecom.com
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n E911 Dialing Terms & Conditions\r\n
\r\n \r\n )\r\n } else return;\r\n }\r\n\r\n handleOpenModal = () => {\r\n this.setState({\r\n showTCModal: true,\r\n });\r\n }\r\n\r\n saveTermsAndConditions = async () => {\r\n await this.setState({ loading: true });\r\n let path = storedUserRole() === 'SUPER_ADMIN' ? \"admin/UpdateEnterpriseTC\" : `usr/UpdateServiceTC?userId=${this.state.UserID}`;\r\n let { TCFlag } = this.state;\r\n if (!TCFlag) {\r\n return;\r\n }\r\n let dto = { TCFlag };\r\n //console.log(\"DTO\", dto);\r\n let response = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n if (response.ok) {\r\n this.setState({ loading: false, showTCModal: false, submitted: true });\r\n } else {\r\n console.log(response);\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n splashDisplay = () => {\r\n const src = sessionStorage.IsWholesale == \"true\" ? E911MSAWs : E911MSARetail;\r\n return (\r\n \r\n
\r\n {this.splashDisplay()}\r\n {acceptCheckBox()}\r\n
\r\n By clicking, you acknowledge that you have read and agree to be bound by the E911 Dialing Terms and Conditions.
\r\n\r\n
\r\n \r\n \r\n {/* */}\r\n \r\n
\r\n \r\n \r\n \r\n this.getInvoice()} >View Invoice\r\n
\r\n )\r\n } else null;\r\n }\r\n\r\n getInvoice = () => {\r\n this.refs.downloadInvoice.submit();\r\n this.refs.invoiceBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.invoiceBtn.text = 'View Invoice';\r\n }, 2000);\r\n }\r\n\r\n addressPartTwoSeparator = () => {\r\n if (this.state.Street2BILL) return ;\r\n }\r\n\r\n billingData = () => {\r\n if (this.state.loading) {\r\n return
\r\n {this.state.Street2BILL} {this.addressPartTwoSeparator()}\r\n {this.state.CityBILL}, {this.state.StateBILL} {this.state.ZipBILL}\r\n\r\n ) : '';\r\n let billingMessage = process.env.REACT_APP_BILLING_MESSAGE;\r\n\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n if(sessionStorage.enterpriseType==='VOICE' ||sessionStorage.enterpriseType==='DATA'|| sessionStorage.enterpriseType==='MIXED'){\r\n return (\r\n \r\n {
\r\n {this.state.CustomerName}
\r\n\r\n
\r\n \r\n
\r\n\r\n {!session.IsWholesale() && (!billingMessage || billingMessage === '') && (\r\n \r\n {address}\r\n
\r\n \r\n \r\n {this.state.CustomerAccountNumber}\r\n
\r\n \r\n
)\r\n }\r\n {!session.IsWholesale() && billingMessage && billingMessage !== '' && (\r\n \r\n Make a Payment\r\n {this.invoiceLink()}\r\n
\r\n \r\n \r\n {this.state.AccountBalance}\r\n
\r\n \r\n \r\n Nov 1, 2017 - Nov 31, 2017\r\n
\r\n \r\n \r\n {this.state.InvoiceDueDate}\r\n
\r\n \r\n
)\r\n }\r\n \r\n {billingMessage}\r\n
\r\n \r\n
\r\n )\r\n }else{\r\n return null;\r\n }\r\n}\r\n}\r\n\r\nexport default BillingCard;\r\n\r\n","import React, { Component } from 'react';\nimport { Link, withRouter } from 'react-router-dom';\nimport * as settings from './../../scripts/settings';\nimport * as apiCalls from './../../requests/api_calls';\nimport { DataLoadingSpinner } from './../../components/spinners';\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\nimport { orderBy } from '@progress/kendo-data-query';\nimport serviceSelector from './../../components/service_selector';\nimport _ from 'lodash';\n\nclass FavServices extends Component {\n\n constructor() {\n super();\n this.state = {\n services: [],\n loading: true,\n sort: [],\n skip: 0,\n take: 5,\n };\n this.fetchServices = this.fetchServices.bind(this);\n this.searchServices = this.searchServices.bind(this);\n this.sortChange = this.sortChange.bind(this);\n this.pageChange = this.pageChange.bind(this);\n const starClass = this.starClass.bind(this);\n const toggleFavoriteStatus = this.toggleFavoriteStatus.bind(this);\n const handleEnter = this.handleEnter;\n\n class FavoriteButton extends GridCell {\n\n render() {\n // passing data item based on example from Kendo UI example\n // https://www.telerik.com/kendo-react-ui/components/grid/editing/editing\n let item = this.props.dataItem;\n let cannotFavorite = item.ServiceId === \"\" && item.Extension === \"\";\n if (cannotFavorite) {\n return \r\n {this.billingData()}\r\n
\r\n {this.state.resultsMsg}
\n }\n\n favServicesTable = () => {\n return (\n\n
\n )\n }\n\n render() {\n if(sessionStorage.enterpriseType==='VOICE' ||sessionStorage.enterpriseType==='MIXED')\n {return (\n \n
\n Favorite Services
\n\n \n \n \n
\n \n {this.gridContent()}\n
\n \n View All Services \n
\n \n {this.favServicesTable()}\n
\n )}\n else{return null}\n };\n}\n\nexport default withRouter(FavServices);","import React, { Component } from 'react';\r\nimport { Chart } from '@progress/kendo-charts-react-wrapper';\r\nimport { fetchData } from './../../requests/api_calls';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport moment from 'moment';\r\nimport * as helper from './../../scripts/helper';\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\nimport values from \"object.values\";\r\nimport format from 'string-format';\r\n\r\nconst defaultDaysAgo = 7;\r\nconst custom = 'custom';\r\nconst toDate = 'toDate';\r\nconst fromDate = 'fromDate';\r\nconst type = 'type';\r\nconst status = 'status';\r\nconst view = 'view';\r\nconst calendarFormat = 'M-D-YYYY';\r\nconst yearMonthDay = 'YYYY-MM-DD';\r\nconst loadTime = 500;\r\n\r\n// Graph colors\r\nconst internal_color = \"rgb(68, 87, 111)\";\r\nconst inbound_color = \"rgb(195, 213, 0)\";\r\nconst outlocal_color = \"rgb(255, 158, 21)\";\r\nconst outLD_color = \"rgb(230, 85, 178)\";\r\nconst international_color = \"rgb(255, 83, 70)\";\r\nconst other_color = 'purple';\r\n\r\nconst setFromDate = (totalDays) => {\r\n let daysAgo = totalDays - 1; // offset by one since including today\r\n return moment().subtract(daysAgo, 'days').startOf('day').format(yearMonthDay);\r\n}\r\n\r\nconst today = () => moment().format(yearMonthDay);\r\n\r\nexport default class CallChart extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filters: {\r\n type: \"ALL_CALLS\",\r\n view: 'CALLS',\r\n status: \"ALL_CALLS\",\r\n fromDate: setFromDate(defaultDaysAgo),\r\n toDate: today(),\r\n dateRangeVisibility: 'hide',\r\n },\r\n dateCounts: {},\r\n apiReturn: false,\r\n loadTimeExpired: false,\r\n legendItem: '',\r\n internalLegend: true,\r\n inboundLegend: true,\r\n outLocalLegend: true,\r\n outLdLegend: true,\r\n internationalLegend: true,\r\n otherLegend: true,\r\n };\r\n this.setDateRange = this.setDateRange.bind(this);\r\n this.setCustomDate = this.setCustomDate.bind(this);\r\n this.setCallFilter = this.setCallFilter.bind(this);\r\n this.handleSetLegend = this.handleSetLegend.bind(this);\r\n };\r\n\r\n componentDidMount() {\r\n this.filterCallActivity();\r\n }\r\n\r\n filterCallActivity = () => {\r\n if (this.state.filters.fromDate && this.state.filters.toDate) {\r\n let apiPathAndParams = 'admin/CallActivity' + this.callActivityFilterString();\r\n this.fetchCallActivity(apiPathAndParams);\r\n }\r\n }\r\n\r\n callActivityFilterString = () => {\r\n let filters = this.state.filters;\r\n let filterString = '?CallType=' + filters.type;\r\n filterString += '&CallView=' + filters.view;\r\n filterString += '&CallStatus=' + filters.status;\r\n filterString += '&FromDate=' + moment(filters.fromDate).format(yearMonthDay);\r\n filterString += '&ToDate=' + moment(filters.toDate).format(yearMonthDay);\r\n return filterString\r\n }\r\n\r\n fetchCallActivity = (apiPath, errorMsg) => {\r\n this.setState({ apiReturn: false, loadTimeExpired: false });\r\n this.forcedLoadTime();\r\n fetchData(apiPath).then((data) => {\r\n if (data !== null) {\r\n //console.log(\"This is call activity data\",data)\r\n let count = data.reduce((total, currentValue) => {\r\n return total + currentValue.ALL_CALLS;\r\n }, 0);\r\n //console.log(\"Count value\",count)\r\n sessionStorage.setItem(\"callActivityCount\", count)\r\n this.setState({\r\n callActivity: data,\r\n dateCounts: {\r\n internal: this.mapCallActivity(data, 'INTERNAL'),\r\n inbound: this.mapCallActivity(data, 'INBOUND'),\r\n outboundLocal: this.mapCallActivity(data, 'OUTBOUND_LOCAL'),\r\n outboundLd: this.mapCallActivity(data, 'OUTBOUND_LD'),\r\n international: this.mapCallActivity(data, 'INTERNATIONAL'),\r\n other: this.mapCallActivity(data, 'OTHER'),\r\n },\r\n apiReturn: true\r\n });\r\n } else {\r\n this.setState({\r\n callActivity: null,\r\n apiReturn: true\r\n });\r\n };\r\n }).catch(() => {\r\n this.setState({\r\n callActivity: null,\r\n apiReturn: true\r\n });\r\n }\r\n )\r\n }\r\n\r\n mapCallActivity = (data, propertyName) => {\r\n let startDate = moment(this.state.filters.fromDate);\r\n let endDate = moment(this.state.filters.toDate).add(1, 'days');\r\n let totalDays = endDate.diff(startDate, 'days');\r\n let dates = [];\r\n for (var i = 0; i < totalDays; i++) {\r\n dates.unshift(endDate.subtract(1, 'days').format(yearMonthDay));\r\n }\r\n this.setState({ dates: dates });\r\n return dates.map(date => {\r\n let dataItems = data.filter(item => item.CallDate === date);\r\n let dataItem = null;\r\n if (dataItems.length > 0) dataItem = dataItems[0];\r\n return dataItem ? dataItem[propertyName] : 0;\r\n })\r\n }\r\n\r\n setDateRange = (event) => {\r\n let filters = { ...this.state.filters };\r\n if (event.target.value != custom) {\r\n filters.fromDate = event.target.value;\r\n filters.toDate = today();\r\n filters.dateRangeVisibility = 'hide';\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n this.redrawChart(filters);\r\n } else {\r\n filters.fromDate = event.target.value;\r\n filters.toDate = today();\r\n filters.dateRangeVisibility = 'show';\r\n this.setState({ filters: filters });\r\n }\r\n }\r\n\r\n setCallFilter = (event, filterKey) => {\r\n let filters = { ...this.state.filters };\r\n filters[filterKey] = event.target.value;\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n this.redrawChart(filters);\r\n }\r\n\r\n setCustomDate = (event, filterKey) => {\r\n let filters = { ...this.state.filters };\r\n if (event.sender.value()) {\r\n var date = moment(event.sender.value()).format(\"YYYY-MM-DD\");\r\n } else {\r\n var date = null;\r\n }\r\n filters[filterKey] = date;\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n if (this.validCustomDate(filters, filterKey, date)) this.redrawChart(filters);\r\n }\r\n\r\n validCustomDate = (filters, filterKey, date) => {\r\n let fromDate = moment(filterKey == 'fromDate' ? date : this.state.filters.fromDate);\r\n let toDate = moment(filterKey == 'toDate' ? date : this.state.filters.toDate);\r\n if (date === null) {\r\n this.setState({ filters: filters, errorMsg: 'Both dates must be provided to use a custom date range.' });\r\n } else if (fromDate.isBefore(toDate) || fromDate._i == toDate._i) {\r\n this.setState({ filters: filters, errorMsg: null });\r\n var isValid = true;\r\n } else {\r\n this.setState({ filters: filters, errorMsg: 'The start date must be before the end date.' });\r\n var isValid = false;\r\n }\r\n return isValid;\r\n }\r\n\r\n redrawChart = (filters) => {\r\n this.setState({ filters: filters }, () => {\r\n // make API request after state since needed for API query string\r\n this.filterCallActivity();\r\n });\r\n }\r\n\r\n callCounts = (category) => {\r\n let countsArray = this.state.dateCounts[category];\r\n if (this.noResults()) {\r\n return 0;\r\n } else {\r\n let count = countsArray.reduce((total, value) => total + value)\r\n return helper.numberWithDelimiter(count);\r\n }\r\n }\r\n\r\n maxCount = (data) => {\r\n let counts = values(this.state.dateCounts);\r\n let flatCounts = Array.prototype.concat(...counts);\r\n return Math.max(...flatCounts) * 1.05 // adding 5% buffer\r\n }\r\n\r\n chartSeries() {\r\n const chartSeriesConfig = (name, data, color) => ({ name: name, data: data, color: color });\r\n let counts = this.state.dateCounts;\r\n let seriesList = [\r\n chartSeriesConfig('Internal', counts.internal, internal_color),\r\n chartSeriesConfig('Inbound', counts.inbound, inbound_color),\r\n chartSeriesConfig('Out Local', counts.outboundLocal, outlocal_color),\r\n chartSeriesConfig('Out LD', counts.outboundLd, outLD_color),\r\n chartSeriesConfig('International', counts.international, international_color),\r\n chartSeriesConfig('Other', counts.other, other_color),\r\n ];\r\n if (this.state.legendItem === 'internal') {\r\n return seriesList.filter(item => item.name === 'Internal');\r\n } else if (this.state.legendItem === 'inbound') {\r\n return seriesList.filter(item => item.name === 'Inbound');\r\n } else if (this.state.legendItem === 'out_local') {\r\n return seriesList.filter(item => item.name === 'Out Local');\r\n } else if (this.state.legendItem === 'out_ld') {\r\n return seriesList.filter(item => item.name === 'Out LD');\r\n } else if (this.state.legendItem === 'international') {\r\n return seriesList.filter(item => item.name === 'International');\r\n } else if (this.state.legendItem === 'other') {\r\n return seriesList.filter(item => item.name === 'Other');\r\n } else {\r\n return seriesList;\r\n }\r\n }\r\n\r\n chartOptions = () => {\r\n let counts = this.state.dateCounts;\r\n let dates = this.state.dates;\r\n if (counts != null && dates != null) {\r\n return (\r\n {\r\n legend: {\r\n visible: false\r\n },\r\n seriesDefaults: {\r\n type: \"line\"\r\n },\r\n series: this.chartSeries(),\r\n chartArea: {\r\n height: 320\r\n },\r\n valueAxis: {\r\n min: 0,\r\n max: this.maxCount(),\r\n line: {\r\n visible: false\r\n },\r\n minorGridLines: {\r\n visible: true\r\n },\r\n labels: {\r\n rotation: \"auto\",\r\n color: '#b3b1b1'\r\n }\r\n },\r\n categoryAxis: {\r\n categories: dates.map(date => moment(date).format(calendarFormat)),\r\n majorGridLines: {\r\n visible: false\r\n },\r\n color: '#FFF'\r\n },\r\n tooltip: {\r\n visible: true,\r\n format: \"Value: {0:N0}\",\r\n template: \"#= series.name # : #= value # on #= kendo.toString(category) # \"\r\n }\r\n }\r\n )\r\n }\r\n }\r\n\r\n noResults = () => (this.state.callActivity == null || this.state.errorMsg);\r\n\r\n chartContent = () => {\r\n if (this.state.loadTimeExpired && this.state.apiReturn) {\r\n if (this.noResults()) {\r\n return (\r\n \r\n {this.state.errorMsg || 'No call activity found with the above filters selected.'}\r\n
\r\n )\r\n } else return\r\n
\r\n )\r\n }\r\n else{return null}\r\n }\r\n};","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { fetchData } from \"./../../requests/api_calls\";\r\nimport { DataLoadingSpinner } from \"./../../components/spinners\";\r\n\r\nclass QuickView extends Component {\r\n constructor() {\r\n super();\r\n this.state = { loading: true };\r\n this.fetchStats = this.fetchStats.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchStats(\"admin/QuickView\");\r\n }\r\n\r\n fetchStats = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n if (data) {\r\n this.setState({\r\n CountLocations: data.CountLocations,\r\n CountServices: data.CountServices,\r\n CountUsers: data.CountUsers,\r\n CountDevices: data.CountDevices,\r\n CountServicesUsers: data.CountServicesUsers,\r\n loading: false,\r\n });\r\n }\r\n });\r\n };\r\n\r\n quickViewContent = () => {\r\n if (this.state.loading) {\r\n return (\r\n \r\n
\r\n Call Activity
\r\n Call Details\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \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.setCustomDate(event, fromDate) }}\r\n />\r\n
\r\n \r\n \r\n { this.setCustomDate(event, toDate) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n { this.handleSetLegend('internalLegend') }}>
{this.callCounts('internal')} {this.callCategoryHyperlink('Internal')}\r\n \r\n
\r\n { this.handleSetLegend('inboundLegend') }}>
{this.callCounts('inbound')} {this.callCategoryHyperlink('Inbound')}\r\n \r\n
\r\n { this.handleSetLegend('outLocalLegend') }}>
{this.callCounts('outboundLocal')} {this.callCategoryHyperlink('Out Local')}\r\n \r\n
\r\n { this.handleSetLegend('outLdLegend') }}>
{this.callCounts('outboundLd')} {this.callCategoryHyperlink('Out LD')}\r\n \r\n
\r\n { this.handleSetLegend('internationalLegend') }}>
{this.callCounts('international')} {this.callCategoryHyperlink('International')}\r\n \r\n
\r\n { this.handleSetLegend('otherLegend') }}>
{this.callCounts('other')} {this.callCategoryHyperlink('Other')}\r\n \r\n {this.chartContent()}\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n Quick View
\r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n render() {\r\n if (sessionStorage.enterpriseType === 'VOICE' || sessionStorage.enterpriseType === 'MIXED') {\r\n return \r\n
\r\n Quick View
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n Manage\r\n \r\n \r\n
\r\n {this.state.CountLocations}
\r\n\r\n \r\n Manage\r\n \r\n \r\n
\r\n {this.state.CountServicesUsers || 0}
\r\n\r\n \r\n
\r\n {this.state.CountDevices}
\r\n{this.quickViewContent()}
;\r\n } else { return null }\r\n\r\n }\r\n}\r\n\r\nexport default QuickView;\r\n","import moment from 'moment';\nimport React, { Component } from 'react';\nimport DeviceStatuses from './../../components/deviceStatuses';\nimport { Link } from 'react-router-dom';\nimport { fetchData } from './../../requests/api_calls';\nimport { DataLoadingSpinner } from './../../components/spinners';\nimport { registrationLastUpdated } from './../../scripts/helper';\nimport * as settings from './../../scripts/settings.js';\nimport { serviceFilters } from '../../constants/filters.js'\nimport format from 'string-format';\n\nconst defaultSelection = 'All Locations';\n\nclass Devices extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n devicesProvisioned: 0,\n devicesRegistered: 0,\n devicesUnregistered: 0,\n linesRegistered: 0,\n linesUnregistered: 0,\n total: 0,\n loading: true,\n selectedLocationValue: ''\n };\n this.filterLocations = this.filterLocations.bind(this);\n };\n\n componentDidMount() {\n this.fetchDeviceStats('admin/DeviceStat');\n this.fetchLocations('admin/Locations');\n }\n\n fetchDeviceStats = (apiPath, forcedRefresh) => {\n fetchData(apiPath).then((data) => {\n if (data) {\n this.setState({\n devicesProvisioned: (data.CountProvisioned || 0),\n devicesRegistered: (data.CountRegistered || 0),\n devicesUnregistered: (data.CountUnregistered || 0),\n linesRegistered: (data.CountLinesRegistered || 0),\n linesUnregistered: (data.CountLinesUnregistered || 0),\n total: data.CountTotal,\n loading: false,\n registrationUpdated: forcedRefresh ? registrationLastUpdated() : false\n });\n } else { // error: probably a request timeout\n let previousLocationValue = this.state.previousLocationValue || defaultSelection;\n this.setState({\n selectedLocationValue: previousLocationValue,\n loading: false,\n registrationUpdated: forcedRefresh ? 'Failed to retrieve registration status: ' + moment().format('M-DD-YYYY hh:mm:ss A') : ''\n });\n }\n });\n }\n\n fetchLocations = (apiPath) => {\n fetchData(apiPath).then((data) => {\n if (data) {\n let locationOptions = data.map((location, index) => {\n return ( this.locationOption(location, index) );\n });\n this.setState({locationOptions: locationOptions, loading: false});\n } else {\n this.setState({loading: false});\n }\n });\n }\n\n locationOption = (location, index) => {\n return (\n \n )\n }\n\n filterLocations = (event) => {\n let locationAccountNumber = event.target.value;\n // let selectionIndex = event.target.selectedIndex;\n // let locationAddress = event.target.options[selectionIndex].text;\n let stateChanges = {\n loading:true,\n selectedLocationValue: locationAccountNumber,\n previousLocationValue: this.state.selectedLocationValue,\n }\n this.setState({...stateChanges});\n if(locationAccountNumber) {\n this.fetchDeviceStats('admin/DeviceStat?LocationAccountNumber=' + locationAccountNumber);\n settings.setQuickViewLocation(locationAccountNumber);\n } else{\n this.fetchDeviceStats('admin/DeviceStat');\n settings.setQuickViewLocation(\"\");\n }\n }\n\n manageBtn = (serviceUserFilter, categoryLabel, count) => {\n let path = '/services/' + this.state.selectedLocationValue;\n let linkClass = count > 0 ? 'btn' : 'hidden';\n return (\n \n \n Manage\n \n \n
\n )\n }\n\n getCount = (filterValue, categoryLabel, count, displaySide) => {\n let path = '/services/' + this.state.selectedLocationValue;\n if (!count) {\n return (\n {count}
\n\n \n
\n )\n } else {\n return (\n {count}
\n\n \n \n
\n )\n }\n }\n\n checkRegistration = () => {\n let forcedRefresh = true;\n if (this.state.selectedLocationValue) {\n let locationAccountNumber = this.state.selectedLocationValue;\n this.fetchDeviceStats('admin/DeviceStat?LocationAccountNumber=' + locationAccountNumber + '&ForceDeviceRefresh=TRUE', forcedRefresh);\n } else {\n this.fetchDeviceStats('admin/DeviceStat?ForceDeviceRefresh=TRUE', forcedRefresh);\n }\n }\n\n devicesSummary = () => {\n //let path = '/services/' + this.state.selectedLocationValue;\n //let right = \"right\", left = \"left\"; // for css, either right or left\n if (this.state.loading) {\n return (\n {count}
\n \n\n
\n )\n } else {\n return (\n \n {this.manageBtn(serviceFilters.DEVICE_REGISTERED, 'Registered', this.state.devicesRegistered)}\n {this.manageBtn(serviceFilters.DEVICE_UNREGISTERED, 'Unregistered', this.state.devicesUnregistered)}\n {this.manageBtn(serviceFilters.DEVICE_ASSIGNED, 'Provisioned', this.state.devicesProvisioned)} \n {/*
\n )\n }\n }\n\n render() {\n if(sessionStorage.enterpriseType==='VOICE' || sessionStorage.enterpriseType==='MIXED'){\n return (\n \n
\n {this.state.linesUnregistered}
\n\n
*/}\n {this.state.devicesProvisioned}
\n\n
\n )\n }else{return null;}\n \n }\n\n}\n\nexport default Devices;\n\n","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { fetchData } from './../../requests/api_calls';\r\nimport * as settings from './../../scripts/settings';\r\nimport moment from 'moment';\r\n\r\nclass ActivityHistory extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n history: []\r\n };\r\n };\r\n\r\n componentDidMount() {\r\n this.fetchHistory();\r\n }\r\n\r\n fetchHistory = () => {\r\n fetchData('admin/ActivityHistory').then((data) => {\r\n if (data) {\r\n this.setState({\r\n history: this.sortedHistory(data)\r\n });\r\n }\r\n });\r\n }\r\n\r\n sortedHistory = (data) => {\r\n data.sort((a, b) => new Date(b.ActivityDate) - new Date(a.ActivityDate) );\r\n return data.map((item, index) => this.historyItemDiv(item, index))\r\n }\r\n\r\n setServiceAndRedirect = async (historyItem) => {\r\n let userId = historyItem.ActivityURL.split('user/')[1].split('/')[0];\r\n let apiPath = 'usr/MyServices?UserId=' + userId;\r\n let results = await fetchData(apiPath).then(data => data)\r\n let service = this.findServiceByHistoryItem(historyItem, results)\r\n if (service) {\r\n settings.selectService(service.UserId, service.ServiceNumber, service.Extension);\r\n this.props.history.push('/dashboard');\r\n }\r\n \r\n }\r\n\r\n findServiceByHistoryItem = (historyItem, results) => {\r\n let numOrExt = historyItem.ServiceNumberOrExtension;\r\n let matches = results.filter(service => numOrExt === (service.ServiceNumber || service.Extension))\r\n return matches[0] || null;\r\n }\r\n\r\n historyItemDiv = (item, index) => {\r\n return (\r\n \r\n \r\n \r\n // \r\n // this.setService(item)} >\r\n // {item.UserName} ({item.ServiceNumberOrExtension}) \r\n // {moment.utc(item.ActivityDate).fromNow()}\r\n // \r\n // \r\n );\r\n }\r\n\r\n render() {\r\n if(sessionStorage.enterpriseType==='VOICE' || sessionStorage.enterpriseType==='MIXED'){\r\n return (\r\n \n
\n \n
\n \n
\n Devices
\n\n
\n \n
\n \n
\n {this.devicesSummary()}\n \n
\n \n \n
\n \r\n
\r\n )\r\n }else{\r\n return null;\r\n }\r\n }\r\n\r\n}\r\n\r\nexport default withRouter(ActivityHistory);","import React, { Component } from 'react';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\n\r\n\r\nexport default class TicketingCountsWidget extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n Listings: [],\r\n FullListings: [],\r\n TicketStats: [],\r\n LocationAccountNumber: '',\r\n ContactId: '',\r\n ContactOptions: [],\r\n LocationOptions: [],\r\n isSFIDNull: false\r\n }\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.fetchTicketCountData();\r\n }\r\n\r\n fetchTicketCountData = () => {\r\n let requests = [\r\n this.fetchTicketStats(),\r\n this.fetchContactList(),\r\n this.fetchLocations(),\r\n ];\r\n Promise.all(requests).catch(err => console.error(err));\r\n }\r\n\r\n fetchContactList = () => {\r\n let apiPath = 'admin/GetContactList';\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.map((contact, idx) => {\r\n return \r\n });\r\n this.setState({ ContactOptions: options });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchLocations = () => {\r\n let apiPath = 'admin/Locations';\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.map((location, idx) => {\r\n return \r\n });\r\n this.setState({ LocationOptions: options });\r\n }\r\n })\r\n }\r\n\r\n fetchTicketStats = async () => {\r\n await this.setState({ loading: true });\r\n let parsedList = JSON.parse(sessionStorage.locationList)\r\n let locationAccountNumberList = parsedList.map((x)=>(x.LocationAccountNumber));\r\n let apiPath = `admin/GetTicketingStat?LocationAccountNumber=${this.state.LocationAccountNumber}&ContactId=${this.state.ContactId}`;\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n this.setState({ TicketStats: data, loading: false });\r\n } else {\r\n this.setState({ loading: false, isSFIDNull: true });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n handleChangeContact = (e) => {\r\n this.setState({ ContactId: e.target.value }, this.fetchTicketStats);\r\n }\r\n\r\n handleChangeLocation = (e) => {\r\n this.setState({ LocationAccountNumber: e.target.value }, this.fetchTicketStats);\r\n }\r\n\r\n ticketFilterDropDown = (name) => {\r\n if (name === 'contacts' || name === 'locations') {\r\n return (\r\n \r\n
\r\n Activity History
\r\n\r\n
\r\n \r\n {this.state.history}\r\n
\r\n \r\n {this.ticketRow('Escalated', Escalated, 'View Escalated')}\r\n {this.ticketRow('Pending Customer', PendingCustomer, 'View Pending Customer')}\r\n {this.ticketRow('Closed (7 Days)', Closed, 'View Recently Closed')}\r\n {this.ticketRow('Updated (24 Hours)', Updated, 'View Recently Updated')}\r\n {this.ticketRow('Open', Open, 'View Open')}\r\n {this.ticketRow('All Tickets', Total7, 'View All Tickets')}\r\n
\r\n )\r\n } else {\r\n return \r\n {sessionStorage.hasTicketing === 'FULL' ? Enter New Ticket : null}\r\n View All Tickets\r\n
\r\n No Available Ticketing Data
\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n if (sessionStorage.enterpriseType === 'VOICE' || sessionStorage.enterpriseType === 'DATA' || sessionStorage.enterpriseType === 'MIXED') {\r\n return (\r\n\r\n
\r\n )\r\n } else {\r\n return null;\r\n }\r\n\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Grid, GridColumn as Column, GridCellProps, GridCell, GridToolbar, GridDetailRow } from '@progress/kendo-react-grid';\r\nimport EllipsisWithTooltip from 'react-ellipsis-with-tooltip';\r\n\r\n\r\nclass ToolTipCell extends GridCell {\r\n\r\n render() {\r\n let fieldName = this.props.field;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {!this.state.isSFIDNull &&\r\n Support Tickets
\r\n {this.state.isSFIDNull &&Account not connected to ticket system to retrieve tickets
}\r\n\r\n
}\r\n \r\n
\r\n {this.gridContent()}\r\n \r\n
\r\n \r\n {(this.state.LocationOptions && this.state.LocationOptions.length > 0) && (this.state.ContactOptions && this.state.ContactOptions.length > 0)\r\n ? this.ticketFilterDropDown('locations') : null}\r\n {(this.state.LocationOptions && this.state.LocationOptions.length > 0) && (this.state.ContactOptions && this.state.ContactOptions.length > 0)\r\n ? this.ticketFilterDropDown('contacts') : null}\r\n
\r\n {this.props.dataItem[fieldName]}
\r\n No Available Tickets
\r\n }\r\n }\r\n }\r\n\r\n favoriteTicket = async (ticket) => {\r\n //get the current ticket from the tickets list\r\n //update the property isTogglingStatus = true\r\n ticket.isTogglingStatus = true;\r\n let newTickets = this.state.Listings.slice();\r\n let index = _.findIndex(newTickets, s => s.TicketId == ticket.TicketId);\r\n newTickets[index] = ticket;\r\n this.setState({ Listings: newTickets });\r\n if (ticket) {\r\n let apiPath = `admin/UpdateTicket`;\r\n let dto = {\r\n TicketId: ticket.TicketId,\r\n Starred: !ticket.Starred// === false ? true : false,\r\n };\r\n let response = await apiCalls.post(apiPath, 'PATCH', JSON.stringify(dto)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n this.updateTicket(ticket);\r\n } else {\r\n ticket.isTogglingStatus = false;\r\n newTickets[index] = ticket;\r\n this.setState({ Listings: newTickets });\r\n }\r\n }\r\n }\r\n\r\n updateTicket = (item, newFavServiceId = null) => {\r\n let newIsFavState = item.Starred ? false : true;\r\n let updatedItem = new Object(item);\r\n updatedItem.Starred = newIsFavState;\r\n updatedItem.isTogglingStatus = false;\r\n if (newFavServiceId)\r\n updatedItem.FavoriteServiceId = newFavServiceId;\r\n let newTickets = this.state.Listings.slice();\r\n let index = _.findIndex(newTickets, s => s.TicketId == updatedItem.TicketId);\r\n newTickets[index] = updatedItem;\r\n this.setState({ Listings: newTickets });\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullListings;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'TicketNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Subject', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Priority', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Escalated', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Status', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'LastModifiedDate', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.setState({ Listings: services })\r\n }\r\n else {\r\n this.setState({ Listings: fullDetails });\r\n }\r\n }\r\n\r\n sortChange(event) {\r\n this.setState({\r\n Listings: this.sortServices(event.sort),\r\n sort: event.sort\r\n });\r\n }\r\n\r\n sortServices(sort) {\r\n var listings = [];\r\n if (this.state !== undefined) {\r\n listings = this.state.Listings.slice();\r\n }\r\n return orderBy(listings, sort);\r\n }\r\n\r\n render() {\r\n if(sessionStorage.enterpriseType==='VOICE' ||sessionStorage.enterpriseType==='DATA'|| sessionStorage.enterpriseType==='MIXED'){\r\n return (\r\n\r\n
\r\n )\r\n }else{\r\n return null;\r\n }\r\n \r\n }\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\nimport { connect } from 'react-redux';\r\nimport moment from 'moment';\r\n\r\nclass VmReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: true,\r\n hasVmUsageReport: false,\r\n Listings: [],\r\n Sort: [{ field: \"VMLastAccessDateTimeDisplay\", dir: \"desc\" }],\r\n hasPermission: sessionStorage.hasVmUsageReport,\r\n };\r\n\r\n class CustomWrapperCell extends GridCell {\r\n\r\n render() {\r\n let fieldName = this.props.field;\r\n let styles = fieldName === \"VMLastAccessDateTime\" ? { overflowWrap: \"break-word\" } : { overflowWrap: \"auto\" };\r\n let cellData = fieldName === \"ServiceNumber\" && this.props.dataItem[\"IsExtensionOnly\"] ? this.props.dataItem[\"Extension\"] : this.props.dataItem[fieldName];\r\n return (\r\n \r\n
\r\n \r\n Starred Tickets \r\n {!this.state.loading ? this.state.Listings.length : null} \r\n
\r\n {this.state.loading ? null :\r\n\r\n \r\n \r\n \r\n
}\r\n \r\n {this.gridContent()}\r\n
\r\n {!this.state.loading ? \r\n {sessionStorage.hasTicketing === 'FULL' ? Enter New Ticket : null}\r\n View All Tickets\r\n
: null}\r\n {cellData}
\r\n No Available Usage Data
\r\n }\r\n }\r\n }\r\n\r\n sortChange = (event) => {\r\n\r\n let sort = event.sort;\r\n if (sort && sort.length > 0)\r\n {\r\n //VMLastAccessDateTimeDisplay Sort: [{ field: \"VMLastAccessDateTime\", dir: \"desc\" }],\r\n if (sort[0].field === 'VMLastAccessDateTimeDisplay')\r\n sort = [{ field: \"VMLastAccessDateTime\", dir: sort[0].dir }];\r\n\r\n this.setState({\r\n Listings: orderBy(this.state.Listings, sort),\r\n Sort: event.sort\r\n });\r\n } else {\r\n this.setState({Sort: []});\r\n }\r\n }\r\n\r\n render() {\r\n if(sessionStorage.enterpriseType==='VOICE' || sessionStorage.enterpriseType==='MIXED'){\r\n return (\r\n\r\n
\r\n )\r\n }else{\r\n return null\r\n }\r\n }\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n hasVmUsageReport: state.reducer.hasVmUsageReport\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps)(VmReport);","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport * as apiCalls from \"./../../requests/api_calls\";\r\nimport { DataLoadingSpinner } from \"./../../components/spinners\";\r\n\r\nexport default class CircuitCard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: true,\r\n CircuitList: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchCircuits();\r\n }\r\n\r\n fetchCircuits = async () => {\r\n let apiPath = \"admin/GetCircuitsList\";\r\n //await this.setState({ loading: true });\r\n await apiCalls.fetchData(apiPath).then((data) => {\r\n //setLoading(true);\r\n if (data) {\r\n data.forEach(async (itm) => {\r\n if (itm.CheckMkHostName && itm.CheckMkHostName !== \"\") {\r\n let obj = await this.fetchActiveHosts(itm.CheckMkHostName);\r\n let tt = JSON.parse(obj).ResultDetail;\r\n let ti = JSON.parse(tt).state_text;\r\n if (ti === \"OK\") {\r\n itm.isActive = true;\r\n } else {\r\n itm.isActive = false;\r\n }\r\n }\r\n this.setState({\r\n loading: false,\r\n CircuitList: data,\r\n });\r\n });\r\n } else {\r\n this.setState({ loading: false, CircuitList: null });\r\n }\r\n });\r\n // setTimeout(() => {\r\n // this.setState({ loading: false });\r\n // }, 3000);\r\n };\r\n\r\n fetchActiveHosts = async (hostname) => {\r\n let apiPath = `admin/CircuitMonitoring/GetCurrentStatusForHost?hostname=${hostname}`;\r\n return await apiCalls.fetchData(apiPath).then(data => data).catch(err => console.error(err));\r\n };\r\n\r\n\r\n cardContent = () => {\r\n let { loading, CircuitList } = this.state;\r\n if (loading) {\r\n return (\r\n\r\n \r\n
\r\n Voicemail Usage Report
\r\n\r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n {!this.state.loading ? \r\n Full Report\r\n
: null}\r\n \r\n
\r\n\r\n );\r\n } else {\r\n if (CircuitList) {\r\n let upCircuits = CircuitList.filter(itm => itm.isActive == true).length;\r\n let downCircuits = CircuitList.filter(itm => itm.isActive == false).length;\r\n return (\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\n {upCircuits}
\r\n\r\n \r\n
\r\n {downCircuits}
\r\n\r\n \r\n
\r\n {CircuitList.length}
\r\n\r\n \r\n
\r\n 0
\r\n\r\n
\r\n )\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n if (sessionStorage.enterpriseType === 'DATA' || sessionStorage.enterpriseType === 'MIXED') {\r\n return (\r\n No Available Data
\r\n\r\n
\r\n );\r\n }\r\n else {\r\n return null\r\n }\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport BillingCard from './admin/billing_card';\r\nimport FavServices from './admin/fav_services';\r\nimport CallChart from './admin/call_chart';\r\nimport QuickView from './admin/quick_view';\r\nimport Devices from './admin/devices';\r\nimport ActivityHistory from './admin/activity_history';\r\nimport TicketingCountsWidget from './admin/ticket_count_widget';\r\nimport StarredTicketingWidget from './admin/starred_tickets_widget';\r\nimport Masonry from \"react-masonry-component\";\r\nimport VmReport from './admin/vm_report_widget';\r\nimport CircuitCard from './admin/circuits_card';\r\nimport { checkBillingAccount } from '../utility/utility';\r\nimport { fetchData } from \"./../requests/api_calls\";\r\n\r\nclass Admin extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const favServices = this.favServices.bind(this);\r\n const activityHistory = this.activityHistory.bind(this);\r\n const starredTickets = this.starredTickets.bind(this);\r\n const quickView = this.quickView.bind(this);\r\n const devices = this.devices.bind(this);\r\n const callChart = this.callChart.bind(this);\r\n const ticketingCount = this.ticketingCount.bind(this);\r\n\r\n let widgets = [\r\n { toggle: 'showFavServices', functionName: favServices, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showActivityHistory', functionName: activityHistory, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showStarredTicketingWidget', functionName: starredTickets, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showQuickView', functionName: quickView, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showDevices', functionName: devices, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showCallChart', functionName: callChart, widgetRow: 0, widgetColumn: 0 },\r\n { toggle: 'showTicketingCountsWidget', functionName: ticketingCount, widgetRow: 0, widgetColumn: 0 }\r\n ];\r\n\r\n let ipTrunkingOnly = sessionStorage.isIpTrunkingOnly !== null && sessionStorage.isIpTrunkingOnly !== undefined ? sessionStorage.isIpTrunkingOnly : false;\r\n\r\n this.state = {\r\n hasTicketing: sessionStorage.hasTicketing ? sessionStorage.hasTicketing : 'NONE',\r\n hasDevices: false,\r\n ipTrunkingOnly: ipTrunkingOnly,\r\n showFavServices: true,\r\n showActivityHistory: true,\r\n showStarredTicketingWidget: true,\r\n showQuickView: true,\r\n showDevices: ipTrunkingOnly ? false : true,\r\n showCallChart: true,\r\n showTicketingCountsWidget: true,\r\n widgets: widgets\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n //this.fetchTermsAndConditions();\r\n }\r\n\r\n // fetchTermsAndConditions = async () => {\r\n // let path = \"admin/EnterpriseTC\";\r\n // await fetchData(path).then(data => {\r\n // if (data) {\r\n // sessionStorage.setItem('entTCFlag', data[0].TCFlag);\r\n // }\r\n // }).catch(err => console.error(err));\r\n // }\r\n\r\n componentWillReceiveProps = (props) => {\r\n let state = this.state;\r\n if (state.hasTicketing !== props.hasTicketing || state.hasDevices !== props.hasDevices || state.ipTrunkingOnly !== props.ipTrunkingOnly) //in the future this may change if user can customize their dashboard\r\n this.setState({\r\n hasTicketing: props.hasTicketing,\r\n hasDevices: props.hasDevices,\r\n showFavServices: true,\r\n showActivityHistory: true,\r\n showStarredTicketingWidget: ((!props.hasTicketing && state.hasTicketing === false) || props.hasTicketing === 'NONE') ? false : true,\r\n showQuickView: true,\r\n showDevices: (props.ipTrunkingOnly !== null && props.ipTrunkingOnly !== undefined && props.ipTrunkingOnly === true) ? false : state.showDevices,\r\n showCallChart: true,\r\n showTicketingCountsWidget: ((!props.hasTicketing && state.hasTicketing === false) || props.hasTicketing === 'NONE') ? false : true,\r\n })\r\n }\r\n\r\n transitionToTicketDetail = (ticketId) => {\r\n this.props.history.push(`/ticket/${ticketId}`);\r\n }\r\n\r\n transitionToNewTicket = () => {\r\n this.props.history.push('/new_ticket');\r\n }\r\n\r\n transitionToAllTickets = () => {\r\n this.props.history.push('/tickets_all');\r\n }\r\n\r\n transitionToCallLogDetails = () => {\r\n this.props.history.push('/enterpise_call_logs_all');\r\n }\r\n\r\n transitionToVmReport = () => {\r\n this.props.history.push(`/vm_report_full`);\r\n }\r\n\r\n favServices = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Circuit Summary
\r\n\r\n {this.cardContent()}\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\nconst mapStateToProps = (state) => {\r\n return {\r\n hasTicketing: state.reducer.hasTicketing,\r\n hasDevices: state.reducer.hasDevices,\r\n ipTrunkingOnly: state.reducer.isIpTrunkingOnly\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(withRouter(Admin));","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { fetchData, post } from '../../../requests/api_calls';\r\nimport format from 'string-format';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport * as config from '../../../requests/config';\r\nimport * as EmailValidator from 'email-validator';\r\n\r\nconst ServiceNumber = \"ServiceNumber\",\r\n PBXUserID = \"PBXUserID\",\r\n EnterpriseId = \"EnterpriseId\",\r\n UserId = \"UserId\",\r\n IMAPID = \"IMAPID\",\r\n DialingFirstName = \"DialingFirstName\",\r\n DialingLastName = \"DialingLastName\",\r\n FirstName = \"FirstName \",\r\n LastName = \"LastName \",\r\n Title = \"Title\",\r\n Department = \"Department\",\r\n Language= \"Language\",\r\n Location=\"Location\",\r\n Timezone= \"Timezone\",\r\n NetworkClassOfService = \"NetworkClassofService\",\r\n AlternatePhone = \"AlternatePhone\",\r\n Email = \"Email\",\r\n Address1 = \"Address1\",\r\n Address2 = \"Address2\",\r\n City = \"City\",\r\n State = \"State\",\r\n Country = \"Country\",\r\n Zip = \"Zip\";\r\n\r\nclass EditProfileModal extends Component {\r\n\r\n initialState=(props)=>{\r\n return {\r\n visible: false,\r\n showModal: false,\r\n loading: true, \r\n loading_error: \"\",\r\n saving_loading: false,\r\n saving_show_success: false,\r\n saving_error_message: \"\",\r\n saving_show_error: false,\r\n currentUser: props.CurrentUserProfile,\r\n admin: props.isAdmin,\r\n GroupName: props.GroupName,\r\n ServiceNumber: props.ServiceNumber,\r\n hasE911: props.HasE911,\r\n isIPTrunking: sessionStorage.isSelectedServiceIpTrunking && sessionStorage.isSelectedServiceIpTrunking.toString() === 'true' ? true : false,\r\n profile:{\r\n PBXUserID: props.PBXUserID,\r\n EnterpriseId: props.ParentAccountNumber, \r\n UserId: props.PBXUserID,\r\n IMAPID: \"\",\r\n CallingLineFirstName: \"\",\r\n CallingLineLastName: \"\",\r\n DialingFirstName: \"\",\r\n DialingLastName: \"\",\r\n YahooId: \"\",\r\n FirstName: \"\",\r\n LastName: \"\",\r\n Title: \"\",\r\n Department: {\r\n ServiceProviderId: \"\",\r\n GroupId: \"\",\r\n Name: \"\"\r\n },\r\n Language: {\r\n ID: \"\",\r\n Name: \"\"\r\n },\r\n Timezone: {\r\n ID: \"\",\r\n Name: \"\"\r\n },\r\n NetworkClassOfService: {\r\n ID: \"\",\r\n Name: \"\"\r\n },\r\n AlternatePhone: \"\",\r\n Email: \"\",\r\n Address1: \"\",\r\n Address2: \"\",\r\n City: \"\",\r\n State: {\r\n ID: \"\",\r\n Name: \"\"\r\n },\r\n Country: \"\",\r\n Zip: \"Zip\",\r\n States:[],\r\n Languages:[],\r\n Timezones:[],\r\n Departments:[],\r\n NetworkClassOfServices:[]\r\n },\r\n valid: true\r\n }\r\n }\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.updateByProps = this.updateByProps.bind(this);\r\n this.state = this.initialState(props);\r\n }\r\n\r\n handleClose() {\r\n let state = {...this.state};\r\n state.showModal = false;\r\n this.setState(state);\r\n }\r\n\r\n handleShow() {\r\n let state = {...this.state};\r\n state.showModal = true;\r\n state.loading = true;\r\n state.saving_show_error = false;\r\n state.saving_loading= false;\r\n state.saving_show_success= false;\r\n state.saving_error_message= \"\";\r\n this.setState(state);\r\n this.fetchProfileInfo();\r\n }\r\n\r\n fetchProfileInfo=()=>{\r\n var apiUrl = ''\r\n if(this.state.currentUser && this.state.admin){\r\n apiUrl = \"admin/GetAdminProfileEdit\";\r\n this.fetchAdminProfileInfo(apiUrl);\r\n }\r\n else{\r\n apiUrl = format(\"usr/GetUserProfileEdit?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}\", this.props);\r\n this.fetchUserProfileInfo(apiUrl);\r\n }\r\n }\r\n\r\n fetchUserProfileInfo=(apiPath, errorMsg)=>{\r\n fetchData(apiPath).then((data) => {\r\n let state = {...this.state};\r\n state.loading = false;\r\n if (data) {\r\n state.admin = false;\r\n state.loading_error = \"\";\r\n state.profile = data;\r\n let blankState = { ID: \"\", Name: \"\"};\r\n //TODO: create a separate path for Broadsoft v Other Users so that properties are loaded properly\r\n //if (this.props.CurrentUserProfile && this.props.CurrentUserProfile.PBXUserID && this.props.CurrentUserProfile.PBXUserID !== ''){ //TODO: else if (user's service is broadsoft)\r\n state.profile.States.splice(0,0, blankState); \r\n\r\n state.profile.CallingLineFirstName = state.profile.CallingLineFirstName || state.profile.FirstName; //in BWOCI this is how these fields are set\r\n state.profile.CallingLineLastName = state.profile.CallingLineLastName || state.profile.LastName;\r\n\r\n if(!state.profile.Department.ServiceProviderId){\r\n if(state.profile.Departments.length > 0){\r\n state.profile.Department.ServiceProviderId = state.profile.Departments[0].ServiceProviderId;\r\n state.profile.Department.GroupId = state.profile.Departments[0].GroupId;\r\n state.profile.Department.Name = state.profile.Departments[0].Name;\r\n }\r\n }\r\n if(!state.profile.Language.ID){\r\n if(state.profile.Languages.length > 0){\r\n state.profile.Language.ID = state.profile.Languages[0].ID;\r\n state.profile.Language.Name = state.profile.Languages[0].Name;\r\n }\r\n \r\n }\r\n if(!state.profile.Timezone.ID){\r\n if(state.profile.Timezones.length > 0){\r\n state.profile.Timezone.ID = state.profile.Timezones[0].ID;\r\n state.profile.Timezone.Name = state.profile.Timezones[0].Name;\r\n }\r\n }\r\n if(!state.profile.State.ID){\r\n if(state.profile.States.length > 0){\r\n state.profile.State.ID = state.profile.States[0].ID;\r\n state.profile.State.Name = state.profile.States[0].Name;\r\n }\r\n }\r\n //}\r\n }\r\n else{\r\n state.loading_error = \"Failed to Load\"\r\n }\r\n this.setState(state);\r\n }).catch((message)=>{\r\n this.setState({...{loading:false, fetch_error: message.toString()}});\r\n });\r\n }\r\n\r\n fetchAdminProfileInfo=(apiPath, errorMsg)=>{\r\n fetchData(apiPath).then((data) => {\r\n let state = {...this.state};\r\n state.loading = false;\r\n if (data) {\r\n state.admin = true;\r\n state.loading_error = \"\";\r\n state.profile = data;\r\n }\r\n else{\r\n state.loading_error = \"Failed to Load\"\r\n }\r\n this.setState(state);\r\n }).catch((message)=>{\r\n this.setState({...{loading:false, fetch_error: message.toString()}});\r\n });\r\n }\r\n\r\n getSaveBody = (profile) => {\r\n return {\r\n ServiceNumber: this.state.ServiceNumber,\r\n PBXUserID: profile.PBXUserID,\r\n CustomerProductId: 0,\r\n FirstName: profile.FirstName,\r\n LastName: profile.LastName,\r\n Title: profile.Title,\r\n DepartmentName: profile.Department.Name,\r\n Language: profile.Language.Name,\r\n TimeZone: profile.Timezone.ID,\r\n NCOS: profile.NetworkClassOfService.ID,\r\n Email: profile.Email,\r\n Location: profile.Location,\r\n Address1: profile.Address1,\r\n Address2: profile.Address2,\r\n City: profile.City,\r\n State: profile.State.ID,\r\n Zip: profile.Zip,\r\n IMAP_ID: profile.IMAPID,\r\n YahooId: profile.YahooId,\r\n Mobile: profile.Mobile,\r\n Pager: profile.Pager,\r\n CallingLineFirstName: profile.CallingLineFirstName,\r\n CallingLineLastName: profile.CallingLineLastName,\r\n DialingFirstName: profile.DialingFirstName,\r\n DialingLastName: profile.DialingLastName,\r\n Country: profile.Country\r\n };\r\n }\r\n\r\n handleSaveNew=()=> {\r\n let state = {...this.state};\r\n state.saving_loading = true;\r\n state.saving_show_success = false;\r\n this.setState(state);\r\n let body = this.state.currentUser && this.state.admin? JSON.stringify(state.profile) : JSON.stringify(this.getSaveBody(state.profile));\r\n\t\tlet headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n\r\n let api = '';\r\n if (this.state.currentUser && this.state.admin && !this.state.ServiceId) \r\n api = \"admin/SetAdminProfileEdit\"\r\n else\r\n api = \"usr/UpdateUserProfile\";\r\n post(api,\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state};\r\n\t\t\tif(response.ok){\r\n state.saving_show_success = true;\r\n state.saving_loading = false;\r\n state.saving_show_error = false;\r\n this.props.updateProfilePage(this.state.profile.FirstName, \r\n this.state.profile.LastName, \r\n this.state.profile.Title ? this.state.profile.Title : '',\r\n this.state.profile.Department ? this.state.profile.Department.Name : '',\r\n this.state.profile.Email,\r\n this.state.profile.Language ? this.state.profile.Language.Name : ''\r\n );\r\n\t\t\t}\r\n\t\t\telse{\r\n state.saving_loading = false;\r\n state.saving_show_error = true;\r\n\t\t\t\tstate.saving_error_message = \"Failed Save\";\r\n }\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state};\r\n state.saving_loading = false;\r\n state.saving_show_error = true;\r\n state.saving_error_message = \"Failed Save\";\r\n this.setState(state);\r\n\t\t});\r\n }\r\n\r\n\r\n handleSave=()=>{\r\n let state = {...this.state};\r\n state.saving_loading = true;\r\n state.saving_show_success = false;\r\n this.setState(state);\r\n let body = JSON.stringify(state.profile);\r\n\t\tlet headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n\r\n let api = this.state.currentUser && this.state.admin? \"admin/SetAdminProfileEdit\": \"usr/SetUserProfileEdit\";\r\n post(api,\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state};\r\n\t\t\tif(response.ok){\r\n state.saving_show_success = true;\r\n state.saving_loading = false;\r\n state.saving_show_error = false;\r\n\t\t\t}\r\n\t\t\telse{\r\n state.saving_loading = false;\r\n state.saving_show_error = true;\r\n\t\t\t\tstate.saving_error_message = \"Failed Save\";\r\n }\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state};\r\n state.saving_loading = false;\r\n state.saving_show_error = true;\r\n state.saving_error_message = \"Failed Save\";\r\n this.setState(state);\r\n\t\t});\r\n }\r\n\r\n handleOnChange=(field, event)=>{\r\n\r\n let state = {...this.state};\r\n switch(field){\r\n case FirstName:\r\n state.profile.FirstName = event.target.value;\r\n state.profile.CallingLineFirstName = state.profile.FirstName;\r\n break;\r\n case LastName:\r\n state.profile.LastName = event.target.value;\r\n state.profile.CallingLineLastName = state.profile.LastName;\r\n break;\r\n case Department:\r\n let department = event.target.value.split(\"|\");\r\n state.profile.Department.ServiceProviderId = department[0];\r\n state.profile.Department.GroupId = department[1];\r\n state.profile.Department.Name = department[2];\r\n break;\r\n case Language:\r\n state.profile.Language.ID = event.target.value;\r\n state.profile.Language.Name = state.profile.Languages.filter(e=> e.ID === state.profile.Language.ID)[0].Name;\r\n break;\r\n case Timezone:\r\n state.profile.Timezone.ID = event.target.value;\r\n state.profile.Timezone.Name = state.profile.Timezones.filter(e=> e.ID === state.profile.Timezone.ID)[0].Name;\r\n break;\r\n case NetworkClassOfService:\r\n state.profile.NetworkClassOfService.ID = event.target.value;\r\n break;\r\n case DialingFirstName:\r\n case DialingLastName:\r\n case Title:\r\n case AlternatePhone:\r\n case Email:\r\n case Location:\r\n case Address1:\r\n case Address2:\r\n case City:\r\n case Zip:\r\n case Country:\r\n state.profile[field] = event.target.value;\r\n break;\r\n case State:\r\n state.profile.State.ID = event.target.value;\r\n state.profile.State.Name = state.profile.States.filter(e=> e.ID === state.profile.State.ID)[0].Name;\r\n break;\r\n }\r\n\r\n if(state.profile.Email && !EmailValidator.validate(state.profile.Email))\r\n state.valid = false;\r\n else\r\n state.valid = true;\r\n \r\n this.setState(state);\r\n }\r\n\r\n componentWillReceiveProps(nextProps){\r\n this.updateByProps(nextProps);\r\n }\r\n\r\n componentDidMount() {\r\n this.updateByProps(this.props);\r\n }\r\n \r\n updateByProps=(props)=>{\r\n let state = {...this.state}; \r\n state.admin = props.isAdmin;\r\n state.profile = props.CurrentUserProfile;\r\n if(props.CurrentUserProfile && props.isAdmin){ \r\n state.visible = true;\r\n this.setState(state);\r\n }\r\n else{\r\n let state = {...this.state};\r\n state.visible = false;\r\n this.setState(state);\r\n let ServiceNumber = '';\r\n let PBXUserID = '';\r\n if ((!props.ServiceNumber || props.ServiceNumber === '') && (!props.PBXUserID || props.PBXUserID === ''))\r\n {\r\n console.log('ServiceNumber: ' + state.ServiceNumber)\r\n console.log('PBXUserID: ' + state.PBXUserID)\r\n } else {\r\n ServiceNumber = props.ServiceNumber\r\n PBXUserID = props.PBXUserID;\r\n }\r\n\r\n let editAvailableApi = format('usr/ProfileEditAvailable?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}',props);\r\n fetchData(editAvailableApi).then((data) => {\r\n let state = {...this.state};\r\n if (data) { \r\n state.visible = true;\r\n this.setState(state);\r\n }\r\n }).catch((message)=>{\r\n console.log(message)\r\n });\r\n }\r\n \r\n } \r\n\r\n getModalBodyContent=()=>{\r\n let loading = this.state.loading;\r\n if(loading){\r\n return ( \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {loading_error}
);\r\n }\r\n\r\n if(this.props.CurrentUserProfile && this.state.admin){\r\n return this.getAdminForm();\r\n }\r\n else if (this.props.CurrentUserProfile && this.props.CurrentUserProfile.PBXUserId && this.props.CurrentUserProfile.PBXUserId !== '' && this.state.isIPTrunking === false){ //TODO: else if (user's service is broadsoft)\r\n return this.getBroadsoftUserForm();\r\n } else\r\n return this.getUserForm(); \r\n }\r\n\r\n getBroadsoftUserForm=()=>{\r\n let profile = this.state.profile;\r\n let headerValues = this.props.GetHeaderValues();\r\n let blankState = { ID: \"\", Name: \"\"};\r\n let stateDropDownOptions = profile.States.map((x,index)=>{\r\n return {id:x.ID, name:x.Name};\r\n });\r\n stateDropDownOptions.splice(0,0, blankState);\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
);\r\n }\r\n \r\n getAdminForm=()=>{\r\n let profile = this.state.profile;\r\n let headerValues = this.props.GetHeaderValues();\r\n let blankState = { ID: \"\", Name: \"\"};\r\n let stateDropDownOptions = profile.States.map((x,index)=>{\r\n return {id:x.ID, name:x.Name};\r\n });\r\n stateDropDownOptions.splice(0,0, blankState);\r\n return (\r\n Profile allows you to view and maintain your profile information. The information filled in specifies your primary phone number, extension, and device that are used for handling calls. Filling in the additional information section allows your mobile phone, pager, and other information to be visible to other group members in the group phone list. Some of this information can only be modified by your administrator.
\r\n\r\n
Enterprise ID: {headerValues.EnterpriseId}
Group: {headerValues.GroupId}
User ID: {profile.PBXUserID ? profile.PBXUserID : profile.UserId}
IMAP ID: {profile.ImapID}
Calling Line ID First Name: {profile.CallingLineFirstName}
Calling Line ID Last Name: {profile.CallingLineLastName}
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n { return {id: x.ServiceProviderId +\"|\"+ x.GroupId + \"|\" + x.Name, name: x.Name}} )\r\n }\r\n onChange={this.handleOnChange}\r\n />\r\n
\r\n \r\n {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n />\r\n
\r\n \r\n {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n />\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n this.handleOnChange(Address2,e)}/>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n
);\r\n }\r\n\r\n getUserForm = () => {\r\n let profile = this.state.profile;\r\n let headerValues = this.props.GetHeaderValues();\r\n let blankState = { ID: \"\", Name: \"\"};\r\n let stateDropDownOptions = profile.States.map((x,index)=>{\r\n return {id:x.ID, name:x.Name};\r\n });\r\n stateDropDownOptions.splice(0,0, blankState);\r\n return (\r\n Profile allows you to view and maintain your profile information. The information filled in specifies your primary phone number, extension, and device that are used for handling calls. Filling in the additional information section allows your mobile phone, pager, and other information to be visible to other group members in the group phone list. Some of this information can only be modified by your administrator.
\r\n\r\n
Enterprise ID: {headerValues.EnterpriseId}\r\n
Group: {headerValues.GroupId}\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.handleOnChange(Address2,e)}/>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/*
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {/*\r\n \r\n Edit Profile \r\n \r\n \r\n {this.getModalBodyContent()}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n};\r\n\r\nclass SavingMessageControl extends Component {\r\n render() {\r\n let successMessage = \"\";\r\n if(this.props.showSuccess){\r\n successMessage = (\r\n \r\n \r\n 
\r\n )\r\n }\r\n\r\n if (qrOktaImageUrl && !loadingQR && isOktaPushEnabled) {\r\n return (\r\n 
\r\n )\r\n }\r\n\r\n return null;\r\n }\r\n\r\n getBodyContent() {\r\n let loading = this.state.loading;\r\n if (loading) {\r\n return (\r\n \r\n \r\n Enable Multi-factor Authentication\r\n \r\n \r\n {/* */}\r\n \r\n \r\n {this.getBodyContent()}\r\n {this.errorContent()}\r\n {sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\"\r\n ? \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction isNumericInput(event) {\r\n const key = event.keyCode;\r\n return ((key >= 48 && key <= 57) || // Allow number line\r\n (key >= 96 && key <= 105) // Allow number pad\r\n );\r\n};\r\n\r\nfunction isModifierKey(event) {\r\n const key = event.keyCode;\r\n return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End\r\n (key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete\r\n (key > 36 && key < 41) || // Allow left, up, right, down\r\n (\r\n // Allow Ctrl/Command + A,C,V,X,Z\r\n (event.ctrlKey === true || event.metaKey === true) &&\r\n (key === 65 || key === 67 || key === 86 || key === 88 || key === 90)\r\n )\r\n};\r\n\r\nfunction enforceFormat(event) {\r\n // Input must be of a valid number format or a modifier key, and not longer than ten digits\r\n if (!isNumericInput(event) && !isModifierKey(event)) {\r\n event.preventDefault();\r\n }\r\n};\r\n\r\nfunction formatToPhone(event) {\r\n if (isModifierKey(event)) { return; }\r\n\r\n const input = event.target.value.replace(/\\D/g, '').substring(0, 10); // First ten digits of input only\r\n const areaCode = input.substring(0, 3);\r\n const middle = input.substring(3, 6);\r\n const last = input.substring(6, 10);\r\n\r\n if (input.length > 6) { event.target.value = `(${areaCode}) ${middle} - ${last}`; }\r\n else if (input.length > 3) { event.target.value = `(${areaCode}) ${middle}`; }\r\n else if (input.length > 0) { event.target.value = `(${areaCode}`; }\r\n};\r\n\r\nfunction removePhoneFormatting(phoneNumber) {\r\n return phoneNumber.replace(/\\D/g, '');\r\n}","import React, { Component } from 'react';\r\nimport { fetchData, postData } from './../requests/api_calls';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport * as settings from './../scripts/settings';\r\nimport EditProfileModal from './profile/modals/editProfileModal'\r\nimport ChangePasswordModal from './profile/modals/changePasswordModal';\r\nimport ChangeEmailModal from './profile/modals/changeEmailModal';\r\nimport E911Modal from './profile/modals/e911Modal';\r\nimport { userIsAdmin, selectedUserIsAdmin, titleCasePhrase } from './../scripts/helper';\r\nimport { connect } from 'react-redux';\r\nimport MFAAuthModal from '../components/mfa/mfaModal';\r\n\r\nclass Profile extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n fetch_error: \"\",\r\n hasValidUser: true,\r\n loading: true,\r\n profile: {},\r\n showE911: props.match ? props.match.params.modal === 'e911' : false,\r\n hasE911: true,\r\n propsSN: props.match && props.match.ServiceNumber ? props.match.ServiceNumber : '',\r\n adminProfile: props.adminProfile,\r\n ServiceNumber: props.ServiceNumber,\r\n PBXUserID: props.PBXUserID\r\n };\r\n this.getHeaderValues = this.getHeaderValues.bind(this);\r\n this.getChangeEmailValues = this.getChangeEmailValues.bind(this);\r\n this.updateFromEditProfile = this.updateFromEditProfile.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchProfileInfo(this.getProfileApiUrl(this.state.ServiceNumber, this.state.PBXUserID), settings.noResultsMsg);\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n let urlPath = window.location.pathname;\r\n let pbx = '';\r\n let sn = '';\r\n let parts = urlPath.split('/');\r\n if (parts.length > 2) {\r\n if (parts[parts.length - 1] !== 'profile') {\r\n sn = parts[parts.length - 2].replace(\"%20\", \"\");\r\n pbx = parts[parts.length - 1];\r\n }\r\n else\r\n this.setState({ adminProfile: true });\r\n }\r\n let state = this.state;\r\n if ((state.ServiceNumber !== sn && props.ServiceNumber !== sn) || (state.PBXUserID !== pbx && props.PBXUserID !== pbx)) {\r\n this.setState({ loading: true });\r\n this.updateServiceSelector(sn, pbx);\r\n }\r\n else if (state.ServiceNumber !== sn || state.PBXUserID !== pbx) {\r\n this.setState({ ServiceNumber: sn, PBXUserID: pbx, loading: true });\r\n this.fetchProfileInfo(this.getProfileApiUrl(sn, pbx), settings.noResultsMsg);\r\n }\r\n }\r\n\r\n updateServiceSelector = async (ServiceNumber, PBXUserID) => {\r\n let UserId = 0;\r\n let UserRole = '';\r\n let apiPath = `usr/GetUserIdRole?ServiceNumber=${ServiceNumber}&PBXUserID=${PBXUserID}`;\r\n let data = await fetchData(apiPath).catch((message) => {\r\n this.setState({ ...{ loading: false, fetch_error: message.toString() } });\r\n });\r\n if (data !== null) {\r\n UserId = data.UserId;\r\n UserRole = data.Role;\r\n }\r\n this.setState({ adminProfile: selectedUserIsAdmin(UserRole) });\r\n settings.selectService(UserId, ServiceNumber, PBXUserID);\r\n\r\n }\r\n\r\n fetchProfileInfo = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n if (data !== null && data !== undefined) {\r\n this.loadData(data);\r\n this.setState({ loading: false });\r\n }\r\n else {\r\n this.setState({ profile: {}, loading: false });\r\n }\r\n }).catch((message) => {\r\n this.setState({ ...{ loading: false, fetch_error: message.toString() } });\r\n });\r\n }\r\n\r\n // loadData = async (data) => {\r\n // let bValidUser = true;\r\n // if (!data.FirstName || data.FirstName === '' || !data.LastName || data.LastName === '')\r\n // bValidUser = false;\r\n\r\n // await this.setState({...{profile: data,loading: false, hasValidUser: bValidUser}});\r\n // }\r\n\r\n loadData = (data) => {\r\n let bShow911 = false;\r\n if (data.HasE911 && data.HasE911.toString() === 'true')\r\n bShow911 = true;\r\n\r\n this.setState({ ...{ profile: data, loading: false, hasE911: bShow911 } });\r\n }\r\n updateFromEditProfile = (FirstName, LastName, Designation, Department, Email, Language) => {\r\n let profile = this.state.profile;\r\n profile.FirstName = FirstName;\r\n profile.LastName = LastName;\r\n profile.Designation = Designation;\r\n profile.Department = Department;\r\n profile.Email = Email;\r\n profile.Language = Language;\r\n this.setState({ profile: profile });\r\n }\r\n\r\n getProfile = () => {\r\n let title = \"\";\r\n let profile = this.state.profile; //this.state.profile.UserId === parseInt(sessionStorage.userId) && userIsAdmin() ? this.props.adminProfile : this.state.profile;\r\n let isAdmin = this.state.profile.UserId === parseInt(sessionStorage.userId) && userIsAdmin() ? true : (\r\n (this.state.profile.Role === 'SUPER_ADMIN' || this.state.profile.Role === 'ALLGROUP_ADMIN' || this.state.profile.Role === 'GROUP_ADMIN') ? true : false\r\n );\r\n\r\n if (this.state.profile.Designation)\r\n title = \r\n // \r\n // )\r\n // else{\r\n // return ( \r\n // {this.state.profile.CustomerName}\r\n // \r\n // )\r\n // }\r\n }\r\n getChangeEmailValues = () => {\r\n return {\r\n ServiceNumber: this.state.profile.ServiceNumber, //props.CurrentUserProfile.ServiceNumber ? props.CurrentUserProfile.ServiceNumber : '',\r\n PBXUserID: this.state.profile.PBXUserId,\r\n UserID: sessionStorage.SelectedUserId ? sessionStorage.SelectedUserId : 0\r\n }\r\n }\r\n getHeaderValues = () => {\r\n return {\r\n EnterpriseId: this.state.profile.ParentAccountNumber,\r\n ServiceNumber: this.state.profile.ServiceNumber,\r\n Mobile: this.state.profile.Mobile,\r\n Pager: this.state.profile.Pager,\r\n YahooId: this.state.profile.YahooId,\r\n GroupId: this.state.profile.Location\r\n };\r\n }\r\n\r\n render() {\r\n if (this.state.loading) {\r\n return (\r\n \r\n \r\n Manage Payments \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n};\r\n\r\nexport default PayManageModal;\r\n","import React, { Component } from 'react';\r\nimport SuperLink from './../components/super_link';\r\nimport BillingChart from './billing_chart';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { fetchData } from './../requests/api_calls';\r\nimport PayModal from './modals/payModal';\r\nimport PayManageModal from './modals/payManageModal';\r\n\r\nvar Masonry = require('react-masonry-component');\r\n\r\nclass Billing extends Component {\r\n constructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n bill_stat: {\r\n\t\t\t\tCustomerName:\"\",\r\n\t\t\t\tCustomerAccountNumber:\"\",\r\n\t\t\t\tStreet1BILL:\"\",\r\n\t\t\t\tStreet2BILL:\"\",\r\n\t\t\t\tCityBILL:\"\",\r\n\t\t\t\tStateBILL:\"\",\r\n\t\t\t\tZipBILL:\"\",\r\n\t\t\t\tInvoiceID:\"\",\r\n\t\t\t\tInvoiceDate:\"\",\r\n\t\t\t\tInvoiceDueDate:\"\",\r\n\t\t\t\tInvoiceAmount:\"\",\r\n\t\t\t\tInvoicePaid:\"\",\r\n\t\t\t\tInvoiceName:\"\",\r\n\t\t\t\tInvoiceURL:\"\",\r\n\t\t\t},\r\n };\r\n }\r\n\tcomponentDidMount() {\r\n this.fetchBillingStat('/admin/BillingStat');\r\n }\r\n\r\n fetchBillingStat = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n if (data !== null) { \r\n this.loadData(data);\r\n } else if (data === null) {\r\n this.showNoResultsMessage(errorMsg);\r\n };\r\n });\r\n }\r\n\t\r\n loadData = (data) => {\r\n\t\tdata.InvoiceAmount = data.InvoicePaid? 0: data.InvoiceAmount.toLocaleString(undefined, { minimumFractionDigits: 2 });\r\n\t\tdata.InvoiceDueDate = (new Date(data.InvoiceDueDate)).toLocaleDateString();\r\n this.setState({bill_stat: data});\r\n }\r\n\r\n render() {\r\n return (\r\n\t\t\t { this.SelectAllLocations(e.target.checked)}}\r\n />\r\n );\r\n }\r\n\r\n getCheckBoxListing = (location) => {\r\n const bChecked = this.state.selectedLocations && this.state.selectedLocations.length > 0 && \r\n this.state.selectedLocations.filter(resp => resp.LocationAccountNumber === location.LocationAccountNumber).length > 0\r\n return (\r\n { this.UpdateSelectedLocations(location.LocationAccountNumber, e.target.checked)}}\r\n />\r\n )\r\n }\r\n\r\n getLocationRows = () => {\r\n let responseObj = this.state.LocationList.map((location) => {\r\n return (\r\n \r\n {this.getCheckBoxListing(location)} \r\n {location.LocationAccountNumber} {location.LocationName} \r\n \r\n )\r\n });\r\n return responseObj;\r\n }\r\n\r\n getLocationsCheckBoxList = () => {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getSaveMessage = () => {\r\n if (this.state.saving)\r\n {\r\n return (\r\n \r\n \r\n \r\n Edit Emergency Call Notification Email \r\n \r\n \r\n \r\n \r\n
\r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\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 E911EmailNotificationModal;","import React, { Component } from 'react';\nimport * as settings from './../../scripts/settings';\nimport { fetchData } from './../../requests/api_calls';\nimport { DataLoadingSpinner } from './../../components/spinners';\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\nimport { orderBy } from '@progress/kendo-data-query';\nimport { Link } from 'react-router-dom';\nimport { serviceFilters } from './../../constants/filters'\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\nimport E911Modal from '../profile/modals/e911Modal';\nimport E911EmailNotificationModal from './modals/E911EmailNotificationModal';\nimport WrappedCell from '../../components/wordWrappedCell'\nimport _ from 'lodash';\n\nclass LocationName extends GridCell {\n\n render() {\n let { LocationAccountNumber, LocationName } = this.props.dataItem;\n return (\n \n {LocationName}\n \n );\n }\n}\n\nclass LocationLink extends GridCell {\n\n render() {\n let locationID = this.props.dataItem.LocationAccountNumber;\n let path = \"/services/\" + locationID + '/' + serviceFilters.ALL_SERVICES_USERS;\n return (\n \n {sessionStorage.enterpriseType ==='DATA'? \n );\n }\n}\n\nclass ServiceLink extends GridCell {\n\n render() {\n let locationID = this.props.dataItem.LocationAccountNumber;\n let path = \"/services/\" + locationID + '/' + serviceFilters.ALL_SERVICES;\n return (\n \n {this.props.dataItem.CountServices}\n \n );\n }\n}\n\nclass UserLink extends GridCell {\n\n render() {\n let locationID = this.props.dataItem.LocationAccountNumber;\n let path = \"/services/\" + locationID + '/' + serviceFilters.ALL_USERS;\n return (\n \n {this.props.dataItem.CountUsers}\n \n );\n }\n}\n\n// class ServiceNumbersClickPop extends GridCell {\n// render() {\n// return (\n// \n// \n// );\n// }\n// }\n\nclass LocationEditButton extends GridCell {\n\n render() {\n let locationID = this.props.dataItem.LocationAccountNumber;\n return (\n \n \n \n \n \n );\n }\n}\n\nclass Locations extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n locations: [],\n preFilter: props.location.state ? props.location.state.preFilter : null,\n loading: true,\n sort: [],\n skip: 0,\n gridHeight: (window.innerHeight - 210) + 'px',\n searchTerm: ''\n };\n this.fetchLocations = this.fetchLocations.bind(this);\n this.searchLocations = this.searchLocations.bind(this);\n this.sortChange = this.sortChange.bind(this);\n this.pageChange = this.pageChange.bind(this);\n const getLocations = this.getLocations.bind(this);\n const updateLocationFromModal = this.updateLocationFromModal.bind(this);\n class E911Link extends GridCell {\n constructor(props) {\n super(props);\n }\n render() {\n const productItem = this.props.dataItem;\n return (\n \n \n );\n }\n }\n\n class Location911Email extends GridCell {\n constructor(props) {\n super(props);\n }\n render() {\n const productItem = this.props.dataItem;\n const locations = getLocations();\n let address = productItem.StreetSVC + ' ' + productItem.CitySVC + ', ' + productItem.StateSVC + ' ' + productItem.ZipSVC;\n return (\n \n \n )\n }\n }\n\n this.E911Link = E911Link;\n this.E911EmailModal = Location911Email;\n };\n\n handleResize = () => this.setState({\n gridHeight: (window.innerHeight - 210) + 'px'\n });\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize)\n }\n\n\n componentWillReceiveProps(nextProps, nextContext) {\n let curFilter = nextProps.location.state ? nextProps.location.state.preFilter : null;\n let apiPath;\n if (curFilter)\n apiPath = 'admin/Locations?term=' + curFilter;\n else\n apiPath = 'admin/Locations';\n\n this.setState({ ...this.state, preFilter: curFilter, loading: true });\n this.fetchLocations(apiPath);\n }\n\n componentDidMount() {\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize)\n let apiPath = '';\n if (this.state.preFilter) {\n apiPath = 'admin/Locations?term=' + this.state.preFilter;\n } else {\n apiPath = 'admin/Locations';\n }\n this.fetchLocations(apiPath);\n }\n\n\n fetchLocations = (apiPath, resultsMsg, showLoading = true) => {\n this.setState({ loading: showLoading });\n fetchData(apiPath).then((data) => {\n if (data !== null) {\n this.setState({ locations: data, loading: false, resultsMsg: null });\n } else if (data === null) {\n this.setState({ locations: [], loading: false, resultsMsg: resultsMsg });\n };\n }).catch(ex => {\n console.log(ex);\n this.setState({ locations: [], loading: false });\n });\n }\n\n getLocations = () => {\n return this.state.locations;\n }\n\n updateLocationFromModal = async (locations, email) => {\n let updatedLocations = this.state.locations.slice();\n await locations.map((loc) => {\n let updatedLocation = updatedLocations.filter(res => res.LocationAccountNumber === loc);\n if (updatedLocation) {\n updatedLocation = updatedLocation[0];\n let idx = _.indexOf(this.state.locations, updatedLocation);\n updatedLocation.EmergencyCallNotificationEmail = email;\n updatedLocations[idx] = updatedLocation;\n\n }\n });\n\n let searchText = this.state.searchTerm;\n var apiPath = ''\n if (searchText !== '') {\n apiPath = 'admin/Locations?term=' + searchText;\n } else { // reset to all locations\n apiPath = 'admin/Locations';\n }\n this.setState({ locations: updatedLocations });\n //this.fetchLocations(apiPath, settings.noResultsMsg, false);\n }\n\n activeFilters = () => {\n let prefilter = this.state.preFilter;\n if (prefilter) {\n return (\n \n \r\n \r\n Edit Location \r\n \r\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 locationEditModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass LocationAccountCodesModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \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\nexport default SetSubmenu;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport SetPrompts from './../../setPrompts';\r\nimport SetSubmenu from './../../setSubmenu';\r\n\r\nclass LocationAutoAttendantTreeModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleTab = this.handleTab.bind(this);\r\n this.state = { showModal:false,promptValue: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n handleTab(event) {\r\n event.preventDefault();\r\n this.setState({promptValue: event.target.dataset.val})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n \r\n )\r\n }\r\n // newDepartmentName(){\r\n // if (this.props.type !== \"EDIT\") return null;\r\n // return ('Department Name');\r\n // }\r\n};\r\n\r\nexport default DepartmentModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass EnterpriseDirectoryModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n\t\tthis.handleShow = this.handleShow.bind(this);\r\n\t\tthis.handleClose = this.handleClose.bind(this);\r\n\t\tthis.state = { showModal:false };\r\n\t}\r\n\r\n\thandleClose() {\r\n\t\tthis.setState({ showModal: false });\r\n\t}\r\n\r\n\thandleShow() {\r\n\t\tthis.setState({ showModal: true });\r\n\t}\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n \r\n return (\r\n \r\n \r\n )\r\n }\r\n // newDepartmentName(){\r\n // if (this.props.type !== \"EDIT\") return null;\r\n // return ('Department Name');\r\n // }\r\n};\r\n\r\nexport default EnterpriseDirectoryModal;\r\n","import React from 'react';\r\n\r\nexport const formClass = (state) => state.saving ? 'form-group opaque' : 'form-group';\r\n\r\nexport const fqdnsOptions = (fqdns) => fqdns.map((fqdn, index) => fqdnsOption(fqdn, index));\r\n\r\nexport const fqdnsOption = (fqdn, index) => \r\n\r\nexport const savingOrConfirming = (state) => state.saving || state.statusMessage;\r\n\r\nexport const footerBtnClass = (state) => {\r\n\treturn savingOrConfirming(state) || state.loading ? 'opaque' : 'visible btns';\r\n}\r\n\r\nexport const hideSpinnerDelay = 500;\r\n\r\nexport const statusMsgDelay = 300;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from './../../../requests/api_calls';\r\nimport * as help from'./../locations_helpers';\r\nimport SaveStatus from './../../../components/save_status';\r\nimport { DataLoadingSpinner } from'./../../../components/spinners';\r\n\r\nclass GroupFqdnModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.fetchFqdns = this.fetchFqdns.bind(this);\r\n this.fqdnsOptions = this.fqdnsOptions.bind(this);\r\n this.fqdnsOption = this.fqdnsOption.bind(this);\r\n this.state = { loading: true, showModal: false, fqdns: []};\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n fetchFqdns = () => {\r\n let params = '?locationAccountNumber=' + this.props.locationAccNum;\r\n apiCalls.fetchData('admin/GetFqdns' + params).then((data) => {\r\n if (data !== null) {\r\n let fqdnList = [];\r\n fqdnList.push('')\r\n data.unshift(fqdnList).sort();\r\n this.setState({fqdns: data});\r\n } else if (data === null) {\r\n // Need to send user instruction on how to create FQDN options\r\n }\r\n });\r\n }\r\n\r\n fetchDeviceLocation = () => {\r\n let params = '?locationAccountNumber=' + this.props.locationAccNum;\r\n apiCalls.fetchData('admin/GetDeviceLocationProperties' + params).then((data) => {\r\n if (data !== null) {\r\n //need to pull down all properties because the save is otherwise overriding the save in the VLAN modal\r\n setTimeout(() => this.setState({\r\n loading: false,\r\n currentFqdn: data.FQDN, \r\n newFqdn: data.FQDN,\r\n EncryptedAudio: data.EncryptedAudio,\r\n TransportProtocol: data.TransportProtocol,\r\n useTcp: data.TransportProtocol === 'TCP', \r\n VlanId: data.VlanId || '',\r\n useVlanId: data.VlanId !== ('' || null)\r\n }), help.hideSpinnerDelay);\r\n }\r\n });\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false, statusMessage: null });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ loading: true, showModal: true });\r\n this.fetchFqdns();\r\n this.fetchDeviceLocation();\r\n }\r\n\r\n fqdnsOptions = () => this.state.fqdns.map((fqdn, index) => this.fqdnsOption(fqdn, index));\r\n\r\n fqdnsOption = (fqdn, index) => \r\n\r\n setNewFqdn = (e) => this.setState({newFqdn: e.target.value});\r\n\r\n saveStatus = () => {\r\n if (this.state.showErrorStatus) {\r\n return Error updating Group FQDN. Please try again.\r\n } else return null;\r\n }\r\n\r\n handleUpdateSuccess = () => {\r\n let currentFqdn = this.state.newFqdn;\r\n setTimeout(() => {this.setState({\r\n currentFqdn: currentFqdn,\r\n saving: false,\r\n statusMessage: 'Group FQDN settings were updated.',\r\n parentCallback: this.handleClose\r\n }), setTimeout(() => this.handleClose(), help.statusMsgDelay)}, help.hideSpinnerDelay);\r\n }\r\n\r\n handleUpdateError = () => {\r\n this.setState({showErrorStatus: true});\r\n setTimeout(() => this.setState({showErrorStatus: false}), 3000);\r\n }\r\n\r\n saveDeviceLocationInput = () => {\r\n this.setState({saving: true, showSaveStatus: true});\r\n let data = JSON.stringify({\r\n LocationAccountNumber: this.props.locationAccNum,\r\n FQDN: this.state.newFqdn,\r\n EncryptedAudio: this.state.EncryptedAudio,\r\n TransportProtocol: this.state.TransportProtocol,\r\n VlanId: this.state.VlanId\r\n });\r\n let apiPath = 'admin/UpdateDeviceLocationProperties';\r\n apiCalls.send(apiPath, 'PATCH', data).then(resp => {\r\n resp.ok ? this.handleUpdateSuccess() : this.handleUpdateError();\r\n }).catch(message => {\r\n console.log('caught an exception updating device location FQDN');\r\n console.log(message)\r\n });\r\n }\r\n\r\n savingOrConfirming = () => this.state.saving || this.state.statusMessage;\r\n\r\n getModalBody = () => {\r\n if (this.state.loading) {\r\n return
\n )\n }\n }\n\n render() {\n return (\n Profile allows you to view and maintain your profile information. The information filled in specifies your primary phone number, extension, and device that are used for handling calls. Filling in the additional information section allows your mobile phone, pager, and other information to be visible to other group members in the group phone list. Some of this information can only be modified by your administrator.
\r\n\r\n
Enterprise ID: {headerValues.EnterpriseId}
Group: {headerValues.GroupId}
User ID: {profile.PBXUserID ? profile.PBXUserID : profile.UserId}
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n { return {id: x.ServiceProviderId +\"|\"+ x.GroupId + \"|\" + x.Name, name: x.Name}} )\r\n }\r\n onChange={this.handleOnChange}\r\n enabled={true}\r\n />\r\n
\r\n \r\n {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n enabled={true}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n enabled={true}\r\n />\r\n
\r\n \r\n {/* {\r\n return {id:x.ID, name:x.Name};\r\n })\r\n }\r\n onChange={this.handleOnChange}\r\n /> */}\r\n
\r\n \r\n {/*
*/}\r\n
);\r\n }\r\n\r\n validateEmail=(email)=>{\r\n if(email && !EmailValidator.validate(email.trim()))\r\n return (\r\n
\r\n E911 Address Information - Read-Only
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/*
\r\n '{email.trim()}' Not a valid email
);\r\n }\r\n\r\n render() {\r\n if(!this.state.visible)\r\n return ();\r\n\r\n return (\r\n \r\n Edit Profile\r\n \r\n
\r\n
\r\n {this.props.SuccessMessage}
\r\n )\r\n }\r\n\r\n let loadingMessage = \"\";\r\n if(this.props.showLoading){\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n\r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass SaveButton extends Component {\r\n render() {\r\n if(this.props.disabled)\r\n return ();\r\n else\r\n return ();\r\n }\r\n};\r\n\r\nclass ProfileTextField extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n { if (this.props.enabled === true) this.props.onChange(this.props.id,e) } }/>\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass ProfileDropdownField extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nProfileTextField.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n textvalue: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n onChange: PropTypes.func\r\n}\r\n\r\nSavingMessageControl.propTypes = {\r\n showSuccess: PropTypes.bool.isRequired,\r\n showLoading: PropTypes.bool.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ServiceNumber: state.reducer.ServiceNumber, \r\n PBXUserID: state.reducer.PBXUserID,\r\n isIpTrunking: state.reducer.isSelectedServiceIpTrunking\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(EditProfileModal);","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { connect } from 'react-redux';\r\nimport { fetchData, post } from '../../../requests/api_calls';\r\nimport * as config from '../../../requests/config';\r\n\r\nconst Password1=\"Password1\", Password2=\"Password2\";\r\n\r\nclass ChangePasswordModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { \r\n password1: \"\",\r\n password2: \"\",\r\n valid: false,\r\n validMessage: \"\",\r\n showModal: false,\r\n savingLoading: false,\r\n savingShowSuccess: false,\r\n savingShowError: false,\r\n savingErrorMessage: \"\",\r\n currentUser: props.CurrentUserProfile,\r\n admin: props.isAdmin,\r\n ServiceNumber: props.ServiceNumber,\r\n PBXUserID: props.PBXUserID\r\n };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n handleOnChange=(type, event)=>{\r\n let state = {...this.state};\r\n\r\n switch(type){\r\n case Password1:\r\n state.password1 = event.target.value;\r\n break;\r\n case Password2:\r\n state.password2 = event.target.value;\r\n break;\r\n }\r\n if (state.password1.length > 0 && state.password1.length < 8) {\r\n state.valid = false;\r\n state.validMessage = 'Password must be at least 8 characters long';\r\n } else if (!this.ValidPassword(state.password1)) {\r\n state.valid = false;\r\n state.validMessage = 'The password must contain at least 1 number or special character, at least 1 lower case letter, and at least 1 upper case letter';\r\n }\r\n else if((state.password1 && state.password2 && state.password1 !== state.password2) || (state.password1 && !state.password2) || (!state.password1 && state.password2)){\r\n state.valid = false;\r\n state.validMessage = \"The password is not the same\";\r\n } else if(state.password1 && state.password2 && state.password1 === state.password2){\r\n state.valid = true;\r\n state.validMessage = \"\";\r\n } \r\n this.setState(state);\r\n }\r\n\r\n ValidPassword = (pw) => { \r\n //var reg = /^.*(?=.{8,})(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).*/;\r\n var reg = /^.*(?=.{8,})(?=.*([\\d]|[!@#$%^&*{}_+=\\[\\]:;'\",<.>/?_`~\\\\\\|-]))(?=.*[a-z])(?=.*[A-Z]).*/;\r\n var test = reg.test(pw);\r\n return test;\r\n}\r\n\r\n handleOnSave=()=>{\r\n let state = {...this.state};\r\n state.savingLoading = true;\r\n state.savingShowSuccess = false;\r\n this.setState(state);\r\n\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n\r\n let body = {\r\n ServiceNumber: this.props.ServiceNumber,\r\n PBXUserID: this.props.PBXUserID,\r\n Password: this.state.password1\r\n };\r\n let apiUrl = \"\";\r\n if(this.state.currentUser && this.state.admin){\r\n body = {\r\n UserID: sessionStorage.userId,\r\n Password: this.state.password1\r\n };\r\n apiUrl = \"admin/ChangeAdminPassword\"\r\n }\r\n else{\r\n apiUrl = \"usr/ChangeUserPassword\"\r\n body = {\r\n UserID: sessionStorage.SelectedUserId,\r\n ServiceNumber: this.props.ServiceNumber,\r\n PBXUserID: this.props.PBXUserID,\r\n Password: this.state.password1\r\n };\r\n }\r\n\r\n body = JSON.stringify(body);\r\n post(apiUrl,\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state};\r\n\t\t\tif(response.ok){\r\n state.savingShowSuccess = true;\r\n state.savingLoading = false;\r\n state.savingShowError = false;\r\n\t\t\t}\r\n\t\t\telse{\r\n state.savingLoading = false;\r\n state.savingShowError = true;\r\n\t\t\t\tstate.savingErrorMessage = \"Failed Save\";\r\n }\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state};\r\n state.savingLoading = false;\r\n state.savingShowError = true;\r\n state.savingErrorMessage = \"Failed Save\";\r\n this.setState(state);\r\n\t\t});\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.ServiceNumber !== this.state.ServiceNumber || props.PBXUserID != this.state.PBXUserID)\r\n this.setState({ServiceNumber: props.ServiceNumber, PBXUserID: props.PBXUserID});\r\n }\r\n\r\n render() {\r\n let state = this.state;\r\n return (\r\n \r\n {this.getBtn()}\r\n \r\n \r\n Change Password \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getBtn(){\r\n const superlink = this.props.superlink;\r\n if (superlink) {\r\n return (\r\n Change Password\r\n )\r\n } else {\r\n return (\r\n \r\n )\r\n }\r\n }\r\n\r\n getValidationError=()=>{\r\n if(!this.state.valid && this.state.validMessage){\r\n return (\r\n
\r\n We recommend you choose a strong password to protect your online profile. The password length must be at least 8 characters. The password must contain at least 1 number or special character, at least 1 lower case letter, and at least 1 upper case letter.
\r\nAvoid using passwords that can be easily guessed such as your name, telephone number, social security number, or account number.
\r\n\r\n \r\n { this.handleOnChange(Password1, x) }}/>\r\n
\r\n \r\n \r\n { this.handleOnChange( Password2, x) }}/>\r\n
\r\n {this.getValidationError()}\r\n \r\n
\r\n this.handleOnSave()} />\r\n \r\n
\r\n {this.state.validMessage}
)\r\n }\r\n return \"\";\r\n }\r\n \r\n};\r\n\r\nclass SavingMessageControl extends Component {\r\n render() {\r\n let successMessage = \"\";\r\n if(this.props.showSuccess){\r\n successMessage = ({this.props.SuccessMessage}
\r\n )\r\n }\r\n\r\n let loadingMessage = \"\";\r\n if(this.props.showLoading){\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n\r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass SaveButton extends Component {\r\n render() {\r\n if(this.props.disabled)\r\n return ();\r\n else\r\n return ();\r\n }\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ServiceNumber: state.reducer.ServiceNumber,\r\n PBXUserID: state.reducer.PBXUserID\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(ChangePasswordModal);\r\n\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport format from 'string-format';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from './../../../components/spinners';\r\nimport { connect } from 'react-redux';\r\nimport { fetchData, post } from './../../../requests/api_calls';\r\nimport * as config from './../../../requests/config';\r\nimport * as EmailValidator from 'email-validator';\r\n\r\nconst PasswordEmail=\"PasswordEmail\", ServiceAndCpniEmail=\"ServiceAndCpniEmail\";\r\n\r\nclass ChangeEmailModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n let ChangeEmailValues = props.GetEmailValues();\r\n this.state = { \r\n showModal: false,\r\n loading: true, \r\n loadingError: \"\",\r\n valid: false,\r\n validMessage: \"\",\r\n savingLoading: false,\r\n savingShowSuccess: false,\r\n savingShowError: false,\r\n savingErrorMessage: \"\",\r\n currentUser: props.CurrentUserProfile,\r\n admin: props.isAdmin,\r\n ChangeEmail: {\r\n ServiceNumber: ChangeEmailValues.ServiceNumber || '', \r\n PBXUserID: ChangeEmailValues.PBXUserID || '', \r\n PasswordEmail:\"\",\r\n ServiceAndCpniEmail:\"\",\r\n UserID: ChangeEmailValues.UserID || 0\r\n }\r\n };\r\n }\r\n \r\n isValidEmail=(email)=> email && EmailValidator.validate(email)\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true, loading:true });\r\n if(this.state.currentUser && this.state.admin){\r\n this.fetchEmail(\"admin/GetAdminEmail?&UserID=\" + sessionStorage.userId);\r\n }\r\n else{\r\n this.fetchEmail(format(\"usr/GetUserEmail?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}\", this.state.ChangeEmail));\r\n }\r\n }\r\n\r\n fetchEmail = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n let changeEmail = {...this.state.ChangeEmail, PasswordEmail:\"\", ServiceAndCpniEmail:\"\"};\r\n let state = {...this.state, ChangeEmail: changeEmail, loading: false};\r\n if (data){\r\n let ce = data;\r\n state.ChangeEmail.PasswordEmail = ce.PasswordEmail;\r\n state.ChangeEmail.ServiceAndCpniEmail = ce.ServiceAndCpniEmail;\r\n //let ce = state.ChangeEmail = data;\r\n\r\n state.valid = this.isValidEmail(ce[PasswordEmail]) && this.isValidEmail(ce[ServiceAndCpniEmail]);\r\n state.validMessage = !ce[PasswordEmail] || !ce[ServiceAndCpniEmail]? \"Fill all fields\" : \"\";\r\n }\r\n this.setState(state);\r\n }).catch((message)=>{\r\n this.setState({...this.state, loading: false, loadingError: \"Fail to load\"});\r\n });\r\n }\r\n\r\n handleOnChange=(type, event)=>{\r\n let state = {...this.state};\r\n\r\n state.ChangeEmail[type] = event.target.value;\r\n\r\n let passwordEmail = state.ChangeEmail[PasswordEmail];\r\n let serviceAndCpniEmail = state.ChangeEmail[ServiceAndCpniEmail];\r\n\r\n state.valid = this.isValidEmail(passwordEmail) && this.isValidEmail(serviceAndCpniEmail)\r\n state.validMessage = !passwordEmail || !serviceAndCpniEmail? \"Fill all fields\" : \"\";\r\n\r\n this.setState(state);\r\n }\r\n\r\n handleOnSave=()=>{\r\n let state = {...this.state, savingLoading:true, savingShowSuccess: false};\r\n this.setState(state);\r\n\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.defaultXpolicy\r\n };\r\n\r\n if(this.state.currentUser && this.state.admin){\r\n state.ChangeEmail.UserID = sessionStorage.userId;\r\n }\r\n \r\n let body = JSON.stringify(state.ChangeEmail);\r\n let changeUserEmailApi = this.state.currentUser && this.state.admin ? \"admin/ChangeAdminEmail\": \"usr/ChangeUserEmail\";\r\n post(changeUserEmailApi,\"POST\", body, headers)\r\n\t\t.then(response =>{\r\n let state = {...this.state, \r\n savingLoading: false, \r\n savingShowSuccess: response.ok, \r\n savingShowError: !response.ok, \r\n savingErrorMessage: response.ok?\"\": \"Failed Save\"\r\n };\r\n\t\t\t\r\n this.setState(state);\r\n\t\t})\r\n\t\t.catch((message)=>{\r\n console.log(message);\r\n let state = {...this.state, \r\n savingLoading: false, \r\n savingShowError: true, \r\n savingErrorMessage: \"Failed Save\"\r\n };\r\n this.setState(state);\r\n\t\t});\r\n }\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let state = this.state;\r\n return (\r\n \r\n {this.getBtn()}\r\n \r\n \r\n Change Email \r\n \r\n \r\n {this.getBodyContent()}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getBodyContent=()=>{\r\n let loading = this.state.loading;\r\n if(loading){\r\n return ( \r\n
\r\n this.handleOnSave()} />\r\n \r\n
\r\n {loadingError}
);\r\n }\r\n\r\n return (\r\n \r\n
);\r\n }\r\n \r\n getValidationError=()=>{\r\n if(!this.state.valid && this.state.validMessage){\r\n return (\r\n \r\n { this.handleOnChange(PasswordEmail, x) }} />\r\n\r\n {this.validateEmail(this.state.ChangeEmail.PasswordEmail)}\r\n
\r\n \r\n \r\n { this.handleOnChange(ServiceAndCpniEmail, x) }} />\r\n\r\n {this.validateEmail(this.state.ChangeEmail.ServiceAndCpniEmail)}\r\n
\r\n {this.getValidationError()}\r\n {this.state.validMessage}
);\r\n }\r\n return \"\";\r\n }\r\n\r\n validateEmail=(email)=>{\r\n if(email && !EmailValidator.validate(email.trim()))\r\n return ('{email.trim()}' Not a valid email
);\r\n }\r\n\r\n getBtn(){\r\n const superlink = this.props.superlink;\r\n if (superlink) {\r\n return (\r\n Change Recovery Email\r\n )\r\n } else {\r\n return (\r\n \r\n )\r\n }\r\n }\r\n};\r\n\r\n\r\nclass SavingMessageControl extends Component {\r\n render() {\r\n let successMessage = \"\";\r\n if(this.props.showSuccess){\r\n successMessage = ({this.props.SuccessMessage}
\r\n )\r\n }\r\n\r\n let loadingMessage = \"\";\r\n if(this.props.showLoading){\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n\r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nclass SaveButton extends Component {\r\n render() {\r\n if(this.props.disabled)\r\n return ();\r\n else\r\n return ();\r\n }\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ServiceNumber: state.ServiceNumber,\r\n PBXUserID: state.PBXUserID\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(ChangeEmailModal);\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as EmailValidator from 'email-validator';\r\nimport { post, fetchData } from '../../requests/api_calls'\r\nimport { store } from '../../store/store';\r\nimport * as actions from \"../../store/actions\";\r\nimport * as session from '../../scripts/session';\r\nimport { DataLoadingSpinner } from '../spinners';\r\nimport { Switch } from '@progress/kendo-react-inputs';\r\n\r\nexport default class MFAAuthModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n email: '',\r\n showGrabEmailForm: false,\r\n showModal: false,\r\n loading: false,\r\n loadingQR: false,\r\n loadingError: '',\r\n qrImageUrl: '',\r\n qrKey: '',\r\n pinCode: '',\r\n phoneNumber: '',\r\n verificationMethod: sessionStorage.verificationMethod,\r\n validationError: \"\",\r\n successMessage: \"\",\r\n isTextMessageOn: false,\r\n isAuthAppOn: false,\r\n onSuccessSMS: false,\r\n onSuccessSubmitPinCode: false,\r\n isOktaPushEnabled: false,\r\n oktaId: \"\",\r\n };\r\n }\r\n\r\n async componentDidMount() {\r\n await this.setState({ loading: true })\r\n const userEmail = await fetchData('usr/GetUserEmailMFA').then(data => data).catch(err => console.error(err));\r\n if (userEmail) {\r\n if (sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\") {\r\n let method = sessionStorage.verificationMethod;\r\n await this.setState({ verificationMethod: method });\r\n if (method == \"sms\") {\r\n this.setState({ isTextMessageOn: true });\r\n }\r\n if (method == \"authApp\") {\r\n let isOkta = sessionStorage.IsOktaPushEnabled == \"true\" ? true : false;\r\n if (!isOkta) {\r\n this.getQRImageUrl();\r\n }\r\n await this.setState({ isAuthAppOn: true, isOktaPushEnabled: isOkta });\r\n }\r\n }\r\n await this.setState({ loading: false });\r\n } else {\r\n this.setState({ showGrabEmailForm: true, loading: false });\r\n }\r\n }\r\n\r\n handleOpen = () => {\r\n this.componentDidMount();\r\n this.setState({\r\n showModal: true,\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({\r\n showModal: false,\r\n successMessage: \"\",\r\n validationError: \"\",\r\n pinCode: \"\",\r\n verificationMethod: \"\",\r\n isTextMessageOn: false,\r\n isAuthAppOn: false,\r\n onSuccessSMS: false,\r\n onSuccessSubmitPinCode: false,\r\n oktaId: \"\",\r\n isOktaPushEnabled: false\r\n });\r\n };\r\n\r\n fetchUserEmail = async () => {\r\n try {\r\n await this.setState({ loading: true });\r\n const path = 'usr/GetUserEmailMFA';\r\n const response = await fetchData(path);\r\n if (response.ok) {\r\n await this.setState({ email: response });\r\n } else {\r\n console.error(`fetchUserEmail(): failed: ${response.message}`);\r\n this.setState({ validationError: \"Something went wrong while retrieving email.\", successMessage: \"\", loading: false });\r\n }\r\n } catch (error) {\r\n console.error(`fetchUserEmail(): failed: ${error}`);\r\n this.setState({ validationError: \"Something went wrong while retrieving email.\", successMessage: \"\", loading: false });\r\n }\r\n }\r\n\r\n getQRImageUrl = async () => {\r\n await this.setState({ loadingQR: true });\r\n try {\r\n const apiPath = 'usr/GetQRImageUrl';\r\n const tsv = await fetchData(apiPath);\r\n this.setState({ loadingQR: false, qrImageUrl: tsv.qrImageUrl, qrKey: tsv.keyCode });\r\n } catch (e) {\r\n console.error('Failed request. Not able to get QR Image Url', e);\r\n this.setState({ loadingQR: false, validationError: \"Something went wrong while retrieving the QR code.\", isOktaPushEnabled: false });\r\n }\r\n };\r\n\r\n getOktaQRImageUrl = async () => {\r\n await this.setState({ loadingQR: true });\r\n try {\r\n const apiOktaPath = 'usr/GetOktaPushQRImage';\r\n const tsv = await fetchData(apiOktaPath);\r\n this.setState({ loadingQR: false, qrOktaImageUrl: tsv.qrImageUrl, qrKey: tsv.keyCode });\r\n } catch (e) {\r\n console.error('Failed request. Not able to get QR Image Url', e);\r\n this.setState({ loadingQR: false, validationError: \"Something went wrong while retrieving the QR code.\", isOktaPushEnabled: false });\r\n }\r\n };\r\n\r\n enableOktaPush = async () => {\r\n await this.setState({ isOktaPushEnabled: true, loadingQR: true, confirmOktaVerify: false });\r\n this.getOktaQRImageUrl();\r\n }\r\n\r\n submitPhoneNumber = async () => {\r\n try {\r\n this.setState({ loading: true });\r\n const path = 'usr/ValidateTwoStepSmsConfig';\r\n const response = await post(path, \"POST\", JSON.stringify(this.getTFAUserData()));\r\n if (response.ok) {\r\n this.setState({ loading: false, onSuccessSMS: true, validationError: \"\", successMessage: \"You will receive an SMS code shortly to confirm your MFA configuration. Once received, input into the textbox at the bottom and click 'Save'!\", loading: false });\r\n } else {\r\n console.error(`submitPhoneNumber(): failed: ${response.message}`);\r\n this.setState({ loading: false, onSuccessSMS: false, validationError: \"Something went wrong while sending the SMS code.\", successMessage: \"\", loading: false });\r\n }\r\n } catch (error) {\r\n console.error(`submitPhoneNumber(): failed: ${error}`);\r\n this.setState({ loading: false, onSuccessSMS: false, validationError: \"Something went wrong while sending the SMS code.\", successMessage: \"\", loading: false });\r\n }\r\n }\r\n\r\n getTFAUserData = () => {\r\n const { qrKey, pinCode, verificationMethod, phoneNumber, isOktaPushEnabled, oktaId } = this.state;\r\n return {\r\n Key: qrKey,\r\n Code: pinCode,\r\n VerificationMethod: verificationMethod,\r\n EnableOktaPush: isOktaPushEnabled,\r\n Mobile: phoneNumber,\r\n OktaId: oktaId\r\n //Email: \"\",\r\n };\r\n };\r\n\r\n onSubmitAuthPinCode = async () => {\r\n try {\r\n await this.setState({ loading: true, successMessage: \"\", validationError: \"\" })\r\n let path = \"usr/SaveTwoStepVerification\";\r\n const response = await post(path, 'POST', JSON.stringify(this.getTFAUserData()));\r\n if (response.ok) {\r\n this.setState({ validationError: \"\", onSuccessSubmitPinCode: true });\r\n store.dispatch({ type: actions.VALIDATE_MFA });\r\n sessionStorage.setItem('verificationMethod', this.state.verificationMethod);\r\n sessionStorage.setItem('IsOktaPushEnabled', false);\r\n this.setState({ loading: false, successMessage: \"Success! You may continue with your current session. All login attempts from here on will require an access code.\", validationError: \"\" });\r\n } else {\r\n console.log(`onSubmitAuthPinCode(): failed: ${response.message}`);\r\n this.setState({ loading: false, validationError: `Something went wrong while saving the configuration: ${response.message}`, successMessage: \"\" });\r\n }\r\n } catch (error) {\r\n console.error(`onSubmitAuthPinCode(): failed: ${error}`);\r\n this.setState({ loading: false, validationError: `Something went wrong while saving the configuration: ${error}`, successMessage: \"\" });\r\n }\r\n };\r\n\r\n onSendPushNotification = async () => {\r\n try {\r\n await this.setState({ loading: true, successMessage: \"\", validationError: \"\" })\r\n let path = \"usr/SendOktaPushNotification?isConfigure=true\";\r\n const response = await post(path, 'POST', JSON.stringify(this.getTFAUserData()));\r\n if (response.ok) {\r\n this.setState({ validationError: \"\", onSuccessSubmitPinCode: true });\r\n store.dispatch({ type: actions.VALIDATE_MFA });\r\n sessionStorage.setItem('verificationMethod', this.state.verificationMethod);\r\n sessionStorage.setItem('IsOktaPushEnabled', true);\r\n this.setState({\r\n loading: false,\r\n successMessage: \"Your push request was successful!.\",\r\n validationError: \"\",\r\n qrOktaImageUrl: \"\"\r\n });\r\n } else {\r\n console.log(`onSendPushNotification(): failed: ${response.message}`);\r\n this.setState({ loading: false, validationError: `Something went wrong while saving the configuration: ${response.message}`, successMessage: \"\" });\r\n }\r\n } catch (error) {\r\n console.error(`onSendPushNotification(): failed: ${error}`);\r\n this.setState({ loading: false, validationError: `Something went wrong while saving the configuration: ${error}`, successMessage: \"\" });\r\n }\r\n }\r\n\r\n validateEmail(email) {\r\n if (email && !EmailValidator.validate(email.trim()))\r\n return ('{email.trim()}' Not a valid email
);\r\n }\r\n\r\n errorContent = () => {\r\n if (this.state.successMessage !== \"\") {\r\n return (\r\n {this.state.successMessage}
\r\n )\r\n }\r\n\r\n if (this.state.validationError === \"\") {\r\n return;\r\n } else {\r\n return (\r\n{this.state.validationError}
\r\n )\r\n }\r\n }\r\n\r\n sendEmailValidate = async (email) => {\r\n try {\r\n await this.setState({ loading: true });\r\n let path = `usr/ValidateTwoStepEmail?p_email=${email}`;\r\n const response = await fetchData(path);\r\n if (response === 200) {\r\n this.setState({ loading: false, validationError: \"\", successMessage: \"Success! You will receive a verification link to your chosen email and will be automatically logged out shortly.\" });\r\n setTimeout(() => {\r\n session.logout();\r\n }, 8000);\r\n } else {\r\n console.log(`sendEmailValidate failed: ${response.message}`);\r\n this.setState({ loading: false, validationError: \"Something went wrong while sending the email link.\", successMessage: \"\" });\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n this.setState({ loading: false, validationError: \"Something went wrong while sending the email link.\", successMessage: \"\" });\r\n }\r\n }\r\n\r\n getQRImageContent() {\r\n const { qrImageUrl, loadingQR, isOktaPushEnabled, qrOktaImageUrl } = this.state;\r\n\r\n if (loadingQR) {\r\n return (\r\n\r\n
\r\n );\r\n }\r\n\r\n if (qrImageUrl && !loadingQR && !isOktaPushEnabled) {\r\n return (\r\n {loadingError}
);\r\n }\r\n\r\n if (this.state.showGrabEmailForm) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n if (this.state.confirmOktaVerify && !this.state.isOktaPushEnabled) {\r\n return (\r\n \r\n \r\n this.setState({ email: e.target.value })}\r\n autoFocus\r\n />\r\n {this.validateEmail(this.state.email)}\r\n {\r\n this.sendEmailValidate(this.state.email);\r\n }}\r\n >Validate Email\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n Are you sure you want to enable Okta Verify? You will need to re-scan the generated QR code to enable. Any previous enrollments will be removed.
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n getMethod = () => {\r\n if (sessionStorage.verificationMethod == 'authApp') {\r\n if (sessionStorage.IsOktaPushEnabled == \"true\") {\r\n return \"Okta Verify\";\r\n } else {\r\n return \"Authenticator App\";\r\n }\r\n }\r\n\r\n if (sessionStorage.verificationMethod == 'sms') {\r\n return \"SMS\";\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n render() {\r\n const modalVerbiage = () => {\r\n if (sessionStorage.verificationMethod && (sessionStorage.verificationMethod !== \"\" || sessionStorage.verificationMethod !== null || sessionStorage.verificationMethod !== undefined)) {\r\n return \"Manage Multi-factor Authentication\"\r\n } else {\r\n return \"Enable Multi-factor Authentication\"\r\n }\r\n }\r\n return (\r\n <>\r\n {modalVerbiage()}\r\n \r\n Add an extra layer of security to block unauthorized access and protect your account.\r\n
\r\nMFA verification options:
\r\n {sessionStorage.MfaAllowSms == \"true\" ?\r\n
: null}\r\n {sessionStorage.MfaAllowAuthApp == \"true\" ? \r\n {\r\n this.setState({ isAuthAppOn: false, isTextMessageOn: true, verificationMethod: 'sms', isOktaPushEnabled: false });\r\n }}\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n {this.state.isTextMessageOn && (<>\r\n Text Message
\r\nProvide your phone number to get a SMS code to enable the authentication:
\r\n\r\n <>\r\n this.setState({ phoneNumber: removePhoneFormatting(e.target.value) })}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.submitPhoneNumber();\r\n }\r\n }}\r\n placeholder={\"Enter your mobile device number!\"}\r\n autoFocus\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n Submit\r\n \r\n
\r\n )}\r\n \r\n
: null}\r\n \r\n {\r\n if (this.state.isOktaPushEnabled) {\r\n this.setState({ isTextMessageOn: false, isAuthAppOn: true, verificationMethod: 'authApp' });\r\n } else {\r\n this.getQRImageUrl();\r\n this.setState({ isTextMessageOn: false, isAuthAppOn: true, verificationMethod: 'authApp' });\r\n }\r\n }}\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n {this.state.isAuthAppOn ? <>\r\n Authenticator app code
\r\n\r\n
\r\n : null}\r\n Scan the QR code and enter the pin generated by Okta, Google or Microsoft authenticator app to confirm it's you.
\r\n {/*\r\n \r\n
*/}\r\n {this.getQRImageContent()}\r\n \r\n {/* {this.state.isAuthAppOn && this.state.isOktaPushEnabled && this.state.qrOktaImageUrl && !this.state.loadingQR ?\r\n <>\r\n this.setState({ pinCode: e.target.value })}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.onSubmitAuthPinCode();\r\n }\r\n }}\r\n autoFocus\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n After you scan your QR code, press the button to send the push notification
\r\n\r\n \r\n Send push notification\r\n \r\n
\r\n \r\n : null} */}\r\n {!this.state.isOktaPushEnabled && (this.state.isTextMessageOn || this.state.isAuthAppOn) ? <>\r\n \r\n \r\n \r\n Save\r\n \r\n
\r\n : null}\r\n {`MFA is currently enabled for this account: ${this.getMethod()}`}
\r\n : null\r\n }\r\n{this.state.profile.Designation}
\r\n\r\n let svcAddress = \"\";\r\n if (this.state.profile.SVCStreet1 ||\r\n this.state.profile.SVCStreet2 ||\r\n this.state.profile.SVCCity ||\r\n this.state.profile.SVCState ||\r\n this.state.profile.SVCZip)\r\n svcAddress = \r\n \r\n {this.state.profile.SVCStreet1} {this.state.profile.SVCStreet2}
\r\n {this.state.profile.SVCCity}, {this.state.profile.SVCState} {this.state.profile.SVCZip}\r\n \r\n
\r\n\r\n let e911address = \"\";\r\n let userId = sessionStorage.SelectedUserId;\r\n if (this.state.profile.PBXUserId && this.state.profile.PBXUserId !== '')\r\n userId = this.state.profile.PBXUserId;\r\n\r\n if (this.state.profile.E911Street1 ||\r\n this.state.profile.E911Street2 ||\r\n this.state.profile.E911City ||\r\n this.state.profile.E911State ||\r\n this.state.profile.E911Zip)\r\n e911address = \r\n {this.state.profile.SVCCity}, {this.state.profile.SVCState} {this.state.profile.SVCZip}\r\n \r\n
\r\n \r\n {this.state.profile.E911Street1} {this.state.profile.E911Street2}
\r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n \r\n
\r\n return (\r\n \r\n {this.state.profile.E911City}, {this.state.profile.E911State} {this.state.profile.E911Zip}\r\n \r\n
\r\n
)\r\n }\r\n\r\n mfaModal = () => {\r\n if (this.state.ServiceNumber !== undefined && this.state.PBXUserID !== undefined\r\n && sessionStorage.enableMFA == \"true\") {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.getCompany()}
\r\n {title}\r\n {svcAddress}\r\n \r\n Department: {this.state.profile.Department}\r\n
\r\n \r\n Service Number:\r\n
\r\n \r\n {this.state.profile.ServiceNumber}\r\n \r\n Ext. {this.state.profile.Extension}\r\n
\r\n \r\n Email: {this.state.profile.Email}
\r\n Mobile: {this.state.profile.Mobile}
\r\n Pager: {this.state.profile.Pager}
\r\n YahooId: {this.state.profile.YahooId}
\r\n
\r\n \r\n Mobile: {this.state.profile.Mobile}
\r\n Pager: {this.state.profile.Pager}
\r\n YahooId: {this.state.profile.YahooId}
\r\n
\r\n Location:\r\n
\r\n {this.state.profile.Location}
\r\n \r\n Phone Model:\r\n
\r\n {this.state.profile.DeviceModel}
\r\n \r\n Mac Address:\r\n
\r\n {this.state.profile.DeviceMAC}
\r\n \r\n Language:\r\n
\r\n {this.state.profile.Language}
\r\n \r\n
\r\n
\r\n \r\n Portal Login Username:\r\n
\r\n {this.state.profile.PortalUsername}
\r\n \r\n User ID:\r\n
\r\n {userId}
\r\n \r\n Enterprise ID:\r\n
\r\n\r\n {this.state.profile.ParentAccountNumber}
\r\n \r\n E911 Address:\r\n
\r\n\r\n \r\n {e911address}\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n PLEASE READ: Your Current E911 Service Address is considered the address at which emergency personnel will respond when an E911 call is placed from your number. By default, your Current E911 Service Address will be the same as your Primary E911 Service Address, which is the primary address at which your service resides. You must temporarily update your Current E911 Service Address in the event you utilize the service from an address other than the Primary E911 Service Address.\r\n Current E911 Service Addresses must validate with the Public Safety Answering Point (PSAP) system. Using the service to place E911 calls at a non-validated E911 service address can result in an unsuccessful emergency personnel dispatch. If a service address cannot be validated, it may be because the address you entered is not specific enough, is either a PO Box, is not with the 48 United States or Hawaii, or too new to be verified by the PSAP system. If you are unable to validate a service address, please contact your administrator or service provider.\r\n Please allow 10 minutes for address to validate in our system after updating. \r\n To change the Primary E911 Service Address listed, please contact your administrator or service provider to initiate a Change of Address, or “Move”, order.\r\n
\r\n\r\n Password Recovery:\r\n \r\n
\r\n {this.mfaModal()}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n Authentication:\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n showPrincipalUserProfile = (ServiceNumber, PBXUserID) => {\r\n return this.serviceNotSelected(ServiceNumber, PBXUserID) || this.state.adminProfile;\r\n }\r\n\r\n serviceNotSelected = (ServiceNumber, PBXUserID) => {\r\n return !(ServiceNumber || PBXUserID) || (ServiceNumber === '' && PBXUserID === '');\r\n }\r\n\r\n getProfileApiUrl = (ServiceNumber, PBXUserID) => {\r\n let apiUrl = '';\r\n if (this.showPrincipalUserProfile(ServiceNumber, PBXUserID))\r\n apiUrl = 'usr/UserProfile';\r\n else\r\n apiUrl = `usr/UserProfile?PBXUserID=${PBXUserID}&ServiceNumber=${ServiceNumber}`;\r\n\r\n return apiUrl;\r\n\r\n }\r\n\r\n getName() {\r\n if (this.state.loading)\r\n return \"\";\r\n\r\n if (this.state.profile.FirstName || this.state.profile.LastName)\r\n return this.state.profile.FirstName + \" \" + this.state.profile.LastName;\r\n else if (this.state.profile.ServiceNumber && this.state.profile.ServiceNumber !== '')\r\n return this.state.profile.ServiceNumber\r\n else if (this.state.profile.Extension && this.state.profile.Extension !== '')\r\n return 'Ext: ' + this.state.profile.Extension\r\n else\r\n return \"Admin\";\r\n }\r\n getCompany() {\r\n return (\r\n {this.state.profile.CustomerName}\r\n \r\n )\r\n // if(this.props.IsAdmin)\r\n // return ( \r\n // \r\n // \r\n
\r\n {this.state.profile.CustomerName}
\r\n // Enterprise ID: {this.state.profile.ParentAccountNumber }\r\n // \r\n
\r\n );\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
Profile
\r\n\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ServiceNumber: (state.reducer.ServiceNumber || ''),\r\n PBXUserID: (state.reducer.PBXUserID || '')\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(Profile);","import React from 'react';\r\nimport { Chart } from '@progress/kendo-charts-react-wrapper';\r\n\r\nconst chartOptions = {\r\n // title: {\r\n // text: \"Site Visitors Stats \\n /thousands/\"\r\n // },\r\n legend: {\r\n visible: false\r\n },\r\n seriesDefaults: {\r\n type: \"column\"\r\n },\r\n series: [{\r\n name: \"Billing\",\r\n data: [27, 35, 14, 19, 34, 40, 10, 5, 2,],\r\n color: \"#00b5e1\"\r\n }],\r\n valueAxis: {\r\n line: {\r\n visible: false\r\n },\r\n axisCrossingValue: 0\r\n },\r\n categoryAxis: {\r\n categories: [new Date(\"01/05\"), new Date(\"01/06\"), new Date(\"01/07\"), new Date(\"01/08\"), new Date(\"01/09\"), new Date(\"01/010\"), new Date(\"01/11\")],\r\n line: {\r\n visible: false\r\n },\r\n labels: {\r\n }\r\n },\r\n tooltip: {\r\n visible: false,\r\n // template: \" #= series.name #: #= value # \"\r\n // template: \"${series.name} - ${value}\"\r\n }\r\n};\r\n\r\n\r\n\r\n\r\nconst BillingChart = () => (\r\n\t\r\n
\r\n \r\n
\r\n \r\n
{this.getName()}
\r\n\r\n\r\n
\r\n \r\n\r\n {this.getProfile()}\r\n\r\n
\r\n \r\n\t\t
\r\n)\r\n\r\nexport default BillingChart;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport SuperLink from './../../components/super_link'\r\nimport CCLogos from './../../images/credit-card-logos.png';\r\nimport CheckOne from './../../images/check_one.gif';\r\nimport CheckTwo from './../../images/check_two.gif';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\n\r\n\r\nclass PayManageModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \t\tManage Payments (only if payment setup)\r\n\r\n \r\n\r\n \r\n\t
\r\n \t
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum omnis facere, ex quasi. Atque officiis distinctio, nulla officia perspiciatis dolores.
\r\n \t\r\n \t
\r\n \t\tCancel Payment for this Credit Card (0321)\r\n \t\tCancel\r\n \t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n );\r\n }\r\n}\r\n\r\n\r\nexport default Billing;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport { TimePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\n\r\nclass EditContactCenterModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\tBilling
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.state.bill_stat.CustomerName}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tAccount Number: {this.state.bill_stat.CustomerAccountNumber}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tBilling Address:
\r\n\t\t\t\t\t\t\t\t{this.state.bill_stat.Street1BILL}
\r\n\t\t\t\t\t\t\t\t{this.state.bill_stat.CityBILL}, {this.state.bill_stat.StateBILL} {this.state.bill_stat.ZipBILL} \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.bill_stat.Street1BILL}
\r\n\t\t\t\t\t\t\t\t{this.state.bill_stat.CityBILL}, {this.state.bill_stat.StateBILL} {this.state.bill_stat.ZipBILL} \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tEdit Billing Address\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\tCurrent Payment
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tTotal Amount Due:\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t${this.state.bill_stat.InvoiceAmount}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tDue On:\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{this.state.bill_stat.InvoiceDueDate}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tPast Due:\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t$0.00
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\tRecent Billing Activity:
\r\n\t\t\t\t\t\t\t\tPrevious Balance: $165.75
\r\n\t\t\t\t\t\t\t\tPayment - 901: 165.75
\r\n\t\t\t\t\t\t\t\tTotal Balance Forward: $0.00\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tPrevious Balance: $165.75
\r\n\t\t\t\t\t\t\t\tPayment - 901: 165.75
\r\n\t\t\t\t\t\t\t\tTotal Balance Forward: $0.00\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\tStatements
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\tBalance History
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n \r\n \r\n \r\n\r\n \r\n \r\n Edit Contact Center \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConfig() {\r\n return (\r\n \r\n )\r\n }\r\n};\r\n\r\nexport default EditContactCenterModal;\r\n","import React, { Component } from 'react';\r\nimport * as settings from './../scripts/settings.js';\r\nimport { store } from '../store/store';\r\nimport { connect } from 'react-redux';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { fetchData } from './../requests/api_calls';\r\nimport { DataLoadingSpinner } from './../components/spinners';\r\nimport EditContactCenterModal from './modals/editContactCenterModal';\r\n\r\nclass ContactCenter extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n };\r\n\r\n\r\n servicesContent = () => {\r\n if (this.state.loading) {\r\n return \r\n\t
\r\n\t\t
\r\n You can configure Contact Centers to allow agents to log in and out, to queue incoming calls that cannot be answered immediately, to re-direct calls when the group cannot accept calls, and to provide music or video for caller on hold.
\r\n\r\n\t\r\n\t \r\n\t Active Contact Center\r\n\t
\r\n\t \r\n\t\t
\r\n\t\t
\r\n\t\t \r\n\t\t \t
\r\n\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t
\r\n\t\t \r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \t
\r\n\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t
\r\n\t\t \r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t \t
\r\n\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t
\r\n\t\t \r\n\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t \t
\r\n\r\n\r\n\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \t\r\n\t\t\t\t \r\n\t\t \t
\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \t \r\n\t\t \t\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \t \r\n\t\t \t\r\n\t\t \t
\r\n\t\t \t\r\n\t\t \t\r\n\t\t
\r\n\t\t \r\n\t\t \t\r\n\t\t \t\r\n\t\t
Bandwidth and QoS Settings
\r\n\t\t\r\n\t\t \t\r\n\t\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \t\r\n\t\t\t \r\n\t\t
\r\n\t\t Contact Center Settings
\r\n\t\t\r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Enable video support\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Play ringing when offering call\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Allow callers to dial a number to escape out of queue\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Reset caller statistics upon entry to queue\r\n\t\t
\r\n\t\t {/*\r\n\t\t\t\t\tReporting Settings
\r\n\t\t\r\n\t\t \r\n\t\t Enable Contact Center External Reporting\r\n\t\t
\r\n\t\t */}\r\n\t\t \r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t Agent Settings
\r\n\t\t\r\n\t\t \r\n\t\t Allow agents to join Contact Centers\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Allow Call Waiting on agents\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Enable calls to agents in wrap-up state\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Enable maximum ACD wrap-up timer\r\n\t\t
\r\n\t\t \r\n\t\t\t\t
\r\n\t\t \r\n\t\t\t\t \t
\r\n\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t \t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t \t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t \t\r\n\t\t \r\n\t\t Automatically set agent state after call\r\n\t\t
\r\n\t\t \r\n\t\t\t \t\r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t \r\n\t\t \r\n\t\t Automatically answer calls after waiting\r\n\t\t
\r\n\t\t \r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t \r\n\t\t
\r\n\t\t \tChange Password\r\n\t\t\t
\r\n \r\n\t\t\t\t
\r\n\t\t \r\n\t\t\t \r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t \r\n\t\t\t \r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t \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 return (\r\n \r\n
\r\n Contact Center 12
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \t
\r\n
\r\n | Active | \r\n\tName | \r\n\tType | \r\n\tPhone Number | \r\n\tExt | \r\n\t\r\n\t |
|---|---|---|---|---|---|
| \r\n \t\t | PHL Sales | \r\n \t\tPremium | \r\n \t\t123 123 1234 | \r\n \t\t123 | \r\n \t\t\r\n\t\t\t\t\t\t | \r\n \t
\r\n
\r\n )\r\n }\r\n\r\n};\r\n\r\nexport default ContactCenter;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Tooltip } from '@progress/kendo-popups-react-wrapper';\r\n\r\nclass LocationAnnouncementRepositoryModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n {this.servicesContent()}\r\n
\r\n \r\n \r\n Announcement Repository\r\n \r\n \r\n \r\n \r\n Announcement Repository \r\n \r\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 LocationAnnouncementRepositoryModal;\r\n","import React, { Component } from 'react';\r\nimport _ from 'lodash';\r\n\r\nclass AudioUpload extends Component {\r\n\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.changeRecurs = this.changeRecurs.bind(this);\r\n this.handleAddAudioNumber = this.handleAddAudioNumber.bind(this);\r\n this.state = { numberOfAudioCount:1, numberOfAudioLimit:4 };\r\n }\r\n\r\n handleAddAudioNumber(){\r\n if(this.state.numberOfAudioCount < 4)\r\n this.setState({ numberOfAudioCount: this.state.numberOfAudioCount + 1 });\r\n }\r\n\r\n changeRecurs(event){\r\n this.setState({recurValue: event.target.value})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let audioNumberCountReachLimit = this.state.numberOfAudioCount >= this.state.numberOfAudioLimit;\r\n\t\treturn(\t\r\n\t\t\t\r\n
\r\n Announcement repository allows you to manage all the audio announcements
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | Description | \r\nFile Type | \r\nFile Size | \r\nPlay | \r\n\r\n |
|---|---|---|---|---|---|
| \r\n | Cool Desc | \r\n.wav | \r\n36mb | \r\n\r\n | \r\n \r\n |
| \r\n \r\n | \r\n|||||
| \r\n | Cool Desc | \r\n.wav | \r\n36mb | \r\n\r\n | \r\n \r\n |
| \r\n \r\n | \r\n|||||
| \r\n File Storage: 14 MB used. 984 MB avaiable.\r\n | \r\n|||||
| \r\n \r\n Add Announcement\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \t\t\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n\r\n\tgetInputs(audioNumberCountReachLimit) {\r\n \tswitch(this.state.recurValue){\r\n \t\tcase \"default\":\r\n\t\t return (\r\n\t\t \t\r\n\t\t );\r\n\t \tcase \"url\":\r\n\t\t return (\r\n\t\t \t\r\n\t\t \r\n\t\t
\r\n \r\n\t\t \r\n\t\t \r\n\t\t \r\n\t\t
\r\n\t\t {this.getInputs(audioNumberCountReachLimit)}\r\n\t\t \r\n\t\t\t\t
\r\n\t\t );\r\n\t \tcase \"upload\":\r\n\t\t return (\r\n\t\t \t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\t {_.times(this.state.numberOfAudioCount, i =>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t \tAdd additional audio URL\r\n\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t\t )}\r\n\t\t\t\t\t \t\r\n\t\t\t\t
\r\n\t\t );\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport default AudioUpload;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport { TabStrip, TabStripTab, PanelBar, PanelBarItem } from '@progress/kendo-react-layout';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass AnnoucementsModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false, selected: 0 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n handleSelect = (e) => {\r\n this.setState({selected: e.selected});\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\t {_.times(this.state.numberOfAudioCount, i =>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t \tAdd additional audio file\r\n\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t\t )}\r\n\t\t\t\t\t \t\r\n \r\n Announcements\r\n \r\n \r\n \r\n \r\n Announcements Settings \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConfig() {\r\n return (\r\n \r\n
\r\n Announcements allows you to customize the Contact Center voice prompts that are played to callers while waiting in queue.
\r\n \r\n {this.getConfig()}\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\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 AnnoucementsModal;\r\n\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass AgentsModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Play entrance message\r\n
\r\n \r\n \r\n Entrance message is mandatory when played\r\n
\r\n \r\n \r\n
\r\n \r\n Enable estimates message for queued calls\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Play high volume message\r\n
\r\n \r\n \r\n
\r\n \r\n Play comfort message\r\n
\r\n \r\n \r\n \r\n Can't be less than 10 seconds.\r\n
\r\n \r\n \r\n
\r\n \r\n Enable music or video on hold for queued calls\r\n
\r\n \r\n \r\n
\r\n \r\n Play Call Whisper Message\r\n
\r\n \r\n \r\n
\r\n \r\n Agents\r\n \r\n \r\n \r\n \r\n Agents \r\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 AgentsModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport { DateTimePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass StatsModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n Configure the list of agents that belong to this Contact Center. Users are available if they have been assigned an appropriate Contact Center feature. Users with Contact Center - Basic may be assigned to Basic Contact Centers. Users with Contact Center - Standard may be assigned to Basic or Standard Contact Centers. Users with Contact Center - Premium may be assigned to any Contact Center.
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Status & Statistics\r\n \r\n \r\n\r\n \r\n \r\n Status & Statistics \r\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 StatsModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass SupervisorsModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\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 Contact Center Status and Statistics allows you to view the status and statistics of this Contact Center's activity and, as required, configure e-mail statistics reporting.
\r\n \r\nQueue & Agent Statistics
\r\n\r\n \r\n Display current-time statistics\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n | No. of busy overflows | \r\n0 | \r\n
| No. of calls answered | \r\n0 | \r\n
| No. of calls abandoned | \r\n0 | \r\n
| No. of calls transferred | \r\n0 | \r\n
| No. of calls timed out | \r\n0 | \r\n
| Average no. of agents talking | \r\n0 | \r\n
| Average no. of agents staffed | \r\n0 | \r\n
| Average wait time | \r\n0 | \r\n
| Average abandonement time | \r\n0 | \r\n
| Agents Stattistics | \r\nNo of Calls Handled | \r\nNo of Calls Unanswered | \r\nAverage Call Time | \r\nTotal Talk Time | \r\nTotal Staffed Time | \r\n
|---|---|---|---|---|---|
| 0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n
| 0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n
| 0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n
| 0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n0 | \r\n
Statistics Report Settings
\r\n\r\n \r\n Daily Report\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n Queue Status
\r\n\r\n \r\n \r\n
\r\n | Agents Currently Staffed | \r\n|
|---|---|
| Jared Malan | \r\njfals82@gmail.com | \r\n
| Jared Malan | \r\njfals82@gmail.com | \r\n
| Jared Malan | \r\njfals82@gmail.com | \r\n
| Jared Malan | \r\njfals82@gmail.com | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Supervisors\r\n \r\n \r\n \r\n \r\n Supervisors \r\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 SupervisorsModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass DistinctiveRingModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n Configure the list of users who may supervise this Contact Center. Configure agents to be supervised. Available agents are any agent available currently not supervised and can include agents that are also supervisors.
\r\nAssign Supervisors
\r\n\r\n \r\n
\r\n \r\n
Assign Agents
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Distinctive Ring\r\n \r\n \r\n \r\n \r\n Distinctive Ring \r\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 DistinctiveRingModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport { TabStrip, TabStripTab, PanelBar, PanelBarItem } from '@progress/kendo-react-layout';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass DNISModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false, selected: 0 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n handleSelect = (e) => {\r\n this.setState({selected: e.selected});\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Configure the Contact Center distinctive ringing policies for calls routed to the agent.
\r\n\r\n \r\n Enable distinctive ringing for Contact Center calls\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n DNIS\r\n \r\n \r\n \r\n \r\n DNIS \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConfig() {\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Configure the Contact Center DNIS to distribute calls to agents.
\r\n \r\n\r\n \r\n Display DNIS Number to agent when presenting call instead of calling number\r\n
\r\n \r\n \r\n Display DNIS name to agent when presenting call instead of calling name\r\n
\r\n \r\n \r\n Automatically promotes calls with Priority 1 to Priority 0 after waiting\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Automatically promotes calls with Priority 2 to Priority 1 after waiting\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Automatically promotes calls with Priority 3 to Priority 2 after waiting \r\n
\r\n \r\n \r\n \r\n
\r\n | \r\n | Name | \r\nPhone Number | \r\nExtension | \r\nPriority | \r\n\r\n |
|---|---|---|---|---|---|
| \r\n | Call Center 1249192(Primary) | \r\n123 123 1234 | \r\n7000 | \r\nHighest | \r\n\r\n |
| \r\n {this.getConfig()}\r\n | \r\n|||||
| \r\n | Call Center 1249192(Primary) | \r\n123 123 1234 | \r\n7000 | \r\nHighest | \r\n\r\n |
| \r\n {this.getConfig()}\r\n | \r\n|||||
| \r\n \r\n Add DNIS\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\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 DNISModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass QueueStatusModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\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\n \r\n Use custom calling line name settings\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Use custom DNIS announcement settings\r\n
\r\n \r\n \r\n Allow outgoing Contact Center call\r\n
\r\n \r\n \r\n
\r\n \r\n Play entrance message\r\n
\r\n \r\n \r\n Entrance message is mandatory when played\r\n
\r\n \r\n \r\n
\r\n \r\n Enable estimates message for queued calls\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Play high volume message\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Play high volume message\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Play comfort message\r\n
\r\n \r\n \r\n \r\n Can't be less than 10 seconds.\r\n
\r\n \r\n \r\n
\r\n \r\n Enable music or video on hold for queued calls\r\n
\r\n \r\n \r\n
\r\n \r\n Play Call Whisper Message\r\n
\r\n \r\n \r\n
\r\n \r\n Queue Status Notification\r\n \r\n \r\n \r\n \r\n Queue Status Notification \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConfig() {\r\n return (\r\n \r\n
\r\n Configure status sent to agent devices and control the thresholds for high volume notifications.
\r\n \r\n\r\n \r\n Enable notification of queue status to agent devices\r\n
\r\n \r\n \r\n High volume notification thresholds for calls\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n High volume notification thresholds for seconds\r\n
\r\n \r\n \r\n \r\n
\r\n \r\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 QueueStatusModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass CallDispositionCodeModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Active\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Call Disposition Code\r\n \r\n \r\n \r\n \r\n Call Disposition Code \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConfig() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Add or Modify Call Disposition Codes. Disposition Codes are attributes applied to a call to identify marketing promotions or other topics pertaining to a call. Add or modify call disposition codes are attributes applied to a call to identify marketing promotions or other topics pertaining to a call.
\r\n \r\n\r\n \r\n Enable call disposition codes\r\n
\r\n \r\n \r\n \r\n Use group codes in addition to Contact Center codes\r\n
\r\n \r\n \r\n Force use of call disposition codes with default codes\r\n
\r\n \r\n \r\n \r\n
\r\n | \r\n | Description | \r\nCode | \r\nLevel | \r\n\r\n |
|---|---|---|---|---|
| \r\n | 1249192 | \r\n1 | \r\nEnterprise | \r\n\r\n |
| \r\n {this.getConfig()}\r\n | \r\n||||
| \r\n | 1249192 | \r\n1 | \r\nEnterprise | \r\n\r\n |
| \r\n {this.getConfig()}\r\n | \r\n||||
| \r\n \r\n Add Code\r\n \r\n | \r\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 CallDispositionCodeModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass AcdForcedModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Active\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n ACD - Forced Forwarding\r\n \r\n \r\n \r\n \r\n ACD - Forced Forwarding \r\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 AcdForcedModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass AcdHolidayModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeAction = this.changeAction.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeAction(event){\r\n this.setState({actionValue: event.target.value})\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Configure the Contact Center to temporarily divert new incoming calls to a different route independent of the Night Service route. Forced Forwarding does not affect calls already in the queue. The URLs/files for audio video will be played in order they are listed.
\r\n \r\n\r\n \r\n Forced Forwarding\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Allow features access codes to configure forced forwarding\r\n
\r\n \r\n \r\n Play announcement before forwarding\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n ACD - Holiday Service\r\n \r\n \r\n \r\n \r\n ACD - Holiday Service \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getInputs() {\r\n switch(this.state.actionValue){\r\n case \"sip\":\r\n return (\r\n \r\n
\r\n Configure the contact center to route calls differently during holidays. The URLs/files for audio video will be played in order they are listed.
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.getInputs()}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Play announcement before holiday service action\r\n
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n default:\r\n return ()\r\n }\r\n }\r\n};\r\n\r\nexport default AcdHolidayModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass AcdNightModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeAction = this.changeAction.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeAction(event){\r\n this.setState({actionValue: event.target.value})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n ACD - Night Service\r\n \r\n \r\n \r\n \r\n ACD - Night Service \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n getInputs() {\r\n switch(this.state.actionValue){\r\n case \"sip\":\r\n return (\r\n \r\n
\r\n Configure the Contact Center to route calls differently during hours when the queue is not in service. This is determined by a schedule that defines the business hours of the queue. Night service cannot be disabled; however, it can have a schedule that defines business hours to be 24x7 which means that no night service shall be provided. The URLs/files for audio video will be played in order they are listed.
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.getInputs()}\r\n
\r\n \r\n \r\n Force night service regardless of business hour schedule\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Allow feature access codes to manually override night service\r\n
\r\n \r\n \r\n Play announcement before night service action\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n default:\r\n return ()\r\n }\r\n }\r\n};\r\n\r\nexport default AcdNightModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass QueueBouncedModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Queue - Bounced Calls\r\n \r\n \r\n \r\n \r\n Queue - Bounced Calls \r\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 QueueBouncedModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass QueueComfortModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Configure the Contact Center routing policy for calls unanswered by agents.
\r\n \r\n\r\n \r\n Bounce Calls\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Transfer to phone number\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Bounce Calls if agent becomes unavailable while routing the call\r\n
\r\n \r\n \r\n Alert Agent if call is on hold for too long\r\n
\r\n \r\n \r\n \r\n Cannot be less than 30 seconds.\r\n
\r\n \r\n \r\n Bounce Calls after being on hold by agent for too long\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Queue - Comfort Message Bypass\r\n \r\n \r\n \r\n \r\n Queue - Comfort Message Bypass \r\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 QueueComfortModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass QueueOverflowModal extends Component {\r\n\r\n\tconstructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeAction = this.changeAction.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeAction(event){\r\n this.setState({actionValue: event.target.value})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Configure the Contact Center to play ringing and/or a different message instead of music and comfort messages if the call is expected to be answered quickly. The URLs/files for audio video will be played in order they are listed.
\r\n \r\n\r\n \r\n Comfort Message Bypass\r\n
\r\n \r\n \r\n Play announcement after ringing\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Queue - Overflow\r\n \r\n \r\n \r\n \r\n Queue - Overflow \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getInputs() {\r\n switch(this.state.actionValue){\r\n case \"sip\":\r\n return (\r\n \r\n
\r\n Configure the Contact Center routing policy when a large number of calls have been received or calls have been waiting longer than a configured threshold. The URLs/files for audio video will be played in order they are listed.
\r\n \r\n\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.getInputs()}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n default:\r\n return ()\r\n }\r\n }\r\n};\r\n\r\nexport default QueueOverflowModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport AudioUpload from './../../components/audioUpload';\r\n\r\n\r\nclass QueueStrandedModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeAction = this.changeAction.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeAction(event){\r\n this.setState({actionValue: event.target.value})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Queue - Stranded Calls\r\n \r\n \r\n \r\n \r\n Queue - Stranded Calls \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getInputs() {\r\n switch(this.state.actionValue){\r\n case \"sip\":\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 {this.getInputs()}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n default:\r\n return ()\r\n }\r\n }\r\n};\r\n\r\nexport default QueueStrandedModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\n\r\n\r\nclass ConfigureProductModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Weighted Call Distribution\r\n \r\n \r\n \r\n \r\n Weighted Call Distribution \r\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 ConfigureProductModal;","import React from 'react';\r\nimport LocationAnnouncementRepositoryModal from './locations/modals/locationAnnouncementRepositoryModal';\r\nimport AnnoucementsModal from './modals/annoucementsModal';\r\nimport AgentsModal from './modals/agentsModal';\r\nimport StatsModal from './modals/statsModal';\r\nimport SupervisorsModal from './modals/supervisorsModal';\r\nimport DistinctiveRingModal from './modals/distinctiveRingModal';\r\nimport DNISModal from './modals/dnisModal';\r\nimport QueueStatusModal from './modals/queueStatusModal';\r\nimport CallDispositionCodeModal from './modals/callDispositionCodeModal';\r\nimport AcdForcedModal from './modals/acdForcedModal';\r\nimport AcdHolidayModal from './modals/acdHolidayModal';\r\nimport AcdNightModal from './modals/acdNightModal';\r\nimport QueueBouncedModal from './modals/queueBouncedModal';\r\nimport QueueComfortModal from './modals/queueComfortModal';\r\nimport QueueOverflowModal from './modals/queueOverflowModal';\r\nimport QueueStrandedModal from './modals/queueStrandedModal';\r\nimport WeightedModal from './modals/weightedModal';\r\n\r\n\r\nconst ContactCenter = () => (\r\n \t\r\n \r\n \r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, incidunt!
\r\n| Agent | \r\nWeight | \r\n
| Jared Malan (123123123) | \r\n\r\n |
| Jared Malan (123123123) | \r\n\r\n |
| Jared Malan (123123123) | \r\n\r\n |
| Jared Malan (123123123) | \r\n\r\n |
| Total Must equal 100% | \r\n\r\n |
\r\n
\r\n Save\r\n \r\n
\r\n \r\n\t\t
\r\n)\r\n\r\nexport default ContactCenter;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport * as EmailValidator from 'email-validator';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\n\r\nclass E911EmailNotificationModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = { \r\n e911AddressLoading: false,\r\n DisplayEmailAddress: props.CurrentLocation.EmergencyCallNotificationEmail,\r\n EmailAddress: props.CurrentLocation.EmergencyCallNotificationEmail,\r\n LocationOverride: props.CurrentLocation.LocationOverride911Email,\r\n AccountNumber: props.CurrentLocation.LocationAccountNumber,\r\n LocationName: props.CurrentLocation.LocationName,\r\n StreetAddress: props.StreetAddress,\r\n LocationList: props.Locations.filter(resp => resp.LocationAccountNumber !== props.CurrentLocation.LocationAccountNumber),\r\n showModal: false,\r\n IsEmailValid: this.isValidEmail(props.CurrentLocation.EmergencyCallNotificationEmail),\r\n selectedLocations: [],\r\n isAllLocationsSelected: false,\r\n saving: false,\r\n saveResultsMessage: '',\r\n savingShowError: false,\r\n savingShowSuccess: false,\r\n savingShowTestSuccess: false,\r\n savingTest: false,\r\n savingShowTestError: false,\r\n testResultsMessage: ''\r\n };\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.UpdateSelectedLocations = this.UpdateSelectedLocations.bind(this);\r\n this.SelectAllLocations = this.SelectAllLocations.bind(this);\r\n this.SendTestEmail = this.SendTestEmail.bind(this);\r\n this.getSaveMessage = this.getSaveMessage.bind(this);\r\n }\r\n \r\n componentDidMount() { \r\n\r\n }\r\n\r\n componentWillReceiveProps = (props) => {\r\n let emailAddress = this.state.EmailAddress;\r\n let displayAddress = this.state.DisplayEmailAddress;\r\n if (props.CurrentLocation.EmergencyCallNotificationEmail != this.state.EmailAddress)\r\n emailAddress = props.CurrentLocation.EmergencyCallNotificationEmail;\r\n if (props.CurrentLocation.EmergencyCallNotificationEmail != this.state.DisplayEmailAddress)\r\n displayAddress = props.CurrentLocation.EmergencyCallNotificationEmail;\r\n this.setState({DisplayEmailAddress: displayAddress, EmailAddress: emailAddress})\r\n }\r\n \r\n handleClose() {\r\n let state = {...this.state};\r\n state.showModal = false;\r\n state.savingShowError = false;\r\n state.savingShowSuccess = false;\r\n state.savingShowTestError = false;\r\n state.savingShowTestSuccess = false; \r\n state.selectedLocations = [];\r\n this.setState(state);\r\n }\r\n \r\n handleShow() {\r\n let state = {...this.state};\r\n state.e911AddressLoading = true;\r\n state.showModal = true;\r\n state.e911Address = null;\r\n state.EmailAddress = state.DisplayEmailAddress;\r\n state.IsEmailValid = this.isValidEmail(state.EmailAddress);\r\n this.setState(state);\r\n \r\n \r\n }\r\n\r\n handleOnSave = () => {\r\n //if email address is valid\r\n if (this.state.IsEmailValid === true)\r\n {\r\n this.setState({saving: true});\r\n let selectedLocationAccountNumbers = [];\r\n this.state.selectedLocations.map((location) => {\r\n selectedLocationAccountNumbers.push(location.LocationAccountNumber);\r\n });\r\n selectedLocationAccountNumbers.push(this.state.AccountNumber);\r\n let apiPath = 'admin/locations/UpdateEmergencyNotificationEmail';\r\n let postData = {\r\n EmailAddress: this.state.EmailAddress,\r\n Locations: selectedLocationAccountNumbers\r\n }\r\n apiCalls.post(apiPath, 'POST', JSON.stringify(postData)).then(async resp => {\r\n let saveMessage = 'Success';\r\n let savingShowError = false;\r\n let savingShowSuccess = false;\r\n let DisplayEmail = this.state.DisplayEmailAddress;\r\n if(resp.ok) {\r\n savingShowSuccess = true;\r\n //update selected locations\r\n //let selectedLocations = this.state.selectedLocations;\r\n await this.props.updateParentArrayItem(selectedLocationAccountNumbers, this.state.EmailAddress);\r\n DisplayEmail = this.state.EmailAddress;\r\n } else {\r\n savingShowError = true;\r\n saveMessage = 'An error occurred during save!';\r\n }\r\n this.setState({saving: false, saveResultsMessage: saveMessage, savingShowError: savingShowError, savingShowSuccess: savingShowSuccess, DisplayEmailAddress: DisplayEmail});\r\n }).catch(err => {\r\n this.setState({saving: false, saveResultsMessage: 'An error occurred during save!', savingShowError: true});\r\n console.error(err)\r\n });\r\n }\r\n }\r\n\r\n SendTestEmail = (event) => {\r\n if (this.state.IsEmailValid && this.state.EmailAddress !== '')\r\n {\r\n this.setState({savingTest: true});\r\n let apiPath = 'admin/locations/SendTestEmailNotification';\r\n let postData = {\r\n LocationAccountNumber: this.state.AccountNumber,\r\n LocationName: this.state.LocationName,\r\n LocationAddress: this.state.StreetAddress,\r\n EmailAddress: this.state.EmailAddress\r\n };\r\n \r\n apiCalls.post(apiPath, 'POST', JSON.stringify(postData)).then(resp => {\r\n let saveMessage = '';\r\n let savingShowTestSuccess = false;\r\n let savingShowTestError = false;\r\n if(resp.ok) {\r\n saveMessage = 'Success! An Email should be received by the email address specified!';\r\n savingShowTestSuccess = true\r\n } else {\r\n saveMessage = 'An error occurred generating an emergency notification test email to the designated email address!';\r\n savingShowTestError = true;\r\n }\r\n this.setState({savingTest: false, savingShowTestSuccess: savingShowTestSuccess, savingShowTestError: savingShowTestError, testResultsMessage: saveMessage});\r\n }).catch((message) => {\r\n this.setState({savingTest: false, savingShowTestSuccess: false, savingShowTestError: true, testResultsMessage: 'An error occurred generating an emergency notification test email to the designated email address!'});\r\n console.error(message)\r\n });\r\n } else\r\n {\r\n this.setState({savingTest: false, savingShowTestSuccess: false, savingShowTestError: true, testResultsMessage: 'An email must be specified and be a valid email format!'});\r\n }\r\n }\r\n\r\n handleEmailChange = (event) => {\r\n let email = event.target.value;\r\n \r\n let isValidEmail = this.isValidEmail(email)\r\n this.setState({EmailAddress: email, IsEmailValid: isValidEmail});\r\n }\r\n\r\n validateEmail=()=>{\r\n let email = this.state.EmailAddress;\r\n if (this.state.LocationOverride === true && (!email || email === '')) \r\n return (\r\n\t\t\t
\r\n\tContact Center Active
\r\n\t\t\t\r\n\t\t\t\tPremium 123 123 1234 7000\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\tIf Email is left blank, email will be set to the default value defined for the parent Enterprise!
);\r\n else if(this.state.LocationOverride === true && !EmailValidator.validate(email.trim()))\r\n return (Email address is not valid!
);\r\n else \r\n return ();\r\n \r\n }\r\n \r\n isValidEmail=(email)=> (email && EmailValidator.validate(email)) || email === '';\r\n\r\n SelectAllLocations = (checked) => {\r\n let selectedLocations = [];\r\n let isSelectAll = checked;\r\n if (checked)\r\n selectedLocations = this.state.LocationList\r\n this.setState({selectedLocations: selectedLocations, isAllLocationsSelected: isSelectAll });\r\n }\r\n\r\n UpdateSelectedLocations = (locationAccountNumber, checked) => {\r\n let selectedLocations = this.state.selectedLocations;\r\n let isSelectAll = false;\r\n if (checked)\r\n {\r\n selectedLocations.push(this.state.LocationList.filter(resp => resp.LocationAccountNumber === locationAccountNumber)[0]);\r\n if (selectedLocations.length === this.state.LocationList.length)\r\n isSelectAll = true;\r\n } else {\r\n selectedLocations = selectedLocations.filter(resp => resp.LocationAccountNumber !== locationAccountNumber);\r\n }\r\n this.setState({selectedLocations: selectedLocations, isAllLocationsSelected: isSelectAll });\r\n }\r\n\r\n getCheckBoxHeader = () => {\r\n return (\r\n | {this.getCheckBoxHeader()} | \r\nLocation | \r\n \r\n \r\n {this.getLocationRows()}\r\n \r\n
|---|
\r\n {this.state.saveResultsMessage}\r\n
\r\n );\r\n } else if (this.state.savingShowSuccess) {\r\n return (\r\n Success
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n getTestResultMessage = () => {\r\n if (this.state.savingTest === true) {\r\n return (\r\n {this.state.testResultsMessage}\r\n
\r\n );\r\n } else if (this.state.savingShowTestSuccess === true) {\r\n return (\r\n {this.state.testResultsMessage}
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n getModalButtons = () => {\r\n if (this.state.LocationOverride === true)\r\n return (\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\n\r\n render() {\r\n let state = this.state;\r\n let emailDisplay = ''\r\n let textDisplay = (!state.DisplayEmailAddress || state.DisplayEmailAddress === '') ? (state.LocationOverride === true ? 'Update' : '') : state.DisplayEmailAddress;\r\n if (state.LocationOverride === true || (textDisplay !== ''))\r\n emailDisplay = (\r\n {textDisplay}\r\n )\r\n else\r\n emailDisplay = ( );\r\n\r\n return (\r\n \r\n {emailDisplay}\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {this.state.AccountNumber} - {this.state.LocationName}
\r\n\r\n
| Emergency Notification Email Address: | \r\n\r\n { this.handleEmailChange(x) }} /> \r\n | \r\n
| \r\n { this.validateEmail()}\r\n | \r\n|
| \r\n \r\n {this.getTestResultMessage()}\r\n | \r\n|
\r\n Apply Setting to Other Locations:\r\n | \r\n |
| \r\n {this.getLocationsCheckBoxList() }\r\n | \r\n
\r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\r\n {/*
{locationID}
:{locationID}}\nFilters: {prefilter}, registered accounts\n ×\n
\n )\n }\n }\n\n sortChange(event) {\n this.setState({\n locations: this.sortLocations(event.sort),\n sort: event.sort\n });\n }\n\n pageChange(event) {\n this.setState({\n locations: this.state.locations.slice(),\n skip: event.page.skip\n });\n }\n\n sortLocations(sort) {\n var locations = [];\n if (this.state !== undefined) {\n locations = this.state.locations.slice();\n } else {\n locations = [];\n }\n return orderBy(locations, sort);\n }\n\n searchLocations = (event) => {\n let searchText = event.target.value.trim();\n this.setState({ searchTerm: searchText });\n var apiPath = ''\n if (searchText !== '') {\n apiPath = 'admin/Locations?term=' + searchText;\n } else { // reset to all locations\n apiPath = 'admin/Locations';\n }\n this.delayedSearch(apiPath);\n }\n\n delayedSearch = (apiPath) => {\n if (this.timeout) clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n this.fetchLocations(apiPath, settings.noResultsMsg);\n }, settings.searchDelay);\n }\n\n gridContent = () => {\n let { salesGroupId, serviceProviderName,enterpriseType } = sessionStorage;\n return (\n{this.state.resultsMsg}
\n }\n return (\n\n
\n )\n }\n }\n\n render() {\n return (\n \n
\n Locations & Groups {this.state.locations.length}
\n{this.activeFilters()}
\n \n \n {this.gridContent()}\n {message}\n
\n \n
\n )\n }\n\n}\n\nexport default Locations;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass locationEditModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n \r\n Edit Location\r\n \r\n \n {this.locationsContent()}\n
\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Account / Authorization Codes\r\n \r\n \r\n \r\n \r\n Account / Authorization Codes \r\n \r\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 LocationAccountCodesModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport _ from 'lodash';\r\nimport InfoPop from './../../../components/infopop';\r\n\r\n\r\nclass LocationAdvancedHuntingModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n Group calls for expense tracking and accounting purposes with Account Codes. Control long distance access and secure your phone lines with Authorization Codes.
\r\n Click to view acc/auth code reports\r\n\r\n
| \r\n | Codes | \r\nDescription | \r\n\r\n |
|---|---|---|---|
| \r\n | 1 | \r\nLorem Ipsum | \r\n\r\n |
| \r\n \r\n | \r\n|||
| \r\n \r\n Add Code\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Warning: Changing the \"Number of Digits\" will deactivate all active codes. \r\n
\r\n \r\n \r\n Allow Local and Toll-Free Calls without Account/Authorization Code \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Advanced Hunting\r\n \r\n \r\n \r\n \r\n Advanced Hunting \r\n \r\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 LocationAdvancedHuntingModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass SetPrompts extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {};\r\n }\r\n\r\n componentDidMount() { \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\nexport default SetPrompts;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport SetPrompts from './../../setPrompts';\r\n\r\nclass LocationAutoAttendantModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleTab = this.handleTab.bind(this);\r\n this.state = { showModal:false,promptValue: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n handleTab(event) {\r\n event.preventDefault();\r\n this.setState({promptValue: event.target.dataset.val})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n \r\n User Custom Greeting\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n | \r\n | Description | \r\nAction | \r\nTelephone Number | \r\n
|---|---|---|---|
| 1 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 2 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 3 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 4 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 5 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 6 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 7 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 8 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 9 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| 0 | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| * | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| # | \r\n\r\n | \r\n \r\n | \r\n\r\n |
| \r\n Note: Callers who do not indicate a transfer option will be forwarded to the operator. \r\n | \r\n |||
| \r\n \r\n | \r\n
\r\n \r\n Auto Attendant\r\n \r\n \r\n \r\n \r\n Auto Attendant \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n getPromptControl(){\r\n switch(this.state.promptValue){\r\n case \"biz\":\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n Provide your customers an automated receptionist that answers the phone with a personalized message providing up to twelve (12) options for connecting to various people, departments, etc. Each Auto Attendant has its own extension or directory number.
\r\n| Phone Number | \r\nExtension | \r\n\r\n |
|---|---|---|
| 2058036381 | \r\n6381 | \r\n\r\n \r\n | \r\n
| \r\n \r\n \r\n \r\n \r\n Active?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Set Business Hour Prompts\r\n \r\n \r\n \r\n \r\n Set After Hour Prompts\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n
\r\n \r\n Business Hour Prompts\r\n
\r\n \r\n After Hour Prompts\r\n
\r\n \r\n {this.getPromptControl()}\r\n
\r\n \r\n
\r\n \r\n
\r\n Select a tab to set prompts
\r\n );\r\n }\r\n }\r\n\r\n};\r\n\r\nexport default LocationAutoAttendantModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport SetPrompts from './setPrompts';\r\n\r\nclass SetSubmenu extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {};\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n\r\n | Submenu ID | \r\nIn Use | \r\n\r\n |
|---|---|---|
| 1 | \r\n6381 | \r\n\r\n \r\n | \r\n
| \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n \r\n Auto Attendant Tree\r\n \r\n \r\n \r\n \r\n Auto Attendant Tree \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n getPromptControl(){\r\n switch(this.state.promptValue){\r\n case \"biz\":\r\n return (\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n Business Hour Prompts\r\n
\r\n \r\n After Hour Prompts\r\n
\r\n \r\n Holiday Prompts\r\n
\r\n \r\n Submenus\r\n
\r\n \r\n {this.getPromptControl()}\r\n
\r\n \r\n
\r\n \r\n
\r\n Select a tab to set prompts
\r\n );\r\n }\r\n }\r\n\r\n\r\n};\r\n\r\nexport default LocationAutoAttendantTreeModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Slider } from '@progress/kendo-inputs-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass locationCallPark extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n \r\n Call Park\r\n \r\n \r\n \r\n \r\n Call Park \r\n \r\n \r\n \r\n \r\n
\r\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 locationCallPark;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass LocationCallPickupModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n | \r\n | Group Name | \r\n\r\n |
|---|---|---|
| \r\n | Meet-Me | \r\n\r\n \r\n | \r\n
| \r\n \r\n | \r\n||
| \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Enable Parked Destination Announcement\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Call Pickup\r\n \r\n \r\n \r\n \r\n Call Pickup Settings \r\n \r\n \r\n\r\n \r\n \r\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 LocationCallPickupModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\nclass LocationConferenceBridgeListModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n | \r\n | Group Name | \r\n\r\n |
|---|---|---|
| \r\n | Meet-Me | \r\n\r\n \r\n | \r\n
| \r\n \r\n | \r\n||
| \r\n | Meet-Me | \r\n\r\n \r\n | \r\n
| \r\n \r\n | \r\n||
| \r\n \r\n Add Group\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Conference Bridge List\r\n \r\n \r\n \r\n \r\n Conference Bridges List Settings \r\n \r\n \r\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 LocationConferenceBridgeListModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass LocationInstantConferenceModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:20 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < this.state.numberOfPhoneLimit)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n \r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Instant Conference\r\n \r\n \r\n \r\n \r\n Instant Conference \r\n \r\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 LocationInstantConferenceModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass LocationMusicOnHoldModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Combine this feature with Push to Talk and you can call a group for a hands-free intercom conference.
\r\n| \r\n | Name | \r\nExtension | \r\n\r\n |
|---|---|---|---|
| \r\n | Instant Conference | \r\n8000 | \r\n\r\n \r\n | \r\n
| \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Enable maximum time for unanswered calls\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n |||
| \r\n \r\n Add Instant Conference\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Music on Hold\r\n \r\n \r\n \r\n \r\n Music on Hold \r\n \r\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 LocationMusicOnHoldModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\nclass LocationSeriesCompletionModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n render() {\r\n \r\n return (\r\n \r\n
\r\n Play recordings to callers on hold.
\r\n\r\n \r\n Turn on hold music\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Series Completion\r\n \r\n \r\n \r\n \r\n Series Completion \r\n \r\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 LocationSeriesCompletionModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass LocationManageLinesModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Series Completion provides key system functionality by hunting through a set of lines according to a pre-arranged order.
\r\n| \r\n | Name | \r\n\r\n |
|---|---|---|
| \r\n | Series 1 | \r\n\r\n \r\n | \r\n
| \r\n \r\n | \r\n||
| \r\n | Series 2 | \r\n\r\n \r\n | \r\n
| \r\n \r\n | \r\n||
| \r\n \r\n Add Series\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Manage Lines\r\n \r\n \r\n \r\n \r\n Manage Lines \r\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 LocationManageLinesModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\n// \r\n
\r\n \r\n Edit the name, description and caller ID details for services and users.
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n Custom Contact Directory\r\n \r\n \r\n \r\n \r\n Custom Contact Directory \r\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 LocationCustomContactDirectoryModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n\r\nclass LocationManageUsersModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n | Directory Name | \r\n\r\n |
|---|---|---|
| \r\n | Cool Name | \r\n\r\n |
| \r\n \r\n | \r\n||
| \r\n | Cool Name | \r\n\r\n |
| \r\n \r\n | \r\n||
| \r\n \r\n Add Contact\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Manage Users\r\n \r\n \r\n \r\n \r\n Manage Users \r\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 LocationManageUsersModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass LocationManageGroupCallingLineIDModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Edit existing user and service permissions, password recovery email and change portal login passwords. Add and Delete portal administrators.
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | User Name | \r\nMain Account | \r\nAdmin | \r\nPassword Recovery Email | \r\n\r\n |
|---|---|---|---|---|---|
| \r\n | JaredMalan | \r\nYes | \r\nYes | \r\nj@momentum.com | \r\n\r\n |
| \r\n \r\n | \r\n|||||
| \r\n | JaredMalan | \r\nYes | \r\nYes | \r\nj@momentum.com | \r\n\r\n |
| \r\n \r\n | \r\n|||||
| \r\n | JaredMalan | \r\nYes | \r\nYes | \r\nj@momentum.com | \r\n\r\n |
| \r\n \r\n | \r\n|||||
| \r\n | JaredMalan | \r\nYes | \r\nYes | \r\nj@momentum.com | \r\n\r\n |
| \r\n \r\n | \r\n|||||
| \r\n \r\n Add a User\r\n \r\n \t | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Manage Group Calling Line ID\r\n \r\n \r\n \r\n \r\n Manage Group Calling Line ID \r\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 LocationManageGroupCallingLineIDModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DateTimePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\n\r\nclass ScheduleModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeRecurs = this.changeRecurs.bind(this);\r\n this.getRecurMonths = this.getRecurMonths.bind(this);\r\n this.getRecurDays = this.getRecurDays.bind(this);\r\n this.getRecurWeekOfMonths = this.getRecurWeekOfMonths.bind(this);\r\n this.state = { showModal: false, recurValue:\"\" };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeRecurs(event){\r\n this.setState({recurValue: event.target.value})\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\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 Use group name for Calling Line Identity \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n WARNING: If you have extension-only seats, without associated telephone numbers and with Call Recording assigned, changing the Group Calling Line ID will cause Call Recording to stop. Please have your administrator contact the service provider and make the appropriate Call Recording configuration changes before changing the Group Calling Line ID.
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {this.getTitle()}\r\n \r\n \r\n \r\n \r\n {this.getTitle()} \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getInfo() {\r\n switch(this.props.type){\r\n case \"BUSINESS_HOURS\":\r\n return \"Set Business Hours Schedules to automatically trigger feature functionality and time-of-day routing for services.\";\r\n case \"HOLIDAY_SCHEDULE\":\r\n return \"Set Holiday Hours Schedules to automatically trigger feature functionality and day(s)-of-year routing for services.\";\r\n default:\r\n return \"\";\r\n }\r\n }\r\n\r\n getTitle(){\r\n switch(this.props.type){\r\n case \"BUSINESS_HOURS\":\r\n return \"Schedule - Business Hours\";\r\n case \"HOLIDAY_SCHEDULE\":\r\n return \"Schedule - Holiday\";\r\n default:\r\n return \"\";\r\n }\r\n }\r\n \r\n getRecurrentControl(){\r\n switch(this.state.recurValue){\r\n case \"Never\":\r\n return (\r\n {this.getInfo()}
\r\n\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n\r\n
Schedule Name 1
\r\n| \r\n | Event Name | \r\nRecurring | \r\n\r\n |
|---|---|---|---|
| \r\n | Snow Day | \r\nNo | \r\n\r\n |
| \r\n \r\n Delete Event\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.getRecurrentControl()}\r\n \r\n \r\n \r\n \r\n | \r\n |||
| \r\n \r\n \r\n \r\n | \r\n
Schedule Name 2
\r\n| \r\n | Event Name | \r\nRecurring | \r\n\r\n |
|---|---|---|---|
| \r\n | Snow Day | \r\nNo | \r\n\r\n |
| \r\n \r\n Delete Event\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.getRecurrentControl()}\r\n \r\n \r\n \r\n \r\n | \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.getTime()}\r\n
\r\n );\r\n case \"Daily\":\r\n return (\r\n \r\n {this.getTime()}\r\n
\r\n ); \r\n case \"Weekly\":\r\n return (\r\n \r\n \r\n \r\n
\r\n {this.getRecurEnd()}\r\n \r\n {this.getTime()}\r\n
\r\n ); \r\n case \"Monthly by Day\":\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 {this.getRecurEnd()}\r\n \r\n {this.getTime()}\r\n
\r\n ); \r\n case \"Monthly by Week\":\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {this.getRecurEnd()}\r\n \r\n {this.getTime()}\r\n
\r\n ); \r\n case \"Yearly by Day\":\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.getRecurWeekOfMonths()}\r\n
\r\n \r\n \r\n {this.getRecurDays()}\r\n
\r\n {this.getRecurEnd()}\r\n \r\n {this.getTime()}\r\n
\r\n ); \r\n case \"Yearly by Week\":\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.getRecurMonths()}\r\n
\r\n \r\n \r\n \r\n
\r\n {this.getRecurEnd()}\r\n \r\n {this.getTime()}\r\n
\r\n );\r\n }\r\n }\r\n\r\n getTime() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.getRecurMonths()}\r\n
\r\n \r\n \r\n {this.getRecurWeekOfMonths()}\r\n
\r\n \r\n \r\n {this.getRecurDays()}\r\n
\r\n {this.getRecurEnd()}\r\n \r\n \r\n All Day Event\r\n
\r\n )\r\n }\r\n\r\n getRecurEnd(){\r\n return (\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n \r\n \r\n
);\r\n }\r\n getRecurMonths(){\r\n return (\r\n \r\n );\r\n }\r\n getRecurDays(){\r\n return (\r\n \r\n );\r\n }\r\n getRecurWeekOfMonths(){\r\n return (\r\n \r\n );\r\n }\r\n};\r\n\r\nexport default ScheduleModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass DepartmentModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n \r\n return (\r\n \r\n \r\n Departments\r\n \r\n \r\n \r\n \r\n Department Settings \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n getDepartmentSettings(){\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n | Department Name | \r\n\r\n |
| Hyperloop 2 | \r\n\r\n \r\n | \r\n
| Hyperloop 2 | \r\n\r\n \r\n | \r\n
| Hyperloop 2 | \r\n\r\n \r\n | \r\n
| \r\n \r\n Add Department\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n { this.props.type === \"EDIT\"? Delete Department: null }\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Enterprise Directory\r\n \r\n \r\n \r\n \r\n Enterprise Directory \r\n \r\n \r\n \t
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n getDepartmentSettings(){\r\n return (\r\n The Enterprise Directory lists all the services and users within your entire organization. A summary or a detail of the Enterprise Directory can be generated, which can be easily printed.
\r\n\t\t\tEnterprise Directory Summary\r\n\t\t\tEnterprise Directory Details\r\n\t\t\t\r\n
\r\n \t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n
\r\n | Name | \r\n\t\t\t\t\t\t\tService Number | \r\n\t\t\t\t\t\t\tExtension | \r\n\t\t\t\t\t\t\tDepartment | \r\n\t\t\t\t\t\t\tMobile | \r\n\t\t\t\t\t\t\tEmail Address | \r\n\t\t\t\t\t\t\tGroup ID | \r\n\t\t\t\t\t\t
|---|---|---|---|---|---|---|
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
| 3100000028-01-Default (Collaborate - Audio) | \r\n\t\t\t\t\t\t\t2057219514 | \r\n\t\t\t\t\t\t\t1007 | \r\n\t\t\t\t\t\t\tHyperloop | \r\n\t\t\t\t\t\t\tYes | \r\n\t\t\t\t\t\t\ttest@momentum.com | \r\n\t\t\t\t\t\t\t1234 | \r\n\t\t\t\t\t\t
\r\n
\r\n \r\n \r\n
\r\n \r\n { this.props.type === \"EDIT\"? Delete Department: null }\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n }\r\n\r\n footerBtnClass = () => {\r\n return this.savingOrConfirming() || this.state.loading ? 'opaque' : 'visible btns';\r\n }\r\n\r\n modalClass = () => this.state.loading ? 'loading' : 'group-fqdn';\r\n\r\n render() {\r\n return (\r\n Setup a Fully Qualified Domain Name (FQDN) as default FQDN for the location.
\r\n\r\n \r\n {this.saveStatus()}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Group FQDN Setup\r\n \r\n \r\n \r\n \r\n Group FQDN Setup \r\n \r\n \r\n {this.getModalBody()}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default GroupFqdnModal;","import React, { Component } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\nimport * as apiCalls from './../../../requests/api_calls';\nimport * as help from'./../locations_helpers';\nimport SaveStatus from './../../../components/save_status';\nimport { DataLoadingSpinner } from'./../../../components/spinners';\n\nclass GroupVLANModal extends Component {\n\n constructor(props) {\n super(props);\n this.handleShow = this.handleShow.bind(this);\n this.handleClose = this.handleClose.bind(this);\n this.setUseVlanId = this.setUseVlanId.bind(this);\n this.setVlanId = this.setVlanId.bind(this);\n this.setUseTcp = this.setUseTcp.bind(this);\n this.setAudioIsEncrypted = this.setAudioIsEncrypted.bind(this);\n this.saveGroupVlanSettings = this.saveGroupVlanSettings.bind(this);\n this.fetchDeviceLocation = this.fetchDeviceLocation.bind(this);\n\n this.handleClose = this.handleClose.bind(this);\n this.state = {\n showModal: false,\n useVlanId: false,\n saving: false,\n showSaveStatus: false,\n showValidationError: false,\n loading: true\n };\n }\n\n handleClose() {\n this.setState({ showModal: false, statusMessage: null });\n }\n\n handleShow() {\n this.setState({ loading: true, showModal: true });\n setTimeout(() => this.fetchDeviceLocation(), help.hideSpinnerDelay);\n }\n\n componentDidMount() {\n \n }\n\n setUseVlanId = (e) => this.setState({useVlanId: e.target.checked});\n\n setVlanId = (e) => this.setState({VlanId: e.target.value}, this.validateForm(e));\n\n setUseTcp = (e) => {\n let protocol = e.target.checked ? 'TCP' : 'UDP';\n this.setState({useTcp: e.target.checked, TransportProtocol: protocol, EncryptedAudio: false});\n }\n\n setAudioIsEncrypted = (e) => this.setState({EncryptedAudio: e.target.checked});\n\n fetchDeviceLocation = () => {\n let params = '?locationAccountNumber=' + this.props.locationAccNum;\n apiCalls.fetchData('admin/GetDeviceLocationProperties' + params).then((data) => {\n if (data !== null) {\n this.setState({\n EncryptedAudio: data.EncryptedAudio,\n TransportProtocol: data.TransportProtocol,\n useTcp: data.TransportProtocol === 'TCP',\n VlanId: data.VlanId || '',\n useVlanId: data.VlanId !== ('' || null),\n FQDN: data.FQDN,\n loading: false\n });\n } else if (data === null) {\n this.setState({fqdns: [], loading: false});\n }\n }).catch(message =>{\n console.log('caught an exception fetching device locations');\n console.log(message);\n this.setState({loading: false});\n });\n }\n\n validForm = () => {\n if (this.state.useVlanId && this.state.VlanId === '') {\n this.setState({showValidationError: true});\n return false\n } else {\n this.setState({showValidationError: false});\n return true\n }\n }\n\n validateForm = (e) => {\n if (this.state.useVlanId && e.target.value === '') {\n this.setState({showValidationError: true});\n } else {\n this.setState({showValidationError: false});\n }\n }\n\n saveGroupVlanSettings = () => {\n if (this.validForm()) {\n this.setState({saving: true, showSaveStatus: true});\n let data = {\n TransportProtocol: this.state.TransportProtocol,\n EncryptedAudio: this.state.EncryptedAudio,\n VlanId: this.state.useVlanId ? this.state.VlanId : null,\n LocationAccountNumber: this.props.locationAccNum,\n FQDN: this.state.FQDN\n };\n let apiPath = 'admin/UpdateDeviceLocationProperties';\n apiCalls.send(apiPath, 'PATCH', JSON.stringify(data)).then(resp => {\n if(resp.ok) {\n setTimeout(() => {this.setState({\n saving: false,\n statusMessage: 'Group VLAN settings were updated.',\n parentCallback: this.handleClose\n }), setTimeout(() => this.handleClose(), help.statusMsgDelay)}, help.hideSpinnerDelay);\n } else {\n this.setState({...this.state,\n saving: false,\n error: true,\n statusMessage: this.notSavedErrorMsg(resp),\n parentCallback: this.handleClose\n })\n }\n }).catch(message => {\n this.setState({saving: false});\n console.log('caught exception saving Group VLAN settings.');\n console.log(message);\n });\n }\n }\n\n vlanIdDivSettings = (attr) => {\n var settings = {};\n if (this.state.useVlanId) {\n settings = {class: 'hidden-group collapse in', 'aria-expanded': 'true'};\n } else {\n settings = {class: 'hidden-group collapse', 'aria-expanded': 'false'};\n }\n return settings[attr]\n }\n\n notSavedErrorMsg = (resp) => 'Device not saved. Error: ' + resp.message;\n\n getModalBody = () => {\n if (this.state.loading) {\n return \r\n
\r\n \r\n \r\n
\r\n \n
\n Set Group VLAN ID
\nSetup a Virtual Location Area Network (VLAN) as the default. The default can be overwritten on an individual device level if needed.
\n\n \n Use VLAN ID?\n \n \n \n VLAN ID is required.\n \n \n
\n Set Group IP Transport Protocol for Devices
\n\n Set the IP transport protocol for all devices within the group. If a device(s) requires a different setting \n than what is configured for the group, you may elect to overwrite the group IP transport protocol settings \n during device provisioning.\n
\n\n TCP is not the typical transport protocol for voice traffic and should only be used when there are 20+ \n Busy Lamp Fields (BLF) configured for an individual device. Contact Momentum Telecom Technical Support \n for more detail.\n
\n\n \n Use TCP? (UDP is default)\n \n Note: if you change the current IP transport protocol settings for this group, you must reprovision \n all devices within the group before the new setting will be pushed to existing device configuration\n files.\n \n
\n\n Set Group Encrypted Audio & Signaling for Devices
\n\n Set device Audio and Signaling Encryption for all devices within the group. If a device(s) requires a different \n setting than what is configured for the group, you may elect to overwrite the group Audio and Signaling Encryption\n settings during device provisioning. \n
\n\n \n Enable Encrypted Audio & Signaling?\n
\n \n \n Group VLAN Setup\n \n \n \n \n Group VLAN Settings \n \n \n {this.getModalBody()}\n \n \n
\n \n \n
\n )\n }\n};\n\nexport default GroupVLANModal;","import React from 'react';\r\nimport LocationEditModal from './modals/locationEditModal';\r\nimport LocationAccountCodesModal from './modals/locationAccountCodesModal';\r\nimport LocationAdvancedHuntingModal from './modals/locationAdvancedHuntingModal';\r\nimport LocationAnnouncementRepositoryModal from './modals/locationAnnouncementRepositoryModal';\r\nimport LocationAutoAttendantModal from './modals/locationAutoAttendantModal';\r\nimport LocationAutoAttendantTreeModal from './modals/locationAutoAttendantTreeModal';\r\nimport LocationCallParkModal from './modals/locationCallParkModal';\r\nimport LocationCallPickupModal from './modals/locationCallPickupModal';\r\nimport LocationConferenceBridgeListModal from './modals/locationConferenceBridgeListModal';\r\nimport LocationInstantConferenceModal from './modals/locationInstantConferenceModal';\r\nimport LocationMusicOnHoldModal from './modals/locationMusicOnHoldModal';\r\nimport LocationSeriesCompletionModal from './modals/locationSeriesCompletionModal';\r\nimport LocationManageLinesModal from './modals/locationManageLinesModal';\r\nimport LocationCustomContactDirectoryModal from './modals/locationCustomContactDirectoryModal';\r\nimport LocationManageUsersModal from './modals/locationManageUsersModal';\r\nimport LocationManageGroupCallingLineIDModal from './modals/locationManageGroupCallingLineIDModal';\r\nimport ScheduleModal from './../modals/scheduleModal';\r\nimport DepartmentModal from './../modals/departmentModal';\r\nimport EnterpriseDirectoryModal from './../modals/enterpriseDirectoryModal';\r\nimport GroupFqdnModal from './modals/groupFqdnModal';\r\nimport GroupVlanModal from './modals/groupVlanModal';\r\n\r\nconst locations = () => (\r\n\r\n \n
\n \n \n
\n \n
\n VLAN ID is required.
\n\r\n
\r\n\r\n)\r\n\r\nexport default locations;","import React from 'react';\r\nimport { fetchData } from './../../requests/api_calls';\r\nimport * as globalHelper from './../../scripts/helper';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\n\r\nexport const macAddress = 'macAddress';\r\n\r\nexport const newMac = 'newMAC';\r\n\r\nexport const validMacAddress = (mac) => {\r\n let regex1 = /^([A-F, A-F, a-f, 0-9]{2}[:]{1}){5}[A-F, A-F, a-f, 0-9]{2}$/;\r\n let regex2 = /^([A-F, A-F, a-f, 0-9]{2}[-]{1}){5}[A-F, A-F, a-f, 0-9]{2}$/;\r\n let regex3 = /^([A-F, A-F, a-f, 0-9]{3}[.]){3}[A-F, A-F, a-f, 0-9]{3}$/;\r\n let regex4 = /^[A-F, a-f, 0-9]{12}$/;\r\n return regex1.test(mac) || regex2.test(mac) || regex3.test(mac) || regex4.test(mac);\r\n}\r\n\r\nexport const saveBtnsClass = (state) => state.showSaveStatus ? 'btns opaque' : 'btns';\r\n\r\nexport const saveAndAddNewClass = (props) => addingDevice(props) ? 'btn' : 'hidden';\r\n\r\nexport const formClass = (state) => state.showSaveStatus ? 'form-group hidden' : 'form-group';\r\n\r\nexport const addingDevice = (props) => !props.mac;\r\n\r\nexport const editingDevice = (props) => !addingDevice(props);\r\n\r\nexport const showInvalidMessage = (state, fieldName) => {\r\n return (fieldName === macAddress && state.showInvalidMacMsg) ||\r\n state.showRequiredFieldMsgs && state.invalidFields.indexOf(fieldName) > -1;\r\n}\r\n\r\nexport const invalidMessageClass = (state, fieldName) => {\r\n return showInvalidMessage(state, fieldName) ? 'text-danger' : 'hidden';\r\n}\r\n\r\nexport const showInvalidSwapMacMsg = (state) => {\r\n return state.showInvalidMacMsg && state.invalidFields.indexOf(newMac) < 0;\r\n}\r\n\r\nexport const invalidSwapMacMsgClass = (state) => {\r\n return showInvalidSwapMacMsg(state) ? 'text-danger' : 'hidden';\r\n}\r\n\r\nexport const validMacClass = (state, fieldName) => {\r\n return !state.showInvalidMacMsg && state.showValidMacMsg ? 'validation-success' : 'hidden';\r\n}\r\n\r\nexport const fetchFqdns = async () => fetchData('admin/GetFqdns').then(data => data);\r\n\r\nexport const fetchModels = async () => fetchData('admin/GetDeviceModels').then(data => data);\r\n\r\nexport const fetchDeviceTns = async (locationAccNum) => {\r\n let params = '?locationAccountNumber=' + locationAccNum;\r\n return fetchData('admin/GetDeviceTns' + params).then(data => data);\r\n}\r\n\r\nexport const fetchDeviceSelectOptions = async () => {\r\n let requests = [fetchFqdns(), fetchModels()];\r\n return await Promise.all(requests).then(dataArray => dataArray)\r\n}\r\nexport const fetchDeviceConfig = async (mac) => {\r\n return fetchData('admin/GetDeviceConfiguration?mac=' + mac).then(data => data);\r\n}\r\n\r\nexport const fetchDeviceAndTns = async (mac) => {\r\n let deviceProps = await fetchData('admin/GetDevice?mac=' + mac).then(data => data);\r\n let locationAccNum = deviceProps.LocationAccountNumber;\r\n let requests = [fetchDeviceLocationProps(locationAccNum), fetchDeviceTns(locationAccNum)];\r\n let [locationProps, deviceTns] = await Promise.all(requests).then(dataArray => dataArray)\r\n let sort = [{ field: \"ServiceNumber\", dir: \"asc\" }, {field: \"Extension\", dir: \"asc\"}]\r\n deviceTns = orderBy(deviceTns, sort);\r\n //Created these to pull the Group Setting defaults into the equation for the configureDeviceModal\r\n deviceProps.LocationFQDN = locationProps && locationProps.FQDN ? locationProps.FQDN : null;\r\n deviceProps.LocationVLAN = locationProps && locationProps.VlanId ? locationProps.VlanId : null;\r\n deviceProps.LocationTransportProtocol = locationProps && locationProps.TransportProtocol;\r\n deviceProps.LocationEncryptedAudio = locationProps && locationProps.EncryptedAudio;\r\n deviceProps.TransactionNumbers = deviceTns;\r\n return deviceProps;\r\n}\r\n\r\nexport const fetchDeviceLocationProps = async (locationAccNum) => {\r\n let params = '?locationAccountNumber=' + locationAccNum;\r\n return fetchData('admin/GetDeviceLocationProperties' + params).then(data => data);\r\n}\r\n\r\nexport const fetchModelConfigs = async () => {\r\n return fetchData('admin/GetDeviceModelsConfiguration').then(data => data);\r\n}\r\n\r\nexport const fetchDeviceConfigs = async (props) => {\r\n let requests = [\r\n fetchDeviceConfig(props.mac),\r\n fetchDeviceAndTns(props.mac),\r\n fetchModelConfigs()\r\n ];\r\n return await Promise.all(requests).then(dataArray => dataArray)\r\n}\r\n\r\nexport const configSetting = (config, settingName) => (config && config[settingName]) ? true : false;\r\n\r\nexport const fqdnOptions = (fqdns, defaultFQDN, selectedFQDN) => {\r\n if (fqdns) {\r\n fqdns.sort();\r\n return fqdns.map((fqdn, index) => );\r\n } else return [];\r\n}\r\n\r\nexport const modelOptions = (models) => {\r\n if (models) {\r\n return models.map((model, index) => {\r\n let deviceType = model.DevicyType ? model.DevicyType : model.DeviceType; //typo fix\r\n return \r\n });\r\n } else return [];\r\n}\r\n\r\nexport const deviceConfigureValue = (state, field) => state.configProps[field] || '';\r\n\r\nexport const configProps = (config, device, initialFormState) => {\r\n if (config) {\r\n return {...initialFormState.configProps, ...config, ...device}\r\n } else if (device) {\r\n return {...initialFormState.configProps, ...device}\r\n } else return null;\r\n}\r\n\r\nexport const deviceIsAssigned = (deviceProps) => deviceProps.AssignedTo !== null;\r\n\r\n\r\nexport const onlyUnique = (val, index, self) => {\r\n return self.indexOf(val) === index;\r\n};\r\n\r\nexport const tnProps = (state, tn) => {\r\n let matches = state.transactionNums.filter(item => {\r\n return tn == (item.ServiceNumber || item.Extension)\r\n });\r\n return matches[0];\r\n}\r\n\r\nexport const showRemove = () => globalHelper.devicePerms().Delete_ExistingDevice === 1;\r\n\r\nexport const showFqdn = () => globalHelper.devicePerms().Setup_FQDN === 1;\r\n\r\nexport const showAddDevice = () => globalHelper.devicePerms().Setup_NewDevice === 1;\r\n\r\nexport const showSwap = () => globalHelper.devicePerms().Swap_Device === 1;","import React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { Tooltip } from '@progress/kendo-popups-react-wrapper';\nimport '@progress/kendo-ui';\n\nconst popUpMessage = () => {\n return ReactDOMServer.renderToStaticMarkup(\n \r\n
\r\n \r\n
\r\n\r\n Location Feature Settings
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \n
\n )\n}\n\nconst macAdressFormats = (props) => {\n\n return (\n \n Please use one of the following formats:
\nA1:B2:C3:D4:E5:F6
\n A1-B2-C3-D4-E5-F6
\n A1B.2C3.D4E.5F6
\n A1B2C3D4E5F6
\n Only alphanumeric characters A - F are permitted.
\n\n
\n )\n}\n\nexport default configSwitches;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport SaveStatus from './../../../components/save_status';\r\nimport InfoPop from './../../../components/infopop';\r\nimport { DataLoadingSpinner } from './../../../components/spinners';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport * as help from './../devices_helpers';\r\nimport MacAdressFormats from './../components/macFormatsClickPop';\r\nimport PortSettings from './../components/port_settings';\r\nimport ConfigSwitches from './../components/config_switches';\r\nimport _ from 'lodash';\r\n\r\nexport const macAddress = 'macAddress';\r\nexport const vlanId = 0;\r\nexport const fqdn = 'none';\r\nconst deviceType = 'DeviceType';\r\nconst defaultSpanValue = 2;\r\nconst spanOptions = [2, 3, 4];\r\nconst initialFormState = {\r\n configProps: {\r\n Ports: [],\r\n invalidFields: [],\r\n newDeviceModel: '',\r\n NewMAC: '',\r\n IsFirstPortMWI: false\r\n },\r\n selectedModelConfigs: {},\r\n invalidFields: ['newMAC', deviceType],\r\n invalidMacMsg: 'This field is required.',\r\n showInvalidMacMsg: false,\r\n enableSwapDevice: false,\r\n showRequiredFieldMsgs: false,\r\n showRebootSuccess: false,\r\n showRebootFailure: false,\r\n showSaveStatus: false,\r\n error: false,\r\n saving: false\r\n}\r\n\r\nclass ConfigureDevicesModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.saveDevice = this.saveDevice.bind(this);\r\n this.setPortSetting = this.setPortSetting.bind(this);\r\n this.setFqdn = this.setFqdn.bind(this);\r\n this.handleDeviceSelection = this.handleDeviceSelection.bind(this);\r\n this.handleMacChange = this.handleMacChange.bind(this);\r\n this.setDeviceConfiguration = this.setDeviceConfiguration.bind(this);\r\n //this.showSaveWaitMessage = this.showSaveWaitMessage.bind(this);\r\n this.NewMacChange = this.NewMacChange.bind(this);\r\n this.state = initialFormState;\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false, error: false, statusMessage: null });\r\n }\r\n\r\n async handleShow() {\r\n await this.setState({ ...initialFormState, showModal: true, loading: true });\r\n await this.setOptions();\r\n this.setDeviceConfiguration();\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n setOptions = async () => {\r\n let [fqdns, models] = await help.fetchDeviceSelectOptions();\r\n this.setState({ deviceModels: models, fqdns: fqdns });\r\n }\r\n\r\n setDeviceConfiguration = async () => {\r\n let [config, device, modelConfigs] = await help.fetchDeviceConfigs(this.props);\r\n let configProps = help.configProps(config, device, initialFormState);\r\n if (!configProps.DeviceModel) configProps.DeviceModel = device.DeviceType;\r\n configProps.newDeviceModel = configProps.DeviceModel; // default to current selection\r\n\r\n //this is to setup first time configuration values versus saved configuration values. config will be null on first time load\r\n //the 'Location' prefixed properties on configProps represent the 'defaults' that appear in the labels so they are still necessary.\r\n let selectedModelConfigs = this.matchedDeviceConfig(configProps.DeviceModel, modelConfigs);\r\n let vlanId = 'None';\r\n\r\n configProps.EnableVlanIdText = false;\r\n if (config) {\r\n vlanId = config.VlanId === 0 ? 'None' : config.VlanId;\r\n configProps.CurrentVlanId = vlanId;\r\n configProps.TextVlanId = vlanId === 'None' ? 0 : vlanId;\r\n configProps.TransportProtocol = config.TransportProtocol;\r\n configProps.EncryptedAudio = config.EncryptedAudio;\r\n configProps.Fqdn = config.Fqdn;\r\n\r\n let revisedPorts = configProps.Ports.map((port) => {\r\n return this.reviewAndOverrideDisabled(configProps, port, selectedModelConfigs);\r\n });\r\n configProps.Ports = revisedPorts;\r\n }\r\n else {\r\n if (selectedModelConfigs.IsVlanAvailable) {\r\n vlanId = configProps.LocationVLAN && ((configProps.LocationVLAN <= 1001 && configProps.LocationVLAN >= 2) || (configProps.LocationVLAN <= 4094 && configProps.LocationVLAN >= 1006)) ? configProps.LocationVLAN : vlanId\r\n }\r\n configProps.VlanId = vlanId;\r\n configProps.CurrentVlanId = vlanId;\r\n configProps.TextVlanId = vlanId === 'None' ? 0 : vlanId;\r\n if (vlanId !== 'None') {\r\n configProps.enableVlan = true;\r\n configProps.EnableVlanIdText = true;\r\n }\r\n configProps.TransportProtocol = configProps.LocationTransportProtocol;\r\n\r\n configProps.EncryptedAudio = configProps.LocationEncryptedAudio;\r\n configProps.Fqdn = configProps.LocationFQDN;\r\n configProps.IsFirstPortMWI = true;\r\n }\r\n\r\n let startingState = ({\r\n ...this.state,\r\n configProps: configProps,\r\n selectedModelConfigs: selectedModelConfigs,\r\n modelConfigs: modelConfigs,\r\n transactionNums: configProps.TransactionNumbers,\r\n unassignedDevices: this.props.unassignedDevices,\r\n loading: false\r\n //enableVlan: configProps.TransportProtocol === 'TCP' ? true : false\r\n });\r\n // make copy of starting state to reset back to on error\r\n let state = { ...startingState, resetState: startingState };\r\n this.setState(state);\r\n }\r\n\r\n reviewAndOverrideDisabled = (props, port, selectedModelConfigs) => {\r\n let availableTns = this.availableTns(props, port.PortNumber, selectedModelConfigs);\r\n let matchedNumber = availableTns.filter(ph => ph.ServiceNumber === port.PhoneNumber || ph.Extension === port.PhoneNumber)\r\n if (!matchedNumber || matchedNumber.length === 0)\r\n return this.getBlankPort(port.PortNumber, false);\r\n else\r\n return port;\r\n }\r\n\r\n\r\n matchedDeviceConfig = (model, modelConfigs = this.state.modelConfigs) => {\r\n let deviceMatches = modelConfigs && modelConfigs.length > 0 ? modelConfigs.filter(modelConfig => {\r\n return model == modelConfig.DeviceModelKey;\r\n }) : null; // using filter and getting first item b/c Array.find() does not work in IE\r\n return deviceMatches ? deviceMatches[0] : null;\r\n }\r\n\r\n formClass = () => this.state.loading ? 'form-group hidden' : 'form-group';\r\n\r\n handleSwapDevice = () => {\r\n this.setState({ ...this.state, enableSwapDevice: !this.state.enableSwapDevice });\r\n }\r\n\r\n handleEnableTransportProtocol = () => {\r\n this.setState({ ...this.state, enableTransportProtocol: !this.state.enableTransportProtocol });\r\n }\r\n\r\n handleRebootSuccess = () => {\r\n this.setState({ showRebootSuccess: true });\r\n let pageThis = this;\r\n setTimeout(function () {\r\n pageThis.setState({ showRebootSuccess: false });\r\n }, 3000);\r\n }\r\n handleRebootFailure = () => {\r\n this.setState({ showRebootFailure: true });\r\n let pageThis = this;\r\n setTimeout(function () {\r\n pageThis.setState({ showRebootFailure: false });\r\n }, 3000);\r\n }\r\n\r\n handleSaveSuccess = () => {\r\n this.setState({ showSuccess: true, saving: false });\r\n let pageThis = this;\r\n setTimeout(function () {\r\n pageThis.setState({ ...initialFormState, showModal: false, loading: true });\r\n pageThis.setDeviceConfiguration();\r\n pageThis.props.loadDevices(true); // reload parent ( list of devices )\r\n }, 3000);\r\n //\r\n }\r\n\r\n showSuccessModal = (msg) => {\r\n this.setState({})\r\n }\r\n\r\n closeSaveMessage = () => {\r\n this.setState({ showSaveStatus: false, error: false, statusMessage: '' });\r\n }\r\n\r\n\r\n showErrorAndResetModal = (msg, returnToScreen = false) => {\r\n let newState = {};\r\n if (msg) {\r\n newState = this.state;\r\n newState = { ...newState, saving: false, showSaveStatus: true, showModal: true, error: true, statusMessage: msg }\r\n } else {\r\n newState = { ...this.state.resetState, resetState: { ...this.state.resetState } }\r\n newState = { ...newState, showModal: true, error: false, statusMessage: null }\r\n }\r\n this.setState(newState);\r\n }\r\n\r\n switchHandler = (newState) => this.setState(newState);\r\n\r\n numberOfPorts = () => this.state.selectedModelConfigs ? this.state.selectedModelConfigs.NumberOfPorts : 0;\r\n\r\n noUnassignedDevices = () => this.state.unassignedDevices && this.state.unassignedDevices.length === 0;\r\n\r\n devicesAreAvailable = () => this.state.unassignedDevices && this.state.unassignedDevices.length > 0;\r\n\r\n showUnassignedDevicesLink = () => this.devicesAreAvailable() && this.state.showNewMacField;\r\n\r\n isSwapModelDisabled = () => {\r\n let device = this.state.configProps;\r\n return device.NewMAC !== null && device.MAC !== device.NewMAC;\r\n }\r\n\r\n unassignedMacOptions = () => {\r\n if (this.props.unassignedDevices) {\r\n let optionalMacs = this.props.unassignedDevices.filter(device => device.MacAddress !== this.props.mac);\r\n return optionalMacs.map((device, index) => {\r\n return \r\n });\r\n } else return [];\r\n }\r\n\r\n rebootDevice = () => {\r\n //let postData = {\r\n var mac = this.state.configProps.MAC;\r\n //};\r\n let apiPath = 'admin/RebootDevice';\r\n apiCalls.send(apiPath, 'POST', JSON.stringify(mac)).then(resp => {\r\n if (resp.ok) {\r\n this.handleRebootSuccess();\r\n } else {\r\n this.handleRebootFailure();\r\n }\r\n }).catch(msg => {\r\n this.handleRebootFailure();\r\n this.showErrorAndResetModal(msg);\r\n console.log('caught an exception')\r\n });\r\n }\r\n\r\n saveDevice = () => {\r\n if (this.validForm()) {\r\n this.setState({ ...this.state, saving: true, showSaveStatus: true });\r\n let apiPath = 'admin/UpdateDeviceConfiguration';\r\n let postData = this.devicePropsToSend();\r\n //let groupFQDN = this.state.configProps.LocationFQDN;\r\n\r\n apiCalls.send(apiPath, 'PATCH', JSON.stringify(postData)).then(resp => {\r\n if (resp.ok) {\r\n this.handleSaveSuccess();\r\n } else {\r\n let msg = this.notSavedErrorMsg(resp);\r\n this.showErrorAndResetModal(msg);\r\n }\r\n }).catch(msg => {\r\n this.showErrorAndResetModal(msg);\r\n console.log('caught an exception')\r\n });\r\n } else this.setInvalidFormMessage();\r\n }\r\n\r\n devicePropsToSend = () => {\r\n let config = this.state.configProps;\r\n let outgoingPayload = {\r\n DeviceModel: this.deviceModelSelection(),\r\n EncryptedAudio: config.EncryptedAudio,\r\n Fqdn: config.Fqdn === '' ? null : config.Fqdn,\r\n IsVideoEnabled: config.IsVideoEnabled || null,\r\n LocationAccountNumber: config.LocationAccountNumber,\r\n MAC: config.MAC,\r\n NewMAC: config.NewMAC || config.MAC,\r\n Ports: this.configuredPorts(config.Ports),\r\n TransportProtocol: config.TransportProtocol,\r\n TlsSrtp: config.TlsSrtp || null,\r\n UseLineKeysForBLFList: config.UseLineKeysForBLFList || null,\r\n VlanId: config.VlanId,\r\n IsSwapOperation: this.state.enableSwapDevice\r\n };\r\n return outgoingPayload;\r\n }\r\n\r\n deviceModelSelection = () => {\r\n let config = this.state.configProps;\r\n if (config.newDeviceModel !== (undefined || null || '')) {\r\n return config.newDeviceModel\r\n } else {\r\n return config.DeviceModel\r\n }\r\n }\r\n\r\n configuredPorts = (ports = this.state.configProps.Ports) => {\r\n return ports.filter(port => port.UserId && port.UserId !== '');\r\n }\r\n\r\n validForm = () => {\r\n if (this.configuredPorts().length && !this.invalidVlanId()) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n }\r\n\r\n invalidVlanId = () => this.state.configProps.invalidVlanId;\r\n\r\n setInvalidFormMessage = () => {\r\n if (!this.configuredPorts().length) {\r\n var msg = 'At least one port must have a phone number. ';\r\n msg += 'Unassign the device to deactivate all ports.';\r\n this.setState({ invalidFormMsg: msg });\r\n } else if (this.invalidVlanId()) {\r\n this.setState({ invalidFormMsg: 'The provided VLAN ID is invalid. Please update and try again.' })\r\n } else {\r\n this.setState({ invalidFormMsg: 'One or more fields is invalid. Please update and try again.' })\r\n }\r\n }\r\n\r\n saveButton = () => {\r\n if (!this.state.loading && !this.state.saving && !this.state.error && !this.state.showSuccess) {\r\n let invalidFormClass = this.validForm() ? 'hidden' : 'text-danger text-center'\r\n return (\r\n \n \n Use TCP for IP transport protocol settings\n {groupIpTransportProtocolSettings(config)}\n
\n \n \n Modify current device VLAN set to {config.CurrentVlanId}\n (Current group VLAN ID is set to {config.LocationVLAN ? config.LocationVLAN : 'none'})\n
\n \n
\n \n \n \n must be between 2 and 1001 or between 1006 and 4094.\n \n
\n \n \n updateVlanId(e, props)}\n />\n
\n \n \n \n
\n \n Use Phone > Sidecar for BLF Placement\n (default is Sidecar Only)\n
\n\n \n \n Enable Encrypted Audio & Signaling\n {/* {helper.disableAudioSignaling() ? ( - change permission not enabled) : ''} */}\n \n Transport protocol will be set to TLS if audio and video is encrypted\n \n
\n\n \n \n {protocolRadioButton(props, UDP)}
\n {protocolRadioButton(props, TCP)}
\n {protocolRadioButton(props, TLS)} \n defaults to TLS when audio is encrypted\n \n
\n \n {protocolRadioButton(props, TCP)}
\n {protocolRadioButton(props, TLS)} \n defaults to TLS when audio is encrypted\n \n
\n \n Enable Video\n
\n\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n swapDeviceClass = () => {\r\n let showSwap = this.state.configProps.Assigned && help.showSwap();\r\n return showSwap ? 'swap visible' : 'hidden';\r\n }\r\n\r\n FqdnSelection = () => {\r\n const { configProps: { DeviceModel: model } = {} } = this.state;\r\n const device = this.matchedDeviceConfig(model);\r\n const isFQDNAvailable = device ? device.IsFQDNAvailable : false;\r\n if (!isFQDNAvailable)\r\n return null;\r\n else if (help.showFqdn()) {\r\n return (\r\n \r\n Reboot request sent\r\n
\r\n \r\n Reboot request failed!\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.state.invalidFormMsg}
\r\n\r\n \r\n \r\n (Current group FQDN default is set to {this.state.configProps.LocationFQDN ? this.state.configProps.LocationFQDN : fqdn})\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 newDeviceSelector = () => {\r\n return (\r\n \r\n this.validateSwapDeviceModel(e, deviceType)}\r\n disabled={this.isSwapModelDisabled()}\r\n >\r\n \r\n {help.modelOptions(this.state.deviceModels)}\r\n \r\n
\r\n )\r\n }\r\n\r\n lineSettingsTable = () => {\r\n if (this.numberOfPorts() > 0) {\r\n return (\r\n | Line | \r\nTelephone Number | \r\nLabel | \r\nBLF\r\n | \r\n SCA\r\n | \r\n MWI\r\n | \r\n LK\r\n | \r\n CC\r\n | \r\n Span\r\n | \r\n
|---|
\r\n \r\n
\r\n )\r\n } else if (!state.loading && !state.saving && !state.error) {\r\n return (\r\n \r\n )\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Configure\r\n \r\n\r\n \r\n {this.saveButton()}\r\n
There is no device history for this device.
\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n \r\n {historyBtn}\r\n \r\n\r\n {this.gridContent()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n By clicking ‘Unassign’ you acknowledge the current device will have its configuration reset. \r\n setting a device is service impacting if it is in use.\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n By clicking ‘Remove’ you acknowledge the current device will be removed from your inventory.\r\n
\r\n\r\n \r\n
\r\n {this.unassignOrRemoveLabel()} this device?\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n validateSelectField = (e, fieldName) => {\r\n let value = e.target.value;\r\n let newState = {...this.state};\r\n let newInvalidFields = this.state.invalidFields.slice();\r\n newState.deviceProps[fieldName] = value;\r\n if (value === '') {\r\n newInvalidFields.push(fieldName);\r\n newState.invalidFields = Array.from(new Set(newInvalidFields));\r\n } else {\r\n newState.invalidFields = newInvalidFields.filter(field => field !== fieldName);\r\n }\r\n this.setState(newState);\r\n }\r\n\r\n validateMacField = (e) => {\r\n let value = e.target.value;\r\n let newState = {...this.state};\r\n let newInvalidFields = this.state.invalidFields.slice();\r\n newState.deviceProps[macAddress] = value;\r\n if(!help.validMacAddress(value)) {\r\n newState.invalidMacMsg = 'The format is invalid. ';\r\n newState.showInvalidMacMsg = true;\r\n newInvalidFields.push(macAddress);\r\n newState.invalidFields = newInvalidFields;\r\n } else {\r\n newState.invalidFields = newInvalidFields.filter(field => field !== macAddress);\r\n newState.showInvalidMacMsg = false;\r\n newState.showValidMacMsg = true;\r\n }\r\n this.setState(newState);\r\n }\r\n\r\n macAddressFieldValue = () => {\r\n if (this.state.deviceProps && this.state.deviceProps[macAddress]) {\r\n return this.state.deviceProps[macAddress]\r\n } else return ''\r\n }\r\n\r\n selectFieldValue = (fieldType) => {\r\n if (this.state.deviceProps && this.state.deviceProps[fieldType]) {\r\n return this.state.deviceProps[fieldType]\r\n } else return ''\r\n }\r\n\r\n noteFieldValue = (fieldType) => {\r\n if (this.state.deviceProps && this.state.deviceProps[notes]) {\r\n return this.state.deviceProps[notes]\r\n } else return ''\r\n }\r\n\r\n modalBody = () => {\r\n let state = this.state;\r\n if (state.loading === true || state.loadingLocations === true) {\r\n return (\r\n \r\n {this.props.instructions}\r\n
\r\n \r\n
\r\n )\r\n } \r\n }\r\n\r\n render() {\r\n let state = this.state;\r\n return (\r\n \r\n \r\n {this.props.showModalBtn}\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \n
\n )\n}\n\nconst showModalBtn = () => {\n return Add Device\n}\n\nconst DeviceAddModal = (props) => {\n return (\n Individually add devices to inventory. Once added, devices can be assigned to users and configured.
\n {/*\nIndividually add or bulk upload devices to inventory. Once added, devices can be assigned to users and configured.
\n Download Inventory Template \n Bulk Upload Inventory\n */}\nTelephone Numbers:
\n\r\n Please select a \"Location\" from the menu above.\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 footerBtnClass = () => {\r\n return this.savingOrConfirming() || this.state.loading ? 'opaque' : 'visible btns';\r\n }\r\n\r\n modalClass = () => this.state.loading ? 'loading' : 'group-fqdn';\r\n\r\n render() {\r\n return (\r\n Setup a Fully Qualified Domain Name (FQDN) as default FQDN for the location.
\r\n
\r\n \r\n {this.saveStatus()}\r\n \r\n
\r\n \r\n \r\n \r\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 GroupFqdnTab;","import React, { Component } from 'react';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport * as help from'../../locations/locations_helpers';\r\nimport * as settings from '../../../scripts/settings';\r\nimport SaveStatus from './../../../components/save_status';\r\nimport * as helper from '../../../scripts/helper';\r\nimport { DataLoadingSpinner } from'./../../../components/spinners';\r\n\r\nclass GroupVLANTab extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.setUseVlanId = this.setUseVlanId.bind(this);\r\n this.setVlanId = this.setVlanId.bind(this);\r\n this.setUseTcp = this.setUseTcp.bind(this);\r\n this.setAudioIsEncrypted = this.setAudioIsEncrypted.bind(this);\r\n this.saveGroupVlanSettings = this.saveGroupVlanSettings.bind(this);\r\n this.fetchVLANSettings = this.fetchVLANSettings.bind(this);\r\n this.setLocation = this.setLocation.bind(this);\r\n this.getTabBody = this.getTabBody.bind(this);\r\n this.state = {\r\n showModal: false,\r\n useVlanId: false,\r\n saving: false,\r\n showSaveStatus: false,\r\n showValidationError: false,\r\n loading: false,\r\n locations: [],\r\n currentLocation: ''\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchLocations();\r\n }\r\n\r\n fetchLocations = async(apiPath) => {\r\n let locationOption = (location, index) => \r\n\r\n if (!apiPath) apiPath = 'admin/Locations';\r\n await this.setState({ loading: true });\r\n apiCalls.fetchData(apiPath).then((data) => {\r\n if (data) {\r\n let locationOptions = data.map((location, index) => locationOption(location, index));\r\n if (locationOptions.length > 1) {\r\n locationOptions.unshift(\r\n locationOption({ LocationAccountNumber: '', LocationName: '- Select Location -' }, '')\r\n );\r\n }\r\n this.setState({ locationOptions: locationOptions });\r\n if (!sessionStorage.DeviceLocation) {\r\n let currLocation = this.state.locationOptions[0].props.value;\r\n this.setState({ currentLocation: currLocation, loading: false }); //initial value\r\n } else {\r\n this.setState({ currentLocation: sessionStorage.DeviceLocation }); //stored value\r\n this.loadLocationDetails(sessionStorage.DeviceLocation);\r\n }\r\n } else {\r\n this.setState({ locations: [], resultsMsg: settings.noResultsMsg, loading: false });\r\n };\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n setLocation = async (event) => {\r\n let locationValue = event.target.value;\r\n await this.setState({ currentLocation: locationValue, loading: true });\r\n this.loadLocationDetails(locationValue);\r\n }\r\n\r\n loadLocationDetails = async(locationValue) => {\r\n await this.fetchVLANSettings();\r\n await this.setState({loading: false});\r\n sessionStorage.setItem('DeviceLocation', locationValue);\r\n }\r\n\r\n setUseVlanId = (e) => this.setState({useVlanId: e.target.checked});\r\n\r\n setVlanId = (e) => this.setState({VlanId: e.target.value}, this.validateForm(e));\r\n\r\n setUseTcp = (e) => {\r\n let protocol = e.target.checked ? 'TCP' : 'UDP';\r\n this.setState({useTcp: e.target.checked, TransportProtocol: protocol, EncryptedAudio: false});\r\n }\r\n\r\n setAudioIsEncrypted = (e) => this.setState({EncryptedAudio: e.target.checked});\r\n\r\n fetchVLANSettings = async() => {\r\n let params = '?locationAccountNumber=' + this.state.currentLocation;\r\n try\r\n {\r\n let data = await apiCalls.fetchData('admin/GetDeviceLocationProperties' + params).then((resp) => resp);\r\n if (data !== null) {\r\n await this.setState({\r\n EncryptedAudio: data.EncryptedAudio,\r\n TransportProtocol: data.TransportProtocol,\r\n useTcp: data.TransportProtocol === 'TCP',\r\n VlanId: data.VlanId || '',\r\n useVlanId: data.VlanId !== ('' || null),\r\n FQDN: data.FQDN\r\n });\r\n } else if (data === null) {\r\n await this.setState({fqdns: []});\r\n }\r\n }\r\n catch(ex) \r\n {\r\n console.error(ex);\r\n };\r\n }\r\n\r\n validForm = () => {\r\n if (this.state.useVlanId && this.state.VlanId === '') {\r\n this.setState({showValidationError: true});\r\n return false\r\n } else {\r\n this.setState({showValidationError: false});\r\n return true\r\n }\r\n }\r\n\r\n validVlanId = (id) => {\r\n return (id !== \"\" && id !== undefined) && ((id >= 2 && id <= 1001) || (id >= 1006 && id <= 4094))\r\n }\r\n\r\n validateForm = (e) => {\r\n if (this.state.useVlanId && (!this.validVlanId(parseInt(e.target.value))))\r\n {\r\n this.setState({showValidationError: true});\r\n } else {\r\n this.setState({showValidationError: false});\r\n }\r\n }\r\n\r\n saveGroupVlanSettings = () => {\r\n if (this.validForm()) {\r\n this.setState({saving: true, showSaveStatus: true});\r\n let data = {\r\n TransportProtocol: this.state.TransportProtocol,\r\n EncryptedAudio: this.state.EncryptedAudio,\r\n VlanId: this.state.useVlanId ? this.state.VlanId : null,\r\n LocationAccountNumber: this.state.currentLocation,\r\n FQDN: this.state.FQDN\r\n };\r\n let apiPath = 'admin/UpdateDeviceLocationProperties';\r\n apiCalls.send(apiPath, 'PATCH', JSON.stringify(data)).then(resp => {\r\n if(resp.ok) {\r\n setTimeout(() => {\r\n this.setState({\r\n saving: false,\r\n statusMessage: 'Group VLAN settings were updated.',\r\n parentCallback: this.resetForm\r\n }), \r\n setTimeout(() => this.resetForm(), help.statusMsgDelay)\r\n }\r\n ,help.hideSpinnerDelay);\r\n } else {\r\n this.setState({...this.state,\r\n saving: false,\r\n error: true,\r\n statusMessage: this.notSavedErrorMsg(resp),\r\n parentCallback: this.resetForm\r\n })\r\n }\r\n }).catch(message => {\r\n this.setState({saving: false});\r\n console.log('caught exception saving Group VLAN settings.');\r\n console.log(message);\r\n });\r\n }\r\n }\r\n\r\n resetForm = async() => {\r\n await this.setState({ loading: true, statusMessage: '' });\r\n try{\r\n await this.fetchVLANSettings();\r\n } catch (ex) { \r\n console.error(ex);\r\n } finally {\r\n await this.setState({loading: false});\r\n }\r\n }\r\n\r\n vlanIdDivSettings = (attr) => {\r\n var settings = {};\r\n if (this.state.useVlanId) {\r\n settings = {class: 'hidden-group collapse in', 'aria-expanded': 'true'};\r\n } else {\r\n settings = {class: 'hidden-group collapse', 'aria-expanded': 'false'};\r\n }\r\n return settings[attr]\r\n }\r\n\r\n notSavedErrorMsg = (resp) => 'Device not saved. Error: ' + resp.message;\r\n\r\n getTabBody = () => {\r\n let perms = JSON.parse(sessionStorage.DevicePerms);//sessionStorage.DevicePerms\r\n if (this.state.loading) {\r\n return Group FQDN Setup
\r\n
\r\n \r\n \r\n
\r\n {this.getTabBody()}\r\n \r\n Please select a \"Location\" from the menu above.\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n Set Group VLAN ID
\r\nSetup a Virtual Location Area Network (VLAN) as the default. The default can be overwritten on an individual device level if needed.
\r\n\r\n \r\n Use VLAN ID?\r\n \r\n \r\n
\r\n \r\n \r\n VLAN ID is required and must be between 2 and 1001 or between 1006 and 4094.\r\n \r\n \r\n
\r\n \r\n \r\n \r\n VLAN ID is required and must be between 2 and 1001 or between 1006 and 4094.\r\n \r\n \r\n
Set Group IP Transport Protocol for Devices
\r\n\r\n Set the IP transport protocol for all devices within the group. If a device(s) requires a different setting \r\n than what is configured for the group, you may elect to overwrite the group IP transport protocol settings \r\n during device provisioning.\r\n
\r\n\r\n TCP is not the typical transport protocol for voice traffic and should only be used when there are 20+ \r\n Busy Lamp Fields (BLF) configured for an individual device. Contact Momentum Telecom Technical Support \r\n for more detail.\r\n
\r\n\r\n \r\n Use TCP? (UDP is default)\r\n \r\n Note: if you change the current IP transport protocol settings for this group, you must reprovision \r\n all devices within the group before the new setting will be pushed to existing device configuration\r\n files.\r\n \r\n
\r\n Set Group Encrypted Audio & Signaling for Devices
\r\n\r\n Set device Audio and Signaling Encryption for all devices within the group. If a device(s) requires a different \r\n setting than what is configured for the group, you may elect to overwrite the group Audio and Signaling Encryption\r\n settings during device provisioning. \r\n
\r\n\r\n \r\n Enable Encrypted Audio & Signaling?\r\n {/* {helper.disableAudioSignaling() ? ( - change permission not enabled) : ''} */}\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 return (\r\n \r\n
\r\n )\r\n }\r\n};\r\n\r\nexport default GroupVLANTab;","import React, { Component } from 'react';\nimport { DataLoadingSpinner } from './../../components/spinners';\nimport ConfigureDevicesModal from './modals/configureDevicesModal';\nimport DeviceHistoryModal from './modals/deviceHistoryModal';\nimport DeviceResetModal from './modals/deviceResetModal';\nimport DeviceAddModal from './modals/deviceAddModal';\nimport moment from 'moment';\nimport DeviceEditModal from './modals/deviceEditModal';\nimport * as helper from './../../scripts/helper';\nimport * as settings from './../../scripts/settings';\nimport * as apiCalls from './../../requests/api_calls';\nimport * as config from './../../requests/config';\nimport { showRemove, showAddDevice } from './devices_helpers';\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\nimport { orderBy } from '@progress/kendo-data-query';\nimport { Link } from 'react-router-dom';\nimport WrappedCell from '../../components/wordWrappedCell';\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\nimport ServiceTnClickPop from './../../components/serviceTnClickPop';\nimport DeviceStatuses from '../../components/deviceStatuses';\nimport GroupFQDNTab from './components/groupFQDNTab';\nimport GroupVLANTab from './components/groupVLANTab';\n\nclass HistoryBtn extends GridCell {\n\n render() {\n return Group VLAN Settings
\r\n\r\n \r\n \r\n
\r\n {this.getTabBody()}\r\n \n \n \n this.exportDevices()} >Export Devices\n
\n )\n } else null;\n }\n\n exportDevices = () => {\n this.refs.exportDevices.submit();\n this.refs.exportBtn.text = 'Downloading...';\n setTimeout(() => {\n this.refs.exportBtn.text = 'Export Devices';\n }, 2000);\n }\n\n tabContent = () => {\n if (this.state.loading) {\n return \n
\n )\n }\n}\n\nexport default DevicesList;","import React from 'react';\r\nimport { fetchData, post } from '../../../requests/api_calls';\r\nimport * as helper from '../../../scripts/helper';\r\n\r\nconst paramsSeparator = (apiPath) => apiPath.indexOf('?') >= 0 ? '&' : '?';\r\n\r\nexport const apiGetMACDPermissions = () => {\r\n return 'admin/macd/GetMacdPermissions';\r\n}\r\n\r\nexport const apiGetUserLevelAddons = (loc_acct_num) => {\r\n return `admin/macd/GetAvailableAddonList?LocationAccountNumber=${loc_acct_num}`;\r\n}\r\n\r\nexport const apiGetUserAvailableAddons = (currentLocation, partNum) => {\r\n return `admin/macd/GetAvailableAddonServiceList?LocationAccountNumber=${currentLocation}&AddonPartNumber=${partNum}`;\r\n}\r\n\r\nexport const apiGetUserAssignedAddons = (currentLocation, partNum) => {\r\n return `admin/macd/GetAssignedAddonServiceList?LocationAccountNumber=${currentLocation}&AddonPartNumber=${partNum}`;\r\n}\r\n\r\nexport const apiPostUnassignedAddons = () => {\r\n return 'admin/macd/UnassignAddon';\r\n}\r\n\r\nexport const apiPostAssignedAddons = () => {\r\n return 'admin/macd/AssignAddon';\r\n}\r\n\r\nexport const apiGetLocations = () => {\r\n let path = 'admin/Locations';\r\n return path;\r\n}\r\n\r\nexport const apiGetProductPropertiesWithParams = (PartNumber) => {\r\n let path = 'admin/macd/GetProductProperties?PartNumber=' + PartNumber;\r\n return path;\r\n}\r\n\r\nexport const apiLoadMACDWithParams = (OrderId) => {\r\n let path = 'admin/macd/GetOrder?OrderId=' + OrderId;\r\n return path;\r\n}\r\n\r\nexport const apiLoadMACDLineItemList = (OrderId) => {\r\n let path = 'admin/macd/GetLineItemList?OrderId=' + OrderId;\r\n return path;\r\n}\r\n\r\nexport const apiLoadMACDLineItemDetailListWithProperties = (OrderId, LineItemId) => {\r\n let path = 'admin/macd/GetItemDetailList?OrderId=' + OrderId + \"&FilterProductProperties=false&LineItemId=\" + LineItemId;\r\n return path;\r\n}\r\n\r\n// export const apiGetInventoryNumbersWithParams = (OrderId) => {\r\n// let path = 'admin/macd/GetInventoryNumbers?OrderId=' + OrderId;\r\n// return path;\r\n// }\r\n\r\nexport const apiGetTerminatingNumbersWithParams = (OrderId, LocationId) => {\r\n return 'admin/macd/GetTerminatingNumbers?OrderId=' + OrderId + \"&LocationId=\" + LocationId;\r\n}\r\n\r\nexport const apiAddServicesOrderWithLineItem = () => {\r\n return 'admin/macd/CreateOrder';\r\n}\r\n\r\nexport const apiAddServicesSaveLineItem = () => {\r\n return 'admin/macd/SaveLineItem';\r\n}\r\n\r\nexport const apiAddServicesDetailItem = () => {\r\n return 'admin/macd/SaveItemDetail';\r\n}\r\n\r\nexport const apiUpdateDetailItem = () => {\r\n return 'admin/macd/UpdateItemDetail';\r\n}\r\n\r\nexport const apiUpdateLineItem = () => {\r\n return 'admin/macd/UpdateLineItem';\r\n}\r\n\r\nexport const apiSavedOrderPathWithParams = (OrderId) => {\r\n let path = 'admin/macd/GetOrder?OrderId=' + OrderId;\r\n return path;\r\n}\r\n\r\nexport const apiPricebookPathWithParams = (currentLocation) => {\r\n let path = 'admin/macd/GetProductCatalog';\r\n path += '?LocationAccountNumber=' + currentLocation;\r\n path += paramsSeparator(path) + 'MacdType=ADD_SERVICES';\r\n path += paramsSeparator(path) + 'filter=STANDALONE_AND_ADDON_PRODUCTS';\r\n return path;\r\n}\r\nexport const apiGetRCStateList = () => {\r\n return 'admin/macd/GetRCStateList';\r\n}\r\n\r\nexport const apiGetDefaultRateCenterDetails = (OrderId, LocationId) => {\r\n return 'admin/macd/GetRCListByServiceAddress?OrderId=' + OrderId + '&LocationId=' + LocationId;\r\n};\r\n\r\nexport const apiGetRCNameByState = (abbr) => {\r\n return 'admin/macd/GetRCListByState?RCState=' + abbr;\r\n}\r\n\r\nexport const apiDiscardOrder = () => {\r\n return 'admin/macd/DiscardOrder';\r\n}\r\n\r\nexport const apiDiscardLineItem = () => {\r\n return 'admin/macd/DiscardLineItem';\r\n}\r\n\r\nexport const apiDiscardItemDetail = () => {\r\n return 'admin/macd/DiscardItemDetail';\r\n}\r\n\r\nexport const apiDiscardTrunkGroupConfig = () => {\r\n return 'admin/macd/DiscardTrunkGroupConfig';\r\n}\r\n\r\nexport const apiGetLocationList = (OrderId) => {\r\n return 'admin/macd/GetLocationList?OrderId=' + OrderId;\r\n}\r\nexport const apiGetLocationDetails = (OrderId, LocationId) => {\r\n return 'admin/macd/GetLocation?OrderId=' + OrderId + '&LocationId=' + LocationId;\r\n}\r\nexport const apiValidateMACD = (OrderId) => {\r\n return 'admin/macd/ValidateMacd?OrderId=' + OrderId;\r\n}\r\nexport const apiValidateMACDLineItems = (OrderId, LocationId) => {\r\n return 'admin/macd/ValidateLineItemList?OrderId=' + OrderId + '&LocationId=' + LocationId;\r\n}\r\nexport const apiValidateMACDDetailItems = (OrderId, LocationId) => {\r\n return 'admin/macd/ValidateItemDetailList?OrderId=' + OrderId + '&LocationId=' + LocationId;\r\n}\r\n\r\nexport const apiGetMPOLocation = (OrderId, LocationId) => {\r\n return 'admin/macd/GetLocation?OrderId=' + OrderId + '&LocationId=' + LocationId;\r\n}\r\n\r\nexport const apiUpdateLocation = () => {\r\n return 'admin/macd/UpdateLocation'\r\n}\r\n\r\nexport const apiSubmitOrder = () => {\r\n return 'admin/macd/SubmitOrder';\r\n}\r\n\r\nexport const apiTerminateOrder = () => {\r\n return 'admin/macd/TerminateOrder';\r\n}\r\n\r\nexport const apiGetListingsForChangeExtension = (LocationAccountNumber) => {\r\n return `admin/macd/GetChangeExtensionList?LocationAccountNumber=${LocationAccountNumber}`;\r\n}\r\n\r\nexport const apiUpdateExtension = () => {\r\n return 'admin/macd/SaveChangeExtensionList';\r\n}\r\nexport const apiGetChangeLineTypeListings = (MomentumAccountNumber) => {\r\n return 'admin/macd/GetChangeLineTypeList?LocationAccountNumber=' + MomentumAccountNumber;\r\n}\r\nexport const apiSubmitChangeLineType = () => {\r\n return 'admin/macd/SaveChangeLineTypeList'\r\n}\r\nexport const apiGetChangeListingList = (MomentumAccountNumber) => {\r\n return 'admin/macd/GetChangeListingList?LocationAccountNumber=' + MomentumAccountNumber;\r\n}\r\nexport const apiSubmitChangeListingList = () => {\r\n return 'admin/macd/SaveChangeListingList';\r\n}\r\n\r\nexport const apiGetChangeSeatType = (MomentumAccountNumber) => {\r\n return `admin/macd/GetChangeSeatTypeList?LocationAccountNumber=${MomentumAccountNumber}`\r\n}\r\n\r\nexport const apiSubmitChangeSeatType = () => {\r\n return `admin/macd/SaveChangeSeatTypeList`;\r\n}\r\n\r\nexport const apiGetChangeCnam = (MomentumAccountNumber) => {\r\n return `admin/macd/GetChangeCNAMList?LocationAccountNumber=${MomentumAccountNumber}`;\r\n}\r\n\r\nexport const apiSubmitChangeCnam = () => {\r\n return `admin/macd/SaveChangeCNAMList`;\r\n}\r\n\r\nexport const apiGetBlockType = (MomentumAccountNumber) => {\r\n return `admin/macd/GetChangeBlockList?LocationAccountNumber=${MomentumAccountNumber}`\r\n}\r\n\r\nexport const apiSubmitBlockType = () => {\r\n return `admin/macd/SaveChangeBlockList`;\r\n}\r\n\r\nexport const apiGetVTNList = (MomentumAccountNumber) => {\r\n return `admin/macd/GetChangeVNTermNumberList?LocationAccountNumber=${MomentumAccountNumber}`;\r\n}\r\n\r\nexport const apiSubmitVTN = () => {\r\n return `admin/macd/SaveChangeVNTermNumberList`;\r\n}\r\n\r\nexport const apiRetrieveIPTrunks = (MomentumAccountNumber) => {\r\n return `admin/GetIpTrunkGroupList?LocationAccountNumber=${MomentumAccountNumber}`;\r\n}\r\n\r\nexport const apiLoadMACDTrunkItemListWithProperties = (OrderId) => {\r\n return `admin/MACD/GetIPTrunkConfigList?OrderId=${OrderId}`;\r\n}\r\n\r\nexport const apiLoadMACDAddressListWithProperties = (OrderId) => {\r\n return `admin/macd/GetE911AddressList?OrderId=${OrderId}`;\r\n}\r\n\r\nexport const apiAddServicesIPTrunkItem = () => {\r\n return `admin/macd/SaveIPTrunkConfig`;\r\n}\r\n\r\nexport const apiUpdateTrunkItem = () => {\r\n return 'admin/macd/UpdateIPTrunkConfig';\r\n}\r\n\r\nexport const apiDiscardTrunkItem = () => {\r\n return 'admin/macd/DiscardIPTrunkConfig';\r\n}\r\n\r\nexport const apiValidateTrunkItem = (OrderId, IPTrunkConfigId) => {\r\n return `admin/macd/DiscardIPTrunkConfig?OrderId=${OrderId}&IPTrunkConfigId=${IPTrunkConfigId}`;\r\n}\r\n\r\nexport const locationSelectLabel = (locationAcctNumber) => {\r\n return (\r\n \n
\n \n
\n Devices {this.state.devicesCount || null}
\n\n
\n \n \n \n \n
\n \n \n
\n \n \n All Devices\n \n \n Assigned\n \n \n Unassigned\n \n \n Group FQDN Settings\n \n \n Group VLAN Settings\n \n {this.exportDevicesBtn()}\n
\n {this.tabContent()}\n \r\n Please select a \"Location\" from the menu above.\r\n
\r\n )\r\n}\r\n\r\nexport const fetchItemConfig = async (OrderId, LocationId) => {\r\n let requests = [\r\n //fetchInventoryTN(OrderId),\r\n fetchRateCenterDetailsByServiceAddress(OrderId, LocationId),\r\n fetchTerminatingNumbers(OrderId, LocationId),\r\n fetchLocationDetails(OrderId, LocationId)\r\n ];\r\n return await Promise.all(requests).then(dataArray => dataArray);\r\n}\r\n// export const fetchInventoryTN = async (OrderId) => {\r\n// let apiPath = apiGetInventoryNumbersWithParams(OrderId);\r\n// return fetchData(apiPath).then(data => data);\r\n// }\r\n\r\nexport const fetchRateCenterDetailsByServiceAddress = async (OrderId, LocationId) => {\r\n let apiPath = apiGetDefaultRateCenterDetails(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchTerminatingNumbers = async (OrderId, LocationId) => {\r\n let apiPath = apiGetTerminatingNumbersWithParams(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchLocationDetails = async (OrderId, LocationId) => {\r\n let apiPath = apiGetLocationDetails(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchRateCenterOptions = async (StateAbbr) => {\r\n let apiPath = apiGetRCNameByState(StateAbbr);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchAvailableAddons = (locationId) => {\r\n let apiPath = apiGetUserLevelAddons(locationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n//export const fetchAvailableList;\r\n//export const fetchAssignedList;\r\n\r\nexport const RetrieveOrderDetails = async (OrderId) => {\r\n let requests = [\r\n fetchSavedOrder(OrderId),\r\n fetchLocationList(OrderId),\r\n fetchLineItemList(OrderId),\r\n fetchLineItemDetailList(OrderId),\r\n fetchTrunkItemList(OrderId),\r\n fetchOrderAddresses(OrderId)\r\n ];\r\n return await Promise.all(requests).then(dataArray => dataArray);\r\n}\r\nexport const GetItemValidations = async (OrderId, LocationId) => {\r\n let requests = [\r\n fetchOrderValidation(OrderId) //may need to add back details\r\n ];\r\n return await Promise.all(requests).then(dataArray => dataArray);\r\n}\r\n\r\nexport const fetchSavedOrder = async (OrderId) => {\r\n let apiPath = apiLoadMACDWithParams(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\nexport const fetchLocationList = async (OrderId) => {\r\n let apiPath = apiGetLocationList(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\nexport const fetchLineItemList = async (OrderId) => {\r\n let apiPath = apiLoadMACDLineItemList(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\nexport const fetchLineItemDetailList = async (OrderId, LineItemId = 0) => {\r\n let apiPath = apiLoadMACDLineItemDetailListWithProperties(OrderId, LineItemId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchTrunkItemList = async (OrderId = 0) => {\r\n let apiPath = apiLoadMACDTrunkItemListWithProperties(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchOrderAddresses = async (OrderId = 0) => {\r\n let apiPath = apiLoadMACDAddressListWithProperties(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchOrderValidation = async (OrderId) => {\r\n let apiPath = apiValidateMACD(OrderId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchLocations = async () => {\r\n let apiPath = apiGetLocations();\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchPricebookDetails = async (LocationId) => {\r\n let apiPath = apiPricebookPathWithParams(LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchMPOLocation = async (OrderId, LocationId) => {\r\n let apiPath = apiGetMPOLocation(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchLineItemValidation = async (OrderId, LocationId) => {\r\n let apiPath = apiValidateMACDLineItems(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const fetchDetailItemValidation = async (OrderId, LocationId) => {\r\n let apiPath = apiValidateMACDDetailItems(OrderId, LocationId);\r\n return fetchData(apiPath).then(data => data);\r\n}\r\n\r\nexport const UpdateLineItemInOrder = async (LineItem) => {\r\n let apiPath = apiUpdateLineItem();\r\n return post(apiPath, 'PATCH', JSON.stringify(LineItem)).then(data => data);\r\n}\r\n\r\nexport const AddDetailItemToOrder = async (DetailItem) => {\r\n let apiPath = apiAddServicesDetailItem();\r\n\r\n return await post(apiPath, 'POST', JSON.stringify(DetailItem)).then(data => data);\r\n}\r\n\r\nexport const UpdateDetailItemInOrder = async (DetailItem) => {\r\n let apiPath = apiUpdateDetailItem();\r\n let body = {\r\n\r\n };\r\n return await post(apiPath, 'PATCH', JSON.stringify(body)).then(data => data);\r\n}\r\n\r\nexport const RemoveTrunkGroupConfigFromOrder = async(OrderId, LocationId, LineItemId, IPTrunkConfigId) => {\r\n let body = {\r\n OrderId: OrderId,\r\n LocationId: LocationId,\r\n LineItemId: LineItemId,\r\n IPTrunkConfigId: IPTrunkConfigId\r\n };\r\n let apiPath = apiDiscardTrunkGroupConfig();\r\n return await post(apiPath, 'PATCH', JSON.stringify(body)).then(data => data);\r\n}\r\n\r\nexport const RemoveDetailItemFromOrder = async (OrderId, LocationId, LineItemId, DetailId) => {\r\n let body = {\r\n OrderId: OrderId,\r\n LocationId: LocationId,\r\n LineItemId: LineItemId,\r\n DetailId: DetailId\r\n };\r\n let apiPath = apiDiscardItemDetail();\r\n return await post(apiPath, 'PATCH', JSON.stringify(body)).then(data => data);\r\n}\r\n\r\nexport const ItemValidations = async (OrderId, LocationId) => {\r\n let LineItemErrors = [];\r\n let DetailItemValidations = [];\r\n let TrunkGroupValidations = [];\r\n let [OrderValidationErrors] = await GetItemValidations(OrderId, LocationId);\r\n \r\n if (OrderValidationErrors && OrderValidationErrors.length > 0) {\r\n LineItemErrors = OrderValidationErrors.filter(function (o) { return o.ErrorSource === \"LINE_ITEM\" });\r\n \r\n DetailItemValidations = OrderValidationErrors.filter(function (o) { return o.ErrorSource == \"ITEM_DETAIL\" });\r\n // if (DetailItemValidations) {\r\n // DetailItemValidations.map((div, idx) => {\r\n // LineItemErrors.push(div);\r\n // });\r\n // }\r\n\r\n TrunkGroupValidations = OrderValidationErrors.filter(function(o) { return o.ErrorSource === 'IPTRUNK_CONFIG'});\r\n // if (TrunkGroupValidations) {\r\n // DetailItemValidations.map((tgv, idx) => {\r\n // LineItemErrors.push(tgv);\r\n // });\r\n // }\r\n\r\n }\r\n return [DetailItemValidations, LineItemErrors, TrunkGroupValidations];\r\n}\r\n\r\nexport const LoadItem = (li, PartNumber, PartDescription, CurrentLocation, LocationName, MPOLocationId, TerminatingNumbersList\r\n , DefaultRateCenterOptions, RCStateOptions, DefaultRCState, DefaultRCName, CatalogItem, IsReadOnly = false) => {\r\n let NewItem = {\r\n LineItemId: li.LineItemId,\r\n OrderId: li.OrderId,\r\n LocationId: CurrentLocation,\r\n MPOLocationId: MPOLocationId,\r\n CatalogItemId: li.CatalogItemId,\r\n MRCAdjustedPrice: li.MRCAdjustedPrice,\r\n MRCDiscountPercent: li.MRCDiscountPercent,\r\n NRCAdjustedPrice: li.NRCAdjustedPrice,\r\n NRCDiscountPercent: li.NRCDiscountPercent,\r\n Quantity: li.NewCount === 0 ? 1 : li.NewCount,\r\n PartDescription: PartDescription,\r\n PartNum: PartNumber,\r\n Location: LocationName,\r\n configurationDetails: [],\r\n TerminatingNumbersList: TerminatingNumbersList,\r\n //InventoryTNList: InventoryTNList,\r\n DefaultRateCenterOptions: DefaultRateCenterOptions,\r\n RCStateOptions: RCStateOptions,\r\n DefaultRCState: !CatalogItem || (CatalogItem.CatalogTicker !== 'MTRTADNTFA' && CatalogItem.CatalogTicker !== 'MTRTIPPTFA') ? DefaultRCState : 'US',\r\n DefaultRCName: !CatalogItem || (CatalogItem.CatalogTicker !== 'MTRTADNTFA' && CatalogItem.CatalogTicker !== 'MTRTIPPTFA') ? DefaultRCName : 'Toll Free',\r\n isConfigured: false, //should be true by this page\r\n ReadOnly: IsReadOnly,\r\n CatalogTicker: CatalogItem ? CatalogItem.CatalogTicker : '',\r\n ErrorMessage: li.ErrorMessage\r\n };\r\n return NewItem;\r\n}\r\n//TODO: TrunkGroup Records\r\nexport const MapConfigDetails = (newCount, configDetailsArray, OrderItem, DetailId, DBConfigurationDetails, DBTrunkGroupConfigs = null, TrunkGroupList = null, AddressItems = null, ValidateTN = true) => {\r\n let newArray = configDetailsArray ? configDetailsArray.slice() : [];\r\n let iCount = 1;\r\n if (DBConfigurationDetails && DBConfigurationDetails.length > 0) {\r\n\r\n DBConfigurationDetails.map((itm, idx) => {\r\n //coming from the backend save\r\n \r\n let trunkItem = DBTrunkGroupConfigs ? DBTrunkGroupConfigs.filter(resp => resp.DetailId === itm.DetailId) : null;\r\n let trunkLabel = '';\r\n if (trunkItem)\r\n trunkItem = trunkItem[0];\r\n\r\n if (itm.IPTrunkGroupCustomerProductId && parseInt(itm.IPTrunkGroupCustomerProductId) > 0) {\r\n trunkLabel = TrunkGroupList.filter(resp => resp.CustomerProductId === parseInt(itm.IPTrunkGroupCustomerProductId))[0].LineDescription\r\n } else if (itm.ParentDetailId && parseInt(itm.ParentDetailId) > 0 && TrunkGroupList.filter(resp => resp.DetailId === parseInt(itm.ParnetDetailId)).length > 0)\r\n trunkLabel = TrunkGroupList.filter(resp => resp.DetailId === parseInt(itm.ParentDetailId))[0].LineDescription\r\n\r\n let newEntry = {\r\n ItemNumber: configDetailsArray && configDetailsArray.length > 0 ? configDetailsArray[idx].ItemNumber : iCount,\r\n LineItemId: OrderItem.LineItemId,\r\n DetailId: itm.DetailId && itm.DetailId > 0 ? itm.DetailId : DetailId,\r\n RCState: OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? itm.RateCenterState : 'US',\r\n RCName: OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? itm.RateCenterName : 'Toll Free',\r\n LineFirstName: itm.LineFirstName,\r\n LineLastName: itm.LineLastName,\r\n CNAM: itm.CNAM,\r\n Extension: itm.Extension,\r\n ListingType: itm.ListingType,\r\n ListingName: itm.ListingName,\r\n OmitAddress: itm.OmitAddress,\r\n LineEmail: itm.LineEmail,\r\n TerminatingNumber: itm.TerminatingNumber,\r\n TerminatingNumbersList: OrderItem.TerminatingNumbersList,//need to check to make sure the item is in the list\r\n InventoryTN: itm.InventoryTN ? itm.InventoryTN : itm.ServiceNumber,\r\n //InventoryTNList: OrderItem.InventoryTNList,//need to check to make sure the item selected is in the list\r\n AccessCode: itm.AccessCode,\r\n IPTrunkGroupID: OrderItem.PartNum === 'IP100' ? (trunkItem && trunkItem.IPTrunkGroupID ? trunkItem.IPTrunkGroupID : '') : '',\r\n IPTrunkConfigId: trunkItem ? (trunkItem.IPTrunkConfigId || 0) : 0,\r\n TrunkId: (itm.ParentDetailId || itm.IPTrunkGroupCustomerProductId || 0),\r\n IPTrunkGroupCustomerProductId: (itm.IPTrunkGroupCustomerProductId || 0),\r\n ParentDetailId: (itm.ParentDetailId || 0),\r\n IPAddress1: trunkItem ? (trunkItem.IPAddress1 || '') : '',\r\n IPAddress2: trunkItem ? (trunkItem.IPAddress2 || '') : '',\r\n IPAddress3: trunkItem ? (trunkItem.IPAddress3 || '') : '',\r\n IPAddress4: trunkItem ? (trunkItem.IPAddress4 || '') : '',\r\n IPAddress5: trunkItem ? (trunkItem.IPAddress5 || '') : '',\r\n IPAddress6: trunkItem ? (trunkItem.IPAddress6 || '') : '',\r\n IPAddress7: trunkItem ? (trunkItem.IPAddress7 || '') : '',\r\n IPAddress8: trunkItem ? (trunkItem.IPAddress8 || '') : '',\r\n IPAddress9: trunkItem ? (trunkItem.IPAddress9 || '') : '',\r\n IPAddress10: trunkItem ? (trunkItem.IPAddress10 || '') : '',\r\n IPAddress11: trunkItem ? (trunkItem.IPAddress11 || '') : '',\r\n IPAddress12: trunkItem ? (trunkItem.IPAddress12 || '') : '',\r\n TrunkDescription: trunkItem ? (trunkItem.Description || '') : '',\r\n AssociatedTrunkDescription: trunkLabel,\r\n StartDate: trunkItem ? (trunkItem.StartDate || '') : '',\r\n CNAMDelivery: trunkItem ? (trunkItem.CNAMDelivery || false) : false,\r\n AllowInternational: trunkItem ? (trunkItem.AllowInternational || false) : false,\r\n TechPrefix: trunkItem ? (trunkItem.TechPrefix || '') : '',\r\n GroupPolicy: trunkItem ? (trunkItem.GroupPolicy || '') : '',\r\n ServiceStatus: trunkItem ? (trunkItem.ServiceStatus || '') : '',\r\n RCStateOptions: OrderItem.RCStateOptions && OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? OrderItem.RCStateOptions : OrderItem.CatalogTicker === 'MTRTADNTFA' || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? getTollFreeStateOption() : [],\r\n RateCenterOptions: OrderItem.RateCenterOptions && OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? OrderItem.RateCenterOptions : OrderItem.CatalogTicker === 'MTRTADNTFA' || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? getTollFreeCenterOption() : [],\r\n ErrorMessage: itm.ErrorMessage ? itm.ErrorMessage : '',\r\n Has911: itm.Has911 && itm.Has911 === true ? true : false,\r\n address: GetE911AddressObject(itm, AddressItems, ValidateTN),\r\n Description: itm.Description,\r\n Temp911AddressId: itm.Temp911AddressId\r\n // HasChanges: false\r\n }\r\n if (newEntry.RCState === OrderItem.DefaultRCState && OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA') {\r\n newEntry.RateCenterOptions = OrderItem.DefaultRateCenterOptions;\r\n } //no idea what to do if not default state? \r\n if (newEntry.TerminatingNumbersList.indexOf(newEntry.TerminatingNumber) === -1) {\r\n newEntry.TerminatingNumbersList.unshift(newEntry.TerminatingNumber);\r\n }\r\n // if (newEntry.InventoryTNList.indexOf(newEntry.InventoryTN) === -1) {\r\n // newEntry.InventoryTNList.unshift(newEntry.InventoryTN);\r\n // }\r\n\r\n newArray.push(newEntry);\r\n iCount++;\r\n });\r\n }\r\n if (configDetailsArray) {\r\n while (newArray.length < newCount) {\r\n \r\n //let IPTrunkGroupID = 'New Trunk Group ' + newArray.length;\r\n\r\n let NewConfigItem = {\r\n ItemNumber: newArray.length + 1,\r\n LineItemId: OrderItem.LineItemId,\r\n DetailId: DetailId ? DetailId : 0,\r\n RCState: OrderItem.CatalogTicker === \"MTRTADNTFA\" || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? \"US\" : OrderItem.DefaultRCState,\r\n RCName: OrderItem.CatalogTicker === \"MTRTADNTFA\" || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? \"Toll Free\" : OrderItem.DefaultRCName,\r\n LineFirstName: \"\",\r\n LineLastName: \"\",\r\n CatalogItemId: OrderItem.CatalogItemId,\r\n CNAM: '',\r\n Extension: '',\r\n ListingType: '4',\r\n ListingName: '',\r\n OmitAddress: 0,\r\n TerminatingNumber: '',\r\n TerminatingNumbersList: OrderItem.TerminatingNumbersList,//need to check to make sure the item is in the list\r\n InventoryTN: '',\r\n //InventoryTNList: OrderItem.InventoryTNList,//need to check to make sure the item selected is in the list\r\n AccessCode: '',\r\n IPTrunkGroupID: '',\r\n IPTrunkConfigId: '',\r\n TrunkId: 0,\r\n IPTrunkGroupCustomerProductId: 0,\r\n ParentDetailId: 0,\r\n IPAddress1: '',\r\n IPAddress2: '',\r\n IPAddress3: '',\r\n IPAddress4: '',\r\n IPAddress5: '',\r\n IPAddress6: '',\r\n IPAddress7: '',\r\n IPAddress8: '',\r\n IPAddress9: '',\r\n IPAddress10: '',\r\n IPAddress11: '',\r\n IPAddress12: '',\r\n TrunkDescription: '',\r\n StartDate: '',\r\n CNAMDelivery: false,\r\n AllowInternational: false,\r\n TechPrefix: '',\r\n GroupPolicy: OrderItem.PartNum === 'IP100' ? 'round_robin' : '',\r\n ServiceStatus: OrderItem.PartNum === 'IP100' ? 'inservice' : '',\r\n RCStateOptions: OrderItem.RCStateOptions && OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? OrderItem.RCStateOptions : OrderItem.CatalogTicker === 'MTRTADNTFA' || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? getTollFreeStateOption() : [],\r\n RateCenterOptions: OrderItem.DefaultRateCenterOptions && OrderItem.CatalogTicker !== \"MTRTADNTFA\" && OrderItem.CatalogTicker !== 'MTRTIPPTFA' ? OrderItem.DefaultRateCenterOptions : OrderItem.CatalogTicker == 'MTRTADNTFA' || OrderItem.CatalogTicker === 'MTRTIPPTFA' ? getTollFreeCenterOption() : [],\r\n ErrorMessage: DetailId && DetailId > 0 ? '' : 'Entry incomplete',\r\n address: GetBlankE911AddressObject(ValidateTN),\r\n Temp911AddressId: 0\r\n };\r\n\r\n newArray.push(NewConfigItem);\r\n }\r\n }\r\n return newArray;\r\n}\r\nexport const GetBlankE911AddressObject = (ValidateTN = true) => {\r\n return {\r\n AddressId: 0,\r\n IsActive: false,\r\n Building: helper.ValueOfBuildingTag,\r\n StreetNumber: '',\r\n Street2: '',\r\n Street1: '',\r\n StreetSuffix: '',\r\n PostDirectional: '',\r\n PreDirectional: '',\r\n StreetName: '',\r\n ZipCode: '',\r\n State: '',\r\n City: '',\r\n BuildingValue: '',\r\n FloorValue: '',\r\n Unit: '',\r\n UnitValue: '',\r\n PhoneNumber: '',\r\n ValidateTN: ValidateTN,\r\n ErrorMessage: ''\r\n }\r\n}\r\nconst GetE911AddressObject = (DetailItem, AddressItems) => {\r\n let addressItem = AddressItems.filter(resp => resp.AddressId === DetailItem.Temp911AddressId);\r\n if (addressItem && addressItem.length > 0) {\r\n return addressItem[0];\r\n } else return GetBlankE911AddressObject();\r\n}\r\n\r\nexport const ErrorMessageDisplayItem = (msg) => {\r\n return (\r\n \r\n
\r\n \r\n {props.statusMessage}\r\n
\r\n \r\n props.parentCallBack()}>OK\r\n
\r\n ![\"\"]({require(\"../../../images/warn-icon.png\")}){kind=icon}
\n )}\n position={this.props.position || 'bottom center'}\n closeOnDocumentClick\n contentStyle={{padding: '20px', border: 'unset', height: this.state.popupHeight + 'px', left: \"0\"}}\n >\n {validationMessage}\n \n )\n }\n\n}\n\nexport default ValidationMessagePopup;","import ValidationMessagePopup from '../components/validationMessagePopup';\r\nimport React, { Component } from 'react';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\n\r\nclass ValidationCell extends GridCell {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n if (this.props.dataItem.ValidationMessage && this.props.dataItem.ValidationMessage !== '') {\r\n return (\r\n There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else if (!this.state.loading && this.state.Listings && this.state.Listings.length > 0) {\r\n return (\r\n\r\n
\r\n\r\n \r\n Cancel Order? \r\n \r\n \r\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 BlockTab;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../../../scripts/helper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport _ from 'lodash';\r\nimport MACDSaveStatus from '../modals/orderResultModal';\r\nimport ValidationCell from '../components/validationCell';\r\nimport MACDSearch from '../components/macdSearch';\r\n\r\nexport default class CnamTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isCancelDialogOpen: false,\r\n gridHeight: (window.innerHeight - 200),\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n LocationName: props.LocationName,\r\n loading: false,\r\n saving: false,\r\n error: false,\r\n //ShowStatuses: false,\r\n CnamServices: [],\r\n Listings: [],\r\n OriginalListings: [],\r\n Sort: [{ field: \"ServiceNumber\", dir: \"asc\" }],\r\n ValidationErrorMessages: []\r\n };\r\n this.searchListings = this.searchListings.bind(this);\r\n const updateInputValue = this.updateInputValue.bind(this);\r\n\r\n class CnamInputCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n const productItem = this.props.dataItem;\r\n let ReadOnlyStatus = false;\r\n const value = this.props.dataItem[this.props.field];\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
Are you sure you wish to cancel this order?
There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else if (!this.state.loading && this.state.Listings && this.state.Listings.length > 0) {\r\n return (\r\n\r\n
\r\n\r\n\r\n \r\n Cancel Order? \r\n \r\n \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 React, { Fragment, Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as helper from '../../../scripts/helper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport _ from 'lodash';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport MACDSaveStatus from '../modals/orderResultModal';\r\nimport ValidationCell from '../components/validationCell';\r\nimport MACDSearch from '../components/macdSearch';\r\n\r\nclass ExtensionTab extends Component {\r\n\r\n initialState(props) {\r\n return {\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n LocationName: props.LocationName,\r\n FullListings: [],\r\n Listings: [],\r\n OriginalListings: [],\r\n Sort: [{ field: \"ServiceNumber\", dir: \"asc\" }],\r\n ShowStatuses: false,\r\n IsCancelDialogOpen: false,\r\n loading: true,\r\n gridHeight: (window.innerHeight - 250),\r\n searchInput: '',\r\n validationErrors: false\r\n };\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n const onExtensionChange = this.onExtensionChange.bind(this);\r\n\r\n \r\n\r\n class InputNumericTextCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n const { dataItem } = this.props;\r\n const value = dataItem[this.props.field];\r\n const hasAddons = (dataItem.AddonCount || 0) > 0;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
Are you sure you wish to cancel this order?
There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else {\r\n return (\r\n\r\n
\r\n {macdHelper.locationSelectLabel(this.state.MomentumAccountNumber)}\r\n\r\n \r\n Cancel Order? \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.gridContent()}\r\n \r\n )\r\n }\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default ExtensionTab;\r\n","\r\nimport React, { Component } from 'react';\r\nimport { Grid, GridColumn as Column, GridCellProps, GridCell, GridToolbar, GridDetailRow } from '@progress/kendo-react-grid';\r\nimport InfoPop from './infopop';\r\nclass InfoCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n if (this.props.dataItem[this.props.field] !== '')\r\n return (\r\n \r\n {macdHelper.locationSelectLabel(this.state.MomentumAccountNumber)}\r\n
\r\n
\r\n \r\n
\r\n Are you sure you wish to cancel this order?
\r\n {this.gridContent()}\r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n render() {\r\n let button = ''; \r\n button = (View Pricebook);\r\n \r\n return (\r\n \r\n {button}\r\n \r\n
\r\n \r\n this.getSearchResults(e)} placeholder=\"Search Momentum Products by Part Num or Description\" />\r\n
\r\n \r\n {this.gridContent()}\r\n
There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else {\r\n return (\r\n\r\n
\r\n
\r\n\r\n\r\n\r\n\r\n \r\n Cancel Order? \r\n \r\n \r\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 LineTab;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../../../scripts/helper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport _ from 'lodash';\r\nimport MACDSaveStatus from '../modals/orderResultModal';\r\nimport ValidationCell from '../components/validationCell';\r\nimport MACDSearch from '../components/macdSearch';\r\n\r\nclass ListingTab extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isCancelDialogOpen: false,\r\n gridHeight: props.GridHeight,\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n LocationName: props.LocationName,\r\n loading: false,\r\n saving: false,\r\n error: false,\r\n //ShowStatuses: false,\r\n ListingServices: [],\r\n Listings: [],\r\n OriginalListings: [],\r\n Sort: [{ field: \"ServiceNumber\", dir: \"asc\" }],\r\n ValidationErrorMessages: []\r\n };\r\n const updateInputValue = this.updateInputValue.bind(this);\r\n\r\n class InputTextCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n const productItem = this.props.dataItem;\r\n let ReadOnlyStatus = false;\r\n if (this.props.field === \"LineEmail\" && this.props.dataItem['EnableLineEmail'] == false) ReadOnlyStatus = true;\r\n if (this.props.field === \"ListingName\" && this.props.dataItem['EnableListingName'] == false) ReadOnlyStatus = true;\r\n if (this.props.field === \"CNAM\" && this.props.dataItem['EnableCNAM'] == false) ReadOnlyStatus = true;\r\n\r\n const value = ReadOnlyStatus === true && productItem.NewLineType !== productItem.PartNum ? \"\" : this.props.dataItem[this.props.field];\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Attention: This order is subject to applicable non-recurring charges.
\r\nThere will be a short loss of service. Devices sharing call appearances will be rebooted after submission. If the automatic reboot fails, you will be required to manually reboot telephone devices.
\r\nIf you are switching from an Executive, Advanced, Basic, or Smart to another Executive, Advanced, Basic, or Smart seat, please use the “Seat Type” tab. There will be no loss of service or need to reboot a device.
\r\nFor any virtual number requests, the terminating TN cannot be a number included in this order. You may need to issue all the virtual number requests in a separate \"Line Type\" service change.
\r\nIf any user level add-ons are assigned to a line, you will need to un-assign user level add-ons first. Please wait to assign user level add-ons to a number until after the service change is completed.
\r\nPlease check the table to see which lines receive listings and 911:
\r\n| Listings | \r\n911 | \r\nNeither | \r\n
|---|---|---|
| Auto-Attendants | \r\nAuto-Attendants | \r\nAll Other Lines | \r\n
| Executive | \r\nExecutive | \r\n\r\n |
| Advanced | \r\nAdvanced | \r\n\r\n |
| Basic | \r\nBasic | \r\n\r\n |
| Hunt Groups | \r\nHunt Groups | \r\n\r\n |
| Contact Center Queues | \r\nContact Center Queues | \r\n\r\n |
| Smart Numbers | \r\n\r\n | \r\n |
| E911 DID's | \r\n\r\n | \r\n |
| DID's | \r\n\r\n | \r\n |
| Virtual Numbers | \r\n\r\n | \r\n |
\r\n
\r\n
\r\n \r\n
\r\n \r\n\r\n\r\n\r\n
Are you sure you wish to cancel this order?
There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else if (!this.state.loading && this.state.Listings && this.state.Listings.length > 0) {\r\n return (\r\n\r\n
\r\n\r\n\r\n \r\n Cancel Order? \r\n \r\n \r\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 ListingTab;\r\n","import React, { Component } from 'react';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport { DataLoadingSpinner } from '../components/spinners'\r\n\r\nexport class SavingMessageControlE911 extends Component {\r\n render() {\r\n let successMessage = \"\";\r\n if(this.props.showSuccess){\r\n successMessage = (\r\n
\r\n \r\n
\r\n \r\n\r\n
Are you sure you wish to cancel this order?
{this.props.SuccessMessage}
\r\n )\r\n }\r\n \r\n let loadingMessage = \"\";\r\n if(this.props.showLoading){\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n \r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n \r\n};","import React, { Component } from 'react';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { fetchData, post } from '../requests/api_calls';\r\nimport * as config from '../requests/config';\r\nimport * as helper from '../scripts/helper';\r\nimport { SavingMessageControlE911 } from './SavingMessageControlE911';\r\n\r\nconst BuildingValue= \"BuildingValue\",\r\n City= \"City\",\r\n FloorValue= \"FloorValue\",\r\n State= \"State\",\r\n Unit= \"Unit\",\r\n UnitValue= \"UnitValue\",\r\n ZipCode= \"ZipCode\",\r\n StreetName= \"StreetName\",\r\n StreetNumber = \"StreetNumber\",\r\n HouseNumber= \"HouseNumber\",\r\n PostDirectional= \"PostDirectional\",\r\n PreDirectional= \"PreDirectional\",\r\n StreetType=\"StreetType\",\r\n StreetSuffix= \"StreetSuffix\",\r\n Street1= \"Street1\",\r\n Street2= \"Street2\",\r\n PhoneNumber= \"PhoneNumber\";\r\n\r\n\r\nexport default class AddressFormE911 extends Component {\r\n initialState = (props) => {\r\n let originalAddress = props.address;\r\n let addressEntry = {\r\n AddressId: originalAddress.AddressId,\r\n CustomerProductId: originalAddress.CustomerProductId,\r\n StreetNumber: originalAddress.StreetNumber,\r\n PreDirectional: originalAddress.PreDirectional,\r\n StreetName: originalAddress.StreetName,\r\n StreetSuffix: originalAddress.StreetSuffix,\r\n City: originalAddress.City,\r\n State: originalAddress.State,\r\n ZipCode: originalAddress.ZipCode,\r\n Street1: originalAddress.Street1,\r\n Street2: originalAddress.Street2,\r\n Unit: originalAddress.Unit,\r\n UnitValue: originalAddress.UnitValue,\r\n FloorValue: originalAddress.FloorValue,\r\n BuildingValue: originalAddress.BuildingValue,\r\n IsActive: originalAddress.IsActive\r\n };\r\n return {\r\n parentList: props.parentList ? props.parentList : null,\r\n index: props.parentIndex ? props.parentIndex : null,\r\n originalAddress: props.address,\r\n addressEntry: addressEntry,\r\n validateInComponent: props.validateInComponent === true ? true : false,\r\n validateTN: props.validateInComponent === true && props.validateTN === true ? true : false,\r\n displayTopMessage: props.displayTopMessage === true ? true : false,\r\n TopMessage: props.TopMessage ? props.TopMessage: '',\r\n PhoneNumber: props.PhoneNumber,\r\n savingShowError: props.address.ValidationMessage === undefined || props.address.ValidationMessage === '' ? false : true,\r\n savingShowSuccess: false,\r\n savingLoading: false,\r\n savingErrorMessage: props.address.ValidationMessage === undefined || props.address.ValidationMessage === '' ? '' : props.address.ValidationMessage,\r\n CustomerId: props.CustomerId ? props.CustomerId : 0,\r\n ReadOnly: props.ReadOnly === undefined || !props.ReadOnly ? false : props.ReadOnly,\r\n apiPath: props.apiPath\r\n };\r\n }\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n this.saveInList = this.saveInList.bind(this);\r\n this.handleToggleEditList911 = this.handleToggleEditList911.bind(this);\r\n this.IsBlankAddress = this.IsBlankAddress.bind(this);\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n if (props.address != this.state.addressEntry) {\r\n let updatedEntry = props.address;\r\n this.setState({\r\n addressEntry: updatedEntry,\r\n savingErrorMessage: props.address.ValidationMessage\r\n });\r\n }\r\n }\r\n\r\n handleOnChange=(fieldName, event)=>{\r\n let state = {...this.state};\r\n let address = state.addressEntry;\r\n\r\n address[fieldName] = event.target.value;\r\n \r\n address.Street1 = helper.CreateFullStreet1(address);\r\n address.Street2 = helper.CreateFullStreet2(address);\r\n\r\n if (state.parentList) {\r\n let index = this.state.index;\r\n state.parentList[index] = address;\r\n } \r\n state.addressEntry = address;\r\n this.setState(state);\r\n } \r\n\r\n saveInList = async() => {\r\n //validate address\r\n if (this.state.validateInComponent) {\r\n this.setState({\r\n savingLoading: true\r\n });\r\n let addressObject = this.GetAddressObject(this.state.addressEntry, this.state.PhoneNumber);\r\n addressObject.Building = helper.ValueOfBuildingTag;\r\n \r\n if (!this.IsBlankAddress(addressObject)) { \r\n let response = await post(this.state.apiPath, 'POST', JSON.stringify(addressObject));\r\n this.props.UpdateEntry((response.ok === true), (response.ok === true ? JSON.parse(response.message).AddressId : 0), this.state.addressEntry, (response.ok === true ? JSON.parse(response.message).ErrorMessage : 'Address was not saved successfully. Please review your entry'));\r\n if (response.ok === true) {\r\n this.setState({savingErrorMessage: '', savingShowSuccess: true, showError: false, savingLoading: false});\r\n } else {\r\n this.setState({\r\n savingShowSuccess: false,\r\n savingShowError: true,\r\n showError: true,\r\n ErrorMessage: 'Address was not saved successfully. Please review your entry.',\r\n savingLoading: false\r\n });\r\n }\r\n } else {\r\n this.props.UpdateEntry(true, 0, this.state.addressEntry, '');\r\n this.setState({savingLoading: false, ErrorMessage: '', showError: false, savingShowSuccess: false, savingShowError: false});\r\n }\r\n } else {\r\n this.props.UpdateEntry(true, this.state.addressEntry);\r\n }\r\n }\r\n\r\n IsBlankAddress = (addressEntry) => {\r\n if (addressEntry && helper.CreateFullStreet1(addressEntry) === '' && helper.CreateFullStreet1(addressEntry) === '' && addressEntry.City === '' && addressEntry.State === '' && addressEntry.ZipCode === '')\r\n return true;\r\n else \r\n return false;\r\n }\r\n\r\n GetAddressObject = (addressEntry, PhoneNumber) => {\r\n return {\r\n AddressId: addressEntry.AddressId,\r\n IsActive: false,\r\n Building: addressEntry.Building,\r\n StreetNumber: addressEntry.StreetNumber,\r\n Street2: helper.CreateFullStreet2(addressEntry),\r\n Street1: helper.CreateFullStreet1(addressEntry),\r\n StreetSuffix: addressEntry.StreetSuffix,\r\n PostDirectional: addressEntry.PostDirectional === undefined ? '' : addressEntry.PostDirectional,\r\n PreDirectional: addressEntry.PreDirectional === undefined ? '' : addressEntry.PreDirectional,\r\n StreetName: addressEntry.StreetName,\r\n ZipCode: addressEntry.ZipCode,\r\n State: addressEntry.State,\r\n City: addressEntry.City,\r\n BuildingValue: addressEntry.BuildingValue,\r\n FloorValue: addressEntry.FloorValue,\r\n Unit: addressEntry.Unit,\r\n UnitValue: addressEntry.UnitValue,\r\n PhoneNumber: PhoneNumber\r\n };\r\n }\r\n\r\n handleToggleEditList911 = () => {\r\n //this.props.ToggleEditList\r\n let originalAddress = this.stateoriginalAddress;\r\n this.setState({address: originalAddress});\r\n if (this.props.ToggleEditList) {\r\n this.props.ToggleEditList();\r\n }\r\n }\r\n\r\n ClearAddress = () => {\r\n if (this.state.ReadOnly === false)\r\n {\r\n let clearAddress = {\r\n AddressId: 0,\r\n IsActive: false,\r\n Building: '',\r\n StreetNumber: '',\r\n Street2: '',\r\n Street1: '',\r\n StreetSuffix: '',\r\n PostDirectional: '',\r\n PreDirectional: '',\r\n StreetName: '',\r\n ZipCode: '',\r\n State: '',\r\n City: '',\r\n BuildingValue: '',\r\n FloorValue: '',\r\n Unit: '',\r\n UnitValue: '',\r\n PhoneNumber: this.state.PhoneNumber\r\n };\r\n this.setState({addressEntry: clearAddress});\r\n }\r\n }\r\n\r\n ResetToDefaultAddress = () => {\r\n let state = this.state;\r\n //this.setState({addressEntry: state.originalAddress });\r\n }\r\n\r\n render() {\r\n let e911Address = this.state.addressEntry;\r\n let saveElement = \"\";\r\n let closeElement = \"\";\r\n if (e911Address === null || e911Address === undefined)\r\n return null;\r\n \r\n if (this.state.ReadOnly === false)\r\n saveElement = (); \r\n\r\n closeElement = ();\r\n \r\n return (\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n {this.state.TopMessage}
\r\n\r\n { this.ClearAddress()}} className=\"no-btn\">Reset\r\n {/* Reset to Primary Address */}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(StreetNumber, x) }} />\r\n
\r\n \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.handleOnChange(StreetName, x) }}/>\r\n
\r\n \r\n {/*
\r\n \r\n \r\n { this.handleOnChange(indexInArray, StreetName, type, x) }}/>\r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\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.handleOnChange(UnitValue, x) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(FloorValue, x) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(BuildingValue, x) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { this.handleOnChange(City, x) }}\r\n />\r\n
\r\n \r\n
\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.handleOnChange(ZipCode, x) }}\r\n />\r\n
\r\n \r\n
\r\n {saveElement}\r\n {closeElement}\r\n
\r\n {address2}
{address3})\r\n else if (address1 !== '' && address3 !== ', ')\r\n addressDisplay = ({address1}
{address3})\r\n else if (address1 !== '' && address2 !== '')\r\n addressDisplay = ({address1}
{address2})\r\n else if (address2 !== '' && address3 !== ', ')\r\n addressDisplay = ({address2}
{address3})\r\n else if (address1 !== '')\r\n addressDisplay = ({address1});\r\n else if (address2 !== '')\r\n addressDisplay = ({address2});\r\n else if (address3 !== ', ')\r\n addressDisplay = ({address3});\r\n else\r\n addressDisplay = (Click to add an E911 Address)\r\n }\r\n return (\r\n
There are no applicable changes available for the seats on this location. Please review your search criteria. Note that some changes may be available only under “Line Type”.
\r\n else if (!this.state.loading && this.state.Listings && this.state.Listings.length > 0) {\r\n let e911Width = '0px';\r\n let serviceNumberWidth = '320px'\r\n if (this.state.showE911Column) {\r\n e911Width = '200px';\r\n serviceNumberWidth = '150px'\r\n }\r\n \r\n return (\r\n\r\n
\r\n\r\n \r\n Update E911 Address \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Cancel Order? \r\n \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 React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../../../scripts/helper';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport { AutoComplete } from '@progress/kendo-dropdowns-react-wrapper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport MACDSaveStatus from '../modals/orderResultModal';\r\nimport ValidationCell from '../components/validationCell';\r\nimport MACDSearch from '../components/macdSearch';\r\n\r\nexport default class VirtualTab extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isCancelDialogOpen: false,\r\n gridHeight: props.GridHeight,\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n LocationName: props.LocationName,\r\n VirtualTermServices: [],\r\n OriginalListings: [],\r\n Listings: [],\r\n loading: false,\r\n saving: false,\r\n error: false,\r\n Sort: [{ field: \"ServiceNumber\", dir: \"asc\" }],\r\n ValidationErrorMessages: []\r\n };\r\n\r\n const updateTerminatingNumber = this.updateTerminatingNumber.bind(this);\r\n\r\n class AutoCompleteCell extends GridCell {\r\n render() {\r\n if (this.props.field === \"TerminatingNumber\") {\r\n let termArray = this.props.dataItem.TermNumberList ? this.props.dataItem.TermNumberList : [];\r\n const value = this.props.dataItem[this.props.field];\r\n const productItem = this.props.dataItem;\r\n const enableVal = productItem.EditTermNumber;\r\n let autoCompleteDOM = (\r\n \r\n
\r\n \r\n
\r\n \r\n
Are you sure you wish to cancel this order?
There are no applicable changes available for services at this location. Please review your search criteria.
\r\n else if (!this.state.loading && this.state.Listings && this.state.Listings.length > 0) {\r\n return (\r\n\r\n
\r\n\r\n \r\n Cancel Order? \r\n \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 React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport * as helper from '../../../scripts/helper';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport WrappedCell from '../../../components/wordWrappedCell';\r\n\r\nclass MacdOrder extends Component {\r\n initialState(props) {\r\n return {\r\n OrderId: props.OrderId,\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n MacdType: props.MacdType,\r\n Listings: [],\r\n ColumnConfig: {\r\n ShowServiceID: false,\r\n ShowLineName: false,\r\n ShowPrimaryExtension: false,\r\n ShowSeatType: false,\r\n ShowLineType: false,\r\n ShowListingType: false,\r\n ShowListingName: false,\r\n ShowOmitAddress: false,\r\n ShowAccessCode: false,\r\n ShowLineEmail: false,\r\n ShowTerminatingNumber: false,\r\n ShowCNAM: false,\r\n ShowBlockType: false,\r\n ShowExtension: false,\r\n ShowAddonPartNum: false,\r\n ShowTrunkID: false,\r\n ShowCallLimitOld: false,\r\n ShowCallLimitNew: false,\r\n ShowNewProduct: false,\r\n ShowE911Address: false,\r\n WindowWidth: '600px'\r\n },\r\n sort: [{ field: \"Product\", dir: \"desc\" }],\r\n fullListings: [],\r\n showModal: false,\r\n loading: true\r\n };\r\n }\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n this.fetchOrderDetails = this.fetchOrderDetails.bind(this);\r\n this.getColumnConfig = this.getColumnConfig.bind(this);\r\n this.handleShow = this.handleShow.bind(this);\r\n this.sortChange = this.sortChange.bind(this);\r\n\r\n class BlockTypeCell extends GridCell {\r\n render() {\r\n let blockObject = macdHelper.GetUIBlockObject(this.props.dataItem.Block);\r\n const blockDirectoryAssist = blockObject.Directory;\r\n const blockOperatorAssist = blockObject.Operator;\r\n const blockInternational = blockObject.International;\r\n const blockLongDistance = blockObject.DomesticLD;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
Are you sure you wish to cancel this order?
\r\n \r\n {this.state.ColumnConfig.ShowTrunkID ? \r\n
\r\n\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n let button = '';\r\n button = ( this.handleShow()} >View);\r\n let classNames = \"macd-order-details \" + this.state.ColumnConfig.ModalClass;\r\n return (\r\n \r\n {button}\r\n \r\n {this.gridContent()}\r\n \r\n \r\n {this.state.ConfirmationTitle} \r\n \r\n \r\n \r\n \r\n \r\n {this.state.showOk ? :\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\nconst MacdOrderListingsWithRouter = withRouter(MacdOrderListings)\r\nexport default MacdOrderListingsWithRouter;","import React, { Component } from 'react';\r\nimport MacdOrderListingsWithRouter from './../components/order_listings'\r\n\r\n\r\nclass OpenReqTab extends Component { \r\n\r\n constructor(props) {\r\n super(props); \r\n this.state = {MomentumAccountNumber: props.MomentumAccountNumber, gridHeight: props.GridHeight};\r\n }\r\n componentDidMount() {\r\n \r\n }\r\n componentWillReceiveProps(props) {\r\n this.setState({ MomentumAccountNumber: props.MomentumAccountNumber, gridHeight: props.GridHeight })\r\n }\r\n\r\n // getMACDListings = (filter) => filterBy(this.setGridData(), filter);\r\n\r\n render() {\r\n return (\r\n {this.state.ConfirmationMessage}
\r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\nexport default OpenReqTab;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../../../scripts/helper';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport MACDSaveStatus from '../modals/orderResultModal';\r\nimport ValidationCell from '../components/validationCell';\r\nimport MACDSearch from '../components/macdSearch';\r\n\r\nexport default class IpTrunkTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Listings: [],\r\n FullListings: [],\r\n OriginalListings: [],\r\n NewPlanList: [],\r\n loading: false,\r\n saving: false,\r\n gridHeight: props.GridHeight,\r\n MomentumAccountNumber: props.MomentumAccountNumber,\r\n LocationName: props.LocationName,\r\n isCancelDialogOpen: false,\r\n ValidationErrorMessages: [],\r\n Sort: [{ field: \"TrunkGroupID\", dir: \"asc\" }],\r\n }\r\n const updateInputValue = this.updateInputValue.bind(this);\r\n const getNewPlanList = this.getNewPlanList.bind(this);\r\n\r\n class inputCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n const item = this.props.dataItem;\r\n const field = this.props.field;\r\n let err = '';\r\n if (field === 'NewQuantity' && item[field] != '' && ((parseInt(item[field]) === item['Quantity']) || isNaN(parseInt(item[field])) === true)) {\r\n err = 'err';\r\n }\r\n return (\r\n There are no applicable changes available for services at this location. Please review your search criteria.
\r\n if (this.state.Listings && this.state.Listings.length > 0) {\r\n let columnWidth = '200px';\r\n let columnWidth2 = '150px';\r\n return (\r\n\r\n
\r\n\r\n\r\n \r\n Cancel Order? \r\n \r\n \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 React, { Component } from 'react';\r\nimport BlockTab from './tabs/blockTab'\r\nimport CnamTab from './tabs/cnamTab';\r\nimport ExtensionTab from './tabs/extensionTab';\r\nimport LineTab from './tabs/lineTab';\r\nimport ListingTab from './tabs/listingTab';\r\nimport SeatTab from './tabs/seatTab';\r\nimport VirtualTab from './tabs/virtualTab';\r\nimport OpenRequestTab from './tabs/openReqTab';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as settings from '../../scripts/settings';\r\nimport * as macdHelper from './components/macd_helper';\r\nimport * as helper from '../../scripts/helper';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport IpTrunkTab from './tabs/ipTrunkTab';\r\n\r\nclass Macd extends Component {\r\n\r\n \r\n constructor(props) {\r\n super(props);\r\n let tab = this.parseViewFilter(props);\r\n this.state = {\r\n tab: tab ? tab : macdHelper.MACDTABS.OpenRequests,\r\n MomentumAccountNumber: \"\",\r\n LocationName: \"\",\r\n locations: [],\r\n locationOptions: [],\r\n tabHasChanges: false\r\n };\r\n\r\n this.getTab = this.getTab.bind(this);\r\n this.changeTab = this.changeTab.bind(this);\r\n this.changeLocation = this.changeLocation.bind(this);\r\n this.fetchLocations = this.fetchLocations.bind(this);\r\n this.LoadAddServices = this.LoadAddServices.bind(this);\r\n this.LoadUserAddOn = this.LoadUserAddOn.bind(this);\r\n this.LoadAllSearch = this.LoadAllSearch.bind(this);\r\n this.getTabDisplay = this.getTabDisplay.bind(this);\r\n this.DisplayCancelOrderConfirmationTab = this.DisplayCancelOrderConfirmationTab.bind(this);\r\n this.handleTabEdit = this.handleTabEdit.bind(this);\r\n this.closeCancelConfirmationDialog = this.closeCancelConfirmationDialog.bind(this);\r\n };\r\n\r\n parseViewFilter = (props) => {\r\n let tab = macdHelper.MACDTABS.OpenRequests;\r\n if (props.match.params && props.match.params.tabName) {\r\n tab = props.match.params.tabName;\r\n };\r\n return tab;\r\n }\r\n\r\n handleResize = async () => {\r\n await this.setState({\r\n gridHeight: (window.innerHeight - 350)\r\n });\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('resize', this.handleResize)\r\n }\r\n\r\n componentDidMount() {\r\n let obj = sessionStorage.getItem('MacdPerms');\r\n if (obj.indexOf(1) < 0) {\r\n this.props.history.push(helper.homePageUrl());\r\n return;\r\n }\r\n this.fetchLocations();\r\n this.handleResize();\r\n window.addEventListener('resize', this.handleResize)\r\n }\r\n\r\n componentWillReceiveProps(props) {\r\n let tab = this.state.tab;\r\n if (props.location.pathname === '/macd')\r\n {\r\n //set Open Requests as the open tab AZDO: 1467\r\n if (!this.state.tabHasChanges)\r\n tab = macdHelper.MACDTABS.OpenRequests;\r\n else\r\n { \r\n this.DisplayCancelOrderConfirmationTab(macdHelper.MACDTABS.OpenRequests);\r\n }\r\n }\r\n this.setState({tab: tab});\r\n }\r\n\r\n handleTabEdit = (val) => {\r\n this.setState({ tabHasChanges: val });\r\n }\r\n\r\n changeTab(event) {\r\n if (event.target.dataset.act !== this.state.tab) {\r\n if (!this.state.tabHasChanges) {\r\n this.setState({ tab: event.target.dataset.act, tabHasChanges: false });\r\n } else {\r\n this.DisplayCancelOrderConfirmationTab(event.target.dataset.act);\r\n }\r\n }\r\n }\r\n\r\n DisplayCancelOrderConfirmationTab = (tab) => {\r\n this.setState({ isCancelConfirmOpen: true, tmpTab: tab });\r\n }\r\n\r\n apiLocationsPathWithParams = () => {\r\n let path = 'admin/Locations';\r\n return path;\r\n }\r\n\r\n fetchLocations = async (apiPath = null) => {\r\n if (!apiPath) apiPath = this.apiLocationsPathWithParams();\r\n await this.setState({ loadingLocations: true });\r\n apiCalls.fetchData(apiPath).then((data) => {\r\n if (data !== null) {\r\n let accountNumber = '';\r\n let locationName = '';\r\n let locationOptions = data.map((location, index) => {\r\n return (this.locationOption(location, index));\r\n });\r\n if (locationOptions.length > 1) {\r\n locationOptions.unshift(\r\n this.locationOption({ LocationAccountNumber: '', LocationName: 'All Locations' }, '')\r\n );\r\n if (sessionStorage.LocNum && sessionStorage.LocNum !== '') {\r\n let filteredLocName = data.filter(res => res.LocationAccountNumber === sessionStorage.LocNum)[0].LocationName;\r\n locationName = filteredLocName;\r\n accountNumber = sessionStorage.LocNum;\r\n }\r\n } else {\r\n accountNumber = data[0].LocationAccountNumber;\r\n locationName = data[0].LocationName;\r\n sessionStorage.setItem('LocNum', data[0].LocationAccountNumber);\r\n }\r\n this.setState({ locationOptions: locationOptions, loading: false, MomentumAccountNumber: accountNumber, LocationName: locationName });\r\n } else if (data === null) {\r\n this.setState({ locations: [], loadingLocations: false, resultsMsg: settings.noResultsMsg });\r\n };\r\n });\r\n }\r\n locationOption = (location, index) => {\r\n return (\r\n \r\n )\r\n }\r\n\r\n changeLocation = (event) => {\r\n let getLocationName = (acctNum) => {\r\n return this.state.locationOptions.map(itm => itm.props).filter(res => {\r\n if (acctNum === res.value) return res;\r\n })[0].children;\r\n }\r\n let LocNum = event.target.value;\r\n if (LocNum && LocNum !== '') {\r\n sessionStorage.setItem('LocNum', LocNum);\r\n } else {\r\n sessionStorage.removeItem('LocNum');\r\n }\r\n if (!this.state.tabHasChanges) {\r\n this.setState({\r\n MomentumAccountNumber: LocNum,\r\n LocationName: event.target.selectedOptions ? event.target.selectedOptions[0].text : getLocationName(LocNum)\r\n });\r\n } else {\r\n this.setState({\r\n isCancelConfirmOpen: true,\r\n tmpAccountNumber: LocNum,\r\n tmpLocName: event.target.selectedOptions ? event.target.selectedOptions[0].text : getLocationName(LocNum)\r\n });\r\n }\r\n }\r\n\r\n LoadAddServices = () => {\r\n if (!this.state.tabHasChanges)\r\n this.props.history.push(macdHelper.AddEditPage());\r\n else\r\n this.DisplayCancelOrderConfirmationTab(macdHelper.MACDTABS.AddServices);\r\n }\r\n\r\n LoadUserAddOn = () => {\r\n if (!this.state.tabHasChanges) \r\n this.props.history.push(macdHelper.UserAddOn());\r\n else\r\n this.DisplayCancelOrderConfirmationTab(macdHelper.MACDTABS.AddOns);\r\n }\r\n LoadAllSearch = () => {\r\n if (!this.state.tabHasChanges) \r\n this.props.history.push(macdHelper.AllSearch());\r\n else\r\n this.DisplayCancelOrderConfirmationTab(macdHelper.MACDTABS.AllRequests);\r\n }\r\n\r\n DisplayAddServices = () => {\r\n return macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.AddServices) === 1 ? 'inline-block' : 'none';\r\n }\r\n\r\n DisplayManageAddOns = () => {\r\n return macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.AssignAddOn) === 1 || macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.UnassignAddOn) === 1 ? 'inline-block' : 'none'\r\n }\r\n\r\n getTabDisplay() {\r\n let seatTypeHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeSeatType) === 1 ?\r\n (Seat Type)\r\n : null;\r\n\r\n let cnamHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeCNAM) === 1 ?\r\n (Caller ID [CNAM])\r\n : null;\r\n\r\n let blockHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeBlock) === 1 ?\r\n (Block)\r\n : null;\r\n\r\n let extHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeExtension) === 1 ?\r\n (Extension)\r\n : null;\r\n\r\n let lineTypeHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeLineType) === 1 ?\r\n (Line Type)\r\n : null;\r\n\r\n let listingHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeListing) === 1 ?\r\n (Listing)\r\n : null;\r\n\r\n let virtualHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeVirtualTerminatingNumber) === 1 ?\r\n (Virtual Terminating Number\r\n )\r\n : null;\r\n\r\n let ipTrunkHTML = macdHelper.CheckPermissionsForLinks(macdHelper.MACDTYPES.ChangeIPTrunkCpCount) === 1 && sessionStorage.hasIpTrunk === 'true' ?\r\n (IP Trunking Call Path\r\n )\r\n : null;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
Are you sure you wish to cancel this order?
\r\n Open Requests\r\n {seatTypeHTML}\r\n {cnamHTML}\r\n {blockHTML}\r\n {extHTML}\r\n {lineTypeHTML}\r\n {listingHTML}\r\n {virtualHTML}\r\n {ipTrunkHTML}\r\n
\r\n )\r\n }\r\n\r\n CancelConfirmationYesAction = () => {\r\n if (this.state.tmpTab === macdHelper.MACDTABS.AddServices || this.state.tmpTab === macdHelper.MACDTABS.AllRequests || this.state.tmpTab === macdHelper.MACDTABS.AddOns)\r\n {\r\n let page = this.state.tmpTab;\r\n this.setState({\r\n isCancelConfirmOpen: false,\r\n tmpTab: null,\r\n tmpLocName: null,\r\n tmpAccountNumber: null,\r\n tabHasChanges: false\r\n });\r\n if (page === macdHelper.MACDTABS.AddServices)\r\n this.LoadAddServices();\r\n else if (page === macdHelper.MACDTABS.AllRequests)\r\n this.LoadAllSearch();\r\n else\r\n this.LoadUserAddOn();\r\n } else \r\n this.setState({\r\n isCancelConfirmOpen: false,\r\n tab: this.state.tmpTab ? this.state.tmpTab : this.state.tab,\r\n MomentumAccountNumber: this.state.tmpAccountNumber ? this.state.tmpAccountNumber : this.state.MomentumAccountNumber,\r\n LocationName: this.state.tmpLocName ? this.state.tmpLocName : this.state.LocationName,\r\n tmpTab: null,\r\n tmpLocName: null,\r\n tmpAccountNumber: null,\r\n tabHasChanges: false\r\n });\r\n\r\n }\r\n\r\n closeCancelConfirmationDialog = () => {\r\n this.setState({\r\n isCancelConfirmOpen: false,\r\n tmpTab: null,\r\n tmpLocName: null,\r\n tmpAccountNumber: null\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n Cancel Existing Order? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n getTab() {\r\n switch (this.state.tab) {\r\n case macdHelper.MACDTABS.ChangeSeatType:\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Service Changes
\r\n\r\n Add Services\r\n Manage User Add-Ons\r\n
\r\n \r\n
\r\n\r\n {this.getTabDisplay()}\r\n \r\n View All Service Changes\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.getTab()}\r\n
\r\n Continuing this action will cancel existing changes you have made for a new MACD Order. Are you sure you wish to continue and lose all changes?
\r\n
\r\n ) \r\n }\r\n}\r\n\r\nexport default MacdAll;","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from './spinners';\r\n\r\nconst SaveSpinner = (props) => {\r\n if (props.Message) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n All Service Changes
\r\n\r\n
\r\n \r\n
\r\n
\r\n )\r\n } else {\r\n return null;\r\n }\r\n}\r\n\r\nexport default SaveSpinner;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass UploadOrderData extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n {props.Message}\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet doloribus pariatur esse consequuntur saepe, odit, iusto ex optio quibusdam.
\r\n Download Order Template\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Save\r\n \r\n
\r\n {value}
\r\n {address2}
{address3})\r\n else if (address1 !== '' && address3 !== ', ' && address3 !== '')\r\n addressDisplay = ({address1}
{address3})\r\n else if (address1 !== '' && address2 !== '')\r\n addressDisplay = ({address1}
{address2})\r\n else if (address2 !== '' && address3 !== ', ' && address3 !== '')\r\n addressDisplay = ({address2}
{address3})\r\n else if (address1 !== '')\r\n addressDisplay = ({address1});\r\n else if (address2 !== '')\r\n addressDisplay = ({address2});\r\n else if (address3 !== ', ' && address3 !== '')\r\n addressDisplay = ({address3});\r\n else if (!isReadOnly)\r\n addressDisplay = (Click to add an E911 Address)\r\n if (addressDisplay !== '')\r\n {\r\n return (\r\n
\r\n // Error: \r\n // There are currently items associated with the new trunk groups that are going to be removed. Please update trunk group assignments before removing new trunk groups. \r\n //
\r\n // );\r\n // }\r\n // }\r\n\r\n ErrorDisplay = () => {\r\n let htmlContents = null;\r\n let errors = [];\r\n if (this.state.ColumnConfig.ConfigType === 'NOCONFIG') {\r\n htmlContents =this.state.productData.configurationDetails.map((cd) => {\r\n if (cd.ErrorMessage && cd.ErrorMessage !== '')\r\n return macdHelper.ErrorMessageDisplayItem(cd.ErrorMessage);\r\n });\r\n }\r\n if (this.state.productData.ErrorMessage && this.state.productData.ErrorMessage != '') {\r\n if (htmlContents && htmlContents.length > 0) {\r\n htmlContents.push(macdHelper.ErrorMessageDisplayItem(this.state.productData.ErrorMessage));\r\n errors.push(this.state.productData.ErrorMessage);\r\n }\r\n else {\r\n htmlContents = macdHelper.ErrorMessageDisplayItem(this.state.productData.ErrorMessage)\r\n errors.push(this.state.productData.ErrorMessage);\r\n }\r\n }\r\n if (errors && errors.length > 0 && this.state.updating === false)\r\n return (\r\n \r\n
\r\n )\r\n else return null;\r\n } \r\n\r\n gridContent = () => {\r\n if (this.state.loading) {\r\n return Configuration Errors:
\r\n- \r\n {htmlContents}\r\n
\r\n {gridHTML}\r\n
\r\n\r\n )\r\n }\r\n } \r\n\r\n getGrid = () => {\r\n let ColumnConfig = this.state.ColumnConfig;\r\n let dynamicColumn = (field, title, cell, width, editVal, sortable, classTitle = '') => \r\n \r\n \r\n
\r\n )\r\n else return null;\r\n }\r\n\r\n displayTNDetails = () => {\r\n if (this.state.ColumnConfig.ShowLineFirst || this.state.ColumnConfig.ShowLineLast || this.state.ColumnConfig.ShowCNAM)\r\n return (\r\n \r\n
\r\n );\r\n else return null;\r\n }\r\n\r\n handleE911AddressUpdate = (isSuccess, addressId, addressEntry, errorMsg) => {\r\n addressEntry.ErrorMessage = errorMsg;\r\n if (isSuccess) {\r\n this.saveE911Address(addressEntry, addressId, errorMsg);\r\n this.closeE911Modal();\r\n } else {\r\n this.saveE911Address(addressEntry, addressId, errorMsg);\r\n this.setState({e911AddressItem: addressEntry});\r\n }\r\n }\r\n\r\n showE911Modal = (selectedItem) => {\r\n let selectedIndex = _.indexOf(this.state.configurationDetails, selectedItem);\r\n this.setState({showE911Modal: true, e911Index: selectedIndex, e911AddressItem: selectedItem.address});\r\n }\r\n\r\n saveE911Address = (updatedAddress, addressId = 0, errorMsg = '') => {\r\n let addressItem = this.state.e911AddressItem;\r\n let existingItem = this.state.configurationDetails[this.state.e911Index];\r\n\r\n //need to save the line item detail if an address has now been tied to the detail item\r\n let bSave = addressItem.AddressId !== addressId ? true : false;\r\n \r\n let newValidationErrorMessages = this.state.ValidationErrorMessages.slice();\r\n if (existingItem)\r\n {\r\n let idx = _.indexOf(this.state.configurationDetails, existingItem);\r\n let newListings = this.state.configurationDetails.slice();\r\n if (addressItem.ErrorMessage !== '')\r\n {\r\n let idxMessage = _.indexOf(newValidationErrorMessages, addressItem.ErrorMessage);\r\n newValidationErrorMessages.splice(idxMessage,1);\r\n }\r\n updatedAddress.AddressId = addressId;\r\n if (errorMsg !== '')\r\n newValidationErrorMessages.push(errorMsg);\r\n //update displayed grid\r\n newListings[idx].address = updatedAddress;\r\n newListings[idx].Temp911AddressId = updatedAddress.AddressId;\r\n newListings[idx].ErrorMessage = errorMsg;\r\n\r\n if (bSave)\r\n this.SaveLineItemDetail(newListings[idx]);\r\n this.setState({configurationDetails: newListings, ValidationErrorMessages: newValidationErrorMessages});\r\n }\r\n \r\n }\r\n\r\n closeE911Modal = () => {\r\n this.setState({showE911Modal: false, e911AddressItem: {}, e911Index: -1});\r\n }\r\n\r\n render() {\r\n let labelStyle = {\r\n 'fontWeight': 'bold',\r\n 'fontSize': 'small',\r\n 'width': '100px'\r\n }\r\n let quantityStyle = {\r\n 'fontWeight': 'bold',\r\n 'fontSize': 'small',\r\n 'width': '50px'\r\n }\r\n let button = '';\r\n if (this.state.productData.isConfigured === true) {\r\n button = ( Configured);\r\n } else {\r\n button = ();\r\n }\r\n\r\n return (\r\n \r\n {button}\r\n \r\n Note:
\r\n Line First Name and Line Last Name will be the on-net Caller ID name seen for internal calls.\r\n Caller ID [CNAM] is the off-net Caller ID that the Called Party will see for external, off-net outbound calls.\r\n Leaving Caller ID blank will display the name as Unavailable, and only the telephone number will show.\r\n
\r\n
\r\n \r\n Quantity: \r\n { this.delayedUpdate(e.target.value)}} /> {/* this.setState({ tmpQuantity: e.target.value }); }} /> */}\r\n { this.props.RemoveItemFromOrder(this.state.productData.LineItemId) }} className=\"remove\" style={{marginLeft:'10px', display:this.state.ReadOnly && this.state.ReadOnly === true ? 'none' : 'inline'}}>Remove\r\n
\r\n {/*//TBD -> would need a way to save all items at once after applying updates. not in current specs either */}\r\n
*/}\r\n {this.state.TNDefaultDiv}\r\n {/*
*/}\r\n {/* {this.RemoveTrunkGroupErrorMessage()} */}\r\n {this.ErrorDisplay()}\r\n {this.gridContent()}\r\n
\r\n {this.displayTNDetails()}\r\n \r\n {/*//TBD -> would need a way to save all items at once after applying updates. not in current specs either */}\r\n
\r\n \r\n \r\n
\r\n
\r\n {/* Default Rate Center
\r\n| RC State: | \r\n\r\n \r\n | \r\n{ this.SetRCToDefaultByServiceAddress(); }}>Set from Service Address | \r\n
| RC Name/Inventory: | \r\n\r\n \r\n | \r\n{ this.NPANXXLookup(e); }}>NPANXX Lookup | \r\n
| \r\n | \r\n \r\n \r\n \r\n | \r\n
*/}\r\n {this.state.TNDefaultDiv}\r\n {/*
*/}\r\n {/* {this.RemoveTrunkGroupErrorMessage()} */}\r\n {this.ErrorDisplay()}\r\n {this.gridContent()}\r\n
\r\n {this.showActionButtons()}\r\n
\r\n \r\n
\r\n {this.state.ConfirmationMessage}
\r\n
\r\n )\r\n } else {\r\n //CallPathCustomerProductId\r\n let ipTrunks = this.state.IPTrunkGroups;\r\n let newIPTrunks = ipTrunks.slice();\r\n \r\n if (product.PartNum === 'IP101' || product.PartNum === 'IP102' || product.PartNum === 'IP103') {\r\n newIPTrunks = []; //clearing b/c you can't set a call path on an IP Trunk that already has one\r\n let configDetailIds = [];\r\n product.configurationDetails.map((cd) => {\r\n if (cd.ParentDetailId && parseInt(cd.ParentDetailId) > 0)\r\n configDetailIds.push(cd.DetailId);\r\n else if (cd.IPTrunkGroupCustomerProductId && parseInt(cd.IPTrunkGroupCustomerProductId) > 0)\r\n configDetailIds.push(cd.DetailId);\r\n });\r\n //filtering out IP Trunks that have been associated with other call plan types in the order from the modal. \r\n //Also filtering out previously setup IP Trunks whose IP Trunk already has a call path plan.\r\n ipTrunks.map((ipt) => {\r\n if (!ipt.CallPathId || ipt.CallPathId === 0)\r\n newIPTrunks.push(ipt);\r\n else if (_.indexOf(configDetailIds, ipt.CallPathId) > -1 && ipt.IsNew === true)\r\n newIPTrunks.push(ipt);\r\n });\r\n }\r\n let ipTrunkOptions = macdHelper.getIPTrunkGroupOptions(newIPTrunks);\r\n return (\r\n \r\n
\r\n {product.PartDescription} {product.PartNum}
\r\n\r\n Quantity: {product.Quantity}\r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n updateOrderItemFromModal = async (ProductItem, newConfigDetails, arrayIdx, IPTrunkGroups) => {\r\n let OrderDetails = this.state.OrderDetails;\r\n let newTrunkGroups = this.state.IPTrunkGroups.slice();\r\n let newTrunkGroupOptions = this.state.IPTrunkGroupOptions.slice();\r\n if (IPTrunkGroups) {\r\n if (ProductItem.PartNum === 'IP101' || ProductItem.PartNum === 'IP102' || ProductItem.PartNum === 'IP103')\r\n {\r\n let ipTrunks = this.state.IPTrunkGroups.slice();\r\n newConfigDetails.map((cd) => {\r\n //remove the old association\r\n let idx = -1;\r\n let updatedTrunk = ipTrunks.filter(resp => resp.CallPathId === cd.DetailId);\r\n if (updatedTrunk && updatedTrunk.length > 0) { \r\n updatedTrunk = updatedTrunk[0];\r\n idx = _.indexOf(ipTrunks, updatedTrunk);\r\n if (cd.ParentDetailId !== updatedTrunk.ConcatId && idx > -1)\r\n ipTrunks[idx].CallPathId = 0;\r\n }\r\n //update new association\r\n let newTrunk = ipTrunks.filter(resp => parseInt(resp.ConcatId) === parseInt(cd.ParentDetailId) || parseInt(resp.ConcatId) === parseInt(cd.IPTrunkGroupCustomerProductId));\r\n if (newTrunk && newTrunk.length > 0) {\r\n newTrunk = newTrunk[0];\r\n idx = _.indexOf(ipTrunks, newTrunk);\r\n if (cd.ParentDetailId === newTrunk.ConcatId && idx > -1)\r\n ipTrunks[idx].CallPathId = cd.DetailId;\r\n }\r\n });\r\n this.setState({IPTrunkGroups: ipTrunks});\r\n } else {\r\n newTrunkGroupOptions = macdHelper.getIPTrunkGroupOptions(IPTrunkGroups); \r\n newTrunkGroups = IPTrunkGroups;\r\n }\r\n }\r\n\r\n //Quantity Validations\r\n if (ProductItem.Quantity != newConfigDetails.length)\r\n {\r\n let dependencyRules = _.filter(macdHelper.QuantityValidationRules, resp => resp.PartNum === ProductItem.PartNum);\r\n if (dependencyRules !== null && dependencyRules.length === 1)\r\n {\r\n \r\n let otherUSOCs = dependencyRules[0].DependencyList;\r\n let dependentOrderItems = _.filter(OrderDetails, resp => _.indexOf(otherUSOCs, resp.PartNum) > -1);\r\n //Get all other call recording products and validate those\r\n if (dependentOrderItems !== null && dependentOrderItems.length > 0) {\r\n await this.ReviewAndRefreshQuantityDependencies(dependentOrderItems);\r\n return;\r\n }\r\n }\r\n }\r\n\r\n try {\r\n var result = newConfigDetails.filter(obj => {\r\n return obj.DetailId === 0\r\n });\r\n //if any item in config details has a DetailId = 0 then its not configured\r\n if (result && result.length > 0) {\r\n ProductItem.isConfigured = false;\r\n }\r\n } catch (msg) {\r\n console.log(msg);\r\n } \r\n if (arrayIdx === -1 && ProductItem.LineItemId !== 0)\r\n {\r\n let existingLineItem = OrderDetails.filter(resp => resp.LineItemId === ProductItem.LineItemId)[0]\r\n arrayIdx = _.indexOf(OrderDetails, existingLineItem);\r\n }\r\n\r\n OrderDetails[arrayIdx].configurationDetails = newConfigDetails;\r\n OrderDetails[arrayIdx].Quantity = newConfigDetails.length;\r\n OrderDetails[arrayIdx].isConfigured = ProductItem.isConfigured;\r\n\r\n let bShowError = false;\r\n let errorMsg = '';\r\n if (this.state.error) {\r\n OrderDetails.map((itm, idx) => {\r\n if (itm.isConfigured === false) {\r\n bShowError = true;\r\n errorMsg = 'Not all of the selected products are configured. Please configure to Continue!';\r\n }\r\n });\r\n }\r\n\r\n this.setState({ OrderDetails: OrderDetails, IPTrunkGroups: newTrunkGroups, IPTrunkGroupOptions: newTrunkGroupOptions, error: bShowError, resultsMsg: errorMsg });\r\n }\r\n\r\n UpdateTrunkGroups = async(TrunkGroupDetails, DetailId, IsAdd) => {\r\n let existingTrunks = this.state.IPTrunkGroups.slice();\r\n if (IsAdd)\r\n {\r\n let newTrunkEntry = { \r\n IsNew: true, \r\n ConcatId: DetailId, \r\n CustomerProductId: 0, \r\n DetailId: DetailId, \r\n IPTrunkGroupID: TrunkGroupDetails.IPTrunkConfigId, \r\n LineDescription: TrunkGroupDetails.TrunkDescription,\r\n CallPathId: 0\r\n };\r\n\r\n existingTrunks.push(newTrunkEntry);\r\n } else {\r\n let updatedTrunk = existingTrunks.filter(resp => resp.DetailId === DetailId)[0];\r\n let idx = _.indexOf(existingTrunks, updatedTrunk);\r\n existingTrunks[idx].LineDescription = TrunkGroupDetails.TrunkDescription\r\n }\r\n let sort = [{ field: \"LineDescription\", dir: \"asc\" }]\r\n let sortedSet = orderBy(existingTrunks, sort);\r\n let trunkOptions = macdHelper.getIPTrunkGroupOptions(sortedSet);\r\n this.setState({IPTrunkGroupOptions: trunkOptions, IPTrunkGroups: sortedSet});\r\n }\r\n\r\n RemoveTrunkGroups = async(DetailId) => {\r\n let existingTrunks = this.state.IPTrunkGroups.slice();\r\n let trunk = existingTrunks.filter(resp => resp.DetailId === DetailId);\r\n trunk = trunk[0];\r\n this.RemoveTrunkGroupsFromDB(trunk);\r\n existingTrunks = existingTrunks.filter(resp => resp.DetailId !== DetailId);\r\n\r\n let LineItems = this.state.OrderDetails;\r\n LineItems.map((li, idx) => {\r\n let configDetails = li.configurationDetails.slice();\r\n configDetails.map((cd, idxCD) => {\r\n if (cd.ParentDetailId === DetailId) {\r\n cd.ParentDetailId = 0;\r\n cd.IPTrunkGroupCustomerProductId = 0;\r\n cd.TrunkId = 0;\r\n configDetails[idxCD] = cd;\r\n }\r\n });\r\n LineItems[idx].configurationDetails = configDetails;\r\n });\r\n\r\n let sort = [{ field: \"LineDescription\", dir: \"asc\" }]\r\n let sortedSet = orderBy(existingTrunks, sort);\r\n let trunkOptions = macdHelper.getIPTrunkGroupOptions(sortedSet);\r\n this.setState({IPTrunkGroupOptions: trunkOptions, IPTrunkGroups: sortedSet, OrderDetails: LineItems});\r\n }\r\n\r\n RemoveTrunkGroupsFromDB = async(trunk) => {\r\n let apiPath = macdHelper.apiDiscardTrunkItem();\r\n let reqBody = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n DetailId: trunk.DetailId,\r\n IPTrunkConfigId: trunk.IPTrunkGroupID\r\n }\r\n apiCalls.post(apiPath, 'PATCH', JSON.stringify(reqBody)).then((data) => data);//.error((message) => console.error(message));\r\n }\r\n\r\n AreTrunkGroupAssociationsValid = async(IPTrunkGroups, OrderDetails = this.state.OrderDetails) => {\r\n // for (var i = 0; i < OrderDetails.length; i++) {\r\n // for (var j = 0; j < OrderDetails[i].configurationDetails.length; j++) {\r\n // if (OrderDetails[i].configurationDetails[j].IPTrunkConfigId !== 0) {\r\n // let TrunkConfigId = OrderDetails[i].configurationDetails[j].IPTrunkConfigId;\r\n // let test = IPTrunkGroups.filter(resp => resp.IsNew === true && resp.IPTrunkConfigId === OrderDetails[i].configurationDetails[j].IPTrunkConfigId)\r\n // // if (test && test.length > 1)\r\n // // return false;\r\n // }\r\n // }\r\n // }\r\n return true;\r\n }\r\n\r\n ReviewAndRefreshQuantityDependencies = async (dependentOrderItems) =>\r\n {\r\n //dependentOrderItems.map(async (od) => {\r\n this.setState({saving: true});\r\n let pricebook = this.state.pricebookDetails;\r\n for (let i = 0; i < dependentOrderItems.length; i++)\r\n {\r\n let pricebookItem = _.filter(pricebook, resp => resp.CatalogItemId === dependentOrderItems[i].CatalogItemId);\r\n if (pricebookItem && pricebookItem.length > 0)\r\n pricebookItem = pricebookItem[0];\r\n else \r\n continue; \r\n \r\n let apiPath = macdHelper.apiUpdateLineItem();\r\n let dbLineItem = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n LineItemId: dependentOrderItems[i].LineItemId,\r\n CatalogItemId: dependentOrderItems[i].CatalogItemId,\r\n NewCount: dependentOrderItems.Quantity,\r\n NRCAdjustedPrice: pricebookItem.NRCAdjustedPrice ? pricebookItem.NRCAdjustedPrice : pricebookItem.ActivationCharge,\r\n NRCDiscountPercent: pricebookItem.NRCAdjustedPrice ? (1.00) - parseFloat(pricebookItem.NRCAdjustedPrice / pricebookItem.ActivationCharge) : 0.00,\r\n MRCAdjustedPrice: pricebookItem.MRCAdjustedPrice ? pricebookItem.MRCAdjustedPrice : pricebookItem.BasePrice,\r\n MRCDiscountPercent: pricebookItem.MRCAdjustedPrice ? (1.00) - parseFloat(pricebookItem.MRCAdjustedPrice - pricebookItem.BasePrice) : 0.00,\r\n UpdateNeeded: true //no values are changing in the dependent order item so this is used to force an update\r\n }\r\n\r\n let reqBody = JSON.stringify(dbLineItem);\r\n let responseMessage = await apiCalls.post(apiPath, 'PATCH', reqBody).then(resp => resp)\r\n .catch(message => {\r\n // this.setState({\r\n // saving: false,\r\n // error: true,\r\n // loading: false,\r\n // resultsMsg: 'An error occurred. Please check the Open Requests tab and reload your Order!'\r\n // });\r\n });\r\n //});\r\n }\r\n await this.setState({ OrderDetails: [], saving: false });\r\n //need to save those order items\r\n this.RetrieveSavedOrder(this.state.OrderId, false);\r\n }\r\n\r\n\r\n handleCancelClick = (e) => {\r\n let msg = 'Are you sure you wish to discard the order?';\r\n let title = 'Cancel Order?';\r\n this.setState({ isConfirmationDialogOpen: true, ConfirmationMessage: msg, ConfirmationTitle: title });\r\n }\r\n\r\n CancelOrderConfirmation = () => {\r\n if (this.state.OrderId > 0) {\r\n this.setState({\r\n saving: true,\r\n error: false\r\n });\r\n let apiPath = macdHelper.apiDiscardOrder();\r\n apiCalls.post(apiPath, 'PATCH', JSON.stringify(this.state.OrderId)).then(resp => {\r\n if (resp.ok) {\r\n this.setState({\r\n saving: false,\r\n error: false,\r\n OrderId: 0,\r\n OrderDetails: [],\r\n isConfirmationDialogOpen: false,\r\n ConfirmationMessage: '',\r\n ConfirmationTitle: ''\r\n });\r\n }\r\n }).catch(message => {\r\n console.log(message)\r\n this.setState({\r\n saving: false,\r\n error: true,\r\n resultsMsg: 'An error occurred. Your order was not discarded! Refresh the page to review old details.',\r\n isConfirmationDialogOpen: false,\r\n ConfirmationMessage: '',\r\n ConfirmationTitle: ''\r\n });\r\n });\r\n } else {\r\n this.setState({ OrderDetails: this.state.originalOrderDetails });\r\n }\r\n }\r\n\r\n SaveAddItemToOrder = async (IsContinue, Redirect, LineItem, PartNum = '') => {\r\n let bCreate = this.state.OrderId === 0\r\n await this.setState({ saving: true });\r\n let apiPath = bCreate ? macdHelper.apiAddServicesOrderWithLineItem() : macdHelper.apiAddServicesSaveLineItem();\r\n let verb = 'POST';\r\n let reqBody = {};\r\n let reqLineItem = {};\r\n if (bCreate) {\r\n reqLineItem = {\r\n CatalogItemId: LineItem.CatalogItemId,\r\n NRCAdjustedPrice: LineItem.NRCAdjustedPrice,\r\n NRCDiscountPercent: LineItem.NRCDiscountPercent,\r\n MRCAdjustedPrice: LineItem.MRCAdjustedPrice,\r\n MRCDiscountPercent: LineItem.MRCDiscountPercent,\r\n NewCount: LineItem.NewCount\r\n };\r\n reqBody = {\r\n MacdType: 'ADD_SERVICES',\r\n MomentumAccountNumber: this.state.SelectedLocationId,\r\n LineItemSaveData: reqLineItem\r\n };\r\n } else {\r\n reqLineItem = LineItem;\r\n reqBody = LineItem;\r\n }\r\n let data = JSON.stringify(reqBody);\r\n\r\n\r\n let message = await apiCalls.post(apiPath, verb, data).then(resp => resp)\r\n .catch(message => {\r\n this.setState({\r\n saving: false,\r\n error: true,\r\n loading: false,\r\n resultsMsg: 'An error occurred. Please check the Open Requests tab and reload your Order!'\r\n });\r\n });\r\n if (message.ok) {\r\n let messageBody = JSON.parse(message.message);\r\n\r\n if (IsContinue || Redirect) {\r\n if (IsContinue) {\r\n //go to the next page passing in the order id\r\n let uri = '/macd_review?oid=' + NewOrderId;\r\n window.location.replace(uri);\r\n return;\r\n } else\r\n window.location.replace('/macd');\r\n return;\r\n }\r\n let OrderDetails = {};//messageBody.Order;\r\n let NewOrderId = this.state.OrderId ? this.state.OrderId : OrderDetails.OrderId;\r\n let LineItem = {};//messageBody.LineItem;\r\n let setConfigs = this.state.OrderId === 0 ? true : false;\r\n\r\n if (setConfigs) {\r\n let LocationDetails = messageBody.Location;\r\n OrderDetails = messageBody.Order;\r\n LineItem = messageBody.LineItem;\r\n await this.setState({ OrderId: OrderDetails.OrderId, MPOLocationId: LocationDetails.LocationId });\r\n } else {\r\n LineItem = messageBody;\r\n }\r\n let DetailId = 0\r\n let ColumnConfig = [];\r\n let className = 'product-configuration';\r\n [DetailId, ColumnConfig, className] = await macdHelper.ReviewAndSaveNoConfigItem(this.state.OrderId, this.state.MPOLocationId, PartNum, LineItem.LineItemId);\r\n LineItem.ColumnConfig = ColumnConfig; \r\n LineItem.ConfigureClassName = className;\r\n\r\n \r\n this.AddLineItemToState(setConfigs, LineItem, DetailId);\r\n //If we're adding a product with quantity validation, need to make sure other order item validations are updated\r\n if (!bCreate)\r\n {\r\n let quantityRules = _.filter(macdHelper.QuantityValidationRules, resp => resp.PartNum === PartNum );\r\n if (quantityRules && quantityRules.length > 0)\r\n {\r\n //if removing a product where quantity validation is performed, we need to mimic the save updateItemFromModal task and update those items and refresh\r\n let otherUSOCs = quantityRules[0].DependencyList;\r\n let dependentOrderItems = _.filter(this.state.OrderDetails, resp => _.indexOf(otherUSOCs, resp.PartNum) > -1);\r\n //Get all other call recording products and validate those\r\n if (dependentOrderItems !== null && dependentOrderItems.length > 0)\r\n this.ReviewAndRefreshQuantityDependencies(dependentOrderItems);\r\n }\r\n }\r\n \r\n\r\n } else {\r\n this.setState({\r\n saving: false,\r\n error: true,\r\n tempLocationId: \"\",\r\n tempLocationName: '',\r\n resultsMsg: message.message,\r\n creating: false\r\n });\r\n }\r\n }\r\n\r\n LoadItemConfigs = async () => {\r\n let [RateCenterDetails, TerminatingNumbers, LocationDetails] = await macdHelper.fetchItemConfig(this.state.OrderId, this.state.MPOLocationId);\r\n\r\n let serviceAddress = LocationDetails && LocationDetails.ServiceAddress ? LocationDetails.ServiceAddress : '';\r\n let revisedTerminatingNumbers = [];\r\n if (TerminatingNumbers && TerminatingNumbers.length > 0) {\r\n revisedTerminatingNumbers = TerminatingNumbers.map((tn) => {\r\n return tn.ServiceNumber;\r\n });\r\n }\r\n\r\n let defaultRCOptions = await macdHelper.fetchRateCenterOptions(serviceAddress.AdrState);\r\n let rcNameOptions = [];\r\n if (defaultRCOptions) {\r\n rcNameOptions = defaultRCOptions.map((rc) => {\r\n return (macdHelper.rcNameOption(rc));\r\n });\r\n }\r\n\r\n this.setState({\r\n //InventoryTNList: InventoryTN ? InventoryTN : [],\r\n TerminatingNumbersList: revisedTerminatingNumbers,\r\n DefaultRCState: serviceAddress.AdrState,\r\n DefaultRCName: RateCenterDetails && RateCenterDetails.length > 0 ? RateCenterDetails[0].RCNameAbbr : \"\",\r\n DefaultRateCenterOptions: rcNameOptions\r\n });\r\n }\r\n\r\n AddLineItemToState = async (refreshDefaults, LineItem, DetailId) => {\r\n if (refreshDefaults) {\r\n await this.LoadItemConfigs();\r\n }\r\n if (LineItem) {\r\n let OrderDetailArray = this.state.OrderDetails.slice();\r\n let pricebookDetails = this.state.fullPricebookDetails;\r\n\r\n let catalogItm = pricebookDetails.filter(function (o) { return o.CatalogItemId === LineItem.CatalogItemId })[0];\r\n let PartNumber = catalogItm.PartNum;\r\n let PartDescription = catalogItm.PartDescription;\r\n\r\n let NewItem = macdHelper.LoadItem(\r\n LineItem,\r\n PartNumber,\r\n PartDescription,\r\n this.state.SelectedLocationId,\r\n this.state.SelectedLocationName,\r\n this.state.MPOLocationId,\r\n this.state.TerminatingNumbersList,\r\n //this.state.InventoryTNList,\r\n this.state.DefaultRateCenterOptions,\r\n this.state.rcStateOptions,\r\n this.state.DefaultRCState,\r\n this.state.DefaultRCName,\r\n catalogItm\r\n );\r\n if (LineItem.ColumnConfig)\r\n NewItem.ColumnConfig = LineItem.ColumnConfig;\r\n if (LineItem.ConfigureClassName)\r\n NewItem.ConfigureClassName = LineItem.ConfigureClassName;\r\n\r\n NewItem.configurationDetails = macdHelper.MapConfigDetails(LineItem.NewCount, NewItem.configurationDetails, NewItem, DetailId);\r\n if (DetailId && DetailId > 0 && NewItem.ErrorMessage === '') {\r\n let bConfigured = true;\r\n NewItem.configurationDetails.map((cd, idx) => {\r\n if (cd.ErrorMessage && cd.ErrorMessage !== '')\r\n bConfigured = false;\r\n if (PartNumber === 'IP100') {\r\n \r\n bConfigured = (cd.IPTrunkConfigId === '' || cd.IPTrunkConfigId == 0 || (cd.ErrorMessage && cd.ErrorMessage !== '')) ? false : true;\r\n }\r\n });\r\n NewItem.isConfigured = bConfigured;\r\n }\r\n OrderDetailArray.push(NewItem); \r\n this.setState({ \r\n saving: false, \r\n isChange: false, \r\n error: false, \r\n resultsMsg: \"\", \r\n OrderDetails: OrderDetailArray,\r\n creating: false \r\n }); \r\n }\r\n }\r\n\r\n showCancelAndContinue = () => {\r\n if (this.state.saving) {\r\n return \r\n
\r\n {product.PartDescription} {product.PartNum}
\r\n\r\n Quantity: {product.Quantity}\r\n
\r\n { this.handleRemoveItem(product.LineItemId) }} className=\"remove\">Remove\r\n \r\n
\r\n \r\n { this.handleContinueClick() }} className=\"btn\">Continue\r\n { this.handleCancelClick() }} style={{ visibility: this.state.ReadOnly === true ? 'hidden' : 'visible' }}>Cancel\r\n
\r\n )\r\n }\r\n\r\n sortChange(event) {\r\n this.setState({\r\n pricebookDetails: this.sortPricebookDetails(event.sort),\r\n sort: event.sort\r\n });\r\n }\r\n\r\n sortPricebookDetails(sort, pricebookDetails = null) {\r\n if (pricebookDetails == null) pricebookDetails = this.state.pricebookDetails.slice();\r\n let sortedSet = orderBy(pricebookDetails, sort);\r\n if (sort.length && sort[0].field !== 'BasePrice' && sort[0].field !== 'ActivationCharge') {\r\n return helper.blanksAfterZ(sortedSet, sort);\r\n } else {\r\n return sortedSet;\r\n }\r\n }\r\n\r\n revisedData = (data) => {\r\n let revisedData = [];\r\n let removedUSOCs = this.state.disabledUSOCs;\r\n data.map((sd) => {\r\n let disabledUSOCEntry = _.filter(removedUSOCs, resp => resp.USOC === sd.PartNum && resp.ProductSetTypeName === sd.ProductSetTypeName);\r\n if (!(disabledUSOCEntry.length > 0 && disabledUSOCEntry[0].ShowListing === false)) {\r\n if (sd.MSP_Visible === 0) {\r\n sd.adding = false;\r\n sd.disabled = true;\r\n sd.DisabledMessage = \"This product requires additional manual configuration. Please contact support to order this item.\";\r\n } \r\n revisedData.push(sd);\r\n }\r\n \r\n });\r\n let sortedData = this.sortPricebookDetails(this.state.sort, revisedData)\r\n return sortedData;\r\n }\r\n\r\n getSearchResults = (event) => {\r\n let searchText = '';\r\n let fullDetails = this.state.fullPricebookDetails;\r\n if (event && event.target && event.target.value && event.target.value.trim() !== '') {\r\n searchText = event.target.value;\r\n let products = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'PartDescription', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'PartNum', operator: 'contains', value: searchText, ignoreCase: true }\r\n ]\r\n });\r\n\r\n this.setState({ pricebookDetails: products })\r\n }\r\n else {\r\n this.setState({ pricebookDetails: fullDetails });\r\n }\r\n }\r\n\r\n gridContent = () => {\r\n // if (sessionStorage.IsEmulatingUser) {\r\n // return (\r\n // \r\n\r\n
\r\n )\r\n } else if (this.state.SelectedLocationId === \"0\") {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Add Services
\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 Add Services
\r\n\r\n {/*\r\n
*/}\r\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 MacdAdd;","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport ConfigureProductModal from './modals/configureProductModal';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as helper from '../../scripts/helper';\r\nimport * as macdHelper from './components/macd_helper';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport SaveSpinner from '../../components/AddServicesSaveStatus';\r\nimport _ from 'lodash';\r\n\r\nclass MacdReview extends Component {\r\n initialState = (props) => {\r\n let orderId = 0;\r\n if (props.match && props.match.params) {\r\n if (props.match.params.OrderId)\r\n orderId = props.match.params.OrderId;\r\n }\r\n let maxDate = new Date();\r\n maxDate.setDate(maxDate.getDate() + 30);\r\n\r\n return {\r\n filter: { logic: \"and\", filters: [] },\r\n useFilter: true,\r\n OrderDetails: [],//actual datadetails\r\n OrderId: orderId ? orderId : 0,\r\n sort: [{ field: \"PartDescription\", dir: \"asc\" }],\r\n skip: 0,\r\n gridHeight: (window.innerHeight - 300),\r\n error: false,\r\n submitting: false,\r\n loading: true,\r\n isConfirmSubmitDialogOpen: false,\r\n resultsMsg: \"\",\r\n MaxServiceDate: maxDate,\r\n currentLocation: 0,\r\n MPOLocationId: 0,\r\n TerminatingNumbersList: [],\r\n //InventoryTNList: [],\r\n DefaultRateCenterOptions: [],\r\n rcStateOptions: [],\r\n DefaultRCState: '',\r\n DefaultRCName: '',\r\n pricebookDetails: [],\r\n SaveMessage: '',\r\n ServiceDateError: '',\r\n updateServiceDate: true,\r\n ServiceDateUpdateMessage: 'Loading Service Date...',\r\n ReadOnly: false,\r\n OrderLocationErrors: [],\r\n DisabledUSOCs: require('./components/DisabledUSOCs.json'),\r\n IPTrunkGroupOptions: [],\r\n IPTrunkGroups: [],\r\n locations: JSON.parse(sessionStorage.locationList),//need to get the location's customerId to pass it so if E911 address is being validated it can be\r\n CustomerId: 0\r\n }\r\n }\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n this.gridContent = this.gridContent.bind(this);\r\n this.sortChange = this.sortChange.bind(this);\r\n this.RetrieveSavedOrder = this.RetrieveSavedOrder.bind(this);\r\n const RemoveItemFromOrder = this.RemoveItemFromOrder.bind(this);\r\n this.handleSubmitClick = this.handleSubmitClick.bind(this);\r\n this.handleBackClick = this.handleBackClick.bind(this);\r\n this.handleContinueClick = this.handleContinueClick.bind(this);\r\n this.LoadSupportingData = this.LoadSupportingData.bind(this);\r\n this.fetchLocations = this.fetchLocations.bind(this);\r\n this.fetchIPTrunks = this.fetchIPTrunks.bind(this);\r\n this.fetchPricebookDetails = this.fetchPricebookDetails.bind(this);\r\n this.fetchRcStateList = this.fetchRcStateList.bind(this);\r\n const updateOrderItemFromModal = this.updateOrderItemFromModal.bind(this);\r\n this.handleUpdateServiceDate = this.handleUpdateServiceDate.bind(this);\r\n this.SubmitOrder = this.SubmitOrder.bind(this);\r\n this.redirectToConfirm = this.redirectToConfirm.bind(this);\r\n this.CheckConfigurations = this.CheckConfigurations.bind(this);\r\n this.DisplayOrderLocationErrors = this.DisplayOrderLocationErrors.bind(this);\r\n\r\n const getIPTrunks = this.getIPTrunks.bind(this);\r\n const getIPTrunkOptions = this.getIPTrunkOptions.bind(this);\r\n const updateTrunkGroups = this.UpdateTrunkGroups.bind(this);\r\n const removeTrunkGroups = this.RemoveTrunkGroups.bind(this);\r\n const getCustomerId = this.getCustomerId.bind(this);\r\n\r\n class MyAddCell extends GridCell {\r\n render() {\r\n let TrunksGroups = getIPTrunks(this.props.dataItem);\r\n let TrunkGroupOptions = getIPTrunkOptions(this.props.dataItem);\r\n let CustomerId = getCustomerId();\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n Add Services
\r\n\r\n {/*\r\n
*/}\r\n \r\n \r\n \r\n \r\n \r\n {this.state.ConfirmationTitle} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.ConfirmationMessage}
\r\n {this.AddedProducts()}\r\n
\r\n \r\n
\r\n
\r\n {this.showCancelAndContinue()}\r\n {this.state.resultsMsg}
\r\n\r\n
\r\n
\r\n \r\n this.getSearchResults(e)} placeholder=\"Search Momentum Products by Part Num or Description\" />\r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n Service Date: N/A\r\n
\r\n );\r\n } else {\r\n let date = new Date(this.state.ServiceDate);\r\n let serviceDate = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();\r\n return (\r\n \r\n Service Date:\r\n
\r\n );\r\n }\r\n } else {\r\n return (\r\n \r\n {serviceDate}\r\n
\r\n \r\n {this.state.ServiceDateError}\r\n
\r\n \r\n Service Date:\r\n
\r\n );\r\n }\r\n }\r\n }\r\n\r\n handleBackClick(e) {\r\n this.props.history.push(macdHelper.AddEditPage(this.state.OrderId));\r\n }\r\n\r\n updateOrderItemFromModal = async (ProductItem, newConfigDetails, LineItemId) => {\r\n if (this.state.ReadOnly === true)\r\n return;\r\n let OrderDetails = this.state.OrderDetails;\r\n try {\r\n var result = newConfigDetails.filter(obj => {\r\n return obj.DetailId === 0\r\n });\r\n //if any item in config details has a DetailId = 0 then its not configured\r\n if (result && result.length > 0) {\r\n ProductItem.isConfigured = false;\r\n }\r\n else {//else need to run back-end validation. if valid then isConfigured = true.\r\n let [DetailItemValidations, LineItemErrors, TrunkGroupValidations] = await macdHelper.ItemValidations(this.state.OrderId, this.state.MPOLocationId);\r\n ProductItem.isConfigured = true;\r\n if ((LineItemErrors && LineItemErrors.length > 0) || (DetailItemValidations && DetailItemValidations.length > 0) || (TrunkGroupValidations && TrunkGroupValidations.length > 0)) {\r\n \r\n let errorLine = LineItemErrors.filter(function (o) { return o.SourceId === LineItemId });\r\n if (errorLine && errorLine.length > 0)\r\n ProductItem.isConfigured = false;\r\n\r\n newConfigDetails.map((cd, idx) => {\r\n errorLine = DetailItemValidations.filter(function (o) { return o.SourceId === cd.DetailId });\r\n if (errorLine && errorLine.length > 0) {\r\n cd.ErrorMessage = errorLine[0].ErrorMessage;\r\n newConfigDetails[idx] = cd;\r\n if (newConfigDetails[idx].LineItemId == ProductItem.LineItemId)\r\n ProductItem.isConfigured = false;\r\n } else {\r\n cd.ErrorMessage = \"\";\r\n newConfigDetails[idx] = cd;\r\n }\r\n if (ProductItem.PartNum === 'IP100') {\r\n _.filter(TrunkGroupValidations, lie => cd.IPTrunkConfigId === lie.SourceId).map((trunkError) => {\r\n let msg = helper.StringReplaceAll(trunkError.ErrorMessage, '', '', false) + '\\n';\r\n cd.ErrorMessage += msg;\r\n });\r\n }\r\n\r\n if (cd.Temp911AddressId !== 0)\r\n {\r\n let AddressItem = cd.address;\r\n if (AddressItem.ErrorMessage !== '') {\r\n let msg = helper.StringReplaceAll(AddressItem.ErrorMessage, '', '', false);\r\n cd.ErrorMessage += msg;\r\n }\r\n }\r\n\r\n if (cd.ErrorMessage && cd.ErrorMessage !== '')\r\n ProductItem.isConfigured = false;\r\n });\r\n }\r\n if (ProductItem.PartNum === 'IP101' || ProductItem.PartNum === 'IP102' || ProductItem.PartNum === 'IP103') {\r\n let ipTrunks = this.state.IPTrunkGroups.slice();\r\n newConfigDetails.map((cd) => {\r\n //remove the old association\r\n let idx = -1;\r\n let updatedTrunk = ipTrunks.filter(resp => resp.CallPathId === cd.DetailId);\r\n if (updatedTrunk && updatedTrunk.length > 0) { \r\n updatedTrunk = updatedTrunk[0];\r\n idx = _.indexOf(ipTrunks, updatedTrunk);\r\n if (cd.ParentDetailId !== updatedTrunk.ConcatId && idx > -1)\r\n ipTrunks[idx].CallPathId = 0;\r\n }\r\n //update new association\r\n let newTrunk = ipTrunks.filter(resp => parseInt(resp.ConcatId) === parseInt(cd.ParentDetailId) || parseInt(resp.ConcatId) === parseInt(cd.IPTrunkGroupCustomerProductId));\r\n if (newTrunk && newTrunk.length > 0) {\r\n newTrunk = newTrunk[0];\r\n idx = _.indexOf(ipTrunks, newTrunk);\r\n if (cd.ParentDetailId === newTrunk.ConcatId && idx > -1)\r\n ipTrunks[idx].CallPathId = cd.DetailId;\r\n }\r\n });\r\n this.setState({IPTrunkGroups: ipTrunks});\r\n }\r\n\r\n //Quantity Validations\r\n console.log('Stupid console statement to make debugs work because react be trippin');\r\n if (ProductItem.Quantity != newConfigDetails.length)\r\n {\r\n let dependencyRules = _.filter(macdHelper.QuantityValidationRules, resp => resp.PartNum === ProductItem.PartNum);\r\n if (dependencyRules !== null && dependencyRules.length === 1)\r\n {\r\n \r\n let otherUSOCs = dependencyRules[0].DependencyList;\r\n let dependentOrderItems = _.filter(OrderDetails, resp => _.indexOf(otherUSOCs, resp.PartNum) > -1);\r\n //Get all other call recording products and validate those\r\n if (dependentOrderItems !== null && dependentOrderItems.length > 0) {\r\n await this.ReviewAndRefreshQuantityDependencies(dependentOrderItems);\r\n return;\r\n }\r\n }\r\n }\r\n }\r\n } catch (msg) {\r\n console.log(msg);\r\n }\r\n if (LineItemId !== -1)\r\n {\r\n let arrayIdx = OrderDetails.indexOf(OrderDetails.filter(resp => resp.LineItemId === LineItemId)[0]);\r\n OrderDetails[arrayIdx].configurationDetails = newConfigDetails;\r\n OrderDetails[arrayIdx].Quantity = newConfigDetails.length;\r\n OrderDetails[arrayIdx].isConfigured = ProductItem.isConfigured;\r\n }\r\n await this.setState({ OrderDetails: OrderDetails });\r\n this.CheckConfigurations();\r\n \r\n }\r\n\r\n handleUpdateServiceDate = async (e) => {\r\n let ServiceDateVal = e.sender.value();\r\n if (ServiceDateVal == null) ServiceDateVal = new Date(); // if a past/undefined date is selected, defaults to current date\r\n this.setState({ ServiceDate: ServiceDateVal, updateServiceDate: true, ServiceDateUpdateMessage: 'Validating Service Date...' });\r\n let ServiceDateProp = ServiceDateVal.getMonth() + 1 + '/' + ServiceDateVal.getDate() + '/' + ServiceDateVal.getFullYear();\r\n var reqObject = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n RequestDueDate: ServiceDateProp\r\n }\r\n let response = await apiCalls.post(macdHelper.apiUpdateLocation(), 'PATCH', JSON.stringify(reqObject)).then(data => data);\r\n let errorMsg = '';\r\n if (!response.ok) {\r\n //display error message below\r\n errorMsg = 'An error occurred. Please select another date';\r\n } else {\r\n let responseMsg = JSON.parse(response.message);\r\n errorMsg = helper.StripHtml(responseMsg.ErrorMessage);\r\n }\r\n this.setState({ ServiceDateError: errorMsg, updateServiceDate: false });\r\n }\r\n\r\n handleSubmitClick = (e) => {\r\n //need to save, then need to validate, then need to submit, then redirect to macd_confirm page\r\n this.setState({ submitting: true, SaveMessage: 'Saving Order Updates...' });\r\n try {\r\n this.setState({ SaveMessage: 'Validating Order Items...' });\r\n this.SubmitOrder();\r\n } catch (ex) {\r\n this.setState({ submitting: false, SaveMessage: '' });\r\n }\r\n }\r\n\r\n CheckConfigurations = () => {\r\n let bIsConfigured = true;\r\n let newServices = this.state.OrderDetails.slice();\r\n bIsConfigured = newServices.map((ns) => {\r\n if (ns.isConfigured === false)\r\n return false;\r\n });\r\n if (!bIsConfigured) {\r\n let ValidationMessage = 'Order contains errors. Please review configurations.';\r\n this.setState({ submitting: false, SaveMessage: '', error: true, resultsMsg: ValidationMessage });\r\n } else {\r\n this.setState({ error: false, resultsMsg: '' });\r\n }\r\n return bIsConfigured;\r\n }\r\n\r\n ReviewAndRefreshQuantityDependencies = async (dependentOrderItems) =>\r\n {\r\n //dependentOrderItems.map(async (od) => {\r\n //this.setState({saving: true});\r\n let pricebook = this.state.pricebookDetails;\r\n for (let i = 0; i < dependentOrderItems.length; i++)\r\n {\r\n let pricebookItem = _.filter(pricebook, resp => resp.CatalogItemId === dependentOrderItems[i].CatalogItemId);\r\n if (pricebookItem && pricebookItem.length > 0)\r\n pricebookItem = pricebookItem[0];\r\n else \r\n continue; \r\n \r\n let apiPath = macdHelper.apiUpdateLineItem();\r\n let dbLineItem = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n LineItemId: dependentOrderItems[i].LineItemId,\r\n CatalogItemId: dependentOrderItems[i].CatalogItemId,\r\n NewCount: dependentOrderItems.Quantity,\r\n NRCAdjustedPrice: pricebookItem.NRCAdjustedPrice ? pricebookItem.NRCAdjustedPrice : pricebookItem.ActivationCharge,\r\n NRCDiscountPercent: pricebookItem.NRCAdjustedPrice ? (1.00) - parseFloat(pricebookItem.NRCAdjustedPrice / pricebookItem.ActivationCharge) : 0.00,\r\n MRCAdjustedPrice: pricebookItem.MRCAdjustedPrice ? pricebookItem.MRCAdjustedPrice : pricebookItem.BasePrice,\r\n MRCDiscountPercent: pricebookItem.MRCAdjustedPrice ? (1.00) - parseFloat(pricebookItem.MRCAdjustedPrice - pricebookItem.BasePrice) : 0.00,\r\n UpdateNeeded: true //no values are changing in the dependent order item so this is used to force an update\r\n }\r\n\r\n let reqBody = JSON.stringify(dbLineItem);\r\n let responseMessage = await apiCalls.post(apiPath, 'PATCH', reqBody).then(resp => resp)\r\n .catch(message => {\r\n // this.setState({\r\n // saving: false,\r\n // error: true,\r\n // loading: false,\r\n // resultsMsg: 'An error occurred. Please check the Open Requests tab and reload your Order!'\r\n // });\r\n });\r\n //});\r\n }\r\n await this.setState({ OrderDetails: [], saving: false });\r\n //need to save those order items\r\n this.RetrieveSavedOrder(this.state.OrderId, false);\r\n }\r\n\r\n SubmitOrder = () => {\r\n let apiPath = macdHelper.apiSubmitOrder();\r\n if (!this.CheckConfigurations()) return;\r\n //let reqData = { OrderId: this.state.OrderId};\r\n apiCalls.post(apiPath, 'PATCH', this.state.OrderId).then(resp => {\r\n if (resp.ok) {\r\n let ValidationMessages = [];\r\n if (!ValidationMessages || ValidationMessages.length === 0) {\r\n this.setState({ SaveMessage: 'Submitting Order...' });\r\n this.redirectToConfirm();\r\n }\r\n } else {\r\n let ValidationMessage = 'Order contains errors. Please review configurations.';\r\n this.setState({ submitting: false, SaveMessage: '', error: true, resultsMsg: ValidationMessage })\r\n }\r\n }).catch(message => {\r\n console.log(message)\r\n this.setState({\r\n submitting: false,\r\n SaveMessage: '',\r\n error: true,\r\n resultsMsg: message\r\n });\r\n });\r\n }\r\n\r\n handleContinueClick = () => {\r\n this.props.history.push(macdHelper.ConfirmPageUrl(this.state.OrderId));\r\n }\r\n\r\n redirectToConfirm = () => {\r\n this.props.history.push(macdHelper.ConfirmPageUrl(this.state.OrderId));\r\n }\r\n\r\n handleRemoveItem(id) {\r\n let msg = 'Are you sure you wish to remove this item from your order?';\r\n let title = 'Remove Item from Order?';\r\n this.setState({ isConfirmationDialogOpen: true, ConfirmationTitle: title, ConfirmationMessage: msg, RemoveItemId: id });\r\n }\r\n\r\n RemoveItemFromOrder = (id) => {\r\n //if trying to remove an IP Trunk Group we need to test to make sure user hasn't configured another new product to one of these new trunk groups\r\n let currentDetails = this.state.OrderDetails;\r\n //let LineItemRemoved = currentDetails.filter(resp => resp.LineItemId === id);\r\n \r\n let verb = \"PATCH\";\r\n let reqBody = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n LineItemId: id\r\n };\r\n let data = JSON.stringify(reqBody);\r\n let apiPath = macdHelper.apiDiscardLineItem();\r\n this.setState({ saving: true });\r\n apiCalls.post(apiPath, verb, data).then(resp => {\r\n if (resp.ok) {\r\n let newTrunkGroups = this.state.IPTrunkGroups.slice();\r\n let newTrunkGroupOptions = this.state.IPTrunkGroupOptions.slice();\r\n \r\n let array = this.state.OrderDetails;\r\n var itmToRemove = array.find((element) => {\r\n return element.LineItemId === id;\r\n });\r\n var index = this.state.OrderDetails.indexOf(itmToRemove);\r\n array.splice(index, 1);\r\n\r\n if (itmToRemove.PartNum === 'IP100') {\r\n let removedTrunkGroups = newTrunkGroups.filter(resp => resp.IsNew === true);\r\n newTrunkGroups = newTrunkGroups.filter(resp => resp.IsNew !== true);\r\n newTrunkGroupOptions = macdHelper.getIPTrunkGroupOptions(newTrunkGroups);\r\n removedTrunkGroups.map((rd,idx) => {\r\n if (rd.IPTrunkGroupID !== 0)\r\n this.RemoveTrunkGroupsFromDB(rd);\r\n });\r\n \r\n }\r\n\r\n this.setState({ OrderDetails: array, error: false, saving: false, RemoveItemId: 0, isConfirmationDialogOpen: false, IPTrunkGroups: newTrunkGroups, IPTrunkGroupOptions: newTrunkGroupOptions });\r\n\r\n let quantityRules = _.filter(macdHelper.QuantityValidationRules, resp => resp.PartNum === itmToRemove.PartNum);\r\n if (quantityRules !== null && quantityRules.length > 0)\r\n {\r\n //if removing a product where quantity validation is performed, we need to mimic the save updateItemFromModal task and update those items and refresh\r\n let otherUSOCs = quantityRules[0].DependencyList;\r\n let dependentOrderItems = _.filter(array, resp => _.indexOf(otherUSOCs, resp.PartNum) > -1);\r\n //Get all other call recording products and validate those\r\n if (dependentOrderItems !== null && dependentOrderItems.length > 0)\r\n this.ReviewAndRefreshQuantityDependencies(dependentOrderItems);\r\n }\r\n\r\n\r\n } else {\r\n this.setState({ error: true, saving: false, errorMsg: resp.message, RemoveItemId: 0, isConfirmationDialogOpen: false });\r\n }\r\n }).catch(message => {\r\n this.setState({ error: true, saving: false, errorMsg: message, RemoveItemId: 0, isConfirmationDialogOpen: false });\r\n });\r\n }\r\n\r\n DisplayOrderLocationErrors = () => {\r\n let htmlContents = [];\r\n let errors = [];\r\n if (this.state.OrderLocationErrors && this.state.OrderLocationErrors.length > 0) {\r\n this.state.OrderLocationErrors.map((ole) => {\r\n htmlContents.push(macdHelper.ErrorMessageDisplayItem(ole));\r\n errors.push(ole);\r\n });\r\n }\r\n if (errors && errors.length > 0)\r\n return (\r\n \r\n { this.handleUpdateServiceDate(e); }}\r\n />\r\n
\r\n \r\n {this.state.ServiceDateError}\r\n
\r\n \r\n
\r\n )\r\n else return null;\r\n }\r\n\r\n fetchIPTrunks = async (TrunkItems = null, Details = null) => {\r\n let trunks = [];\r\n let apiPath = macdHelper.apiRetrieveIPTrunks(this.state.currentLocation);\r\n let data = await apiCalls.fetchData(apiPath).then((data) => data);\r\n if (data !== null) {\r\n data.map((record, idx) => {\r\n let existingTrunkEntry = {};\r\n existingTrunkEntry = { \r\n IsNew: false, \r\n ConcatId: record.CustomerProductId, \r\n CustomerProductId: record.CustomerProductId, \r\n DetailId: null, \r\n IPTrunkGroupID: record.IPTrunkGroupID, \r\n LineDescription: record.LineDescription,\r\n CallPathId: record.CallPathCustomerProductId\r\n };\r\n trunks.push(existingTrunkEntry); \r\n });\r\n\r\n if (TrunkItems) {\r\n TrunkItems.map((record, idx) => {\r\n let newTrunkEntry = {};\r\n let trunkGroupDetailRecord = Details.filter(resp => resp.DetailId === record.DetailId)[0];\r\n if (trunkGroupDetailRecord)\r\n {\r\n let callPath = Details.filter(resp => (resp.PartNumber === 'IP101' || resp.PartNumber === 'IP102' || resp.PartNumber === 'IP103') && resp.ParentDetailId === trunkGroupDetailRecord.DetailId);\r\n if (callPath)\r\n callPath = callPath[0];\r\n newTrunkEntry = { \r\n IsNew: true, \r\n ConcatId: record.DetailId, \r\n CustomerProductId: null, \r\n DetailId: record.DetailId, \r\n IPTrunkGroupID: record.IPTrunkGroupID, \r\n LineDescription: record.Description,\r\n CallPathId: callPath ? callPath.DetailId : 0\r\n };\r\n trunks.push(newTrunkEntry); \r\n }\r\n });\r\n }\r\n return trunks;\r\n } else {\r\n return [];\r\n }\r\n }\r\n\r\n\r\n UpdateTrunkGroups = async(TrunkGroupDetails, DetailId, IsAdd) => {\r\n let existingTrunks = this.state.IPTrunkGroups.slice();\r\n if (IsAdd)\r\n {\r\n let newTrunkEntry = { \r\n IsNew: true, \r\n ConcatId: DetailId, \r\n CustomerProductId: 0, \r\n DetailId: DetailId, \r\n IPTrunkGroupID: TrunkGroupDetails.IPTrunkConfigId, \r\n LineDescription: TrunkGroupDetails.TrunkDescription,\r\n CallPathId: 0\r\n };\r\n\r\n existingTrunks.push(newTrunkEntry);\r\n } else {\r\n let updatedTrunk = existingTrunks.filter(resp => resp.DetailId === DetailId)[0];\r\n let idx = _.indexOf(existingTrunks, updatedTrunk);\r\n existingTrunks[idx].LineDescription = TrunkGroupDetails.TrunkDescription\r\n }\r\n let sort = [{ field: \"LineDescription\", dir: \"asc\" }]\r\n let sortedSet = orderBy(existingTrunks, sort);\r\n let trunkOptions = macdHelper.getIPTrunkGroupOptions(sortedSet);\r\n this.setState({IPTrunkGroupOptions: trunkOptions, IPTrunkGroups: sortedSet});\r\n }\r\n\r\n RemoveTrunkGroups = async(DetailId) => {\r\n let existingTrunks = this.state.IPTrunkGroups.slice();\r\n let trunk = existingTrunks.filter(resp => resp.DetailId === DetailId);\r\n trunk = trunk[0];\r\n this.RemoveTrunkGroupsFromDB(trunk);\r\n existingTrunks = existingTrunks.filter(resp => resp.DetailId !== DetailId);\r\n\r\n let LineItems = this.state.OrderDetails;\r\n LineItems.map((li, idx) => {\r\n let configDetails = li.configurationDetails.slice();\r\n configDetails.map((cd, idxCD) => {\r\n if (cd.ParentDetailId === DetailId) {\r\n cd.ParentDetailId = 0;\r\n cd.IPTrunkGroupCustomerProductId = 0;\r\n cd.TrunkId = 0;\r\n configDetails[idxCD] = cd;\r\n }\r\n });\r\n LineItems[idx].configurationDetails = configDetails;\r\n });\r\n\r\n let sort = [{ field: \"LineDescription\", dir: \"asc\" }]\r\n let sortedSet = orderBy(existingTrunks, sort);\r\n let trunkOptions = macdHelper.getIPTrunkGroupOptions(sortedSet);\r\n this.setState({IPTrunkGroupOptions: trunkOptions, IPTrunkGroups: sortedSet, OrderDetails: LineItems});\r\n }\r\n\r\n RemoveTrunkGroupsFromDB = async(trunk) => {\r\n let apiPath = macdHelper.apiDiscardTrunkItem();\r\n let reqBody = {\r\n OrderId: this.state.OrderId,\r\n LocationId: this.state.MPOLocationId,\r\n DetailId: trunk.DetailId,\r\n IPTrunkConfigId: trunk.IPTrunkGroupID\r\n }\r\n apiCalls.post(apiPath, 'PATCH', JSON.stringify(reqBody)).then((data) => data);//.error((message) => console.error(message));\r\n }\r\n\r\n getIPTrunks = (product) => {\r\n //CallPathCustomerProductId\r\n let ipTrunks = this.state.IPTrunkGroups;\r\n let newIPTrunks = ipTrunks.slice();\r\n \r\n if (product.PartNum === 'IP101' || product.PartNum === 'IP102' || product.PartNum === 'IP103') {\r\n newIPTrunks = []; //clearing b/c you can't set a call path on an IP Trunk that already has one\r\n let configDetailIds = [];\r\n product.configurationDetails.map((cd) => {\r\n if (cd.ParentDetailId && parseInt(cd.ParentDetailId) > 0)\r\n configDetailIds.push(cd.DetailId);\r\n else if (cd.IPTrunkGroupCustomerProductId && parseInt(cd.IPTrunkGroupCustomerProductId) > 0)\r\n configDetailIds.push(cd.DetailId);\r\n });\r\n //filtering out IP Trunks that have been associated with other call plan types in the order from the modal. \r\n //Also filtering out previously setup IP Trunks whose IP Trunk already has a call path plan.\r\n ipTrunks.map((ipt) => {\r\n if (ipt.CallPathId === 0)\r\n newIPTrunks.push(ipt);\r\n else if (_.indexOf(configDetailIds, ipt.CallPathId) > -1 && ipt.IsNew === true)\r\n newIPTrunks.push(ipt);\r\n });\r\n }\r\n return newIPTrunks;\r\n }\r\n \r\n getIPTrunkOptions = (product) => {\r\n let existingTrunks = this.getIPTrunks(product);\r\n let sort = [{ field: \"LineDescription\", dir: \"asc\" }]\r\n let sortedSet = orderBy(existingTrunks, sort);\r\n let ipTrunkOptions = macdHelper.getIPTrunkGroupOptions(sortedSet);\r\n return ipTrunkOptions;\r\n }\r\n\r\n render() {\r\n if (this.state.loading) {\r\n return (\r\n Configuration Errors:
\r\n- \r\n {htmlContents}\r\n
\r\n
\r\n )\r\n } else if (this.state.submitting) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Order Summary
\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 Order Summary
\r\n\r\n
\r\n \r\n
\r\n )\r\n }\r\n }\r\n}\r\n\r\nexport default MacdReview;","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from './../../requests/config';\r\nimport * as helper from '../../scripts/helper';\r\nimport * as macdHelper from './components/macd_helper';\r\nimport { Grid, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\n\r\nclass MacdConfirm extends Component {\r\n\r\n initialState(props) {\r\n let orderId = 0;\r\n if (props.match && props.match.params) {\r\n if (props.match.params.OrderId)\r\n orderId = props.match.params.OrderId;\r\n }\r\n \r\n return {\r\n OrderId: orderId,\r\n Listings: [],\r\n MPOLocationId: 0,\r\n sort: [{field: \"PartDescription\", dir: \"asc\"}],\r\n gridHeight: (window.innerHeight - 300),\r\n loading: true\r\n\r\n }\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n\r\n\r\n this.fetchOrderDetails = this.fetchOrderDetails.bind(this);\r\n this.sortChange = this.sortChange.bind(this);\r\n this.LoadLocationsForAccount = this.LoadLocationsForAccount.bind(this);\r\n };\r\n\r\n componentDidMount() {\r\n let obj = sessionStorage.getItem('MacdPerms');\r\n if (obj.indexOf(1) < 0) {\r\n this.props.history.push(helper.homePageUrl());\r\n return;\r\n }\r\n this.setState({loading: true});\r\n this.fetchOrderDetails();\r\n }\r\n\r\n fetchOrderDetails = async() => { \r\n let ListingArr = [];\r\n let locationId = 0;\r\n //try \r\n //{\r\n let [OrderDetails, LocationDetails, LineItems, DetailItems] = await macdHelper.RetrieveOrderDetails(this.state.OrderId);\r\n locationId = LocationDetails[0].LocationId; \r\n let [LocationListDetails, MPOLocationDetails] = await this.LoadLocationData(this.state.OrderId, locationId);\r\n let selectedLocation = OrderDetails.MomentumAccountNumber;\r\n let LocationFromList = LocationListDetails.filter(resp => resp.LocationAccountNumber === selectedLocation);\r\n let LocationName = LocationFromList[0].LocationName;\r\n let ServiceDate = MPOLocationDetails.RequestDueDate ? MPOLocationDetails.RequestDueDate : '';\r\n let svcAddress = MPOLocationDetails.ServiceAddress.AddressLine1 + ' ' + MPOLocationDetails.ServiceAddress.AddressLine2\r\n + MPOLocationDetails.ServiceAddress.City + ', ' + MPOLocationDetails.ServiceAddress.AdrState + ' ' + MPOLocationDetails.ServiceAddress.ZipCode;\r\n \r\n DetailItems.map((DetailItem, idx) => {\r\n let LineItem = LineItems.filter(resp => resp.LineItemId === DetailItem.LineItemId)[0];\r\n let PartNumber = LineItem.PartNumber;\r\n let PartDescription = LineItem.PartDescription;\r\n\r\n let Listing = {\r\n DetailId: DetailItem.DetailId,\r\n LineItemId: LineItem.LineItemId,\r\n PartNum: PartNumber,\r\n PartDescription: PartDescription,\r\n MRCAdjustedPrice: LineItem.MRCAdjustedPrice,\r\n NRCAdjustedPrice: LineItem.NRCAdjustedPrice,\r\n ServiceAddress: svcAddress,\r\n Location: LocationName,\r\n Extension: DetailItem.Extension,\r\n DueDate: new Date(OrderDetails.ModifiedDate),\r\n ServiceDate: new Date(ServiceDate),\r\n ServiceNumber: DetailItem.ServiceNumber,\r\n LineEmail: DetailItem.LineEmail,\r\n Filler: ' '\r\n }\r\n ListingArr.push(Listing);\r\n });\r\n //}\r\n //catch (ex) {\r\n //console.log('error');\r\n //}\r\n\r\n this.setState({MPOLocationId: locationId, Listings: this.sortOrderDetails(this.state.sort, ListingArr), loading: false});\r\n }\r\n\r\n LoadLocationData = async(OrderId, LocationId) => {\r\n let requests = [\r\n macdHelper.fetchLocations(), \r\n macdHelper.fetchMPOLocation(OrderId, LocationId)\r\n ];\r\n return await Promise.all(requests).then(dataArray => dataArray); \r\n }\r\n LoadLocationsForAccount = async(OrderId, LocationId) => {\r\n let apiPath = macdHelper.apiGetMPOLocation(OrderId, LocationId);\r\n return apiCalls.fetchData(apiPath).then(data => data); \r\n }\r\n fetchPricebookDetails = async(selectedLocation) => {\r\n let apiPath = macdHelper.apiPricebookPathWithParams(selectedLocation);\r\n return apiCalls.fetchData(apiPath).then(data => data);\r\n }\r\n\r\n\r\n sortChange(event) {\r\n this.setState({\r\n Listings: this.sortOrderDetails(event.sort),\r\n sort: event.sort\r\n });\r\n }\r\n\r\n sortOrderDetails(sort, OrderDetails = null) {\r\n if (OrderDetails == null) OrderDetails = this.state.Listings.slice();\r\n let sortedSet = orderBy(OrderDetails, sort);\r\n if (sort.length) {\r\n return helper.blanksAfterZ(sortedSet, sort);\r\n } else {\r\n return sortedSet;\r\n }\r\n }\r\n\r\n gridContent = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Order Summary
\r\nThis order may be subject to MRC and NRC charges. Please review charges before submitting the service change below.
\r\n\r\n
\r\n {this.state.resultsMsg}
\r\n\r\n {this.DisplayOrderLocationErrors()}\r\n
\r\n \r\n {this.gridContent()}\r\n\r\n
\r\n {this.ServiceDateContent()}\r\n \r\n \r\n \r\n \r\n this.exportOrder()} >Print Confirmation\r\n
\r\n )\r\n } else null;\r\n }\r\n\r\n exportDevices = () => {\r\n this.refs.exportDevices.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Print Confirmation';\r\n }, 2000);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default MacdConfirm;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from './../../../requests/api_calls';\r\nimport * as helper from './../../../scripts/helper';\r\nimport * as macdHelper from '../components/macd_helper';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport _ from 'lodash';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\nclass MacdUserModal extends Component {\r\n\r\n initialState = (props) => {\r\n\r\n return {\r\n orderSubmitted: false,\r\n userListings: [],\r\n gridCopy: [],\r\n gridData: [],\r\n loading: false,\r\n postCompleted: false,\r\n errorMsg: '',\r\n ConfirmationTitle: '',\r\n ConfirmationMessage: '',\r\n isConfirmationDialogOpen: false,\r\n isAssign: props.isAssign,\r\n ReadOnly: false,\r\n AvailableCount: this.props.countAvailable,\r\n AssignedCount: this.props.countAssigned,\r\n selectedForAction: [],\r\n showModal: false,\r\n CatalogItemId: props && props.CatalogItemId ? props.CatalogItemId : '',\r\n MomentumAccountNumber: props && props.MomentumAccountNumber ? props.MomentumAccountNumber : '',\r\n sort: [{field: 'ServiceNumber', dir: 'asc'}]\r\n }\r\n }\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleCounts = this.handleCounts.bind(this);\r\n this.state = this.initialState(props);\r\n\r\n const updateConfiguredVal = this.updateConfiguredVal.bind(this);\r\n const getInfo = this.getInfo.bind(this);\r\n\r\n class MyActions extends GridCell {\r\n render() {\r\n let productItem = this.props.dataItem;\r\n const selectedVal = this.props.dataItem.IsSelected;\r\n let isAssign = props.isAssign;\r\n let BSSaved = this.props.dataItem.BSSaved;\r\n let successfulPost = this.props.dataItem.successfulPost;\r\n\r\n\r\n let [countAvailable, countAssigned, countRemaining, userListings, readOnly, changedItems] = getInfo();\r\n \r\n\r\n let updateConfiguredValues = () => {\r\n updateConfiguredVal(productItem, selectedVal);\r\n };\r\n\r\n if (readOnly === true) { // AFTER SUBMISSION BTN\r\n return (\r\n \r\n
\r\n \r\n
\r\n Services Confirmation - Order ID: {this.state.OrderId}
\r\n\r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n {/* {this.exportOrderDetailsBtn()} */}\r\n { window.print(); }}>Print Confirmation\r\n
\r\n \r\n \r\n Available: {this.state.AvailableCount} Assigned: {this.state.AssignedCount} Remaining: {this.state.AvailableCount - this.state.AssignedCount}\r\n
\r\n )\r\n }\r\n\r\n getSearchResults = (event) => {\r\n let searchText = '';\r\n let fullDetails = this.state.gridCopy;\r\n if (event && event.target && event.target.value && event.target.value.trim() !== '') {\r\n searchText = event.target.value;\r\n let users = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'ServiceNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Extension', operator: 'contains', value: searchText, ignoreCase: true }, \r\n { field: 'LineName', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n\r\n this.setState({ gridData: users })\r\n }\r\n else {\r\n this.setState({ gridData: fullDetails });\r\n }\r\n }\r\n\r\n sortChange = (e) => {\r\n this.setState({\r\n gridData: orderBy(this.state.gridData, e.sort),\r\n sort: e.sort\r\n })\r\n }\r\n\r\n gridContent = () => {\r\n if (this.state.loading) return No Qualifiying Products Available to Assign
\r\n if (this.state.userListings && this.state.userListings.length > 0) {\r\n return (\r\n\r\n {this.props.parentAddon.PartDescription}\r\n {this.handleCounts()}\r\n
\r\n
\r\n {this.gridContent()}\r\n
\r\n \r\n
\r\n
\r\n \r\n this.getSearchResults(e)} placeholder=\"Search Users by Name or TN\" />\r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n
\r\n \r\n \r\n
\r\n There are no available User-Level Add-Ons on this account!
\r\n\r\n }\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\nexport default MacdUser;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Switch } from '@progress/kendo-inputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass AgentDefaultSettingModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeEnableGuardTime = this.changeEnableGuardTime.bind(this);\r\n this.changeForceUnavailable3 = this.changeForceUnavailable3.bind(this);\r\n this.state = { showModal:false, checkForceUnavailable3:false, enableGuardTime:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({...this.state, showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true });\r\n }\r\n\r\n changeEnableGuardTime(event){\r\n this.setState({...this.state, enableGuardTime: event.checked });\r\n }\r\n\r\n changeForceUnavailable3(event){\r\n this.setState({...this.state, checkForceUnavailable3: event.checked });\r\n }\r\n\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Manage User Add-ons
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n \r\n Agent Default Settings\r\n \r\n \r\n \r\n \r\n Agent Default Settings \r\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 AgentDefaultSettingModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Switch } from '@progress/kendo-inputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass AgentUnavailableCodesModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeEnableGuardTime = this.changeEnableGuardTime.bind(this);\r\n this.changeForceUnavailable3 = this.changeForceUnavailable3.bind(this);\r\n this.state = { showModal:false, checkForceUnavailable3:false, enableGuardTime:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({...this.state, showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true });\r\n }\r\n\r\n changeEnableGuardTime(event){\r\n this.setState({...this.state, enableGuardTime: event.checked });\r\n }\r\n\r\n changeForceUnavailable3(event){\r\n this.setState({...this.state, checkForceUnavailable3: event.checked });\r\n }\r\n\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium magni id aliquid, sint blanditiis delectus esse ullam, eligendi recusandae ratione tempore ipsa illum error hic.
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Enable guard time\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Force Agent to unavailable on do not disturb activation\r\n
\r\n \r\n \r\n Force Agent to unavailable on personal calls\r\n
\r\n \r\n \r\n Force Agent to unavailable after\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Agent Unavailable Codes\r\n \r\n \r\n \r\n \r\n Agent Unavailable Codes \r\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 AgentUnavailableCodesModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Switch } from '@progress/kendo-inputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass CallDispositionCodesModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({...this.state, showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true });\r\n }\r\n \r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium magni id aliquid, sint blanditiis delectus esse ullam, eligendi recusandae ratione tempore ipsa illum error hic.
\r\n\r\n \r\n Enable Agent Unavailable Codes\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Force use of Agent Codes Unavailable\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n
| Active | \r\nCode | \r\nDescription | \r\nEdit | \r\n|
|---|---|---|---|---|
| \r\n \r\n | \r\nActive | \r\n1 | \r\nLorem ipsum dolor sit amet, consectetur adipisicing eli | \r\n\r\n \r\n | \r\n
| \r\n \r\n Delete Code\r\n \r\n \r\n \r\n Activate Code\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n \r\n | \r\nActive | \r\n1 | \r\nLorem ipsum dolor sit amet, consectetur adipisicing eli | \r\n\r\n \r\n | \r\n
| \r\n \r\n Delete Code\r\n \r\n \r\n \r\n Activate Code\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Call Disposition Codes\r\n \r\n \r\n \r\n \r\n Call Disposition Codes \r\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 CallDispositionCodesModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Switch } from '@progress/kendo-inputs-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass CenterRoutingPoliciesModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({...this.state, showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({...this.state, showModal: true });\r\n }\r\n \r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium magni id aliquid, sint blanditiis delectus esse ullam, eligendi recusandae ratione tempore ipsa illum error hic.
\r\n\r\n \r\n \r\n
\r\n
\r\n | Active | \r\nCode | \r\nDescription | \r\nEdit | \r\n|
|---|---|---|---|---|
| \r\n \r\n | \r\nActive | \r\n1 | \r\nLorem ipsum dolor sit amet, consectetur adipisicing eli | \r\n\r\n \r\n | \r\n
| \r\n \r\n Delete Call Disposition Code\r\n \r\n \r\n \r\n Activate Call Disposition Codes\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n \r\n | \r\nActive | \r\n1 | \r\nLorem ipsum dolor sit amet, consectetur adipisicing eli | \r\n\r\n \r\n | \r\n
| \r\n \r\n Delete Call Disposition Code\r\n \r\n \r\n \r\n Activate Call Disposition Codes\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Contact Center Routing Policies\r\n \r\n \r\n \r\n \r\n Contact Center Routing Policies \r\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 CenterRoutingPoliciesModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass AcceptanceModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium magni id aliquid, sint blanditiis delectus esse ullam, eligendi recusandae ratione tempore ipsa illum error hic.
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | Contact Center Name | \r\nPriority | \r\n
|---|---|
| \r\n Call Center 123322\r\n | \r\n\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Anywhere\r\n \r\n \r\n\r\n \r\n \r\n Anywhere Settings \r\n \r\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 AcceptanceModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n\r\nclass RemoteOfficeModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n Lorem ipsum
\r\n View Available Portal List\r\n\r\n
\r\n \r\n Alert all locations for Click-to-Dial calls\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n | Phone No | \r\nDescription | \r\n\r\n | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| \r\n | 2057062114 | \r\nlorem ipsum | \r\n\r\n | |||||||
| \r\n \r\n Delete\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Enable this Location\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Enable diversion inhibitor\r\n \r\n \r\n \r\n Require Answer Confirmation\r\n \r\n \r\n \r\n Use Call Control Services\r\n \r\n\r\n
| \r\n ||||||||||
| \r\n \r\n Add Anywhere\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Remote Office\r\n \r\n \r\n\r\n \r\n \r\n Remote Office Settings \r\n \r\n \r\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 RemoteOfficeModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass PreAlertModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n Remote Office allows you to use your home phone, your cell phone or even a hotel phone as your business phone. By using the CommPilot Call Manager, you can make phone calls from this remote phone and have them billed to your business. This service also directs all calls coming to your business phone to ring the remote office phone.
\r\n\r\n \r\n
\r\n \r\n Remote Office\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Pre-Alerting Announcement\r\n \r\n \r\n\r\n \r\n \r\n Pre-Alerting Announcement Settings \r\n \r\n \r\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 PreAlertModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass CustomRingbackModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n Pre-alerting Announcement allows you to specify an audio or video announcement to be played to your callers, before the call is actually connected, for specific calls matching your pre-defined criteria. The criteria for each entry can be a list of up to 12 phone numbers or digit patterns, a specified time schedule, and a specified holiday schedule. All criteria for an entry must be satisfied for the announcement to be played (phone number and day of week and time of day). Otherwise, no pre-alerting announcement is played.
\r\n\r\n \r\n
\r\n \r\n Pre-Alerting Announcement\r\n
\r\n\r\n
\r\n\r\n \r\n\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n
| \r\n | Description | \r\nAnnouncement | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Notify\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Play custom ringback?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Call Notification\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Custom Ringback User\r\n \r\n \r\n\r\n \r\n \r\n Custom Ringback User Settings \r\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 CustomRingbackModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass VirtualNumberModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n Custom Ringback User allows you to specify the ringback to be played to your callers, for specific calls matching your pre-defined criteria. Use this service to play a different ringback to your manager, a family member, or a customer. The criteria for each Custom Ringback Selective entry can be a list of up to 12 phone numbers or digit patterns, a specified time schedule, and a specified holiday schedule. All criteria for an entry must be satisfied for the ringback to be played (phone number and day of week and time of day). Otherwise, regular ringback is played to the caller, as if this service was not used.
\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Distinctive Ring\r\n
\r\n | \r\n | Active | \r\nDescription | \r\nTime Schedule | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|---|
| \r\n | Active | \r\nlorem ipsum | \r\nDefault | \r\nJohn | \r\n\r\n |
| \r\n \r\n Delete\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Play custom ringback\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n |||||
| \r\n \r\n Add Criteria\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Virtual Number\r\n \r\n \r\n\r\n \r\n \r\n Virtual Number Settings \r\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 VirtualNumberModal;\r\n","import React from 'react';\r\nimport DepartmentModal from './modals/departmentModal';\r\nimport EnterpriseDirectoryModal from './modals/enterpriseDirectoryModal';\r\nimport ScheduleModal from './modals/scheduleModal';\r\nimport AgentDefaultSettingModal from './modals/agentDefaultSettingModal';\r\nimport AgentUnavailableCodesModal from './modals/agentUnavailableCodesModal';\r\nimport CallDispositionCodesModal from './modals/callDispositionCodesModal';\r\nimport CenterRoutingPoliciesModal from './modals/centerRoutingPoliciesModal';\r\nimport AnywhereModal from './modals/anywhereModal';\r\nimport GroupFqdnModal from './locations/modals/groupFqdnModal';\r\nimport RemoteOfficeModal from './modals/remoteOfficeModal';\r\nimport PreAlertModal from './modals/preAlertModal';\r\nimport CustomRingbackModal from './modals/customRingbackModal';\r\nimport VirtualNumberModal from './modals/virtualNumberModal';\r\n\r\nconst EnterpriseSettings = () => (\r\n \tVirtual Numbers allows up to ten additional phone numbers and extensions to your primary number and extension. All additional numbers ring your phone(s) just like your primary phone. You can specify a distinctive ringing pattern for each number, if your phone supports it. Only your administrator can configure new numbers and extensions for you.
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n\t\t
\r\n)\r\n\r\nexport default EnterpriseSettings;","import React from 'react';\r\nimport DepartmentModal from './modals/departmentModal';\r\nimport ScheduleModal from './modals/scheduleModal';\r\nimport AgentDefaultSettingModal from './modals/agentDefaultSettingModal';\r\nimport AgentUnavailableCodesModal from './modals/agentUnavailableCodesModal';\r\nimport CallDispositionCodesModal from './modals/callDispositionCodesModal';\r\nimport CenterRoutingPoliciesModal from './modals/centerRoutingPoliciesModal';\r\n\r\nconst EnterpriseSettingsAlt = () => (\r\n \t\r\n\t\t\t
\r\n\tEnterprise Settings
\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t
\r\n)\r\n\r\nexport default EnterpriseSettingsAlt;\r\n\t\t\t\t// \r\n\t\t\t
\r\n\tEnterprise Settings
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\tDepartments Edit Settings
\r\n\t\t\t\tEnterprise Directory Edit Settings
\r\n\t\t\t\tTime Schedules Edit Settings
\r\n\t\t\tContact Center
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\tAgent Default Settings Edit Settings
\r\n\t\t\t\tAgent Unavailable Codes Edit Settings
\r\n\t\t\t\tCall Disposition Codes Edit Settings
\r\n\t\t\t\tContact Center Routing Policies Edit Settings
\r\n\t\t\t\r\n
\r\n )\r\n }\r\n\r\n fqdnsTable = () => {\r\n if (this.state.fqdns.length) {\r\n return (\r\n Add and remove Fully Qualified Domain Names (FQDNs) to be used by devices.
\r\n {this.state.status \r\n &&{this.state.status}
\r\n }\r\n \r\n \r\n ✓\r\n \r\n This FQDN format is invalid.\r\n \r\n
\r\n {this.fqdnsTable()}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n } else {\r\n return null\r\n }\r\n }\r\n\r\n fqdnRow = (fqdn) => {\r\n return (\r\n \r\n \r\n \r\n {this.state.fqdns.map((fqdn) => this.fqdnRow(fqdn))}\r\n \r\n
\r\n
\r\n \r\n \r\n FQDN Setup\r\n \r\n \r\n \r\n \r\n FQDN Setup \r\n \r\n \r\n {this.modalBody()}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default FQDNSetupModal;\r\n","import React, { Component } from 'react';\nimport * as settings from './../scripts/session';\nimport * as config from './../requests/config'\nimport ReactDom from 'react-dom';\nimport { DataLoadingSpinner } from './../components/spinners';\nimport { connect } from 'react-redux';\nimport FQDNSetupModal from './locations/modals/fQDNSetupModal';\nimport { fetchData } from \"./../requests/api_calls\";\n\n// 1. Group Features Page - \"MSP_GROUP\"\n// 2. Settings Feature Page - \"MSP_SUBSCRIBER\" + tn param\n// 3. Call Center Page - \"MSP_CC\"\n// 4. Enterprise Page - \"MSP_ENTERPRISE\"\n// 5. Support page - \"MSP_SUPPORT\"\n// 6. Training page - \"MSP_TRAINING\"\n// 7. Payments Pages - \"MSP_PAYMENT\"\nclass IframeSettings extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n loading: true,\n showBillingMessage: false,\n }\n this.handleSubmit = this.handleSubmit.bind(this);\n this.updatePageIframe = this.updatePageIframe.bind(this);\n }\n componentWillReceiveProps() {\n if (!this.state.loading)\n this.setState({ loading: true })\n }\n\n \n componentDidUpdate() {\n //need to replace this with checking if token is valid.\n var user = config.clientApp.getAccount()\n if (this.state.loading && (user || sessionStorage.RPXLogin)) {\n this.updatePageIframe();\n }\n else if (this.state.loading) {\n this.setState({ loading: false })\n }\n }\n\n componentDidMount() {\n var user = config.clientApp.getAccount();\n let iframekey = this.props.match.params.page;\n if (iframekey === 'MSP_PAYMENT' && process.env.REACT_APP_BILLING_MESSAGE && process.env.REACT_APP_BILLING_MESSAGE !== '')\n this.setState({ showBillingMessage: true });\n // else if (iframekey === \"MSP_ENTERPRISE\" && (sessionStorage.userTypeId === \"1107\" || sessionStorage.userTypeId === \"1105\")) {\n // this.fetchTermsAndConditions();\n // }\n else if (user || sessionStorage.RPXLogin) {\n this.updatePageIframe();\n }\n }\n\n updatePageIframe = () => {\n let timeout = setInterval(() => {\n try {\n this.refs.submitform.submit();\n\n let iframeChecker = setInterval(() => {\n try {\n //do not remove this. this will throw a cross-origin exception when the body is loaded. \n //In the catch it will stop the setInterval and hide the loading spinner\n ReactDom.findDOMNode(this.refs.iframe).contentDocument.body;\n } catch (e) {\n clearInterval(iframeChecker);\n this.setState({ loading: false });\n }\n\n }, 2000);\n } catch (e) {\n }\n clearInterval(timeout);\n }, 1000);\n\n\n }\n\n handleSubmit() {\n console.log(\"handleSubmit\");\n }\n\n /*********************************************************************\n * This function supplies a good title attribute for iframes and \n * helps us comply with accessibility standards.\n ********************************************************************/\n getiFrameTitle = (iframekey) => {\n switch (iframekey) {\n case \"MSP_GROUP\":\n return \"Group Features Page\";\n case \"MSP_SUBSCRIBER\":\n return \"Settings Feature Page\";\n case \"MSP_CC\":\n return \"Call Center Page\";\n case \"MSP_ENTERPRISE\":\n return \"Enterprise Page\";\n case \"MSP_SUPPORT\":\n return \"Support Page\";\n case \"MSP_TRAINING\":\n return \"Training Page\";\n case \"MSP_PAYMENT\":\n return \"Payments Page\";\n default:\n return \"MSP Page\";\n }\n }\n\n render() {\n // console.log(\"renderring MSP page\");\n // console.log('component props...')\n let iframekey = this.props.match.params.page;\n let actionUrl = config.baseUrl + \"IFrame.aspx?page=\" + this.props.match.params.page;\n let locationAccNumber = this.props.match.params.LocationAccountNumber;\n let tn = this.props.match.params.tn;\n if (tn) {\n iframekey += \"\" + tn;\n actionUrl = actionUrl + \"&tn=\" + tn;\n }\n if (iframekey !== 'MSP_ENTERPRISE' && locationAccNumber) {\n actionUrl += '&locationID=' + locationAccNumber;\n }\n const VendorId = sessionStorage.getItem('vendorId') || 0;\n iframekey += \"\" + VendorId;\n actionUrl = actionUrl + \"&VendorId=\" + VendorId;\n if (this.state.showBillingMessage === false)\n return (\n \r\n
\r\n \r\n \r\n
\r\n \n
\n );\n else {\n let billingMessage = process.env.REACT_APP_BILLING_MESSAGE;\n return (\n \n {this.getEnterpriseSetting()}\n {this.getGroupSetting(locationAccNumber)}\n {this.state.loading ?
\n \n
\n );\n }\n }\n\n getEnterpriseSetting = () => {\n ////// Commenting this out until devices are released\n // console.log(this.props.match.params.page)\n if (this.props.match.params.page === \"MSP_ENTERPRISE\") {\n return \n
\n {billingMessage}
\n\n
\n }\n }\n\n\n getGroupSetting = (locationAccNum) => {\n //// Commenting this out until devices are released\n // console.log(this.props.match.params.page)\n // if(this.props.match.params.page !== \"MSP_GROUP\") return \"\";\n return \"\";\n // if (helper.showEditGroupFqdnBtn() || helper.showEditGroupVlanBtn()) {\n // return (\n // \n // \n //
\n // )\n // } \n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n AccountNumber: state.reducer.AccountNumber,\n loggedIn: state.reducer.loggedIn\n }\n}\n\nexport default connect(mapStateToProps)(IframeSettings);","export default __webpack_public_path__ + \"static/media/archive.e1c9e589.png\";","export default __webpack_public_path__ + \"static/media/call-center.bbcd1cc6.png\";","export default __webpack_public_path__ + \"static/media/collaborate.2325a994.png\";","export default __webpack_public_path__ + \"static/media/incontact.a11d61f9.png\";","export default __webpack_public_path__ + \"static/media/exchange.9e5177a6.png\";","export default __webpack_public_path__ + \"static/media/ivr.15513340.png\";","export default __webpack_public_path__ + \"static/media/receptionist.1e73d185.png\";","export default __webpack_public_path__ + \"static/media/skype-for-bus.39e8b445.png\";","export default __webpack_public_path__ + \"static/media/voice-analytics.bf3866b0.png\";","import React, { Component } from 'react';\r\nimport { BrowserRouter, Route, Link } from 'react-router-dom';\r\nimport * as settings from './../scripts/session';\r\nimport ReactDom from 'react-dom';\r\n\r\nimport archive from './../images/connect-buttons/archive.png';\r\nimport callCenter from './../images/connect-buttons/call-center.png';\r\nimport collaborate from './../images/connect-buttons/collaborate.png';\r\nimport exchange from './../images/connect-buttons/exchange.png';\r\nimport incontact from './../images/connect-buttons/incontact.png';\r\nimport ivr from './../images/connect-buttons/ivr.png';\r\nimport receptionist from './../images/connect-buttons/receptionist.png';\r\nimport skypeForBus from './../images/connect-buttons/skype-for-bus.png';\r\nimport voiceAnalytics from './../images/connect-buttons/voice-analytics.png';\r\n\r\nclass Support extends Component {\r\n \r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n\tcomponentDidMount() {\r\n \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Support;","import React, { Component } from 'react';\r\nimport * as settings from './../scripts/session';\r\nimport ReactDom from 'react-dom';\r\n\r\nclass Training extends Component {\r\n \r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n\tcomponentDidMount() {\r\n \r\n }\r\n\r\n render() {\r\n\t return (\r\n \r\n
\r\n \r\n
\r\n Support
\r\n\r\n
\r\n \r\n
\r\n
\r\n Have questions about your service?
\r\n \r\n \r\n \r\n \r\n\r\n
Subscribing to Call Recording services?
\r\nClick the link above to launch the Call Recording Administration and Management portal. The portal requires an administrative username and password provided by your service provider. Please contact your administrator or service provider to purchase and configure Call Recording services.
\r\n \r\n Apps
\r\n\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n
\r\n \r\n
\r\n Description: Momentum Mobility is a Unified Communications (UC) application that offers Instant Messaging, Video Conferencing, Call Control, Click-to-Dial, Presence, and Messaging, as well as soft-phone/soft-client functionality. Momentum Mobility instant messaging is federated with Google Chat, so Momentum Mobility users can chat with Gmail/Google Chat users. Application software is supported for both Windows and Mac. Apple iPhone/iPad and Android versions of the software are available for mobile device download from iTunes and Google Play stores.
\r\nSystem requirements for native desktop are as follows:
\r\n- \r\n
- Operating system (OS): Mac OS 10.9 Mavericks, Mac OS 10.10 Yosemite, MAC OS 10.1.1 El Capitan, Windows 7, Windows 8/8.1, or Windows 10 (Classical view only). \r\n
- The installation footprint is approximately 125 megabytes (MB) on OS X and 215 MB on Windows. \r\n
- For voice calls, a sound card, speakers, and a microphone or a headset are required. \r\n
- For video calls, a web cam is required. \r\n
Minimum system requirements for respective operating systems must be fulfilled, with the following additions:
\r\n- \r\n
- A minimum of 2 GB random access memory (RAM) is required. \r\n
- A minimum 1.5 GHz CPU is recommended. Dual-core CPU is recommended for video calls at a minimum. \r\n
- Open Graphics Library (OpenGL) 1.5 or higher is recommended. \r\n
- For HD video, the following is recommended: \r\n
- HD camera \r\n
- HD resolution support in display \r\n
- Quad Core x86 or equivalent at a minimum \r\n
System requirements for Mobile are as follows for Apple iOS and Android:
\r\nCommunicator Release 21.3.1 for iOS supports devices with iOS 7, iOS 8 or iOS 9 running on iPhone 4S and later. The client has been validated on the following reference devices:
\r\n- \r\n
- iPhone 4S – iOS 7.1.2 \r\n
- iPhone 5S – iOS 8.4.1 \r\n
- iPhone 6 – iOS 9.1 \r\n
- iPhone 6 plus – iOS 9.1 \r\n
- iPhone 6s – iOS 9.1 \r\n
- iPhone 6s Plus – iOS 9.1 \r\n
Communicator Mobile Release 21.3.1 for iOS has not been validated on iPods although these devices match the specifications above and the application should work with the exception of the telephony functions.
\r\nCommunicator Mobile Release 21.3.1 for Android supports devices with Android OS 4 or later that conform to the following requirements:
\r\n- \r\n
- Dual-core CPU (or higher) \r\n
- 1 GB RAM (or higher) \r\n
- ARMv7 instruction set \r\n
- Minimum screen resolution 320 x 480 \r\n
- The client has been validated on the following reference devices: \r\n
- Samsung Galaxy S4(GT-I9505) – OS 4.4.2 \r\n
- HTC One M8 – 4.4.4 \r\n
- Motorola Moto G (XT1032) - OS 5.1 \r\n
- Nexus 5X (LG) – OS 6 \r\n
- Nexus 6P (Huawei) – OS 6 \r\n
- Communicator Tablet (Android) Release 21.0.1 support devices with Android 4 OS or later. \r\n
Click here for configuration instructions
\r\n\r\nUnity Desktop
\r\nDescription: Unity Desktop is a Microsoft Windows®-based Unified Communications (UC) application that combines call control, Instant Messaging, voice service configuration, click-to-dial from Outlook Contacts, directory integration and a busy lamp field to enhance the user experience. Featuring an intuitive icon based interface, Unity provides point and click call control within the familiar desktop environment. Unity improves collaboration by bringing users closer to each other and simplifying internal and external communication.
\r\nSystem Requirements: The PC must be running Window 2000, XP SP2 or higher and must have the Microsoft .NET 1.1 framework installed. The PC must also have an internet connection with visibility of the voice network. CPU – single core 2Ghz. Ram – 2MB. GPU 256MB onboard RAM. Apple’s Mac OS is not supported at this time
\r\nConfiguration: Upon installation, you will be prompted to enter a server address, username, and password. Your username and password will be the username and password you use to login to this portal; however, you will append the domain “@mymtm.us\" to the username. See example and other settings below:
\r\n\r\n Server address: app.mymtm.us
\r\n Server port: 2208
\r\n Username (example): 5555551234@mymtm.us or 5555551234X100@mymtm.us
\r\n Password (example): *********\r\n
Licensing: Unity Desktop comes with a 14-day trial license. You will need to contact your administrator or service provider to purchase a permanent license.
\r\nUnity Desktop application download
\r\n \r\nCall Control Toolbar
\r\nDescription: Call Control Toolbar provides access to calling services from a toolbar. This application enables users to place and accept telephone calls and change telephone settings from within Outlook, Internet Explorer and Firefox. This PC-based application is an available Add-on to Executive and Advanced seat types.
\r\nLicensing: You will need to contact your administrator or service provider to purchase a license to use Call Control Toolbar.
\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Training;","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport format from 'string-format';\nimport * as apiCalls from '../requests/api_calls';\nimport moment from 'moment';\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\nimport * as settings from '../scripts/settings';\nimport * as config from '../requests/config';\nimport BSCallLogsTab from '../components/bs_call_logs_tab';\nimport SansayCallLogsTab from '../components/sansay_call_logs_tab';\nimport FaxCallLogsTab from '../components/fax_call_logs_tab';\n\nclass CallLogsAll extends Component {\n constructor(props) {\n super(props);\n this.state = {\n LocationAccountNumber: '',\n BSCallLogs: [],\n SansayCallLogs: [],\n FaxCallLogs: [],\n tab: 'bs',\n loading: false,\n call_category: (sessionStorage.usercl_call_category || \"1\"),\n call_type: (sessionStorage.usercl_call_type || \"1\"),\n status_type: (sessionStorage.usercl_status_type || \"1\"),\n date_type: (sessionStorage.usercl_date_type || \"1\"), // Today\n from_date: (sessionStorage.usercl_from_date ||moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\")),\n to_date: (sessionStorage.usercl_to_date || moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\")),\n PBXUserID: props.match.params.PBXUserID && props.match.params.PBXUserID !== '1' ? props.match.params.PBXUserID : '',\n ServiceNumber: props.match.params.ServiceNumber && props.match.params.ServiceNumber !== '1' ? props.match.params.ServiceNumber : ''\n }\n this.handleCallCategory = this.handleCallCategory.bind(this);\n this.handleCallType = this.handleCallType.bind(this);\n this.handleStatusType = this.handleStatusType.bind(this);\n this.handleDate = this.handleDate.bind(this);\n this.handleChangeFromDate = this.handleChangeFromDate.bind(this);\n this.handleChangeToDate = this.handleChangeToDate.bind(this);\n //this.changeTab = this.changeTab.bind(this);\n };\n\n componentDidMount() {\n this.fetchCallLogs(this.getApiUrl(), settings.noResultsMsg);\n }\n\n componentWillReceiveProps(nextProps) {\n this.setState({ ...{ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: true } });\n this.fetchCallLogs(this.getApiUrl(nextProps), settings.noResultsMsg);\n }\n\n UpdateStoreAndListings = () => {\n settings.setCLFilters(this.state.call_type, this.state.status_type, this.state.call_category, \n this.state.date_type, this.state.from_date, this.state.to_date, this.state.PBXUserID\n );\n this.fetchCallLogs(this.getApiUrl(this.props), settings.noResultsMsg);\n }\n\n getApiUrl() {\n let newParams = this.props.match.params;\n if (newParams.PBXUserID === '1')\n newParams.PBXUserID = '';\n if (newParams.ServiceNumber === '1')\n newParams.ServiceNumber = ''\n\n let finalToDate = this.state.to_date + '%2023:59:59';\n let newOptions = {\n call_type: this.state.call_type,\n status_type: this.state.status_type,\n call_category: this.state.call_category,\n from_date: this.state.from_date,\n to_date: finalToDate\n };\n\n let apiUrl = format('usr/GetCallLogs?LocationAccountNumber={LocationAccountNumber}&PBXUserID={PBXUserID}&ServiceNumber={ServiceNumber}', newParams);\n apiUrl += format('&CallType={call_type}&CallStatus={status_type}&CallCategory={call_category}&FromDate={from_date}&ToDate={to_date}', newOptions);\n return apiUrl;\n }\n\n fetchCallLogs = async (apiPath) => {\n let selectedTab = this.state.tab;\n await this.setState({ loading: true });\n apiCalls.fetchData(apiPath).then(async (data) => {\n if (data !== null && data !== undefined) {\n let { BSCallLogs, SansayCallLogs, FDRCallLogs } = data;\n let CallStatus = this.state.status_type;\n if (BSCallLogs.length === 0 && SansayCallLogs.length > 0)\n selectedTab = 'sansay'\n \n if (SansayCallLogs.length === 0 && BSCallLogs.length > 0) \n selectedTab = 'bs'\n \n if (BSCallLogs.length === 0 && SansayCallLogs.length === 0 && FDRCallLogs.length > 0) {\n selectedTab = 'fax';\n CallStatus = '1';\n }\n\n await this.setState({\n BSCallLogs: this.revisedData(BSCallLogs), \n SansayCallLogs: this.revisedData(SansayCallLogs,true), \n FaxCallLogs: this.revisedData(FDRCallLogs, false, true),\n loading: false, \n tab: selectedTab,\n status_type: CallStatus\n });\n } else this.setState({ BSCallLogs: [], SansayCallLogs: [], FaxCallLogs: [], loading: false });\n }).catch((msg) => console.error(msg));\n }\n\n revisedData = (data, isIPTrunking = false, isFax = false) => {\n let revisedData = [];\n if (isIPTrunking)\n revisedData = data.map((item, idx) => {\n item.Release_Time = new Date(item.Release_Time);\n item.Start_Time = new Date(item.Start_Time);\n return item;\n });\n else if (isFax)\n revisedData = data.map((item, idx) => {\n item.StartTime = new Date(item.StartTime);\n return item;\n });\n else \n revisedData = data.map((item, idx) => {\n item.Date = new Date(item.Date);\n return item;\n });\n\n return revisedData;\n }\n\n handleChangeFromDate = (event) => {\n let from = moment(event.sender._oldText, \"M/D/YYYY\");\n if (from.isValid()) {\n this.setState({ ...{ from_date: from.format(\"YYYY-MM-DD\") } }, () => {\n let to = moment(this.state.to_date);\n if (to.isValid() && to.isSameOrAfter(from)) {\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], loading: true } }, this.UpdateStoreAndListings);\n }\n });\n }\n }\n\n handleChangeToDate = (event) => {\n let to = moment(event.sender._oldText, \"M/D/YYYY\");\n if (to.isValid()) {\n this.setState({ ...{ to_date: to.format(\"YYYY-MM-DD\") } }, () => {\n let from = moment(this.state.from_date);\n if (from.isValid() && from.isSameOrBefore(to)) {\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], loading: true } }, this.UpdateStoreAndListings);\n }\n });\n }\n }\n\n handleDate = (event) => {\n switch (event.target.value) {\n case \"1\":\n this.setState({\n ...{\n SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\n }\n }, this.UpdateStoreAndListings);\n return;\n case \"2\":\n this.setState({\n ...{\n SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(1, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\n to_date: moment(Date.now()).endOf(\"day\").subtract(1, \"days\").format(\"YYYY-MM-DD\"), loading: true\n }\n }, this.UpdateStoreAndListings);\n return;\n case \"3\":\n this.setState({\n ...{\n SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(7, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\n }\n }, this.UpdateStoreAndListings);\n return;\n case \"4\":\n this.setState({\n ...{\n SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(30, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\n }\n }, this.UpdateStoreAndListings);\n return;\n case \"5\":\n this.setState({\n ...{\n SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(90, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\n }\n }, this.UpdateStoreAndListings);\n return;\n case \"6\":\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], date_type: event.target.value, from_date: \"From\", to_date: \"To\" } });\n settings.setCLFilters(this.state.call_type, this.state.status_type, this.state.call_category, \n this.state.date_type, this.state.from_date, this.state.to_date, this.state.PBXUserID\n );\n return;\n }\n }\n\n handleCallCategory = (event) => {\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], call_category: event.target.value, loading: true } }, this.UpdateStoreAndListings);\n }\n\n handleCallType = (event) => {\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], call_type: event.target.value, loading: true } }, this.UpdateStoreAndListings);\n }\n\n handleStatusType = (event) => {\n this.setState({ ...{ SansayCallLogs: [], BSCallLogs: [], FaxCallLogs: [], status_type: event.target.value, loading: true } }, this.UpdateStoreAndListings);\n }\n\n exportSansayBtn = () => {\n if (this.state.tab === 'sansay' && this.state.SansayCallLogs.length > 0) {\n return (\n \r\n
\r\n \r\n
\r\n Training
\r\n\r\n {/*
\r\n \r\n Video Window Placeholder\r\n \r\n
*/}\r\n User Features
\r\n\r\n
\r\n \r\n Anonymous Call Rejection\r\n
\r\n \r\n Anywhere\r\n
\r\n \r\n Barge-In\r\n
\r\n \r\n Call Block\r\n
\r\n \r\n Call Control\r\n
\r\n \r\n Call Forward Selective\r\n
\r\n \r\n Call Forwarding\r\n
\r\n \r\n Call Waiting\r\n
\r\n \r\n Do Not Disturb\r\n
\r\n \r\n Find Me\r\n
\r\n \r\n Hoteling\r\n
\r\n \r\n Voicemail\r\n
\r\n Unified Communications
\r\n\r\n
\r\n \r\n Momentum Messenger\r\n
\r\n Group Features
\r\n\r\n
\r\n \r\n Account/ Authorization Codes\r\n
\r\n \r\n Audio Conferencing\r\n
\r\n \r\n Auto Attendant\r\n
\r\n \r\n Hunt Groups\r\n
\r\n \r\n Time Schedules\r\n
\r\n Devices
\r\n \r\nContact Center
\r\n\r\n
\r\n \r\n Contact Center Agent Client App\r\n
\r\n \r\n Contact Center Supervisor Client App\r\n
\r\n \r\n Contact Center Tutorial 1 of 3\r\n
\r\n \r\n Contact Center Tutorial 2 of 3\r\n
\r\n \r\n Contact Center Tutorial 3 of 3\r\n
\r\n Collaboration Tools
\r\n\r\n
\r\n \r\n Momentum Meeting\r\n
\r\n \n \n \n this.exportCallLogs()} >Export Call Logs\n
\n )\n } else return null;\n }\n\n exportBsBtn = () => {\n if (this.state.tab === 'bs' && this.state.BSCallLogs.length > 0) {\n return (\n \n \n \n this.exportCallLogs()} >Export Call Logs\n
\n )\n } else return null;\n }\n\n exportFaxBtn = () => {\n if (this.state.tab === 'fax' && this.state.FaxCallLogs.length > 0) {\n return (\n \n \n \n this.exportCallLogs()} >Export Call Logs\n
\n )\n } else return null;\n }\n\n exportCallLogs = () => {\n this.refs.downloadCsv.submit();\n this.refs.exportBtn.text = 'Downloading...';\n setTimeout(() => {\n this.refs.exportBtn.text = 'Export Call Logs';\n }, 2000);\n }\n\n extension = () => {\n let ext = this.props.Extension;\n if (ext) {\n return ({ext})\n } else return null;\n }\n\n callLogFilter = (htmlSelect) => {\n return (\n \n {htmlSelect}\n
\n )\n }\n\n tabDisplay = () => {\n if ((this.state.BSCallLogs && this.state.BSCallLogs.length > 0) || (this.state.SansayCallLogs && this.state.SansayCallLogs.length > 0) ||\n (this.state.FaxCallLogs && this.state.FaxCallLogs.length > 0)) {\n return (\n \n 0 ? 'inline-block' : 'none' }}\n className={this.state.tab === \"bs\" ? \"active tab\" : \"tab\"} data-act=\"bs\" onClick={this.changeTab}>Cloud Voice\n 0 ? 'inline-block' : 'none' }}\n className={this.state.tab === \"sansay\" ? \"active tab\" : \"tab\"} data-act=\"sansay\" onClick={this.changeTab}>IP Trunking\n 0 ? 'inline-block' : 'none' }}\n className={this.state.tab === \"fax\" ? \"active tab\" : \"tab\"} data-act=\"fax\" onClick={this.changeTab}>Fax\n
\n )\n } else return;\n }\n\n changeTab = (event) => {\n if (event.target.dataset.act !== this.state.tab) {\n this.setState({ tab: event.target.dataset.act });\n }\n }\n\n getTab() {\n let { tab, BSCallLogs, SansayCallLogs, FaxCallLogs, loading } = this.state;\n switch (tab) {\n case 'bs':\n return (\n \n
\n );\n }\n};\n\nconst mapStateToProps = (state) => {\n return {\n ServiceNumber: state.ServiceNumber,\n Extension: state.Extension\n }\n}\n\nexport default connect(mapStateToProps)(CallLogsAll);","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport Voicemail from './voicemail';\r\nimport VoicemailSettingsButton from './../voicemailSettingsButton'; //move file and change import\r\nimport ManageGreetingsButton from './../manageGreetingsButton';\r\nimport ChangePinModal from './../modals/changePinModal';\r\nimport VoicemailBlockModal from './../modals/voicemailBlockModal';\r\nimport VoicemailDeleteModal from './../modals/voicemailDeleteModal';\r\nimport PinResetButton from './components/pinResetButton';\r\nimport MessageDepositButton from './modals/messageDepositButton'\r\nimport PinResetModal from './modals/pinResetModal';\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport LongSwitch from './../../components/long_switch';\r\nimport SuperLink from './../../components/super_link';\r\nimport { fetchData, postData, postDataWithCustomHeader, post } from './../../requests/api_calls';\r\nimport * as settings from './../../scripts/session';\r\nimport * as config from './../../requests/config'\r\nimport format from 'string-format';\r\nimport { noResultsMsg } from './../../scripts/settings';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst VMsConfirmationMsg = \"Are you sure you want to block all calls and voicemails from these numbers?\";\r\nconst VMConfirmationMsg = \"Are you sure you want to block all calls and voicemails from this number?\";\r\n\r\nclass VoiceMailAll extends Component {\r\n\r\n constructor() {\r\n super();\r\n\r\n this.state = this.initialState();\r\n\r\n this.handleHideSendModal = this.handleHideSendModal.bind(this);\r\n this.handleSend = this.handleSend.bind(this);\r\n this.handleChangeEmailText = this.handleChangeEmailText.bind(this);\r\n\r\n }\r\n\r\n initialState = () => {\r\n return {\r\n enable: false,\r\n voicemail_switch: {\r\n visible: false,\r\n isActive: true,\r\n show_success: false,\r\n show_error: false,\r\n loading: false,\r\n vm_settings: null\r\n },\r\n voicemails: [],\r\n voicemail_count: 0,\r\n voicemail_fetch_error: \"\",\r\n loading: true,\r\n activevm: {\r\n account_number: \"\",\r\n directory_number: \"\",\r\n filename: \"\"\r\n },\r\n sendModal: {\r\n show: false,\r\n emailText: \"\",\r\n emailTextValid: true,\r\n errorMessage: \"\",\r\n loading: false,\r\n },\r\n delete: {\r\n voicemails: [],\r\n error_message: [],\r\n loading: false\r\n },\r\n block: {\r\n voicemails: [],\r\n error_message: [],\r\n show_dialog: false,\r\n show_success: false,\r\n loading: false,\r\n save_result: []\r\n }\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.enableUserMessaging(this.props);\r\n }\r\n\r\n enableUserMessaging = (props) => {\r\n this.setState(this.initialState());\r\n let basicData = { ServiceNumber: this.props.ServiceNumber, PBXUserID: this.props.PBXUserID };\r\n let apiUrl = \"\";\r\n if (this.props.ServiceNumber && this.props.PBXUserID)\r\n apiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}', basicData);\r\n else if (this.props.ServiceNumber)\r\n apiUrl = format('usr/AssignedServices?ServiceNumber={ServiceNumber}', basicData);\r\n else if (this.props.PBXUserID)\r\n apiUrl = format('usr/AssignedServices?PBXUserID={PBXUserID}', basicData);\r\n\r\n // let state = {...this.state};\r\n // state.enable = true;\r\n // state.loading = false;\r\n // this.loadSettings(props);\r\n fetchData(apiUrl).then((data) => {\r\n //console.log('--- ARRAY WITH 52 OBJECTS (line 389) ---', data);\r\n\r\n let state = { ...this.state };\r\n state.enable = false;\r\n state.loading = false;\r\n if (data) {\r\n //console.log(\"user/AssignedServices\");\r\n //console.log(data);\r\n let filterService = data.filter((item) => { return item.ServiceName === \"VoiceMessagingUser\" && item.IsActiveSpecified })\r\n //console.log(filterService);\r\n if (filterService.length > 0) {\r\n let service = filterService[0];\r\n state.enable = true;\r\n state.loading = true;\r\n // if(service.IsActive){\r\n // state.enable = true;\r\n // state.loading = true;\r\n // console.log(\"enableUserMessaging.props\")\r\n // console.log(props);\r\n // this.loadSettings(props);\r\n // }\r\n this.loadSettings(props);\r\n }\r\n }\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.enable = false;\r\n state.loading = false;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n loadSettings = (props) => {\r\n let vmOnOffApi = format('usr/VMSettings?ServiceNumber={ServiceNumber}&PBXUserID={PBXUserID}&AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n fetchData(vmOnOffApi).then((data) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.visible = true;\r\n state.voicemail_switch.vm_settings = data;\r\n if (data !== null) {\r\n // console.log(\"loadSettings\")\r\n // console.log(data);\r\n state.voicemail_switch.isActive = data.isActive;\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n if (state.voicemail_switch.isActive) {\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n //console.log('--- PERSONAL ACCOUNT INFO ---', data);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n else {\r\n state.loading = false;\r\n }\r\n }\r\n else {\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', props);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n\r\n this.setState(state);\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.show_error = true;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n fetchVoiceMails = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n //console.log('--- LIST OF VOICEMAILS ---', data);\r\n\r\n\r\n if (data) {\r\n this.loadData(data);\r\n }\r\n else {\r\n let state = { ...this.state };\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n state.loading = 0;\r\n this.setState(state);\r\n }\r\n }).catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n state.loading = 0;\r\n state.voicemail_fetch_error = message.toString()\r\n });\r\n }\r\n\r\n loadData = (data) => {\r\n // individual VMs, removed the limit of 5\r\n let state = { ...this.state };\r\n\r\n let voicemails_data = this.sortedByDate(data);\r\n // if (data.length > 5) {\r\n // voicemails_data = data.slice(0, 5);\r\n // }\r\n voicemails_data = voicemails_data.map((vm, index) => {\r\n vm.selected = false;\r\n //console.log(vm);\r\n return vm;\r\n });\r\n\r\n state.voicemails = voicemails_data;\r\n state.voicemail_count = data.length;\r\n state.loading = false;\r\n\r\n this.setState(state);\r\n }\r\n\r\n sortedByDate = (data) => {\r\n data.sort((a, b) => new Date(b.DateTimeLocal) - new Date(a.DateTimeLocal));\r\n return data;\r\n }\r\n\r\n handleDeleteModalShow() {\r\n this.setState({ ...{ delete: { voicemails: [], error_message: [], show_dialog: true } } });\r\n }\r\n\r\n handleDeleteVM() {\r\n let selected_voicemails = this.state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.selected;\r\n });\r\n\r\n this.setState({ ...{ delete: { voicemails: selected_voicemails, error_message: [] } } });\r\n selected_voicemails.forEach(element => {\r\n let body = {\r\n AccountNumber: element.AccountNumber,\r\n DirectoryNumber: element.DirectoryNumber,\r\n FileName: element.Location,\r\n access_token: settings.storedAccessToken(),\r\n x_policy: settings.storedXPolicy(),\r\n };\r\n let headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded', \r\n 'Accept': 'text/html'\r\n }\r\n postDataWithCustomHeader(\"vm/VMDelete\", body, headers)\r\n .then(response => {\r\n\r\n let newdeletedvms = this.state.delete.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n\r\n if (response.ok) {\r\n let newvoicemails = this.state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n this.setState({ ...{ voicemails: newvoicemails, voicemail_count: this.state.voicemail_count - 1, delete: { voicemails: newdeletedvms } } });\r\n }\r\n else {\r\n let error_message = this.state.delete.error_message;\r\n error_message.push(response.message);\r\n this.setState({ ...{ delete: { error_message: error_message, voicemails: newdeletedvms } } });\r\n }\r\n\r\n })\r\n .catch((message) => {\r\n let newdeletedvms = this.state.delete.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.Location != element.Location;\r\n });\r\n\r\n let error_message = this.state.delete.error_message;\r\n error_message.push(message.toString());\r\n this.setState({ ...{ delete: { error_message: error_message, voicemails: newdeletedvms } } });\r\n });\r\n });\r\n }\r\n\r\n handleBlockModalShow() {\r\n this.setState({ ...{ block: { voicemails: [], error_message: [], show_dialog: true, show_success: false, loading: false, save_result: [] } } });\r\n }\r\n\r\n handleBlockModalClose() {\r\n let state = { ...this.state };\r\n state.voicemails.forEach((vmLocal, index) => {\r\n vmLocal.selected = false;\r\n });\r\n state.block.voicemails = [];\r\n state.block.error_message = [];\r\n state.block.show_dialog = false;\r\n state.block.show_success = false;\r\n state.block.loading = false;\r\n state.block.save_result = [];\r\n this.setState(state);\r\n }\r\n\r\n handleBlockVM() {\r\n let state = { ...this.state };\r\n let selected_block_numbers = state.voicemails.filter((vmLocal, index) => {\r\n return vmLocal.selected;\r\n }).map(e => e.FromPhone);\r\n state.block.voicemails = selected_block_numbers;\r\n state.block.error_message = [];\r\n state.block.loading = true;\r\n this.setState(state);\r\n\r\n let body = {\r\n BlockNumbers: selected_block_numbers,\r\n AccountNumber: this.props.AccountNumber,\r\n DirectoryNumber: this.props.DirectoryNumber,\r\n PBXUserID: this.props.PBXUserID,\r\n };\r\n\r\n body = JSON.stringify(body);\r\n let header = {\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy(),\r\n 'Content-Type': 'application/json',\r\n 'Accept': 'application/json'\r\n }\r\n post(\"vm/VMBlock\", \"POST\", body, header)\r\n .then(response => {\r\n let state = { ...this.state };\r\n state.block.loading = false;\r\n state.block.show_success = response.ok;\r\n if (!response.ok)\r\n state.block.error_message.push(\"Failed to save\");\r\n else {\r\n state.block.save_result = JSON.parse(response.message);\r\n }\r\n this.setState(state);\r\n })\r\n .catch((message) => {\r\n let state = { ...this.state };\r\n state.block.loading = false;\r\n state.block.error_message.push(\"Failed to save\");\r\n state.block.show_success = false;\r\n this.setState(state);\r\n });\r\n\r\n }\r\n\r\n handleChangeEmailText(event) {\r\n let sendModal = this.state.sendModal;\r\n sendModal.emailText = event.target.value;\r\n sendModal.errorMessage = \"\";\r\n sendModal.emailTextValid = true;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n }\r\n\r\n validateEmail() {\r\n return this.state.sendModal.emailText.match(/^([\\w.%+-]+)@([\\w-]+\\.)+([\\w]{2,})$/i);\r\n }\r\n\r\n handleSend() {\r\n let sendModal = this.state.sendModal;\r\n\r\n if (!this.validateEmail()) {\r\n sendModal.emailTextValid = false;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n return;\r\n }\r\n\r\n sendModal.emailTextValid = true;\r\n sendModal.loading = true;\r\n sendModal.errorMessage = null;\r\n this.setState({ ...{ sendModal: sendModal } });\r\n\r\n let body = {\r\n AccountNumber: this.state.activevm.account_number,\r\n DirectoryNumber: this.state.activevm.directory_number,\r\n FileName: this.state.activevm.filename,\r\n ToEmail: this.state.sendModal.emailText,\r\n access_token: settings.storedAccessToken(),\r\n x_policy: settings.storedXPolicy(),\r\n };\r\n\r\n let headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded', \r\n 'Accept': 'text/html'\r\n }\r\n\r\n postDataWithCustomHeader(\"vm/VMForward\", body, headers)\r\n .then(response => {\r\n if (response.ok) {\r\n this.setState({ ...{ sendModal: { show: false, emailText: \"\", errorMessage: \"\" } } });\r\n }\r\n else {\r\n this.setState({ ...{ sendModal: { show: true, emailText: this.state.sendModal.emailText, errorMessage: \"Error: Please contact administrator\" } } });\r\n }\r\n }\r\n ).catch((message) => {\r\n this.setState({ ...{ sendModal: { show: true, emailText: this.state.sendModal.emailText, errorMessage: \"Error: Please contact administrator\" } } });\r\n\r\n });\r\n }\r\n\r\n handleHideSendModal() {\r\n\r\n let sendModal = this.state.sendModal;\r\n sendModal.show = false;\r\n sendModal.emailText = \"\";\r\n this.setState({ ...{ sendModal: sendModal } });\r\n }\r\n\r\n handledSelectChanged = (vm, event) => {\r\n let voicemails_data = this.state.voicemails.map((vmLocal, index) => {\r\n if (vmLocal.Location === vm.Location) {\r\n vmLocal.selected = !vmLocal.selected;\r\n }\r\n return vmLocal;\r\n });\r\n let state = { ...this.state };\r\n state.voicemails = voicemails_data;\r\n console.log(\"handledSelectChanged\");\r\n console.log(state);\r\n this.setState(state);\r\n }\r\n\r\n handleShowSendModal = (vm, event) => {\r\n let activevm =\r\n {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n let sendModal = this.state.sendModal;\r\n sendModal.show = true;\r\n sendModal.emailText = \"\";\r\n sendModal.emailTextValid = true;\r\n sendModal.errorMessage = \"\";\r\n this.setState({ ...{ sendModal: sendModal, activevm: activevm } });\r\n }\r\n\r\n handleDownload = (vm, event) => {\r\n let activevm = {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n this.setState({ ...{ activevm: activevm } });\r\n\r\n setTimeout(() => {\r\n this.refs.downloadSubmit.submit();\r\n }, 500);\r\n }\r\n\r\n handlePlay = (vm, event) => {\r\n let activevm = {\r\n account_number: vm.AccountNumber,\r\n directory_number: vm.DirectoryNumber,\r\n filename: vm.Location\r\n };\r\n this.setState({ ...{ activevm: activevm } });\r\n\r\n setTimeout(() => {\r\n this.refs.playSubmit.submit();\r\n }, 500);\r\n }\r\n\r\n onHandleVoicemail = (event) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.isActive = event.target.checked;\r\n state.voicemail_switch.loading = true;\r\n state.voicemail_switch.show_success = false;\r\n state.voicemail_switch.show_error = false;\r\n\r\n state.voicemail_switch.vm_settings.isActive = event.target.checked\r\n this.setState(state);\r\n\r\n let body = JSON.stringify(state.voicemail_switch.vm_settings);\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n post(\"usr/VMSettings\", \"POST\", body)\r\n .then(response => {\r\n let state = { ...state };\r\n state.voicemail_switch.loading = false;\r\n if (response.ok) {\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n state.voicemails = [];\r\n state.voicemail_count = 0;\r\n\r\n if (state.voicemail_switch.isActive) {\r\n state.loading = true;\r\n let apiUrl = format('vm/VMList?AccountNumber={AccountNumber}&DirectoryNumber={DirectoryNumber}', this.props);\r\n this.fetchVoiceMails(apiUrl);\r\n }\r\n else {\r\n state.loading = false;\r\n }\r\n }\r\n else {\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n }\r\n this.setState(state);\r\n })\r\n .catch((message) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.loading = false;\r\n state.voicemail_switch.show_success = true;\r\n state.voicemail_switch.show_error = false;\r\n this.setState(state);\r\n });\r\n }\r\n\r\n handleVMSettingChange = (vmSetting) => {\r\n let state = { ...this.state };\r\n state.voicemail_switch.isActive = vmSetting.isActive;\r\n this.setState(state);\r\n }\r\n\r\n errorMessage() {\r\n if (!this.state.sendModal.loading && this.state.sendModal.errorMessage && this.state.sendModal.errorMessage !== \"\")\r\n return \n
\n \n
\n \n
\n \n Call Logs\n {this.props.ServiceNumber} {this.extension()}\n
\n\n {this.exportSansayBtn()}\n {this.exportBsBtn()}\n {this.exportFaxBtn()}\n
\n \n {this.tabDisplay()}\n
\n \n {this.callLogFilter()}\n {this.callLogFilter()}\n {this.callLogFilter()}\n {\n (this.state.date_type === \"6\") ?\n (
\n \n
)\n : \"\"\n }\n \n
\n \n
\n \n
\n \n {this.getTab()}\n
\n {this.state.sendModal.errorMessage}
;\r\n\r\n if (!this.state.sendModal.emailTextValid)\r\n return Invalid Email
;\r\n\r\n return \"\";\r\n }\r\n\r\n sendModalLoading() {\r\n if (this.state.sendModal.loading)\r\n return {message}
\r\n });\r\n\r\n // let vm_block_error_body = \r\n // (\r\n // {\r\n // this.state.block.error_message.map((message, index)=>{ \r\n // return
);\r\n\r\n // let vm_block_error_body = this.state.block.error_message.map((message, index)=>{ \r\n // return {message}
\r\n // })\r\n // }\r\n // {message}
\r\n // });\r\n\r\n // Decide which confirmation message will be displayed on the block calls modal\r\n let confirmationMsg = selectedVMcount > 1 ? VMsConfirmationMsg : VMConfirmationMsg;\r\n\r\n return (Success!
\r\n \r\n }\r\n\r\n let showError = \"\";\r\n if (vm_switch.show_error) {\r\n showError = The switch failed! Please try again.
\r\n }\r\n\r\n let showLoading = \"\"\r\n if (vm_switch.loading) {\r\n showLoading = \r\n
;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n getVoiceMailAction = () => {\r\n if (!this.state.enable)\r\n return \"\";\r\n return (\r\n
\r\n \r\n
);\r\n }\r\n\r\n voicemailsTable = () => {\r\n if (this.state.voicemail_switch.visible && !this.state.voicemail_switch.isActive)\r\n return ();\r\n\r\n if (this.state.voicemails.length > 0) {\r\n return (\r\n | \r\n | \r\n | Play | \r\nPhone | \r\nDate | \r\n\r\n |
|---|
\r\n Voicemail is a not a feature of this service\r\n
\r\n )\r\n }\r\n else {\r\n return (\r\n\r\n No recent voicemails\r\n
\r\n )\r\n }\r\n }\r\n\r\n vmTable() {\r\n return (\r\nTable Here
\r\n )\r\n }\r\n\r\n render() {\r\n let playUrl = config.baseApiUrl + \"vm/VMPlay\";\r\n let saveUrl = config.baseApiUrl + \"vm/VMSave\";\r\n if (this.state.loading) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n let voiceCount = \"\"\r\n if (this.state.enable)\r\n voiceCount = this.state.voicemail_count;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
Voicemail
\r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n AccountNumber: state.reducer.AccountNumber,\r\n DirectoryNumber: state.reducer.DirectoryNumber,\r\n ServiceNumber: state.reducer.ServiceNumber,\r\n PBXUserID: state.reducer.PBXUserID\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(VoiceMailAll);","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n\r\nclass ChangePinModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n Change Pin\r\n\r\n \r\n
\r\n {this.getVoiceMailAction()}\r\n\r\n\r\n \r\n Send Voicemail \r\n \r\n \r\n \r\n \r\n
\r\n {this.sendModalLoading()}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
Voicemail {voiceCount}
\r\n\r\n {this.getVoiceMailOnOff()}\r\n
\r\n \r\n {this.voicemailsTable()}\r\n
\r\n \r\n Delete Selected |\r\n Forward Selected\r\n
\r\n {/*\r\n
*/}\r\n \r\n {this.getVoiceMailAction()}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \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.errorMessage()}\r\n \r\n {this.sendModalLoading()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \n
\n \n
\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ApiStatuses;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { Tooltip } from '@progress/kendo-popups-react-wrapper';\r\n\r\n\r\nclass AnnouncementRepositoryModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.state = { showModal:false, deleteable: false };\r\n this.changeAction = this.changeAction.bind(this);\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeAction(event){\r\n this.setState({deleteable: true})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n | Status | \r\nMessage | \r\nMethod | \r\nURL | \r\nPARAMS | \r\n
|---|
\r\n \r\n Announcement Repository\r\n \r\n \r\n \r\n \r\n Announcement Repository \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n deleteRow() {\r\n if (this.state.deleteable){ \r\n return (\r\n \r\n
\r\n Announcement repository allows you to manage all the audio announcements
\r\n\r\n \r\n \r\n
\r\n
\r\n | \r\n | Description | \r\nFile Type | \r\nFile Size | \r\nPlay | \r\n\r\n |
|---|---|---|---|---|---|
| \r\n | Cool Desc | \r\n.wav | \r\n36mb | \r\n\r\n | \r\n \r\n |
| \r\n \r\n | \r\n|||||
| \r\n | Cool Desc | \r\n.wav | \r\n36mb | \r\n\r\n | \r\n \r\n |
| \r\n \r\n | \r\n|||||
| \r\n File Storage: used 14 MB. available 984 MB.\r\n | \r\n|||||
| \r\n \r\n Add Announcement\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Call Block\r\n \r\n \r\n\r\n \r\n \r\n Call Block \r\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 CallBlockModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass CallNotifyModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Call Block rejects calls that meet your pre-defined criteria. Callers meeting these criteria will hear an automated message advising them that you cannot be reached. Use this feature to prevent nuisance calls.
\r\n| \r\n | Description | \r\nBlock | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Block\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Reject Call?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Block\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Reject Call?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Call Block\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Call Notify\r\n \r\n \r\n\r\n \r\n \r\n Call Notify \r\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 CallNotifyModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n
\r\n\r\n \r\n
\r\n
\r\n Call Notify allows you to receive email notifications containing specific callers’ names and numbers based on predefined criteria.
\r\n\r\n \r\n \r\n
\r\n \r\n
| \r\n | Description | \r\nCall Notify | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Notify\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Activate Call Notify?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Notify\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Activate Call Notify?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Call Notify\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Activate Call Notify?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Call Notification\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Call Transfer\r\n \r\n \r\n\r\n \r\n \r\n Call Transfer \r\n \r\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 CallTransferModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n
\r\n
\r\n The Call Transfer service enables a user to transfer a call to a specified destination. Call transfer can be blind, with third-party consultation, or with three-way consultation. In addition, Busy Camp On and Call Transfer Recall features allow users to camp the call to transfer on a busy destination and recall the transferring party if the transferred call is not answered for any reason. Another option, diversion inhibitor enables users to prevent transferred calls from being redirected.
\r\n\r\n
\r\n
\r\n \r\n \r\n Call transfer Recall\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Use Busy Camp On\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Use Diversion inhibitor for Blind Transfer\r\n
\r\n \r\n \r\n Use Diversion inhibitor for Consultative Calls\r\n
\r\n \r\n \r\n
\r\n \r\n Collaborate Bridge\r\n \r\n \r\n\r\n \r\n \r\n Collaborate Bridge \r\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 CollaborateBridgeModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DateTimePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\n\r\n\r\nclass ConferenceListModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeType = this.changeType.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeType(event){\r\n this.setState({typeValue: event.target.value})\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n Collaborate Bridge is your “My Room” audio conferencing dial-in that supports conference calls of up to 60 participants.
\r\n\r\n
Your Collaborate Bridge Details:
\r\n Name: Collaborate Bridge 1249195
\r\n Supports Outdial: Yes
\r\n Phone Number: 123 123 1234 #1111
\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n Instant Rooms Common Configuration Settings
\r\n\r\n \r\n Play tone on arrival and exit?\r\n
\r\n \r\n \r\n End room session when owner leaves\r\n
\r\n \r\n \r\n Require owner to start room session\r\n
\r\n \r\n
| Room Type | \r\nRoom ID | \r\nName | \r\n\r\n |
|---|---|---|---|
| My Room | \r\n12345 | \r\nMy Room | \r\n\r\n |
| \r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Conference List\r\n \r\n \r\n\r\n \r\n \r\n Conference List \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getConferenceType(){\r\n switch(this.state.typeValue){\r\n case \"onetime\":\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n Add, delete, and manage individual conferences, as well as download conference recordings.
\r\n Download Microsoft Outlook Add-in\r\n\r\n
| \r\n | Name | \r\nTitle | \r\nBridge | \r\nStatus | \r\nType | \r\nStart Time | \r\nRecording | \r\nModerate | \r\n\r\n | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| \r\n | Name | \r\nTitle | \r\nBridge | \r\nStatus | \r\nType | \r\nStart Time | \r\nRecordings | \r\nModerate | \r\n\r\n | ||||||||||||
| \r\n \r\n \r\n
| \r\n |||||||||||||||||||||
| \r\n \r\n \r\n For security, please enter your account password and click Launch Moderate Conference button to launch the moderator portal. \r\n\r\n\r\n \r\n \r\n \r\n \r\n Launch Moderator Tool\r\n \r\n | \r\n |||||||||||||||||||||
| \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Mute Participants on Entry\r\n \r\n \r\n \r\n End conference when moderator leaves\r\n \r\n \r\n \r\n Moderator required to start\r\n \r\n \r\n \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.getConferenceType()}\r\n \r\n \r\n \r\n | \r\n |||||||||||||||||||||
| \r\n | Name | \r\nTitle | \r\nBridge | \r\nStatus | \r\nType | \r\nStart Time | \r\nRecordings | \r\nModerate | \r\n\r\n | ||||||||||||
| \r\n \r\n \r\n
| \r\n |||||||||||||||||||||
| \r\n \r\n \r\n For security, please enter your account password and click Launch Moderate Conference button to launch the moderator portal. \r\n\r\n\r\n \r\n \r\n \r\n \r\n Launch Moderator Tool\r\n \r\n | \r\n |||||||||||||||||||||
| \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Mute Participants on Entry\r\n \r\n \r\n \r\n End conference when moderator leaves\r\n \r\n \r\n \r\n Moderator required to start\r\n \r\n \r\n \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.getConferenceType()}\r\n \r\n \r\n \r\n | \r\n |||||||||||||||||||||
| \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n case \"recurring\":\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n ); \r\n case \"reservationless\":\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n ); \r\n }\r\n }\r\n};\r\n\r\n\r\nexport default ConferenceListModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {console.log(\"value changed to:\" + e.sender.value())}}\r\n />\r\n
\r\n \r\n \r\n Direct Call Pickup with Barge-in\r\n \r\n \r\n\r\n \r\n \r\n Direct Call Pickup with Barge-in Settings \r\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 DirectCallModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\n// \r\n
\r\n
\r\n Directed Call Pickup with Barge-in (DPUBI) allows users to dial a feature access code (FAC) followed by an extension to pickup (answer) a call directed to another user in the same customer group (or enterprise, if the group is part of an enterprise), or barge in on the call if the call was already answered. When a barge-in occurs, a three-way call is established between the parties with the DPUBI user as the controller.
\r\n\r\n
\r\n \r\n Barge-in Warning Tone\r\n
\r\n \r\n \r\n Automatic Target Selection\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Hoteling Guest\r\n \r\n \r\n\r\n \r\n \r\n Hoteling Guest \r\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 HotelingGuestModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n
\r\n
\r\n Hoteling Guest allows a user to associate their service profile with a Hoteling Host user. This allows the guest user to use the host's device with the guest user's service profile. This is useful for transient employees.
\r\n\r\n
\r\n \r\n Hoteling Guest\r\n
\r\n \r\n \r\n Limit Association\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Hoteling Host\r\n \r\n \r\n\r\n \r\n \r\n Hoteling Host \r\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 HotelingHostModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass PriorityAlertModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n
\r\n Hoteling Host allows a user to be designated as a host user. A user, who is assigned the hoteling guest service, can then be associated to the host user. When associated, the host user allows the guest user to use the host's device with the guest's service profile. If association limit is not enforced, the Guest user is allowed to associate with the Host user indefinitely.
\r\n\r\n
Associated Guest:
\r\n Name: Jared Malan
\r\n 123 123 1234 #1111
\r\n Associated on 17 Dec 2017
\r\n
\r\n
\r\n \r\n \r\n Hoteling Host\r\n
\r\n \r\n \r\n Enforce Association Limit 24 Hours\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Priority Alert\r\n \r\n \r\n\r\n \r\n \r\n Priority Alert \r\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 PriorityAlertModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\n// \r\n \r\n \r\n
\r\n
\r\n Priority Alert service enables a user to define criteria to have certain incoming calls trigger distinctive alerting.
\r\n| \r\n | Description | \r\nPriority Alert | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Priority Alert\r\n \r\n \r\n \r\n Use Priority Alert\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n5555 | \r\n\r\n |
| \r\n \r\n Delete Priority Alert\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Use Priority Alert\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Priority Alert\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Privacy\r\n \r\n \r\n\r\n \r\n \r\n Privacy \r\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 PrivacyModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass receptionistDashboardModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ab modi necessitatibus illo, tempore corrupti!
\r\n\r\n
\r\n \r\n Enable Directory Privacy\r\n
\r\n \r\n \r\n Enable Auto Attendant Extention Dialing Privacy\r\n
\r\n \r\n \r\n Enable Auto Attendant Name Dialing Privacy\r\n
\r\n \r\n \r\n Enable Phone Status Privacy\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Receptionist Dashboard\r\n \r\n \r\n\r\n \r\n \r\n Receptionist Dashboard \r\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 receptionistDashboardModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass SelectiveCallAcceptanceModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n Select users whom you want to monitor presence status.
\r\n Go to Client App\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Selective Call Acceptance\r\n \r\n \r\n\r\n \r\n \r\n Selective Call Acceptance \r\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 SelectiveCallAcceptanceModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n \r\n \r\n
\r\n
\r\n Call Block rejects calls that meet your pre-defined criteria. Callers meeting these criteria will hear an automated message advising them that you cannot be reached. Use this feature to prevent nuisance calls.
\r\n| \r\n | Description | \r\nAccept | \r\nCall From | \r\n\r\n |
|---|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\nAll Calls | \r\n\r\n |
| \r\n \r\n Delete Call Acceptance\r\n \r\n \r\n \r\n Accept Call?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\nAll Calls | \r\n\r\n |
| \r\n \r\n Delete Call Acceptance\r\n \r\n \r\n \r\n Accept Call?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Call Block\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Speed Dial\r\n \r\n \r\n\r\n \r\n \r\n Speed Dial \r\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 SpeedDialModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n// \r\n
\r\n\r\n \r\n
\r\n
\r\n Speed Dial allows you to set up quick dial shortcuts for your most frequent calls.
\r\n Export Contacts\r\n\r\n
| \r\n | Name | \r\nPhone Number | \r\nSpeed Dial | \r\n\r\n |
|---|---|---|---|---|
| \r\n | Joe Single | \r\n123 123 1234 | \r\n01 | \r\n\r\n |
| \r\n \r\n Delete Speed Dial Contact\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Note: Some Speed Dial codes conflict with certain Feature Access Codes. See below for a list of conflicting Speed Dial codes that completely over-ride their Feature Access Code functionality when active: \r\n \r\n \r\n \r\n #31 Calling Line ID Delivery Blocking Persistent Deactivation \r\n \r\n #40 Call Forwarding Busy To Voice Mail Deactivation \r\n #41 Call Forwarding No Answer To Voice Mail Deactivation \r\n #43 Call Waiting Persistent Deactivation \r\n #58 Group Call Park \r\n #70 Night Service Activation Manual Override \r\n #71 Night Service Deactivation Manual Override \r\n #72 Forced Forwarding Activation \r\n #73 Forced Forwarding Deactivation \r\n #76 Call Forwarding Selective Activation \r\n #77 Call Forwarding Selective Deactivation \r\n #80 Make Outgoing Call as Call Center \r\n #81 Make Personal Outgoing Call \r\n #83 Escalate Call to Supervisor \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n | Joe Single | \r\n123 123 1234 | \r\n01 | \r\n\r\n |
| \r\n \r\n Delete Speed Dial Contact\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Note: Some Speed Dial codes conflict with certain Feature Access Codes. See below for a list of conflicting Speed Dial codes that completely over-ride their Feature Access Code functionality when active: \r\n \r\n \r\n \r\n #31 Calling Line ID Delivery Blocking Persistent Deactivation \r\n \r\n #40 Call Forwarding Busy To Voice Mail Deactivation \r\n #41 Call Forwarding No Answer To Voice Mail Deactivation \r\n #43 Call Waiting Persistent Deactivation \r\n #58 Group Call Park \r\n #70 Night Service Activation Manual Override \r\n #71 Night Service Deactivation Manual Override \r\n #72 Forced Forwarding Activation \r\n #73 Forced Forwarding Deactivation \r\n #76 Call Forwarding Selective Activation \r\n #77 Call Forwarding Selective Deactivation \r\n #80 Make Outgoing Call as Call Center \r\n #81 Make Personal Outgoing Call \r\n #83 Escalate Call to Supervisor \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n | \r\n ||||
| \r\n \r\n Add Contact\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Call Forwarding\r\n \r\n \r\n\r\n \r\n \r\n Call Forwarding \r\n \r\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 CallForwardingModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass CallForwardingSelectiveModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n Forward your calls to another number.
\r\n\r\n
\r\n \r\n Call Forward Always\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Call Forward Don't Answer\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Call Forward Busy Line\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Call Forward Not Reachable\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Call Forwarding Selective\r\n \r\n \r\n\r\n \r\n \r\n Call Forwarding Selective \r\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 CallForwardingSelectiveModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass FindMeSimultaneousModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.handleAddSimNumber = this.handleAddSimNumber.bind(this);\r\n this.state = { \r\n showModal: false, \r\n numberOfPhoneCount:1, \r\n numberOfSimCount:1, \r\n numberOfPhoneLimit:10\r\n };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n handleAddSimNumber(){\r\n if(this.state.numberOfSimCount < 10)\r\n this.setState({ numberOfSimCount: this.state.numberOfSimCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n let simNumberCountReachLimit = this.state.numberOfSimCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ab modi necessitatibus illo, tempore corrupti!
\r\n\r\n \r\n Call Forwarding Selective\r\n
\r\n \r\n \r\n Play ring reminder when a call is forwarded\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
| \r\n | Description | \r\nActive | \r\n\r\n |
|---|---|---|---|
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Selective Criteria\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n |||
| \r\n | NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Selective Criteria\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n |||
| \r\n \r\n Add Selective Call Forwarding\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Find Me - Simultaneous\r\n \r\n \r\n\r\n \r\n \r\n Find Me - Simultaneous \r\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 FindMeSimultaneousModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\n\r\nclass FindMeSequentialModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.handleAddSimNumber = this.handleAddSimNumber.bind(this);\r\n this.state = { \r\n showModal: false, \r\n numberOfPhoneCount:1, \r\n numberOfSimCount:1, \r\n numberOfPhoneLimit:10\r\n };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n handleAddSimNumber(){\r\n if(this.state.numberOfSimCount < 10)\r\n this.setState({ numberOfSimCount: this.state.numberOfSimCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n let simNumberCountReachLimit = this.state.numberOfSimCount >= this.state.numberOfPhoneLimit;\r\n return (\r\n \r\n
\r\n
\r\n
\r\n Forward your calls to up to ten alternate locations.
\r\n\r\n
\r\n \r\n Simultaneous Ring\r\n
\r\n \r\n \r\n Do not ring my simultaneous ring numbers if I'm already on a call\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n | Description | \r\nSimultaneous Ring | \r\n\r\n |
|---|---|---|
| NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Criteria\r\n \r\n \r\n \r\n Use Simultaneous Ring?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||
| NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Criteria\r\n \r\n \r\n \r\n Use Simultaneous Ring?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||
| \r\n \r\n \r\n \r\n | \r\n
| Phone Number | \r\nAnswer Confirmation Required | \r\n
|---|---|
| \r\n | \r\n |
| \r\n \r\n Add additional phone number\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Find Me - Sequential\r\n \r\n \r\n\r\n \r\n \r\n Find Me - Sequential \r\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 FindMeSequentialModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';\r\n\r\n\r\nclass PushToTalkModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n Forward your calls to up to five alternate locations.
\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n | Description | \r\nSimultaneous Ring | \r\n\r\n |
|---|---|---|
| NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Criteria\r\n \r\n \r\n \r\n Use Simultaneous Ring?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||
| NuisancerCaller_91234 | \r\nYes | \r\n\r\n |
| \r\n \r\n Delete Criteria\r\n \r\n \r\n \r\n Use Simultaneous Ring?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {_.times(this.state.numberOfPhoneCount, i =>\r\n \r\n Add additional phone number\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n | \r\n ||
| \r\n \r\n Add Simultaneous Ring Criteria\r\n \r\n | \r\n
\r\n \r\n Use base location first \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Continue the search process if the base location is busy.\r\n
\r\n \r\n \r\n Enable caller to skip search process. \r\n Forwarding or messaging must be enabled.\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Do not ring my simultaneous ring numbers if I'm already on a call\r\n
\r\n \r\n
| Phone Number | \r\nNumber of Rings | \r\nAnswer Confirmation Required | \r\n
|---|---|---|
| \r\n | \r\n \r\n | \r\n\r\n |
| \r\n \r\n Add additional phone number\r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Push To Talk\r\n \r\n \r\n\r\n \r\n \r\n Push To Talk \r\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 PushToTalkModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass ContactCenterModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n Push to Talk allows people to call each other and have the call answered automatically via speakerphone/intercom. You can define which users have Push to Talk access to your phone.
\r\n\r\n
\r\n \r\n Auto Answer\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Contact Center\r\n \r\n \r\n\r\n \r\n \r\n Contact Center \r\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 ContactCenterModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass ClientAppModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ab modi necessitatibus illo, tempore corrupti!
\r\n\r\n
Contact Center Service Assigned: Premium
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Make outgoing calls as another number\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Force agent to unavailable on Do Not Disturb activation\r\n
\r\n \r\n \r\n Force agent to unavailable after consecutive bounced calls\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n | Join | \r\nContact Center ID | \r\nPhone Number | \r\nExt | \r\nSkill Level | \r\n
|---|---|---|---|---|
| \r\n | 123123123@test.com | \r\n123 123 1234 | \r\n123 | \r\n10 | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Client App\r\n \r\n \r\n\r\n \r\n \r\n Client App \r\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 ClientAppModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass VoicemailToTextModal extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n To access the Contact Center Agent or Supervisor client applications, please click the link above. You will be prompted to enter a username and password. Your username and password will be the username and password you use to login to this portal; however, you will append the domain “@mymtm.us\" to the username. See example and other settings below:
\r\nUsername (example): 5555551234@mymtm.us or 555551234X100@mymtm.us
\r\n Password (example): *********
Please contact your administrator or service provider to purchase Contact Center Agent and Supervisor client applications.
\r\n Go To Client App\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n Transcribe Voicemail\r\n \r\n \r\n\r\n \r\n \r\n Transcribe Voicemail \r\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 VoicemailToTextModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\n\r\nclass DistributionListModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.handleAddPhoneNumber = this.handleAddPhoneNumber.bind(this);\r\n this.handleAddList = this.handleAddList.bind(this);\r\n this.state = { showModal: false, numberOfPhoneCount:1, numberOfPhoneLimit:10, numberOfListCount: 1, numberOfListLimit: 15 };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n handleAddPhoneNumber(){\r\n if(this.state.numberOfPhoneCount < 10)\r\n this.setState({ numberOfPhoneCount: this.state.numberOfPhoneCount + 1 });\r\n }\r\n handleAddList(){\r\n if(this.state.numberOfListCount < 15)\r\n this.setState({ numberOfListCount: this.state.numberOfListCount + 1 });\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n let phoneNumberCountReachLimit = this.state.numberOfPhoneCount >= this.state.numberOfPhoneLimit;\r\n let listCountReachLimit = this.state.numberOfListCount >= this.state.numberOfListLimit;\r\n return (\r\n \r\n
\r\n \r\n \r\n Transcribe Voicemail\r\n
\r\n \r\n \r\n \r\n
\r\n To complete the configuration and setup of the service please insert the email address, vm2text@atlvm.voipinternetcable.net, into the voicemail to email Unified Messaging, Forward, or carbon copy fields of “Voicemail” above.
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n Distribution List\r\n \r\n \r\n\r\n \r\n \r\n Distribution List \r\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 DistributionListModal;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport VoicemailSettingsModal from './modals/voicemailSettingsModal';\r\n\r\n\r\nclass VoicemailSettingsRow extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n this.changeForward = this.changeForward.bind(this);\r\n\r\n this.state = { \r\n showModal: false, \r\n forwardValue: \"\" ,\r\n voice_messaging: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"VoiceMessage\",\r\n label: \"Voice Messaging\"\r\n },\r\n send_all_calls_to_vm: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"SendAllCallsToVoicemail\",\r\n\t\t\t\tlabel: \"Send All Calls to Voicemail\"\r\n },\r\n send_busy_calls_to_vm: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"SendBusyCallsToVoicemail\",\r\n\t\t\t\tlabel: \"Send Busy Calls to Voicemail\"\r\n\t\t\t\t\r\n },\r\n send_unanswered_calls_to_vm: {\r\n forward_value: null,\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"SendUnansweredCallstoVoicemail\",\r\n label: \"Send Unanswered Calls to Voicemail\"\r\n },\r\n notify_me_email_when_new_messages_arrive: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"NotifyMebyEmailwhennewmessagesarrive\",\r\n label: \"Notify me by Email when new messages arrive\",\r\n email: null\r\n },\r\n email_carbon_copy_message: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"EmailaCarbonCopyoftheMessage\",\r\n label: \"Email a carbon copy of the message\",\r\n email: null\r\n },\r\n transfer_on_0_to_phone_number: {\r\n\t\t\t\tselected: false,\r\n\t\t\t\tloading: true,\r\n\t\t\t\tshow_success: false,\r\n show_error: false,\r\n api: \"Transfer_0_to_Phone_Number\",\r\n label: \"Transfer on '0' to Phone Number\",\r\n email: null\r\n }, \r\n };\r\n }\r\n\r\n changeOnOffValue =(setting, event)=>{\r\n let checked = event.target.checked;\r\n setting.selected = checked;\r\n switch(setting.details.api){\r\n case this.state.voice_messaging.details.api:\r\n this.setState({...{voice_messaging: setting}})\r\n break;\r\n case this.state.send_all_calls_to_vm.details.api:\r\n this.setState({...{send_all_calls_to_vm: setting}})\r\n break;\r\n case this.state.send_busy_calls_to_vm.details.api:\r\n this.setState({...{send_busy_calls_to_vm: setting}})\r\n break;\r\n case this.state.send_unanswered_calls_to_vm.details.api:\r\n this.setState({...{send_unanswered_calls_to_vm: setting}})\r\n break;\r\n case this.state.notify_me_email_when_new_messages_arrive.details.api:\r\n this.setState({...{notify_me_email_when_new_messages_arrive: setting}})\r\n break;\r\n case this.state.email_carbon_copy_message.details.api:\r\n this.setState({...{email_carbon_copy_message: setting}})\r\n break;\r\n case this.state.transfer_on_0_to_phone_number.details.api:\r\n this.setState({...{transfer_on_0_to_phone_number: setting}})\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n changeEmailValue =(setting, event)=>{\r\n let email = event.target.value.trim();\r\n setting.email = email;\r\n switch(setting.api){\r\n case this.state.send_unanswered_calls_to_vm.api:\r\n this.setState({...{send_unanswered_calls_to_vm: setting}})\r\n break;\r\n case this.state.notify_me_email_when_new_messages_arrive.api:\r\n this.setState({...{notify_me_email_when_new_messages_arrive: setting}})\r\n break;\r\n case this.state.email_carbon_copy_message.api:\r\n this.setState({...{email_carbon_copy_message: setting}})\r\n break;\r\n case this.state.transfer_on_0_to_phone_number.api:\r\n this.setState({...{transfer_on_0_to_phone_number: setting}})\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n \r\n handleSave() {\r\n\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n changeForward(event){\r\n let setting = this.state.send_unanswered_calls_to_vm;\r\n setting.forward_value = event.target.value;\r\n this.setState({...{send_unanswered_calls_to_vm: setting}})\r\n }\r\n\r\n componentDidMount() { \r\n }\r\n\r\n render() {\r\n \r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n Distribution lists allow you to send a message to multiple people. You can have up to 15 lists.
\r\n| \r\n | Distribution List | \r\n\r\n | |||
|---|---|---|---|---|---|
| \r\n | Soccer Team | \r\n\r\n | |||
| \r\n \r\n Delete Distribution List\r\n \r\n
| \r\n |||||
| \r\n \r\n Add Distribution List\r\n \r\n | \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Voicemail Settings\r\n \r\n \r\n\r\n \r\n \r\n Voicemail Settings \r\n \r\n \r\n this.changeOnOffValue(e, b)} \r\n onHandleChangeEmail={(e,b) => this.changeEmailValue(e, b)}\r\n onHandleChangeForward={this.changeForward}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getForwardOption(){\r\n switch(this.state.forwardValue){\r\n case \"multiple\":\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n case \"single\":\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\nexport default VoicemailSettingsRow;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport ManageGreetingsModal from './modals/manageGreetingsModal';\r\n\r\n\r\nclass ManageGreetingsRow extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Manage Greetings\r\n \r\n \r\n\r\n \r\n \r\n Manage Greetings \r\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 ManageGreetingsRow;\r\n","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nclass PinResetRow extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\r\n this.handleShow = this.handleShow.bind(this);\r\n this.handleClose = this.handleClose.bind(this);\r\n\r\n this.state = { showModal: false };\r\n }\r\n\r\n handleClose() {\r\n this.setState({ showModal: false });\r\n }\r\n\r\n handleShow() {\r\n this.setState({ showModal: true });\r\n }\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Reset Voicemail Pin\r\n \r\n \r\n\r\n \r\n \r\n Reset Voicemail Pin \r\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 PinResetRow;\r\n","import React from 'react';\r\n\r\nimport AnnouncementRepositoryModal from './modals/announcementRepositoryModal';\r\nimport AcceptanceModal from './modals/anywhereModal.js';\r\nimport CallBlockModal from './modals/callBlockModal';\r\nimport CallNotifyModal from './modals/callNotifyModal';\r\nimport CallTransferModal from './modals/callTransferModal';\r\nimport CollaborateBridgeModal from './modals/collaborateBridgeModal';\r\nimport ConferenceListModal from './modals/conferenceListModal';\r\nimport DirectCallModal from './modals/directCallModal';\r\nimport HotelingGuestModal from './modals/hotelingGuestModal';\r\nimport HotelingHostModal from './modals/hotelingHostModal';\r\nimport PriorityAlertModal from './modals/priorityAlertModal';\r\nimport PrivacyModal from './modals/privacyModal';\r\nimport ReceptionistDashboardModal from './modals/receptionistDashboardModal';\r\nimport SelectiveCallAcceptanceModal from './modals/selectiveCallAcceptanceModal';\r\nimport SpeedDialModal from './modals/speedDialModal';\r\nimport CallForwardingModal from './modals/callForwardingModal';\r\nimport CallForwardingSelectiveModal from './modals/callForwardingSelectiveModal';\r\nimport FindMeSimultaneousModal from './modals/findMeSimultaneousModal';\r\nimport FindMeSequentialModal from './modals/findMeSequentialModal';\r\nimport PushToTalkModal from './modals/pushToTalkModal';\r\nimport ContactCenterModal from './modals/contactCenterModal';\r\nimport CustomRingbackModal from './modals/customRingbackModal';\r\nimport RemoteOfficeModal from './modals/remoteOfficeModal';\r\nimport ClientAppModal from './modals/clientAppModal';\r\nimport VoicemailToTextModal from './modals/voicemailToTextModal';\r\nimport EnterpriseDirectoryModal from './modals/enterpriseDirectoryModal';\r\nimport ScheduleModal from './modals/scheduleModal';\r\nimport DistributionListModal from './modals/distributionListModal';\r\nimport VoicemailSettingsRow from './voicemailSettingsRow';\r\nimport VirtualNumberModal from './modals/virtualNumberModal';\r\nimport PreAlertModal from './modals/preAlertModal';\r\nimport ManageGreetingsRow from './manageGreetingsRow';\r\nimport PinResetRow from './pinResetRow';\r\n\r\nconst EnterpriseSettings = () => (\r\n \t\r\n
\r\n Click the Reset button below to temporarily reset your Voicemail PIN to 8642. When you access your voicemail with this temporary PIN, you will be prompted to assign a new PIN.
\r\n Reset Voicemail Pin\r\n\r\n
\r\n \r\n
\r\n \r\n\t\t
\r\n)\r\n\r\nexport default EnterpriseSettings;","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { store } from '../../store/store';\r\nimport { fetchData } from './../../requests/api_calls';\r\nimport { userIsAdmin } from './../../scripts/helper';\r\nimport * as settings from './../../scripts/settings';\r\nimport { DataLoadingSpinner } from './../../components/spinners';\r\nimport * as actions from '../../store/actions';\r\n\r\nclass MyServices extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userServices: [],\r\n ServiceId: props.ServiceId ? parseInt(props.ServiceId) : 0,\r\n SelectedUserId: props.SelectedUserId ? parseInt(props.SelectedUserId) : 0,\r\n selectedService: null,\r\n loading: false\r\n };\r\n\r\n this.updateMyServicesMenu = this.updateMyServicesMenu.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n let apiPath = 'usr/MyServices';\r\n let userId = (this.props.SelectedUserId || sessionStorage.SelectedUserId);\r\n if (userIsAdmin() && userId) \r\n apiPath += '?UserId=' + userId;\r\n this.fetchMyServices(apiPath);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if(this.serviceHasChanged(prevProps) && !this.loading) {\r\n let apiPath = 'usr/MyServices';\r\n let userId = (this.props.SelectedUserId || sessionStorage.SelectedUserId);\r\n if (userId) apiPath += '?UserId=' + userId;\r\n this.fetchMyServices(apiPath);\r\n } else if (prevProps.serviceLoading !== this.props.serviceLoading) {\r\n store.dispatch({type: actions.SERVICES_SET});\r\n }\r\n }\r\n\r\n serviceHasChanged = (prevProps) => {\r\n return this.firstServiceSelected(prevProps) || this.newServiceSelected(prevProps);\r\n }\r\n\r\n firstServiceSelected = (prevProps) => this.props.SelectedUserId && prevProps.SelectedUserId === undefined;\r\n\r\n newServiceSelected = (prevProps) => {\r\n return this.props.SelectedUserId && prevProps.SelectedUserId && \r\n this.props.SelectedUserId.toString() !== prevProps.SelectedUserId.toString()\r\n }\r\n\r\n updateMyServicesMenu = (data) => {\r\n let currentServiceId = this.props.ServiceId;\r\n if (this.selectedServiceAlreadyInMenu()) {\r\n this.setState({loading: false, ServiceId: currentServiceId});\r\n } else {\r\n // update service in MyServices Menu\r\n let selectedServiceId = 0;\r\n if (data && data.length > 0) {\r\n data.map((service, idx) => {\r\n if (service.ServiceId === currentServiceId)\r\n selectedServiceId = service.ServiceId;\r\n });\r\n }\r\n this.setState({userServices: data, ServiceId: selectedServiceId, loading: false});\r\n }\r\n }\r\n\r\n selectedServiceAlreadyInMenu = () => {\r\n let matchingItemsInMenu = this.state.userServices.filter(item => {\r\n return item.ServiceId === this.props.ServiceId;\r\n });\r\n return matchingItemsInMenu.length > 0;\r\n }\r\n\r\n fetchMyServices = (apiPath) => {\r\n \r\n fetchData(apiPath).then((data) => {\r\n if (data) {\r\n this.storeServiceProperties(data);\r\n this.updateMyServicesMenu(data);\r\n store.dispatch({type: actions.SERVICES_SET});\r\n } else if (data === null && userIsAdmin() ) {\r\n let noService = {\r\n ServiceId: 0,\r\n ServiceNumber: '', \r\n SelectedUserId: sessionStorage.SelectedUserId,\r\n AccountNumber: sessionStorage.userEnterpriseNumber,\r\n DirectoryNumber:'',\r\n PBXUserID: '',\r\n Extension: '',\r\n isSelectedServiceIpTrunking: false\r\n };\r\n settings.setService(noService);\r\n this.setState({userServices: [], loading: false});\r\n store.dispatch({type: actions.SERVICES_SET});\r\n }\r\n \r\n });\r\n }\r\n\r\n storeServiceProperties = (data) => {\r\n let serviceIdentifier = this.props.ServiceNumber || this.props.Extension;\r\n if (userIsAdmin() && serviceIdentifier || this.state.selectedService) {\r\n let selectedService = this.matchSelectedService(data, serviceIdentifier);\r\n if(selectedService) settings.setService(selectedService);\r\n } else { // non admin will default to first service unless service was clicked in MyServices\r\n if (this.state.ServiceId) {\r\n let selectedService = this.matchByServiceId(data);\r\n settings.setService(selectedService);\r\n } else if (data && data.length > 0){\r\n let firstService = data[0];\r\n settings.setService(firstService);\r\n }\r\n }\r\n }\r\n\r\n matchByServiceId = (data) => {\r\n // used when service is activated from MyServices\r\n let matches = data.filter((service) => service.ServiceId === this.state.ServiceId);\r\n if (matches.length) {\r\n return matches[0];\r\n } else {\r\n return data[0];\r\n }\r\n }\r\n\r\n matchSelectedService = (data, serviceIdentifier) => {\r\n let selectedService = data.filter((service) => service.ServiceNumber === serviceIdentifier);\r\n if(selectedService.length > 0)\r\n selectedService = selectedService[0];\r\n else\r\n selectedService = null;\r\n\r\n if (!selectedService) {\r\n selectedService = data.filter((service) => service.Extension === serviceIdentifier);\r\n if(selectedService.length > 0)\r\n selectedService = selectedService[0];\r\n else\r\n selectedService = null;\r\n }\r\n return selectedService;\r\n }\r\n\r\n serviceLink = (service, index) => {\r\n let anchorClassName = 'nav-item';\r\n let serviceNameClassName = 'name';\r\n if (this.state.loading) {\r\n anchorClassName = 'nav-item disabled';\r\n serviceNameClassName = 'disabled';\r\n }\r\n if (this.isDefaultOrSelectedService(service)) {\r\n anchorClassName = \"nav-item selected\"\r\n }\r\n return (\r\n this.setServiceAndRedirect(service)}>\r\n {service.ServiceNumber}\r\n {this.extension(service)}\r\n {service.PackageName}\r\n \r\n )\r\n }\r\n\r\n isDefaultOrSelectedService = (service) => {\r\n return (service.ServiceId > 0 && this.state.ServiceId > 0 && service.ServiceId === this.state.ServiceId) ||\r\n (this.state.loading && this.state.ServiceId === service.ServiceId);\r\n }\r\n\r\n extension = (service) => {\r\n let ext = service.Extension;\r\n if (ext && service.ServiceNumber) {\r\n return ({ext})\r\n } else if (ext) {\r\n return {ext}\r\n } else return null;\r\n }\r\n\r\n setServiceAndRedirect = async (service) => {\r\n if (!this.state.loading) {\r\n await this.setState({ServiceId: service.ServiceId});\r\n settings.selectService(service.UserId, service.ServiceNumber, service.PBXUserID);\r\n this.props.history.push('/dashboard');\r\n }\r\n }\r\n\r\n servicesMenuLabel = () => {\r\n if ((this.props.SelectedUserId && this.props.UserId && this.props.SelectedUserId === this.props.UserId && userIsAdmin() )\r\n || (this.props.SelectedUserId && !userIsAdmin())\r\n ){\r\n return \r\n\t\t\t
\r\n\tService Settings
\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t
\r\n\t\tMy Services
\r\n } else {\r\n return User Services
\r\n }\r\n }\r\n\r\n serviceLinksClass = () => {\r\n if (this.state.loading && !this.selectedServiceAlreadyInMenu()) {\r\n return 'hidden'\r\n } else {\r\n return 'service-links'\r\n }\r\n }\r\n\r\n render() {\r\n if ( this.state.userServices.length > 0 ) {\r\n let userServices = this.state.userServices.map((service, i) => this.serviceLink(service, i) );\r\n return (\r\n \r\n
\r\n ) \r\n } else return null\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n SelectedUserId: state.reducer.SelectedUserId,\r\n ServiceNumber: state.reducer.ServiceNumber,\r\n ServiceId: state.reducer.ServiceId,\r\n Extension: state.reducer.Extension,\r\n serviceLoading: state.reducer.serviceLoading\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(withRouter(MyServices));","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { fetchData } from \"./../../requests/api_calls\";\r\nimport { store } from \"./../../store/store\";\r\nimport { connect } from \"react-redux\";\r\nimport { userIsAdmin, userIsContactManager } from \"./../../scripts/helper\";\r\nimport * as actions from \"./../../store/actions\";\r\nimport * as icons from \"./../../scripts/icons\";\r\nimport * as session from \"../../scripts/session\";\r\nimport { checkBillingAccount } from \"../../utility/utility\";\r\nimport * as apiCalls from \"../../requests/api_calls\";\r\n\r\nconst IsWholesaleUser = session.IsWholesale();\r\n\r\nclass AdminMenu extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n permissions: {},\r\n hasTrunking: false,\r\n hasContactCenter: false,\r\n hasMacd: false,\r\n hasDevices: false,\r\n hasIpTrunk: false,\r\n hasTicketing: \"NONE\",\r\n hasVmUsageReport: false,\r\n Header: \"Admin Tools\",\r\n hasAtLeastOneAdminLink: false,\r\n permissionsRetrieved: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n // avoids 401 error by not calling for non admin\r\n //TODO - limit to one API call for access to various pages\r\n if (userIsAdmin()) {\r\n this.buildPermissions();\r\n this.setState({ hasAtLeastOneAdminLink: true });\r\n } else {\r\n this.buildSubscriberPermissions();\r\n }\r\n }\r\n\r\n componentWillReceiveProps = (props) => {\r\n let state = this.state;\r\n if (\r\n state.hasContactCenter !== props.hasContactCenter ||\r\n state.hasTrunking !== props.hasTrunking ||\r\n state.hasDevices !== props.hasDevices ||\r\n state.hasDevices !== props.hasDevices ||\r\n state.hasMacd !== props.hasMacd ||\r\n state.hasIpTrunk !== props.hasIpTrunk ||\r\n state.hasTicketing !== props.hasTicketing ||\r\n state.permissionsRetrieved !== props.permissionsRetrieved\r\n ) {\r\n this.setState({\r\n hasContactCenter: props.hasContactCenter,\r\n hasTrunking: props.hasTrunking,\r\n hasMacd: props.hasMacd,\r\n hasDevices: props.hasDevices,\r\n hasIpTrunk: props.hasIpTrunk,\r\n hasTicketing: props.hasTicketing,\r\n permissionsRetrieved: props.permissionsRetrieved,\r\n });\r\n }\r\n };\r\n\r\n buildSubscriberPermissions = async () => {\r\n let hasAtLeastOneAdminLink = false;\r\n let ID = sessionStorage.PBXUserID ? sessionStorage.PBXUserID : \"\";\r\n let accNum = this.props.LocationAccountNumber;\r\n\r\n let apiPath = `admin/GetEnterpriseLeftMenuLayout?PBXUserId=${ID}&LocationAccountNumber=${accNum}`;\r\n fetchData(apiPath)\r\n .then(async (data) => {\r\n await this.setState({\r\n hasAtLeastOneAdminLink: hasAtLeastOneAdminLink,\r\n Header: \"Admin Tools\",\r\n permissions: data,\r\n hasMacd: data.AllowMACDs == 1 ? true : false,\r\n hasDevices: data.NEPSSettings.NepsPermitted\r\n });\r\n //\r\n if (data.TicketingPermission !== \"NONE\") {\r\n hasAtLeastOneAdminLink = true;\r\n }\r\n if (sessionStorage.IsWholesale === \"true\") {\r\n hasAtLeastOneAdminLink = true;\r\n }\r\n //\r\n sessionStorage.setItem(\r\n \"hasCallRecordingMenu\",\r\n data.HasCallRecordingMenu == 1 ? true : false\r\n );\r\n sessionStorage.setItem(\r\n \"hasCallRecordingService\",\r\n data.HasCallRecordingService == 1 ? true : false\r\n );\r\n sessionStorage.setItem(\r\n \"hasContactCenter\",\r\n data.HasContactCenter == 1 ? true : false\r\n );\r\n if (data && !IsWholesaleUser) {\r\n sessionStorage.setItem(\"hasTicketing\", data.TicketingPermission);\r\n }\r\n if (data.TicketingPermission !== \"NONE\") {\r\n hasAtLeastOneAdminLink = true;\r\n }\r\n if (sessionStorage.IsWholesale === \"true\") {\r\n // wrote condition this way (instead of using IsWholesaleUser var at the top) because there seems to be async issue when the string is converted to a boolean\r\n hasAtLeastOneAdminLink = true;\r\n }\r\n store.dispatch({ type: actions.PERMISSIONS_UPDATED });\r\n })\r\n .catch((err) => console.error(err));\r\n\r\n };\r\n\r\n buildPermissions = async () => {\r\n console.log(\"build permissions...\");\r\n let ID = sessionStorage.PBXUserID ? sessionStorage.PBXUserID : \"\";\r\n let accNum = this.props.LocationAccountNumber ? this.props.LocationAccountNumber : \"\";\r\n\r\n let apiPath = `admin/GetEnterpriseLeftMenuLayout?PBXUserId=${ID}&LocationAccountNumber=${accNum}`;\r\n await fetchData(apiPath)\r\n .then(async (data) => {\r\n await this.setState({\r\n permissions: data,\r\n hasMacd: data.AllowMACDs == 1 ? true : false,\r\n hasDevices: data.NEPSSettings.NepsPermitted,\r\n });\r\n //Start MACD\r\n // if any MACD Permissions equal 1, then show the \"Service Changes\" link\r\n // unless permissions that are not valid for Wholesale users are included\r\n let permsObj = {\r\n addServices:\r\n data && data.MACDSettings.Add_Services && !IsWholesaleUser\r\n ? data.MACDSettings.Add_Services\r\n : 0,\r\n assignUserAddons:\r\n data && data.MACDSettings.Assign_UserAddons\r\n ? data.MACDSettings.Assign_UserAddons\r\n : 0,\r\n changeTfTerminatingNumber: 0,\r\n changeVnTerminatingNumber:\r\n data && data.MACDSettings.ChangeVN_TerminatingNumber\r\n ? data.MACDSettings.ChangeVN_TerminatingNumber\r\n : 0,\r\n changeAddress: 0,\r\n changeBillingInfo: 0,\r\n changeBlock:\r\n data && data.MACDSettings.Change_Block\r\n ? data.MACDSettings.Change_Block\r\n : 0,\r\n changeCNAM:\r\n data && data.MACDSettings.Change_CNAM\r\n ? data.MACDSettings.Change_CNAM\r\n : 0,\r\n changeCallPathCount: 0,\r\n changeExtension:\r\n data && data.MACDSettings.Change_Extension && !IsWholesaleUser\r\n ? data.MACDSettings.Change_Extension\r\n : 0,\r\n changeLineType:\r\n data && data.MACDSettings.Change_LineType && !IsWholesaleUser\r\n ? data.MACDSettings.Change_LineType\r\n : 0,\r\n changeListing:\r\n data && data.MACDSettings.Change_Listing && !IsWholesaleUser\r\n ? data.MACDSettings.Change_Listing\r\n : 0,\r\n changeSeatType:\r\n data && data.MACDSettings.Change_SeatType && !IsWholesaleUser\r\n ? data.MACDSettings.Change_SeatType\r\n : 0,\r\n disconnectServices: 0,\r\n unassignUserAddons:\r\n data && data.MACDSettings.Unassign_UserAddons\r\n ? data.MACDSettings.Unassign_UserAddons\r\n : 0,\r\n ipTrunkCallPathBurst:\r\n data && data.MACDSettings.Change_IPTrunking_CallPathPlan_and_Count\r\n ? data.MACDSettings.Change_IPTrunking_CallPathPlan_and_Count\r\n : 0,\r\n };\r\n\r\n sessionStorage.setItem(\r\n \"hasTrunk\",\r\n data.HasTrunking == 1 ? true : false\r\n );\r\n sessionStorage.setItem(\r\n \"hasContactCenter\",\r\n data.HasContactCenter == 1 ? true : false\r\n );\r\n sessionStorage.setItem(\"MacdPerms\", JSON.stringify(permsObj));\r\n // if any NEPS permissions are 1, show the \"Devices\" link\r\n sessionStorage.setItem(\r\n \"DevicePerms\",\r\n JSON.stringify(data.NEPSSettings)\r\n );\r\n sessionStorage.setItem(\r\n \"hasDevices\",\r\n data.NEPSSettings.NepsPermitted == true ? true : false\r\n );\r\n\r\n //Start IP Trunking\r\n if (data) {\r\n sessionStorage.setItem(\"hasIpTrunk\", data.HasIpTrunking == 1 ? true : false);\r\n }\r\n // Start Ticketing\r\n // Returns \"NONE\", \"READONLY\", or \"FULL\". ***\r\n // I did some quick testing with new ticketing permission.\r\n // For a SuperAdmin all works as before.\r\n // But, for a user login you should probably call the new API to get permission, and if not \"NONE\" you should add the ticketing menu to the left menu bar.\r\n // Then enable update/create/delete operations on tickets only of the permission is \"FULL\".\r\n if (data && !IsWholesaleUser) {\r\n sessionStorage.setItem(\"hasTicketing\", data.TicketingPermission);\r\n }\r\n //End Ticketing\r\n sessionStorage.setItem(\"hasMacd\", data.AllowMACDs == 1 ? true : false)\r\n // Start VM Usage Report\r\n sessionStorage.setItem(\r\n \"hasVmUsageReport\",\r\n data.ShowVoiceMailReport == 1 ? true : false\r\n );\r\n\r\n // End VM Usage Report\r\n\r\n //Start Ent Trunking\r\n sessionStorage.setItem(\r\n \"hasEntTrunking\",\r\n data.ShowEnterpriseTrunk === 1 ? true : false\r\n );\r\n\r\n sessionStorage.setItem(\r\n \"hasActiveDirectory\",\r\n data.ShowActiveDirectory === 1 ? true : false\r\n );\r\n\r\n //End AD Sync\r\n sessionStorage.setItem(\r\n \"hasTeams\",\r\n data.MSTeamsRoutingType == \"NONE\" ? false : true\r\n );\r\n\r\n sessionStorage.setItem(\r\n \"hasCallRecordingMenu\",\r\n data.HasCallRecordingMenu == 1 ? true : false\r\n );\r\n sessionStorage.setItem(\r\n \"hasCallRecordingService\",\r\n data.HasCallRecordingService == 1 ? true : false\r\n );\r\n\r\n sessionStorage.setItem(\r\n \"hasCircuits\",\r\n data.EnterpriseType === \"VOICE\" ? false : true\r\n );\r\n\r\n sessionStorage.setItem(\r\n \"hasWebEx\",\r\n data.IsWebExAllowed == 1 ? true : false\r\n );\r\n\r\n // Start Locations\r\n await fetchData(\"admin/Locations\")\r\n .then((locations) => {\r\n //\r\n sessionStorage.setItem(\"locationList\", JSON.stringify(locations));\r\n //\r\n let ipTrunkTest = locations.filter((resp) => resp.IsIPTrunking === false);\r\n if (!ipTrunkTest || ipTrunkTest.length === 0) {\r\n sessionStorage.setItem(\"isIpTrunkingOnly\", true);\r\n }\r\n store.dispatch({ type: actions.IP_TRUNKING_ONLY_SET });\r\n })\r\n .catch((err) => {\r\n console.error(err);\r\n store.dispatch({ type: actions.IP_TRUNKING_ONLY_SET });\r\n });\r\n //End Locations\r\n })\r\n .catch((err) => console.error(err));\r\n store.dispatch({ type: actions.PERMISSIONS_UPDATED });\r\n };\r\n\r\n serviceChangesLink = () => {\r\n if (this.state.permissions.AllowMACDs) {\r\n return (\r\n \r\n {this.servicesMenuLabel()}\r\n
\r\n \r\n {userServices}\r\n
\r\n \r\n \r\n {this.state.Header}\r\n
\r\n {this.menuLink(\"/admin\", icons.dashboard, \"Dashboard\")}\r\n {this.billingLink()}\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n {this.state.Header}\r\n
\r\n {this.menuLink(\"/admin\", icons.dashboard, \"Dashboard\")}\r\n {this.LocationsLink(\r\n { pathname: \"/locations\", state: {} },\r\n icons.locations,\r\n \"Locations & Groups\"\r\n )}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" &&\r\n this.menuLink(\r\n \"/services\",\r\n icons.servicesAndUsers,\r\n \"Services & Users\"\r\n )}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.devicesLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.trunkingLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" &&\r\n this.menuLink(\r\n \"/iframe_page/MSP_ENTERPRISE\",\r\n icons.enterpriseSettings,\r\n \"Enterprise Settings\"\r\n )}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" &&\r\n this.contactCenterLink()}\r\n {this.billingLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.ipTrunkingLink()}\r\n {this.ticketingLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.documentsLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.addressBookLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.entTrunkLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.adLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.msTeamsLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" &&\r\n this.callRecordingLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" && this.webExLink()}\r\n {this.circuitsMonitioringLink()}\r\n {/* {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"VOICE\" &&\r\n this.circuitDevicesLink()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"VOICE\" &&\r\n this.circuitMapLink()} */}\r\n {this.mfaAdminTool()}\r\n {this.state.permissions.EnterpriseType && this.state.permissions.EnterpriseType !== \"DATA\" &&\r\n this.serviceChangesLink()}\r\n \r\n );\r\n }\r\n } else {\r\n // test w/ non-admin user\r\n return (\r\n \r\n \r\n {this.state.Header}\r\n
\r\n {this.contactCenterLink()}\r\n {this.ticketingLink()}\r\n {this.addressBookLink()}\r\n {this.documentsLink()}\r\n {this.callRecordingLink()}\r\n \r\n );\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n LocationAccountNumber: state.reducer.AccountNumber,\r\n hasTrunking: state.reducer.hasTrunking,\r\n hasContactCenter: state.reducer.hasContactCenter,\r\n hasMacd: state.reducer.hasMacd,\r\n hasDevices: state.reducer.hasDevices,\r\n hasIpTrunk: state.reducer.hasIpTrunk,\r\n hasTicketing: state.reducer.hasTicketing,\r\n permissionsRetrieved: state.reducer.permissionsRetrieved,\r\n };\r\n};\r\nexport default connect(mapStateToProps)(AdminMenu);","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport { store } from '../../store/store';\r\nimport { userIsAdmin } from './../../scripts/helper';\r\nimport * as settings from './../../scripts/settings';\r\nimport { training_url} from \"../../constants/urls\"\r\nimport {support_url} from \"../../constants/urls\"\r\nimport * as session from \"../../scripts/session\";\r\nimport { checkBillingAccount } from '../../utility/utility';\r\n\r\nclass HelpCenter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n }\r\n\r\n\r\n userSelected = () => {\r\n // user was selected in another component and updated in redux store\r\n let newUserId = this.props.UserId;\r\n let currentUserId = this.state.UserId;\r\n if (newUserId !== currentUserId) {\r\n // only make a new API call if the selected user has changed\r\n let apiPath = 'usr/MyServices?UserId=' + newUserId;\r\n this.setState({UserId: newUserId})\r\n this.fetchMyServices(apiPath)\r\n }\r\n }\r\n\r\n subscriberSettings = () => {\r\n \tif (this.props.ServiceNumber) {\r\n \t\treturn (\r\n\t \r\n\t Subscriber Settings\r\n\t \r\n \t\t)\r\n \t} else {\r\n\t \treturn null;\r\n \t}\r\n \t\t\r\n }\r\n\r\n render() {\r\n const isWholesale = session.IsWholesale();\r\n if (!isWholesale && !checkBillingAccount()) {\r\n return (\r\n \r\n {/*
\r\n ) \r\n } else return null;\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ServiceNumber: state.reducer.ServiceNumber\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(HelpCenter);","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport SaveStatus from '../../../components/save_status';\r\nimport * as helper from '../../../scripts/helper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\nexport default class ManageTrunkModal extends Component {\r\n \r\n initialState = (props = null) => {\r\n return {\r\n TrunkGroupId: 0,\r\n TrunkCustomerProductId: 0,\r\n LocationAccountNumber: '',\r\n loading: false,\r\n saving: false,\r\n error: false,\r\n statusMessage: '',\r\n showModal: false,\r\n DIDAssigned: [],//fakeAssigned,\r\n DIDUnassigned: [],\r\n DIDPending: [],\r\n SelectedAssigned: [],\r\n SelectedUnassigned: [],\r\n SelectedPending: [],\r\n TrunkGroupOptions: [],\r\n TrunkGroups: props ? props.TrunkGroups : []\r\n };\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n this.OpenModal = this.OpenModal.bind(this);\r\n this.CloseModal = this.CloseModal.bind(this);\r\n this.fetchTrunkGroups = this.fetchTrunkGroups.bind(this);\r\n this.RetrieveDataForAssociations = this.RetrieveDataForAssociations.bind(this);\r\n this.SubmitChanges = this.SubmitChanges.bind(this);\r\n this.handleSelection = this.handleSelection.bind(this);\r\n this.handleTransition = this.handleTransition.bind(this);\r\n this.ClearSaveStatusModal = this.ClearSaveStatusModal.bind(this);\r\n }\r\n\r\n // componentWillReceiveProps(props) {\r\n // if ((!this.state.TrunkGroups || this.state.TrunkGroups.length === 0) && props.TrunkGroups && props.TrunkGroups.length > 0)\r\n // {\r\n // this.setState({TrunkGroups: props.TrunkGroups});\r\n // this.setTrunkGroupOptions(props.TrunkGroups);\r\n // }\r\n // }\r\n\r\n OpenModal = async() => {\r\n this.setState({showModal: true, loading: true});\r\n this.fetchTrunkGroups();\r\n }\r\n\r\n CloseModal = () => {\r\n let state = this.initialState();\r\n let {TrunkGroupId, TrunkGroups, TrunkGroupOptions} = this.state;\r\n this.setState({...state, TrunkGroups: TrunkGroups, TrunkGroupOptions: TrunkGroupOptions, TrunkGroupId: TrunkGroupId}\r\n , async () => {\r\n try {\r\n await this.props.loadTrunks();\r\n } catch (e) {\r\n // handle error\r\n }\r\n });\r\n }\r\n\r\n fetchTrunkGroups = async() => {\r\n let apiPath = 'admin/GetIpTrunkGroupList'\r\n let TrunkGroups = await apiCalls.fetchData(apiPath).then((data) => data);\r\n let blankTrunkEntry = {\r\n LocationId: 0,\r\n TrunkGroupID: '',\r\n LineDescription: '- Select Trunk Group -',\r\n LocationAccountNumber: '',\r\n LocationName: '',\r\n CustomerName: '',\r\n CustomerProductId: 0\r\n }\r\n TrunkGroups.unshift(blankTrunkEntry);\r\n let trunkGroupOptions = [];\r\n // let blankOption = (\r\n // \r\n // );\r\n\r\n // trunkGroupOptions.push(blankOption);\r\n if (TrunkGroups && TrunkGroups.length > 0)\r\n {\r\n TrunkGroups.map((record, idx) => {\r\n if (record.CustomerProductId !== 0)\r\n trunkGroupOptions.push((\r\n \r\n )\r\n );\r\n else\r\n trunkGroupOptions.push((\r\n \r\n )\r\n );\r\n });\r\n }\r\n this.setState({TrunkGroupOptions: trunkGroupOptions, TrunkGroups: TrunkGroups, loading: false});\r\n } \r\n\r\n RetrieveDataForAssociations = async(LocationAccountNumber, TrunkGroupID) => {\r\n try\r\n {\r\n await this.setState({loading: true});\r\n let apiPath = `admin/macd/GetIPTrunkAssociation?LocationAccountNumber=${LocationAccountNumber}&TrunkGroupID=${TrunkGroupID}`;\r\n let DIDs = await apiCalls.fetchData(apiPath).then(data => data);\r\n \r\n let assignedDIDs = [];\r\n let unAssignedDIDs = [];\r\n DIDs.map((item) => {\r\n let DIDEntry = {\r\n isSelected: false,\r\n Status: item.TrunkGroupID && item.TrunkGroupID > 0 ? 'Assigned' : 'Unassigned',\r\n ServiceNumber: item.TN,\r\n CustomerProductId: item.CustomerProductId\r\n }\r\n if (DIDEntry.Status === 'Assigned')\r\n assignedDIDs.push(DIDEntry);\r\n else\r\n unAssignedDIDs.push(DIDEntry);\r\n });\r\n\r\n\r\n \r\n \r\n await this.setState({DIDAssigned: assignedDIDs, DIDUnassigned: unAssignedDIDs, loading: false});\r\n }\r\n catch (ex) {\r\n await this.setState({DIDAssigned: [], DIDUnassigned: [], loading: false});\r\n }\r\n }\r\n\r\n formatDids = (queue, arr = []) => {\r\n if (arr && arr.length > 0) {\r\n return arr.map((itm, index) => {\r\n let itemClass = itm.isSelected === true ? 'selectedItem' : '';\r\n let label = itm.ServiceNumber;\r\n if (queue === 'pending')\r\n label += ' (' + itm.Status + ')';\r\n return Applications
*/}\r\n {/*this.subscriberSettings()*/}\r\n {/* \r\n Support\r\n */}\r\n \r\n Support\r\n \r\n \r\n Training\r\n \r\n \r\n {this.formatDids(queue, arr)}\r\n
\r\n )\r\n }\r\n\r\n handleSelection = async(queue, CustomerProductId) => {\r\n let newSelectionList = [];\r\n let dynamicDID = 'DID' + queue[0].toUpperCase() + queue.substring(1);\r\n let dynamicSelected = 'Selected' + queue[0].toUpperCase() + queue.substring(1);\r\n let DIDQueue = this.state[dynamicDID].slice();\r\n\r\n let currentItem = null;\r\n currentItem = this.state[dynamicDID].filter(resp => resp.CustomerProductId === CustomerProductId); //from the grids\r\n if (currentItem)\r\n currentItem = currentItem[0];\r\n\r\n let currentItemIdx = _.indexOf(DIDQueue, currentItem); //get before toggling selected status\r\n currentItem.isSelected = !currentItem.isSelected;\r\n newSelectionList = this.state[dynamicSelected].filter(resp => resp.CustomerProductId !== currentItem.CustomerProductId);\r\n if (currentItem.isSelected)\r\n newSelectionList.push(currentItem);\r\n\r\n DIDQueue[currentItemIdx] = currentItem;\r\n await this.setState({ [dynamicSelected]: newSelectionList, [dynamicDID] : DIDQueue });\r\n }\r\n\r\n handleTransition = async(actionName) => {\r\n let {DIDAssigned, DIDPending, DIDUnassigned, SelectedAssigned, SelectedPending, SelectedUnassigned} = this.state;\r\n let newPendingList = DIDPending.slice();\r\n let newAssignedList = DIDAssigned.slice();\r\n let newUnassignedList = DIDUnassigned.slice();\r\n let selectedItems = [];\r\n switch (actionName) {\r\n case 'add':\r\n SelectedUnassigned.map((record, idx) => {\r\n let newRecord = {\r\n CustomerProductId: record.CustomerProductId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Add',\r\n isSelected: false\r\n };\r\n newPendingList.push(newRecord);\r\n newUnassignedList = newUnassignedList.filter(resp => resp.CustomerProductId !== record.CustomerProductId);\r\n });\r\n SelectedUnassigned = [];\r\n break;\r\n case 'undoAdd':\r\n SelectedPending.map((record, idx) => {\r\n if (record.Status === 'Add')\r\n {\r\n let newRecord = {\r\n CustomerProductId: record.CustomerProductId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Unassigned',\r\n isSelected: false\r\n }\r\n newUnassignedList.push(newRecord);\r\n newPendingList = newPendingList.filter(resp => resp.CustomerProductId !== record.CustomerProductId);\r\n } else selectedItems.push(record);\r\n\r\n });\r\n SelectedPending = selectedItems;\r\n break;\r\n case 'remove':\r\n SelectedAssigned.map((record, idx) => {\r\n let newRecord = {\r\n CustomerProductId: record.CustomerProductId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Remove',\r\n isSelected: false\r\n }\r\n newPendingList.push(newRecord);\r\n newAssignedList = newAssignedList.filter(resp => resp.CustomerProductId !== record.CustomerProductId);\r\n });\r\n SelectedAssigned = [];\r\n break;\r\n case 'undoRemove':\r\n\r\n SelectedPending.map((record, idx) => {\r\n if (record.Status === 'Remove')\r\n {\r\n let newRecord = {\r\n CustomerProductId: record.CustomerProductId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Assigned',\r\n isSelected: false\r\n }\r\n newAssignedList.push(newRecord);\r\n newPendingList = newPendingList.filter(resp => resp.CustomerProductId !== record.CustomerProductId);\r\n } else selectedItems.push(record);\r\n });\r\n SelectedPending = selectedItems;\r\n break;\r\n }\r\n await this.setState({\r\n SelectedAssigned: SelectedAssigned,\r\n SelectedPending: SelectedPending,\r\n SelectedUnassigned: SelectedAssigned,\r\n DIDAssigned: newAssignedList,\r\n DIDPending: newPendingList,\r\n DIDUnassigned: newUnassignedList\r\n });\r\n }\r\n\r\n SubmitChanges = async() => {\r\n try {\r\n if (this.state.DIDPending.length === 0) return; //end process if nothing selected\r\n let apiPath = 'admin/macd/AssociateIPTrunk';\r\n let reqBody = { };\r\n let statusMessage = '';\r\n let bError = false;\r\n let bPartialSuccess = false;\r\n let pending = this.state.DIDPending.slice();\r\n let arrAssigned = pending.filter(resp => resp.Status === 'Add').map((record,idx) => {\r\n return record.CustomerProductId;\r\n });\r\n let arrUnassigned = pending.filter(resp => resp.Status === 'Remove').map((record,idx) => {\r\n return record.CustomerProductId;\r\n });\r\n if (arrAssigned && arrAssigned.length > 0)\r\n {\r\n reqBody = {\r\n TrunkCustomerProductId: this.state.TrunkCustomerProductId,\r\n LocationAccountNumber: this.state.LocationAccountNumber,\r\n ServiceCustomerProductIdList: arrAssigned\r\n }\r\n\r\n await this.setState({saving: true});\r\n let responseAssigns = await apiCalls.post(apiPath, 'PATCH', JSON.stringify(reqBody)).then((data) => data);//.error((message) => {\r\n //bError = true;\r\n //statusMessage = 'An error occurred assigning : ' + message.toString();\r\n //});\r\n if (helper.IsJsonString(responseAssigns.message)) {\r\n let messageObj = JSON.parse(responseAssigns.message);\r\n if (messageObj.MPOErrorList && messageObj.MPOErrorList.length > 0) {\r\n statusMessage += this.displayErrors(messageObj.MPOErrorList);\r\n bError = true;\r\n }\r\n }\r\n else if (responseAssigns.ok) {\r\n statusMessage = 'All DIDs marked for assignment have updated successfully';\r\n bPartialSuccess = true;\r\n }\r\n }\r\n if (arrUnassigned && arrUnassigned.length > 0)\r\n {\r\n apiPath = 'admin/macd/UnassociateIPTrunk';\r\n if (!this.state.saving)\r\n await this.setState({saving: true});\r\n reqBody = {\r\n TrunkCustomerProductId: this.state.TrunkCustomerProductId,\r\n LocationAccountNumber: this.state.LocationAccountNumber,\r\n ServiceCustomerProductIdList: arrUnassigned\r\n }\r\n let responseUnassigns = await apiCalls.post(apiPath, 'PATCH', JSON.stringify(reqBody)).then((assignData) => assignData);//.error((message) => {\r\n //statusMessage += '\\nAn error occurred unassigning : ' + message.toString();\r\n //});\r\n if (helper.IsJsonString(responseUnassigns.message)) {\r\n let messageObj = JSON.parse(responseUnassigns.message);\r\n if (messageObj.MPOErrorList && messageObj.MPOErrorList.length > 0) {\r\n statusMessage += this.displayErrors(messageObj.MPOErrorList);\r\n bError = true;\r\n }\r\n }\r\n else if (responseUnassigns.ok)\r\n {\r\n statusMessage += '\\nAll DIDs marked for unassignment have updated successfully';\r\n bPartialSuccess = true;\r\n }\r\n }\r\n if (!bError)\r\n statusMessage = 'All DIDs marked for assignment and unassignment have updated successfully'\r\n else if (bError && !bPartialSuccess)\r\n statusMessage = 'All DIDs marked for assignment and/or unassignment have failed\\n' + statusMessage;\r\n\r\n await this.setState({saving: false, statusMessage: statusMessage, error: bError});\r\n }\r\n catch (ex) {\r\n this.setState({\r\n saving: false,\r\n error: true,\r\n statusMessage: 'An error occurred: ' + ex.toString(),\r\n });\r\n }\r\n }\r\n\r\n displayErrors = (ErrorList) => {\r\n let errorMsg = '';\r\n ErrorList.map((err, idx) => {\r\n if (err.MPOResultText && err.MPOResultText.length > 0){\r\n err.MPOResultText.map((rt,idx2) => {\r\n errorMsg = errorMsg === '' ? rt.ErrorMessage : '\\n' + rt.ErrorMessage;\r\n });\r\n } else\r\n errorMsg = errorMsg === '' ? err.APIError : '\\n' + err.APIError;\r\n });\r\n return errorMsg;\r\n }\r\n\r\n ClearSaveStatusModal = async() => {\r\n let selectedTrunk = this.state.TrunkCustomerProductId;\r\n let TrunkGroup = this.state.TrunkGroups.filter(resp => resp.CustomerProductId === selectedTrunk);\r\n TrunkGroup = TrunkGroup[0];\r\n \r\n //let selectedText = e.target.selectedText;\r\n //let TrunkGroupId =\r\n await this.setState({error: false, statusMessage: '', loading: true, DIDAssigned: [], DIDPending: [], DIDUnassigned: [], SelectedAssigned: [], SelectedPending: [], SelectedUnassigned: []});\r\n this.RetrieveDataForAssociations(TrunkGroup.LocationAccountNumber, TrunkGroup.TrunkGroupID);\r\n }\r\n\r\n ChangeTrunkGroup = async(e) => {\r\n let selection = parseInt(e.target.value);\r\n \r\n \r\n let TrunkGroup = this.state.TrunkGroups.filter(resp => resp.CustomerProductId === selection);\r\n TrunkGroup = TrunkGroup[0];\r\n \r\n //let selectedText = e.target.selectedText;\r\n //let TrunkGroupId =\r\n await this.setState({\r\n TrunkCustomerProductId: selection, \r\n LocationAccountNumber: TrunkGroup.LocationAccountNumber,\r\n saving: false, \r\n loading: selection > 0 ? true : false, \r\n DIDAssigned: [], DIDPending: [], DIDUnassigned: [], \r\n SelectedAssigned: [], SelectedPending: [], SelectedUnassigned: []\r\n });\r\n if (selection > 0)\r\n this.RetrieveDataForAssociations(TrunkGroup.LocationAccountNumber, TrunkGroup.TrunkGroupID);\r\n }\r\n\r\n savingOrConfirming = () => this.state.saving || this.state.statusMessage;\r\n\r\n modalBody = () => {\r\n if (this.state.loading === true) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n this.OpenModal()}>Manage Associated DIDs\r\n \r\n \r\n Trunk ID:\r\n \r\n
\r\n \r\n
\r\n \r\n Un-assigned DID(s)\r\n
\r\n \r\n {this.didField('unassigned', this.state.DIDUnassigned)}\r\n
\r\n \r\n { this.handleTransition('add'); }}>{'Assign >'}\r\n {/* SPACING DIV */}\r\n \r\n {/* SPACING DIV */}\r\n { this.handleTransition('undoAdd')}}>{'< Undo'}\r\n
\r\n \r\n Pending DID(s)\r\n
\r\n \r\n {this.didField('pending', this.state.DIDPending)}\r\n
\r\n \r\n { this.handleTransition('remove')}}>{'< Unassign'}\r\n {/* SPACING DIV */}\r\n \r\n {/* SPACING DIV */}\r\n { this.handleTransition('undoRemove')}}>{'Undo >'}\r\n
\r\n \r\n Assigned DID(s)\r\n
\r\n \r\n {this.didField('assigned', this.state.DIDAssigned)}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n IP Addresses:
\r\n\r\n { transitionToManagePage(TrunkGroupID, LocationName, StartDate) }}\r\n className='no-btn'\r\n >\r\n {LocationName}\r\n \r\n
\r\n No Available Data
\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n
\r\n )\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from './../../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\nexport default class IPTrunkReviewModal extends Component {\r\n modalTitle = () => {\r\n if (this.props.reviewSub) {\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n IP Trunking
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n
\r\n )\r\n }\r\n if (this.props.failedSub || this.props.successSub) {\r\n let msg = this.props.failedSub ? 'There was an error in your submission attempt, please re-evaluate your input data.' : 'Your submission was successful. Thank you.'\r\n return (\r\n \r\n
\r\n )\r\n }\r\n }\r\n render() {\r\n return (\r\n {msg}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n if (labelFor === 'GroupPolicy') {\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n if (labelFor === 'ServiceState') {\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n formGroupCheckBox = (labelFor, labelName, val, type = 'checkbox', enabled = true) => {\r\n return (\r\n \r\n \r\n this.handleInputChange(e, labelFor, type)}\r\n />\r\n
\r\n )\r\n }\r\n\r\n formGroupInput = (labelFor, labelName, val, type = 'text') => {\r\n let nodeLabel = labelFor.length === 5 ? labelFor.slice(0, -1) : labelFor.slice(0, -2);\r\n let validIp = helper.ValidateIPaddress(val);\r\n if (nodeLabel === 'Node' && val !== '' && validIp === false) {\r\n return (\r\n \r\n \r\n this.handleInputChange(e, labelFor, type)}\r\n />\r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n this.handleInputChange(e, labelFor, type)}\r\n />\r\n
\r\n )\r\n }\r\n\r\n fetchIpTrunk = async () => {\r\n await this.setState({ loading: true });\r\n let apiPath = `admin/GetIpTrunk?TrunkGroupID=${this.state.TrunkId}`;\r\n await apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let { IPAddress, SIPS, Sansay } = data.ProvInfo;\r\n let obj = {\r\n // SIPS\r\n PromotionOfferPackageID: SIPS.PromotionOfferPackageID,\r\n TrunkId: SIPS.TrunkId,\r\n GroupPolicy: SIPS.GroupPolicy,\r\n ServiceState: SIPS.ServiceState,\r\n Direction: SIPS.Direction,\r\n TechPrefix: SIPS.TechPrefix,\r\n IncomingCNAM: SIPS.IncomingCNAM,\r\n International: SIPS.International,\r\n LineDescription: SIPS.LineDescription,\r\n TerminationCode: SIPS.TerminationCode,\r\n TerminationNotes: SIPS.TerminationNotes,\r\n TNActivation: SIPS.TNActivation,\r\n VoipSwitch: SIPS.VoipSwitch,\r\n UserEmail: SIPS.UserEmail,\r\n // SANSAY\r\n Block: Sansay.Block,\r\n PseudoCarrier: Sansay.PseudoCarrier,\r\n E911Carrier: Sansay.E911Carrier,\r\n Status: Sansay.Status,\r\n SentDate: Sansay.SentDate,\r\n LastUpdatedDate: Sansay.LastUpdatedDate,\r\n // IP Address\r\n Node1: IPAddress.Node1,\r\n Node2: IPAddress.Node2,\r\n Node3: IPAddress.Node3,\r\n Node4: IPAddress.Node4,\r\n Node5: IPAddress.Node5,\r\n Node6: IPAddress.Node6,\r\n Node7: IPAddress.Node7,\r\n Node8: IPAddress.Node8,\r\n Node9: IPAddress.Node9,\r\n Node10: IPAddress.Node10,\r\n Node11: IPAddress.Node11,\r\n Node12: IPAddress.Node12,\r\n }\r\n let copy = JSON.parse(JSON.stringify(obj));\r\n this.setState({\r\n Data: [obj],\r\n OriginalCopy: [copy],\r\n loading: false,\r\n CustomerProductId: data.CustomerProductId,\r\n CustomerLocationId: data.CustomerLocationId,\r\n })\r\n } else {\r\n this.setState({\r\n Data: [],\r\n OriginalCopy: [],\r\n loading: false,\r\n })\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n handleInputChange = (e, labelFor, type) => {\r\n let newValue = type === 'text' ? e.target.value : e.target.checked;\r\n let existingArray = this.state.Data.slice();\r\n existingArray[0][labelFor] = newValue;\r\n // COMPARE ORIGINAL TO UPDATED ARRAY\r\n let originalCopy = this.state.OriginalCopy.slice();\r\n if (originalCopy && originalCopy.length > 0) {\r\n // Using Lodash for Obj comparison... had to add 'HasChanges' prop to Original for lodash to work properly\r\n let objIsEqual = _.isEqual(originalCopy, existingArray);\r\n if (objIsEqual === true) {\r\n delete existingArray[0].HasChanges;\r\n delete originalCopy[0].HasChanges;\r\n } else {\r\n existingArray[0].HasChanges = true;\r\n originalCopy[0].HasChanges = true;\r\n }\r\n }\r\n this.setState({ Data: existingArray });\r\n }\r\n\r\n updateIpTrunk = async () => {\r\n let apiPath = `admin/UpdateIPTrunk`;\r\n let obj = this.state.Data[0];\r\n let ipTrunkDTO = {\r\n CustomerLocationId: this.state.CustomerLocationId,\r\n CustomerProductId: this.state.CustomerProductId,\r\n ProvInfo:\r\n {\r\n SIPS:\r\n {\r\n PromotionOfferPackageID: obj.PromotionOfferPackageID,\r\n TrunkId: obj.TrunkId,\r\n GroupPolicy: obj.GroupPolicy,\r\n ServiceState: obj.ServiceState,\r\n Direction: obj.Direction,\r\n TechPrefix: obj.TechPrefix,\r\n IncomingCNAM: obj.IncomingCNAM,\r\n International: obj.International,\r\n LineDescription: obj.LineDescription,\r\n TerminationCode: obj.TerminationCode,\r\n TerminationNotes: obj.TerminationNotes,\r\n TNActivation: obj.TNActivation,\r\n VoipSwitch: obj.VoipSwitch,\r\n UserEmail: obj.UserEmail\r\n },\r\n Sansay:\r\n {\r\n Block: obj.Block,\r\n PseudoCarrier: obj.PseudoCarrier,\r\n E911Carrier: obj.E911Carrier,\r\n Status: obj.Status,\r\n SentDate: obj.SentDate,\r\n LastUpdatedDate: \"\",\r\n },\r\n IPAddress:\r\n {\r\n Node1: obj.Node1,\r\n Node2: obj.Node2,\r\n Node3: obj.Node3,\r\n Node4: obj.Node4,\r\n Node5: obj.Node5,\r\n Node6: obj.Node6,\r\n Node7: obj.Node7,\r\n Node8: obj.Node8,\r\n Node9: obj.Node9,\r\n Node10: obj.Node10,\r\n Node11: obj.Node11,\r\n Node12: obj.Node12\r\n }\r\n }\r\n }\r\n await this.setState({ SubmitModalOpen: true, reviewSub: true });\r\n let response = await apiCalls.send(apiPath, 'PATCH', JSON.stringify(ipTrunkDTO)).then(res => res).catch(err => console.error(err));\r\n let { message } = response;\r\n if (response.ok === true) {\r\n this.setState({\r\n reviewSub: false,\r\n successSub: true,\r\n });\r\n } else {\r\n this.setState({\r\n reviewSub: false,\r\n failedSub: true,\r\n });\r\n }\r\n }\r\n\r\n handleSubmitForm = async () => {\r\n await this.setState({ errorMsg: null })\r\n let changedItems = this.state.Data.filter(res => res.HasChanges === true);\r\n if (!changedItems || changedItems.length === 0) {\r\n this.setState({ errorMsg: 'No Changes have been made...' });\r\n return;\r\n }\r\n let obj = this.state.Data[0];\r\n let fullIpList = [];\r\n let validIpList = Object.keys(obj).filter(res => {\r\n if (res) {\r\n let nodeLabel = res.length === 5 ? res.slice(0, -1) : res.slice(0, -2);\r\n if (nodeLabel === \"Node\") {\r\n fullIpList.push(res);\r\n if (helper.ValidateIPaddress(obj[res]) === true || obj[res] === '') return res;\r\n }\r\n }\r\n });\r\n if (validIpList && fullIpList && (validIpList.length === fullIpList.length)) {\r\n if (!obj.Node1 || obj.Node1 === '' || obj.Node1 === null) {\r\n this.setState({ errorMsg: 'IP Address Node 1 may not be empty...' });\r\n return;\r\n }\r\n this.updateIpTrunk();\r\n return;\r\n } else {\r\n this.setState({ errorMsg: 'The requested submission contains an invalid IP Address...' });\r\n return;\r\n }\r\n }\r\n\r\n errorHandler = () => {\r\n if (this.state.errorMsg) {\r\n return {this.state.errorMsg}
: {this.state.errorMsg}
}\r\n \r\n }\r\n }\r\n\r\n ipTrunkForm = () => {\r\n if (this.state.loading) {\r\n return \r\n
\r\n );\r\n }\r\n }\r\n }\r\n\r\n handleShow = () => {\r\n if (!this.state.showModal)\r\n this.setState({ showModal: true });\r\n else\r\n this.setState({ showModal: false })\r\n }\r\n\r\n manageTrunkModal = () => {\r\n return \r\n
\r\n Provisioning Information
\r\n {/* {this.manageTrunkModal()} */}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n Submit\r\n {this.errorHandler()}\r\n
\r\n \r\n
\r\n )\r\n }\r\n};","import React, { Component } from 'react';\nimport { homePageUrl } from './../scripts/helper';\n\nclass UnMatchedPath extends Component {\n\n componentWillMount() {\n this.props.history.push(homePageUrl());\n }\n\n render() {\n return null\n }\n\n}\n\nexport default UnMatchedPath;","import React, { Component } from 'react';\r\nimport format from 'string-format';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport moment from 'moment';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport * as settings from '../../../scripts/settings';\r\nimport * as config from '../../../requests/config';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { Grid, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as helper from '../../../scripts/helper';\r\n\r\nexport default class CallLogsFrame extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n LocationAccountNumber: '',\r\n logs: [],\r\n Sort: [],\r\n loading: false,\r\n call_category: \"ALL\",\r\n call_type: \"1\",\r\n status_type: \"1\",\r\n date_type: \"1\", // Today\r\n from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\")\r\n }\r\n this.handleCallCategory = this.handleCallCategory.bind(this);\r\n this.handleCallType = this.handleCallType.bind(this);\r\n this.handleStatusType = this.handleStatusType.bind(this);\r\n this.handleDate = this.handleDate.bind(this);\r\n this.handleChangeFromDate = this.handleChangeFromDate.bind(this);\r\n this.handleChangeToDate = this.handleChangeToDate.bind(this);\r\n };\r\n\r\n componentDidMount() {\r\n if (this.props.isLocation) {\r\n this.fetchLocations()\r\n } else {\r\n this.fetchCallLogs(this.getApiUrl(), settings.noResultsMsg);\r\n }\r\n }\r\n\r\n getApiUrl() {\r\n let apiUrl = this.props.apiPath;\r\n if (this.props.isLocation) {\r\n apiUrl = format(apiUrl, this.state);\r\n }\r\n\r\n // let finalToDate = this.state.to_date + '%2023:59:59';\r\n // let newOptions = {\r\n // call_type: this.state.call_type,\r\n // status_type: this.state.status_type,\r\n // call_category: this.state.call_category,\r\n // from_date: this.state.from_date,\r\n // to_date: finalToDate\r\n // };\r\n\r\n apiUrl += format('&CallType={call_type}&CallStatus={status_type}&CallCategory={call_category}&FromDate={from_date}&ToDate={to_date}', this.state);\r\n return apiUrl;\r\n }\r\n\r\n fetchCallLogs = async (apiPath) => {\r\n await this.setState({ loading: true });\r\n apiCalls.fetchData(apiPath).then((data) => {\r\n if (data !== null && data !== undefined) {\r\n let revisedData = this.revisedData(data);\r\n this.setState({ logs: revisedData, loading: false });\r\n\r\n } else this.setState({ logs: [], loading: false });\r\n }).catch((msg) => console.error(msg));\r\n }\r\n\r\n revisedData = (data) => {\r\n let revisedData = data.map((item, idx) => {\r\n item.Release_Time = new Date(item.Release_Time);\r\n item.Start_Time = new Date(item.Start_Time);\r\n return item;\r\n });\r\n return revisedData;\r\n }\r\n\r\n handleChangeFromDate = (event) => {\r\n let from = moment(event.sender._oldText, \"M/D/YYYY\");\r\n if (from.isValid()) {\r\n this.setState({ ...{ from_date: from.format(\"YYYY-MM-DD\") } }, () => {\r\n let to = moment(this.state.to_date);\r\n if (to.isValid() && to.isSameOrAfter(from)) {\r\n this.setState({ ...{ logs: [], loading: true } }, this.componentDidMount);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleChangeToDate = (event) => {\r\n let to = moment(event.sender._oldText, \"M/D/YYYY\");\r\n if (to.isValid()) {\r\n this.setState({ ...{ to_date: to.format(\"YYYY-MM-DD\") } }, () => {\r\n let from = moment(this.state.from_date);\r\n if (from.isValid() && from.isSameOrBefore(to)) {\r\n this.setState({ ...{ logs: [], loading: true } }, this.componentDidMount);\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleDate = (event) => {\r\n switch (event.target.value) {\r\n case \"1\":\r\n this.setState({\r\n ...{\r\n logs: [], date_type: event.target.value, from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.componentDidMount);\r\n return;\r\n case \"2\":\r\n this.setState({\r\n ...{\r\n logs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(1, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").subtract(1, \"days\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.componentDidMount);\r\n return;\r\n case \"3\":\r\n this.setState({\r\n ...{\r\n logs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(7, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.componentDidMount);\r\n return;\r\n case \"4\":\r\n this.setState({\r\n ...{\r\n logs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(30, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.componentDidMount);\r\n return;\r\n case \"5\":\r\n this.setState({\r\n ...{\r\n logs: [], date_type: event.target.value, from_date: moment(Date.now()).subtract(90, \"days\").startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\"), loading: true\r\n }\r\n }, this.componentDidMount);\r\n return;\r\n case \"6\":\r\n this.setState({ ...{ logs: [], date_type: event.target.value, from_date: \"From\", to_date: \"To\" } });\r\n return;\r\n }\r\n }\r\n\r\n handleCallCategory = (event) => {\r\n this.setState({ ...{ logs: [], call_category: event.target.value, loading: true } }, this.componentDidMount);\r\n }\r\n\r\n handleCallType = (event) => {\r\n this.setState({ ...{ logs: [], call_type: event.target.value, loading: true } }, this.componentDidMount);\r\n }\r\n\r\n handleStatusType = (event) => {\r\n this.setState({ ...{ logs: [], status_type: event.target.value, loading: true } }, this.componentDidMount);\r\n }\r\n\r\n searchStatus = () => {\r\n if (this.state.loading) {\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.ipTrunkForm()}\r\n IP Trunking
\r\n\r\n No results for the filters selected.\r\n
\r\n )\r\n } else return null\r\n }\r\n\r\n exportBtn = () => {\r\n if (this.state.logs.length > 0) {\r\n return (\r\n\r\n \r\n \r\n this.exportCallLogs()} >Export Call Logs\r\n
\r\n )\r\n } else null;\r\n }\r\n\r\n exportCallLogs = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Export Call Logs';\r\n }, 2000);\r\n }\r\n\r\n sortListings = (sort, logs = null) => {\r\n let returnObj = [];\r\n if (this.state.logs) {\r\n if (logs == null) logs = this.state.logs.slice();\r\n let sortedSet = orderBy(logs, sort);\r\n returnObj = sortedSet;\r\n if (sort.length) {\r\n returnObj = helper.blanksAfterZ(sortedSet, sort);\r\n }\r\n }\r\n return returnObj;\r\n }\r\n\r\n sortChange = async (event) => {\r\n await this.setState({\r\n logs: this.sortListings(event.sort),\r\n Sort: event.sort\r\n });\r\n }\r\n\r\n gridContent = () => {\r\n if (this.state.loading || this.state.logs.length === 0) {\r\n return (\r\n {this.searchStatus()}
\r\n )\r\n } else {\r\n if (this.state.logs && this.state.logs.length > 0) {\r\n let colWidth = '150px';\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n fetchLocations = async (apiPath = null) => {\r\n await this.setState({ loading: true });\r\n if (!apiPath) apiPath = 'admin/GetIpTrunkingLocationList';\r\n apiCalls.fetchData(apiPath).then((data) => {\r\n if (data) {\r\n let locationOptions = data.map((location, index) => {\r\n return this.locationOption(location, index);\r\n });\r\n if (!sessionStorage.ipTrunkLocationNum) {\r\n this.setState({ locationOptions: locationOptions, LocationAccountNumber: data[0].LocationAccountNumber, LocationName: data[0].LocationName });\r\n } else {\r\n this.setState({ locationOptions: locationOptions, LocationAccountNumber: sessionStorage.ipTrunkLocationNum, LocationName: data[0].LocationName });\r\n }\r\n if (this.state.LocationAccountNumber !== undefined || this.state.LocationAccountNumber !== null) {\r\n this.fetchCallLogs(this.getApiUrl(), settings.noResultsMsg);\r\n }\r\n } else if (data === null) {\r\n this.setState({ locations: [], resultsMsg: settings.noResultsMsg });\r\n };\r\n });\r\n }\r\n\r\n locationOption = (location, index) => {\r\n return (\r\n \r\n )\r\n }\r\n\r\n changeLocation = (event) => {\r\n let { value } = event.target;\r\n let getLocationName = (acctNum) => {\r\n return this.state.locationOptions.map(itm => itm.props).filter(res => res.value === acctNum)[0].children;\r\n }\r\n if (value && value !== '') {\r\n sessionStorage.setItem('ipTrunkLocationNum', value);\r\n }\r\n this.setState({\r\n LocationAccountNumber: value,\r\n LocationName: event.target.selectedOptions ? event.target.selectedOptions[0].text : getLocationName(value)\r\n }, this.componentDidMount);\r\n }\r\n\r\n callLogFilter = (htmlSelect) => {\r\n return (\r\n \r\n {htmlSelect}\r\n
\r\n )\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n};","import React, { Component } from 'react';\r\nimport CallLogsFrame from './call_logs_frame';\r\n\r\nexport default class IPCallLogsLocation extends Component {\r\n\r\n getApiUrl = () => {\r\n let apiUrl = `usr/GetIpTrunkingCallLogs?LocationAccountNumber={LocationAccountNumber}&TrunkID=0`;\r\n return apiUrl;\r\n }\r\n\r\n render() {\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.cardTitle}\r\n {this.state.loading ? null : this.state.logs.length} \r\n
\r\n\r\n {this.exportBtn()}\r\n
\r\n \r\n {this.locationDropDown()}\r\n
\r\n \r\n {this.callLogFilter()}\r\n {this.callLogFilter()}\r\n {this.callLogFilter()}\r\n {\r\n (this.state.date_type === \"6\") ?\r\n (
\r\n \r\n
)\r\n : \"\"\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n \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.exportCallLogs()}\r\n >\r\n Export Call Logs\r\n \r\n
\r\n );\r\n } else return null;\r\n };\r\n\r\n exportBsBtn = () => {\r\n if ((this.state.tab === \"bs\" && this.state.BSCallLogs.length > 0) || (this.state.tab === \"bs\" && this.state.isLimited)) {\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 this.exportCallLogs()}\r\n >\r\n Export Call Logs\r\n \r\n
\r\n );\r\n } else return null;\r\n };\r\n\r\n exportFaxBtn = () => {\r\n if ((this.state.tab === \"fax\" && this.state.FaxCallLogs.length > 0) || (this.state.tab === \"fax\" && this.state.isLimited)) {\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 this.exportCallLogs()}\r\n >\r\n Export Call Logs\r\n \r\n
\r\n );\r\n } else return null;\r\n };\r\n\r\n exportCallLogs = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = \"Downloading...\";\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = \"Export Call Logs\";\r\n }, 2000);\r\n };\r\n\r\n fetchLocations = async (apiPath = null) => {\r\n await this.setState({ loading: true });\r\n if (!apiPath) apiPath = \"admin/Locations\";\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let locationOptions = data.map((location, index) => {\r\n return this.locationOption(location, index);\r\n });\r\n this.setState({ locationOptions: locationOptions, PBXUserID: \"\" });\r\n this.fetchCallLogs(this.getApiUrl(), settings.noResultsMsg);\r\n } else if (data === null) {\r\n this.setState({ locations: [], resultsMsg: settings.noResultsMsg });\r\n }\r\n });\r\n };\r\n\r\n changeLocation = event => {\r\n let { value } = event.target;\r\n let getLocationName = acctNum => {\r\n return this.state.locationOptions\r\n .map(itm => itm.props)\r\n .filter(res => res.value === acctNum)[0].children;\r\n };\r\n this.setState(\r\n {\r\n LocationAccountNumber: value,\r\n LocationName: event.target.selectedOptions\r\n ? event.target.selectedOptions[0].text\r\n : getLocationName(value)\r\n },\r\n this.componentDidMount\r\n );\r\n };\r\n\r\n locationOption = (location, index) => {\r\n return (\r\n \r\n );\r\n };\r\n\r\n callLogFilter = htmlSelect => {\r\n return (\r\n \r\n \r\n Cloud Voice\r\n \r\n \r\n IP Trunking\r\n \r\n \r\n Fax\r\n \r\n
\r\n );\r\n } else return;\r\n };\r\n\r\n changeTab = event => {\r\n if (event.target.dataset.act !== this.state.tab) {\r\n this.setState({ tab: event.target.dataset.act });\r\n }\r\n };\r\n\r\n getTab() {\r\n if (this.state.isLimited) {\r\n return (\r\n \r\n {this.exportSansayBtn()}\r\n {this.exportBsBtn()}\r\n {this.exportFaxBtn()}\r\n
\r\n Due to the large volume of call records, please use the export tool
\r\n )\r\n }\r\n let { tab, BSCallLogs, SansayCallLogs, FaxCallLogs, loading } = this.state;\r\n switch (tab) {\r\n case \"bs\":\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n PBXUserID: state.PBXUserID\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(EnterpriseCallLogsAll);","import React from 'react';\r\n\r\nexport const filtercell = (data, defaultItem) => {\r\n return class extends React.Component {\r\n hasValue(value) {\r\n return value && value !== defaultItem;\r\n };\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n };\r\n}","import React, { Component, Fragment } from 'react';\r\nimport * as icons from '../../scripts/icons';\r\nimport * as helper from '../../scripts/helper';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from '../../requests/config';\r\nimport * as settings from '../../scripts/settings';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport { filtercell } from '../../components/dropdownFilter';\r\nimport _ from 'lodash';\r\nimport { filterList } from '../../constants/filters';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\n\r\nexport default class AllTickets extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n gridHeight: (window.innerHeight - 210),\r\n loading: false,\r\n Listings: [],\r\n FullListings: [],\r\n Sort: [{ field: \"TicketNumber\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n LocationAccountNumber: '',\r\n ContactId: '',\r\n Filter: 'NONE',\r\n Term: '',\r\n QueryLocator: ''\r\n }\r\n\r\n const transitionToDetailPage = this.transitionToDetailPage.bind(this);\r\n const favoriteTicket = this.favoriteTicket.bind(this);\r\n const starClass = this.starClass.bind(this);\r\n const handleClearFilter = this.handleClearFilter.bind(this);\r\n\r\n class FavoriteButton extends GridCell {\r\n render() {\r\n let ticket = this.props.dataItem;\r\n let cannotFavorite = ticket.TicketId == \"\" && ticket.TicketId == \"\";\r\n if (cannotFavorite) {\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n Enterprise Call Logs\r\n {this.headerTag()}\r\n
\r\n\r\n
\r\n \r\n {this.callLogFilter(\r\n \r\n \r\n {this.state.locationOptions}\r\n \r\n )}\r\n {this.callLogFilter(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {this.callLogFilter(\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {this.callLogFilter(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {this.callLogFilter(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {this.state.date_type === \"6\" ? (\r\n
\r\n {this.tabDisplay()}\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {this.getTab()}\r\n
\r\n No Available Tickets
\r\n }else{\r\n let parsedList = JSON.parse(sessionStorage.locationList)\r\n let locationAccountNumberList = parsedList.map((x)=>(x.LocationAccountNumber));\r\n locationAccountNumberList.push(\"1\");\r\n let userLocationMatchedList=[];\r\n for(const key in locationAccountNumberList){\r\n for(let i =0; iNo Available Tickets
\r\n }\r\n }\r\n }\r\n\r\n handleClearFilter = () => {\r\n let newFilter = {\r\n logic: 'and',\r\n filters: []\r\n };\r\n this.setState({ filter: newFilter });\r\n }\r\n\r\n contactFilterCell = (sortKey, nestedKey) => {\r\n const options = () => {\r\n let sort = [{ field: sortKey, dir: \"asc\" }];\r\n let listings = orderBy(this.state.Listings.slice(), sort);\r\n return [...listings.map(item => item && item.Contact ? item.Contact[nestedKey] : '').filter(helper.onlyUnique)].filter(nonEmpty => nonEmpty);\r\n }\r\n if (options() && options().length > 0) {\r\n return filtercell(options());\r\n }\r\n }\r\n\r\n searchListings = (event) => {\r\n if (this.state.FullListings && this.state.FullListings.length > 0) {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullListings;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'TicketNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Status', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Subject', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Contact.Name', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Priority', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'CreatedDate', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'ClosedDate', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Escalated', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Category', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Contact.PreferredCommunication', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.delayedSearch(services);\r\n }\r\n else {\r\n this.delayedSearch(fullDetails);\r\n }\r\n }\r\n }\r\n\r\n delayedSearch = async (services) => {\r\n await this.setState({ loading: true });\r\n if (this.timeout) clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => {\r\n this.setState({ Listings: services, loading: false });\r\n }, settings.searchDelay);\r\n }\r\n\r\n dropDownOptions = (key) => {\r\n let sort = [{ field: key, dir: \"asc\" }];\r\n let listings = orderBy(this.state.Listings.slice(), sort);\r\n let info = [...listings.map(item => item[key]).filter(helper.onlyUnique)].filter(nonEmpty => nonEmpty);\r\n return info;\r\n }\r\n\r\n getTicketListings = (filter) => {\r\n return filterBy(orderBy(this.state.Listings, this.state.Sort), filter);\r\n }\r\n\r\n activeFilters = () => {\r\n let { Filter } = this.state;\r\n let possibleFilters = [Filter];\r\n let filters = possibleFilters.filter((item) => item); // removed empty filters\r\n if (Filter && Filter !== 'NONE') {\r\n return (\r\n\r\n \r\n \r\n this.exportTickets()} >Export Tickets\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n exportTickets = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Export Tickets';\r\n }, 2000);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React from 'react';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\n\r\nexport const retailTrouble = '0121A000000MZv3QAG'; //VOICE\r\nexport const dataServices = '0120h000000Upkk';//DATA\r\nexport const btnStyles = {\r\n fontSize: '80%',\r\n width: '18%',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n};\r\n\r\nexport const btnStyles2 = {\r\n fontSize: '95%',\r\n width: '32%',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n};\r\n\r\nexport const btnStyles3 = {\r\n fontSize: '95%',\r\n width: '30%',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n};\r\n\r\nexport const pickListOptions = (data) => {\r\n let options = data.map((item, idx) => {\r\n return \r\n });\r\n return options;\r\n}\r\n\r\nexport const contactOptions = (data) => {\r\n let options = data.map((contact, idx) => {\r\n return \r\n });\r\n return options;\r\n}","import React, { Component } from 'react';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport _ from 'lodash';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\n\r\n\r\nexport default class AffectedDevicesModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n Devices: [],\r\n FullDevices: [],\r\n showModal: false,\r\n Sort: [{ field: \"MAC\", dir: \"asc\" }],\r\n }\r\n const selectDevice = this.selectDevice.bind(this);\r\n\r\n class SelectDeviceCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n let device = this.props.dataItem\r\n let { Selected } = device;\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n Support
\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n For immediate assistance please CALL Customer Care
888.538.3960
(If referencing a submitted ticket, have your ticket # ready)
\r\n
\r\n
\r\n \r\n
\r\n Support Tickets\r\n {!this.state.loading ? this.getTicketListings(this.state.filter).length : null} \r\n \r\n \r\n {this.activeFilters()}\r\n \r\n \r\n
\r\n {this.state.Filter === 'NONE' ? * List reflecting all open tickets & tickets closed within last 7 days : null}\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {sessionStorage.hasTicketing === 'FULL' ? this.props.history.push('/new_ticket')}\r\n className=\"no-btn\">Enter New Ticket : null}\r\n {this.exportBtn()}\r\n
\r\n \r\n
\r\n {this.gridContent()}\r\n
\r\n No Available Devices
\r\n }\r\n }\r\n }\r\n\r\n assignDevices = () => {\r\n let deviceList = this.state.Devices.filter(itm => itm.Selected === true);\r\n this.props.affectedDevices(deviceList);\r\n if (this.props.saveSelections) {\r\n sessionStorage.setItem('deviceList', JSON.stringify(this.state.Devices));\r\n }\r\n this.handleClose();\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullDevices;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'MacAddress', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'MakeModel', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'AssignedTo', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.setState({ Devices: services })\r\n }\r\n else {\r\n this.setState({ Devices: fullDetails });\r\n }\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 {this.gridContent()}\r\n
\r\n \r\n {!this.state.loading ?
\r\n \r\n \r\n
: null}\r\n No Available Services & Users
\r\n }\r\n }\r\n }\r\n\r\n assignServices = () => {\r\n let serviceList = this.state.Services.filter(itm => itm.Selected === true);\r\n this.props.affectedServices(serviceList);\r\n if (this.props.saveSelections) {\r\n sessionStorage.setItem('serviceList', JSON.stringify(this.state.Services));\r\n }\r\n this.handleClose();\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullServices;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'CombinedTypes', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'ServiceNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Extension', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.setState({ Services: services })\r\n }\r\n else {\r\n this.setState({ Services: fullDetails });\r\n }\r\n }\r\n\r\n render() {\r\n if (userIsAdmin())\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 {this.gridContent()}\r\n
\r\n \r\n {!this.state.loading ?
\r\n \r\n \r\n
: null}\r\n No Available Circuits To Load
\r\n );\r\n }\r\n }\r\n }\r\n\r\n assignCircuits = () => {\r\n let circuitsList = this.state.Circuits.filter(itm => itm.Selected === true);\r\n if(circuitsList && this.state.RedirectedFromCircuitsSaved!=null)\r\n {\r\n circuitsList =circuitsList.filter(object =>{return object.CircuitId !== this.state.RedirectedFromCircuitsSaved[0].CircuitId})\r\n }\r\n this.props.affectedCircuits(circuitsList);\r\n if (this.props.saveSelections) {\r\n sessionStorage.setItem('circuitsList', JSON.stringify(this.state.Circuits));\r\n }\r\n this.handleClose();\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullCircuits;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let circuits = filterBy(fullDetails, { \r\n logic: 'or',\r\n filters: [\r\n { field: 'CombinedTypes', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'ServiceNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Extension', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.setState({ Circuits: circuits })\r\n }\r\n else {\r\n this.setState({ Circuits: fullDetails });\r\n }\r\n }\r\n\r\n render() {\r\n if (userIsAdmin())\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 {this.gridContent()}\r\n
\r\n \r\n {!this.state.loading ?
\r\n \r\n \r\n
: null}\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 render() {\r\n if (!this.state.readOnly)\r\n {\r\n return (\r\n \r\n \r\n x\r\n \r\n \r\n {this.state.message}\r\n
\r\n \r\n {this.props.FileName}
\r\n \r\n \r\n
\r\n {this.modalFooter()}\r\n
\r\n \r\n \r\n
\r\n 3000 ? 'red' : '#b3b1b1'\r\n }}\r\n >{`Max Character Limit = ${this.state.NewComment.length}/3000`}\r\n
\r\n )\r\n } else return;\r\n }\r\n\r\n handleWriteComment = (e) => {\r\n let { value } = e.target;\r\n this.setState({ NewComment: value });\r\n }\r\n\r\n handleSubmitNewComment = async () => {\r\n await this.setState({ commentSubmitted: true });\r\n let apiPath = 'admin/CreateComment';\r\n let commentDTO = {\r\n CommentId: '',\r\n TicketId: this.state.DetailedTicket.TicketId,\r\n CommentBody: this.state.NewComment\r\n };\r\n if (this.state.NewComment != '') {\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(commentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.fetchTicketDetails();\r\n this.setState({\r\n AddComment: false, NewComment: '',\r\n });\r\n } else {\r\n let msg = response.message;\r\n this.fetchTicketDetails();\r\n }\r\n }\r\n }\r\n\r\n handleChangeSelect = (e, key) => {\r\n let { value } = e.target;\r\n let DetailedTicket = { ...this.state.DetailedTicket };\r\n if (key === 'ContactId') {\r\n DetailedTicket.Contact.ContactId = value;\r\n } else {\r\n DetailedTicket[key] = value;\r\n }\r\n this.setState({ DetailedTicket });\r\n }\r\n\r\n formGroupInput = (labelFor, labelName, val, key, type = 'text') => {\r\n if ((this.state.requestedClose && labelFor === 'Status') || (this.state.escalateTicket && labelFor === 'Escalated')) {\r\n return (\r\n New Comment
\r\n\r\n
\r\n \r\n
\r\n )\r\n } else {\r\n let bReadOnly = this.state.Edit && sessionStorage.hasTicketing === 'FULL' && this.state.DetailedTicket.Status !== 'Closed' &&\r\n (labelFor === 'Contact' || labelFor === 'Priority' || labelFor === 'CommunicationMethod')\r\n ? false : true;\r\n return (\r\n \r\n \r\n this.handleChangeSelect(e, key)}\r\n />\r\n
\r\n )\r\n }\r\n }\r\n\r\n\r\n formSelect = (labelFor, labelName, val, options, key) => {\r\n let bDisabled = sessionStorage.hasTicketing === 'FULL' && (this.state.Edit || labelFor === 'Contact') && this.state.DetailedTicket.Status !== 'Closed' ? false : true;\r\n let cursor = bDisabled === true ? 'not-allowed' : 'pointer';\r\n let htmlSelect = () => {\r\n if (options) {\r\n if (labelFor === 'Contact') {\r\n options = helper.contactOptions(options)\r\n } else {\r\n options = helper.pickListOptions(options);\r\n }\r\n return (\r\n \r\n )\r\n } else {\r\n return \r\n \r\n {htmlSelect()}\r\n
\r\n )\r\n }\r\n\r\n commentContainer = (CommentList) => {\r\n if (this.state.commentSubmitted) {\r\n return \r\n
\r\n )\r\n });\r\n } else return;\r\n }\r\n\r\n }\r\n\r\n ticketEmails = () => {\r\n if (this.state.EmailList && this.state.EmailList.length > 0) {\r\n return (\r\n \r\n Comment: \r\n {sessionStorage.enterpriseType===\"DATA\"?commentBody: comment.CommentBody}\r\n
\r\n Date: {`${comment.CreatedDate} ${sessionStorage.userTimeZone}`}
\r\n By: {comment.CreatedBy}
\r\n \r\n
\r\n )\r\n } else return;\r\n }\r\n\r\n storeAffectedDevices = async (data) => {\r\n let { TicketId } = this.state;\r\n let devices = data.map(itm => {\r\n return `MAC: ${itm.MacAddress || ''}\\nMake/Model: ${itm.MakeModel || ''}\\nAssignedTo: ${itm.AssignedTo || ''}\\n\\n`;\r\n });\r\n await this.setState({ AffectedDevices: devices });\r\n if (this.state.AffectedDevices.length > 0) {\r\n this.submitAffectedUtilities(TicketId);\r\n }\r\n }\r\n\r\n storeAffectedServices = async (data) => {\r\n let { TicketId } = this.state;\r\n let services = data.map(itm => {\r\n let extension = ''\r\n if (itm.Extension)\r\n extension = \"Extension: \" + itm.Extension + '\\n';\r\n else if (itm.Username && itm.ServiceNumber !== itm.Username)\r\n extension = \"Username: \" + itm.Username + '\\n';\r\n let serviceID = itm.ServiceNumber ? \"ServiceID: \" + itm.ServiceNumber + '\\n' : ''\r\n return `ServiceType: ${itm.ServiceType || itm.UserType}\\n${serviceID}${extension}\\n`;\r\n });\r\n await this.setState({ AffectedServices: services });\r\n if (this.state.AffectedServices.length > 0) {\r\n this.submitAffectedUtilities(TicketId);\r\n }\r\n }\r\n\r\n storeAffectedCircuits = async (data) => {\r\n let { TicketId } = this.state;\r\n let circuits = data.map(itm => {\r\n return `Circuits: ${itm.CircuitId}\\n${itm.CircuitName}\\n`;\r\n });\r\n await this.setState({ AffectedCircuits: circuits });\r\n if (this.state.AffectedCircuits.length > 0) {\r\n this.submitAffectedUtilities(TicketId);\r\n }\r\n }\r\n\r\n closeAndEscalateBtns = () => {\r\n if (sessionStorage.hasTicketing === 'FULL') {\r\n return (\r\n Emails
\r\n\r\n {this.state.EmailList.map((itm, idx) => {\r\n return (\r\n
\r\n \r\n
\r\n )\r\n })}\r\n From: {itm.FromAddress}
\r\n Subject: {itm.Subject}
\r\n Description: {itm.TextBody}
\r\n Date: {`${itm.CreatedDate} ${sessionStorage.userTimeZone}`}
\r\n \r\n Request Close\r\n
\r\n )\r\n } else return;\r\n }\r\n\r\n requestTicketClose = async () => {\r\n let { TicketId } = this.state.DetailedTicket;\r\n let apiPath = `admin/UpdateTicket`;\r\n let dto = {\r\n TicketId: TicketId,\r\n Status: 'Closed',\r\n };\r\n await this.setState({ requestedClose: true });\r\n let response = await apiCalls.post(apiPath, 'PATCH', JSON.stringify(dto)).then(res => res).catch(err => console.error(err));\r\n if (response) {\r\n this.fetchTicketDetails();\r\n }\r\n }\r\n\r\n detailedViewContent = () => {\r\n if (this.state.loading) {\r\n return \r\n {!this.state.savingTicket ?
\r\n
\r\n
\r\n )\r\n } else {\r\n return \r\n
: \r\n {this.formGroupInput('Type', 'Type', type)}\r\n {this.formGroupInput('Status', 'Status', Status)}\r\n {this.formGroupInput('Location', 'Location', Location)}\r\n {Contact=== null?this.formGroupInput('Contact', 'Contact', Contact):this.formSelect('Contact', 'Contact', contactId, this.state.ContactOptions, 'ContactId')}\r\n {sessionStorage.enterpriseType===\"VOICE\" || this.state.DetailedTicket.TicketType===\"RETAIL_TROUBLE\" ? null : this.formGroupInput('Category', 'Category', Category)}\r\n {/* {sessionStorage.enterpriseType===\"VOICE\" || this.state.DetailedTicket.TicketType===\"RETAIL_TROUBLE\" ? null : this.formGroupInput('SubCategory', 'Sub Category', SubCategory)} */}\r\n {this.formSelect('CommunicationMethod', 'Contact Method', PreferredCommunication, this.state.CommMethodOptions, 'PreferredCommunication')}\r\n
\r\n {this.ticketUpdateBtns()}\r\n
\r\n \r\n {this.ticketUpdateBtns()}\r\n
\r\n {this.closeAndEscalateBtns()}\r\n
\r\n \r\n {this.state.AffectedDevices.length > 0\r\n ? this.handleChangeSelect(e, 'Description')}\r\n >\r\n
\r\n {this.state.DetailedTicket.Status !== 'Closed' && sessionStorage.hasTicketing === 'FULL'\r\n ?
\r\n \r\n {`Affected Devices: ${this.state.AffectedDevices.length}`}\r\n
\r\n
: null}\r\n {this.state.AffectedServices.length > 0\r\n ? \r\n
\r\n {`Affected Services & Users: ${this.state.AffectedServices.length}`}\r\n
\r\n
: null}\r\n\r\n {this.state.AffectedCircuits.length > 0\r\n ? \r\n
\r\n {`Affected Circuits & Users: ${this.state.AffectedCircuits.length}`}\r\n
\r\n
: null}\r\n {this.state.AttachmentList.length > 0\r\n ? \r\n
\r\n {`Attachments: ${!this.state.attachmentSubmitted ? this.state.AttachmentList.length : ''}`}\r\n
\r\n
: null}\r\n \r\n
Description
\r\n\r\n {this.state.DetailedTicket.Status !== 'Closed' && sessionStorage.hasTicketing === 'FULL'\r\n ?
\r\n {sessionStorage.enterpriseType===\"VOICE\" || this.state.DetailedTicket.TicketType===\"RETAIL_TROUBLE\" ?\r\n
: null}\r\n \r\n
\r\n
\r\n {this.newCommentTextBox()}\r\n
\r\n \r\n
\r\n {this.ticketEmails()}\r\n Comments
\r\n {this.addCommentBtn()}\r\n\r\n {this.commentContainer(CommentList)}\r\n
\r\n No Available Ticket
\r\n }\r\n }\r\n }\r\n\r\n ticketUpdateBtns = () => {\r\n let { DetailedTicket, OriginalTicket } = this.state;\r\n if ((!DetailedTicket.Contact || DetailedTicket.Contact.ContactId === OriginalTicket.Contact.ContactId) &&\r\n DetailedTicket.Priority === OriginalTicket.Priority && DetailedTicket.Category === OriginalTicket.Category &&\r\n // DetailedTicket.SubCategory === OriginalTicket.SubCategory && DetailedTicket.OtherCategory === OriginalTicket.OtherCategory &&\r\n DetailedTicket.PreferredCommunication === OriginalTicket.PreferredCommunication && DetailedTicket.Description === OriginalTicket.Description\r\n )\r\n return;\r\n else {\r\n return (\r\n\r\n \r\n View Attachments\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n handleRefreshAttachments = async (data) => {\r\n await this.setState({ AttachmentList: data });\r\n }\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener('loadend', () => {\r\n let body = reader.result.split(',')[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'admin/CreateAttachment';\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n this.fetchAttachments();\r\n } else {\r\n let msg = JSON.parse(response.message);\r\n console.log('res error', msg);\r\n }\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n render() {\r\n return (\r\n - \r\n {this.state.AttachmentList.map((file, idx) => {\r\n let refName = file.AttachmentId;\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}","import React, { Component } from 'react';\r\nimport AffectedCircuitsModal from './components/affected_circuits_modal';\r\nimport AffectedDevicesModal from './components/affeced_devices_modal';\r\nimport AffectedServicesModal from './components/affected_services_modal';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport * as helper from './helper/ticket_helper';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { userIsAdmin } from '../../scripts/helper';\r\n\r\nconst accountID = '0010h00001XhZxcAAF';\r\n\r\n\r\nclass NewTicket extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n TicketSubject: '',\r\n TicketDescription: '',\r\n SelectedLocation: '',\r\n SelectedContact: '',\r\n SelectedPriority: 'Minor',\r\n SelectedCategory: '',\r\n SelectedType: '',\r\n // SelectedSubCategory: '',\r\n SelectedOtherCategory: '',\r\n SelectedCommMethod: '',\r\n submittedTicket: false,\r\n ticketSubFailed: false,\r\n AffectedDevices: [],\r\n AffectedServices: [],\r\n AttachmentList: [],\r\n AffectedCircuits: [],\r\n fileIndex: 0,\r\n redirectedFromCircuitsList: props.location.state ? props.location.state.redirectedFromCircuitsList : null,\r\n showConfirmationModal: false,\r\n type: [{ key: \"\", value: \"Select\" }, { key: \"DATA_SERVICES\", value: \"Data\" }, { key: \"RETAIL_TROUBLE\", value: \"Voice\" }, { key: \"VOICE_DUPLICATE\", value: \"Both\" }],\r\n SelectedMixedType: props.location.state ? \"DATA_SERVICES\" : '',\r\n ContactName: '',\r\n ContactEmail: '',\r\n ContactPhone: '',\r\n ShowTextBoxesForContactDetails: false,\r\n LoggedUser: sessionStorage.userEmail\r\n }\r\n this.handleCloseConfirmation = this.handleCloseConfirmation.bind(this);\r\n this.handleCancelTicketYes = this.handleCancelTicketYes.bind(this);\r\n this.ticketType = \"\";\r\n }\r\n\r\n componentDidMount() {\r\n if (sessionStorage.hasTicketing !== 'FULL') {\r\n this.props.history.push('/');\r\n }\r\n sessionStorage.removeItem('serviceList');\r\n sessionStorage.removeItem('circuitsList');\r\n sessionStorage.removeItem('deviceList');\r\n this.fetchTicketData();\r\n this.storeAffectedCircuitsRedirectedFromCircuits();\r\n\r\n }\r\n\r\n fetchTicketData = () => {\r\n let requests = [\r\n this.fetchContactList(),\r\n this.getCategoryList(),\r\n this.fetchLocations(),\r\n this.getPriorityList(),\r\n this.getCommMethodList(),\r\n this.getTypeList()\r\n ];\r\n Promise.all(requests).catch(err => console.error(err));\r\n }\r\n\r\n getTypeList = () => {\r\n const type = this.state.type.map((i) => {\r\n return \r\n })\r\n this.setState({ TypeListOptions: type });\r\n }\r\n\r\n getCommMethodList = () => {\r\n let apiPath;\r\n sessionStorage.enterpriseType == \"DATA\" ? apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.dataServices}&Picklist=COMM_METHOD&ControllerValue=` :\r\n apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.retailTrouble}&Picklist=COMM_METHOD&ControllerValue=`;\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n if (data.ValueList.includes('Portal')) {\r\n data.ValueList.splice(data.ValueList.indexOf('Portal'), 1);\r\n }\r\n let options = data.ValueList.map((item, idx) => {\r\n return \r\n });\r\n this.setState({ CommMethodOptions: options });\r\n } else {\r\n this.setState({ CommMethodOptions: [] });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n getPriorityList = () => {\r\n let apiPath;\r\n sessionStorage.enterpriseType == \"DATA\" ? apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.dataServices}&Picklist=PRIORITY&ControllerValue=` :\r\n apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.retailTrouble}&Picklist=PRIORITY&ControllerValue=`;\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.ValueList.map((item, idx) => {\r\n return \r\n });\r\n this.setState({ PriorityOptions: options });\r\n } else {\r\n this.setState({ PriorityOptions: [] });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n getCategoryList = () => {\r\n let apiPath;\r\n\r\n sessionStorage.enterpriseType == \"DATA\" ? apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.dataServices}&Picklist=CATEGORY&ControllerValue=` :\r\n apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.retailTrouble}&Picklist=CATEGORY&ControllerValue=`;\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.ValueList.filter(option => option !== \"Other\").map((item, idx) => {\r\n return \r\n });\r\n this.setState({ CategoryOptions: options });\r\n } else {\r\n this.setState({ CategoryOptions: [] });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n // getSubCategoryList = (categoryValue) => {\r\n // if (categoryValue === '' || categoryValue === 'Other') {\r\n // return;\r\n // } else {\r\n // let apiPath;\r\n // sessionStorage.enterpriseType == \"DATA\" ? apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.dataServices}&Picklist=SUB_CATEGORY&ControllerValue=${categoryValue}` :\r\n // apiPath = `admin/GetPicklistValues?RecordTypeId=${helper.retailTrouble}&Picklist=SUB_CATEGORY&ControllerValue=${categoryValue}`;\r\n // apiCalls.fetchData(apiPath).then(data => {\r\n // if (data) {\r\n // let options = data.ValueList.map((item, idx) => {\r\n // return \r\n // });\r\n // this.setState({ SubCategoryOptions: options });\r\n // } else {\r\n // this.setState({ SubCategoryOptions: [] });\r\n // }\r\n // }).catch(err => console.error(err));\r\n // }\r\n // }\r\n\r\n fetchLocations = () => {\r\n let apiPath = '';\r\n if (userIsAdmin())\r\n apiPath = 'admin/Locations';\r\n else\r\n apiPath = 'usr/GetUserLocation';\r\n\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.map((location, idx) => {\r\n return \r\n });\r\n if (data.length === 1)\r\n this.setState({ SelectedLocation: data[0].LocationAccountNumber, LocationOptions: options });\r\n else\r\n this.setState({ LocationOptions: options });\r\n } else {\r\n this.setState({ LocationOptions: [] });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchContactList = () => {\r\n let apiPath = 'admin/GetContactList';\r\n apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n let options = data.map((contact, idx) => {\r\n return \r\n });\r\n this.setState({ ContactOptions: options });\r\n } else {\r\n this.setState({ ContactOptions: [] });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n formGroupDropDown = (labelFor, labelName, val, options) => {\r\n let setOptions = (options) => {\r\n if (options) {\r\n if (labelFor === 'Contact' && labelName === 'Contact') {\r\n return (\r\n \r\n )\r\n }\r\n if (labelFor === 'Type' && labelName === 'Type') {\r\n return (\r\n \r\n )\r\n }\r\n else {\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 Ticket {this.state.DetailedTicket ? {`# ${this.state.DetailedTicket.TicketNumber}`} {`- ${this.state.DetailedTicket.Subject}`} : null}
\r\n\r\n {this.state.AttachmentList.length > 0 && !this.state.attachmentSubmitted ? this.attachmentDropdown() : null}\r\n
\r\n \r\n
\r\n
\r\n
\r\n {this.detailedViewContent()}\r\n
\r\n \r\n
\r\n
\r\n {this.detailedViewContent()}\r\n
\r\n {sessionStorage.enterpriseType == \"DATA\" ?\r\n :\r\n this.state.SelectedMixedType === 'RETAIL_TROUBLE' || sessionStorage.enterpriseType === 'VOICE' || this.state.SelectedMixedType === \"VOICE_DUPLICATE\" ?\r\n :\r\n \r\n }\r\n {setOptions(options)}\r\n
\r\n )\r\n }\r\n else {\r\n return (\r\n \r\n {sessionStorage.enterpriseType == \"DATA\" ?\r\n :\r\n this.state.SelectedMixedType === 'RETAIL_TROUBLE' || sessionStorage.enterpriseType === 'VOICE' || this.state.SelectedMixedType === \"VOICE_DUPLICATE\" ?\r\n :\r\n \r\n }\r\n {setOptions(options)}\r\n
\r\n )\r\n }\r\n\r\n }\r\n\r\n renderMandatorySymbol = () => {\r\n return (\r\n \r\n {sessionStorage.enterpriseType == \"DATA\" ?\r\n :\r\n this.state.SelectedMixedType === 'RETAIL_TROUBLE' || sessionStorage.enterpriseType === 'VOICE' || this.state.SelectedMixedType === \"VOICE_DUPLICATE\" ?\r\n :\r\n \r\n }\r\n {setOptions(options)}\r\n
\r\n )\r\n }\r\n\r\n formGroupInput = (labelFor, labelName, val, type = 'text') => {\r\n return (\r\n \r\n \r\n this.handleInputChange(e, labelFor)}\r\n />\r\n
\r\n )\r\n }\r\n\r\n selectOptions = (options) => {\r\n return options.map((option, index) => {\r\n return \r\n })\r\n }\r\n\r\n handleInputChange = (e, labelFor) => {\r\n let { value } = e.target;\r\n switch (labelFor) {\r\n case 'Location':\r\n this.setState({ SelectedLocation: value });\r\n return;\r\n case 'Contact':\r\n this.setState({ SelectedContact: value });\r\n value === 'Others' ?\r\n this.setState({ ShowTextBoxesForContactDetails: true }) :\r\n this.setState({ ShowTextBoxesForContactDetails: false })\r\n return;\r\n case 'Priority':\r\n this.setState({ SelectedPriority: value });\r\n return;\r\n case 'Category':\r\n // this.setState({ SubCategoryOptions: undefined })\r\n // this.getSubCategoryList(value);\r\n this.setState({ SelectedCategory: value });\r\n return;\r\n // case 'SubCategory':\r\n // this.setState({ SelectedSubCategory: value });\r\n // return;\r\n case 'Type':\r\n this.setState({ SelectedMixedType: value });\r\n return;\r\n case 'ContactName':\r\n this.setState({ ContactName: value });\r\n return;\r\n case 'ContactEmail':\r\n this.setState({ ContactEmail: value });\r\n return;\r\n case 'ContactPhone':\r\n this.setState({ ContactPhone: value });\r\n return;\r\n case 'CommunicationMethod':\r\n this.setState({ SelectedCommMethod: value });\r\n\r\n default:\r\n return;\r\n }\r\n }\r\n\r\n handleTicketSubject = (e) => {\r\n let { value } = e.target;\r\n this.setState({ TicketSubject: value });\r\n }\r\n\r\n handleTicketSubjectRFC = (e) => {\r\n let { value } = e.target;\r\n this.setState({ TicketSubject: value });\r\n }\r\n\r\n handleTicketDescription = (e) => {\r\n let { value } = e.target;\r\n this.setState({ TicketDescription: value });\r\n }\r\n\r\n renderModelButtons = () => {\r\n if (sessionStorage.enterpriseType === \"MIXED\" && this.state.SelectedMixedType === 'VOICE_DUPLICATE') {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n if (sessionStorage.enterpriseType === \"MIXED\" && this.state.SelectedMixedType === 'DATA_SERVICES') {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n \r\n }\r\n\r\n addAttachment = (event) => {\r\n let file = event.target.files[0];\r\n let fileTypes = ['image/jpeg','image/gif','image/png','application/pdf','image/x-eps'];\r\n if(fileTypes.indexOf(file.type) > -1){\r\n $('#filePopup').hide();\r\n let reader = new FileReader();\r\n let newFileIndex = this.state.fileIndex + 1;\r\n reader.addEventListener('loadend', async () => {\r\n let fileParams = {\r\n id: newFileIndex,\r\n body: reader.result.split(',')[1],\r\n name: file.name\r\n };\r\n this.state.AttachmentList.push(fileParams);\r\n await this.setState({ AttachmentList: this.state.AttachmentList, fileIndex: newFileIndex });\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n else{\r\n $('#filePopup').show();\r\n }\r\n }\r\n\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'admin/CreateAttachment';\r\n let attachmentDTO = {\r\n TicketId: ticketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n };\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n } else {\r\n let msg = JSON.parse(response.message);\r\n console.log('res error', msg);\r\n }\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n storeAffectedDevices = (data) => {\r\n let devices = data.map(itm => {\r\n return `MAC: ${itm.MacAddress || ''}\\nMake/Model: ${itm.MakeModel || ''}\\nAssignedTo: ${itm.AssignedTo || ''}\\n\\n`;\r\n });\r\n this.setState({ AffectedDevices: devices });\r\n }\r\n\r\n storeAffectedCircuitsRedirectedFromCircuits = (data) => {\r\n const rfc = this.state.redirectedFromCircuitsList !== null ? true : false;\r\n console.log(\"new_ticket.js\", this.state.redirectedFromCircuitsList);\r\n if (this.state.redirectedFromCircuitsList !== null) {\r\n var circuits = this.state.redirectedFromCircuitsList.map(itm => {\r\n return `CircuitId: ${itm.CircuitId || ''}\\nCircuitName: ${itm.CircuitName || ''}\\nSelected: ${true || ''}\\n\\n`;\r\n });\r\n }\r\n if (rfc && data != null) {\r\n var circuitsData = data.map(itm => {\r\n return `CircuitId: ${itm.CircuitId || ''}\\nCircuitName: ${itm.CircuitName || ''}\\nSelected: ${true || ''}\\n\\n`;\r\n })\r\n const affectedCircuits = [...circuits, ...circuitsData]\r\n this.setState({ AffectedCircuits: affectedCircuits });\r\n }\r\n if (rfc && data === undefined) {\r\n this.setState({ AffectedCircuits: circuits });\r\n }\r\n if (data != null && rfc == false) {\r\n var circuitsData = data.map(itm => {\r\n return `CircuitId: ${itm.CircuitId || ''}\\nCircuitName: ${itm.CircuitName || ''}\\nSelected: ${true || ''}\\n\\n`;\r\n })\r\n this.setState({ AffectedCircuits: circuitsData });\r\n }\r\n console.log(this.state.AffectedCircuits, \"AffectedCircuits\")\r\n }\r\n\r\n storeAffectedServices = (data) => {\r\n let services = data.map(itm => {\r\n let extension = ''\r\n if (itm.Extension)\r\n extension = \"Extension: \" + itm.Extension + '\\n';\r\n else if (itm.Username && itm.ServiceNumber !== itm.Username)\r\n extension = \"Username: \" + itm.Username + '\\n';\r\n let serviceID = itm.ServiceNumber ? \"ServiceID: \" + itm.ServiceNumber + '\\n' : ''\r\n return `ServiceType: ${itm.ServiceType || itm.UserType}\\n${serviceID}${extension}\\n`;\r\n });\r\n this.setState({ AffectedServices: services });\r\n }\r\n\r\n submitNewTicketComment = async (ticketId) => {\r\n let apiPath = 'admin/CreateComment';\r\n let string = '';\r\n if (this.state.AffectedDevices.length > 0 && this.state.AffectedServices.length > 0) {\r\n string = `AFFECTED DEVICES COUNT: ${this.state.AffectedDevices.length}\\n${this.state.AffectedDevices.join().replace(/,/g, '')} AFFECTED SERVICES & USERS COUNT: ${this.state.AffectedServices.length}\\n${this.state.AffectedServices.join().replace(/,/g, '')}`;\r\n } else if (this.state.AffectedDevices.length > 0 && this.state.AffectedServices.length < 1) {\r\n string = `AFFECTED DEVICES COUNT: ${this.state.AffectedDevices.length}\\n${this.state.AffectedDevices.join().replace(/,/g, '')}`;\r\n }\r\n else if (this.state.AffectedCircuits.length > 0 && this.state.AffectedDevices.length < 1) {\r\n string = `AFFECTED CIRCUITS COUNT: ${this.state.AffectedCircuits.length}\\n${this.state.AffectedCircuits.join().replace(/,/g, '')}`;\r\n }\r\n else if (this.state.AffectedCircuits.length > 0 && this.state.AffectedDevices.length > 0) {\r\n string = `AFFECTED CIRCUITS COUNT: ${this.state.AffectedCircuits.length}\\n${this.state.AffectedDevices.join().replace(/,/g, '')} AFFECTED DEVICES COUNT: ${this.state.AffectedDevices.length}\\n${this.state.AffectedDevices.join().replace(/,/g, '')}`;\r\n }\r\n else {\r\n string = `AFFECTED SERVICES & USERS COUNT: ${this.state.AffectedServices.length}\\n${this.state.AffectedServices.join().replace(/,/g, '')}`\r\n }\r\n let commentDTO = {\r\n CommentId: '',\r\n TicketId: ticketId,\r\n CommentBody: string,\r\n };\r\n if (this.state.AffectedDevices.length > 0 || this.state.AffectedServices.length > 0 || this.state.AffectedCircuits.length > 0) {\r\n await apiCalls.post(apiPath, 'POST', JSON.stringify(commentDTO)).then(res => res).catch(err => console.error(err));\r\n }\r\n }\r\n\r\n submitNewTicket = async () => {\r\n let {\r\n TicketSubject,\r\n TicketDescription,\r\n SelectedLocation,\r\n SelectedContact,\r\n SelectedPriority,\r\n SelectedCategory,\r\n // SelectedSubCategory,\r\n SelectedOtherCategory,\r\n SelectedCommMethod,\r\n AttachmentList,\r\n ContactName,\r\n ContactEmail,\r\n ContactPhone,\r\n SelectedType,\r\n LoggedUser\r\n } = this.state;\r\n if (this.state.TicketDescription === \"\") {\r\n this.setState({ submittedTicket: false, ticketSubFailed: true });\r\n }\r\n let apiPath = 'admin/CreateTicket';\r\n const rfc = this.state.redirectedFromCircuitsList !== null ? true : false;\r\n if (rfc) {\r\n var ticketSubjectCircuits = this.state.redirectedFromCircuitsList[0].CircuitName + '- Trouble Ticket'\r\n var ticketDTO = {\r\n AccountId: accountID,\r\n LocationAccountNumber: this.state.redirectedFromCircuitsList[0].LocationAccountNumber,\r\n Subject: ticketSubjectCircuits,\r\n Description: ContactName !== '' && SelectedCommMethod !== \"\" ?\r\n \"Contact Name:- \" + ContactName + \"\\n\\nContactEmail:- \" + ContactEmail + \"\\n\\nContactPhone:-\" + ContactPhone + \"\\n\\nInitial Contact Method:- \" + SelectedCommMethod + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription\r\n : ContactName !== '' && SelectedCommMethod === \"\" ?\r\n \"Contact Name:-\" + ContactName + \"\\n\\nContactEmail:-\" + ContactEmail + \"\\n\\nContactPhone:-\" + ContactPhone + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription\r\n : ContactName === '' && SelectedCommMethod !== \"\" ?\r\n \"Initial Contact Method:- \" + SelectedCommMethod + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription :\r\n \"Submitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription,\r\n Category: SelectedCategory,\r\n // SubCategory: SelectedSubCategory || \"N/A\",\r\n OtherCategory: SelectedOtherCategory,\r\n Priority: SelectedPriority,\r\n ContactId: SelectedContact,\r\n PreferredCommunication: SelectedCommMethod,\r\n TicketType: sessionStorage.enterpriseType == 'MIXED' ? this.state.SelectedMixedType : this.ticketType\r\n };\r\n console.log(JSON.stringify(ticketDTO));\r\n }\r\n else {\r\n var ticketDTO = {\r\n AccountId: accountID,\r\n LocationAccountNumber: SelectedLocation,\r\n Subject: TicketSubject,\r\n Description: ContactName !== '' && SelectedCommMethod !== \"\" ?\r\n \"Contact Name:- \" + ContactName + \"\\n\\nContactEmail:- \" + ContactEmail + \"\\n\\nContactPhone:-\" + ContactPhone + \"\\n\\nInitial Contact Method:- \" + SelectedCommMethod + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription\r\n : ContactName !== '' && SelectedCommMethod === \"\" ?\r\n \"Contact Name:-\" + ContactName + \"\\n\\nContactEmail:-\" + ContactEmail + \"\\n\\nContactPhone:-\" + ContactPhone + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription\r\n : ContactName === '' && SelectedCommMethod !== \"\" ?\r\n \"Initial Contact Method:- \" + SelectedCommMethod + \"\\n\\nSubmitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription :\r\n \"Submitted By:-\" + LoggedUser + \"\\n\\n\" + TicketDescription,\r\n Category: SelectedCategory,\r\n // SubCategory: SelectedSubCategory || \"N/A\",\r\n OtherCategory: SelectedOtherCategory,\r\n Priority: SelectedPriority,\r\n ContactId: SelectedContact,\r\n PreferredCommunication: SelectedCommMethod,\r\n TicketType: sessionStorage.enterpriseType == 'MIXED' ? this.state.SelectedMixedType : this.ticketType\r\n };\r\n //PBI:6610 :- this condition will enact in case of SelectedMixedType as \"Both\", \r\n // in case of \"Both\", the key needs to be same as of VOICE i.e. RETAIL_TROUBLE,\r\n // and as the keys could not be same for VOICE & BOTH so replacing them before submission\r\n if (ticketDTO.TicketType === \"VOICE_DUPLICATE\") {\r\n ticketDTO.TicketType = \"RETAIL_TROUBLE\";\r\n }\r\n }\r\n if (this.state.TicketDescription === \"\") {\r\n this.setState({ submittedTicket: false, ticketSubFailed: true });\r\n }\r\n else {\r\n await this.setState({ submittedTicket: true, ticketSubFailed: false });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(ticketDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n let newTicketID = JSON.parse(response.message).ObjectId;\r\n await this.submitNewTicketComment(newTicketID);\r\n await AttachmentList.forEach((itm) => {\r\n this.createAttachment(itm.body, itm.name, newTicketID);\r\n });\r\n this.props.history.push(`/ticket/${newTicketID}`);\r\n } else {\r\n this.setState({ submittedTicket: false, ticketSubFailed: true });\r\n }\r\n }\r\n }\r\n\r\n cancelNewTicket = () => {\r\n this.setState({ showConfirmationModal: true });\r\n }\r\n\r\n handleCancelTicketYes = () => {\r\n this.props.history.push('/tickets_all')\r\n }\r\n\r\n handleCloseConfirmation = () => {\r\n this.setState({ showConfirmationModal: false });\r\n }\r\n\r\n attachmentDropdown = () => {\r\n return (\r\n \r\n
\r\n \r\n {this.state.SelectedMixedType === 'RETAIL_TROUBLE' || sessionStorage.enterpriseType === 'VOICE' || this.state.SelectedMixedType === \"VOICE_DUPLICATE\" ? null : {this.formGroupDropDown('Category', 'Category', this.state.SelectedCategory, this.state.CategoryOptions)}}\r\n {/* {(this.state.SelectedCategory === '' || this.state.SelectedCategory === 'Other' ||this.state.SelectedMixedType === 'RETAIL_TROUBLE' || sessionStorage.enterpriseType === 'VOICE'||this.state.SelectedMixedType ===\"VOICE_DUPLICATE\")\r\n ? null\r\n : this.formGroupDropDown(\r\n 'SubCategory',\r\n 'Sub Category',\r\n this.state.SelectedSubCategory,\r\n this.state.SubCategoryOptions\r\n )} */}\r\n {rfc ? this.formGroupInput('Location', 'Location', locationRfc) : this.formGroupDropDown('Location', 'Location', this.state.SelectedLocation, this.state.LocationOptions)}\r\n {this.formGroupDropDown('Contact', 'Contact', this.state.SelectedContact, this.state.ContactOptions)}\r\n {this.state.ShowTextBoxesForContactDetails ? this.formGroupInput('ContactName', 'Contact Name', this.state.ContactName) : null}\r\n {this.state.ShowTextBoxesForContactDetails ? this.formGroupInput('ContactEmail', 'Contact Email', this.state.ContactEmail) : null}\r\n {this.state.ShowTextBoxesForContactDetails ? this.formGroupInput('ContactPhone', 'Contact Phone', this.state.ContactPhone) : null}\r\n {this.formGroupDropDown('CommunicationMethod', 'Contact Method', this.state.SelectedCommMethod, this.state.CommMethodOptions)}\r\n
\r\n \r\n {this.state.AffectedDevices.length > 0\r\n ? Subject *:\r\n :\r\n \r\n Subject *:\r\n \r\n }\r\n\r\n Description *:\r\n \r\n
\r\n \r\n {`Affected Devices: ${this.state.AffectedDevices.length}`}\r\n
\r\n
: null}\r\n {this.state.AffectedServices.length > 0\r\n ? \r\n
\r\n {`Affected Services & Users: ${this.state.AffectedServices.length}`}\r\n
\r\n
: null}\r\n {this.state.AffectedCircuits.length > 0\r\n ? \r\n
\r\n {`Affected Circuits & Users: ${this.state.AffectedCircuits.length}`}\r\n
\r\n
: null}\r\n {this.state.AttachmentList.length > 0\r\n ? \r\n
\r\n {`Attachments: ${this.state.AttachmentList.length}`}\r\n
\r\n
: null}\r\n {rfc ? \r\n \r\n
\r\n Allowed Attachment Types are PDF, Image(GIF, TIF, JPEG, Etc..)\r\n Recommendation: Send .doc, .txt, .csv, etc. via email. \r\n \r\n
\r\n \r\n \r\n {this.renderModelButtons()}\r\n \r\n
\r\n \r\n \r\n View Attachments\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n removeAttachment = (id) => {\r\n let { AttachmentList } = this.state;\r\n let filteredList = AttachmentList.filter(itm => itm.id !== id);\r\n this.setState({ AttachmentList: filteredList });\r\n }\r\n\r\n createTextBox = () => {\r\n const rfc = this.state.redirectedFromCircuitsList !== null ? true : false;\r\n if (rfc && sessionStorage.enterpriseType == 'MIXED') {\r\n this.ticketType = \"DATA\";\r\n return (\r\n {this.formGroupDropDown('Type', 'Type', this.state.SelectedMixedType, this.state.TypeListOptions)}\r\n \r\n )\r\n }\r\n else {\r\n if (sessionStorage.enterpriseType == 'DATA') {\r\n this.ticketType = \"DATA\";\r\n return (- \r\n {this.state.AttachmentList.map((file, idx) => {\r\n return (\r\n
- \r\n \r\n\r\n
\r\n \r\n )\r\n })}\r\n
Type
)\r\n }\r\n else if (sessionStorage.enterpriseType == 'MIXED') {\r\n this.ticketType = \"DATA\";\r\n return (\r\n {this.formGroupDropDown('Type', 'Type', this.state.SelectedMixedType, this.state.TypeListOptions)}\r\n \r\n )\r\n }\r\n else {\r\n this.ticketType = \"VOICE\";\r\n return (Type
)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const rfc = this.state.redirectedFromCircuitsList !== null ? true : false;\r\n return (\r\n\r\n
\r\n )\r\n }\r\n};\r\nexport default NewTicket;","import React, { Component } from 'react';\r\nimport * as apiCalls from '../requests/api_calls';\r\nimport * as config from '../requests/config';\r\nimport * as settings from '../scripts/settings';\r\nimport { DataLoadingSpinner } from '../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy, filterBy } from '@progress/kendo-data-query';\r\n\r\nexport default class DocumentRepository extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n loading: false,\r\n UserFiles: [],\r\n AdditionalFiles: [],\r\n FullListings: [],\r\n Sort: [{ field: \"FileName\", dir: \"asc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n }\r\n\r\n class DataLink extends GridCell {\r\n render() {\r\n //let test = this.props.dataItem;\r\n let { FileName, DocumentId, URL } = this.props.dataItem;\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n New Ticket \r\n \r\n {this.createTextBox()}\r\n {this.state.ticketSubFailed ?\r\n Submission Error: Confirm All Required Fields\r\n : null}
\r\n\r\n {this.state.AttachmentList.length > 0 ? this.attachmentDropdown() : null}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Are you sure you want to cancel this ticket? \r\n \r\n \r\n
\r\n \r\n \r\n {this.renderContent()}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {URL}\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 userFilesGrid = () => {\r\n let { UserFiles } = this.state;\r\n if (UserFiles && UserFiles.length > 0) {\r\n return (\r\n Additional Files
\r\n\r\n
\r\n )\r\n } else {\r\n return (\r\n User Guides
\r\n {UserFiles.map((file, idx) => {\r\n\r\n return (\r\n\r\n \r\n \r\n {file.URL}\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 return (\r\n User Files
\r\nNo User Guides are currently available
\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport PropTypes from 'prop-types';\r\nimport InputMask from 'react-input-mask';\r\n\r\nclass AddEditEnterpriseContact extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n let canEdit = false;\r\n if (props.AddEditMode === 'Add')\r\n canEdit = true;\r\n else if (props.ContactDetails)\r\n canEdit = props.ContactDetails.CanEdit;\r\n\r\n this.state = {\r\n isAdd: props.AddEditMode === 'Add' ? true : false,\r\n saving: false,\r\n ContactDetails: {\r\n EnterpriseId: props.ContactDetails && props.ContactDetails.EnterpriseId ? props.ContactDetails.EnterpriseId : 0,\r\n OldName: props.ContactDetails && props.ContactDetails.OldName ? props.ContactDetails.OldName : '',\r\n Name: props.ContactDetails && props.ContactDetails.Name ? props.ContactDetails.Name : '',\r\n TN: props.ContactDetails && props.ContactDetails.TN ? props.ContactDetails.TN : '',\r\n CanEdit: canEdit\r\n },\r\n showModal: false,\r\n savingShowSuccess: false,\r\n savingShowError: false,\r\n saveResultsMessage: '',\r\n SuccessMessage: 'Success',\r\n adding: false\r\n };\r\n this.handleOnSave = this.handleOnSave.bind(this);\r\n this.callUpdateFromModal = this.callUpdateFromModal.bind(this);\r\n }\r\n\r\n getBlankContactDetails = () => {\r\n return {\r\n EnterpriseId: 0,\r\n OldName: '',\r\n Name: '',\r\n TN: '',\r\n CanEdit: true\r\n };\r\n }\r\n\r\n showModal = () => {\r\n this.setState({showModal: true, ErrorMessage: '', savingShowError: false});\r\n }\r\n\r\n handleClose = () => {\r\n let state = this.state;\r\n if (state.isAdd)\r\n state.ContactDetails = this.getBlankContactDetails();\r\n \r\n state.showModal = false;\r\n state.savingShowSuccess = false;\r\n state.savingShowError = false;\r\n \r\n this.setState(state);\r\n }\r\n\r\n handleOnChange=(field, event)=>{\r\n\r\n let state = {...this.state};\r\n state.ContactDetails[field] = event.target.value;\r\n this.setState(state);\r\n }\r\n\r\n handleOnStateChange = (e) => {\r\n let state = this.state;\r\n state.ContactDetails.State = e.target.value;\r\n this.setState(state);\r\n }\r\n\r\n callUpdateFromModal = (newContactModel) => {\r\n this.props.UpdateParentFromModal(newContactModel, this.state.adding);\r\n }\r\n\r\n getSaveMessage = () => {\r\n if (this.state.saving)\r\n {\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n Documents
\r\n\r\n
\r\n {!this.state.loading ? \r\n \r\n \r\n \r\n
\r\n \r\n
: \r\n {this.userFilesGrid()}\r\n
\r\n \r\n {this.additionalFilesGrid()}\r\n
\r\n \r\n {this.state.saveResultsMessage}\r\n
\r\n );\r\n } else if (this.state.savingShowSuccess) {\r\n return (\r\n {this.state.SuccessMessage}
\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n handleOnSave = () => {\r\n\r\n if (this.state.ContactDetails.Name.toString().trim() === '')\r\n {\r\n this.setState({savingShowError: true, saveResultsMessage: 'A Name must be provided!'})\r\n return;\r\n }\r\n if (this.state.ContactDetails.TN.toString().trim() === '')\r\n {\r\n this.setState({savingShowError: true, saveResultsMessage: 'A TN must be provided!'})\r\n return;\r\n }\r\n\r\n this.setState({saving: true, adding: (this.state.ContactDetails.Name && this.state.ContactDetails.OldName === '') ? true : false});\r\n let apiPath = '';\r\n let verb = '';//this.state.isAdd ? 'POST' : 'PATCH';''\r\n let requestData = {};\r\n if (this.state.ContactDetails.OldName === '')\r\n {\r\n apiPath = 'admin/AddContactToContactBook';\r\n verb = 'POST'\r\n requestData = {\r\n EnterpriseId: 0,\r\n TN: this.state.ContactDetails.TN.replace(/_/gi, \"\"),\r\n OldName: '',\r\n Name: this.state.ContactDetails.Name,\r\n CanEdit: this.state.ContactDetails.CanEdit\r\n };\r\n } else {\r\n apiPath = 'admin/UpdateContactInContactBook';\r\n verb = 'PATCH';\r\n requestData = {\r\n EnterpriseId: this.state.ContactDetails.EnterpriseId,\r\n OldName: this.state.ContactDetails.OldName,\r\n TN: this.state.ContactDetails.TN.replace(/_/gi, \"\"),\r\n Name: this.state.ContactDetails.Name,\r\n CanEdit: this.state.ContactDetails.CanEdit\r\n }\r\n }\r\n apiCalls.post(apiPath, verb, JSON.stringify(requestData)).then((data) => {\r\n if (data.ok)\r\n {\r\n let newContactModel = JSON.parse(data.message);\r\n this.callUpdateFromModal(newContactModel);\r\n this.setState({ContactDetails: newContactModel, savingShowSuccess: true, saving: false, SuccessMessage: \"Success\", ErrorMessage: '', savingShowError: false});\r\n } else {\r\n this.setState({savingShowError: true, saving: false, saveResultsMessage: 'An error occurred saving Contact in Contact Directory: ' + data.message })\r\n }\r\n })\r\n .catch(message => {\r\n this.setState({\r\n saving: false,\r\n savingShowError: true,\r\n loading: false,\r\n saveResultsMessage: 'An error occurred saving Contact in Contact Directory: ' + message\r\n });\r\n });\r\n \r\n }\r\n\r\n getModalButtons = () => { \r\n if (this.state.ContactDetails.CanEdit === true)\r\n {\r\n return (\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\n }\r\n\r\n getEditViewButton = () => {\r\n if (this.state.ContactDetails.CanEdit === true)\r\n return (\r\n \r\n );\r\n else\r\n return (\r\n \r\n Add Contact\r\n
\r\n \r\n
\r\n \r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\r\n {/*
\r\n
\r\n \r\n {this.getModalButtons()}\r\n {this.getSaveMessage()}\r\n {/*
\r\n \r\n { if (this.props.enabled === true) this.props.onChange(this.props.id,e) } } />\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n \r\n { if (this.props.enabled === true) this.props.onChange(this.props.id,e) } }/>\r\n
\r\n );\r\n }\r\n }\r\n};\r\n\r\nContactTextField.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n textvalue: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n onChange: PropTypes.func\r\n}\r\n\r\n\r\n\r\nexport default AddEditEnterpriseContact;","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport _ from 'lodash';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { DataLoadingSpinner } from '../components/spinners';\r\nimport { connect } from 'react-redux';\r\nimport * as apiCalls from '../requests/api_calls';\r\nimport * as EmailValidator from 'email-validator';\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6\r\nimport PropTypes from 'prop-types';\r\nimport WrappedCell from '../components/wordWrappedCell'\r\nimport AddEditEnterpriseContact from './modals/AddEditEnterpriseContact';\r\nimport { headerToolTip } from '../components/ellipsisHeaderTooltip';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as helper from './../scripts/helper';\r\n\r\nclass EnterpriseContactDirectory extends Component {\r\n\r\n initialState = (props) => {\r\n return {\r\n Contacts: [],\r\n ContactsCopy: [],\r\n loading: true,\r\n showDeletePrompt: false,\r\n Sort: [{ field: \"Name\", dir: 'asc' }],\r\n gridHeight: (window.innerHeight - 180),\r\n searchTerm: '',\r\n savingShowSuccess: false,\r\n savingShowError: false,\r\n saveResultsMessage: ''\r\n };\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = this.initialState(props);\r\n\r\n const handleDeleteItem = this.handleDeleteItem.bind(this);\r\n const updateFromModal = this.updateFromModal.bind(this);\r\n\r\n class ContactEditButton extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n return (\r\n \r\n {\r\n event.target.value = null;\r\n }}\r\n />\r\n \r\n
)\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener('loadend', () => {\r\n let body = reader.result.split(',')[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'admin/UploadEnterpriseLevelContacts';\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n });\r\n this.fetchData();\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n });\r\n }\r\n }\r\n\r\n\r\n render() {\r\n if (this.state.loading) {\r\n return \r\n
\r\n );\r\n }\r\n }\r\n}\r\n\r\nclass SavingMessageControl extends Component {\r\n render() {\r\n let successMessage = \"\";\r\n if (this.props.showSuccess) {\r\n successMessage = (\r\n
\r\n \r\n
\r\n \r\n
\r\n {displayTitle()} {this.state.ContactsCopy.length}
\r\n\r\n
\r\n \r\n \r\n this.searchContacts(e)} value={this.state.searchTerm} />\r\n \r\n
\r\n \r\n {this.uploadBtn()}\r\n {this.showAddContactButton()}\r\n
\r\n \r\n \r\n {this.gridContent()}\r\n \r\n \r\n Remove Contact? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Are you sure you wish to remove this contact from Enterprise Directory?
{this.props.SuccessMessage}
\r\n )\r\n }\r\n\r\n let loadingMessage = \"\";\r\n if (this.props.showLoading) {\r\n loadingMessage = ({this.props.ErrorMessage}
)\r\n }\r\n\r\n return (\r\n \r\n {successMessage}\r\n {loadingMessage}\r\n {errorMessage}\r\n
\r\n );\r\n }\r\n};\r\n\r\nSavingMessageControl.propTypes = {\r\n showSuccess: PropTypes.bool.isRequired,\r\n showLoading: PropTypes.bool.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n}\r\n\r\nexport default EnterpriseContactDirectory;","import React, { Component, } from 'react';\r\nimport { DataLoadingSpinner } from '../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport * as apiCalls from '../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as config from '../requests/config';\r\nimport { headerToolTip } from '../components/ellipsisHeaderTooltip';\r\nimport { filtercell } from '../components/dropdownFilter';\r\nimport * as helper from '../scripts/helper';\r\nimport moment from 'moment';\r\n\r\nexport default class VmReport extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n Listings: [],\r\n FullListings: [],\r\n\r\n Sort: [{ field: \"VMLastAccessDateTimeDisplay\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n };\r\n\r\n class CustomWrapperCell extends GridCell {\r\n\r\n render() {\r\n let fieldName = this.props.field;\r\n return (\r\n {this.props.dataItem[fieldName]}
\r\n No Available Usage Data
\r\n }\r\n }\r\n }\r\n\r\n getVmListings = (filter) => {\r\n let sort = this.state.Sort;\r\n //VMLastAccessDateTimeDisplay Sort: [{ field: \"VMLastAccessDateTime\", dir: \"desc\" }],\r\n if (sort && sort.length > 0)\r\n {\r\n if (sort[0].field === 'VMLastAccessDateTimeDisplay')\r\n sort = [{ field: \"VMLastAccessDateTime\", dir: sort[0].dir }];\r\n return filterBy(orderBy(this.state.Listings, sort), filter);\r\n } else {\r\n return filterBy(this.state.Listings, filter);\r\n }\r\n }\r\n\r\n dropDownOptions = (key) => {\r\n let sort = [{ field: key, dir: \"asc\" }];\r\n let listings = orderBy(this.state.Listings.slice(), sort);\r\n let info = [...listings.map(item => item[key]).filter(helper.onlyUnique)].filter(itm => itm);\r\n return info;\r\n }\r\n\r\n handleFilterChange = async (event) => {\r\n await this.setState({\r\n filter: event.filter\r\n });\r\n }\r\n\r\n sortChange = (event) => {\r\n\r\n let sort = event.sort;\r\n //VMLastAccessDateTimeDisplay Sort: [{ field: \"VMLastAccessDateTime\", dir: \"desc\" }],\r\n if (sort && sort.length > 0)\r\n {\r\n if (sort[0].field === 'VMLastAccessDateTimeDisplay')\r\n sort = [{ field: \"VMLastAccessDateTime\", dir: sort[0].dir }];\r\n\r\n this.setState({\r\n Listings: orderBy(this.state.Listings, sort),\r\n Sort: event.sort\r\n });\r\n } else {\r\n this.setState({Sort: []});\r\n }\r\n }\r\n\r\n exportVmBtn = () => {\r\n if (this.state.Listings.length > 0) {\r\n return (\r\n\r\n \r\n \r\n this.exportVmReport()} >Export VM Usage Report\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n exportVmReport = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Export VM Usage Report';\r\n }, 2000);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport SaveStatus from '../../../components/save_status';\r\nimport * as helper from '../../../scripts/helper';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\nexport default class ManageTrunkGroupUsers extends Component {\r\n initialState = (props = null) => {\r\n return {\r\n //TrunkGroupId: 0,\r\n //TrunkUserId: 0,\r\n //LocationAccountNumber: '',\r\n GroupId: this.props.GroupId,\r\n EnterpriseTrunkName: this.props.EnterpriseTrunkName,\r\n loading: false,\r\n saving: false,\r\n error: false,\r\n statusMessage: '',\r\n showModal: false,\r\n DIDAssigned: [],\r\n DIDUnassigned: [],\r\n DIDPending: [],\r\n SelectedAssigned: [],\r\n SelectedUnassigned: [],\r\n SelectedPending: [],\r\n EnterpriseTrunkOptions: this.props.EnterpriseTrunkOptions,\r\n TrunkGroups: props ? props.TrunkGroups : []\r\n };\r\n }\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = this.initialState();\r\n }\r\n\r\n componentWillReceiveProps = () => {\r\n let { EnterpriseTrunkName, EnterpriseTrunkOptions } = this.state;\r\n if (EnterpriseTrunkName !== this.props.EnterpriseTrunkName) {\r\n this.setState({\r\n EnterpriseTrunkName: this.props.EnterpriseTrunkName,\r\n });\r\n }\r\n if (EnterpriseTrunkOptions !== this.props.EnterpriseTrunkOptions) {\r\n this.setState({\r\n EnterpriseTrunkOptions: this.props.EnterpriseTrunkOptions,\r\n });\r\n }\r\n }\r\n\r\n fetchAvailableTrunkUsers = async () => {\r\n try {\r\n //await this.setState({ loading: true });\r\n let path = `admin/GetEnterpriseEnterpriseTrunkAvailableUserList?EnterpriseTrunkName=${this.state.EnterpriseTrunkName}`;\r\n let DIDs = await apiCalls.fetchData(path).then(data => data);\r\n\r\n //let assignedDIDs = [];\r\n let unAssignedDIDs = [];\r\n DIDs.map((item) => {\r\n let DIDEntry = {\r\n isSelected: false,\r\n Status: 'Unassigned',\r\n ServiceNumber: item.Phone_Number,\r\n UserId: item.UserId\r\n }\r\n unAssignedDIDs.push(DIDEntry);\r\n });\r\n await this.setState({\r\n //DIDAssigned: assignedDIDs,\r\n DIDUnassigned: unAssignedDIDs,\r\n loading: false,\r\n });\r\n } catch (error) {\r\n console.error(error);\r\n this.setState({\r\n loading: false,\r\n //DIDAssigned: [],\r\n DIDUnassigned: [],\r\n });\r\n }\r\n }\r\n\r\n fetchAssignedUsers = async () => {\r\n try {\r\n //await this.setState({ loading: true });\r\n let path = `admin/GetEnterpriseEnterpriseTrunkUserList?EnterpriseTrunkName=${this.state.EnterpriseTrunkName}`;\r\n let DIDs = await apiCalls.fetchData(path).then(data => data);\r\n\r\n let assignedDIDs = [];\r\n //let unAssignedDIDs = [];\r\n DIDs.map((item) => {\r\n let DIDEntry = {\r\n isSelected: false,\r\n Status: 'Assigned',\r\n ServiceNumber: item.Phone_Number,\r\n UserId: item.UserId\r\n }\r\n assignedDIDs.push(DIDEntry);\r\n });\r\n await this.setState({\r\n DIDAssigned: assignedDIDs,\r\n //DIDUnassigned: unAssignedDIDs,\r\n loading: false,\r\n });\r\n } catch (error) {\r\n console.error(error);\r\n this.setState({\r\n loading: false,\r\n DIDAssigned: [],\r\n //DIDUnassigned: [],\r\n });\r\n }\r\n }\r\n\r\n OpenModal = async () => {\r\n this.setState({ showModal: true, loading: true });\r\n this.fetchAvailableTrunkUsers();\r\n this.fetchAssignedUsers();\r\n }\r\n\r\n CloseModal = () => {\r\n let state = this.initialState();\r\n this.setState({\r\n ...state,\r\n }\r\n , async () => {\r\n try {\r\n this.fetchAvailableTrunkUsers();\r\n this.fetchAssignedUsers();\r\n } catch (error) {\r\n // handle error\r\n console.error(error)\r\n }\r\n });\r\n }\r\n\r\n handleSelection = async (queue, UserId) => {\r\n let newSelectionList = [];\r\n let dynamicDID = 'DID' + queue[0].toUpperCase() + queue.substring(1);\r\n let dynamicSelected = 'Selected' + queue[0].toUpperCase() + queue.substring(1);\r\n let DIDQueue = this.state[dynamicDID].slice();\r\n\r\n let currentItem = null;\r\n currentItem = this.state[dynamicDID].filter(resp => resp.UserId === UserId); // THIS CRUCIAL PARAM MAY CHANGE *******\r\n if (currentItem)\r\n currentItem = currentItem[0];\r\n\r\n let currentItemIdx = _.indexOf(DIDQueue, currentItem); //get before toggling selected status\r\n currentItem.isSelected = !currentItem.isSelected;\r\n newSelectionList = this.state[dynamicSelected].filter(resp => resp.UserId !== currentItem.UserId);\r\n if (currentItem.isSelected)\r\n newSelectionList.push(currentItem);\r\n\r\n DIDQueue[currentItemIdx] = currentItem;\r\n await this.setState({ [dynamicSelected]: newSelectionList, [dynamicDID]: DIDQueue });\r\n }\r\n\r\n handleTransition = async (actionName) => {\r\n let { DIDAssigned, DIDPending, DIDUnassigned, SelectedAssigned, SelectedPending, SelectedUnassigned } = this.state;\r\n let newPendingList = DIDPending.slice();\r\n let newAssignedList = DIDAssigned.slice();\r\n let newUnassignedList = DIDUnassigned.slice();\r\n let selectedItems = [];\r\n switch (actionName) {\r\n case 'add':\r\n SelectedUnassigned.map((record, idx) => {\r\n let newRecord = {\r\n UserId: record.UserId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Add',\r\n isSelected: false\r\n };\r\n newPendingList.push(newRecord);\r\n newUnassignedList = newUnassignedList.filter(resp => resp.UserId !== record.UserId);\r\n });\r\n SelectedUnassigned = [];\r\n break;\r\n case 'undoAdd':\r\n SelectedPending.map((record, idx) => {\r\n if (record.Status === 'Add') {\r\n let newRecord = {\r\n UserId: record.UserId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Unassigned',\r\n isSelected: false\r\n }\r\n newUnassignedList.push(newRecord);\r\n newPendingList = newPendingList.filter(resp => resp.UserId !== record.UserId);\r\n } else selectedItems.push(record);\r\n\r\n });\r\n SelectedPending = selectedItems;\r\n break;\r\n case 'remove':\r\n SelectedAssigned.map((record, idx) => {\r\n let newRecord = {\r\n UserId: record.UserId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Remove',\r\n isSelected: false\r\n }\r\n newPendingList.push(newRecord);\r\n newAssignedList = newAssignedList.filter(resp => resp.UserId !== record.UserId);\r\n });\r\n SelectedAssigned = [];\r\n break;\r\n case 'undoRemove':\r\n\r\n SelectedPending.map((record, idx) => {\r\n if (record.Status === 'Remove') {\r\n let newRecord = {\r\n UserId: record.UserId,\r\n ServiceNumber: record.ServiceNumber,\r\n Status: 'Assigned',\r\n isSelected: false\r\n }\r\n newAssignedList.push(newRecord);\r\n newPendingList = newPendingList.filter(resp => resp.UserId !== record.UserId);\r\n } else selectedItems.push(record);\r\n });\r\n SelectedPending = selectedItems;\r\n break;\r\n }\r\n await this.setState({\r\n SelectedAssigned: SelectedAssigned,\r\n SelectedPending: SelectedPending,\r\n SelectedUnassigned: SelectedAssigned,\r\n DIDAssigned: newAssignedList,\r\n DIDPending: newPendingList,\r\n DIDUnassigned: newUnassignedList\r\n });\r\n }\r\n\r\n formatDids = (queue, arr = []) => {\r\n if (arr && arr.length > 0) {\r\n return arr.map((itm, index) => {\r\n let itemClass = itm.isSelected === true ? 'selectedItem' : '';\r\n let label = itm.ServiceNumber;\r\n if (queue === 'pending')\r\n label += ' (' + itm.Status + ')';\r\n return \r\n
\r\n \r\n
\r\n \r\n
\r\n Voicemail Usage Report
\r\n\r\n
\r\n \r\n {this.exportVmBtn()}\r\n
\r\n \r\n {this.gridContent()}\r\n
\r\n \r\n {this.formatDids(queue, arr)}\r\n
\r\n )\r\n }\r\n\r\n SubmitChanges = async () => {\r\n try {\r\n if (this.state.DIDPending.length === 0) return; //end process if nothing selected\r\n let apiPath = 'admin/AddEnterpriseEnterpriseTrunkUserList';\r\n let reqBody = {};\r\n let statusMessage = '';\r\n let bError = false;\r\n let bPartialSuccess = false;\r\n let pending = this.state.DIDPending.slice();\r\n let arrAssigned = pending.filter(resp => resp.Status === 'Add').map((record, idx) => {\r\n return record.UserId;\r\n });\r\n let arrUnassigned = pending.filter(resp => resp.Status === 'Remove').map((record, idx) => {\r\n return record.UserId;\r\n });\r\n if (arrAssigned && arrAssigned.length > 0) {\r\n reqBody = {\r\n EnterpriseTrunkName: this.state.EnterpriseTrunkName,\r\n UserIdList: arrAssigned\r\n }\r\n\r\n await this.setState({ saving: true });\r\n let responseAssigns = await apiCalls.post(apiPath, 'POST', JSON.stringify(reqBody)).then((data) => data).catch(err => console.error(err));\r\n // if (helper.IsJsonString(responseAssigns.message)) {\r\n // let messageObj = JSON.parse(responseAssigns.message);\r\n // if (messageObj.MPOErrorList && messageObj.MPOErrorList.length > 0) {\r\n // statusMessage += this.displayErrors(messageObj.MPOErrorList);\r\n // bError = true;\r\n // }\r\n // } else if (responseAssigns.ok) {\r\n // statusMessage = 'All DIDs marked for assignment have updated successfully';\r\n // bPartialSuccess = true;\r\n // }\r\n if (responseAssigns.ok) {\r\n statusMessage = 'All DIDs marked for assignment have updated successfully';\r\n bPartialSuccess = true;\r\n } else {\r\n statusMessage = 'An error occurred during the process';\r\n bError = true;\r\n }\r\n }\r\n if (arrUnassigned && arrUnassigned.length > 0) {\r\n apiPath = 'admin/DeleteEnterpriseEnterpriseTrunkUserList';\r\n if (!this.state.saving)\r\n await this.setState({ saving: true });\r\n reqBody = {\r\n EnterpriseTrunkName: this.state.EnterpriseTrunkName,\r\n UserIdList: arrUnassigned\r\n }\r\n let responseUnassigns = await apiCalls.post(apiPath, 'DELETE', JSON.stringify(reqBody)).then((assignData) => assignData).catch(err => console.error(err));\r\n\r\n if (responseUnassigns.ok) {\r\n statusMessage = 'All DIDs marked for assignment have updated successfully';\r\n bPartialSuccess = true;\r\n } else {\r\n statusMessage = 'An error occurred during the process';\r\n bError = true;\r\n }\r\n }\r\n if (!bError)\r\n statusMessage = 'All DIDs marked for assignment and unassignment have updated successfully'\r\n else if (bError && !bPartialSuccess)\r\n statusMessage = 'All DIDs marked for assignment and/or unassignment have failed\\n' + statusMessage;\r\n\r\n await this.setState({ saving: false, statusMessage: statusMessage, error: bError });\r\n }\r\n catch (ex) {\r\n this.setState({\r\n saving: false,\r\n error: true,\r\n statusMessage: 'An error occurred: ' + ex.toString(),\r\n });\r\n }\r\n }\r\n\r\n displayErrors = (ErrorList) => {\r\n let errorMsg = '';\r\n ErrorList.map((err, idx) => {\r\n if (err.MPOResultText && err.MPOResultText.length > 0) {\r\n err.MPOResultText.map((rt, idx2) => {\r\n errorMsg = errorMsg === '' ? rt.ErrorMessage : '\\n' + rt.ErrorMessage;\r\n });\r\n } else\r\n errorMsg = errorMsg === '' ? err.APIError : '\\n' + err.APIError;\r\n });\r\n return errorMsg;\r\n }\r\n\r\n ClearSaveStatusModal = async () => {\r\n let selectedTrunk = this.state.TrunkUserId;\r\n let TrunkGroup = this.state.TrunkGroups.filter(resp => resp.UserId === selectedTrunk);\r\n TrunkGroup = TrunkGroup[0];\r\n\r\n //let selectedText = e.target.selectedText;\r\n //let TrunkGroupId =\r\n await this.setState({ error: false, statusMessage: '', loading: true, DIDAssigned: [], DIDPending: [], DIDUnassigned: [], SelectedAssigned: [], SelectedPending: [], SelectedUnassigned: [] });\r\n this.fetchAssignedUsers();\r\n this.fetchAvailableTrunkUsers();\r\n }\r\n\r\n savingOrConfirming = () => this.state.saving || this.state.statusMessage;\r\n\r\n handleSelectChange = async (e) => {\r\n let { value } = e.target;\r\n if (value !== this.state.EnterpriseTrunkName) {\r\n await this.setState({\r\n EnterpriseTrunkName: value,\r\n loading: true,\r\n });\r\n this.fetchAvailableTrunkUsers();\r\n this.fetchAssignedUsers();\r\n }\r\n }\r\n\r\n modalBody = () => {\r\n if (this.state.loading === true) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n render = () => {\r\n return (\r\n \r\n \r\n this.OpenModal()}>Manage Associated DIDs\r\n \r\n \r\n Trunk ID:\r\n \r\n
\r\n \r\n
\r\n \r\n Available DID(s)\r\n
\r\n \r\n {this.didField('unassigned', this.state.DIDUnassigned)}\r\n
\r\n \r\n { this.handleTransition('add'); }}\r\n >{'Assign >'}\r\n {/* SPACING DIV */}\r\n \r\n {/* SPACING DIV */}\r\n { this.handleTransition('undoAdd') }}\r\n >{'< Undo'}\r\n
\r\n \r\n Pending DID(s)\r\n
\r\n \r\n {this.didField('pending', this.state.DIDPending)}\r\n
\r\n \r\n { this.handleTransition('remove') }}\r\n >{'< Unassign'}\r\n {/* SPACING DIV */}\r\n \r\n {/* SPACING DIV */}\r\n { this.handleTransition('undoRemove') }}\r\n >{'Undo >'}\r\n
\r\n \r\n Assigned DID(s)\r\n
\r\n \r\n {this.didField('assigned', this.state.DIDAssigned)}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n No Available Usage Data
\r\n }\r\n }\r\n\r\n dataDropDown = (options, val) => {\r\n return (\r\n\r\n {label}: \r\n {field}\r\n {this.state.TrunkDetails.AllowTrunkNameChange === true ? editField : null}\r\n
\r\n )\r\n }\r\n\r\n routeExhaustionAction = (val, forwardAddress = \"\") => {\r\n return (\r\n \r\n {/* this.handleInputChange(e, 'RerouteExhaustAction')}\r\n > */}\r\n\r\n Route Exhaustion Action\r\n \r\n this.handleInputChange(e, 'RerouteExhaustAction')} />\r\n \r\n
\r\n this.handleInputChange(e, 'RerouteExhaustAction')} />\r\n \r\n
\r\n this.handleInputChange(e, 'RouteExhaustionForwardAddress')}\r\n maxLength=\"30\"\r\n />\r\n\r\n
\r\n {/* */}\r\n \r\n\r\n )\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let TrunkDetails = { ...this.state.TrunkDetails };\r\n TrunkDetails[key] = value;\r\n await this.setState({ TrunkDetails });\r\n }\r\n\r\n saveEnterpriseTrunk = async () => {\r\n let { TrunkDetails } = this.state;\r\n let apiPath = `admin/UpdateEnterpriseTrunkDetails`;\r\n let dto = {\r\n //OldEnterpriseTrunkName: TrunkDetails.OldEnterpriseTrunkName ? TrunkDetails.OldEnterpriseTrunkName : TrunkDetails.EnterpriseTrunkName,\r\n OldEnterpriseTrunkName: this.state.CurrentTrunk,\r\n EnterpriseTrunkName: this.state.EditName ? TrunkDetails.EnterpriseTrunkName : this.state.CurrentTrunk,\r\n MaxNumRerouteAttempts: parseInt(TrunkDetails.MaxNumRerouteAttempts),\r\n MaxNumRerouteWithPriority: parseInt(TrunkDetails.MaxNumRerouteWithPriority),\r\n RerouteExhaustAction: parseInt(TrunkDetails.RerouteExhaustAction),\r\n RouteExhaustionForwardAddress: parseInt(TrunkDetails.RerouteExhaustAction) == 1 && TrunkDetails.RouteExhaustionForwardAddress != '' && TrunkDetails.RouteExhaustionForwardAddress != null\r\n ? TrunkDetails.RouteExhaustionForwardAddress.toString() : null,\r\n EnableCapacityManagement: TrunkDetails.EnableCapacityManagement,\r\n MaxActiveCalls: TrunkDetails.MaxActiveCalls,\r\n CapacityExceededInitialAlarm: TrunkDetails.CapacityExceededInitialAlarm,\r\n CapacityExceededOffsetValue: TrunkDetails.CapacityExceededOffsetValue,\r\n TrunkGroupAssignments: TrunkDetails.TrunkGroupAssignments,\r\n };\r\n //console.log('DTO', dto);\r\n //console.log('JSON DTO', JSON.stringify(dto));\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(dto)).then(res => res).catch(err => console.error(err));\r\n if (response) {\r\n //console.log('res', response);\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n EditName: false,\r\n });\r\n } else {\r\n let assignedTrunks = helper.filterNestedObject('IsAssigned', true, TrunkDetails.TrunkGroupAssignments) || [];\r\n //console.log('hereeee', assignedTrunks);\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n EditName: false,\r\n errorMsg: (helper.filterNestedObject('Priority', 0, assignedTrunks) && helper.filterNestedObject('Priority', 0, assignedTrunks).length > 0) || (helper.filterNestedObject('Weight', 0, assignedTrunks) && helper.filterNestedObject('Weight', 0, assignedTrunks).length > 0) ? \"Please provide a priority & weight (minimum of 1) for the desired trunk group assignment.\" : response.message,\r\n });\r\n }\r\n this.fetchEnterpriseTrunks();\r\n await this.setState({ showConfirmationModal: false });\r\n //console.log('update ent trunk res', response);\r\n //this.componentDidMount();\r\n }\r\n }\r\n\r\n undoEnterpriseTrunk = () => {\r\n this.setState({ EditName: false });\r\n this.fetchTrunkDetails(this.state.CurrentTrunk);\r\n this.fetchAvailableTrunkGroups(this.state.CurrentTrunk);\r\n }\r\n\r\n cardContent = () => {\r\n let { CurrentTrunk, TrunkDetails, loading, TrunkOptions, RoutingType } = this.state;\r\n\r\n if (!loading && CurrentTrunk && TrunkDetails) {\r\n let {\r\n CapacityExceededInitialAlarm,\r\n CapacityExceededOffsetValue,\r\n Enable,\r\n EnterpriseTrunkName,\r\n MaxActiveCalls,\r\n MaxNumRerouteAttempts,\r\n MaxNumRerouteWithPriority,\r\n OldEnterpriseTrunkName,\r\n RerouteExhaustAction,\r\n RouteExhaustionForwardAddress,\r\n TrunkGroupAssignments\r\n } = TrunkDetails;\r\n //console.log(\"routing type\", RoutingType);\r\n return (\r\n \r\n this.handleInputChange(e, 'RerouteExhaustAction')} />\r\n \r\n
\r\n
\r\n
\r\n )\r\n } else {\r\n return \r\n {this.trunkDataRow(\"Enterprise Trunk Name\", this.dataDropDown(TrunkOptions, CurrentTrunk), this.editEnterpriseTrunkField(EnterpriseTrunkName, 'EnterpriseTrunkName'))}\r\n {this.trunkDataRow(\"Routing Type\", this.inputDataField(RoutingType, 'RoutingType'))}\r\n {this.trunkDataRow(\"Max # of Reroute Attempts (max 10)\", this.inputDataField(MaxNumRerouteAttempts, 'MaxNumRerouteAttempts', 'number'))}\r\n {this.state.RoutingType === \"ordered\" ? null : this.trunkDataRow(\"Max # of Reroute Attempts within a Priority (max 10)\", this.inputDataField(MaxNumRerouteWithPriority, 'MaxNumRerouteWithPriority', 'number'))}\r\n {this.routeExhaustionAction(RerouteExhaustAction, RouteExhaustionForwardAddress)}\r\n
\r\n \r\n * Trunk Group Weight must be an Integer between 1 and 65536
\r\n * Trunk Group Priority must be an Integer between 1 and 10\r\n {this.gridContent()}\r\n
\r\n \r\n * Trunk Group Priority must be an Integer between 1 and 10\r\n {this.gridContent()}\r\n
\r\n
\r\n )\r\n }\r\n};","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from '../../requests/config';\r\nimport * as settings from '../../scripts/settings';\r\nimport { Modal } from 'react-bootstrap';\r\n\r\nexport default class ManageEntTrunkGroup extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n TrunkGroupDetails: null,\r\n OriginalDetails: null,\r\n showConfirmationModal: false,\r\n DoaminList: [],\r\n DepartmentList: [],\r\n errorMsg: \"\",\r\n Submission: false,\r\n submitError: false,\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchTrunkGroup();\r\n };\r\n\r\n fetchDepartments = async (acctNum) => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetGroupDepartmentList?locationAccountNumber=${acctNum}&IncludeEnterpriseDepartments=true`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data));\r\n copy = copy.map(itm => itm.Name);\r\n this.setState({\r\n DepartmentList: copy,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n DepartmentList: data,\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchDomains = async (acctNum) => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetGroupDomainAssignedList?locationAccountNumber=${acctNum}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data));\r\n copy = copy.map(itm => itm.Domain);\r\n this.setState({\r\n DoaminList: copy,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n DoaminList: data,\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchTrunkGroup = async () => {\r\n await this.setState({ loading: true });\r\n let { groupId, trunkGroupName } = this.props.match.params;\r\n let path = `admin/GetEnterpriseTrunkGroupInstance?groupId=${groupId}&trunkGroupName=${trunkGroupName}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data));\r\n this.setState({\r\n TrunkGroupDetails: data,\r\n OriginalDetails: copy,\r\n loading: false,\r\n });\r\n this.fetchDomains(data.GroupId);\r\n this.fetchDepartments(data.GroupId);\r\n } else {\r\n this.setState({\r\n TrunkGroupDetails: {},\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n radioDataField = (val, key, type = \"radio\", readOnly = false) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Are you sure you want to save changes? \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n \r\n {this.enterpriseTrunkUpdateBtns()}\r\n
\r\n Enterprise Trunking {this.submissionMsg()}
\r\n\r\n
\r\n \r\n {this.rowItems()}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.handleInputChange(e, key, type)}\r\n disabled={readOnly === true ? true : false}\r\n />\r\n
\r\n this.handleInputChange(e, key, type)}\r\n disabled={readOnly === true ? true : false}\r\n />\r\n
\r\n
\r\n )\r\n }\r\n\r\n dataDropDown = (val, key, options = [], readOnly = false) => {\r\n return (\r\n \r\n
\r\n
{additionalFeld}
\r\n {this.trunkGroupDataRow('* Name', this.inputDataField(TrunkGroupName, 'TrunkGroupName', 'text', true))}\r\n {this.trunkGroupDataRow('Department', this.dataDropDown(Department, 'Department', DepartmentList))}\r\n {this.trunkGroupDataRow('* Maximum Active Calls Allowed', this.inputDataField(MaximumActiveCallsAllowed, 'MaximumActiveCallsAllowed', 'number', true))}\r\n {this.trunkGroupDataRow('Maximum Incoming Calls Allowed', this.inputDataField(MaximumActiveIncomingCallsAllowed, 'MaximumActiveIncomingCallsAllowed', 'number', true))}\r\n {this.trunkGroupDataRow('Maximum Outgoing Calls Allowed', this.inputDataField(MaximumActiveOutgoingCallsAllowed, 'MaximumActiveOutgoingCallsAllowed', 'number', true))}\r\n\r\n {this.trunkGroupDataRow('Enable Authentication', this.inputDataField(EnableAuthentication, 'EnableAuthentication', 'checkbox'))}\r\n {this.trunkGroupDataRow('Authentication User Name', this.inputDataField(AuthenticationUserName, 'AuthenticationUserName'))}\r\n {this.trunkGroupDataRow('Type New Authentication Password', this.inputDataField(NewSipAuthenticationPassword, 'NewAuthenticationPassword'))}\r\n {/* {this.trunkGroupDataRow('Re-type New Authentication Password', this.inputDataField(''))} */}\r\n {this.trunkGroupDataRow('Trunk Group Identity', this.inputDataField(TrunkGroupIdentity, 'TrunkGroupIdentity', 'text', true))}\r\n {this.trunkGroupDataRow('OTG/DTG Identity', this.inputDataField(OTGDTGIdentity, 'OTGDTGIdentity'))}\r\n {this.trunkGroupDataRow('Enable Trunk Group Prefix', this.inputDataField(EnableTrunkGroupPrefix, 'EnableTrunkGroupPrefix', 'checkbox'), this.additionalInputFeld(EnableTrunkGroupPrefix, TrunkGroupPrefix, 'TrunkGroupPrefix'))}\r\n\r\n {this.trunkGroupDataRow('Allow calls directly to trunk group with trunk identity', this.inputDataField(AllowCallsDirectlyToTrunkGroupWithTrunkIdentity, 'AllowCallsDirectlyToTrunkGroupWithTrunkIdentity', 'checkbox'))}\r\n {this.trunkGroupDataRow('Allow calls directly to trunk group with DTG identity', this.inputDataField(AllowCallsDirectlyToTrunkGroupWithDTGIdentity, 'AllowCallsDirectlyToTrunkGroupWithDTGIdentity', 'checkbox'))}\r\n {this.trunkGroupDataRow('Include trunk identity for call to trunk group', this.inputDataField(IncludeTrunkIdentityForCallsToTrunkGroup, 'IncludeTrunkIdentityForCallsToTrunkGroup', 'checkbox'))}\r\n {this.trunkGroupDataRow('Include DTG identity for call to trunk group', this.inputDataField(IncludeDTGIdentityForCallsToTrunkGroup, 'IncludeDTGIdentityForCallsToTrunkGroup', 'checkbox'))}\r\n {this.trunkGroupDataRow('Enable network address identity', this.inputDataField(EnableNetworkAddressIdentity, 'EnableNetworkAddressIdentity', 'checkbox'))}\r\n {this.trunkGroupDataRow('Allow unscreened calls', this.inputDataField(AllowUnscreenedCalls, 'AllowUnscreenedCalls', 'checkbox'))}\r\n {this.trunkGroupDataRow('Allow unscreened emergency calls', this.inputDataField(AllowUnscreenedEmergencyCalls, 'AllowUnscreenedEmergencyCalls', 'checkbox'))}\r\n {this.trunkGroupDataRow('Route to peering domain', this.inputDataField(RouteToPeeringDomain, 'RouteToPeeringDomain', 'checkbox', true))}\r\n {this.trunkGroupDataRow('Peering Domain', this.dataDropDown(PeeringDomain, \"PeeringDomain\", DoaminList, true))}\r\n {/* Radio */}\r\n {/* {this.trunkGroupDataRow('Pilot User Call Optimization Policy', () => {\r\n return (\r\n
\r\n )\r\n } else {\r\n return \r\n
\r\n )\r\n })} */}\r\n {this.trunkGroupDataRow('Trunk Group User Lookup Policy', this.radioDataField(UseSystemUserLookupPolicy, 'UseSystemUserLookupPolicy'), this.additionalDropField(UseSystemUserLookupPolicy, TrunkGroupUserLookupPolicy, 'TrunkGroupUserLookupPolicy', TrunkGroupUserLookupPolicyOptions))}\r\n {this.trunkGroupDataRow('Calling Line Identity Source For Screened Trunk Group Calls Policy', this.radioDataField(UseSystemCLIDSourceForScreenedCallsPolicy, 'UseSystemCLIDSourceForScreenedCallsPolicy'), this.additionalDropField(UseSystemCLIDSourceForScreenedCallsPolicy, CallingLineIdentitySourceForScreenedTrunkGroupCallsPolicy, 'CallingLineIdentitySourceForScreenedTrunkGroupCallsPolicy', TrunkGroupCLIDSourceForScreenedCallsPolicyOptions))}\r\n {this.trunkGroupDataRow('Support Connected Identity Policy', this.radioDataField(UseSystemSupportConnectedIdentityPolicy, 'UseSystemSupportConnectedIdentityPolicy'), this.additionalDropField(UseSystemSupportConnectedIdentityPolicy, SupportConnectedIdentityPolicy, 'SupportConnectedIdentityPolicy', TrunkGroupSupportConnectedIdentityPolicyOptions))}\r\n\r\n {this.trunkGroupDataRow('Pilot User Calling Line Identity for External Calls Usage Policy', this.dataDropDown(PilotUserCallingLineIdentityForExternalCallsUsagePolicy, \"PilotUserCallingLineIdentityForExternalCallsUsagePolicy\", TrunkGroupPilotUserCallingLineIdentityUsagePolicyOptions))}\r\n {this.trunkGroupDataRow('Pilot User Calling Line Identity Usage for Emergency Calls Policy', this.dataDropDown(PilotUserCallingLineIdentityUsageForEmergencyCallsPolicy, \"PilotUserCallingLineIdentityUsageForEmergencyCallsPolicy\", TrunkGroupPilotUserCallingLineIdentityUsagePolicyOptions))}\r\n {this.trunkGroupDataRow('Pilot User Charge Number Usage Policy', this.dataDropDown(PilotUserChargeNumberUsagePolicy, \"PilotUserChargeNumberUsagePolicy\", TrunkGroupPilotUserCallingLineIdentityUsagePolicyOptions))}\r\n {/* \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n {this.gridContent()}\r\n
*/}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nvar TrunkGroupPilotUserCallOptimizationPolicyOptions = [\r\n \"Optimize For User Services\",\r\n \"Optimize For High Call Volume\",\r\n];\r\nvar TrunkGroupUserLookupPolicyOptions = [\r\n \"Basic\",\r\n \"Extended\",\r\n];\r\nvar TrunkGroupCLIDSourceForScreenedCallsPolicyOptions = [\r\n \"Profile Name Profile Number\",\r\n \"Received Name Profile Number\",\r\n \"Received Name Received Number\",\r\n];\r\nvar TrunkGroupSupportConnectedIdentityPolicyOptions = [\r\n \"Enabled\",\r\n \"Disabled\",\r\n];\r\nvar TrunkGroupPilotUserCallingLineIdentityUsagePolicyOptions = [\r\n \"All Originating Calls\",\r\n \"Unscreened Originating Calls\",\r\n \"No Calls\"\r\n];\r\nvar TrunkGroupPilotUserChargeNumberUsagePolicyOptions = [\r\n \"All Originating Calls\",\r\n \"Unscreened Originating Calls\",\r\n \"No Calls\"\r\n];","import React, { Component } from 'react';\r\nimport * as settings from '../../../scripts/settings';\r\nimport * as helper from '../../../scripts/helper';\r\nimport moment from 'moment';\r\nimport * as icons from '../../../scripts/icons';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { ComboBox } from '@progress/kendo-react-dropdowns';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\n\r\nexport default class UserSearch extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n searchTerm: null,\r\n Services: [],\r\n showResults: false,\r\n }\r\n }\r\n fetchServices = (apiPath = null) => {\r\n if (!apiPath) apiPath = this.apiPathWithParams();\r\n this.setState({ loading: true });\r\n apiCalls.fetchData(apiPath).then(async (data) => {\r\n if (data !== null) {\r\n let filteredArr = data.filter(itm => !JSON.parse(sessionStorage.UserIdArr).includes(itm.UserId));\r\n //console.log(\"REEE\", filteredArr);\r\n this.setState({\r\n loading: false,\r\n Services: filteredArr,\r\n resultsMsg: null,\r\n //showResults: true,\r\n });\r\n } else if (data === null) {\r\n this.setState({ Services: [], loading: false, resultsMsg: settings.noResultsMsg });\r\n };\r\n });\r\n }\r\n\r\n paramsSeparator = (apiPath) => apiPath.indexOf('?') >= 0 ? '&' : '?';\r\n\r\n apiPathWithParams = () => {\r\n let { locationAccFilter, searchTerm } = this.state;\r\n //let path = 'admin/Services';\r\n let path = 'admin/UserServices';\r\n //if (locationAccFilter) path += '?LocationAccountNumber=' + locationAccFilter;\r\n //if (viewFilter) path += this.paramsSeparator(path) + 'view=' + viewFilter;\r\n if (searchTerm) path += this.paramsSeparator(path) + 'term=' + searchTerm;\r\n return path;\r\n }\r\n\r\n searchServices = (event) => {\r\n let searchText = event.target.value.trim();\r\n if (searchText !== '') {\r\n this.setState({ searchTerm: searchText, showResults: true, })\r\n } else {\r\n this.setState({ searchTerm: null, showResults: false })\r\n }\r\n this.delayedSearch();\r\n }\r\n\r\n delayedSearch = () => {\r\n if (this.timeout) clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => this.fetchServices(), settings.searchDelay);\r\n }\r\n\r\n noSearchResults = () => {\r\n let { showResults, Services } = this.state;\r\n if (\r\n showResults &&\r\n Services &&\r\n Services.length === 0\r\n ) {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Are you sure you want to save changes? \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n \r\n {this.state.TrunkGroupDetails ? this.trunkGroupUpdateBtns() : null}\r\n Manage Trunk Group {this.submissionMsg()}\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 null;\r\n }\r\n }\r\n\r\n serviceResults = () => {\r\n let { showResults, Services } = this.state;\r\n if (\r\n showResults &&\r\n Services &&\r\n Services.length > 0\r\n ) {\r\n return (\r\n {settings.noResultsMsg}
\r\n \r\n
\r\n )\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n handleUserChange = (userId) => {\r\n this.props.onSelectUser(userId);\r\n }\r\n\r\n serviceItem = (item, index) => {\r\n return (\r\n MSP Users
\r\n {Services.map((item, index) => this.serviceItem(item, index))}\r\n \r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let divStyle = { margin: '1%', };\r\n let labelStyle = { display: 'inline-block', width: '30%', };\r\n let inputStyle = { width: '70%', display: 'inline-block', height: '34px', fontSize: '12px' };\r\n return (\r\n {\r\n //console.log(\"use this user\", item.UserId);\r\n this.setState({ searchTerm: item.Username, showResults: false, });\r\n this.handleUserChange(item.UserId);\r\n }}\r\n >\r\n {item.FirstName} {item.LastName} {item.Username}\r\n
\r\n \r\n {this.serviceResults()}\r\n {this.noSearchResults()}\r\n
\r\n \r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport SaveStatus from '../../../components/save_status';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport UserSearch from './user_search';\r\nimport * as macdHelper from '../../macd/components/macd_helper';\r\nexport default class ManageADUser extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isAssigned: false,\r\n loading: false,\r\n Submission: false,\r\n submitError: false,\r\n showConfirmationModal: false,\r\n UserId: this.props.location.state.UserId,\r\n AzureObjId: this.props.location.state.AzureObjId,\r\n UserDetails: {\r\n EnterpriseId: sessionStorage.enterpriseId,\r\n LocationId: null,\r\n UserId: null,\r\n AzureObjectId: this.props.location.state.AzureObjId,\r\n UserPrincipalName: null,\r\n DisplayName: null,\r\n AccountEnabled: false, // verify\r\n Country: null,\r\n City: null,\r\n State: null,\r\n PostalCode: null,\r\n StreetAddress: null,\r\n CompanyName: null,\r\n Department: null,\r\n FacsimileTelephoneNumber: null,\r\n GivenName: null,\r\n Surname: null,\r\n Mail: null,\r\n MailNickName: null,\r\n Mobile: null,\r\n OtherMails: null,\r\n TelephoneNumber: null,\r\n IsDeleted: false\r\n },\r\n LocationList: sessionStorage.locationList ? JSON.parse(sessionStorage.locationList) : [],\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.fecthAdUser(this.state.UserId);\r\n }\r\n\r\n componentWillReceiveProps = () => {\r\n let { UserId } = this.state;\r\n if (UserId !== this.props.location.state.UserId) {\r\n this.setState({ UserId: this.props.location.state.UserId });\r\n }\r\n }\r\n\r\n fecthAdUser = async (userId) => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetAzureADUser?MSPUserId=${userId}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n UserDetails: data,\r\n isAssigned: true,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n inputDataField = (val, key, inputStyle, onChangeFunc, type = 'text', readOnly) => {\r\n return (\r\n \r\n {label}: \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n dataDropDown = (locations, key, val, inputStyle) => {\r\n return (\r\n \r\n {this.dataRow(\"Location\", this.dataDropDown(LocationList, \"LocationId\", LocationId, inputStyle), divStyle, labelStyle)}\r\n {/* {this.dataRow(\"Select Location\", this.inputDataField(\"TEST IGNORE\", 'LocationId', inputStyle, this.handleInputChange), divStyle, labelStyle)} */}\r\n {
\r\n )\r\n }\r\n }\r\n\r\n handleUserChange = async (id) => {\r\n let UserDetails = { ...this.state.UserDetails };\r\n UserDetails[\"UserId\"] = id;\r\n await this.setState({ UserDetails });\r\n //console.log(\"UserDetails\", UserDetails);\r\n }\r\n\r\n inputCheck = (val) => {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from '../../requests/config';\r\nimport * as settings from '../../scripts/settings';\r\nimport * as utility from '../../utility/utility';\r\n\r\nexport default class AdConfig extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n EnterpriseId: sessionStorage.enterpriseId,\r\n Submission: false,\r\n submitError: false,\r\n hasConnector: false,\r\n FeatureEnabled: sessionStorage.hasActiveDirectory == \"true\" ? true : false, // find way to discern value (tbl.Enterprise)... hardcoded for now 9/24/20\r\n CurrentAdSystem: this.props.AdSystem, // find way to discern value (tbl.Enterprise)... hardcoded for now 9/24/20\r\n ConnectorInfo: this.props.ConnectorInfo,\r\n showConfirmationModal: false,\r\n //\r\n hasConnector: true,\r\n //Loading: this.props.Loading,\r\n };\r\n }\r\n\r\n componentWillReceiveProps() {\r\n if (this.props.ConnectorInfo !== this.state.ConnectorInfo) {\r\n this.setState({ ConnectorInfo: this.props.ConnectorInfo });\r\n }\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let ConnectorInfo = { ...this.state.ConnectorInfo };\r\n ConnectorInfo[key] = value;\r\n await this.setState({ ConnectorInfo });\r\n //console.log(\"ConnectorInfo\", ConnectorInfo); // inserted AD Information\r\n }\r\n\r\n userCreds = () => {\r\n let { ConnectorInfo, CurrentAdSystem, hasConnector } = this.state;\r\n if (ConnectorInfo && ConnectorInfo != null) {\r\n let {\r\n APIToken,\r\n CustomerIdPID,\r\n EnterpriseId,\r\n IdPAuthServer,\r\n IdPDomain,\r\n IdPName,\r\n IdPProtocol,\r\n IdPType,\r\n IdPUserName,\r\n IdPUserPwd,\r\n } = ConnectorInfo;\r\n\r\n if (ConnectorInfo.IdPType === \"Okta\") {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n this.setState({ showConfirmationModal: true })}\r\n className=\"a btn\"\r\n >{this.state.isAssigned ? \"Update User\" : \"Assign User\"}\r\n Add Service\r\n */}\r\n
\r\n Update External User {this.submissionMsg()}
\r\n {/*\r\n
\r\n
\r\n\r\n \r\n Are you sure you want to save changes? \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\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.dataRow(\"Domain\", this.inputDataField(IdPDomain, \"IdPDomain\", this.handleInputChange))}\r\n {this.dataRow(\"Token\", this.inputDataField(APIToken, \"APIToken\", this.handleInputChange))}\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n {this.dataRow(\"User Principal Name\", this.inputDataField(IdPUserName, \"IdPUserName\", this.handleInputChange))}\r\n {this.dataRow(\"Password\", this.inputDataField(IdPUserPwd, \"IdPUserPwd\", this.handleInputChange, false, \"password\"))}\r\n
\r\n );\r\n }\r\n }\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n {label}: \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n let { Loading, ConnectorInfo, FeatureEnabled, CurrentAdSystem } = this.state;\r\n\r\n if (ConnectorInfo && ConnectorInfo != null) {\r\n let {\r\n APIToken,\r\n CustomerIdPID,\r\n EnterpriseId,\r\n IdPAuthServer,\r\n IdPDomain,\r\n IdPName,\r\n IdPProtocol,\r\n IdPType,\r\n IdPUserName,\r\n IdPUserPwd,\r\n } = ConnectorInfo;\r\n //FeatureEnabled = \r\n return (\r\n \r\n * Please provide relevant information to enable / disable active directory\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n {this.dataRow(\"Identity Provider\", this.inputDataField(IdPType, \"IdPType\", this.handleInputChange, true))}\r\n {this.userCreds()}\r\n {/* {this.dataRow(\"Enable Acitve Directory Feature\", this.enableFeatureInput(FeatureEnabled))} */}\r\n {/* {this.dataRow(\"Authentication Method\", this.selectAuthenticationSystem(CurrentAdSystem))} */}\r\n {this.dataRow(\"Authentication Method\", this.inputDataField(IdPProtocol, \"IdPProtocol\", this.handleInputChange, true))}\r\n \r\n
\r\n {this.submissionMsg()}\r\n No Available Data
\r\n )\r\n }\r\n }\r\n\r\n enableFeatureInput = (val) => {\r\n // params? (val, key, type = 'text')\r\n return (\r\n\r\n \r\n \r\n Are you sure you want to save changes? \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from '../../requests/config';\r\nimport * as settings from '../../scripts/settings';\r\nimport * as helper from '../../scripts/helper';\r\n\r\nexport default class SyncMenu extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n EnterpriseId: sessionStorage.enterpriseId,\r\n //EnterpriseId: props.match.params.enterpriseId,\r\n loading: false,\r\n Submission: false,\r\n submitError: false,\r\n //tab: \"azure\",\r\n UsersList: [],\r\n FullListings: [],\r\n ConnectorInfo: {},\r\n OriginalConnectorInfo: {},\r\n showConfirmationModal: false,\r\n Sort: [{ field: \"UserId\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n };\r\n\r\n class ManageUserCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n let { UserId, AzureObjectId } = this.props.dataItem;\r\n\r\n //if (UserId) {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n No Available Data
\r\n }\r\n } else {\r\n return\r\n {\r\n event.target.value = null;\r\n }}\r\n />\r\n this.openAttachments()}>Import Users\r\n
)\r\n\r\n }\r\n exportUsers = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Export Users';\r\n }, 2000);\r\n }\r\n\r\n exportBtn = () => {\r\n if (this.state.UsersList.length > 0) {\r\n return (\r\n \r\n \r\n \r\n this.exportUsers()}>Export Users\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n cardContent = () => {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullListings;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'GivenName', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Surname', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'UserPrincipalName', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.delayedSearch(services);\r\n }\r\n else {\r\n this.delayedSearch(fullDetails);\r\n }\r\n }\r\n\r\n delayedSearch = async (services) => {\r\n await this.setState({ loading: true });\r\n if (this.timeout) clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => {\r\n this.setState({ UsersList: services, loading: false });\r\n }, settings.searchDelay);\r\n }\r\n\r\n render() {\r\n return this.cardContent();\r\n };\r\n}","import React, { useEffect, useState } from \"react\";\r\nimport { Modal } from 'react-bootstrap';\r\nimport { DropDownList } from '@progress/kendo-react-dropdowns';\r\nimport { Input } from \"@progress/kendo-react-inputs\";\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\n\r\n\r\n\r\nconst EditForm = props => {\r\n const { data: defaultData, customerIdpAppList, onSubmit, isEditMode } = props;\r\n\r\n const [editItem, setEditItem] = useState({});\r\n\r\n useEffect(() => {\r\n setEditItem(defaultData);\r\n }, [props.data]);\r\n\r\n\r\n const handleInputChange = e => {\r\n setEditItem({\r\n ...editItem,\r\n [e.target.name]: e.target.value\r\n })\r\n };\r\n\r\n const handleDropdownChange = e => {\r\n setEditItem({\r\n ...editItem,\r\n \"IdPAppName\": e.target.value?.IdPAppName\r\n })\r\n };\r\n\r\n const handleSubmit = () => {\r\n onSubmit(editItem);\r\n }\r\n\r\n const submissionMsg = () => {\r\n if (props.Submission) {\r\n if (props.SubmitError) {\r\n return {props.ErrorMessage && props.ErrorMessage != \"\" ? props.ErrorMessage : \"Submission Failure: Changes were not processed!\"}\r\n } else {\r\n return Submission Sucess: Changes were processed!\r\n }\r\n }\r\n };\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.gridContent()}\r\n \r\n {this.uploadBtn()}\r\n {this.exportBtn()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n {submissionMsg()}\r\n
\r\n No Available Data
\r\n }\r\n }\r\n\r\n handleSortChange = (e) => {\r\n this.setState({\r\n customerIdpApps: orderBy(this.state.customerIdpApps, e.sort),\r\n Sort: e.sort\r\n });\r\n }\r\n\r\n handleFilterChange = (event) => {\r\n this.setState({\r\n filter: event.filter\r\n });\r\n }\r\n\r\n handleOpenModal = (props) => {\r\n this.setState({\r\n openDialog: true,\r\n isEditMode: true,\r\n editItem: props.dataItem,\r\n });\r\n }\r\n\r\n handleCloseModal = async () => {\r\n if (this.state.Submission) {\r\n await this.props.RefreshData(this.state.CustomerIdPID);\r\n }\r\n this.setState({\r\n openDialog: false,\r\n isEditMode: false,\r\n Submission: false,\r\n SubmitError: false,\r\n ErrorMessage: \"\",\r\n });\r\n }\r\n\r\n updateCustomerIdpData = async (data) => {\r\n let path = 'admin/SaveCustomerIdpApp';\r\n let response = await apiCalls.post(path, 'POST', JSON.stringify(data)).then(data => data).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n SubmitError: false,\r\n ErrorMessage: \"\",\r\n });\r\n } else {\r\n this.setState({\r\n Submission: true,\r\n SubmitError: true,\r\n ErrorMessage: response.message,\r\n });\r\n }\r\n }\r\n\r\n handleSubmit = async (data) => {\r\n let idx = this.state.AppList.findIndex((itm) => itm.IdPAppName === data.IdPAppName);\r\n await this.setState({\r\n AppList: this.state.AppList.splice(idx, 1, data),\r\n });\r\n console.log(\"APP LIST after splice\", this.state.AppList);\r\n await this.updateCustomerIdpData(data);\r\n }\r\n\r\n render() {\r\n let { loading } = this.state;\r\n if (loading) {\r\n return\r\n {/*
\r\n )\r\n }\r\n}\r\nexport default AppList;\r\n\r\n","import React, { Component, Fragment } from 'react';\r\nimport AdConfig from './ad_config';\r\nimport SyncMenu from './active_directory_menu';\r\nimport AppList from './ad_app_list';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\n\r\nexport default class AdMain extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n loading: false,\r\n tab: \"config\",\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchIdPConnector();\r\n }\r\n\r\n fetchIdPConnector = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetCustomerIdp`;\r\n await apiCalls.fetchData(path).then(async (data) => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data[0]));\r\n await this.setState({\r\n ConnectorInfo: data[0],\r\n ConnectorInfoCopy: copy,\r\n CustomerIdPID: copy.CustomerIdPID,\r\n //hasConnector: true,\r\n //loading: false,\r\n });\r\n await this.fetchCustomerIdpApps(copy.CustomerIdPID);\r\n } else {\r\n this.setState({\r\n ConnectorInfo: null,\r\n //loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n\r\n fetchCustomerIdpApps = async (id) => {\r\n let path = `admin/GetCustomerIdpApps?CustomerIdPID=${id}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n AppList: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n AppList: [],\r\n loading: false\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n\r\n tabDisplay = () => {\r\n return (\r\n \r\n {this.state.hasEmptyData.length > 0 && }\r\n
*/}\r\n {this.gridContent()}\r\n \r\n \r\n Configuration\r\n \r\n \r\n App List\r\n \r\n \r\n Data\r\n \r\n
\r\n );\r\n };\r\n\r\n changeTab = event => {\r\n if (event.target.dataset.act !== this.state.tab) {\r\n this.setState({ tab: event.target.dataset.act });\r\n }\r\n };\r\n\r\n getTab() {\r\n let { tab } = this.state;\r\n switch (tab) {\r\n case \"config\":\r\n return \r\n
\r\n \r\n {this.getTab()}\r\n
\r\n \r\n
\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nexport default class MsTeamsConfig extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n Trunk: this.props.Trunk,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n MSTeamsConfigCopy: this.props.MSTeamsConfig,\r\n loading: this.props.loading,\r\n Submission: false,\r\n submitError: false,\r\n completed: false,\r\n msgDetails: \"\",\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n testingCredentials: false,\r\n verify: true,\r\n verified: \"\",\r\n routingType: this.props.routingType,\r\n };\r\n }\r\n\r\n componentWillReceiveProps() {\r\n if (this.props.MsTeamsConfig !== this.state.MsTeamsConfig) {\r\n this.setState({ MSTeamsConfig: this.props.MsTeamsConfig });\r\n }\r\n }\r\n\r\n msTrunkData = () => {\r\n let { MSTeamsConfig, Trunk, Enterprise, PrimaryGateWay, SecondaryGateWay } = this.state;\r\n if (MSTeamsConfig.IsPasswordSaved == 1) {\r\n MSTeamsConfig[\"Password\"] = \"**********\";\r\n MSTeamsConfig[\"PasswordLengthExceeded\"] = false;\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.cardContent()}\r\n Single Sign On
\r\n\r\n {this.dataRow(\"Trunk:\", this.inputDataField(Trunk.TrunkName, \"TrunkName\", null, true))}\r\n {this.dataRow(\"User Name:\", this.inputDataField(MSTeamsConfig.UserName, \"UserName\", this.handleInputChange))}\r\n {this.dataRow(\"Password:\", this.inputDataField(MSTeamsConfig.Password, \"Password\", this.handleInputChange, false, \"password\"))}\r\n {/* { this.dataRow(\"Primary FQDN:\", this.inputDataField(PrimaryGateWay, \"PstnPrimaryGateway\", this.handleInputChange, true))}\r\n { this.dataRow(\"Secondary FQDN:\", this.inputDataField(SecondaryGateWay, \"PstnSecondaryGateway\", this.handleInputChange, true))} */}\r\n
\r\n )\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n if (key == \"Password\") {\r\n var len = value.length;\r\n if(len>=30){\r\n console.log(\"provide password less then 30\")\r\n MSTeamsConfig[\"PasswordLengthExceeded\"] = true;\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n msgDetails: \"**Please enter password less then 30 characters\",\r\n testingCredentials: true,\r\n verify: false,\r\n verified: true\r\n });\r\n \r\n }\r\n else{\r\n MSTeamsConfig[\"PasswordLengthExceeded\"] = false;\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n msgDetails: \"\",\r\n testingCredentials: false,\r\n verify: false,\r\n verified: true\r\n });\r\n }\r\n // set bool to 0 when only password/username form fields are updated; these fields are used as params in web service method that checks credential integrity\r\n MSTeamsConfig[\"IsPasswordSaved\"] = 0\r\n MSTeamsConfig[\"Password\"] = value\r\n }\r\n if (key == \"UserName\") {\r\n MSTeamsConfig[\"IsPasswordSaved\"] = 0\r\n MSTeamsConfig[\"UserName\"] = value\r\n }\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n verifyCredentials = async () => {\r\n let { testingCredentials, Enterprise, MSTeamsConfig } = this.state;\r\n await this.setState({ testingCredentials: true, Submission: false });\r\n let path = `admin/TestCredentialsRoutingForUser`;\r\n let dto = {\r\n UserName: sessionStorage.username,\r\n EnterpriseId: Enterprise,\r\n Usrn: MSTeamsConfig.UserName,//\"gopi@themountgreenteams.com\",\r\n Password: MSTeamsConfig.Password,//\"TheMountGreenTeams*1\",\r\n EnterpriseTrunkId: this.props.EnterpriseTrunkId,\r\n };\r\n // console.log(\"DTO\", dto);\r\n // console.log(\"checking config object\", MSTeamsConfig);\r\n\r\n let resp = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n if (resp.ok) {\r\n if (!resp.message.includes(\"Error\")) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n msgDetails: \"Credentials Sucessfully Verified!\",\r\n testingCredentials: false,\r\n verify: true\r\n });\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n msgDetails: \"Error in credential verification!\",\r\n testingCredentials: false,\r\n verify: false,\r\n verified: true\r\n });\r\n }\r\n }\r\n }\r\n\r\n checkDisabledBtn = () => {\r\n let { MSTeamsConfig, MSTeamsConfigCopy } = this.state;\r\n if(MSTeamsConfig.PasswordLengthExceeded)\r\n {\r\n return true\r\n }\r\n else{\r\n if (\r\n MSTeamsConfig.UserName == MSTeamsConfigCopy.UserName &&\r\n MSTeamsConfig.Password == MSTeamsConfigCopy.Password &&\r\n MSTeamsConfig.PstnPrimaryGateway == MSTeamsConfigCopy.PstnPrimaryGateway &&\r\n MSTeamsConfig.PstnSecondaryGateway == MSTeamsConfigCopy.PstnSecondaryGateway &&\r\n MSTeamsConfig.MsTeamsMaxConcurrentSessions == MSTeamsConfigCopy.MsTeamsMaxConcurrentSessions \r\n ) {\r\n return true\r\n } else {\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n cardContent = () => {\r\n let { loading, MSTeamsConfig } = this.state;\r\n\r\n if (!loading) {\r\n if (MSTeamsConfig) {\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {this.msTrunkData()}\r\n
\r\n \r\n \r\n Verify Credentials\r\n Continue\r\n
\r\n {/* {this.wizardMsg()} */}\r\n {this.submissionMsg()}\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n The Deployment Wizard helps the Admin initiate the connection to the Microsoft 365 Tenant.\r\n
Provide the User Name and Password credentials for the Microsoft 365 Tenant and click Save.\r\n
Note: These credentials must have Admin access and PowerShell® command execution privileges to set up {this.state.routingType}.\r\n
After the User Name and Password are Saved, click on the Verify Credentials button to test the credentials, and ensure that the Deployment Wizard is able to connect to the Microsoft 365 Tenant.\r\n
Once the connection is verified, the user list is retrieved from the Microsoft 365 tenant within 15 minutes.\r\n
When completed and the connection is verified, click Continue to move on to the next step.\r\n
No Available Data
\r\n )\r\n }\r\n } else {\r\n return{this.state.msgDetails}
{this.state.verifyMsgDetails}
\r\n }\r\n else if (this.state.submitError) {\r\n return {this.state.msgDetails}\r\n }\r\n else {\r\n return {this.state.msgDetails}\r\n }\r\n }\r\n if (this.state.testingCredentials) {\r\n return {this.state.verifyMsgDetails}
\r\n \r\n \r\n Are you sure you want to save changes? \r\n \r\n \r\n
\r\n {!this.state.configSaving ? \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { Grid, GridColumn as Column, GridCell } from '@progress/kendo-react-grid';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { headerToolTip } from '../../components/ellipsisHeaderTooltip';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport * as config from '../../requests/config';\r\nimport * as settings from '../../scripts/settings';\r\nimport * as helper from '../../scripts/helper';\r\n\r\nexport default class MsTeamsUserMenu extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n Trunk: this.props.Trunk,\r\n loading: false,\r\n Submission: false,\r\n submitError: false,\r\n UsersList: this.props.TeamsUsers,\r\n FullListings: this.props.TeamsUsers,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n showConfirmationModal: false,\r\n Sort: [{ field: \"UserId\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n routingType: this.props.routingType,\r\n gridHeight: (window.innerHeight - 180)\r\n };\r\n\r\n const giveStateData = this.giveStateData.bind(this);\r\n\r\n class ManageUserCell extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n //console.log(\"DATA ITEM\", this.props.dataItem);\r\n let enterprise = giveStateData()[0];\r\n let trunk = giveStateData()[1];\r\n //if (UserId) {\r\n return (\r\n \r\n {!this.state.configSaving ?
\r\n \r\n \r\n \r\n \r\n
: No Available Data
\r\n }\r\n // } else {\r\n // return\r\n \r\n \r\n this.exportUsers()}>Export Users\r\n
\r\n )\r\n } else return null;\r\n }\r\n\r\n exportUsers = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = 'Downloading...';\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = 'Export Users';\r\n }, 2000);\r\n }\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n }\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener('loadend', () => {\r\n let body = reader.result.split(',')[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n }, false);\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = 'admin/UploadMSTeamsUsers';\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls.post(apiPath, 'POST', JSON.stringify(attachmentDTO)).then(res => res).catch(err => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n });\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n });\r\n }\r\n }\r\n\r\n showStatusLegend = () => {\r\n return (\r\n
)\r\n }\r\n\r\n uploadBtn = () => {\r\n return (\r\n {'-'} Provisioned
\r\n {'-'} Provisioned - Incorrect Voice Policy
\r\n {'-'} UnProvisioned With Valid Phone License\r\n
{'-'} UnProvisioned Missing Valid Phone License\r\n \r\n
)\r\n\r\n }\r\n\r\n submissionMsg = () => {\r\n if (this.state.Submission) {\r\n if (this.state.submitError) {\r\n return {this.state.errorMsg && this.state.errorMsg != \"\" ? this.state.errorMsg : \"Submission Failure: Changes were not processed!\"}\r\n } else {\r\n return Submission Sucess: Changes were processed!\r\n }\r\n }\r\n };\r\n\r\n cardContent = () => {\r\n return (\r\n \r\n {\r\n event.target.value = null;\r\n }}\r\n />\r\n this.openAttachments()}>Import Users\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n searchListings = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = this.state.FullListings;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'GivenName', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'TelephoneNumber', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'StreetAddress', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Surname', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'UserPrincipalName', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n this.delayedSearch(services);\r\n }\r\n else {\r\n this.delayedSearch(fullDetails);\r\n }\r\n }\r\n\r\n delayedSearch = async (services) => {\r\n await this.setState({ loading: true });\r\n if (this.timeout) clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => {\r\n this.setState({ UsersList: services, loading: false });\r\n }, settings.searchDelay);\r\n }\r\n\r\n render() {\r\n return this.cardContent();\r\n };\r\n}","export const sendErrorMessage = (apiResponse) => {\r\n let { Status, StatusDscription } = JSON.parse(JSON.parse(apiResponse));\r\n if (Status && StatusDscription !== undefined) {\r\n if (Status === \"Error\") {\r\n sessionStorage.setItem(\"MsTeamsStatusDscription\", StatusDscription);\r\n } else {\r\n sessionStorage.removeItem(\"MsTeamsStatusDscription\");\r\n }\r\n }\r\n};\r\n\r\nexport const convertToLocal = (dateTime) =>{\r\n var convertedLocalTime = new Date(dateTime);\r\n var hourOffset = convertedLocalTime.getTimezoneOffset()/60;\r\n convertedLocalTime.setHours(convertedLocalTime.getHours() + hourOffset);\r\n return convertedLocalTime;\r\n };","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { sendErrorMessage, convertToLocal } from './components/utility';\r\nimport * as apiCalls from '../../requests/api_calls';\r\n\r\nexport default class MsTeamsSetupDomain extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n loading: false,\r\n Submission: false,\r\n ErrorMessage: sessionStorage.MsTeamsStatusDscription ? sessionStorage.MsTeamsStatusDscription : \"\",\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n Trunk: this.props.Trunk,\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n routingType: this.props.routingType,\r\n };\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {this.showStatusLegend()}\r\n
\r\n \r\n
\r\n \r\n {this.exportBtn()}
\r\n {this.uploadBtn()} \r\n
{this.gridContent()}
\r\n {this.submissionMsg()}\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n // SF TICKET 01056065 ***\r\n let { MSTeamsConfig, Enterprise, PrimaryGateWay, SecondaryGateWay, ErrorMessage, routingType } = this.state;\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n wizardMsg = () => {\r\n let { IsM365DomainCreated, DomainCreatedOn } = this.state.MSTeamsConfig;\r\n if (IsM365DomainCreated) {\r\n return \r\n
\r\n In this Deployment Step:
\r\nThe SBC Primary and Secondary FQDN domains will be added to the office 365/MS Teams Tenant for Derived Routing.
\r\n\r\n\r\n {/* {this.dataRow(\"Primary FQDN:\", this.inputDataField(PrimaryGateWay, \"PstnPrimaryGateway\", this.handleInputChange, true))}\r\n {this.dataRow(\"Secondary FQDN:\", this.inputDataField(SecondaryGateWay, \"PstnSecondaryGateway\", this.handleInputChange, true))} */}\r\n {/* The following domains will be added to Office 365 to support Direct Routing\r\n Domain name 1: \r\n Domain name 2: \r\n Show Button Create Domain (only SHOW THIS BUTTON WHEN MICROSOFT 365 CONNECTION IS SET UP) */}\r\n {this.createDomainBtn()}\r\n Continue\r\n {this.wizardMsg()}\r\n {ErrorMessage !== \"\" ? Error: {ErrorMessage} : null}\r\n
\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n In this step, the Deployment Wizard will set up the SBC Domains in the Teams Tenant for Derived Routing.\r\n
Click on the Setup Domain Routing button to add the information to the Microsoft 365 Tenant. Once the green Doamin Created status notification appears (or after deployment is completed) the Admin may elect to click on the View Domain Information for the Derived Routing to review the setup information.\r\n
When completed and verified, click Continue button to move on to the deployment step.\r\n
Domain Created: {convertToLocal(DomainCreatedOn).toLocaleString()}
\r\n }\r\n\r\n saveAndContinue = () => {\r\n //this.setState({ completed: true });\r\n this.props.Proceed(\"dns\");\r\n }\r\n\r\n createDomainBtn = () => {\r\n let { DomainSetupResponse, IsM365DomainCreated, Password, UserName } = this.state.MSTeamsConfig;\r\n if (!IsM365DomainCreated) {\r\n if(UserName === \"\" || UserName === null || Password === \"\" || Password === null){\r\n return \r\n }\r\n else{\r\n return \r\n }\r\n } else {\r\n return \r\n }\r\n }\r\n\r\n createAzureDomain = async () => {\r\n let path = 'admin/CreateMSTeamsDomain';\r\n let { MSTeamsConfig, Trunk, Enterprise } = this.state;\r\n let dto = {\r\n userName: sessionStorage.username,//\"prodnewsubsite@momentumtelecom.com\",\r\n enterpriseId: Enterprise,\r\n trunkName: Trunk.TrunkName,\r\n };\r\n console.log(\"DTO\", dto);\r\n let response = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n if (response) {\r\n sendErrorMessage(response.message);\r\n this.props.RefreshData();\r\n }\r\n }\r\n\r\n formatDsRes = () => {\r\n let { DomainSetupResponse } = this.state.MSTeamsConfig;\r\n if (DomainSetupResponse) {\r\n let parsedResponse = JSON.parse(DomainSetupResponse);\r\n if (parsedResponse.Status && parsedResponse.Status === \"Error\") {\r\n return parsedResponse.StatusDscription;\r\n } else {\r\n return parsedResponse.map((itm, idx) => {\r\n return (\r\n
\r\n
\r\n
\r\n )\r\n })\r\n }\r\n } else return \"No domain setup response available\";\r\n }\r\n\r\n render() {\r\n return (\r\n Name: {itm.Name}
\r\n Is Verified: {itm.IsVerified ? \"Yes\" : \"No\"}
\r\n Is Default: {itm.IsDefault ? \"Yes\" : \"No\"}
\r\n \r\n
\r\n \r\n \r\n Setup Azure Domains? \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Domain Information \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport MsTeamsConfig from './msteams_config';\r\nimport { convertToLocal } from './components/utility';\r\n\r\n\r\nexport default class MsTeamsDNS extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n loading: true,\r\n Submission: false,\r\n submitError: false,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n Ticket: null,\r\n CustomerName: this.props.CustomerName,\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n routingType: this.props.routingType,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.state.MSTeamsConfig.IsDNSTicketCreated) {\r\n this.getSubmittedTicket();\r\n } else {\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n getSubmittedTicket = async () => {\r\n await this.setState({ loading: true });\r\n let { DNSTicketID } = this.state.MSTeamsConfig;\r\n let path = `admin/GetMSTeamsTicket?TicketId=${DNSTicketID}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n loading: false,\r\n Ticket: data,\r\n });\r\n } else {\r\n this.setState({\r\n loading: false,\r\n Ticket: null,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.formatDsRes()}
\r\n {/* {this.state.MSTeamsConfig.DomainSetupResponse}
*/}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n let { loading, MSTeamsConfig, Ticket } = this.state;\r\n if (!loading) {\r\n let { IsDNSTicketCreated, DNSTicketID, DomainSetupResponse } = MSTeamsConfig;\r\n let createdTicketID = !IsDNSTicketCreated ? \"\" : Ticket!= null ? Ticket.TicketNumber:\"\";\r\n let createdOn = !IsDNSTicketCreated ? \"\" : Ticket!= null ?convertToLocal(Ticket.CreatedDate).toLocaleString():\"\";\r\n let status = !IsDNSTicketCreated ? \"No open ticket\" : Ticket!= null ?Ticket.Status:\"\";\r\n let dnsTicketData = !IsDNSTicketCreated ? \"\" : this.parseDomainSetupResponse();\r\n return (\r\n \r\n {/* \r\n
\r\n \r\n )\r\n } else {\r\n return The following represents the request to add DNS records to mymtm.us zone
*/}\r\n\r\n {this.dataRow(\"DNS Ticket ID:\", this.inputDataField(createdTicketID, null, null, true))}\r\n {this.dataRow(\"DNS Ticket Created On:\", this.inputDataField(createdOn, null, null, true))}\r\n {this.dataRow(\"Ticket Status:\", this.inputDataField(status, null, null, true))}\r\n {/* {this.dataRow(\"\", this.setState({ showConfirmationModal: true })}\r\n disabled={MSTeamsConfig.IsM365DomainCreated == false ? true : false || MSTeamsConfig.IsDNSTicketCompleted ? true : false}\r\n >Create Ticket\r\n Continue\r\n {this.wizardMsg()}\r\n
\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n In this step, the Deployment Wizard will submit a ticket to the support team containing information, previously collected, requesting an update of DNS entries for the connection to Microsoft 365 Tenant and the provider network.\r\n
Click the Create Ticket button to submit the setup request to Support.\r\n
Note the DNS Ticket ID when it is created.\r\n
The Ticket Status field will update to indicate progress.
\r\n
Once Ticket Status = Closed and the green DNS Ticket Completed confirmation with time-stamp displays at the button of the tab, click the Continue button to move to the next deployment step.\r\n
\r\n
\r\n }\r\n }\r\n\r\n wizardMsg = () => {\r\n if (this.state.Ticket && this.state.Ticket !== null) {\r\n let { IsDNSTicketCreated, IsDNSTicketCompleted } = this.state.MSTeamsConfig;\r\n let { CreatedDate, ClosedDate } = this.state.Ticket;\r\n if (IsDNSTicketCreated && !IsDNSTicketCompleted) {\r\n return DNS Ticket Created: {convertToLocal(CreatedDate).toLocaleString()}
\r\n DNS Ticket Created: {convertToLocal(CreatedDate).toLocaleString()}
\r\n DNS Ticket Completed: {convertToLocal(ClosedDate).toLocaleString()}\r\n
\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport { convertToLocal } from './components/utility';\r\nexport default class MsTeamsSBC extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n loading: true,\r\n Submission: false,\r\n submitError: false,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n Ticket: null,\r\n CustomerName: this.props.CustomerName,\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n routingType: this.props.routingType,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.state.MSTeamsConfig.IsSBCTicketCreated) {\r\n this.getSubmittedTicket();\r\n } else {\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n getSubmittedTicket = async () => {\r\n await this.setState({ loading: true });\r\n let { SBCTicketID } = this.state.MSTeamsConfig;\r\n let path = `admin/GetMSTeamsTicket?TicketId=${SBCTicketID}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n loading: false,\r\n Ticket: data,\r\n });\r\n } else {\r\n this.setState({\r\n loading: false,\r\n Ticket: null,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n \r\n \r\n \r\n Submit DNS ticket? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n {this.cardContent()}\r\n
\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n let { loading, MSTeamsConfig, Ticket } = this.state;\r\n if (!loading) {\r\n let { IsSBCTicketCreated, SBCTicketID, IsSBCTicketCompleted, SBCTicketCompletedOn } = MSTeamsConfig;\r\n let createdTicketID = !IsSBCTicketCreated ? \"\" : Ticket!= null ? Ticket.TicketNumber:\"\";\r\n let createdOn = !IsSBCTicketCreated ? \"\" : Ticket!= null ?convertToLocal(Ticket.CreatedDate).toLocaleString():\"\";\r\n let status = !IsSBCTicketCreated ? \"No open ticket\" : Ticket!= null ?Ticket.Status:\"\";\r\n let sbcTicketData = !IsSBCTicketCreated ? \"\" : `RPX Account Number: ${this.state.Enterprise}\\nCustomer Name: ${this.state.CustomerName}, LLC\\nRPX Switch Name: ${this.state.MSTeamsConfig.Switch}\\n\\nFQDNs: ${this.state.PrimaryGateWay} and ${this.state.SecondaryGateWay}`;\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n } else {\r\n return The following represents the request to add MS Teams SBC functionality
\r\n\r\n {this.dataRow(\"SBC Ticket ID:\", this.inputDataField(createdTicketID, null, null, true))}\r\n {this.dataRow(\"SBC Ticket Created On:\", this.inputDataField(createdOn, null, null, true))}\r\n {this.dataRow(\"Ticket Status:\", this.inputDataField(status, null, null, true))}\r\n {this.dataRow(\"\", this.setState({ showConfirmationModal: true })}\r\n disabled={MSTeamsConfig.IsDNSTicketCompleted == false ? true : false || IsSBCTicketCompleted ? true : false}\r\n >Create Ticket\r\n Continue\r\n {this.wizardMsg()}\r\n
\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n In this step, the Deployment Wizard helps the Admin create and submit a properly formatted ticket to the Support Team requesting set up of routes in the SBC that will handle calls between the Microsoft Teams Tenant and the Network.\r\n
Click the Create Ticket button to submit the SBC Setup request to Support.\r\n
When completed and confirmation displays, click Continue to move on to the next step.\r\n
\r\n
\r\n }\r\n }\r\n\r\n wizardMsg = () => {\r\n if (this.state.Ticket && this.state.Ticket !== null) {\r\n let { IsSBCTicketCreated, IsSBCTicketCompleted } = this.state.MSTeamsConfig;\r\n let { CreatedDate, ClosedDate } = this.state.Ticket;\r\n if (IsSBCTicketCreated && !IsSBCTicketCompleted) {\r\n return SBC Ticket Created: {convertToLocal(CreatedDate).toLocaleString()}
\r\n SBC Ticket Created: {convertToLocal(CreatedDate).toLocaleString()}
\r\n SBC Ticket Completed: {convertToLocal(ClosedDate).toLocaleString()}\r\n
\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { sendErrorMessage, convertToLocal } from './components/utility';\r\nimport * as apiCalls from '../../requests/api_calls';\r\n\r\nexport default class MsTeamsTempUsers extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n Trunk: this.props.Trunk,\r\n loading: false,\r\n Submission: false,\r\n ErrorMessage: sessionStorage.MsTeamsStatusDscription ? sessionStorage.MsTeamsStatusDscription : \"\",\r\n LicenseType: \"\",\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n routingType: this.props.routingType,\r\n licenses: \"\"\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getLicensType();\r\n }\r\n getLicensType = async () => {\r\n\r\n await this.setState({ loading: true });\r\n\r\n let path = `admin/MsTeamLicense`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n this.setState({\r\n loading: false,\r\n licenses: data,\r\n });\r\n } else {\r\n this.setState({\r\n loading: false,\r\n licenses: null,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n \r\n \r\n \r\n Submit SBC ticket? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n {this.cardContent()}\r\n
\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n //IsM365DomainCreated=1\r\n // IsDNSTicketCompleted=1\r\n // Show Message: \r\n // tempuser1@308766235-ATL01.completeuc.com\r\n // tempuser1@308766235-PHL01.completeuc.com\r\n // In a drop down for license, Show SKU for E1, E3, E5 and user will select one. (Add note: Please verify license exists in Microsoft 365)\r\n // On Save. Call MS Teams API\r\n // show Save and Save and Continue as Enabled only when (IsM365DomainCreated=1 && IsDNSTicketCompleted=1)\r\n let { Enterprise, LicenseType, ErrorMessage, MSTeamsConfig } = this.state;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n wizardMsg = () => {\r\n let { IsTempUsersCreated, TempUsersCreatedOn } = this.state.MSTeamsConfig;\r\n if (IsTempUsersCreated) {\r\n return \r\n
\r\n This step creates Microsoft Teams Temp User 1 and Temp User 2 using the License Type selected.
\r\n\r\n {/* {this.dataRow(\"Temp User 1:\", this.inputDataField(MSTeamsConfig.TempUser1, null, this.handleInputChange, true))}\r\n {this.dataRow(\"Temp User 2:\", this.inputDataField(MSTeamsConfig.TempUser2, null, this.handleInputChange, true))}\r\n */}\r\n {this.dataRow(\"License Type:\", this.selectLicenseType(LicenseType))}\r\n
\r\n \r\n {/* this.setState({ showVerifyDomainModal: true })}\r\n //disabled={this.state.MSTeamsConfig.IsTempUsersCreated ? true : false}\r\n >RELOAD */}\r\n { this.setState({ showConfirmationModal: true }) }}\r\n disabled={this.state.MSTeamsConfig.IsTempUserCreatedWithin24Hrs == false &&\r\n this.state.MSTeamsConfig.IsDNSTicketCreated == true &&\r\n this.state.MSTeamsConfig.IsDNSTicketCompleted == true &&\r\n this.state.MSTeamsConfig.IsSBCTicketCreated == true &&\r\n this.state.MSTeamsConfig.IsSBCTicketCompleted == true ? false : true}\r\n >Create Temporary Users\r\n Continue\r\n
\r\n {this.wizardMsg()}\r\n {ErrorMessage !== \"\" ? Error: {ErrorMessage} : null}\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n In this step, the Deployment Wizard allows the Admin to select the appropriate license type and create Temporary users (as shown in the Temp User 1 and 2 fields) within Microsoft 365 to validate the domain configuration setup.\r\n
Select the License Type from the drop-down list of options.\r\n
Click on the Create Temporary Users button.\r\n
Please wait for 24 business hours to allow Microsoft 365 to replicate the domains across their systems.\r\n
When completed (and after 24 business hours have elapsed to provide time for propagation through the Microsoft system), click Continue to move on to the next step.\r\n
Note: A Microsoft 365 Tenant Admin can remove these temporary test users in the Microsoft 365 portal after the {this.state.routingType} setup is completed and it has been verified that it is working.\r\n
\r\n
\r\n
\r\n Temporary Users Created: {convertToLocal(TempUsersCreatedOn).toLocaleString()}
\r\n
\r\n }\r\n\r\n\r\n getTimeAfter24Hrs = (dateTime) => {\r\n try {\r\n let date = convertToLocal(dateTime);\r\n if (date instanceof Date) {\r\n let time = date.getTime();\r\n let tomorrow = new Date(time + 24 * 60 * 60 * 1000);\r\n return `${tomorrow.toLocaleString()}`;\r\n }\r\n } catch (e) {\r\n return \"\";\r\n }\r\n }\r\n\r\n verifyAzureDomains = () => {\r\n let path = 'admin/VerifyAzureDomains';\r\n let { MSTeamsConfig, Trunk, Enterprise } = this.state;\r\n let dto = {\r\n userName: sessionStorage.username,//\"prodnewsubsite@momentumtelecom.com\",\r\n enterpriseId: Enterprise,\r\n trunkName: Trunk.TrunkName,\r\n };\r\n\r\n // let response = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n // if (response.ok) {\r\n // }\r\n this.props.RefreshData();\r\n }\r\n\r\n createTempUsers = async () => {\r\n await this.setState({ submittedTicket: true });\r\n let path = 'admin/CreateMsTeamsTempUsers';\r\n let { MSTeamsConfig, Trunk, Enterprise, LicenseType } = this.state;\r\n let dto = {\r\n userName: sessionStorage.username,//\"prodnewsubsite@momentumtelecom.com\",\r\n enterpriseId: Enterprise,\r\n trunkName: Trunk.TrunkName,\r\n LicenseType,\r\n };\r\n\r\n let response = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n if (response) {\r\n sendErrorMessage(response.message);\r\n this.props.RefreshData();\r\n }\r\n }\r\n\r\n saveAndContinue = () => {\r\n if (!this.state.MSTeamsConfig.IsTempUserCreatedWithin24Hrs) {\r\n this.setState({ completed: true });\r\n this.props.Proceed(\"dr\");\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n Verify Azure Domains? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n \r\n \r\n Create Temp Users? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { sendErrorMessage, convertToLocal } from './components/utility';\r\nimport * as apiCalls from '../../requests/api_calls';\r\n\r\nexport default class MsTeamsDirectRouting extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n loading: false,\r\n Submission: false,\r\n ErrorMessage: sessionStorage.MsTeamsStatusDscription ? sessionStorage.MsTeamsStatusDscription : \"\",\r\n Trunk: this.props.Trunk,\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n PrimaryGateWay: this.props.PrimaryGateWay,\r\n SecondaryGateWay: this.props.SecondaryGateWay,\r\n routingType: this.props.routingType,\r\n };\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n let { Enterprise, MSTeamsConfig, PrimaryGateWay, SecondaryGateWay, ErrorMessage } = this.state;\r\n let sessions = MSTeamsConfig.MsTeamsMaxConcurrentSessions ? MSTeamsConfig.MsTeamsMaxConcurrentSessions : 1000\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n wizardMsg = () => {\r\n let { DirectRouting, DirectRoutingTimeStamp } = this.state.MSTeamsConfig;\r\n if (DirectRouting) {\r\n return \r\n
\r\n Submit the request to setup and enable Derived Routing.
\r\n\r\n {/* {this.dataRow(\"Primary FQDN\", this.inputDataField(PrimaryGateWay, \"PstnPrimaryGateway\", this.handleInputChange, true))}\r\n {this.dataRow(\"Secondary FQDN\", this.inputDataField(SecondaryGateWay, \"PstnSecondaryGateway\", this.handleInputChange, true))}\r\n {this.dataRow(\"Max Concurrent Sessions\", this.inputDataField(sessions, \"MsTeamsMaxConcurrentSessions\", this.handleInputChange, true))} */}\r\n this.setState({ showConfirmationModal: true })}\r\n disabled={this.state.MSTeamsConfig.IsTempUsersCreated == false ? true : false || this.state.MSTeamsConfig.DirectRouting ? true: false}\r\n >Setup {this.state.routingType}\r\n Continue\r\n {this.wizardMsg()}\r\n {ErrorMessage !== \"\" ? Error: {ErrorMessage} : null}\r\n
\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n In this step, the Deployment Wizard will enable Derived routing of voice traffic between the Microsoft Teams Tenant and the Voice Network. The fields in the tab are predefined and read-only.\r\n
Click on the Setup Derived Routing button.\r\n
Wait 24 hours for this process to be completed.\r\n
Once this step is complete, Derived routing and TN assignments may be setup for the individual Teams users already added and assigned licenses in the Microsoft Teams Tenant.\r\n
\r\n {/*
*/}\r\n {this.state.routingType} Setup: {convertToLocal(DirectRoutingTimeStamp).toLocaleString()}\r\n
\r\n }\r\n\r\n getTimeAfter24Hrs = (date) => {\r\n try {\r\n //let date = new Date(dateTime);\r\n if (date instanceof Date) {\r\n let time = date.getTime();\r\n let tomorrow = new Date(time + 24 * 60 * 60 * 1000);\r\n return tomorrow;\r\n }\r\n } catch (e) {\r\n return \"\";\r\n }\r\n }\r\n\r\n setDirectRouting = async () => {\r\n await this.setState({ submittedTicket: true });\r\n let path = 'admin/EnterpriseMsTeamsDirectRouting';\r\n let { MSTeamsConfig, Trunk, Enterprise } = this.state;\r\n let dto = {\r\n userName: sessionStorage.username,//\"prodnewsubsite@momentumtelecom.com\",\r\n enterpriseId: Enterprise,\r\n trunkName: Trunk.TrunkName,\r\n returnOnlyTeamsDomains: true,\r\n };\r\n console.log(\"DTO\", dto);\r\n let response = await apiCalls.post(path, \"POST\", JSON.stringify(dto)).then(data => data).catch(err => console.error(err));\r\n if (response) {\r\n sendErrorMessage(response.message);\r\n this.props.RefreshData();\r\n }\r\n }\r\n\r\n saveAndContinue = () => {\r\n //this.setState({ completed: true });\r\n this.props.Proceed(\"data\");\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n Setup {this.state.routingType} for this Enterprise? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { sendErrorMessage, convertToLocal } from './components/utility';\r\nimport * as apiCalls from '../../requests/api_calls';\r\n\r\nexport default class MigrationTab extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n loading: false,\r\n ErrorMessage: sessionStorage.MsTeamsStatusDscription ? sessionStorage.MsTeamsStatusDscription : \"\",\r\n MSTeamsConfig: this.props.MSTeamsConfig,\r\n routingType: this.props.routingType,\r\n CheckStatus: this.props.CheckStatus,\r\n };\r\n }\r\n\r\n // componentDidMount() {\r\n // this.fetchStatus();\r\n // }\r\n\r\n // fetchStatus = async () => {\r\n // let path = \"admin/IsReadyForDerivedRoutingMigration\";\r\n // await apiCalls.fetchData(path).then((data) => {\r\n // this.setState({\r\n // migrationStatus: data && data == 1 ? true : false,\r\n // });\r\n // }).catch(err => console.error(err));\r\n // }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let MSTeamsConfig = { ...this.state.MSTeamsConfig };\r\n MSTeamsConfig[key] = value;\r\n await this.setState({ MSTeamsConfig });\r\n //console.log(\"MSTeamsConfig\", MSTeamsConfig); // inserted AD Information\r\n }\r\n\r\n inputDataField = (val, key, onChangeFunc, readOnly = false, type = 'text') => {\r\n return (\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n {label} \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n cardContent = () => {\r\n let { MSTeamsConfig, ErrorMessage } = this.state;\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }\r\n\r\n migrationBtn = () => {\r\n let { MigrationUpdatedOn, DerivedRoutingMigrationStatus, DerivedRoutingMigrationNotes } = this.state.MSTeamsConfig;\r\n if (DerivedRoutingMigrationStatus && DerivedRoutingMigrationStatus != \"None\") {\r\n return (\r\n \r\n
\r\n Submit the request to migrate and enable Derived Routing.
\r\n\r\n {this.migrationBtn()}\r\n {this.wizardMsg()}\r\n {ErrorMessage !== \"\" ? Error: {ErrorMessage} : null}\r\n
\r\n \r\n
\r\n \r\n Support Notes\r\n
\r\n Click the Start Migration Button to start migration of direct routing to derived routing.\r\n
This process will take up to 30 minutes to complete.\r\n
Commands needed to run in Microsoft environment for this migration, can be executed while this step is being processed.\r\n
\r\n
\r\n
\r\n Updated On: {convertToLocal(MigrationUpdatedOn).toLocaleString()}\r\n
\r\n }\r\n\r\n migrateToDerivedRouting = async () => {\r\n await this.setState({ submittedTicket: true });\r\n let path = 'admin/StartRPXDerivedRoutingMigration';\r\n // let { MSTeamsConfig, Trunk, Enterprise } = this.state;\r\n // let dto = {\r\n // userName: sessionStorage.username,//\"prodnewsubsite@momentumtelecom.com\",\r\n // enterpriseId: Enterprise,\r\n // trunkName: Trunk.TrunkName,\r\n // returnOnlyTeamsDomains: true,\r\n // };\r\n // console.log(\"DTO\", dto);\r\n let response = await apiCalls.post(path, \"POST\", null).then(data => data).catch(err => console.error(err));\r\n if (response) {\r\n sendErrorMessage(response.message);\r\n this.props.RefreshData();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n Start migration process for this Enterprise? \r\n \r\n \r\n
\r\n {this.state.submittedTicket ? \r\n \r\n {this.cardContent()}\r\n
\r\n );\r\n };\r\n}","import React, { Component } from \"react\";\r\nimport { Grid, GridColumn as Column } from \"@progress/kendo-react-grid\";\r\nimport { orderBy } from \"@progress/kendo-data-query\";\r\nimport { headerToolTip } from \"../../../components/ellipsisHeaderTooltip\";\r\n\r\nexport default class VoiceRoutes extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: false,\r\n Enterprise: this.props.Enterprise,\r\n Trunk: this.props.Trunk,\r\n CurrentTrunk: {},\r\n VoiceRoutesList: this.props.VoiceRoutesList,\r\n gridHeight: window.innerHeight - 200,\r\n Sort: [{ field: \"Identity\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n };\r\n }\r\n\r\n async componentDidMount() {}\r\n\r\n handleSortChange = (e) => {\r\n this.setState({\r\n VoiceRoutesList: orderBy(this.state.VoiceRoutesList, e.sort),\r\n Sort: e.sort,\r\n });\r\n };\r\n\r\n gridContent = () => {\r\n let { VoiceRoutesList, Sort } = this.state;\r\n console.log(\"VoiceRoutesList\", VoiceRoutesList);\r\n let priorityColWidth ='105px';\r\n let nameColWidth='200px';\r\n if (VoiceRoutesList && VoiceRoutesList.length > 0) {\r\n return (\r\n \r\n {this.state.submittedTicket ?
\r\n \r\n \r\n \r\n \r\n
}\r\n \r\n No Available Data\r\n
\r\n );\r\n }\r\n };\r\n\r\n render() {\r\n return this.gridContent();\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { Grid, GridCell, GridColumn as Column } from '@progress/kendo-react-grid';\r\nimport * as apiCalls from \"../../../../src/requests/api_calls\";\r\nimport { Modal } from 'react-bootstrap';\r\nimport { orderBy } from \"@progress/kendo-data-query\";\r\nimport { headerToolTip } from \"../../../components/ellipsisHeaderTooltip\";\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\nexport default class VoicePolicy extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: false,\r\n CurrentTrunk: {},\r\n VoicePoliciesList: this.props.VoicePoliciesList,\r\n gridHeight: window.innerHeight - 200,\r\n Sort: [{ field: \"UsersCount\", dir: \"desc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n showModal: false,\r\n };\r\n\r\n class UserBtn extends GridCell {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n loading: false,\r\n showModal: false,\r\n UsersList: {},\r\n Sort: [{ field: \"DisplayName\", dir: \"desc\" }],\r\n };\r\n }\r\n\r\n async componentDidMount() {\r\n await this.setState({ loading: true })\r\n console.log(\"logged\", this.props.dataItem.VoiceRoutePolicy)\r\n await this.setState({ loading: true });\r\n let path = `admin/MSTeamsUserPolicy?policyName=${this.props.dataItem.VoiceRoutePolicy}`;\r\n await apiCalls.fetchData(path).then(async (data) => {\r\n if (data) {\r\n console.log(data);\r\n this.setState({\r\n UsersList: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n UsersList: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n\r\n }\r\n\r\n handleOpen = () => {\r\n this.componentDidMount();\r\n this.setState({\r\n showModal: true,\r\n\r\n });\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({\r\n showModal: false,\r\n });\r\n };\r\n\r\n handleSortChange = (e) => {\r\n this.setState({\r\n UsersList: orderBy(this.state.UsersList, e.sort),\r\n Sort: e.sort\r\n });\r\n }\r\n \r\n gridContent = () => {\r\n let loading = this.state.loading;\r\n if (loading) {\r\n return ({loadingError}
);\r\n }\r\n\r\n let { UsersList, Sort } = this.state;\r\n if (UsersList && UsersList.length > 0) {\r\n return (\r\n \r\n No Available Data\r\n
\r\n );\r\n }\r\n };\r\n\r\n\r\n\r\n render() {\r\n return (\r\n\r\n
)\r\n }\r\n if (directMatchingObject.VoiceRoutePolicy === \"Momentum-ALL\" && directMatchingObject.Status === \"true\") {\r\n return ({'-'} Momentum Supported Derived Routing Voice Policy
\r\n {'-'} Non Supported Voice Policy
\r\n \r\n
)\r\n }\r\n }\r\n if (derivedMatchingObject === undefined && directMatchingObject === undefined) {\r\n return ({'-'} Momentum Supported Direct Routing Voice Policy
\r\n {'-'} Non Supported Voice Policy
\r\n \r\n {/*
)\r\n }\r\n // return ({'-'}
*/}\r\n {'-'} Non Supported Voice Policy
\r\n \r\n //
)\r\n }\r\n\r\n gridContent = () => {\r\n let { VoicePoliciesList, Sort } = this.state;\r\n console.log(\"VoiceRoutesList\", VoicePoliciesList);\r\n if (VoicePoliciesList && VoicePoliciesList.length > 0) {\r\n return (\r\n {'-'} Users with Correct VoicePolicy
\r\n // {'-'} Users with Incorrect Voice Policy
\r\n // \r\n No Available Data\r\n
\r\n );\r\n }\r\n };\r\n\r\n cardContent = () => {\r\n return (\r\n\r\n
\r\n );\r\n }\r\n\r\n render() {\r\n //return this.gridContent();\r\n return this.cardContent();\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { Modal } from \"react-bootstrap\";\r\nimport VoiceRoutes from \"./tabs/voice_route\";\r\nimport VoicePolicy from \"./tabs/voice_policy\";\r\n\r\nexport default class MsTeamsTenantInfo extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Enterprise: this.props.Enterprise,\r\n Trunk: this.props.Trunk,\r\n gridHeight: window.innerHeight - 180,\r\n VoiceRoutesList: this.props.VoiceRoutesList,\r\n VoicePoliciesList: this.props.VoicePoliciesList,\r\n tab: VOICETABS.VoiceRoutes,\r\n tabHasChanges: false\r\n };\r\n this.changeTab = this.changeTab.bind(this);\r\n this.getTab = this.getTab.bind(this);\r\n this.getTab = this.getTab.bind(this);\r\n this.handleTabEdit = this.handleTabEdit.bind(this);\r\n }\r\n\r\n\r\n handleTabEdit = (val) => {\r\n this.setState({ tabHasChanges: val });\r\n }\r\n\r\n changeTab(event) {\r\n if (event.target.dataset.act === 'voicepolicy') {\r\n\r\n this.setState({ tab: VOICETABS.VoicePolicy, tabHasChanges: true })\r\n }\r\n else {\r\n this.setState({ tab: VOICETABS.VoiceRoutes, tabHasChanges: true })\r\n }\r\n }\r\n\r\n getTabDisplay() {\r\n let voiceRoutes =\r\n (\r\n \r\n
\r\n \r\n {this.showStatusLegend()}\r\n
\r\n {this.gridContent()}
\r\n \r\n {voiceRoutes}\r\n {voicePolicy}\r\n
\r\n );\r\n }\r\n\r\n getTab() {\r\n switch (this.state.tab) {\r\n case VOICETABS.VoiceRoutes:\r\n return (\r\n \r\n \r\n \r\n Cancel Existing Order? \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const VOICEROUTETYPES = {\r\n VoiceRoutes: \"VOICE_ROUTES\",\r\n VoicePolicy: \"VOICE_POLICY\"\r\n}\r\n\r\n\r\n\r\nexport const VOICETABS = {\r\n VoiceRoutes: \"voiceroutes\",\r\n VoicePolicy: \"voicepolicy\"\r\n}","import React, { Component, Fragment } from \"react\";\r\nimport MsTeamsConfig from \"./msteams_config\";\r\nimport MsTeamsUserMenu from \"./msteams_menu\";\r\nimport MsTeamsSetupDomain from \"./msteams_setup_domain\";\r\nimport MsTeamsDNS from \"./msteams_dns\";\r\nimport MsTeamsSBC from \"./msteams_sbc\";\r\nimport MsTeamsTempUsers from \"./msteams_temp\";\r\nimport MsTeamsDirectRouting from \"./msteams_dr\";\r\nimport MigrationTab from \"./migration\";\r\nimport MsTeamsTenantInfo from \"./msteams_tenantinfo\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport * as apiCalls from \"../../requests/api_calls\";\r\nimport { userIsAdmin } from \"../../scripts/helper\";\r\n\r\nexport default class MsTeamsMain extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n loading: false,\r\n Enterprise: sessionStorage.userEnterpriseNumber,\r\n tab: sessionStorage.msteamstabName || \"config\" || \"tenant\",\r\n CurrentTrunk: {},\r\n MSTeamsConfig: null,\r\n MSTeamsConfigCopy: {},\r\n showConfirmationModal: false,\r\n showDirectRoutingModal: false,\r\n Trunks: [],\r\n TeamsUsers: [],\r\n CustomerName: \"\",\r\n DNSTicketDetails: null,\r\n SBCTicketDetails: null,\r\n TabRedirect: true,\r\n showUserList: false,\r\n routingType: sessionStorage.MSTeamsRoutingType == \"DIRECT\" ? \"Direct Routing\" : \"Derived Routing\",\r\n CheckStatus: false,\r\n gridHeight: (window.innerHeight - 180),\r\n VoiceRoutesList:[],\r\n VoicePoliciesList:[]\r\n //routingType: \"Derived Routing\",\r\n //migrationStatus: false,\r\n };\r\n }\r\n\r\n async componentDidMount() {\r\n if (userIsAdmin()) {\r\n await this.fetchTrunks();\r\n await this.fetchMSTeamsConfigInfo();\r\n \r\n //await this.fetchStatus();\r\n }\r\n }\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n if (!sessionStorage.msteamstabName && prevState.tab !== this.state.tab)\r\n if (this.state.tab === \"data\") {\r\n await this.setState({ tab: \"data\" });\r\n }\r\n }\r\n\r\n // fetchStatus = async () => {\r\n // let path = \"admin/IsReadyForDerivedRoutingMigration\";\r\n // await apiCalls.fetchData(path).then((data) => {\r\n // this.setState({\r\n // migrationStatus: data && data == 1 ? true : false,\r\n // });\r\n // }).catch(err => console.error(err));\r\n // }\r\n\r\n fetchBillingStat = async () => {\r\n await this.setState({ loading: true });\r\n let path = \"admin/BillingStat\";\r\n await apiCalls\r\n .fetchData(path)\r\n .then((data) => {\r\n if (data) {\r\n this.setState({\r\n CustomerName: data.CustomerName,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n CustomerName: \"\",\r\n loading: false,\r\n });\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n\r\n fetchTrunks = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/EnterpriseMSTrunks`;\r\n await apiCalls\r\n .fetchData(path)\r\n .then((data) => {\r\n if (data) {\r\n this.setState({\r\n Trunks: data,\r\n CurrentTrunk: data[0],\r\n });\r\n } else {\r\n this.setState({\r\n Trunks: [],\r\n CurrentTrunk: {},\r\n loading: false,\r\n });\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n\r\n fetchDomainList = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetMSTeamsDomain?enterprise=${this.state.Enterprise}&trunkName=${this.state.CurrentTrunk.TrunkName}`;\r\n await apiCalls.fetchData(path).then(async (data) => {\r\n if (data) {\r\n //data.DirectRouting = true; // test direct routing rendering\r\n this.setState({\r\n DomainList: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n DomainList: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchMSTeamsConfigInfo = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/MSTeamsConfig?EnterpriseTrunkId=${this.state.CurrentTrunk.TrunkId}`;\r\n await apiCalls\r\n .fetchData(path)\r\n .then(async (data) => {\r\n if (data) {\r\n let copy = JSON.parse(JSON.stringify(data));\r\n //data.DirectRouting = true; // test Derived routing rendering\r\n this.setState({\r\n MSTeamsConfig: data,\r\n MSTeamsConfigCopy: copy,\r\n PrimaryGateWay: data.PstnPrimaryGateway,\r\n SecondaryGateWay: data.PstnSecondaryGateway,\r\n loading: false,\r\n });\r\n await this.fetchMSTeamsUserList();\r\n await this.fetchDomainList();\r\n await this.fetchBillingStat();\r\n await this.fetchListings();\r\n await this.fetchListingsForVoicePolicies();\r\n if (!sessionStorage.msteamstabName && this.state.TabRedirect) {\r\n if (this.state.MSTeamsConfig.ConfigProcessCompleted) {\r\n this.setState({ tab: \"data\" });\r\n }\r\n }\r\n //this.setState({ loading: false })\r\n } else {\r\n this.setState({\r\n MSTeamsConfig: null,\r\n MSTeamsConfigCopy: null,\r\n PrimaryGateWay: \"\",\r\n SecondaryGateWay: \"\",\r\n loading: false,\r\n });\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n\r\n fetchMSTeamsUserList = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/MSTeamsUsers`;\r\n await apiCalls\r\n .fetchData(path)\r\n .then((data) => {\r\n if (data) {\r\n this.setState({\r\n TeamsUsers: data,\r\n FullListings: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n TeamsUsers: [],\r\n FullListings: [],\r\n loading: false,\r\n });\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n\r\n fetchListings = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetCsOnlineVoiceRoute?enterprise=${this.state.Enterprise}&trunkName=${this.state.CurrentTrunk.TrunkName}`;\r\n await apiCalls.fetchData(path).then(async (data) => {\r\n if (data) {\r\n this.setState({\r\n VoiceRoutesList: JSON.parse(data),\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n VoiceRoutesList: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n}\r\n\r\nfetchListingsForVoicePolicies = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/GetVoiceRoutePolicies`;\r\n await apiCalls.fetchData(path).then(async (data) => {\r\n if (data) {\r\n this.setState({\r\n VoicePoliciesList: data,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n VoicePoliciesList: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n}\r\n\r\n btnField = (description, tabName) => {\r\n return (\r\n \r\n
\r\n \r\n {this.getTabDisplay()}\r\n
\r\n {this.getTab()}
\r\n \r\n
\r\n \r\n \r\n Continuing this action will cancel existing changes you have\r\n made for a new MACD Order. Are you sure you wish to continue\r\n and lose all changes?\r\n \r\n
\r\n\r\n
\r\n );\r\n case \"domain\":\r\n return (\r\n \r\n
\r\n {this.getTab()}
\r\n \r\n
\r\n );\r\n }\r\n };\r\n servicesCardInlineStyle = () => {\r\n // offset by 30 to account for missing table headers\r\n if (this.state.loading) return { height: this.state.gridHeight + 100 + 'px' }\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport * as settings from '../../../scripts/settings';\r\nimport * as helper from '../../../scripts/helper';\r\nimport moment from 'moment';\r\nimport * as icons from '../../../scripts/icons';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport { withRouter, Link } from 'react-router-dom';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { ComboBox } from '@progress/kendo-react-dropdowns';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\n\r\nexport default class TNSearch extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n searchTerm: null,\r\n Services: [],\r\n showResults: false,\r\n //loading: true,\r\n }\r\n }\r\n fetchServices = (apiPath = null) => {\r\n //await this.setState({ loading: true });\r\n if (!apiPath) apiPath = this.apiPathWithParams();\r\n apiCalls.fetchData(apiPath).then(async (data) => {\r\n if (data !== null) {\r\n this.setState({\r\n loading: false,\r\n Services: data,\r\n resultsMsg: null,\r\n //showResults: true,\r\n });\r\n } else if (data === null) {\r\n this.setState({ Services: [], loading: false, resultsMsg: settings.noResultsMsg });\r\n };\r\n });\r\n }\r\n\r\n paramsSeparator = (apiPath) => apiPath.indexOf('?') >= 0 ? '&' : '?';\r\n\r\n apiPathWithParams = () => {\r\n let { locationAccFilter, searchTerm } = this.state;\r\n let path = 'admin/MSTeamsServices';\r\n if (searchTerm) path += this.paramsSeparator(path) + 'phoneNumber=' + searchTerm;\r\n return path;\r\n }\r\n\r\n searchServices = (event) => {\r\n let searchText = event.target.value.trim();\r\n if (searchText !== '') {\r\n this.setState({ searchTerm: searchText, showResults: true, loading: true })\r\n } else {\r\n this.setState({ searchTerm: null, showResults: false })\r\n }\r\n this.delayedSearch();\r\n }\r\n\r\n delayedSearch = () => {\r\n if (this.timeout) clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => this.fetchServices(), settings.searchDelay);\r\n }\r\n\r\n serviceResults = () => {\r\n let { showResults, Services, loading } = this.state;\r\n if (showResults) {\r\n if (Services && Services.length > 0 && !loading) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.tabDisplay()}\r\n {this.cardContent()}\r\n Microsoft Teams
\r\n\r\n
\r\n )\r\n } else if (Services && Services.length === 0 && !loading) {\r\n return (\r\n Services
\r\n {Services.map((item, index) => this.serviceItem(item, index))}\r\n \r\n
\r\n );\r\n } else {\r\n return {settings.noResultsMsg}
\r\n \r\n
\r\n }\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n handleUserChange = (tn, ext, locationId, serviceId, userId, street, city, state) => {\r\n this.props.onSelectUser(tn, ext, locationId, serviceId, userId, street, city, state);\r\n }\r\n\r\n serviceItem = (item, index) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n render() {\r\n let divStyle = { margin: '1%', };\r\n let labelStyle = { display: 'inline-block', width: '30%', };\r\n let inputStyle = { width: '70%', display: 'inline-block', height: '34px', fontSize: '12px' };\r\n if (this.props.IsResourceAccount) {\r\n // inputStyle = {\r\n // width: '45%',\r\n // display: 'inline-block',\r\n // }\r\n return (\r\n {\r\n //console.log(\"use this user\", item.UserId);\r\n this.setState({ searchTerm: item.ServiceNumber, showResults: false, });\r\n this.handleUserChange(item.ServiceNumber, item.Extension, item.LocationId, item.ServiceId, item.UserId, item.StreetAddress, item.City, item.State);\r\n }}\r\n >\r\n {`${item.FirstName} ${item.LastName} ${item.ServiceNumber}`}\r\n
\r\n \r\n {this.serviceResults()}\r\n {/* {this.noSearchResults()} */}\r\n
\r\n \r\n )\r\n }\r\n return (\r\n \r\n {this.serviceResults()}\r\n {/* {this.noSearchResults()} */}\r\n
\r\n \r\n )\r\n }\r\n}","import React, { Component, Fragment } from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport { Modal } from 'react-bootstrap';\r\nimport * as apiCalls from '../../../requests/api_calls';\r\nimport _ from 'lodash';\r\nimport SaveStatus from '../../../components/save_status';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport TNSearch from './tn_search';\r\n\r\nexport default class ManageMsTeamsUser extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isAssigned: false,\r\n loading: false,\r\n Submission: false,\r\n SubmitError: false,\r\n showConfirmationModal: false,\r\n showDRModal: false,\r\n TeamsId: this.props.location.state.TeamsId,\r\n UserDetails: this.props.location.state.UserDetails,\r\n OriginalDetails: JSON.parse(JSON.stringify(this.props.location.state.UserDetails)),\r\n Enterprise: this.props.location.state.Enterprise,\r\n Trunk: this.props.location.state.Trunk,\r\n LocationList: sessionStorage.locationList ? JSON.parse(sessionStorage.locationList) : [],\r\n routingType: sessionStorage.MSTeamsRoutingType == \"DIRECT\" ? \"Direct Routing\" : \"Derived Routing\",\r\n //LocationList: JSON.parse(getLocations()),\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n //this.props.refreshDataSource();\r\n }\r\n\r\n componentWillReceiveProps = () => {\r\n let { UserDetails } = this.state;\r\n let dataSource = this.props.location.state.UserDetails;\r\n // if (UserDetails !== this.props.location.state.UserDetails) {\r\n // this.setState({ UserDetails: this.props.location.state.UserDetails });\r\n // }\r\n }\r\n\r\n\r\n inputDataField = (val, key, inputStyle, onChangeFunc, type = 'text', readOnly) => {\r\n return (\r\n \r\n {label}: \r\n {field}\r\n
\r\n )\r\n }\r\n\r\n dataDropDown = (key, val, inputStyle) => {\r\n return (\r\n \r\n {
\r\n )\r\n }\r\n }\r\n\r\n handleUserChange = async (tn, ext, locationId, serviceId, userId, street, city, state) => {\r\n let UserDetails = { ...this.state.UserDetails };\r\n UserDetails[\"LocationId\"] = locationId;\r\n UserDetails[\"ServiceId\"] = serviceId;\r\n UserDetails[\"Extension\"] = ext;\r\n UserDetails[\"UserId\"] = userId;\r\n UserDetails[\"TelephoneNumber\"] = tn;\r\n UserDetails[\"StreetAddress\"] = street;\r\n UserDetails[\"City\"] = city;\r\n UserDetails[\"State\"] = state;\r\n await this.setState({ UserDetails });\r\n //console.log(\"UserDetails\", UserDetails);\r\n }\r\n\r\n handleInputChange = async (e, key) => {\r\n let { value } = e.target;\r\n let UserDetails = { ...this.state.UserDetails };\r\n UserDetails[key] = value;\r\n await this.setState({ UserDetails });\r\n //console.log(\"UserDetails\", UserDetails); // inserted AD Information\r\n }\r\n\r\n configureDR = async () => {\r\n this.setState({ SubmissionLoading: true });\r\n let { UserDetails, OriginalDetails, Trunk, Enterprise } = this.state;\r\n let { UserPrincipalName, TeamsUserId } = UserDetails;\r\n let path = `admin/EnableDirectRoutingForUser?teamsId=${TeamsUserId}`;\r\n let dto = this.state.UserDetails;\r\n // ** required params for web service ** //\r\n dto.UserName = sessionStorage.username;\r\n dto.EnterpriseId = Enterprise;\r\n dto.TrunkName = Trunk.TrunkName;\r\n dto.UserPrincipalName = UserPrincipalName;\r\n dto.PhoneNumber = UserDetails.TelephoneNumber;\r\n if (OriginalDetails.TelephoneNumber) {\r\n path = `admin/DisableDirectRoutingForUser?teamsId=${TeamsUserId}`;\r\n }\r\n //console.log(\"___DTO___\", dto);\r\n let response = await apiCalls.post(path, 'POST', JSON.stringify(dto)).then(response => response).catch(err => console.error(err));\r\n if (response.ok) {\r\n this.sendErrorMessage(response.message);\r\n await this.setState({\r\n Submission: true,\r\n SubmissionLoading: false,\r\n });\r\n } else {\r\n this.setState({\r\n Submission: true,\r\n ErrorMessage: \"An unknown error occurred, please try again.\",\r\n SubmitError: true\r\n });\r\n }\r\n }\r\n\r\n sendErrorMessage = (apiResponse) => {\r\n let { Status, StatusDscription } = JSON.parse(JSON.parse(apiResponse));\r\n if (Status && StatusDscription) {\r\n if (Status === \"Error\") {\r\n this.setState({ ErrorMessage: StatusDscription, SubmitError: true });\r\n } else {\r\n this.setState({ ErrorMessage: \"\" });\r\n }\r\n }\r\n };\r\n\r\n fetchMSTeamsUserList = async () => {\r\n await this.setState({ loading: true });\r\n let path = `admin/MSTeamsUsers`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n let updatedUser = data.filter(user => user.TeamsUserId == this.state.TeamsId)[0];\r\n this.setState({\r\n UserDetails: updatedUser,\r\n OriginalDetails: updatedUser,\r\n showDRModal: false,\r\n loading: false,\r\n Submission: false\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n modalBtns = () => {\r\n if (this.state.Submission) {\r\n return (\r\n \r\n {this.state.ErrorMessage !== \"\" ? {this.state.ErrorMessage} : null}\r\n {\r\n if (this.state.SubmitError) {\r\n this.setState({ showDRModal: false, SubmitError: false, Submission: false, ErrorMessage: \"\" });\r\n } else {\r\n this.fetchMSTeamsUserList();\r\n }\r\n }}\r\n >Close\r\n
\r\n )\r\n } else {\r\n return (\r\n \r\n Yes\r\n this.setState({ showDRModal: false })}\r\n >No\r\n
\r\n )\r\n }\r\n }\r\n\r\n render = () => {\r\n let { UserDetails, OriginalDetails, routingType } = this.state;\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}","import React, { Component, Fragment, useRef } from \"react\";\r\nimport * as helper from \"../../scripts/helper\";\r\nimport * as apiCalls from \"../../requests/api_calls\";\r\nimport * as settings from \"../../scripts/settings\";\r\nimport {\r\n Grid,\r\n GridColumn as Column,\r\n GridDetailRow,\r\n GridCell,\r\n} from \"@progress/kendo-react-grid\";\r\nimport EllipsisWithTooltip from \"react-ellipsis-with-tooltip\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport { headerToolTip } from \"../../components/ellipsisHeaderTooltip\";\r\nimport { orderBy } from \"@progress/kendo-data-query\";\r\nimport { filterBy } from \"@progress/kendo-data-query\";\r\nimport { filtercell } from \"../../components/dropdownFilter\";\r\nimport _ from \"lodash\";\r\nimport Popup from \"reactjs-popup\";\r\nimport { userIsAdmin } from \"../../scripts/helper\";\r\nimport { DropDownList } from \"@progress/kendo-react-dropdowns\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport * as config from \"../../requests/config\";\r\nimport { CSVLink, CSVDownload } from \"react-csv\";\r\n\r\nexport const webexemailfilter = [\r\n \"All\",\r\n \"Provisioned\",\r\n \"Pending Email Input\",\r\n \"Pending Email Validation\",\r\n \"Provisioning\",\r\n];\r\nexport default class Webex extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n loading: false,\r\n syncing: false,\r\n lastSyncedDate: \"\",\r\n LocationAccountNumber: \"\",\r\n Term: \"\",\r\n Listings: [],\r\n Sort: [{ field: \"PackageName\", dir: \"asc\" }],\r\n filter: { logic: \"and\", filters: [] },\r\n SubmittedId: null,\r\n search: \"\",\r\n directorySyncStatus: \"\",\r\n directorySyncStatusTime: \"\",\r\n disableDirectorySycnButton: false,\r\n disableDirectorySycnButtonStatus: \"\",\r\n\r\n };\r\n\r\n const parentToChildStateAccess = this.parentToChildStateAccess.bind(this);\r\n const updateWebexData = this.updateWebexData.bind(this);\r\n const handleClearFilter = this.handleClearFilter.bind(this);\r\n const handleEmailFilter = this.handleEmailFilter.bind(this);\r\n const searchEmail = this.searchEmail.bind(this);\r\n const handleInputChange = this.handleInputChange.bind(this);\r\n\r\n ///////////////////////////////////////////////////////////////////////////////////\r\n class ClearFilterCell extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n render() {\r\n return (\r\n \r\n Clear Filters\r\n \r\n );\r\n }\r\n }\r\n ///////////////////////////////////////////////////////////////////////////////////\r\n class FilterEmailCell extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n FullListings: parentToChildStateAccess()[4],\r\n };\r\n }\r\n\r\n roughDraft = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {/* this.setState({ showConfirmationModal: true })}\r\n className=\"a btn\"\r\n >{\"Update User\"} */}\r\n this.setState({ showDRModal: true })}\r\n className=\"a btn\"\r\n >{OriginalDetails.TelephoneNumber ? `Disable ${routingType}` : `Enable ${routingType}`}\r\n < Link\r\n to={{\r\n pathname: `/microsoft-teams`,\r\n state: {\r\n UserDetails: this.state.UserDetails\r\n }\r\n }}\r\n className=\"a btn\">\r\n User List\r\n \r\n \r\n
\r\n Update Microsoft Teams User
\r\n\r\n
\r\n
\r\n\r\n \r\n {this.state.Submission && !this.state.SubmitError ? \"Changes Saved!\" : \"Are you sure you want to save changes?\"} \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n \r\n
\r\n
\r\n
\r\n {this.state.SubmissionLoading ?
\r\n Addon List:
\r\n\r\n \r\n Export\r\n \r\n
\r\n );\r\n } else return null;\r\n };\r\n\r\n exportUsers = () => {\r\n this.refs.downloadCsv.submit();\r\n this.refs.exportBtn.text = \"Downloading...\";\r\n setTimeout(() => {\r\n this.refs.exportBtn.text = \"Export Users\";\r\n }, 2000);\r\n };\r\n\r\n openAttachments = () => {\r\n this.refs.fileUploader.click();\r\n };\r\n\r\n addAttachment = async (event) => {\r\n let file = event.target.files[0];\r\n let reader = new FileReader();\r\n reader.addEventListener(\r\n \"loadend\",\r\n () => {\r\n let body = reader.result.split(\",\")[1];\r\n let name = file.name;\r\n this.createAttachment(body, name);\r\n },\r\n false\r\n );\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n };\r\n\r\n createAttachment = async (body, name, ticketId) => {\r\n let apiPath = \"admin/UploadWebExUsers\";\r\n let attachmentDTO = {\r\n TicketId: this.state.TicketId,\r\n AttachmentBody: body,\r\n FileName: name,\r\n };\r\n await this.setState({ attachmentSubmitted: true });\r\n let response = await apiCalls\r\n .post(apiPath, \"POST\", JSON.stringify(attachmentDTO))\r\n .then((res) => res)\r\n .catch((err) => console.error(err));\r\n if (response.ok) {\r\n await this.setState({\r\n Submission: true,\r\n submitError: false,\r\n });\r\n } else {\r\n await this.setState({\r\n Submission: true,\r\n submitError: true,\r\n });\r\n }\r\n };\r\n\r\n uploadBtn = () => {\r\n return (\r\n \r\n {/* \r\n * When entering an email address, you can either press [Enter] or\r\n mouse click outside the email field to save your data.\r\n \r\n {this.uploadBtn()}*/}\r\n
\r\n\r\n <> {this.gridContent()}\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport SuperLink from '../../components/super_link';\r\nimport PayModal from '../modals/payModal';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { fetchData } from '../../requests/api_calls';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport { Link } from 'react-router-dom';\r\nimport { userIsAdmin } from '../../scripts/helper';\r\nimport * as config from '../../requests/config';\r\nimport * as currency from 'currency-formatter'\r\nimport * as session from '../../scripts/session';\r\n\r\nexport default class CircuitsAlerts extends Component {\r\n\r\n constructor() {\r\n super();\r\n this.state = {\r\n loading: true,\r\n downloading: true\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (userIsAdmin()) this.fetchBillingStat('admin/BillingStat');\r\n }\r\n\r\n fetchBillingStat = (apiPath, errorMsg) => {\r\n fetchData(apiPath).then((data) => {\r\n if (data !== null) {\r\n this.loadData(data);\r\n } else {\r\n this.setState({\r\n CustomerAccountNumber: sessionStorage.getItem('userEnterpriseNumber'),\r\n loading: false\r\n })\r\n }\r\n }).catch(ex => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n loadData = (data) => {\r\n this.setState({\r\n CustomerAccountNumber: data.CustomerAccountNumber,\r\n CustomerName: data.CustomerName,\r\n AccountNumber: data.AccountNumber,\r\n AccountBalance: currency.format(data.AccountBalance, { code: 'USD' }),\r\n Street1BILL: data.Street1BILL,\r\n Street2BILL: data.Street2BILL,\r\n CityBILL: data.CityBILL,\r\n StateBILL: data.StateBILL,\r\n ZipBILL: data.ZipBILL,\r\n InvoiceAmount: currency.format(data.InvoiceAmount, { code: 'USD' }),\r\n InvoiceDueDate: (new Date(data.InvoiceDueDate)).toLocaleDateString(),\r\n InvoiceURL: data.InvoiceURL.trim(),\r\n InvoiceID: data.InvoiceID,\r\n loading: false\r\n });\r\n }\r\n\r\n addressPartTwoSeparator = () => {\r\n if (this.state.Street2BILL) return \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n
\r\n Webex User List
\r\n\r\n this.syncAllUsers(false)}\r\n disabled={this.state.disableDirectorySycnButton}\r\n style={{\r\n marginTop: \"10px\",\r\n marginBottom: \"3px\",\r\n background: this.state.disableDirectorySycnButton\r\n ? \"darkgray\"\r\n : \"\",\r\n }}\r\n >\r\n Directory Sync\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n Last Directory Sync Status: {this.state.directorySyncStatus}\r\n
\r\n \r\n
\r\n {this.state.directorySyncStatusTime}\r\n
\r\n \r\n
{this.state.disableDirectorySycnButtonStatus}
\r\n \r\n Review Progress of Webex Activation:\r\n
\r\n {/* Last Webex Status Update:{this.state.lastSyncedDate}
\r\n \r\n {this.gridToolBar()}\r\n \r\n
*/}\r\n \r\n
*/}\r\n {this.cardContent()}\r\n \r\n \r\n \r\n \r\n
\r\n ;\r\n }\r\n\r\n billingData = () => {\r\n if (this.state.loading) {\r\n return
\r\n {this.state.Street2BILL} {this.addressPartTwoSeparator()}\r\n {this.state.CityBILL}, {this.state.StateBILL} {this.state.ZipBILL}\r\n\r\n ) : '';\r\n let billingMessage = process.env.REACT_APP_BILLING_MESSAGE;\r\n\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {/*
\r\n {this.state.CustomerName}
*/}\r\nAlerts Notifications
\r\n\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n","import React, { useState, useEffect } from \"react\";\r\nimport * as apiCalls from \"../../requests/api_calls\";\r\nimport { Modal } from \"react-bootstrap\";\r\nimport {\r\n Grid,\r\n GridColumn as Column,\r\n GridCell,\r\n} from \"@progress/kendo-react-grid\";\r\nimport \"./circuits.css\";\r\nimport { Button } from \"@progress/kendo-react-buttons\";\r\nimport { Link, withRouter } from \"react-router-dom\";\r\nimport { Item } from \"react-bootstrap/lib/Breadcrumb\";\r\nimport { orderBy } from '@progress/kendo-data-query';\r\nimport { filterBy } from '@progress/kendo-data-query';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\n\r\nfunction CircuitList() {\r\n const [showModal, setShowModal] = useState(false);\r\n const [circuitList, setCircuitList] = useState([\r\n {\r\n LocationAccountNumber: \"\",\r\n LocationName: \"\",\r\n CircuitId: \"\",\r\n CircuitName: \"\",\r\n NIDMAC: \"\",\r\n NotificationEmail: \"\",\r\n CheckMkHostName: \"\",\r\n Status: \"\",\r\n CustomerProductId: \"\",\r\n SpeedDownstream: \"\",\r\n SpeedUpstream: \"\",\r\n TermInMonth: \"\",\r\n },\r\n ]);\r\n const [filteredCircuitList, setFilteredCircuitList] = useState([\r\n {\r\n LocationAccountNumber: \"\",\r\n LocationName: \"\",\r\n CircuitId: \"\",\r\n CircuitName: \"\",\r\n NIDMAC: \"\",\r\n NotificationEmail: \"\",\r\n CheckMkHostName: \"\",\r\n Status: \"\",\r\n CustomerProductId: \"\",\r\n SpeedDownstream: \"\",\r\n SpeedUpstream: \"\",\r\n TermInMonth: \"\",\r\n },\r\n ]);\r\n const [fullListings, setFullListings] = useState([\r\n {\r\n LocationAccountNumber: \"\",\r\n LocationName: \"\",\r\n CircuitId: \"\",\r\n CircuitName: \"\",\r\n NIDMAC: \"\",\r\n NotificationEmail: \"\",\r\n CheckMkHostName: \"\",\r\n Status: \"\",\r\n CustomerProductId: \"\",\r\n SpeedDownstream: \"\",\r\n SpeedUpstream: \"\",\r\n TermInMonth: \"\",\r\n },\r\n ]);\r\n const [loading, setLoading] = useState(false);\r\n const [statusLoading, setStatusLoading] = useState(false);\r\n const [Sort, setSort] = useState([{ field: \"isActive\", dir: \"desc\" }],)\r\n const [editCircuitItem, setEditCircuitItem] = useState({\r\n CircuitId: \"\",\r\n CircuitName: \"\",\r\n NotificationEmail: \"\",\r\n CustomerProductId: \"\",\r\n SpeedDownstream: \"\",\r\n SpeedUpstream: \"\",\r\n TermInMonth: \"\",\r\n CheckMkHostName: \"\"\r\n });\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n\r\n //making api call\r\n fetchCircuits();\r\n }, []);\r\n\r\n const fetchCircuits = async () => {\r\n let apiPath = \"admin/GetCircuitsList\";\r\n\r\n await apiCalls.fetchData(apiPath).then((data) => {\r\n setLoading(true);\r\n if (data) {\r\n data.forEach(async (itm) => {\r\n if (itm.CheckMkHostName && itm.CheckMkHostName !== \"\") {\r\n let obj = await fetchActiveHosts(itm.CheckMkHostName);\r\n let tt = JSON.parse(obj).ResultDetail;\r\n let ti = JSON.parse(tt).state_text;\r\n if (ti === \"OK\") {\r\n itm.isActive = true;\r\n } else {\r\n itm.isActive = false;\r\n }\r\n }\r\n setCircuitList(data);\r\n setFilteredCircuitList(data);\r\n setFullListings(JSON.parse(JSON.stringify(data)));\r\n setLoading(false);\r\n });\r\n } else {\r\n setLoading(false);\r\n }\r\n });\r\n };\r\n\r\n const fetchActiveHosts = async (hostname) => {\r\n setStatusLoading(true);\r\n let apiPath = `admin/CircuitMonitoring/GetCurrentStatusForHost?hostname=${hostname}`;\r\n return await apiCalls.fetchData(apiPath).then(data => {\r\n if (data) {\r\n setStatusLoading(false);\r\n return data;\r\n } else {\r\n setStatusLoading(false);\r\n return null;\r\n }\r\n }).catch(err => console.error(err));\r\n };\r\n\r\n const handleSortChange = (e) => {\r\n setFilteredCircuitList(orderBy(filteredCircuitList, Sort));\r\n setSort(e.sort)\r\n }\r\n\r\n const searchCircuits = (event) => {\r\n let searchText = event.target.value.trim();\r\n let fullDetails = fullListings;\r\n if (searchText !== '') {\r\n searchText = event.target.value;\r\n let services = filterBy(fullDetails, {\r\n logic: 'or',\r\n filters: [\r\n { field: 'CircuitId', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'CircuitName', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Address1', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'City', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'State', operator: 'contains', value: searchText, ignoreCase: true },\r\n { field: 'Zip', operator: 'contains', value: searchText, ignoreCase: true },\r\n ]\r\n });\r\n delayedSearch(services);\r\n }\r\n else {\r\n delayedSearch(fullDetails);\r\n }\r\n }\r\n\r\n const delayedSearch = async (services) => {\r\n // await setLoading(true)\r\n // if (this.timeout) clearTimeout(this.timeout);\r\n // this.timeout = setTimeout(() => {\r\n //this.setState({ UsersList: services, loading: false });\r\n setFilteredCircuitList(services);\r\n //setLoading(false);\r\n //}, settings.searchDelay);\r\n }\r\n\r\n const InterfaceCell = (props) => {\r\n let { CheckMkHostName } = props.dataItem;\r\n if (CheckMkHostName) {\r\n return (\r\n \r\n {this.billingData()}\r\n
\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {gridContent()}\r\n \r\n );\r\n}\r\n\r\nexport default CircuitList;","import React, { Component, Fragment } from 'react';\r\nimport { Chart } from '@progress/kendo-charts-react-wrapper';\r\nimport * as apiCalls from '../../requests/api_calls';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport moment from 'moment';\r\nimport * as helper from '../../scripts/helper';\r\nimport { DataLoadingSpinner } from '../../components/spinners';\r\nimport values from \"object.values\";\r\nimport format from 'string-format';\r\n\r\n//fusion chart\r\nimport ReactFC from \"react-fusioncharts\";\r\nimport FusionCharts from \"fusioncharts\";\r\nimport Column2D from \"fusioncharts/fusioncharts.charts\";\r\nimport FusionTheme from \"fusioncharts/themes/fusioncharts.theme.fusion\";\r\nReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);\r\n\r\nconst defaultDaysAgo = 7;\r\nconst custom = 'custom';\r\nconst toDate = 'toDate';\r\nconst fromDate = 'fromDate';\r\nconst type = 'type';\r\nconst status = 'status';\r\nconst view = 'view';\r\nconst calendarFormat = 'M-D-YYYY';\r\nconst yearMonthDay = 'YYYY-MM-DD';\r\nconst loadTime = 500;\r\n\r\n// Graph colors\r\nconst internal_color = \"rgb(68, 87, 111)\";\r\nconst inbound_color = \"rgb(195, 213, 0)\";\r\nconst outlocal_color = \"rgb(255, 158, 21)\";\r\nconst outLD_color = \"rgb(230, 85, 178)\";\r\nconst international_color = \"rgb(255, 83, 70)\";\r\nconst other_color = 'purple';\r\n\r\nconst setFromDate = (totalDays) => {\r\n let daysAgo = totalDays - 1; // offset by one since including today\r\n return moment().subtract(daysAgo, 'days').startOf('day').format(yearMonthDay);\r\n}\r\n\r\nconst today = () => moment().format(yearMonthDay);\r\n\r\nexport default class CircuitsChart extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filters: {\r\n type: \"ALL_CALLS\",\r\n view: 'CALLS',\r\n status: \"ALL_CALLS\",\r\n fromDate: setFromDate(defaultDaysAgo),\r\n toDate: today(),\r\n dateRangeVisibility: 'hide',\r\n },\r\n dateCounts: {},\r\n apiReturn: false,\r\n loadTimeExpired: false,\r\n legendItem: '',\r\n internalLegend: true,\r\n inboundLegend: true,\r\n outLocalLegend: true,\r\n outLdLegend: true,\r\n internationalLegend: true,\r\n otherLegend: true,\r\n ///\r\n graphData: [],\r\n dateRangeOptions: [],\r\n graphMeasurementsOptions: [],\r\n DateRange: \"-1D:Now\",\r\n Measurement: \"PING.rta\",\r\n XCoords: [],\r\n YCoords: [],\r\n };\r\n this.setDateRange = this.setDateRange.bind(this);\r\n this.setCustomDate = this.setCustomDate.bind(this);\r\n this.setCallFilter = this.setCallFilter.bind(this);\r\n this.handleSetLegend = this.handleSetLegend.bind(this);\r\n };\r\n\r\n componentDidMount() {\r\n //this.fetchDateRange();\r\n //this.fetchGraphMeasurements();\r\n this.fetchGraphData();\r\n }\r\n\r\n fetchDateRange = async () => {\r\n let path = \"Grafana/GetDateRangeForGraph\";\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n //console.log(\"PARSE\", JSON.parse(data));\r\n let parsedData = JSON.parse(data);\r\n let options = parsedData.map(item => )\r\n this.setState({\r\n dateRange: parsedData,\r\n dateRangeOptions: options,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({\r\n dateRange: [],\r\n dateRangeOptions: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n fetchGraphData = async () => {\r\n await this.setState({ loading: true });\r\n let host = 'chc-riverside';\r\n //let measurement = 'PING.rta';\r\n //let dateRange = \"-1D:Now\";\r\n let measurementFriendlyName = '';\r\n let maxDataPoints = 20;\r\n let path = `Grafana/GetDataForGraph?host=${host}&measurement=${this.state.Measurement}&dateRange=${this.state.DateRange}&measuremnetFriendlyName=${measurementFriendlyName}&maxDataPoints=${maxDataPoints}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n if (data) {\r\n let parsedData = JSON.parse(JSON.parse(data));\r\n let copy = JSON.parse(JSON.stringify(parsedData));\r\n //let graphData = JSON.parse(parsedData.graphData)[0];\r\n //console.log(graphData);\r\n\r\n // let graphUrl = JSON.parse(parsedData.graphImageUrl);\r\n\r\n console.log(copy.parsedData);\r\n\r\n let datapoints = JSON.parse(copy.graphData)[0].datapoints;\r\n let xCoords = datapoints.map(itm => itm[1]);\r\n let yCoords = datapoints.map(itm => itm[0].toFixed(2));\r\n \r\n this.setState({\r\n graphData: JSON.parse(parsedData.graphData)[0],\r\n graphUrl: parsedData.graphImageUrl,\r\n coords: [xCoords, yCoords],\r\n loading: false,\r\n XCoords: xCoords,\r\n YCoords: yCoords\r\n\r\n });\r\n\r\n \r\n\r\n\r\n } else {\r\n this.setState({\r\n graphData: [],\r\n loading: false,\r\n });\r\n }\r\n }).catch(err => console.error(err));\r\n }\r\n\r\n getFusionChartConfig = () => {\r\n \r\n const sampleData = [{\"label\":\"2021-09-09T12:26:40-04:00\",\"value\":33.40},{\"label\":\"2021-09-09T12:28:00-04:00\",\"value\":33.9695},{\"label\":\"2021-09-09T12:29:20-04:00\",\"value\":33.985},{\"label\":\"2021-09-09T12:30:40-04:00\",\"value\":0},{\"label\":\"2021-09-09T12:32:00-04:00\",\"value\":34.007},{\"label\":\"2021-09-09T12:33:20-04:00\",\"value\":33.98},{\"label\":\"2021-09-09T12:34:40-04:00\",\"value\":34.042},{\"label\":\"2021-09-09T12:36:00-04:00\",\"value\":33.956},{\"label\":\"2021-09-09T12:37:20-04:00\",\"value\":33.966},{\"label\":\"2021-09-09T12:38:40-04:00\",\"value\":34.03},{\"label\":\"2021-09-09T12:40:00-04:00\",\"value\":33.982},{\"label\":\"2021-09-09T12:41:20-04:00\",\"value\":34.0045},{\"label\":\"2021-09-09T12:42:40-04:00\",\"value\":33.983},{\"label\":\"2021-09-09T12:44:00-04:00\",\"value\":34.017},{\"label\":\"2021-09-09T12:45:20-04:00\",\"value\":33.906},{\"label\":\"2021-09-09T12:46:40-04:00\",\"value\":34.065},{\"label\":\"2021-09-09T12:48:00-04:00\",\"value\":33.957},{\"label\":\"2021-09-09T12:49:20-04:00\",\"value\":33.966499999999996},{\"label\":\"2021-09-09T12:50:40-04:00\",\"value\":34.121},{\"label\":\"2021-09-09T12:52:00-04:00\",\"value\":33.994},{\"label\":\"2021-09-09T12:53:20-04:00\",\"value\":33.945499999999996},{\"label\":\"2021-09-09T12:54:40-04:00\",\"value\":34.007},{\"label\":\"2021-09-09T12:56:00-04:00\",\"value\":33.992},{\"label\":\"2021-09-09T12:57:20-04:00\",\"value\":33.9705},{\"label\":\"2021-09-09T12:58:40-04:00\",\"value\":33.965},{\"label\":\"2021-09-09T13:00:00-04:00\",\"value\":33.896},{\"label\":\"2021-09-09T13:01:20-04:00\",\"value\":33.921},{\"label\":\"2021-09-09T13:02:40-04:00\",\"value\":33.923},{\"label\":\"2021-09-09T13:04:00-04:00\",\"value\":33.903},{\"label\":\"2021-09-09T13:05:20-04:00\",\"value\":33.972},{\"label\":\"2021-09-09T13:06:40-04:00\",\"value\":33.9},{\"label\":\"2021-09-09T13:08:00-04:00\",\"value\":33.909},{\"label\":\"2021-09-09T13:09:20-04:00\",\"value\":33.973},{\"label\":\"2021-09-09T13:10:40-04:00\",\"value\":33.937},{\"label\":\"2021-09-09T13:12:00-04:00\",\"value\":33.957},{\"label\":\"2021-09-09T13:13:20-04:00\",\"value\":33.9595},{\"label\":\"2021-09-09T13:14:40-04:00\",\"value\":33.978},{\"label\":\"2021-09-09T13:16:00-04:00\",\"value\":34.02},{\"label\":\"2021-09-09T13:17:20-04:00\",\"value\":33.951499999999996},{\"label\":\"2021-09-09T13:18:40-04:00\",\"value\":33.991},{\"label\":\"2021-09-09T13:20:00-04:00\",\"value\":33.955},{\"label\":\"2021-09-09T13:21:20-04:00\",\"value\":33.9925},{\"label\":\"2021-09-09T13:22:40-04:00\",\"value\":33.897},{\"label\":\"2021-09-09T13:24:00-04:00\",\"value\":33.904},{\"label\":\"2021-09-09T13:25:20-04:00\",\"value\":33.9}];\r\n \r\n \r\n var chartConfigs = {\r\n type: \"line\", // The chart type\r\n width: \"100%\", // Width of the chart\r\n height: \"100%\", // Height of the chart\r\n dataFormat: \"json\", // Data type\r\n dataSource: {\r\n \r\n // Chart Configuration\r\n chart: {\r\n //Set the chart caption\r\n caption: \"Ping RTA\",\r\n //Set the chart subcaption\r\n subCaption: \"chc-riverside\",\r\n //Set the x-axis name\r\n xAxisName: \"\",\r\n //Set the y-axis name\r\n yAxisName: \"Milli-Seconds\",\r\n //numberSuffix: \"K\",\r\n //Set the theme for your chart\r\n theme: \"fusion\",\r\n\r\n setAdaptiveYMin: true,\r\n\r\n showLabels: false\r\n },\r\n\r\n data: sampleData\r\n }\r\n \r\n \r\n };\r\n\r\n return chartConfigs;\r\n\r\n }\r\n\r\n\r\n filterCallActivity = () => {\r\n if (this.state.filters.fromDate && this.state.filters.toDate) {\r\n let apiPathAndParams = 'admin/CallActivity' + this.callActivityFilterString();\r\n this.fetchCallActivity(apiPathAndParams);\r\n }\r\n }\r\n\r\n callActivityFilterString = () => {\r\n let filters = this.state.filters;\r\n let filterString = '?CallType=' + filters.type;\r\n filterString += '&CallView=' + filters.view;\r\n filterString += '&CallStatus=' + filters.status;\r\n filterString += '&FromDate=' + moment(filters.fromDate).format(yearMonthDay);\r\n filterString += '&ToDate=' + moment(filters.toDate).format(yearMonthDay);\r\n return filterString\r\n }\r\n\r\n fetchCallActivity = (apiPath, errorMsg) => {\r\n this.setState({ apiReturn: false, loadTimeExpired: false });\r\n this.forcedLoadTime();\r\n apiCalls.fetchData(apiPath).then((data) => {\r\n if (data !== null) {\r\n //console.log(\"This is call activity data\",data)\r\n let count = data.reduce((total, currentValue) => {\r\n return total + currentValue.ALL_CALLS;\r\n }, 0);\r\n //console.log(\"Count value\",count)\r\n sessionStorage.setItem(\"callActivityCount\", count)\r\n this.setState({\r\n callActivity: data,\r\n dateCounts: {\r\n internal: this.mapCallActivity(data, 'INTERNAL'),\r\n inbound: this.mapCallActivity(data, 'INBOUND'),\r\n outboundLocal: this.mapCallActivity(data, 'OUTBOUND_LOCAL'),\r\n outboundLd: this.mapCallActivity(data, 'OUTBOUND_LD'),\r\n international: this.mapCallActivity(data, 'INTERNATIONAL'),\r\n other: this.mapCallActivity(data, 'OTHER'),\r\n },\r\n apiReturn: true\r\n });\r\n } else {\r\n this.setState({\r\n callActivity: null,\r\n apiReturn: true\r\n });\r\n };\r\n }).catch(() => {\r\n this.setState({\r\n callActivity: null,\r\n apiReturn: true\r\n });\r\n }\r\n )\r\n }\r\n\r\n mapCallActivity = (data, propertyName) => {\r\n let startDate = moment(this.state.filters.fromDate);\r\n let endDate = moment(this.state.filters.toDate).add(1, 'days');\r\n let totalDays = endDate.diff(startDate, 'days');\r\n let dates = [];\r\n for (var i = 0; i < totalDays; i++) {\r\n dates.unshift(endDate.subtract(1, 'days').format(yearMonthDay));\r\n }\r\n this.setState({ dates: dates });\r\n return dates.map(date => {\r\n let dataItems = data.filter(item => item.CallDate === date);\r\n let dataItem = null;\r\n if (dataItems.length > 0) dataItem = dataItems[0];\r\n return dataItem ? dataItem[propertyName] : 0;\r\n })\r\n }\r\n\r\n setDateRange = (event) => {\r\n let filters = { ...this.state.filters };\r\n if (event.target.value != custom) {\r\n filters.fromDate = event.target.value;\r\n filters.toDate = today();\r\n filters.dateRangeVisibility = 'hide';\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n this.redrawChart(filters);\r\n } else {\r\n filters.fromDate = event.target.value;\r\n filters.toDate = today();\r\n filters.dateRangeVisibility = 'show';\r\n this.setState({ filters: filters });\r\n }\r\n }\r\n\r\n setCallFilter = (event, filterKey) => {\r\n let filters = { ...this.state.filters };\r\n filters[filterKey] = event.target.value;\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n this.redrawChart(filters);\r\n }\r\n\r\n setCustomDate = (event, filterKey) => {\r\n let filters = { ...this.state.filters };\r\n if (event.sender.value()) {\r\n var date = moment(event.sender.value()).format(\"YYYY-MM-DD\");\r\n } else {\r\n var date = null;\r\n }\r\n filters[filterKey] = date;\r\n sessionStorage.setItem('CallActivityFilters', JSON.stringify(filters));\r\n if (this.validCustomDate(filters, filterKey, date)) this.redrawChart(filters);\r\n }\r\n\r\n validCustomDate = (filters, filterKey, date) => {\r\n let fromDate = moment(filterKey == 'fromDate' ? date : this.state.filters.fromDate);\r\n let toDate = moment(filterKey == 'toDate' ? date : this.state.filters.toDate);\r\n if (date === null) {\r\n this.setState({ filters: filters, errorMsg: 'Both dates must be provided to use a custom date range.' });\r\n } else if (fromDate.isBefore(toDate) || fromDate._i == toDate._i) {\r\n this.setState({ filters: filters, errorMsg: null });\r\n var isValid = true;\r\n } else {\r\n this.setState({ filters: filters, errorMsg: 'The start date must be before the end date.' });\r\n var isValid = false;\r\n }\r\n return isValid;\r\n }\r\n\r\n redrawChart = (filters) => {\r\n this.setState({ filters: filters }, () => {\r\n // make API request after state since needed for API query string\r\n this.filterCallActivity();\r\n });\r\n }\r\n\r\n callCounts = (category) => {\r\n let countsArray = this.state.dateCounts[category];\r\n if (this.noResults()) {\r\n return 0;\r\n } else {\r\n let count = countsArray.reduce((total, value) => total + value)\r\n return helper.numberWithDelimiter(count);\r\n }\r\n }\r\n\r\n maxCount = (data) => {\r\n return Math.max(...data); //* 1.05 // adding 5% buffer\r\n }\r\n\r\n chartSeries = () => {\r\n const chartSeriesConfig = (name, data, color) => ({ name: name, data: data, color: color });\r\n //let coords = this.state.graphData.dataPoints;//this.state.dateCounts;\r\n let { coords } = this.state;\r\n //let { datapoints, tags, target } = this.state.graphData;\r\n let seriesList = [\r\n chartSeriesConfig('', coords[1], \"red\"),\r\n ];\r\n\r\n // if (this.state.legendItem === 'internal') {\r\n // return seriesList.filter(item => item.name === 'Internal');\r\n // } else if (this.state.legendItem === 'inbound') {\r\n // return seriesList.filter(item => item.name === 'Inbound');\r\n // } else if (this.state.legendItem === 'out_local') {\r\n // return seriesList.filter(item => item.name === 'Out Local');\r\n // } else if (this.state.legendItem === 'out_ld') {\r\n // return seriesList.filter(item => item.name === 'Out LD');\r\n // } else if (this.state.legendItem === 'international') {\r\n // return seriesList.filter(item => item.name === 'International');\r\n // } else if (this.state.legendItem === 'other') {\r\n // return seriesList.filter(item => item.name === 'Other');\r\n // } else {\r\n // return seriesList;\r\n // }\r\n\r\n return seriesList;\r\n }\r\n\r\n chartOptions = () => {\r\n // let counts = this.state.dateCounts;\r\n // let dates = this.state.dates;\r\n // if (counts != null && dates != null) {\r\n let options = {\r\n legend: {\r\n visible: false\r\n },\r\n seriesDefaults: {\r\n type: \"line\"\r\n },\r\n series: this.chartSeries(),\r\n chartArea: {\r\n height: 360\r\n },\r\n valueAxis: { // y-coord\r\n min: Math.min(...this.state.coords[1]) === 0 ? 0 : Math.min(...this.state.coords[1]),\r\n max: Math.max(...this.state.coords[1]),\r\n line: {\r\n visible: false\r\n },\r\n minorGridLines: {\r\n visible: true\r\n },\r\n labels: {\r\n rotation: \"auto\",\r\n color: '#b3b1b1'\r\n }\r\n },\r\n categoryAxis: { // x-coord\r\n categories: this.state.coords[0],//dates.map(date => moment(date).format(calendarFormat)),\r\n majorGridLines: {\r\n visible: false\r\n },\r\n color: '#FFF'\r\n },\r\n tooltip: {\r\n visible: true,\r\n format: \"Value: {0:N0}\",\r\n template: \"#= series.name # : #= value # on #= kendo.toString(category) # \"\r\n }\r\n }\r\n return options;\r\n //}\r\n }\r\n\r\n noResults = () => (this.state.callActivity == null || this.state.errorMsg);\r\n\r\n splashDisplay = () => {\r\n if (this.state.graphData && this.state.graphUrl) {\r\n return (\r\n \r\n
\r\n\r\n {/* \r\n
\r\n Circuits List
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
*/}\r\n\r\n \r\n
\r\n \r\n
\r\n Summary Widget
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {upCircuits}
\r\n\r\n \r\n
\r\n {downCircuits}
\r\n\r\n \r\n
\r\n {circuitList.length}
\r\n\r\n \r\n
\r\n 0
\r\n\r\n \r\n \r\n \r\n {/* */}\r\n
\r\n */}\r\n \r\n
\r\n Edit Circuit Item
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {/* iframes are not supported by your browser.
\r\n \r\n\r\n
\r\n {this.state.errorMsg || 'No call activity found with the above filters selected.'}\r\n
\r\n )\r\n } else return\r\n {this.state.errorMsg || 'No call activity found with the above filters selected.'}\r\n
\r\n )\r\n } else return\r\n
\r\n )\r\n }\r\n};","import React, { Component } from \"react\";\r\nimport { withRouter, Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport CircuitsAlerts from \"./circuits_alerts\";\r\nimport CircuitList from \"./circuits_list\";\r\nimport CircuitsChart from \"./circuits_chart\";\r\nimport Masonry from \"react-masonry-component\";\r\nimport * as apiCalls from \"../../requests/api_calls\";\r\n\r\nexport default class CircuitsDashboard extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const CircuitsList = this.CircuitsList.bind(this);\r\n const CircuitsChart = this.CircuitsChart.bind(this);\r\n\r\n let widgets = [\r\n {\r\n toggle: \"showFavServices\",\r\n functionName: CircuitsList,\r\n widgetRow: 0,\r\n widgetColumn: 0,\r\n },\r\n {\r\n toggle: \"showCallChart\",\r\n functionName: CircuitsChart,\r\n widgetRow: 0,\r\n widgetColumn: 0,\r\n },\r\n ];\r\n\r\n this.state = {\r\n showFavServices: true,\r\n showCallChart: true,\r\n widgets: widgets,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n //this.fetchCircuits();\r\n }\r\n\r\n fetchCircuits = async () => {\r\n let path = \"admin/GetCircuitsPermission\";\r\n await apiCalls\r\n .fetchData(path)\r\n .then((data) => data)\r\n .catch((err) => console.error(err));\r\n };\r\n\r\n // componentWillReceiveProps = (props) => {\r\n // let state = this.state;\r\n // if (state.hasTicketing !== props.hasTicketing || state.hasDevices !== props.hasDevices || state.ipTrunkingOnly !== props.ipTrunkingOnly) //in the future this may change if user can customize their dashboard\r\n // this.setState({\r\n // hasTicketing: props.hasTicketing,\r\n // hasDevices: props.hasDevices,\r\n // showFavServices: true,\r\n // showActivityHistory: true,\r\n // showStarredTicketingWidget: ((!props.hasTicketing && state.hasTicketing === false) || props.hasTicketing === 'NONE') ? false : true,\r\n // showQuickView: true,\r\n // showDevices: (props.ipTrunkingOnly !== null && props.ipTrunkingOnly !== undefined && props.ipTrunkingOnly === true) ? false : state.showDevices,\r\n // showCallChart: true,\r\n // showTicketingCountsWidget: ((!props.hasTicketing && state.hasTicketing === false) || props.hasTicketing === 'NONE') ? false : true,\r\n // })\r\n // }\r\n\r\n transitionToCallLogDetails = () => {\r\n this.props.history.push(\"/enterpise_call_logs_all\");\r\n };\r\n\r\n CircuitsList = () => {\r\n return \r\n
\r\n Circuits Activity
\r\n {/* Call Details */}\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n await this.setState({ DateRange: e.target.value });\r\n this.fetchGraphData();\r\n }}\r\n value={this.state.DateRange}\r\n >\r\n \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.setCustomDate(event, fromDate) }}\r\n />\r\n
\r\n \r\n \r\n { this.setCustomDate(event, toDate) }}\r\n />\r\n
\r\n \r\n {this.fusionChartContent()}\r\n
\r\n \r\n {/* \r\n
\r\n );\r\n }\r\n}","import React, { Component, useEffect, useState } from \"react\";\r\nimport * as d3 from \"d3\";\r\nimport { setAxis } from \"./components/axis\";\r\nimport { setArea } from \"./components/area\";\r\nimport { setTools } from \"./components/tools\";\r\nimport { setLegend } from \"./components/legend\";\r\n\r\nexport const DataViz = (props) => {\r\n const [data1, setData1] = useState(props.data1);\r\n const [data2, setData2] = useState(props.data2);\r\n const [data] = useState(props.data1.concat(props.data2));\r\n const [dateRange] = useState(props.DateRange)\r\n const [summary] = useState(props.summary);\r\n const [hasRendered, setHasRendered] = useState(false);\r\n //\r\n\r\n useEffect(() => {\r\n if (!hasRendered) { // TODO: trigger re-redner on screen resize\r\n drawViz();\r\n setHasRendered(true);\r\n }\r\n }, [data1, data2, data, summary, hasRendered]);\r\n\r\n const drawViz = () => {\r\n const margin = { top: 10, right: 30, bottom: 20, left: 50 };\r\n const width = 600;\r\n const height = 400;\r\n // append the svg object to the body of the page\r\n const svg = d3\r\n .select(`#${props.id}`)\r\n .append(\"svg\")\r\n .style(\"overflow\", \"visible\")\r\n .attr(\"preserveAspectRatio\", \"xMinYMin meet\")\r\n .attr(\"viewBox\", props.aspect)\r\n .append(\"g\")\r\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n // Determine the maximum and minimum values of all the data points\r\n const maxValue = d3.max(data, (d) => +d.y);\r\n const minValue = d3.min(data, d => d.y !== '' && d.y !== null ? +d.y : undefined);\r\n // Set x-scale\r\n const x = d3\r\n .scaleTime()\r\n .domain(\r\n d3.extent(data, function (d) {\r\n return d.x;\r\n })\r\n )\r\n .range([0, width]);\r\n // Set the y-scale\r\n const y = d3\r\n .scaleLinear()\r\n .domain([0, maxValue])\r\n .range([height - margin.bottom - margin.top, 0])\r\n .nice();\r\n // chart options\r\n let chartOptions = {\r\n svg: svg,\r\n data1: data1,\r\n data2: data2,\r\n data: data,\r\n type: props.Type,\r\n width: width,\r\n height: height,\r\n margin: margin,\r\n x: x,\r\n y: y,\r\n id: props.id,\r\n summary: summary,\r\n deviceName: props.DeviceName,\r\n node: props.Node,\r\n color1: \"#77B6EA\",\r\n color2: \"#545454\",\r\n dateRange: dateRange,\r\n axisLabel: props.axisLabel\r\n }\r\n // set chart axis\r\n setAxis(chartOptions);\r\n // set chart areas and gradients\r\n setArea(chartOptions);\r\n // set chart tools\r\n setTools(chartOptions);\r\n // set chart legend\r\n setLegend(chartOptions);\r\n };\r\n\r\n\r\n return (\r\n \r\n
*/}\r\n \r\n \r\n \r\n
\r\n )\r\n};","import * as d3 from \"d3\";\r\n\r\nexport const setAxis = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, dateRange, axisLabel } = options;\r\n // Create x-Axis\r\n const xAxis = d3\r\n .axisBottom(x)\r\n .tickFormat(d3.timeFormat('%b %d'))\r\n // Create y-Axis\r\n const yAxis = d3\r\n .axisLeft(y)\r\n .ticks(5)\r\n // Append x-Axis\r\n svg\r\n .append('g')\r\n .attr('class', 'x-axis')\r\n .attr('transform', `translate(0, ${height-30})`)\r\n .call(xAxis)\r\n .selectAll(\"text\")\r\n .attr(\"transform\", \"rotate(-45)\")\r\n .attr(\"dx\", \"-.8em\")\r\n .attr(\"dy\", \".15em\")\r\n .style(\"text-anchor\", \"end\");\r\n // Append y-Axis\r\n svg\r\n .append('g')\r\n .attr('class', 'y-axis')\r\n .call(yAxis);\r\n // Add y-axis label\r\n svg\r\n .append(\"text\")\r\n .attr(\"class\", \"y-axis-label\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"x\", -height / 2)\r\n .attr(\"y\", -margin.left / 1.2)\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .text(axisLabel)\r\n .style(\"fill\", \"black\")\r\n .style(\"font-weight\", \"bold\");\r\n // Add vertical gridlines\r\n svg\r\n .selectAll('.vertical-grid-line')\r\n .data(x.ticks())\r\n .enter()\r\n .append('line')\r\n .attr('class', 'vertical-grid-line')\r\n .attr('x1', d => x(d))\r\n .attr('x2', d => x(d))\r\n .attr('y1', 0)\r\n .attr('y2', height)\r\n .attr('stroke', '#ddd')\r\n .attr('stroke-width', 1)\r\n .attr('stroke-dasharray', '5 5');\r\n // Add horizontal gridlines\r\n svg\r\n .selectAll('.horizontal-grid-line')\r\n .data(y.ticks())\r\n .enter()\r\n .append('line')\r\n .attr('class', 'horizontal-grid-line')\r\n .attr('x1', 0)\r\n .attr('x2', width)\r\n .attr('y1', d => y(d))\r\n .attr('y2', d => y(d))\r\n .attr('stroke', '#ddd')\r\n .attr('stroke-width', 1)\r\n .attr('stroke-dasharray', '5 5');\r\n};","import * as d3 from \"d3\";\r\n\r\nexport const setArea = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, dateRange, axisLabel } = options;\r\n if (dateRange == \"-1d\" || dateRange == \"-2d\") {\r\n // Define the threshold value\r\n const thresholdValue = d3.quantile(data1.map(d => parseFloat(d.y)), 0.95);\r\n // Add the area with data\r\n svg\r\n .append(\"path\")\r\n .datum(data1)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", \"url(#gradient)\")\r\n .attr(\"stroke-width\", 2.5)\r\n .attr(\"d\", d3.line()\r\n .defined((d) => { return d.y !== null; }) // define the data points to include\r\n .x((d) => { return x(d.x); })\r\n .y((d) => { return y(d.y); })\r\n );\r\n // Add gradient to the area with data1\r\n const gradient = svg\r\n .append(\"linearGradient\")\r\n .attr(\"id\", \"gradient\")\r\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\r\n .attr(\"x1\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y2\", height)\r\n .selectAll(\"stop\")\r\n .data([\r\n { offset: y(thresholdValue) / height, color: \"violet\" },\r\n { offset: y(thresholdValue) / height, color: color1 }\r\n ])\r\n .join(\"stop\")\r\n .attr(\"offset\", (d) => d.offset)\r\n .attr(\"stop-color\", (d) => d.color);\r\n } else {\r\n // Define the threshold values\r\n const thresholdValue = d3.quantile(data1.map(d => parseFloat(d.y)), 0.95);\r\n // Add the area with data1\r\n svg\r\n .append(\"path\")\r\n .datum(data1)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", \"url(#gradient1)\")\r\n .attr(\"stroke-width\", 2.5)\r\n .attr(\"d\", d3.line()\r\n .defined((d) => { return d.y !== null; }) // define the data points to include\r\n .x((d) => { return x(d.x); })\r\n .y((d) => { return y(d.y); })\r\n );\r\n // Add the area with data2\r\n svg\r\n .append(\"path\")\r\n .datum(data2)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", color2)\r\n .attr(\"stroke-width\", 2.5)\r\n .attr(\"d\", d3.line()\r\n .defined((d) => { return d.y !== null; }) // define the data points to include\r\n .x((d) => { return x(d.x); })\r\n .y((d) => { return y(d.y); })\r\n );\r\n // Add gradient1 to the area with data1\r\n const gradient1 = svg\r\n .append(\"linearGradient\")\r\n .attr(\"id\", \"gradient1\")\r\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\r\n .attr(\"x1\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y2\", height)\r\n .selectAll(\"stop\")\r\n .data([\r\n { offset: y(thresholdValue) / height, color: \"violet\" },\r\n { offset: y(thresholdValue) / height, color: color1 }\r\n ])\r\n .join(\"stop\")\r\n .attr(\"offset\", (d) => d.offset)\r\n .attr(\"stop-color\", (d) => d.color);\r\n }\r\n};","import * as d3 from \"d3\";\r\n\r\nexport const setTools = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, dateRange, axisLabel } = options;\r\n // Tooltip element\r\n const tooltip = d3\r\n .select(`#${id}`)\r\n .append(\"div\")\r\n .style(\"opacity\", 0)\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"background-color\", \"white\")\r\n .style(\"border\", \"solid\")\r\n .style(\"border-width\", \"2px\")\r\n .style(\"border-radius\", \"5px\")\r\n .style(\"padding\", \"5px\");\r\n // Add \"dots\" when hovering datapoints\r\n const dots = svg\r\n .selectAll(\"dot\")\r\n .data(data)\r\n .enter()\r\n .append(\"circle\")\r\n .attr(\"cx\", (d) => {\r\n return x(d.x);\r\n })\r\n .attr(\"cy\", (d) => {\r\n return y(d.y);\r\n })\r\n .attr(\"r\", 5)\r\n .attr(\"opacity\", 0) // set the opacity to 0 to make the circles not visible\r\n .attr(\"fill\", \"#69b3a2\")\r\n .on(\"mouseover\", showTooltip)\r\n .on(\"mouseout\", hideTooltip);\r\n // Create the horizontal line for clear y-axis visibility\r\n const horizontalLine = svg\r\n .append(\"line\")\r\n .attr(\"class\", \"horizontal-line\")\r\n .style(\"stroke-dasharray\", \"5, 5\")\r\n .style(\"stroke\", \"black\")\r\n .style(\"opacity\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", 0);\r\n // Create the vertical line for clear x-axis visibility\r\n const verticalLine = svg\r\n .append(\"line\")\r\n .attr(\"class\", \"vertical-line\")\r\n .style(\"stroke-dasharray\", \"5, 5\")\r\n .style(\"stroke\", \"black\")\r\n .style(\"opacity\", 0)\r\n .attr(\"x1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", height);\r\n // Hide tooltip\r\n function hideTooltip() {\r\n d3.select(this).transition().duration(100).style(\"opacity\", 0);\r\n tooltip.style(\"display\", \"none\");\r\n horizontalLine.style(\"opacity\", 0);\r\n verticalLine.style(\"opacity\", 0);\r\n };\r\n // Show tooltip\r\n function showTooltip(d) {\r\n // Get the mouse position relative to the chart container\r\n const [xPos, yPos] = d3.pointer(d);\r\n d3.select(this).transition().duration(100).style(\"opacity\", 0.7);\r\n // Update the position of the horizontal line\r\n horizontalLine\r\n .style(\"opacity\", 1)\r\n .attr(\"x1\", 0)\r\n .attr(\"x2\", width)\r\n .attr(\"y1\", yPos)\r\n .attr(\"y2\", yPos);\r\n // Update the position of the vertical line\r\n verticalLine\r\n .style(\"opacity\", 1)\r\n .attr(\"x1\", xPos)\r\n .attr(\"x2\", xPos)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", height);\r\n if (d) {\r\n // Display the tooltip if hovering datapoint\r\n tooltip\r\n .attr(\"pointer-events\", \"none\")\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"opacity\", 1)\r\n .style(\"height\", \"120px\")\r\n .style(\"width\", \"200px\")\r\n .style(\"left\", \"213.554px\")\r\n .style(\"top\", \"9.8574px\")\r\n .style(\"padding\", \"5px\")\r\n .style(\"background\", \"lightgrey\")\r\n .style(\"border\", \"1px solid #2b3d54\")\r\n .style(\"border-radius\", \"5%\")\r\n .style(\"color\", \"#2b3d54\")\r\n .style(\"display\", \"inline-block\")\r\n .html(\r\n `\r\n \r\n
\r\n Mbps: ${d.target.__data__.y}
Date: ${d.target.__data__.x}
Direction: ${d.target.__data__.Field}
`\r\n );\r\n } else {\r\n tooltip.style(\"opacity\", 0);\r\n }\r\n };\r\n};\r\n","import * as d3 from \"d3\";\r\n\r\nexport const setLegend = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, dateRange, axisLabel } = options;\r\n if (summary) {\r\n // Create legend\r\n let legend = d3\r\n .select(`#${id}-legend`)\r\n .append('div');\r\n let legend_table = legend\r\n .append('p')\r\n .append('table')\r\n .attr('class', 'table table-condensed')\r\n .attr('style', 'width: ' + 100 + '%;');\r\n // Append the legend body\r\n let tbody = legend_table\r\n .append('tbody');\r\n // Append the legend headers\r\n let thead = legend_table\r\n .append('thead');\r\n let column_headers = ['Measurement', 'Min', 'Max', 'Last', '95th'];\r\n let tr = thead.append('tr');\r\n tr.selectAll('td')\r\n .data(column_headers)\r\n .enter()\r\n .append('td')\r\n .append('strong')\r\n .text((d) => { return d; });\r\n // Add rows to legend body\r\n tr = tbody.append('tr');\r\n tr.append('td').text(axisLabel)\r\n tr.append('td').text(summary.min + \" Mbps\");\r\n tr.append('td').text(summary.max + \" Mbps\");\r\n tr.append('td').text(summary.last + \" Mbps\");\r\n tr.append('td').append('div').attr('style', 'background-color: ' + \"violet\" + ';width: 8px; height: 8px; vertial-align: middle; border-radius: 50%');//.text(threshold);\r\n }\r\n};\r\n","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { DataViz } from './d3-line-chart';\r\n\r\nexport default class ExpandCircuitChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n DateRange: this.props.DateRange,\r\n Measurement: this.props.Measurement,\r\n Type: this.props.Type,\r\n AggWindow: this.props.AggWindow,\r\n };\r\n }\r\n\r\n testChart = () => {\r\n if (this.props.DateRange == \"-1d\" || this.props.DateRange == \"-2d\") {\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 cardContent = () => {\r\n if (this.props.graphData && this.props.graphData.length > 0 && !this.state.loading) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n } else {\r\n return \r\n
\r\n {this.testChart()}\r\n \r\n
\r\n \r\n {\r\n let { value } = e.target;\r\n let Type = this.state.Type;\r\n let AggWindow = \"D\";\r\n if (Type !== \"upDown\") {\r\n if (value == \"-7d\") {\r\n Type = `${this.state.Measurement}_${this.state.Type},avg_${this.state.Type}`;\r\n AggWindow = \"W\";\r\n } else if (value == \"-30d\") {\r\n Type = `${this.state.Measurement}_${this.state.Type},avg_${this.state.Type}`;\r\n AggWindow = \"M\";\r\n } else if (value == \"-365d\") {\r\n Type = `${this.state.Measurement}_${this.state.Type},avg_${this.state.Type}`;\r\n AggWindow = \"Y\";\r\n } else {\r\n Type = this.props.defaultType;\r\n AggWindow = \"D\";\r\n }\r\n }\r\n await this.setState({ loading: true, DateRange: e.target.value, Type: Type, AggWindow: AggWindow });\r\n await this.props.updateGraphUrl(this.state.DateRange, Type, this.state.AggWindow, this.state.Measurement);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.DateRange}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n {this.state.DateRange === \"-1d\" || this.state.DateRange === \"-2d\" || this.props.Type === \"upDown\" ? null : \r\n \r\n
}\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport FullCircuitsGraph from './full_graph';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { DataViz } from './d3-line-chart';\r\n\r\nexport default class CircuitsGraph extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n DateRange: this.props.DateRange,\r\n Measurement: this.props.measurement,\r\n Type: this.props.type,\r\n AggWindow: this.props.aggWindow,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.updateGraphUrl(this.state.DateRange, this.state.Type, this.state.AggWindow, this.state.Measurement);\r\n }\r\n\r\n componentWillReceiveProps() {\r\n if (\r\n this.state.DateRange !== this.props.DateRange ||\r\n this.state.Type !== this.props.type ||\r\n this.state.AggWindow !== this.props.aggWindow ||\r\n this.state.Measurement !== this.props.measurement\r\n ) {\r\n this.setState({\r\n DateRange: this.props.DateRange,\r\n Type: this.props.type,\r\n AggWindow: this.props.aggWindow,\r\n Measurement: this.props.measurement\r\n });\r\n }\r\n }\r\n\r\n cardContent = () => {\r\n if (this.props.graphData && this.props.graphData.length > 0 && !this.state.loading) {\r\n return (\r\n \r\n
\r\n {this.cardContent()}\r\n \r\n
\r\n )\r\n } else {\r\n return \r\n
\r\n {this.testChart()}\r\n \r\n
\r\n \r\n {\r\n let { value } = e.target;\r\n let Type = this.props.type;\r\n let AggWindow = \"D\";\r\n if (Type !== \"upDown\") {\r\n if (value == \"-7d\") {\r\n Type = `${this.state.Measurement}_${this.props.type},avg_${this.props.type}`;\r\n AggWindow = \"W\";\r\n } else if (value == \"-30d\") {\r\n Type = `${this.state.Measurement}_${this.props.type},avg_${this.props.type}`;\r\n AggWindow = \"M\";\r\n } else if (value == \"-365d\") {\r\n Type = `${this.state.Measurement}_${this.props.type},avg_${this.props.type}`;\r\n AggWindow = \"Y\";\r\n } else {\r\n Type = this.props.defaultType;\r\n AggWindow = \"D\";\r\n }\r\n }\r\n await this.setState({ loading: true, DateRange: e.target.value, Type: Type, AggWindow: AggWindow });\r\n await this.props.updateGraphUrl(this.state.DateRange, Type, this.state.AggWindow, this.state.Measurement);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.DateRange}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {this.state.DateRange === \"-1d\" || this.state.DateRange === \"-2d\" || this.props.type === \"upDown\" ? null : \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\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n {this.props.GraphTitle}\r\n
\r\n
\r\n {this.props.GraphTitle}\r\n 0 ? \"pointer\" : \"not-allowed\"\r\n }}\r\n disabled={this.props.graphData && this.props.graphData.length > 0 ? false : true}\r\n onClick={() => {\r\n this.setState({ showModal: true });\r\n }}\r\n >[Expand]\r\n
\r\n \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 * as d3 from \"d3\";\r\n\r\nexport const setAxis = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, } = options;\r\n // Create x-Axis\r\n const xAxis = d3\r\n .axisBottom(x)\r\n .tickFormat(d3.timeFormat('%b %d'))\r\n // Create y-Axis\r\n const yAxis = d3\r\n .axisLeft(y)\r\n .ticks(5)\r\n // Append x-Axis\r\n svg\r\n .append('g')\r\n .attr('class', 'x-axis')\r\n .attr('transform', `translate(0, ${height-30})`) // change this line\r\n .call(xAxis)\r\n .selectAll(\"text\")\r\n .attr(\"transform\", \"rotate(-45)\")\r\n .attr(\"dx\", \"-.8em\")\r\n .attr(\"dy\", \".15em\")\r\n .style(\"text-anchor\", \"end\");\r\n // Append y-Axis\r\n svg\r\n .append('g')\r\n .attr('class', 'y-axis')\r\n .call(yAxis);\r\n // Set the y-axis text\r\n const yAxisText = () => {\r\n if (type === \"avg\") {\r\n return \"Average Bandwith (Mbps)\";\r\n } else if (type === \"min\") {\r\n return \"Minimum Bandwith (Mbps)\";\r\n } else {\r\n return \"Maximum Bandwith (Mbps)\";\r\n }\r\n }\r\n // Add y-axis label\r\n svg\r\n .append(\"text\")\r\n .attr(\"class\", \"y-axis-label\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"x\", -height / 2)\r\n .attr(\"y\", -margin.left / 1.2)\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .text(yAxisText())\r\n .style(\"fill\", \"black\")\r\n .style(\"font-weight\", \"bold\");\r\n // Add vertical gridlines\r\n svg\r\n .selectAll('.vertical-grid-line')\r\n .data(x.ticks())\r\n .enter()\r\n .append('line')\r\n .attr('class', 'vertical-grid-line')\r\n .attr('x1', d => x(d))\r\n .attr('x2', d => x(d))\r\n .attr('y1', 0)\r\n .attr('y2', height)\r\n .attr('stroke', '#ddd')\r\n .attr('stroke-width', 1)\r\n .attr('stroke-dasharray', '5 5');\r\n // Add horizontal gridlines\r\n svg\r\n .selectAll('.horizontal-grid-line')\r\n .data(y.ticks())\r\n .enter()\r\n .append('line')\r\n .attr('class', 'horizontal-grid-line')\r\n .attr('x1', 0)\r\n .attr('x2', width)\r\n .attr('y1', d => y(d))\r\n .attr('y2', d => y(d))\r\n .attr('stroke', '#ddd')\r\n .attr('stroke-width', 1)\r\n .attr('stroke-dasharray', '5 5');\r\n};","import * as d3 from \"d3\";\r\n\r\nexport const setArea = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2, } = options;\r\n if (summary && summary.length > 0) {\r\n // Define the threshold value\r\n const thresholdValue1 = d3.quantile(data1.map(d => parseFloat(d.value)), 0.95);\r\n const thresholdValue2 = d3.quantile(data2.map(d => parseFloat(d.value)), 0.95);\r\n // Add the area with data1\r\n svg\r\n .append(\"path\")\r\n .datum(data1)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", \"url(#gradient1)\")\r\n .attr(\"stroke-width\", 2.5)\r\n .attr(\"d\", d3.line()\r\n .defined((d) => { return d.value !== null; }) // define the data points to include\r\n .x((d) => { return x(d.date); })\r\n .y((d) => { return y(d.value); })\r\n );\r\n // Add the area with data2\r\n svg\r\n .append(\"path\")\r\n .datum(data2)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", \"url(#gradient2)\")\r\n .attr(\"stroke-width\", 2.5)\r\n .attr(\"d\", d3.line()\r\n .defined((d) => { return d.value !== null; }) // define the data points to include\r\n .x((d) => { return x(d.date); })\r\n .y((d) => { return y(d.value); })\r\n );\r\n // Add gradient1 to the area with data1\r\n const gradient1 = svg\r\n .append(\"linearGradient\")\r\n .attr(\"id\", \"gradient1\")\r\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\r\n .attr(\"x1\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y2\", height)\r\n .selectAll(\"stop\")\r\n .data([\r\n { offset: y(thresholdValue1) / height, color: \"violet\" },\r\n { offset: y(thresholdValue1) / height, color: color1 }\r\n ])\r\n .join(\"stop\")\r\n .attr(\"offset\", (d) => d.offset)\r\n .attr(\"stop-color\", (d) => d.color);\r\n // Add gradient2 to the area with data2\r\n const gradient2 = svg\r\n .append(\"linearGradient\")\r\n .attr(\"id\", \"gradient2\")\r\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\r\n .attr(\"x1\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y2\", height)\r\n .selectAll(\"stop\")\r\n .data([\r\n { offset: y(thresholdValue2) / height, color: \"#05fc58\" },\r\n { offset: y(thresholdValue2) / height, color: color2 }\r\n ])\r\n .join(\"stop\")\r\n .attr(\"offset\", (d) => d.offset)\r\n .attr(\"stop-color\", (d) => d.color);\r\n }\r\n};","import * as d3 from \"d3\";\r\n\r\nexport const setTools = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2 } = options;\r\n // Tooltip element\r\n const tooltip = d3\r\n .select(`#${id}`)\r\n .append(\"div\")\r\n .style(\"opacity\", 0)\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"background-color\", \"white\")\r\n .style(\"border\", \"solid\")\r\n .style(\"border-width\", \"2px\")\r\n .style(\"border-radius\", \"5px\")\r\n .style(\"padding\", \"5px\");\r\n // Add \"dots\" when hovering datapoints\r\n const dots = svg\r\n .selectAll(\"dot\")\r\n .data(data)\r\n .enter()\r\n .append(\"circle\")\r\n .attr(\"cx\", (d) => {\r\n return x(d.date);\r\n })\r\n .attr(\"cy\", (d) => {\r\n return y(d.value);\r\n })\r\n .attr(\"r\", 5)\r\n .attr(\"opacity\", 0) // set the opacity to 0 to make the circles not visible\r\n .attr(\"fill\", \"#69b3a2\")\r\n .on(\"mouseover\", showTooltip)\r\n .on(\"mouseout\", hideTooltip);\r\n // Create the horizontal line for clear y-axis visibility\r\n const horizontalLine = svg\r\n .append(\"line\")\r\n .attr(\"class\", \"horizontal-line\")\r\n .style(\"stroke-dasharray\", \"5, 5\")\r\n .style(\"stroke\", \"black\")\r\n .style(\"opacity\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", 0);\r\n // Create the vertical line for clear x-axis visibility\r\n const verticalLine = svg\r\n .append(\"line\")\r\n .attr(\"class\", \"vertical-line\")\r\n .style(\"stroke-dasharray\", \"5, 5\")\r\n .style(\"stroke\", \"black\")\r\n .style(\"opacity\", 0)\r\n .attr(\"x1\", 0)\r\n .attr(\"x2\", 0)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", height);\r\n // Hide tooltip\r\n function hideTooltip() {\r\n d3.select(this).transition().duration(100).style(\"opacity\", 0);\r\n tooltip.style(\"display\", \"none\");\r\n horizontalLine.style(\"opacity\", 0);\r\n verticalLine.style(\"opacity\", 0);\r\n };\r\n // Show tooltip\r\n function showTooltip(d) {\r\n // Get the mouse position relative to the chart container\r\n const [xPos, yPos] = d3.pointer(d);\r\n d3.select(this).transition().duration(100).style(\"opacity\", 0.7);\r\n // Update the position of the horizontal line\r\n horizontalLine\r\n .style(\"opacity\", 1)\r\n .attr(\"x1\", 0)\r\n .attr(\"x2\", width)\r\n .attr(\"y1\", yPos)\r\n .attr(\"y2\", yPos);\r\n // Update the position of the vertical line\r\n verticalLine\r\n .style(\"opacity\", 1)\r\n .attr(\"x1\", xPos)\r\n .attr(\"x2\", xPos)\r\n .attr(\"y1\", 0)\r\n .attr(\"y2\", height);\r\n if (d) {\r\n // Display the tooltip if hovering datapoint\r\n tooltip\r\n .attr(\"pointer-events\", \"none\")\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"opacity\", 1)\r\n .style(\"height\", \"120px\")\r\n .style(\"width\", \"200px\")\r\n .style(\"left\", xPos + margin.left - 80 + \"px\")\r\n .style(\"top\", yPos + margin.top - 10 + \"px\")\r\n .style(\"padding\", \"5px\")\r\n .style(\"background\", \"lightgrey\")\r\n .style(\"border\", \"1px solid #2b3d54\")\r\n .style(\"border-radius\", \"5%\")\r\n .style(\"color\", \"#2b3d54\")\r\n .style(\"display\", \"inline-block\")\r\n .html(\r\n `\r\n \r\n
\r\n Mbps: ${d.target.__data__.value}
Date: ${d.target.__data__.date}
Direction: ${d.target.__data__.direction}
`\r\n );\r\n } else {\r\n tooltip.style(\"opacity\", 0);\r\n }\r\n };\r\n};\r\n","import * as d3 from \"d3\";\r\n\r\nexport const setLegend = (options) => {\r\n let { svg, data1, data2, data, type, height, width, margin, x, y, id, summary, deviceName, node, color1, color2 } = options;\r\n if (summary) {\r\n // Create legend\r\n let legend = d3\r\n .select(`#${id}-legend`)\r\n .append('div');\r\n let legend_table = legend\r\n .append('p')\r\n .append('table')\r\n .attr('class', 'table table-condensed')\r\n .attr('style', 'width: ' + 700 + 'px;');\r\n // Append the legend body\r\n let tbody = legend_table\r\n .append('tbody');\r\n // Append the legend headers\r\n let thead = legend_table\r\n .append('thead');\r\n let column_headers = ['', 'Host', 'Measurement', 'Min', 'Max', 'Last', '95th'];\r\n let tr = thead.append('tr');\r\n tr.selectAll('td')\r\n .data(column_headers)\r\n .enter()\r\n .append('td')\r\n .append('strong')\r\n .text((d) => { return d; });\r\n // Add rows to legend body\r\n for (let i = 0; i < summary.length; ++i) {\r\n if (summary[i]) {\r\n let color = i === 0 ? color1 : color2;\r\n let device = deviceName && deviceName !== \"\" ? deviceName : node;//props.HostName;\r\n let legendMeasurement = i === 0 ? \"Throughput Received\" : \"Throughput Transmitted\";\r\n let legendField = `latency (${type})`;\r\n let outlierColor = i === 0 ? \"violet\" : \"#05fc58\";\r\n //let threshold = i === 0 ? thresholdValue1 : thresholdValue2;\r\n tr = tbody.append('tr');\r\n tr.append('td').append('div').attr('style', 'background-color: ' + color + ';width: 8px; height: 8px; vertial-align: middle;');\r\n tr.append('td').text(device);\r\n tr.append('td').text(legendMeasurement)\r\n // tr.append('td').text(legendField);\r\n tr.append('td').text(summary[i].min + \" Mbps\");\r\n tr.append('td').text(summary[i].max + \" Mbps\");\r\n tr.append('td').text(summary[i].last + \" Mbps\");\r\n tr.append('td').append('div').attr('style', 'background-color: ' + outlierColor + ';width: 8px; height: 8px; vertial-align: middle; border-radius: 50%');//.text(threshold);\r\n }\r\n }\r\n }\r\n};\r\n","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { DataViz } from './d3-line-chart';\r\n\r\nexport default class ExpandDeviceChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n\r\n this.state = {\r\n DateRange: this.props.DateRange,\r\n Type: this.props.Type,\r\n AggWindow: this.props.AggWindow,\r\n Node: this.props.Node\r\n };\r\n }\r\n\r\n cardContent = () => {\r\n if (this.props.graphData && this.props.graphData.length > 0 && !this.state.loading) {\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 let { value } = e.target;\r\n let AggWindow = \"D\";\r\n if (value == \"-7d\") {\r\n AggWindow = \"W\";\r\n } else if (value == \"-30d\") {\r\n AggWindow = \"M\";\r\n } else if (value == \"-365d\") {\r\n AggWindow = \"Y\";\r\n } else {\r\n AggWindow = \"D\"; // FOR NOW CHANGED TO WEEK AGGREGATE WINDOW, AS NO DATA IN D (5 minute increments)\r\n }\r\n //\r\n await this.setState({ loading: true, DateRange: value, AggWindow: AggWindow });\r\n await this.props.updateGraphUrl(value, AggWindow, this.state.Type);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.DateRange}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n {this.state.AggWindow !== \"D\" ?\r\n \r\n {\r\n let { value } = e.target;\r\n let AggWindow = \"D\";\r\n if (value == \"AVG\") {\r\n this.setState({ Type: 'avg' });\r\n }\r\n else if (value == \"MIN\") {\r\n this.setState({ Type: 'min' });\r\n } else {\r\n this.setState({ Type: 'max' });\r\n }\r\n await this.setState({ loading: true, Type: value });\r\n await this.props.updateGraphUrl(this.state.DateRange, this.state.AggWindow, this.state.Type);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.Type}\r\n >\r\n \r\n \r\n \r\n \r\n
: null\r\n }\r\n \r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\nimport { DataViz } from './d3-line-chart';\r\nimport { Modal } from 'react-bootstrap';\r\nimport ExpandDeviceChart from \"./full_device_graph\";\r\n\r\nexport default class DeviceChart extends Component {// thack@crownbattery.com 3100003461-01\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n DateRange: this.props.DateRange,\r\n Type: this.props.type,\r\n AggWindow: this.props.aggWindow,\r\n Node: this.props.Node\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.updateGraphUrl(this.state.DateRange, this.state.AggWindow, this.state.Type, this.state.Node);\r\n }\r\n\r\n componentWillReceiveProps() {\r\n if (\r\n this.state.DateRange !== this.props.DateRange ||\r\n this.state.Type !== this.props.type ||\r\n this.state.AggWindow !== this.props.aggWindow ||\r\n this.state.Node !== this.props.Node\r\n ) {\r\n this.setState({\r\n DateRange: this.props.DateRange,\r\n Type: this.props.type,\r\n AggWindow: this.props.aggWindow,\r\n Node: this.props.Node\r\n });\r\n }\r\n }\r\n\r\n cardContent = () => {\r\n if (this.props.graphData && this.props.graphData.length > 0 && !this.state.loading) {\r\n return (\r\n \r\n
\r\n {this.cardContent()}\r\n \r\n
\r\n )\r\n } else {\r\n return \r\n
\r\n \r\n
\r\n \r\n {\r\n let { value } = e.target;\r\n let AggWindow = \"D\";\r\n if (value == \"-7d\") {\r\n AggWindow = \"W\";\r\n } else if (value == \"-30d\") {\r\n AggWindow = \"M\";\r\n } else if (value == \"-365d\") {\r\n AggWindow = \"Y\";\r\n } else {\r\n AggWindow = \"D\"; // FOR NOW CHANGED TO WEEK AGGREGATE WINDOW, AS NO DATA IN D (5 minute increments)\r\n }\r\n //\r\n await this.setState({ loading: true, DateRange: value, AggWindow: AggWindow });\r\n await this.props.updateGraphUrl(value, AggWindow, this.state.Type);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.DateRange}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n {this.state.AggWindow !== \"D\" ?\r\n \r\n {\r\n let { value } = e.target;\r\n let AggWindow = \"D\";\r\n if (value == \"AVG\") {\r\n this.setState({ Type: 'avg' });\r\n }\r\n else if (value == \"MIN\") {\r\n this.setState({ Type: 'min' });\r\n } else {\r\n this.setState({ Type: 'max' });\r\n }\r\n await this.setState({ loading: true, Type: value });\r\n await this.props.updateGraphUrl(this.state.DateRange, this.state.AggWindow, this.state.Type);\r\n await this.setState({ loading: false });\r\n }}\r\n value={this.state.Type}\r\n >\r\n \r\n \r\n \r\n \r\n
: null\r\n }\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {this.props.GraphTitle} \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.cardContent()}\r\n
\r\n )\r\n }\r\n}","import React, { useState, useEffect, Component } from 'react';\r\nimport * as apiCalls from \"../../../requests/api_calls\";\r\nimport DeviceChart from '../../circuitDevices/graphing/device_graph_component';\r\n\r\nexport default class DevicesComp extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n dashView: \"\",\r\n idx: this.props.idx,\r\n HostName: this.props.HostName,\r\n DeviceName: this.props.DeviceName,\r\n CircuitName: this.props.CircuitName,\r\n //\r\n avgData: [],\r\n avgDateRange: \"-1d\",\r\n avgAggWindow: \"D\",\r\n //\r\n maxData: [],\r\n maxDateRange: \"-1d\",\r\n maxAggWindow: \"D\",\r\n //\r\n minData: [],\r\n minDateRange: \"-1d\",\r\n minAggWindow: \"D\",\r\n type: \"\",\r\n //\r\n node: this.props.Node,\r\n }\r\n }\r\n\r\n packageData = (data, type, time, direction = \"\") => {\r\n let arm = [];\r\n let summary = null;\r\n try {\r\n if (data) {\r\n let graphData = JSON.parse(data.Body.GetGraphInfoForDeviceThroughputSplitRtaResult);\r\n let arr = JSON.parse(graphData.JSONData);\r\n summary = JSON.parse(graphData.JSONData).summary;\r\n if (time !== \"D\") {\r\n let parse = upperCaseFirstLetter(type);\r\n arr[`${parse}`].forEach((itm) => {\r\n if (itm) {\r\n if (direction === \"in\") {\r\n arm.push({ date: new Date(itm.x), value: itm.y, direction: \"Throughput Received\" });\r\n } else {\r\n arm.push({ date: new Date(itm.x), value: itm.y, direction: \"Throughput Transmitted\" });\r\n }\r\n }\r\n });\r\n } else {\r\n arr[`data`].forEach((itm) => {\r\n if (itm) {\r\n if (direction === \"in\") {\r\n arm.push({ date: new Date(itm.x), value: itm.y, direction: \"Throughput Received\" });\r\n } else {\r\n arm.push({ date: new Date(itm.x), value: itm.y, direction: \"Throughput Transmitted\" });\r\n }\r\n }\r\n });\r\n }\r\n }\r\n } catch (error) {\r\n console.error(`packageData() error: ${error}`)\r\n }\r\n return [arm, summary];\r\n\r\n }\r\n\r\n fetchGraphData = async (range, host, aggregateWindow, type) => {\r\n let test = `${type}_br`\r\n if (aggregateWindow == \"D\") {\r\n test = \"bandwidth-received\"\r\n }\r\n let brPackage;\r\n let btPackage;\r\n let brSummary;\r\n let btSummary;\r\n // thack@crownbattery.com 3100003461-01\r\n let path = `admin/CircuitDevices/GetGraphInfoForDeviceThroughSplitRta?range=${range}&field=${test}&node=${this.state.node}&hostname=${host}&aggregateWindow=${aggregateWindow}`;\r\n await apiCalls\r\n .fetchData(path).then(data => {\r\n let packagedData = this.packageData(data, type, aggregateWindow, \"in\");\r\n brPackage = packagedData[0];\r\n brSummary = packagedData[1];\r\n })\r\n .catch(err => console.error(err));\r\n test = `${type}_bt`\r\n if (aggregateWindow == \"D\") {\r\n test = \"bandwidth-transmitted\"\r\n }\r\n path = `admin/CircuitDevices/GetGraphInfoForDeviceThroughSplitRta?range=${range}&field=${test}&node=${this.state.node}&hostname=${host}&aggregateWindow=${aggregateWindow}`;\r\n await apiCalls.fetchData(path).then(data => {\r\n let packagedData = this.packageData(data, type, aggregateWindow, \"out\");\r\n btPackage = packagedData[0];\r\n btSummary = packagedData[1];\r\n })\r\n .catch(err => console.error(err));\r\n if (type == \"avg\") {\r\n this.setState({ avgData: [brPackage, btPackage], avgSumm: [brSummary, btSummary] });\r\n }\r\n if (type == \"max\") {\r\n this.setState({ maxData: [brPackage, btPackage], maxSumm: [brSummary, btSummary] });\r\n }\r\n if (type == \"min\") {\r\n this.setState({ minData: [brPackage, btPackage], minSumm: [brSummary, btSummary] });\r\n }\r\n };\r\n\r\n updateGraphUrl = async (dateRange, aggWindow, type) => {\r\n if (type == \"avg\") {\r\n await this.setState({\r\n avgDateRange: dateRange,\r\n avgAggWindow: aggWindow,\r\n type: type,\r\n avgData: [],\r\n });\r\n this.fetchGraphData(this.state.avgDateRange, this.state.HostName, this.state.avgAggWindow, type, this.state.node);\r\n }\r\n if (type == \"max\") {\r\n await this.setState({\r\n maxDateRange: dateRange,\r\n maxAggWindow: aggWindow,\r\n type: type,\r\n maxData: [],\r\n });\r\n this.fetchGraphData(this.state.maxDateRange, this.state.HostName, this.state.maxAggWindow, type, this.state.node);\r\n }\r\n if (type == \"min\") {\r\n await this.setState({\r\n minDateRange: dateRange,\r\n minAggWindow: aggWindow,\r\n type: type,\r\n minData: [],\r\n });\r\n this.fetchGraphData(this.state.minDateRange, this.state.HostName, this.state.minAggWindow, type, this.state.node);\r\n }\r\n }\r\n\r\n displayGraph = () => {\r\n switch (this.state.type) {\r\n case \"max\":\r\n return (\r\n \r\n {this.props.GraphTitle}\r\n
\r\n
\r\n {this.props.GraphTitle}\r\n 0 ? \"pointer\" : \"not-allowed\"\r\n }}\r\n disabled={this.props.graphData && this.props.graphData.length > 0 ? false : true}\r\n onClick={() => {\r\n this.setState({ showModal: true });\r\n }}\r\n >[Expand]\r\n
\r\n \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 return \r\n
\r\n {`${this.state.CircuitName}`}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* {this.deviceGraphs()} */}\r\n \r\n {this.state.successMessage}
\r\n )\r\n }\r\n\r\n if (this.state.validationError === \"\") {\r\n return;\r\n } else {\r\n return (\r\n{this.state.validationError}
\r\n )\r\n }\r\n }\r\n\r\n gridContent = () => {\r\n let { UserList, Sort } = this.state;\r\n if (UserList && UserList.length > 0) {\r\n return (\r\nNo Available Data
\r\n }\r\n }\r\n\r\n handleSortChange = (e) => {\r\n this.setState({\r\n UserList: orderBy(this.state.UserList, e.sort),\r\n Sort: e.sort\r\n });\r\n }\r\n\r\n getBodyContent() {\r\n let loading = this.state.loading;\r\n if (loading) {\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Manage MFA Users\r\n {this.state.GroupAdminBanner ? this.state.GroupAdminBanner : null} \r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {this.getBodyContent()}\r\n {this.errorContent()}\r\n
\r\n \r\n
\r\n \r\n this.resetUserMFA(this.state.selectedUser)}>Yes\r\n this.setState({ showConfirmation: false })}>No\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n showSideBar: state.reducer.showSideBar,\r\n hasDevices: state.reducer.hasDevices,\r\n smallLogo: state.reducer.customSmallLogo,\r\n largeLogo: state.reducer.customLargeLogo,\r\n };\r\n};\r\n\r\nexport default withRouter(connect(mapStateToProps)(Sidebar));\r\n","import React, { Component } from 'react';\nimport { version } from './../requests/config';\n\nexport default class Footer extends Component {\n render() {\n return (\n \r\n \r\n 
\r\n \r\n {dropDownMenu()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \n
\n )\n }\n}","import React, { Component } from \"react\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport * as config from \"../requests/config\";\r\nimport * as helper from \"../scripts/helper\";\r\nimport * as session from \"../scripts/session\";\r\nimport { parse } from \"query-string\";\r\nimport momentumLogoWhite from \"../images/momentum_logo_white.svg\";\r\nimport { DataLoadingSpinner } from \"../components/spinners\";\r\nimport \"@progress/kendo-theme-default/dist/all.css\";\r\nimport \"../css/bootstrap.css\";\r\nimport \"../css/app.css\";\r\nimport \"../css/spinner.css\";\r\n\r\nclass Login extends Component {\r\n constructor() {\r\n super();\r\n this.loadingLogo = null;\r\n this.state = {\r\n loading: true,\r\n Logo: momentumLogoWhite,\r\n auth: null,\r\n componentMounted: false,\r\n loginHint: ''\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const domain = helper.getDomain();\r\n helper.setSiteTitleFromDomain();\r\n if (helper.IsWholesaleDomain(domain)) {\r\n // this.getCustomizations(domain); \r\n } else {\r\n this.setState({ loading: false });\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n let loginHint = '';\r\n if (helper.urlIncludes(\"username=\")) {\r\n loginHint = \"&login_hint=\" + parse(window.location.search).username;\r\n sessionStorage.setItem('loginUserName', parse(window.location.search).username);\r\n // strip params to initiate login from /session with no params (to match Azure whitelist)\r\n // this.props.history.push(\"/session\");\r\n }\r\n if (localStorage.mspLoginData) {\r\n this.setState({\r\n loading: false\r\n })\r\n }\r\n this.setState({ loginHint: loginHint, componentMounted: true });\r\n }\r\n\r\n render() {\r\n const domain = helper.getDomain();\r\n\r\n // if (localStorage.mspLoginData) {\r\n // this.setState({\r\n // loading: false\r\n // })\r\n // }\r\n\r\n if (this.state.loading || this.state.componentMounted !== true) {\r\n return null;\r\n }\r\n if (this.props.loginError === \"Login_In_Progress: Error during login call - login is already in progress.\") {\r\n return (\r\n {version}
\n \r\n
\r\n )\r\n }\r\n\r\n if (this.props.loginError) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n else if (this.props.redirecting) {\r\n session.transitionTimeout();\r\n // const loadingLogo = helper.IsWholesaleDomain(domain)\r\n // ? this.loadingLogo\r\n // : momentumLogoWhite;\r\n // const imageAltText = helper.IsWholesaleDomain(domain)\r\n // ? \"Logo\"\r\n // : \"Momentum Telecom Logo\";\r\n\r\n return (\r\n \r\n \r\n Restart Login\r\n \r\n
\r\n \r\n
\r\n {this.props.loginError}
\r\n{this.props.loginErrorDescription}
\r\n \r\n {/* 
*/}\r\n
\r\n );\r\n }\r\n else if (helper.atLoginPath()) {\r\n const { auth: customAuth } = this.state;\r\n customAuth ? config.loginUser(this.props.mspLoginData, customAuth) : config.loginUser(this.props.mspLoginData);\r\n return \r\n }\r\n else {\r\n helper.redirectToLogin();\r\n return \r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n restartSession: helper.toBoolean(state.reducer.restartSession),\r\n loginError: state.reducer.loginError,\r\n loginErrorDescription: state.reducer.loginErrorDescription,\r\n mspLoginData: state.reducer.mspLoginData\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(withRouter(Login));","import React, { Component } from 'react';\r\nimport { FullStory } from 'react-fullstory-component';\r\nimport { toBoolean } from './helper';\r\nimport { isRpxSession, isTestSession } from './session';\r\n\r\nconst sessionIsLogged = () => toBoolean(process.env.REACT_APP_FS_SESSION);\r\n\r\nconst settings = {\r\n host: 'www.fullstory.com',\r\n orgKey: process.env.REACT_APP_FULLSTORY_ORG_ID\r\n};\r\n\r\nconst sessionId = () => sessionStorage.userEmail + '-' + sessionStorage.sessionStart;\r\n\r\nconst customData = () => {\r\n let data = {\r\n time: new Date(),\r\n email: sessionStorage.userEmail,\r\n role: sessionStorage.userRole,\r\n userId: sessionStorage.userId,\r\n userFullName: sessionStorage.userFullName,\r\n userEnterpriseNumber: sessionStorage.userEnterpriseNumber\r\n }\r\n if (isRpxSession()) {\r\n data.emulation = 1;\r\n data.emulationUserName = sessionStorage.emulatedUser;\r\n\r\n }\r\n\r\n if (isTestSession()) data.automatedTest = 1;\r\n\r\n return data;\r\n}\r\n\r\nclass FullStoryScript extends Component {\r\n\r\n render() {\r\n if (sessionIsLogged()) {\r\n return {this.getFormattedTime()}
);\r\n }\r\n}\r\n\r\nCountdownTimer.propTypes = {\r\n countdown: PropTypes.number,\r\n timeoutAction: PropTypes.func,\r\n showInTitle: PropTypes.bool\r\n}\r\n\r\nexport default CountdownTimer;","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types'\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport CountdownTimer from '../../components/countdownTimer';\r\n\r\nclass IdleWarningModal extends Component {\r\n render() {\r\n return (\r\n \r\n Your session will expire in
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.DownloadLinks.map((file, idx) => {\r\n \r\n return (\r\n
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n render() {\r\n if (this.state.loading)\r\n {\r\n return (\r\n \r\n \r\n \r\n {file.URL}\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 Help & Support
\r\n\r\n
\r\n \r\n
\r\n );\r\n }\r\n \r\n }\r\n};\r\n","import React, { Component } from \"react\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"@progress/kendo-theme-default/dist/all.css\";\r\nimport \"../../css/bootstrap.css\";\r\nimport \"../../css/app.css\";\r\nimport \"../../css/spinner.css\";\r\nimport \"../../css/msp_login.css\";\r\nimport * as helper from \"../../scripts/helper\";\r\nimport * as config from \"../../requests/config\";\r\nimport * as session from \"../../scripts/session\";\r\nimport momentumLogoWhite from \"../../images/momentum_logo_white.svg\";\r\nimport { connect } from \"react-redux\";\r\nimport validator from \"validator\";\r\n\r\n\r\n\r\n\r\nclass MyLogin extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Logo: momentumLogoWhite,\r\n loginEmail: '',\r\n loginError: \"\",\r\n contactError: \"\",\r\n UserData: null,\r\n isNetworkError: false,\r\n isInvalidUser: false,\r\n isRetail: true,\r\n };\r\n\r\n }\r\n\r\n getCustomizations = async currentUrl => {\r\n const b2cResults = await helper.getB2CConfigResults(currentUrl);\r\n //console.log(\"b2c\", b2cResults);\r\n this.loadingLogo = helper.IsWholesaleDomain(currentUrl)\r\n ? this.loadingLogo\r\n : momentumLogoWhite;\r\n const customAuthPolicy = this.preProcessCustomizations(b2cResults);\r\n\r\n await this.setState({ auth: customAuthPolicy, loading: false });\r\n };\r\n\r\n preProcessCustomizations = b2cResults => {\r\n let customAuthPolicy = config.auth;\r\n\r\n if (b2cResults) {\r\n let authority =\r\n config.authorityUrl +\r\n b2cResults.B2CPolicy\r\n\r\n customAuthPolicy = {\r\n clientId: b2cResults.B2CClientId,\r\n authority: authority,\r\n b2cScopes: []\r\n };\r\n let { LogoSmall, LogoLarge, VendorName, BrowserIcon } = b2cResults;\r\n this.loadingLogo = LogoLarge;\r\n helper.updateFavicon(BrowserIcon);\r\n if (!helper.isDigitalServicesDomain()) {\r\n helper.setTitle(VendorName);\r\n }\r\n //if (b2cResults && b2cResults != null && b2cResults.VendorId != -1) {\r\n if (b2cResults && b2cResults != null) {\r\n this.setState({ isRetail: false });\r\n }\r\n }\r\n return customAuthPolicy;\r\n };\r\n\r\n async componentDidMount() {\r\n //this.props.history.push(\"\\session\");\r\n const domain = await helper.getDomain();\r\n this.getCustomizations(domain);\r\n }\r\n\r\n handleSubmit = async () => {\r\n // SB 7/25/2021: new env variable\r\n const validEmail = validator.isEmail(this.state.loginEmail);\r\n if (validEmail === false) {\r\n this.setState({ loginError: \"Invalid User Id\", contactError: \"\" })\r\n return;\r\n }\r\n let { auth } = this.state;\r\n sessionStorage.setItem(\"CustomAuthClientId\", auth.clientId);\r\n sessionStorage.setItem(\"CustomAuthUrl\", auth.authority);\r\n const appName = process.env.REACT_APP_NAME;\r\n // added new var for contact error if retail only\r\n let contactMsg = this.state.isRetail ? \" Please contact Support at techs@momentumtelecom.com or 888-538-3960.\" : \" The login process failed. Please contact your account manager.\";\r\n await helper.checkIsUserValid(this.state.loginEmail, appName).then(async (response) => {\r\n this.setState({\r\n isNetworkError: false,\r\n });\r\n if (response) {\r\n sessionStorage.setItem(\"LoggedUser\", response.LoginName);\r\n await this.setState({ UserData: response, loginError: \"\" });\r\n // LOGIN USER\r\n await auth ? config.loginUser(response, auth) : config.loginUser(response);\r\n } else {\r\n this.setState({ loginError: \"The login process failed.\", contactError: contactMsg });\r\n return;\r\n }\r\n }).catch(async err => {\r\n console.log(err);\r\n this.setState({\r\n isNetworkError: Boolean(err.message),\r\n loginError: \"Unable to reach server\",\r\n contactError: \"\"\r\n });\r\n });\r\n }\r\n\r\n handleLoginEmailChange = (event) => {\r\n this.setState({ loginEmail: event.target.value });\r\n }\r\n\r\n formInput = () => {\r\n return (\r\n \r\n
\r\n Help & Support
\r\n \r\n {this.getDownloads()}\r\n
\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n loginForm = () => {\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 loginContainer = () => {\r\n if (sessionStorage.loginError || this.props.loginError) {\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 Sign in with your existing account
\r\n\r\n \r\n
\r\n {this.state.loginError}
\r\n{this.state.contactError}
\r\n {this.formInput()}\r\n \r\n
\r\n \r\n Sign in\r\n
\r\n \r\n
\r\n );\r\n } else if (sessionStorage.redirecting || this.props.redirecting) {\r\n // REDIRECTING\r\n session.transitionTimeout();\r\n return (\r\n \r\n \r\n Restart Login\r\n \r\n
\r\n \r\n
\r\n {this.props.loginError}
\r\n{this.props.loginErrorDescription}
\r\n \r\n
\r\n );\r\n } else if (helper.atLoginPath()) {\r\n // LOGIN USER\r\n return this.loginForm();\r\n }\r\n else {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n }\r\n\r\n render() {\r\n return this.loginContainer();\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n restartSession: helper.toBoolean(state.reducer.restartSession),\r\n loginError: state.reducer.loginError,\r\n loginErrorDescription: state.reducer.loginErrorDescription,\r\n };\r\n};\r\n\r\nexport default withRouter(connect(mapStateToProps)(MyLogin));","import React, { Component } from \"react\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"@progress/kendo-theme-default/dist/all.css\";\r\nimport \"../../css/bootstrap.css\";\r\nimport \"../../css/app.css\";\r\nimport \"../../css/spinner.css\";\r\nimport \"../../css/msp_resetpassword.css\";\r\nimport * as helper from \"../../scripts/helper\";\r\nimport * as config from \"../../requests/config\";\r\nimport momentumLogoWhite from \"../../images/momentum_logo_white.svg\";\r\nimport { connect } from \"react-redux\";\r\n\r\nclass ForgotPassword extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Email: '',\r\n Error: \"\",\r\n Logo: momentumLogoWhite,\r\n validationError: \"\",\r\n isNetworkError: false,\r\n isInvalidUser: true,\r\n message: \"\",\r\n isMailSent: false,\r\n ProviderId: \"\",\r\n };\r\n }\r\n getCustomizations = async currentUrl => {\r\n const queryParams = new URLSearchParams(window.location.search);\r\n this.state.Email = queryParams.get(\"login_hint\");\r\n this.state.ProviderId = queryParams.get(\"ProviderId\");\r\n const b2cResults = await helper.getB2CConfigResults(currentUrl);\r\n this.loadingLogo = helper.IsWholesaleDomain(currentUrl)\r\n ? this.loadingLogo\r\n : momentumLogoWhite;\r\n const customAuthPolicy = this.preProcessCustomizations(b2cResults);\r\n\r\n await this.setState({ auth: customAuthPolicy, loading: false });\r\n };\r\n\r\n preProcessCustomizations = b2cResults => {\r\n let customAuthPolicy = config.auth;\r\n\r\n if (b2cResults) {\r\n const authority =\r\n config.authorityUrl +\r\n b2cResults.B2CPolicy +\r\n config.defaultXPolicyConfig;\r\n customAuthPolicy = {\r\n clientId: b2cResults.B2CClientId,\r\n authority: authority,\r\n b2cScopes: []\r\n };\r\n const { LogoSmall, LogoLarge, VendorName, BrowserIcon } = b2cResults;\r\n this.loadingLogo = LogoLarge;\r\n helper.updateFavicon(BrowserIcon);\r\n if (!helper.isDigitalServicesDomain()) {\r\n helper.setTitle(VendorName);\r\n }\r\n }\r\n return customAuthPolicy;\r\n };\r\n\r\n componentDidMount() {\r\n // this.props.history.push(\"\\session\");\r\n const domain = helper.getDomain();\r\n this.getCustomizations(domain);\r\n }\r\n\r\n handleOnSave = () => {\r\n this.setState({ message: \"\" });\r\n if (!this.state.Email) {\r\n this.setState({ Error: \"Email is missing.\", validationError: \" Please contact your account manager.\" });\r\n return;\r\n }\r\n else {\r\n let state = { ...this.state };\r\n state.savingLoading = true;\r\n state.savingShowSuccess = false;\r\n this.setState(state);\r\n\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Authorization': 'Bearer ' + config.storedAccessToken(),\r\n 'X-Policy': config.storedXPolicy()\r\n };\r\n\r\n\r\n //let apiUrl = \"admin/GetPasswordResetLink\";\r\n\r\n helper.SendResetPasswordLink(this.state.Email).then((response) => {\r\n if (response == null) {\r\n this.setState({ Error: \"The reset password process could not proceed: No email on file.\", validationError: \"Please contact your System Administrator for password assistance. \", isMailSent: false });\r\n return;\r\n }\r\n else {\r\n this.setState({\r\n isNetworkError: false,\r\n message: \"The mail has been successfully sent to your email. Please click the link in your email to reset the password.\",\r\n isMailSent: true\r\n });\r\n if (response) {\r\n this.setState({ Error: \"\" });\r\n }\r\n }\r\n }).catch(async err => {\r\n console.log(err);\r\n this.setState({\r\n isNetworkError: Boolean(err.message),\r\n Error: \"Unable to reach server\",\r\n validationError: \"\",\r\n isMailSent: false\r\n });\r\n });\r\n }\r\n }\r\n handleOnBack = () => {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n\r\n handleLoginEmailChange = (event) => {\r\n if (this.state.ProviderId === 18129 || this.state.ProviderId === \"18129\") {\r\n this.setState({ Email: event.target.value });\r\n } else return;\r\n }\r\n\r\n sendLinkForm = () => {\r\n let state = this.state;\r\n // const queryParams = new URLSearchParams(window.location.search);\r\n // state.Email = queryParams.get(\"login_hint\");\r\n return (\r\n \r\n
\r\n );\r\n }\r\n getResponseMessage = () => {\r\n if (this.state.message) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Forgot Password
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n A link to reset your password will be sent to the email address associated with the user name below.
\r\n\r\n \r\n
\r\n {this.state.Error}
\r\n{this.state.validationError}
\r\n Back\r\n
\r\n \r\n \r\n
\r\n {this.getResponseMessage()}\r\n {!this.state.isMailSent ? \r\n Send\r\n
: null}\r\n {this.state.message}
)\r\n }\r\n return \"\";\r\n }\r\n sendLinkContainer = () => {\r\n if (this.state.isInvalidUser) {\r\n return this.sendLinkForm();\r\n }\r\n else {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n }\r\n\r\n render() {\r\n return this.sendLinkContainer();\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n restartSession: helper.toBoolean(state.reducer.restartSession),\r\n loginError: state.reducer.loginError,\r\n loginErrorDescription: state.reducer.loginErrorDescription,\r\n };\r\n};\r\nexport default withRouter(connect(mapStateToProps)(ForgotPassword));","import React, { Component } from 'react';\r\nimport { Modal } from 'react-bootstrap';\r\nimport { Button } from '@progress/kendo-buttons-react-wrapper';\r\nimport { fetchData, post } from '../../../requests/api_calls';\r\nimport * as session from \"../../../scripts/session\";\r\nimport { store } from '../../../store/store';\r\nimport * as actions from \"../../../store/actions\";\r\nimport { DataLoadingSpinner } from '../../../components/spinners';\r\n\r\nexport default class MFAValidateModal extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n //this.inputRef = React.createRef();\r\n\r\n this.state = {\r\n showModal: true,\r\n pinCode: '',\r\n validationError: \"\",\r\n isOktaPushEnabled: sessionStorage.getItem(\"IsOktaPushEnabled\") == \"true\" ? true : false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.getMFADetails();\r\n //this.inputRef.current.focus();\r\n }\r\n\r\n getMFADetails = async () => {\r\n try {\r\n const verificationMethod = sessionStorage.getItem('verificationMethod');\r\n if (verificationMethod && verificationMethod == \"sms\") {\r\n let path = 'usr/ValidateTwoStepSmsConfig';\r\n await post(path, \"POST\");\r\n }\r\n if (this.state.isOktaPushEnabled) {\r\n this.onSendPushNotification();\r\n }\r\n } catch (error) {\r\n console.log(\"no MFA details or error MFA fetching details\")\r\n }\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({ showModal: false });\r\n };\r\n\r\n onSubmitAuthPinCode = async () => {\r\n try {\r\n const response = await post('usr/ValidateTwoStepVerificationConfig', 'POST', this.state.pinCode);\r\n if (response.ok) {\r\n this.setState({ validationError: \"\" });\r\n store.dispatch({ type: actions.VALIDATE_MFA });\r\n this.handleClose();\r\n } else {\r\n console.log(`onSubmitAuthPinCode failed: ${response.message}`);\r\n this.setState({ validationError: `Authentication PIN validation failed. The code entered is invalid or has expired.` });\r\n }\r\n } catch (error) {\r\n console.log(`onSubmitAuthPinCode failed: ${error}`);\r\n this.setState({ validationError: \"Something went wrong while attempting to validate the pin.\" });\r\n }\r\n };\r\n\r\n onSendPushNotification = async () => {\r\n await this.setState({ validationError: \"\", oktaFailed: false });\r\n try {\r\n let path = \"usr/SendOktaPushNotification?isConfigure=false\";\r\n const response = await post(path, 'POST');\r\n if (response.ok) {\r\n //this.setState({ validationError: \"\", oktaFailed: false });\r\n store.dispatch({ type: actions.VALIDATE_MFA });\r\n this.handleClose();\r\n } else {\r\n console.log(`onSendPushNotification failed: ${response.message}`);\r\n this.setState({ validationError: `Okta push notification failed.`, oktaFailed: true });\r\n }\r\n } catch (error) {\r\n console.log(`onSendPushNotification failed: ${error}`);\r\n this.setState({ validationError: \"Something went wrong while attempting to validate the push notification.\", oktaFailed: true });\r\n }\r\n }\r\n\r\n errorContent = () => {\r\n if (this.state.validationError === \"\") {\r\n return;\r\n } else {\r\n return (\r\n {this.state.validationError}
\r\n )\r\n }\r\n }\r\n\r\n getBodyContent() {\r\n if (this.state.isOktaPushEnabled) {\r\n if (this.state.oktaFailed) {\r\n return (\r\n\r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n Resend push notification\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n\r\n )\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n this.setState({ pinCode: e.target.value })}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.onSubmitAuthPinCode();\r\n }\r\n }}\r\n autoFocus\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Multi-Factor Authentication \r\n \r\n \r\n {this.getBodyContent()}\r\n {this.errorContent()}\r\n \r\n
\r\n '{email.trim()}' Not a valid email
);\r\n }\r\n\r\n errorContent = () => {\r\n if (this.state.successMessage !== \"\") {\r\n return (\r\n {this.state.successMessage}
\r\n )\r\n }\r\n\r\n if (this.state.validationError === \"\") {\r\n return;\r\n } else {\r\n return (\r\n{this.state.validationError}
\r\n )\r\n }\r\n }\r\n\r\n sendEmailValidate = async (email) => {\r\n try {\r\n await this.setState({ loading: true });\r\n let path = `usr/ValidateTwoStepEmail?p_email=${email}`;\r\n const response = await fetchData(path);\r\n if (response === 200) {\r\n this.setState({ loading: false, validationError: \"\", successMessage: \"Success! You will receive a verification link to your chosen email and will be automatically logged out shortly.\" });\r\n setTimeout(() => {\r\n session.logout();\r\n }, 8000);\r\n } else {\r\n console.log(`sendEmailValidate failed: ${response.message}`);\r\n this.setState({ loading: false, validationError: \"Something went wrong while sending the email link.\", successMessage: \"\" });\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n this.setState({ loading: false, validationError: \"Something went wrong while sending the email link.\", successMessage: \"\" });\r\n }\r\n }\r\n\r\n getQRImageContent() {\r\n const { qrImageUrl, loadingQR, isOktaPushEnabled, qrOktaImageUrl } = this.state;\r\n\r\n if (loadingQR) {\r\n return (\r\n\r\n
\r\n );\r\n }\r\n\r\n if (qrImageUrl && !loadingQR && !isOktaPushEnabled) {\r\n return (\r\n {loadingError}
);\r\n }\r\n\r\n if (this.state.showGrabEmailForm) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n if (this.state.confirmOktaVerify && !this.state.isOktaPushEnabled) {\r\n return (\r\n \r\n \r\n this.setState({ email: e.target.value })}\r\n autoFocus\r\n />\r\n {this.validateEmail(this.state.email)}\r\n {\r\n this.sendEmailValidate(this.state.email);\r\n }}\r\n >Validate Email\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n Are you sure you want to enable Okta Verify? You will need to re-scan the generated QR code to enable. Any previous enrollments will be removed.
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n getMethod = () => {\r\n if (sessionStorage.verificationMethod == 'authApp') {\r\n if (sessionStorage.IsOktaPushEnabled == \"true\") {\r\n return \"Okta Verify\";\r\n } else {\r\n return \"Authenticator App\";\r\n }\r\n }\r\n\r\n if (sessionStorage.verificationMethod == 'sms') {\r\n return \"SMS\";\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n render() {\r\n const modalVerbiage = () => {\r\n if (sessionStorage.verificationMethod && (sessionStorage.verificationMethod !== \"\" || sessionStorage.verificationMethod !== null || sessionStorage.verificationMethod !== undefined)) {\r\n return \"Manage Multi-factor Authentication\"\r\n } else {\r\n return \"Enable Multi-factor Authentication\"\r\n }\r\n }\r\n return (\r\n <>\r\n \r\n Add an extra layer of security to block unauthorized access and protect your account.\r\n
\r\nMFA verification options:
\r\n {sessionStorage.MfaAllowSms == \"true\" ?\r\n
: null}\r\n {sessionStorage.MfaAllowAuthApp == \"true\" ? \r\n {\r\n this.setState({ isAuthAppOn: false, isTextMessageOn: true, verificationMethod: 'sms', isOktaPushEnabled: false });\r\n }}\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n {this.state.isTextMessageOn && (<>\r\n Text Message
\r\nProvide your phone number to get a SMS code to enable the authentication:
\r\n\r\n <>\r\n this.setState({ phoneNumber: removePhoneFormatting(e.target.value) })}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.submitPhoneNumber();\r\n }\r\n }}\r\n placeholder={\"Enter your mobile device number!\"}\r\n autoFocus\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n Submit\r\n \r\n
\r\n )}\r\n \r\n
: null}\r\n \r\n {\r\n if (this.state.isOktaPushEnabled) {\r\n this.setState({ isTextMessageOn: false, isAuthAppOn: true, verificationMethod: 'authApp' });\r\n } else {\r\n this.getQRImageUrl();\r\n this.setState({ isTextMessageOn: false, isAuthAppOn: true, verificationMethod: 'authApp' });\r\n }\r\n }}\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n {this.state.isAuthAppOn ? <>\r\n Authenticator app code
\r\n\r\n
\r\n : null}\r\n Scan the QR code and enter the pin generated by Okta, Google or Microsoft authenticator app to confirm it's you.
\r\n {/*\r\n \r\n
*/}\r\n {this.getQRImageContent()}\r\n \r\n {/* {this.state.isAuthAppOn && this.state.isOktaPushEnabled && this.state.qrOktaImageUrl && !this.state.loadingQR ?\r\n <>\r\n this.setState({ pinCode: e.target.value })}\r\n onKeyPress={(e) => {\r\n if (e.key === 'Enter') {\r\n this.onSubmitAuthPinCode();\r\n }\r\n }}\r\n autoFocus\r\n //disabled={sessionStorage.verificationMethod && sessionStorage.verificationMethod != \"\" ? true : false}\r\n />\r\n
\r\n After you scan your QR code, press the button to send the push notification
\r\n\r\n \r\n Send push notification\r\n \r\n
\r\n \r\n : null} */}\r\n {!this.state.isOktaPushEnabled && (this.state.isTextMessageOn || this.state.isAuthAppOn) ? <>\r\n \r\n \r\n \r\n Save\r\n \r\n \r\n
\r\n : null}\r\n {this.state.isOktaPushEnabled ? \r\n \r\n
: null}\r\n {`MFA is currently enabled for this account: ${this.getMethod()}`}
\r\n : null\r\n }\r\n\r\n
\r\n );\r\n const { rpxLogo } = this.state;\r\n\r\n let RPXLogo = (\r\n \r\n \r\n Restart Login\r\n \r\n
\r\n \r\n
\r\n Error
\r\nLogin Failed
\r\n \r\n 
\r\n
\r\n );\r\n if (helper.urlIncludes(\"ext_authenticate\")) {\r\n if (this.state.rpxLoginDetailsRetrieved === true) {\r\n if (this.state.RPXLoginFail)\r\n return (\r\n \r\n
\r\n );\r\n else if (rpxLogo) {\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 } else {\r\n if (this.state.RPXLoginFail) {\r\n return (\r\n { loginErrorHTML }\r\n );\r\n } else if (rpxLogo) {\r\n { RPXLogo }\r\n } else return null;\r\n }\r\n } else if (this.props.beta_access_denied) {\r\n let primaryUrl = helper.getProductionUrl();\r\n return (\r\n \r\n {/*
\r\n );\r\n } else if (this.props.loggedIn || sessionStorage.loggedIn && tokenIsValid) {\r\n if (\r\n (this.state.customTheme && this.state.customThemeLoaded) ||\r\n !this.state.customTheme\r\n ) {\r\n // ** Start MFA code\r\n // read enterprise option; if set to 'Mandatory' (and no verification type) open MFA modal\r\n if (sessionStorage.enableMFA == \"true\" && sessionStorage.MFAOption === \"Mandatory\" &&\r\n !sessionStorage.verificationMethod &&\r\n (!sessionStorage.validMfa || config.decryptKey(sessionStorage.validMfa) == false)) {\r\n if (!sessionStorage.RPXLogin || sessionStorage.RPXLogin == false || sessionStorage.RPXLogin == \"false\") {\r\n return \r\n \r\n Subscriber Portal\r\n \r\n
\r\n \r\n
\r\n Access to Beta Denied
\r\n\r\n This account has not been granted access to the Beta\r\n Environment. Click on the link below to be redirected to the\r\n Cloud Services Portal\r\n
\r\n \r\n \r\n Login with another account\r\n \r\n
\r\n \r\n \r\n \r\n {tokenUpdater(this.props.requestToken)}\r\n
\r\n );\r\n } else {\r\n const loadingLogo = session.customLogoLarge() || momentumLogoWhite;\r\n return (\r\n \r\n
\r\n \r\n {/* */}\r\n {/*
\r\n );\r\n }\r\n } else if (helper.atSupportLinksPath() && !helper.isRetailDomain(domain)) {\r\n if (\r\n (this.state.customTheme && this.state.customThemeLoaded) ||\r\n !this.state.customTheme\r\n ) {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n } else {\r\n const loadingLogo = session.customLogoLarge() || momentumLogoWhite;\r\n return (\r\n \r\n {/* {((helper.shouldApplyCustomizations() && this.sideBarLogo) || !helper.shouldApplyCustomizations())\r\n &&
\r\n \r\n {/* */}\r\n {/*
\r\n );\r\n }\r\n }\r\n else if (!this.state.loadingAccessToken && !tokenIsValid) {\r\n if (window.location.pathname == '/forgotpassword') {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n else if (window.location.pathname == '/resetpassword') {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n else if (window.location.pathname == '/ValidateTwoStepEmail') {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n else {\r\n // session.logout()\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n }\r\n else {\r\n const loadingLogo = session.customLogoLarge() || momentumLogoWhite;\r\n return (\r\n \r\n {/*
\r\n );\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n loadingAccessToken: state.reducer.loadingAccessToken,\r\n loggedIn: state.reducer.loggedIn,\r\n requestToken: state.reducer.requestToken,\r\n beta_access_denied: helper.toBoolean(state.reducer.beta_access_denied),\r\n rpxLogin: state.reducer.rpxLogin,\r\n isMspLogin: state.reducer.isMspLogin,\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n validMfa: state.reducer.validMfa,\r\n };\r\n};\r\nconst mapDispatchToProps = { tokenRepo };\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(App);","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register() {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { Provider } from \"react-redux\";\r\nimport { store } from \"./store/store\";\r\nimport \"./index.css\";\r\nimport App from \"./App\";\r\nimport { unregister } from \"./registerServiceWorker\";\r\n\r\nReactDOM.render(\r\n \r\n
\r\n )\r\n }\r\n}","import * as actions from './actions';\r\nimport * as helper from './../scripts/helper';\r\nimport * as config from './../requests/config';\r\nimport * as settings from './../scripts/settings';\r\nconst initialState = () => {\r\n return {\r\n loggedIn: sessionStorage.loggedIn && sessionStorage.loggedIn.toString().toLowerCase() === 'true' ? true : false,\r\n tokenIsValid: sessionStorage.tokenIsValid && sessionStorage.tokenIsValid.toString().toLowerCase() === 'true' ? true : false,\r\n redirecting: sessionStorage.redirecting && sessionStorage.redirecting.toString().toLowerCase() === 'true' ? true : false,\r\n requestToken: false,\r\n serviceLoading: true,\r\n restartSession: sessionStorage.restartSession && sessionStorage.restartSession.toString().toLowerCase() === 'true' ? true : false,\r\n hasDevices: sessionStorage.hasDevices && sessionStorage.hasDevices.toString().toLowerCase() === 'true' ? true : false,\r\n // MJ: Pascal Case used below to align with API payloads\r\n ServiceId: sessionStorage.ServiceId,\r\n ServiceNumber: sessionStorage.ServiceNumber,\r\n UserId: sessionStorage.UserId,\r\n PBXUserID: sessionStorage.PBXUserID,\r\n AccountNumber: sessionStorage.AccountNumber,\r\n DirectoryNumber: sessionStorage.DirectoryNumber,\r\n LocationAccountNumber: sessionStorage.LocationAccountNumber,\r\n LocationAddress: sessionStorage.LocationAddress,\r\n beta_access_denied: sessionStorage.beta_access_denied,\r\n loadingAccessToken: true,\r\n isSelectedServiceIpTrunking: false,\r\n themes_loaded: false,\r\n permissionsRetrieved: false,\r\n isMspLogin: (sessionStorage.isMspLogin && sessionStorage.isMspLogin.toString() === 'true' ? true : false) || false,\r\n mspLoginData: {},\r\n //validMfa: sessionStorage.validMfa && sessionStorage.validMfa.toString().toLowerCase() === 'true' ? true : false,\r\n validMfa: null,\r\n // cl_call_type: action.cl_call_type,\r\n // cl_status_type: action.cl_status_type,\r\n // cl_call_category: action.cl_call_category,\r\n // cl_from_date: action.cl_from_date,\r\n // cl_to_date: action.cl_to_date\r\n }\r\n}\r\n\r\nconst reducer = (state = initialState(), action) => {\r\n // set and use constants in store/actions.js to avoid silently failing typo errors\r\n switch (action.type) {\r\n // set when login button is clicked\r\n case actions.REDIRECTING:\r\n return {\r\n ...state,\r\n redirecting: true,\r\n }\r\n case actions.START_LOGIN:\r\n sessionStorage.setItem('timer', settings.loginTimeout);\r\n return {\r\n ...state,\r\n loggedIn: false,\r\n loadingAccessToken: false,\r\n }\r\n case actions.LOGIN_USER:\r\n // set after authentication has completed to load dashboard\r\n return {\r\n ...state,\r\n loggedIn: true,\r\n tokenIsValid: true,\r\n redirecting: false,\r\n }\r\n case actions.VALIDATE_MFA:\r\n let key = config.encryptKey(sessionStorage.userId);\r\n sessionStorage.setItem('validMfa', key);\r\n return {\r\n ...state,\r\n validMfa: key,\r\n }\r\n case actions.TOKEN_LOADED:\r\n return {\r\n ...state,\r\n loadingAccessToken: false\r\n }\r\n case actions.RECEIVE_TOKEN:\r\n sessionStorage.removeItem('loggingOut');\r\n localStorage.setItem('accessToken', action.accessToken);\r\n return {\r\n ...state,\r\n loadingAccessToken: false\r\n }\r\n case actions.IP_TRUNKING_ONLY_SET:\r\n return {\r\n ...state,\r\n isIpTrunkingOnly: sessionStorage.isIpTrunkingOnly && sessionStorage.isIpTrunkingOnly.toString().toLowerCase() === 'true' ? true : false\r\n }\r\n case actions.PERMISSIONS_UPDATED:\r\n return {\r\n ...state,\r\n hasTrunking: sessionStorage.hasTrunk && sessionStorage.hasTrunk.toString().toLowerCase() === 'true' ? true : false,\r\n hasContactCenter: sessionStorage.hasContactCenter && sessionStorage.hasContactCenter.toString().toLowerCase() === 'true' ? true : false,\r\n hasMacd: sessionStorage.MacdPerms && JSON.stringify(sessionStorage.MacdPerms).indexOf(1) >= 0 ? true : false,\r\n hasDevices: sessionStorage.hasDevices && sessionStorage.hasDevices.toString().toLowerCase() === 'true' ? true : false,\r\n hasIpTrunk: sessionStorage.hasIpTrunk && sessionStorage.hasIpTrunk.toString().toLowerCase() === 'true' ? true : false,\r\n hasTicketing: sessionStorage.hasTicketing,\r\n hasVmUsageReport: sessionStorage.hasVmUsageReport && sessionStorage.hasVmUsageReport.toString().toLowerCase() === 'true' ? true : false,\r\n permissionsRetrieved: true\r\n };\r\n case actions.RESTART_SESSION:\r\n // set after authentication fails and the the retry button is clicked\r\n return {\r\n ...state,\r\n restartSession: true\r\n }\r\n case actions.SAVE_LOGIN_ERROR:\r\n // save error message returned from calling clientApp.loginRedirect()\r\n return {\r\n ...state,\r\n loginError: action.loginError,\r\n loginErrorDescription: action.loginErrorDescription\r\n }\r\n case actions.REFRESH_TOKEN:\r\n // set if API call receivs a 401 (unauthorized) response so token refresh is attempted\r\n return {\r\n ...state,\r\n requestToken: true\r\n }\r\n case actions.UPDATE_TOKEN_STATUS:\r\n return {\r\n ...state,\r\n tokenIsValid: action.tokenIsValid\r\n }\r\n case actions.SET_LOCATION:\r\n // set in devices component in admin dashboard\r\n return {\r\n ...state,\r\n LocationAddress: action.LocationAddress,\r\n LocationAccountNumber: action.LocationAccountNumber\r\n }\r\n case actions.SET_QUICK_VIEW_LOCATION:\r\n // set in devices component in admin dashboard\r\n return {\r\n ...state,\r\n QuickViewLocationAccountNumber: action.QuickViewLocationAccountNumber\r\n }\r\n case actions.SERVICE_SELECTED:\r\n return {\r\n ...state,\r\n serviceLoading: true,\r\n ServiceNumber: action.ServiceNumber,\r\n PBXUserID: action.PBXUserID,\r\n Extension: action.Extension,\r\n SelectedUserId: action.SelectedUserId\r\n }\r\n case actions.SET_SERVICE:\r\n // set in services & users table when a service number is clicked\r\n return {\r\n ...state,\r\n serviceLoading: false,\r\n ServiceId: action.ServiceId,\r\n ServiceNumber: action.ServiceNumber,\r\n PBXUserID: action.PBXUserID,\r\n SelectedUserId: action.SelectedUserId,\r\n AccountNumber: action.AccountNumber,\r\n DirectoryNumber: action.DirectoryNumber,\r\n Extension: action.Extension,\r\n LocationAccountNumber: action.LocationAccountNumber,\r\n isSelectedServiceIpTrunking: action.isSelectedServiceIpTrunking ? action.isSelectedServiceIpTrunking : false\r\n }\r\n case actions.SERVICES_SET:\r\n return {\r\n ...state,\r\n serviceLoading: false\r\n }\r\n case actions.SERVICES_SET:\r\n return {\r\n ...state,\r\n serviceLoading: false\r\n }\r\n case actions.TOGGLE_SIDEBAR:\r\n // set in services & users table when a service number is clicked\r\n return {\r\n ...state,\r\n showSideBar: !state.showSideBar,\r\n }\r\n case actions.REDIRECT_BETA_ACCESS:\r\n return {\r\n ...state,\r\n beta_access_denied: true\r\n }\r\n\r\n case actions.RECEIVE_CUSTOM_IMAGE:\r\n return {\r\n ...state,\r\n customSmallLogo: action.customSmallLogo,\r\n customLargeLogo: action.customLargeLogo,\r\n }\r\n case actions.SET_CALL_LOGS_FILTER:\r\n return {\r\n ...state,\r\n cl_call_type: action.cl_call_type,\r\n cl_status_type: action.cl_status_type,\r\n cl_call_category: action.cl_call_category,\r\n cl_from_date: action.cl_from_date,\r\n cl_to_date: action.cl_to_date,\r\n cl_date_type: action.cl_date_type\r\n }\r\n case actions.SET_SUBSCRIBER_CALL_LOGS_FILTER:\r\n return {\r\n ...state,\r\n usercl_call_type: action.usercl_call_type,\r\n usercl_status_type: action.usercl_status_type,\r\n usercl_call_category: action.usercl_call_category,\r\n usercl_date_type: action.usercl_date_type,\r\n usercl_from_date: action.usercl_from_date,\r\n usercl_to_date: action.usercl_to_date\r\n }\r\n case actions.UI_SKINS_APPLIED:\r\n return {\r\n ...state,\r\n themes_loaded: true\r\n }\r\n case actions.SET_MSP_LOGIN_DATA:\r\n return {\r\n ...state,\r\n isMspLogin: true,\r\n mspLoginData: { ...action.data }\r\n }\r\n }\r\n\r\n return state;\r\n}\r\n\r\nexport default reducer;","import { combineReducers } from 'redux';\r\nimport reducer from './reducer';\r\nimport * as config from './../requests/config';\r\nimport * as actions from './../store/actions';\r\nimport jwtDecode from \"jwt-decode\";\r\n\r\nexport const reducers = combineReducers({ reducer });\r\n \r\nconst initialState = () => {\r\n return {\r\n }\r\n}\r\n\r\nexport const tokenRepo = (actionType = '', data = {}) => async dispatch => {\r\n try {\r\n \r\n switch(actionType)\r\n {\r\n case actions.UI_SKINS_APPLIED:\r\n dispatch({type: actions.UI_SKINS_APPLIED});\r\n case actions.SET_MSP_LOGIN_DATA:\r\n dispatch({ type: actions.SET_MSP_LOGIN_DATA, data: { ...data }});\r\n default:\r\n let TokenObj = sessionStorage.getItem('accessToken') ? sessionStorage.getItem('accessToken') : (localStorage.getItem('accessToken') ? localStorage.getItem('accessToken') : null);\r\n try\r\n {\r\n if (TokenObj !== null && TokenObj !== 'undefined') {\r\n\r\n let decodedToken = jwtDecode(TokenObj);\r\n let currentTime = new Date();\r\n let expirationOnCurrentToken = decodedToken.exp;\r\n const d = new Date(0);\r\n d.setUTCSeconds(expirationOnCurrentToken);\r\n if (currentTime > d) {\r\n dispatch({type: actions.UPDATE_TOKEN_STATUS, tokenIsValid: false});\r\n dispatch({type: actions.TOKEN_LOADED});\r\n }\r\n else {\r\n await dispatch({type: actions.UPDATE_TOKEN_STATUS, tokenIsValid: true});\r\n await config.tokenSaveUserProperties(TokenObj);\r\n }\r\n } else {\r\n dispatch({type: actions.TOKEN_LOADED})\r\n }\r\n } catch (ex) {\r\n console.log('tokenRepo error:' + ex);\r\n dispatch({type: actions.TOKEN_LOADED})\r\n }\r\n }\r\n } catch (error) {\r\n console.error('tokenRepo error: ' + error);\r\n dispatch({ type: actions.TOKEN_LOADED });\r\n }\r\n}","var map = {\n\t\"./DriveUC-UI-development\": [\n\t\t467,\n\t\t0\n\t],\n\t\"./DriveUC-UI-development.json\": [\n\t\t467,\n\t\t0\n\t],\n\t\"./DriveUC-UI-production\": [\n\t\t468,\n\t\t1\n\t],\n\t\"./DriveUC-UI-production.json\": [\n\t\t468,\n\t\t1\n\t],\n\t\"./DriveUC-UI-staging\": [\n\t\t469,\n\t\t2\n\t],\n\t\"./DriveUC-UI-staging.json\": [\n\t\t469,\n\t\t2\n\t],\n\t\"./MyDigitalServices-UI-development\": [\n\t\t470,\n\t\t3\n\t],\n\t\"./MyDigitalServices-UI-development.json\": [\n\t\t470,\n\t\t3\n\t],\n\t\"./MyDigitalServices-UI-production\": [\n\t\t471,\n\t\t4\n\t],\n\t\"./MyDigitalServices-UI-production.json\": [\n\t\t471,\n\t\t4\n\t],\n\t\"./MyDigitalServices-UI-staging\": [\n\t\t472,\n\t\t5\n\t],\n\t\"./MyDigitalServices-UI-staging.json\": [\n\t\t472,\n\t\t5\n\t],\n\t\"./Retail-CSS\": [\n\t\t473,\n\t\t6\n\t],\n\t\"./Retail-CSS.json\": [\n\t\t473,\n\t\t6\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(function() {\n\t\treturn __webpack_require__.t(id, 3);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 219;\nmodule.exports = webpackAsyncContext;","import * as Msal from \"msal\";\r\nimport * as session from \"./../scripts/session\";\r\nimport * as settings from \"./../scripts/settings\";\r\nimport * as actions from \"./../store/actions\";\r\nimport { store } from \"../store/store\";\r\nimport { fetchData, customFetch } from \"./../requests/api_calls\";\r\nimport * as moment from \"moment\";\r\nimport * as helper from '../scripts/helper';\r\nimport jwtDecode from \"jwt-decode\";\r\n\r\nconst currentTime = new Date().getTime();\r\n\r\nexport const IMAGE_URL_PREFIX = 'data:image/png;base64,';\r\n\r\nexport const baseUrl = process.env.REACT_APP_MSA_URL;\r\n\r\nexport const baseApiUrl = process.env.REACT_APP_MSA_API_URL;\r\n\r\nexport const baseMSPUrl = process.env.REACT_APP_MSP_URL;\r\n\r\nexport const defaultXpolicy = process.env.REACT_APP_MSA_XPOLICY;\r\n\r\nexport const defaultXPolicyConfig = process.env.REACT_APP_MSA_XPOLICY_CONFIG;\r\n\r\nexport const clientId = process.env.REACT_APP_MSA_CLIENT_ID;\r\n\r\nexport const authorityUrl = process.env.REACT_APP_MSA_AUTHORITY_URL;\r\n\r\nexport const authority = authorityUrl + defaultXpolicy;\r\n\r\nexport const version = process.env.REACT_APP_VERSION;\r\n\r\nconst b2c_scope_read = process.env.REACT_APP_MSA_B2C_SCOPES_URL + \"read\";\r\nconst b2c_scope_write = process.env.REACT_APP_MSA_B2C_SCOPES_URL + \"write\";\r\nexport const b2cScopes = [b2c_scope_read, b2c_scope_write];\r\n\r\nexport const auth = {\r\n clientId: clientId,\r\n authority: authority,\r\n b2cScopes: b2cScopes\r\n};\r\n\r\nexport const storedAccessToken = () => {\r\n return sessionStorage.accessToken;\r\n};\r\n\r\nexport const storedUserEmail = () => {\r\n return sessionStorage.userEmail;\r\n};\r\n\r\nexport const storedAccountNumber = () => {\r\n return sessionStorage.AccountNumber;\r\n};\r\n\r\nexport const storedXPolicy = () => {\r\n return sessionStorage.xpolicy;\r\n};\r\n\r\nexport const serviceId = () => {\r\n if (sessionStorage.ServiceId) return parseInt(sessionStorage.ServiceId);\r\n return -1;\r\n};\r\n\r\nexport const headers = () => {\r\n return {\r\n Authorization: \"Bearer \" + storedAccessToken(),\r\n 'X-Policy': storedXPolicy()\r\n };\r\n};\r\n\r\nexport const expirationRemainingDelta = () => {\r\n var expiration = moment.unix(sessionStorage.expiration);\r\n let currentMil = moment();\r\n let duration = moment.duration(expiration.diff(currentMil));\r\n let finalDuration = duration.asMilliseconds() - (60 * 1000 * 3);\r\n return finalDuration; //3 minutes before expiration run tokenUpdater\r\n};\r\n\r\nexport const loginRPXUser = async encParam => {\r\n let auth =\r\n \"Basic \" +\r\n btoa(\"Emulated User\" + \":\" + process.env.REACT_APP_PRPX_BASIC_PWD);\r\n let url = baseApiUrl + \"auth/AzureToken\";\r\n let azureTokenResult = await fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Accept: \"application/json\",\r\n Authorization: auth\r\n },\r\n body: JSON.stringify(encParam)\r\n });\r\n if (!azureTokenResult.ok) return Promise.reject(\"token not valid\");\r\n\r\n let rpxData = await azureTokenResult.json();\r\n return storeRPXToken(rpxData);\r\n};\r\n\r\nexport const storeRPXToken = async rpxData => {\r\n //sessionStorage.clear();\r\n //don't wanna clear all sessionStorage just everything not sending to FS\r\n sessionStorage.removeItem('accessToken');\r\n sessionStorage.removeItem('refreshToken');\r\n sessionStorage.removeItem('xpolicy');\r\n sessionStorage.removeItem('userGivenName');\r\n sessionStorage.removeItem('redirecting');\r\n sessionStorage.removeItem('tokenIsValid');\r\n sessionStorage.removeItem('expiration');\r\n sessionStorage.removeItem(\"userFullName\");\r\n sessionStorage.removeItem(\"username\");\r\n sessionStorage.removeItem(\"userEnterpriseNumber\");\r\n sessionStorage.removeItem(\"userRole\");\r\n sessionStorage.removeItem(\"userType\");\r\n sessionStorage.removeItem(\"userTypeId\");\r\n sessionStorage.removeItem(\"IsWholesale\");\r\n sessionStorage.removeItem(\"userHasServices\");\r\n sessionStorage.removeItem(\"userReadPermission\");\r\n sessionStorage.removeItem(\"userWritePermission\");\r\n sessionStorage.removeItem(\"userTimeZone\");\r\n sessionStorage.removeItem(\"beta_access_denied\");\r\n\r\n let accessToken = rpxData.access_token;\r\n let refreshToken = rpxData.refresh_token;\r\n\r\n let decodedToken = jwtDecode(accessToken);\r\n sessionStorage.setItem(\"accessToken\", accessToken);\r\n sessionStorage.setItem(\"refreshToken\", refreshToken);\r\n sessionStorage.setItem(\"xpolicy\", decodedToken.tfp);\r\n sessionStorage.setItem(\"userGivenName\", decodedToken.given_name);\r\n sessionStorage.setItem(\"redirecting\", false);\r\n sessionStorage.setItem(\"tokenIsValid\", true);\r\n sessionStorage.setItem(\"expiration\", decodedToken.exp);\r\n\r\n await refreshTokenIfExpired(decodedToken.exp);\r\n\r\n let data = await fetchData(\"usr/PrincipalUser\");\r\n if (data === null) return Promise.reject(\"principal user not found\");\r\n\r\n helper.storeVendorId(data.Reseller.CompanyInfo.SalesGroupId)\r\n setUserPropsToSessionStorage(data);\r\n sessionStorage.setItem(\"loggedIn\", true);\r\n\r\n if (rpxData.page === \"MSP_GROUP\") {\r\n if (sessionStorage.IPTrunkEmulation) {\r\n //Go to IP Trunking Page\r\n sessionStorage.setItem('hasIpTrunk', true);\r\n window.location.replace('/ip_trunking');\r\n } else {\r\n window.location.replace(\"/iframe_page/MSP_GROUP/\" + rpxData.LocationID);\r\n }\r\n }\r\n else if (rpxData.page === \"MSP_SUBSCRIBER\") {\r\n let service = await fetchData(\r\n \"usr/MyServices?DirectoryNumber=\" + rpxData.tn\r\n );\r\n if (service) {\r\n settings.setService(service[0]);\r\n }\r\n if (sessionStorage.IPTrunkEmulation) {\r\n //Go to User Dashboard\r\n sessionStorage.setItem('hasIpTrunk', true);\r\n window.location.replace('/dashboard');\r\n } else {\r\n window.location.replace(\r\n \"/iframe_page/MSP_SUBSCRIBER/\" + rpxData.LocationID + \"/\" + rpxData.tn\r\n );\r\n }\r\n sessionStorage.removeItem('IPTrunkEmulation');\r\n }\r\n return Promise.resolve(\"\");\r\n};\r\n\r\nexport const loginUser = (data = {}, customPolicy = null) => {\r\n sessionStorage.setItem(\"redirecting\", true);\r\n try {\r\n if (customPolicy) {\r\n clientApp.authority = customPolicy.authority;\r\n clientApp.clientId = customPolicy.clientId;\r\n }\r\n\r\n // SB: 7/25/2021: added IdPAppClientId\r\n let DomainHint = '';\r\n if (data.IsExternalUser === true) {\r\n DomainHint = data.EnterpriseId + '-' + data.IdPApp.IdPAppClientId;\r\n }\r\n\r\n const queryString = {\r\n // SB: set domain_hint only for ext. users\r\n // SB: 7/22/2021 - domain_hint is now in format EnterpriseId-IdPAppClientId\r\n domain_hint: DomainHint,\r\n ProviderId: data.ProviderId,\r\n EnterpriseId: data.EnterpriseId\r\n };\r\n\r\n clientApp.loginRedirect({\r\n scopes: b2cScopes,\r\n loginHint: data.LoginName,\r\n extraQueryParameters: queryString,\r\n });\r\n }\r\n catch (error) {\r\n console.log('loginUser Error: ' + error);\r\n settings.saveLoginError(error);\r\n }\r\n};\r\n\r\n// (1) Create MSAL Instance\r\n// const msalConfig = {\r\n// auth: {\r\n// clientId: clientId,\r\n// authority: authority,\r\n// validateAuthority: false,\r\n// }\r\n// }\r\nconst msalConfig = {\r\n auth: {\r\n clientId: clientId, // This is the ONLY mandatory field that you need to supply.\r\n authority: authority, // Use a sign-up/sign-in user-flow as a default authority\r\n validateAuthority: false,\r\n redirectUri: window.location.origin, // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.\r\n // postLogoutRedirectUri: window.location.origin, // Indicates the page to navigate after logout.\r\n // navigateToLoginRequestUrl: false, // If \"true\", will navigate back to the original request location before processing the auth code response.\r\n },\r\n cache: {\r\n cacheLocation: \"sessionStorage\", // Configures cache location. \"sessionStorage\" is more secure, but \"localStorage\" gives you SSO between tabs.\r\n storeAuthStateInCookie: true, // Set this to \"true\" if you are having issues on IE11 or Edge\r\n }\r\n};\r\nexport const clientApp = new Msal.UserAgentApplication(msalConfig, { loadFrameTimeout: 30000 });\r\n// (2) Acquire Access Token using Login Redirect\r\nclientApp.handleRedirectCallback(async () => {\r\n clientApp.authority = sessionStorage.CustomAuthUrl;\r\n clientApp.clientId = sessionStorage.CustomAuthClientId;\r\n clientApp.config.auth.authority = sessionStorage.CustomAuthUrl;\r\n clientApp.config.auth.clientId = sessionStorage.CustomAuthClientId;\r\n // handle redirect response or error\r\n // if the user is already logged in you can acquire a token\r\n if (clientApp.getAccount()) {\r\n await clientApp.acquireTokenSilent({\r\n scopes: b2cScopes,\r\n loginHint: sessionStorage.loggedUser,\r\n }).then(async (response) => {\r\n sessionStorage.setItem(\"tokenResponse\", JSON.stringify(response));\r\n await storeToken(response.accessToken);\r\n await saveUserProperties();\r\n }).catch(acquireTokenError => {\r\n try {\r\n clientApp.acquireTokenRedirect({\r\n scopes: b2cScopes,\r\n loginHint: sessionStorage.loggedUser,\r\n });\r\n } catch (error) {\r\n console.log(`A loging error occurred on the second attempt to acquire token: --> ${error}`);\r\n settings.saveLoginError(acquireTokenError);\r\n }\r\n });\r\n } else {\r\n // user is not logged in, you will need to log them in to acquire a token\r\n console.log(\"USER IS NOT LOGGED IN\");\r\n }\r\n});\r\n\r\n// export const clientApp = new Msal.UserAgentApplication({\r\n// auth: {\r\n// clientId: auth.clientId,\r\n// authority: auth.authority,\r\n// validateAuthority: false,\r\n// }\r\n// });\r\n\r\n// clientApp.handleRedirectCallback(async (error, response) => {\r\n// sessionStorage.setItem('isloadingAccessToken', false);\r\n// if (error) {\r\n// let { errorMessage } = error;\r\n// settings.saveLoginError(errorMessage);\r\n// } else {\r\n// if (clientApp.getAccount()) {\r\n// var tokenRequest = {\r\n// scopes: b2cScopes\r\n// };\r\n// await clientApp.acquireTokenSilent(tokenRequest)\r\n// .then(async response => {\r\n// await storeToken(response.accessToken);\r\n// await saveUserProperties();\r\n// })\r\n// .catch(err => {\r\n// session.logout()\r\n// });\r\n// }\r\n// else {\r\n// // user is not logged in, you will need to log them in to acquire a token\r\n// session.logout()\r\n// }\r\n// }\r\n// });\r\n\r\n//used to retrieve existing session thru async redux\r\nexport const tokenSaveUserProperties = async (accessToken, rpxEmulation = false) => {\r\n try {\r\n //console.log(\"accessToken\", accessToken);\r\n //using a custom fetch call because for whatever reason accessToken refuses to be translated from local to session prior to this call being made\r\n //custom fetch allows me to set a custom set of headers and the custom url\r\n let customHeader = {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Bearer \" + accessToken,\r\n 'X-Policy': storedXPolicy()\r\n };\r\n let apiPath = baseApiUrl + '/usr/PrincipalUser';\r\n await customFetch(apiPath, customHeader, true).then(data => {\r\n if (data) {\r\n //need to read data to see if current environment is beta & if user is allowed to beta\r\n let env = process.env.REACT_APP_ENVIRONMENT;\r\n if (env === \"staging\" && (!data.BetaAllowed || data.BetaAllowed === false) && (!data.IsWholesSale || data.IsWholeSale === false)) {\r\n sessionStorage.setItem(\"beta_access_denied\", true);\r\n store.dispatch({ type: actions.REDIRECT_BETA_ACCESS });\r\n } else {\r\n // set redux store to loggedIn:true, redirecting:false\r\n storeToken(accessToken, rpxEmulation);\r\n setUserPropsToSessionStorage(data);\r\n store.dispatch({ type: actions.LOGIN_USER });\r\n store.dispatch({ type: actions.RECEIVE_TOKEN, accessToken: accessToken });\r\n }\r\n } else {\r\n session.logout();\r\n //store.dispatch({type: actions.START_LOGIN});\r\n }\r\n }).catch((exc) => {\r\n console.log('error tokenSaveUserProperties: ' + exc);\r\n session.logout();\r\n //store.dispatch({type: actions.START_LOGIN});\r\n });\r\n }\r\n catch (ex) {\r\n console.log('error2 tokenSaveUserProperties: ' + ex);\r\n }\r\n};\r\n\r\nexport const storeToken = async (accessToken, rpxEmulation = false) => {\r\n\r\n let decodedToken = jwtDecode(accessToken);\r\n\r\n store.dispatch({ type: actions.RECEIVE_TOKEN, accessToken: accessToken });\r\n sessionStorage.setItem(\"accessToken\", accessToken);\r\n sessionStorage.setItem(\"refreshToken\", \"\");\r\n sessionStorage.setItem(\"xpolicy\", decodedToken.tfp);\r\n sessionStorage.setItem(\"userGivenName\", decodedToken.given_name);\r\n sessionStorage.setItem(\"expiration\", decodedToken.exp);\r\n sessionStorage.setItem(\"loggedIn\", true);\r\n sessionStorage.setItem(\"RPXLogin\", rpxEmulation);\r\n // if (!rpxEmulation)\r\n // sessionStorage.removeItem('emulatedUser');\r\n\r\n sessionStorage.setItem(\"redirecting\", false);\r\n sessionStorage.setItem(\"tokenIsValid\", true);\r\n sessionStorage.setItem(\"sessionStart\", currentTime);\r\n\r\n};\r\n\r\nconst saveUserProperties = async () => {\r\n try {\r\n fetchData(\"usr/PrincipalUser\").then(data => {\r\n if (data) {\r\n //need to read data to see if current environment is beta & if user is allowed to beta\r\n let env = process.env.REACT_APP_ENVIRONMENT;\r\n if (env === \"staging\" && (!data.BetaAllowed || data.BetaAllowed === false) && (!data.IsWholesSale || data.IsWholeSale === false)) { //&& data.BetaAllowed === false && data.IsWholeSale === false) {\r\n sessionStorage.setItem(\"beta_access_denied\", true);\r\n store.dispatch({ type: actions.REDIRECT_BETA_ACCESS });\r\n } else {\r\n // set redux store to loggedIn:true, redirecting:false\r\n setUserPropsToSessionStorage(data);\r\n store.dispatch({ type: actions.LOGIN_USER });\r\n }\r\n } else {\r\n //error so nothing is returned from PrincipalUser. Need to logout because user experience will be blank\r\n session.logout();\r\n }\r\n }).catch((exc) => {\r\n console.log(exc);\r\n session.logout();\r\n });\r\n } catch (ex) {\r\n session.logout();\r\n }\r\n};\r\n\r\nexport function encryptKey(value) { // encrypting specific user identity property to avoid bypass by manipulating session storage\r\n // Generate a random key\r\n const key = new Uint8Array(16);\r\n window.crypto.getRandomValues(key);\r\n // Encrypt the value using the Substitution Cipher algorithm\r\n let encryptedValue = \"\";\r\n for (let i = 0; i < value.length; i++) {\r\n const charCode = value.charCodeAt(i) ^ key[i % key.length];\r\n encryptedValue += String.fromCharCode(charCode);\r\n }\r\n // Convert the key to a regular array before stringifying\r\n let output = [encryptedValue, Array.from(key)];\r\n return JSON.stringify(output);\r\n}\r\n\r\nexport function decryptKey(arr) {\r\n try {\r\n arr = JSON.parse(arr);\r\n // Convert the key back to a Uint8Array after parsing\r\n let encryptedValue = arr[0];\r\n let key = new Uint8Array(arr[1]);\r\n let decryptedValue = \"\";\r\n for (let i = 0; i < encryptedValue.length; i++) {\r\n const charCode = encryptedValue.charCodeAt(i) ^ key[i % key.length];\r\n decryptedValue += String.fromCharCode(charCode);\r\n }\r\n if (decryptedValue == sessionStorage.userId) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n } catch (error) {\r\n return false;\r\n }\r\n}\r\n\r\nconst setUserPropsToSessionStorage = data => {\r\n sessionStorage.setItem(\"MSTeamsRoutingType\", data.MSTeamsRoutingType); // (10/127/2022) * added for MS Teams configuration\r\n sessionStorage.setItem(\"VoipSwitch\", data.VoipSwitch);\r\n sessionStorage.setItem(\"userFullName\", data.Name);\r\n sessionStorage.setItem(\"userEmail\", data.Email);\r\n sessionStorage.setItem(\"userId\", data.UserId);\r\n sessionStorage.setItem(\"enterpriseId\", data.EnterpriseId);\r\n sessionStorage.setItem(\"enterpriseType\", data.EnterpriseType); // (9/18/2020) * added for AD Sync User List retrieval\r\n sessionStorage.setItem(\"username\", data.Username);\r\n sessionStorage.setItem(\"userEnterpriseNumber\", data.EnterpriseNumber);\r\n sessionStorage.setItem(\"userRole\", data.Role);\r\n sessionStorage.setItem(\"userType\", data.UserType);\r\n sessionStorage.setItem(\"userTypeId\", data.UserTypeId);\r\n sessionStorage.setItem(\"IsWholesale\", data.IsWholesale);\r\n sessionStorage.setItem(\"userHasServices\", data.HasServices);\r\n sessionStorage.setItem(\"userReadPermission\", data.ReadPermission);\r\n sessionStorage.setItem(\"userWritePermission\", data.WritePermission);\r\n sessionStorage.setItem(\"userTimeZone\", data.TZAbbr);\r\n sessionStorage.setItem(\"beta_access_denied\", false);\r\n sessionStorage.setItem(\"salesGroupId\", data.Reseller.CompanyInfo.SalesGroupId);\r\n sessionStorage.setItem(\"serviceProviderName\", data.Reseller.CompanyInfo.ServiceProviderName);\r\n sessionStorage.setItem(\"enableMFA\", data.EnableMFA);\r\n sessionStorage.setItem(\"verificationMethod\", data.VerificationMethod); // TSV\r\n sessionStorage.setItem(\"MFAOption\", data.MFAOption); // TSV\r\n sessionStorage.setItem(\"IsOktaPushEnabled\", data.IsOktaPushEnabled);\r\n sessionStorage.setItem(\"MfaAllowAuthApp\", data.MfaAllowAuthApp);\r\n sessionStorage.setItem(\"MfaAllowSms\", data.MfaAllowSms);\r\n sessionStorage.setItem(\"AccountNumber\", data.AccountNumber);\r\n};\r\n\r\nconst refreshTokenIfExpired = async expInSecs => {\r\n let currentTime = Date.now();\r\n let expInMillisecs = parseInt(expInSecs) * 1000;\r\n if (expInMillisecs < currentTime) session.rpxTokenUpdater();\r\n};\r\n\r\nexport const retrieveCustomConfigs = async (HostName) => {\r\n return await fetchData(\"usr/WLGetUIConfig?HostName=\" + HostName, true, false);\r\n};","import { store } from '../store/store';\r\nimport * as actions from './../store/actions';\r\nimport entries from 'object.entries';\r\nimport moment from 'moment';\r\nexport const searchDelay = 1000;\r\nexport const unauthorized = 401;\r\nexport const loginTimeout = 1000 * 30;\r\nexport const redirectTimeout = 1000 * 10;\r\nexport const noResultsMsg = 'No results for the search term provided.';\r\nexport const signInPageButtonLabel = process.env.REACT_APP_SIGNIN_PAGE_BTN_LABEL;\r\nexport const idleLogoutTime = 1000 * 60 * 20;\r\nexport const idleLogoutWarning = 1000 * 60;\r\n\r\nexport const saveLoginError = (errorMsg, errorDescription='') => {\r\n let actionParams = {\r\n loginError: errorMsg.toString(),\r\n loginErrorDescription: errorDescription.toString()\r\n }\r\n store.dispatch({type: actions.SAVE_LOGIN_ERROR, ...actionParams});\r\n saveToSessionStorage(actionParams);\r\n}\r\n\r\nexport const setLocation = (locationAccountNumber, locationAddress) => {\r\n let actionParams = {\r\n LocationAccountNumber: locationAccountNumber, \r\n LocationAddress: locationAddress,\r\n }\r\n store.dispatch({type: actions.SET_LOCATION, ...actionParams});\r\n saveToSessionStorage(actionParams);\r\n}\r\n\r\nexport const setQuickViewLocation = (locationAccountNumber) => {\r\n let actionParams = {\r\n QuickViewLocationAccountNumber: locationAccountNumber\r\n }\r\n //QUICK FIX FOR QUICK VIEW NOT LOADING BECAUSE OF VALUE IS ALREADY DISPATCH\r\n store.dispatch({type: actions.SET_QUICK_VIEW_LOCATION, ...{}});\r\n\r\n store.dispatch({type: actions.SET_QUICK_VIEW_LOCATION, ...actionParams});\r\n}\r\n\r\nexport const selectService = (userId, serviceNumber, pbxUserId = null, extension=null) => {\r\n // triggers call to MyServices to retrieve remaining service properties\r\n let actionParams = {SelectedUserId: userId, ServiceNumber: serviceNumber, PBXUserID: pbxUserId, Extension: extension};\r\n store.dispatch({type: actions.SERVICE_SELECTED, ...actionParams});\r\n saveToSessionStorage(actionParams);\r\n}\r\n\r\nexport const setService = (service) => {\r\n let actionParams = {};\r\n if (service) \r\n actionParams = {\r\n ServiceId: service.ServiceId,\r\n ServiceNumber: service.ServiceNumber, \r\n SelectedUserId: service.UserId,\r\n AccountNumber: service.LocationAccountNumber,\r\n DirectoryNumber:service.DirectoryNumber,\r\n PBXUserID: service.PBXUserID,\r\n Extension:service.Extension,\r\n isSelectedServiceIpTrunking: service.IsIPTrunking,\r\n //reset date filters on call logs when selected user/service changes\r\n usercl_call_type: \"1\",\r\n usercl_status_type: \"1\",\r\n usercl_call_category: \"1\",\r\n usercl_date_type: \"1\",\r\n usercl_from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n usercl_to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\")\r\n };\r\n else\r\n actionParams = {\r\n ServiceId: 0,\r\n ServiceNumber: '', \r\n SelectedUserId: sessionStorage.SelectedUserId,\r\n AccountNumber: sessionStorage.userEnterpriseNumber,\r\n DirectoryNumber:'',\r\n PBXUserID: '',\r\n Extension: '',\r\n isSelectedServiceIpTrunking: false,\r\n //reset date filters on call logs when selected user/service changes\r\n usercl_call_type: \"1\",\r\n usercl_status_type: \"1\",\r\n usercl_call_category: \"1\",\r\n usercl_date_type: \"1\",\r\n usercl_from_date: moment(Date.now()).startOf(\"day\").format(\"YYYY-MM-DD\"),\r\n usercl_to_date: moment(Date.now()).endOf(\"day\").format(\"YYYY-MM-DD\")\r\n };\r\n saveToSessionStorage(actionParams);\r\n store.dispatch({type: actions.SET_SERVICE, ...actionParams});\r\n}\r\n\r\nexport const setCLFilters = (cl_call_type, cl_status_type, cl_call_category, cl_date_type, cl_from_date, cl_to_date, user = null) => {\r\n let actionParams = {};\r\n if (user)\r\n {\r\n actionParams = {\r\n usercl_call_type: cl_call_type,\r\n usercl_status_type: cl_status_type,\r\n usercl_call_category: cl_call_category,\r\n usercl_date_type: cl_date_type,\r\n usercl_from_date: cl_from_date,\r\n usercl_to_date: cl_to_date\r\n }\r\n store.dispatch({type: actions.SET_SUBSCRIBER_CALL_LOGS_FILTER, ...actionParams});\r\n saveToSessionStorage(actionParams);\r\n } else {\r\n actionParams = {\r\n cl_call_type: cl_call_type,\r\n cl_status_type: cl_status_type,\r\n cl_call_category: cl_call_category,\r\n cl_date_type: cl_date_type,\r\n cl_from_date: cl_from_date,\r\n cl_to_date: cl_to_date\r\n }\r\n store.dispatch({type: actions.SET_CALL_LOGS_FILTER, ...actionParams});\r\n saveToSessionStorage(actionParams);\r\n }\r\n}\r\n\r\nconst sameServiceSelected = (serviceNumber) => {\r\n return sessionStorage.ServiceNumber === serviceNumber\r\n}\r\n\r\nconst saveToSessionStorage = (actionParams) => {\r\n // save action params to local storage so they persist across page loads\r\n entries(actionParams).map(([key, value]) => {\r\n if (value === undefined || value === null) {\r\n sessionStorage.removeItem(key);\r\n } else {\r\n sessionStorage.setItem(key, value);\r\n }\r\n });\r\n}\r\n\r\nexport const setGlobalSearchValue = (value) => {\r\n let actionParams = {\r\n GlobalSearch: value\r\n }\r\n saveToSessionStorage(actionParams);\r\n}\r\n\r\nexport const getGlobalSearchValue = () => {\r\n return sessionStorage.getItem(\"GlobalSearch\");\r\n}","import * as config from \"./../requests/config\";\r\nimport * as settings from \"./settings\";\r\nimport * as helper from \"./helper\";\r\nimport jwtDecode from \"jwt-decode\";\r\n\r\nexport const loggedIn = () => {\r\n return sessionStorage.loggedIn ? true : null;\r\n};\r\n\r\nexport const storedAccessToken = () => sessionStorage.accessToken;\r\n\r\nexport const urlEncodedToken = () => {\r\n return encodeURI(sessionStorage.accessToken);\r\n}\r\n\r\nexport const getEnterpriseId = () => { return sessionStorage.userEnterpriseNumber; };\r\n\r\nexport const getExpirationForEmb = () => {\r\n let d = new Date(0);\r\n d.setUTCMilliseconds(sessionStorage.expiration * 1000);\r\n let month = d.getMonth();\r\n if (month === 12)\r\n month = 1;\r\n else\r\n month += 1;\r\n let minutes = d.getMinutes();\r\n if (minutes < 10)\r\n minutes = '0' + minutes.toString();\r\n let formattedDate = month.toString() + '/' + d.getDate() + \"/\" + d.getFullYear() + \" \" + d.getHours() + \":\" + minutes;\r\n return formattedDate; //may need to be URIEncoded too\r\n};\r\n\r\nexport const storedXPolicy = () => sessionStorage.xpolicy;\r\n\r\nexport const tokenIsValid = () => {\r\n //console.log('valid token check from ' + methodName);\r\n if (sessionStorage.accessToken) {\r\n\r\n let decodedToken = jwtDecode(sessionStorage.accessToken);\r\n let currentTime = new Date();\r\n let expirationOnCurrentToken = decodedToken.exp;\r\n const d = new Date(0);\r\n d.setUTCSeconds(expirationOnCurrentToken);\r\n\r\n if (currentTime > d) {\r\n sessionStorage.setItem('tokenIsValid', false);\r\n return false;\r\n }\r\n else if (sessionStorage.tokenIsValid) {\r\n return sessionStorage.tokenIsValid && sessionStorage.tokenIsValid.toString().toLowerCase() === 'true' ? true : false;\r\n }\r\n else {\r\n console.log('token is invalid because it is not in sessionStorage')\r\n return false;\r\n }\r\n }\r\n return false;\r\n\r\n}\r\n\r\nexport const isNewSession = () => helper.atLoginPath() && loggedIn();\r\n\r\nexport const isTestSession = () => helper.toBoolean(sessionStorage.testSession);\r\n\r\nexport const isRpxSession = () => helper.toBoolean(sessionStorage.RPXLogin);\r\n\r\nexport const storedUserType = () => sessionStorage.UserType;\r\n\r\nexport const IsWholesale = () => sessionStorage.IsWholesale === \"true\";\r\n\r\nexport const customLogoSmall = () => sessionStorage.customLogoSmall;\r\n\r\nexport const customLogoLarge = () => sessionStorage.customLogoLarge;\r\n\r\nexport const storedVendorId = () => sessionStorage.vendorId;\r\n\r\nexport const tokenUpdater = requestToken => {\r\n if (!sessionStorage.loggedIn) return false;\r\n if (requestToken) {\r\n if (isRpxSession()) {\r\n rpxTokenUpdater();\r\n } else {\r\n silenTokenUpdater();\r\n }\r\n }\r\n};\r\n\r\nexport const parsedUsername = () => {\r\n if (sessionStorage.username) return sessionStorage.username;\r\n //if (sessionStorage.username) {\r\n //return sessionStorage.username.split('@')[0];\r\n};\r\n\r\nexport const parsedEmulatedUser = () => {\r\n if (sessionStorage.username) return sessionStorage.emulatedUser;\r\n};\r\n\r\nexport const silenTokenUpdater = async () => {\r\n let rpxEmulation = sessionStorage.getItem('emulatedUser') ? true : false;\r\n await config.clientApp.acquireTokenSilent({\r\n scopes: config.b2cScopes,\r\n loginHint: sessionStorage.loggedUser,\r\n }).then(async (response) => {\r\n await config.storeToken(response.accessToken, rpxEmulation); // stores in sessionStorage\r\n }).catch(acquireTokenError => {\r\n // could also check if err instance of InteractionRequiredAuthError if you can import the class.\r\n try {\r\n config.clientApp.acquireTokenRedirect({\r\n scopes: config.b2cScopes,\r\n loginHint: sessionStorage.loggedUser,\r\n });\r\n } catch (error) {\r\n console.log(`A loging error occurred on the second attempt to acquire token: --> ${error}`);\r\n settings.saveLoginError(acquireTokenError);\r\n }\r\n });\r\n};\r\n\r\nexport const rpxTokenUpdater = () => {\r\n let body = JSON.stringify(sessionStorage.refreshToken);\r\n let auth =\r\n \"Basic \" +\r\n btoa(\r\n sessionStorage.emulatedUser + \":\" + process.env.REACT_APP_PRPX_BASIC_PWD\r\n );\r\n let url = config.baseApiUrl + \"auth/RefreshAzureToken\";\r\n //let localurl = \"https://localhost:44330/api/auth/RefreshAzureToken\";\r\n fetch(url, {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Accept: \"application/json\",\r\n Authorization: auth\r\n },\r\n body: body\r\n })\r\n .then(response => {\r\n if (response.ok) {\r\n response.json().then(json => {\r\n json.EmulatorUsername = sessionStorage.emulatedUser;\r\n config.storeRPXToken(json);\r\n });\r\n } else {\r\n }\r\n })\r\n .catch(message => {\r\n if (message.status === 401) {\r\n console.log(\"rpxTokenUpdater->error\");\r\n console.log(message.status);\r\n }\r\n\r\n logout();\r\n });\r\n};\r\n\r\nexport const logout = () => {\r\n let username = '';\r\n if (sessionStorage.username)\r\n username = sessionStorage.username;\r\n else if (sessionStorage.loginUserName)\r\n username = sessionStorage.loginUserName;\r\n\r\n let redirectUri = encodeURIComponent(window.location.protocol + \"//\" + window.location.host + \"/session\");\r\n\r\n if (username !== '')\r\n redirectUri += '?username=' + username;\r\n\r\n sessionStorage.clear();\r\n //institute something here to say i am logged out on this tab\r\n sessionStorage.setItem('loggingOut', true);\r\n //localStorage.removeItem('accessToken');\r\n //config.clientApp.logout();\r\n localStorage.clear();\r\n // setting xpolicy\r\n let object = {\r\n tenant:\r\n process.env.REACT_APP_ENVIRONMENT === \"development\"\r\n ? \"gomomentumdev.onmicrosoft.com\"\r\n : \"momentumbrain.onmicrosoft.com\",\r\n // policy: \"B2C_1_SignIn\",\r\n policy: storedXPolicy() === undefined ? process.env.REACT_APP_MSA_XPOLICY : storedXPolicy(),\r\n post_logout_redirect_uri: redirectUri,\r\n url: process.env.REACT_APP_ENVIRONMENT === \"development\"\r\n ? \"https://gomomentumdev.b2clogin.com/\"\r\n : \"https://momentumbrain.b2clogin.com/\"\r\n };\r\n let newLocation = object.url +\r\n object.tenant +\r\n \"/oauth2/logout?p=\" +\r\n object.policy +\r\n \"&post_logout_redirect_uri=\" +\r\n object.post_logout_redirect_uri;\r\n\r\n window.location = newLocation;\r\n};\r\n\r\n\r\nexport const transitionTimeout = () => {\r\n // prevents redirect page from getting hung\r\n setTimeout(() => {\r\n if (stillRedirecting()) {\r\n sessionStorage.removeItem(\"timer\");\r\n logout();\r\n }\r\n }, redirectTimer());\r\n};\r\n\r\nconst stillRedirecting = () => helper.toBoolean(sessionStorage.redirecting);\r\n\r\nconst redirectTimer = () => {\r\n if (window.location.href.indexOf(\"#state=\") !== -1) {\r\n // appended to url if redirected from MS login page\r\n async () => await sessionStorage.setItem(\"timer\", settings.loginTimeout);\r\n return settings.loginTimeout;\r\n } else {\r\n return sessionStorage.timer || settings.redirectTimeout;\r\n }\r\n};\r\n","export const UPDATE_TOKEN_STATUS = 'UPDATE_TOKEN_STATUS';\nexport const LOGIN_USER = 'LOGIN_USER';\nexport const RESTART_SESSION = 'RESTART_SESSION';\nexport const SAVE_LOGIN_ERROR = 'SAVE_LOGIN_ERROR';\nexport const REFRESH_TOKEN = 'REFRESH_TOKEN';\nexport const REDIRECTING = 'REDIRECTING';\nexport const SET_LOCATION = 'SET_LOCATION';\nexport const SET_QUICK_VIEW_LOCATION = 'SET_QUICK_VIEW_LOCATION';\nexport const SERVICE_SELECTED = 'SERVICE_SELECTED';\nexport const SET_SERVICE = 'SET_SERVICE';\nexport const SERVICES_SET = 'SERVICES_SET';\nexport const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';\nexport const REDIRECT_BETA_ACCESS = 'REDIRECT_BETA_ACCESS';\nexport const RECEIVE_TOKEN = 'RECEIVE_TOKEN';\nexport const TOKEN_LOADED = 'TOKEN_LOADED';\nexport const START_LOGIN = 'START_LOGIN';\nexport const PERMISSIONS_UPDATED = 'PERMISSIONS_UPDATED';\nexport const RECEIVE_CUSTOM_IMAGE = 'RECEIVE_CUSTOM_IMAGE';\nexport const SET_CALL_LOGS_FILTER = 'SET_CALL_LOGS_FILTER';\nexport const SET_SUBSCRIBER_CALL_LOGS_FILTER = 'SET_SUBSCRIBER_CALL_LOGS_FILTER';\nexport const UI_SKINS_APPLIED = 'UI_SKINS_APPLIED';\nexport const IP_TRUNKING_ONLY_SET = 'IP_TRUNKING_ONLY_SET';\nexport const SET_MSP_LOGIN_DATA = 'SET_MSP_LOGIN_DATA';\nexport const VALIDATE_MFA = 'VALIDATE_MFA';","import { applyMiddleware, createStore } from 'redux';\r\nimport thunk from 'redux-thunk';\r\nimport { reducers } from './redux';\r\n\r\nexport function configureStore(initialState = {}) {\r\n const store = createStore(reducers, initialState, applyMiddleware(thunk));\r\n return store;\r\n }\r\n\r\nexport const store = configureStore();","import React, { Component } from \"react\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"@progress/kendo-theme-default/dist/all.css\";\r\nimport \"../../css/bootstrap.css\";\r\nimport \"../../css/app.css\";\r\nimport \"../../css/spinner.css\";\r\nimport \"../../css/msp_resetpassword.css\";\r\nimport * as helper from \"../../scripts/helper\";\r\nimport * as config from \"../../requests/config\";\r\nimport momentumLogoWhite from \"../../images/momentum_logo_white.svg\";\r\nimport { connect } from \"react-redux\";\r\n\r\n\r\nconst Password1 = \"Password1\", Password2 = \"Password2\";\r\n\r\nclass ResetPassword extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n Email: '',\r\n Error: \"\",\r\n validationError: \"\",\r\n Logo: momentumLogoWhite,\r\n password1: '',\r\n password2: '',\r\n isNetworkError: false,\r\n isInvalidUser: true,\r\n isShowBackButton:false\r\n };\r\n }\r\n\r\n getCustomizations = async currentUrl => {\r\n const b2cResults = await helper.getB2CConfigResults(currentUrl);\r\n this.loadingLogo = helper.IsWholesaleDomain(currentUrl)\r\n ? this.loadingLogo\r\n : momentumLogoWhite;\r\n const customAuthPolicy = this.preProcessCustomizations(b2cResults);\r\n\r\n await this.setState({ auth: customAuthPolicy, loading: false });\r\n };\r\n\r\n preProcessCustomizations = b2cResults => {\r\n let customAuthPolicy = config.auth;\r\n if (b2cResults) {\r\n const authority =\r\n config.authorityUrl +\r\n b2cResults.B2CPolicy +\r\n config.defaultXPolicyConfig;\r\n customAuthPolicy = {\r\n clientId: b2cResults.B2CClientId,\r\n authority: authority,\r\n b2cScopes: []\r\n };\r\n const { LogoSmall, LogoLarge, VendorName, BrowserIcon } = b2cResults;\r\n this.loadingLogo = LogoLarge;\r\n helper.updateFavicon(BrowserIcon);\r\n if (!helper.isDigitalServicesDomain()) {\r\n helper.setTitle(VendorName);\r\n }\r\n }\r\n return customAuthPolicy;\r\n };\r\n\r\n componentDidMount() {\r\n // this.props.history.push(\"\\session\");\r\n const domain = helper.getDomain();\r\n this.getCustomizations(domain);\r\n }\r\n\r\n handleOnChange = (type, event) => {\r\n let state = { ...this.state };\r\n\r\n switch (type) {\r\n case Password1:\r\n state.password1 = event.target.value;\r\n break;\r\n case Password2:\r\n state.password2 = event.target.value;\r\n break;\r\n }\r\n if (state.password1.length > 0 && state.password1.length < 8) {\r\n state.valid = false;\r\n state.validMessage = 'Password must be at least 8 characters long';\r\n } else if (!this.ValidPassword(state.password1)) {\r\n state.valid = false;\r\n state.validMessage = 'The password must contain at least 1 number or special character, at least 1 lower case letter, and at least 1 upper case letter';\r\n }\r\n else if ((state.password1 && state.password2 && state.password1 !== state.password2) || (state.password1 && !state.password2) || (!state.password1 && state.password2)) {\r\n state.valid = false;\r\n state.validMessage = \"The password is not the same\";\r\n } else if (state.password1 && state.password2 && state.password1 === state.password2) {\r\n state.valid = true;\r\n state.validMessage = \"\";\r\n }\r\n this.setState(state);\r\n }\r\n\r\n ValidPassword = (pw) => {\r\n //var reg = /^.*(?=.{8,})(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).*/;\r\n var reg = /^.*(?=.{8,})(?=.*([\\d]|[!@#$%^&*{}_+=\\[\\]:;'\",<.>/?_`~\\\\\\|-]))(?=.*[a-z])(?=.*[A-Z]).*/;\r\n var test = reg.test(pw);\r\n return test;\r\n }\r\n decode = (value) => {\r\n let base64ToString = new Buffer.from(value, \"base64\").toString();\r\n return base64ToString;\r\n }\r\n handleOnBack = () => {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n\r\n handleOnSave = () => {\r\n if (!this.state.valid) {\r\n return;\r\n }\r\n else {\r\n let state = { ...this.state };\r\n state.savingLoading = true;\r\n state.savingShowSuccess = false;\r\n this.setState(state);\r\n //new Buffer.from(window.location.search.replace('?token=',''), \"base64\").toString().split(',')[2].replace('userName=','')\r\n var token = new URLSearchParams(window.location.search).get(\"token\");\r\n var decodedToken = this.decode(token);\r\n var userName = '';\r\n var params = decodedToken.split(',');\r\n for (var index = 0; index < params.length; index++) {\r\n if (params[index].startsWith('userName=')) {\r\n userName = params[index].replace('userName=', '');\r\n break;\r\n }\r\n }\r\n helper.ValidateResetPassword(window.location.href, state.password1, userName).then((response) => {\r\n if (response == null) {\r\n this.setState({ Error: \"Token link has expired.\", validationError: \"Please click Back to go to Login page.\",isShowBackButton:true });\r\n \r\n return;\r\n }\r\n else {\r\n this.setState({\r\n isNetworkError: false,\r\n });\r\n if (response) {\r\n var responseCode = parseInt(response);\r\n if (responseCode == 500) {\r\n this.setState({ Error: \"An internal server error has occurred.\", validationError: \"Please return to the Sign In page and try Forgot Password again. Contact your Administrator if the error persists.\" });\r\n return;\r\n }\r\n else if (responseCode == 401) {\r\n this.setState({ Error: \"The token cannot be decoded.\", validationError: \"Please check the url.\" });\r\n return;\r\n }\r\n else if (responseCode == 406) {\r\n this.setState({ Error: \"Token link has expired.\", validationError: \"Please click Back to go to Login page.\",isShowBackButton:true });\r\n return;\r\n }\r\n else {\r\n this.setState({ Error: \"\" });\r\n }\r\n }\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n }).catch(async err => {\r\n console.log(err);\r\n this.setState({\r\n isNetworkError: Boolean(err.message),\r\n Error: \"Unable to reach server\",\r\n validationError: \"\"\r\n });\r\n });\r\n }\r\n }\r\n resetForm = () => {\r\n let state = this.state;\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n resetFormInner = () =>{\r\n if(this.state.isShowBackButton){\r\n return (\r\n \r\n
\r\n \r\n
\r\n Reset Password
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n We recommend you choose a strong password to protect your online profile. The password length must be at least 8 characters. The password must contain at least 1 number or special character, at least 1 lower case letter, and at least 1 upper case letter.
\r\nAvoid using passwords that can be easily guessed such as your name, telephone number, social security number, or account number.
\r\n\r\n \r\n
\r\n {this.resetFormInner()}\r\n {this.state.Error}
\r\n{this.state.validationError}
\r\n {this.getValidationError()}\r\n \r\n
);\r\n }\r\n else {\r\n return (\r\n Back\r\n
\r\n \r\n
);\r\n }\r\n }\r\n getValidationError = () => {\r\n if (!this.state.valid && this.state.validMessage) {\r\n return (\r\n \r\n { this.handleOnChange(Password1, x) }} />\r\n
\r\n \r\n \r\n { this.handleOnChange(Password2, x) }} />\r\n
\r\n {this.getValidationError()}\r\n \r\n \r\n Save\r\n
\r\n {this.state.validMessage}
)\r\n }\r\n return \"\";\r\n }\r\n resetContainer = () => {\r\n if (this.state.isInvalidUser) {\r\n return this.resetForm();\r\n }\r\n else {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n }\r\n\r\n render() {\r\n return this.resetContainer();\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n restartSession: helper.toBoolean(state.reducer.restartSession),\r\n loginError: state.reducer.loginError,\r\n loginErrorDescription: state.reducer.loginErrorDescription,\r\n };\r\n};\r\nexport default withRouter(connect(mapStateToProps)(ResetPassword));","import React, { Component } from \"react\";\r\nimport { DataLoadingSpinner } from \"../../components/spinners\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport \"@progress/kendo-theme-default/dist/all.css\";\r\nimport \"../../css/bootstrap.css\";\r\nimport \"../../css/app.css\";\r\nimport \"../../css/spinner.css\";\r\nimport \"../../css/msp_validateEmail.css\";\r\nimport * as helper from \"../../scripts/helper\";\r\nimport * as config from \"../../requests/config\";\r\nimport momentumLogoWhite from \"../../images/momentum_logo_white.svg\";\r\nimport { connect } from \"react-redux\";\r\n\r\nclass ValidateMfaEmail extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n email: '',\r\n Error: \"\",\r\n validationError: \"\",\r\n Logo: momentumLogoWhite,\r\n password1: '',\r\n password2: '',\r\n isNetworkError: false,\r\n isInvalidUser: true,\r\n isShowBackButton: false\r\n };\r\n }\r\n\r\n getCustomizations = async currentUrl => {\r\n const b2cResults = await helper.getB2CConfigResults(currentUrl);\r\n this.loadingLogo = helper.IsWholesaleDomain(currentUrl)\r\n ? this.loadingLogo\r\n : momentumLogoWhite;\r\n const customAuthPolicy = this.preProcessCustomizations(b2cResults);\r\n\r\n await this.setState({ auth: customAuthPolicy, loading: false });\r\n };\r\n\r\n preProcessCustomizations = b2cResults => {\r\n let customAuthPolicy = config.auth;\r\n if (b2cResults) {\r\n const authority =\r\n config.authorityUrl +\r\n b2cResults.B2CPolicy +\r\n config.defaultXPolicyConfig;\r\n customAuthPolicy = {\r\n clientId: b2cResults.B2CClientId,\r\n authority: authority,\r\n b2cScopes: []\r\n };\r\n const { LogoSmall, LogoLarge, VendorName, BrowserIcon } = b2cResults;\r\n this.loadingLogo = LogoLarge;\r\n helper.updateFavicon(BrowserIcon);\r\n if (!helper.isDigitalServicesDomain()) {\r\n helper.setTitle(VendorName);\r\n }\r\n }\r\n return customAuthPolicy;\r\n };\r\n\r\n componentDidMount() {\r\n const domain = helper.getDomain();\r\n this.getCustomizations(domain);\r\n var p_email = new URLSearchParams(window.location.search).get(\"email\");\r\n this.setState({ email: p_email })\r\n }\r\n\r\n handleOnChange = (type, event) => {\r\n let state = { ...this.state };\r\n state.email = event.target.value;\r\n this.setState(state);\r\n }\r\n\r\n // ValidPassword = (pw) => {\r\n // var reg = /^.*(?=.{8,})(?=.*([\\d]|[!@#$%^&*{}_+=\\[\\]:;'\",<.>/?_`~\\\\\\|-]))(?=.*[a-z])(?=.*[A-Z]).*/;\r\n // var test = reg.test(pw);\r\n // return test;\r\n // }\r\n decode = (value) => {\r\n let base64ToString = new Buffer.from(value, \"base64\").toString();\r\n return base64ToString;\r\n }\r\n\r\n handleOnBack = () => {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n\r\n handleOnSave = () => {\r\n let state = { ...this.state };\r\n state.savingLoading = true;\r\n state.savingShowSuccess = false;\r\n this.setState(state);\r\n var token = new URLSearchParams(window.location.search).get(\"token\");\r\n var decodedToken = this.decode(token);\r\n var userName = '';\r\n var params = decodedToken.split(',');\r\n for (var index = 0; index < params.length; index++) {\r\n if (params[index].startsWith('userName=')) {\r\n userName = params[index].replace('userName=', '');\r\n break;\r\n }\r\n }\r\n helper.VerifyTwoStepEmail(window.location.href, state.email, userName).then((response) => {\r\n if (response == null) {\r\n this.setState({ Error: \"Token link has expired.\", validationError: \"Please click Back to go to Login page.\", isShowBackButton: true });\r\n return;\r\n }\r\n else {\r\n this.setState({\r\n isNetworkError: false,\r\n });\r\n if (response) {\r\n var responseCode = parseInt(response);\r\n if (responseCode == 500) {\r\n this.setState({ Error: \"An internal server error has occurred.\", validationError: \"Please return to the Sign In page and try again. Contact your Administrator if the error persists.\" });\r\n return;\r\n }\r\n else if (responseCode == 401) {\r\n this.setState({ Error: \"The token cannot be decoded.\", validationError: \"Please check the url.\" });\r\n return;\r\n }\r\n else if (responseCode == 406) {\r\n this.setState({ Error: \"Token link has expired.\", validationError: \"Please click Back to go to Login page.\", isShowBackButton: true });\r\n return;\r\n } else {\r\n this.setState({ Error: \"\" });\r\n }\r\n }\r\n this.setState({ Error: \"\", validationError: \"\", successMessage: \"Success! You may now login and continue with MFA configuration\" });\r\n setTimeout(() => {\r\n helper.redirectToLogin();\r\n }, 3000);\r\n return;\r\n }\r\n }).catch(async err => {\r\n console.log(err);\r\n this.setState({\r\n isNetworkError: Boolean(err.message),\r\n Error: \"Unable to reach server\",\r\n validationError: \"\"\r\n });\r\n });\r\n }\r\n\r\n resetForm = () => {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n resetFormInner = () => {\r\n if (this.state.isShowBackButton) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n MFA Email Validation
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n After email validation, you can log back in to configure MFA for your account.
\r\n\r\n \r\n {this.state.successMessage && this.state.successMessage !== \"\" ?
\r\n {this.resetFormInner()}\r\n {this.state.Error}
\r\n{this.state.validationError}
\r\n
: null}\r\n {this.state.successMessage}
\r\n\r\n {this.getValidationError()}\r\n \r\n
);\r\n }\r\n else {\r\n return (\r\n Back\r\n
\r\n \r\n
);\r\n }\r\n }\r\n\r\n getValidationError = () => {\r\n if (!this.state.valid && this.state.validMessage) {\r\n return (\r\n \r\n
\r\n {this.getValidationError()}\r\n \r\n \r\n Verify MFA Email\r\n
\r\n {this.state.validMessage}
)\r\n }\r\n return \"\";\r\n }\r\n\r\n resetContainer = () => {\r\n if (this.state.isInvalidUser) {\r\n return this.resetForm();\r\n }\r\n else {\r\n helper.redirectToLogin();\r\n return;\r\n }\r\n }\r\n\r\n render() {\r\n return this.resetContainer();\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n redirecting: helper.toBoolean(state.reducer.redirecting),\r\n restartSession: helper.toBoolean(state.reducer.restartSession),\r\n loginError: state.reducer.loginError,\r\n loginErrorDescription: state.reducer.loginErrorDescription,\r\n };\r\n};\r\n\r\nexport default withRouter(connect(mapStateToProps)(ValidateMfaEmail));","export default __webpack_public_path__ + \"static/media/momentum_logo_white.aa6aa308.svg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABmwAAAZsBqMTCdgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKzSURBVEiJtVbNTxNBHH07u+z2w3bbggqSkHg02gKN1JhiQjzIxWiiUePBgzdjJByMQr0YxZMJGuNHOBE10cBB5ebVkJgaQWxKNfwDCrW20JbFstvOekD7te3umMg7zey893u/mZ35zXDLx/t1WIDIHog9feC9PhCXDACg+SxKmTTU2BxoLmsVAoLZoBQKw3nqPMR9foCQxiRKoX5dhPL6BTbnok1jcY1mxHd0Qr5yHWIgaJlpNdTYPLKP7qKUXDaMGdKUDvWj7cHkP5sAgNhzEG0Pn0IKhc2NxEAQ3tExcHZHw0B64Rfyk4+RezIOml1ryOHsDngjdwyJlo34jk54RscAoflvU169hPJmChtvZ6DMTDWfmiDAM3IbfPseo5E8HAFxuZuLAZSS3yvt5W+mXOKWIQ/fqDWSQmGI+7tNhQDASbaqDmfJFw90Q+o7XDFynjhjKQIAzmavtB1OJs3f2IS4ZYj+XjajHa5ym3i8TBrRHwRxuUHEQLD5YawDqTLiZTYj8DxEfy8Iv3M3m6DOiHVGAMDvagch3lZmQe3S+Zh1xNcKwrJ7yoJqI9nDrAM4CDTzk5kudO0FCAEntEDo7GLW0XQKQimVZM/L7oB94NjWwTapIPUopZLAyrlBnWqqvl2gmqqvnB3Uia4o0L7E2ZdhLQO6nmfma4kY9A1lqzKsTz9jEm3ORfHj4mmkLpxEITrLpFmffg7gTwlSFz9jc+GjpagQnQWKRehFDYX376wT+/QBaiJWMQKA3MQ90HzOVGgLD4ATJXAtLbAfOWrKpbkschP3y/2aq1wMBOG7NW66o3RFga7TmjNlQLGIzM2rUOML5U81RU6NLyAdGQJdzTSNwTmdpiZ0NYN0ZKjGxGAEANpSAumRywYiC9TYPNLXLkFbShgTNHvXbftzqx7/4wH5G/bxSF1Mzn/dAAAAAElFTkSuQmCC\""],"sourceRoot":""}