- \";\n message +=\n \"
- EPCOR Account Number is a required field. If not available, please check the ‘I do not have an EPCOR account number’ box. \";\n }\n\n if (\n this.state.houseNumber.length === 0 ||\n this.state.streetName.length === 0\n ) {\n if (message.length === 0) message += \"
- Street address is a required field. \";\n }\n\n if (this.state.city.length === 0) {\n if (message.length === 0) message += \"
- City is a required field. \";\n }\n\n if (this.state.province.length === 0) {\n if (message.length === 0) message += \"
- Province is a required field. \";\n }\n\n if (message.length !== 0) {\n message += \"
- \";\n message += \"
- \";\n message += \"
- \";\n message += \"
- \";\n // message = message.slice(5);\n }\n\n this.setState({ errorMessage: message });\n this.setState({ errorHeader: \"Required Field\" });\n if (message.length === 0) {\n this.setState({ valid: true });\n return true;\n } else {\n this.setState({ valid: false });\n return false;\n }\n }\n\n authenticateUserAPI = (eventType) => {\n this.setState({ loading: true });\n\n var billingAccountNumber = \"\";\n\n if (this.state.checkNoBillingNumber) {\n billingAccountNumber = \"\";\n } else {\n billingAccountNumber = this.state.accountNumber;\n }\n const payLoad = {\n ServiceProviderName:\n \"\" + process.env.REACT_APP_SERVICE_PROVIDER_NAME + \"\",\n billingAccountNumber: \"\" + billingAccountNumber + \"\",\n HouseNumber: \"\" + this.state.houseNumber + \"\",\n StreetName: \"\" + this.state.streetName + \"\",\n City: \"\" + this.state.city + \"\",\n Province: \"\" + this.state.province + \"\",\n UnitNumber: \"\" + this.state.unitNumber ? this.state.unitNumber : \"\" + \"\",\n };\n\n axios(\"\")\n .post(\"/validateLocationAddressWebImport\", JSON.stringify(payLoad))\n .then((response) => {\n this.setState({ loading: false });\n if (response.data.StatusCode === \"200\") {\n const requestType =\n response.data.customerLocationInformation[0]\n .lstRequestTypeCategories;\n var requestTypeToShow = [];\n const select = {\n workflowType: \"--Select--\",\n reqestTypeCategory: \"\",\n requestTypeCode: \"\",\n requestTypeName: \"--Select--\",\n };\n if (this.state.accountNumber !== \"\") {\n requestTypeToShow = requestType;\n requestTypeToShow.unshift(select);\n } else {\n requestTypeToShow.push(select);\n requestType.forEach((item) => {\n if (item.reqestTypeCategory !== \"Billable\") {\n requestTypeToShow.push(item);\n }\n });\n }\n\n const { setUserDetails } = this.context;\n var ud = {\n accountNumber: this.state.accountNumber,\n houseNumber: this.state.houseNumber,\n streetName: this.state.streetName,\n city: this.state.city,\n province: this.state.province,\n streetAddress: this.state.streetAddress,\n fullAddress:\n response.data.customerLocationInformation[0].locationAddress,\n requestType: requestTypeToShow,\n locationId:\n response.data.customerLocationInformation[0].customerLocationId,\n isAuthenticated: true,\n };\n\n sessionStorage.setItem(\"Address\", ud.fullAddress);\n sessionStorage.setItem(\"Loc\", ud.locationId);\n sessionStorage.setItem(\"AccountNumber\", ud.accountNumber);\n sessionStorage.setItem(\"RequestType\", JSON.stringify(ud.requestType));\n sessionStorage.setItem(\n \"Products\",\n JSON.stringify(\n response.data.customerLocationInformation[0].lstAssets\n )\n );\n sessionStorage.setItem(\"SwapMessage\", response.data.Message);\n sessionStorage.setItem(\n \"NewAssetSelectionMessage\",\n response.data.receivingCartInfo\n );\n var userAddress = {\n houseNumber: ud.houseNumber,\n streetName: ud.streetName,\n city: ud.city,\n province: ud.province,\n streetAddress: ud.streetAddress,\n };\n sessionStorage.setItem(\"ud\", JSON.stringify(userAddress));\n\n setUserDetails(ud);\n var segment = \"\";\n if (\n \"\" + process.env.REACT_APP_SEGMENT_1_SEGMENT + \"\" ===\n response.data.customerLocationInformation[0].segmentId\n ) {\n segment = \"SEGMENT_1\";\n } else if (\n \"\" + process.env.REACT_APP_SEGMENT_2_SEGMENT + \"\" ===\n response.data.customerLocationInformation[0].segmentId\n ) {\n segment = \"SEGMENT_2\";\n } else if (\n \"\" + process.env.REACT_APP_SEGMENT_3_SEGMENT + \"\" ===\n response.data.customerLocationInformation[0].segmentId\n ) {\n segment = \"SEGMENT_3\";\n } else if (\n \"\" + process.env.REACT_APP_SEGMENT_4_SEGMENT + \"\" ===\n response.data.customerLocationInformation[0].segmentId\n ) {\n segment = \"SEGMENT_4\";\n }\n\n sessionStorage.setItem(\"Seg\", segment);\n if (eventType === \"create-request\") {\n this.props.history.push({\n pathname: \"/create-request\",\n state: { segment_id: segment },\n });\n } else {\n this.props.history.push({\n pathname: \"/view-request\",\n state: { status: response.data.StatusCode },\n });\n }\n } else if (\n response.data.StatusCode === \"402\" &&\n eventType !== \"create-request\"\n ) {\n sessionStorage.setItem(\"AccountNumber\", this.state.accountNumber);\n sessionStorage.setItem(\n \"Address\",\n this.state.houseNumber +\n \" \" +\n this.state.streetName +\n \" \" +\n this.state.city +\n \" \" +\n this.state.province\n );\n let userAddress = {\n houseNumber: this.state.houseNumber,\n streetName: this.state.streetName,\n city: this.state.city,\n province: this.state.province,\n streetAddress: this.streetAddress,\n };\n sessionStorage.setItem(\"ud\", JSON.stringify(userAddress));\n this.props.history.push({\n pathname: \"/view-request\",\n state: { status: response.data.StatusCode },\n });\n } else {\n this.setState({ valid: false });\n this.setState({ errorHeader: \"Error\" });\n this.setState({ errorMessage: \"\\n\" + response.data.Message });\n }\n })\n .catch((error) => {\n this.setState({ loading: false });\n this.setState({ valid: false });\n this.setState({ errorHeader: \"Error\" });\n this.setState({\n errorMessage: \"\\nSomething went wrong. Please try again.\",\n });\n });\n };\n\n getAlertAPI() {\n //this.setState({loading: true});\n\n SampleAlert.every((item) => {\n if (item.Name === process.env.REACT_APP_SERVICE_PROVIDER_NAME) {\n this.setState({ alertHeader: item.Header__c });\n this.setState({ alertMessage: item.Body__c });\n return false;\n }\n return true;\n });\n }\n\n constructor(props) {\n super(props);\n this.onKeyPress = this.onKeyPress.bind(this);\n this.onTagsChange = this.onTagsChange.bind(this);\n // this.selectedValues = this.selectedValues.bind(this);\n }\n\n onKeyPress(event) {\n // if(event.keyCode === 27) {\n const billImageElement = document.getElementById(\"billImage\");\n billImageElement.style.transform = \"\";\n billImageElement.style.transition = \"\";\n // }\n }\n\n enlargeImg = (event) => {\n if (!event.target.style.transform)\n event.target.style.transform = \"scale(2.5)\";\n else event.target.style.transform = \"\";\n\n // Animation effect\n if (!event.target.style.transition)\n event.target.style.transition = \"transform 0.25s ease\";\n else event.target.style.transition = \"\";\n };\n\n onBillingAccountNumberChecked = (event) => {\n this.setState({ checkNoBillingNumber: event.target.checked });\n var message = this.state.errorMessage;\n if (event.target.checked) {\n this.setState({ accountNumber: \"\" });\n document.querySelector('input[id = \"accountNumber\"]').value = \"\";\n message = message.replace(\"\\n Account Number\", \"\");\n if (message.trim().length === 0) {\n this.setState({ valid: true });\n }\n } else {\n if (\n this.state.errorHeader.length !== 0 &&\n this.state.errorHeader === \"Required Field\"\n ) {\n if (\n this.state.accountNumber.length === 0 &&\n !message.includes(\"Account Number\")\n ) {\n message = \"\\n Account Number\" + message;\n this.setState({ valid: false });\n }\n }\n }\n this.setState({ errorMessage: message });\n };\n\n onSearchButtonClicked = (event) => {\n const isValid = this.checkValidity();\n if (isValid) {\n this.authenticateUserAPI(\"create-request\");\n }\n };\n\n onViewServiceRequestClicked = () => {\n const isValid = this.checkValidity();\n if (isValid) {\n this.authenticateUserAPI(\"view-request\");\n }\n };\n\n // onStreetTypeSelected = (event) => {\n // this.setState({ streetType: event.target.value.trim() });\n // };\n\n onSetProvinceValues = (data) => {\n this.setState({ setProvinceValues: data });\n };\n\n onTagsChange = (value) => {\n this.setState({\n houseNumber: value ? value.HouseNumber : \"\",\n streetName: value ? value.StreetName : \"\",\n city: value ? value.City : \"\",\n province: value ? value.Province : \"\",\n unitNumber: value ? value.UnitNumber : \"\",\n value: value\n ? `${value.HouseNumber} ${value.StreetName} ${\n value.UnitNumber ? value.UnitNumber : \"\"\n }`\n : \"\",\n });\n };\n\n render() {\n if (this.state.setProvinceValues.length <= 0) {\n axiosStreet\n .get(\"./province.json\")\n .then((res) => {\n this.onSetProvinceValues(res.data);\n })\n .catch((err) => {});\n }\n\n const styleShowHide = {\n display: \"none\",\n };\n\n const styleShowHideWarningMessage = {\n display: \"none\",\n };\n\n var disableField = {\n disabled: true,\n };\n\n if (this.state.checkNoBillingNumber) {\n styleShowHide.display = \"none\";\n styleShowHideWarningMessage.display = \"flex\";\n disableField.disabled = true;\n } else {\n styleShowHide.display = \"inline\";\n styleShowHideWarningMessage.display = \"none\";\n disableField.disabled = false;\n }\n\n var showErrorMessage = \"\";\n var loadingScreen = \"\";\n\n var showAsList = {\n // whiteSpace: 'pre-wrap'\n };\n\n if (!this.state.valid) {\n showErrorMessage = (\n
\n
\n\n \n
\n );\n }\n\n if (this.state.loading) {\n loadingScreen = \n
\n {this.state.errorHeader}\n
\n Tip: Remember to include your street's quadrant (e.g. NW,\n SW) in the 'Province' field.\n
*/}\n\n {this.state.alertMessage !== null && this.state.alertMessage !== \"\" ? (\n
{this.state.alertMessage}
\n\n {/* new code - RDI-4285 */}\n {/*
Submit a Cart Maintenance or Exchange Request
*/}\nSubmit a cart repair or exchange request
\n\n\n
\n Welcome to the City of Edmonton's cart maintenance request service.\n This service allows you to submit requests for maintenance of your\n garbage cart.\n
\n TO BEGIN - search for your account by completing the required fields\n below\n
\n\n
\n \n {loadingScreen}\n
Width: {item.width}
Depth: {item.depth}\n
\n
\n { (accountNumber != null && accountNumber.length > 0) ? (\n
) : null\n }\n \n \n
\n\n
\n\n
\n
\n )}\n \n { (accountNumber != null && accountNumber.length > 0) ? (
Account Number : {accountNumber.toUpperCase()}
\n \nAddress : {(userAddress === \"\" || userAddress === null) ? null:userAddress.toUpperCase()}
\n {/* {context.fullAddress} */}\n \n { this.props.showEditButton === true ?\n\n
- \n {filteredSuggestions.map((suggestion, index) => {\n let className;\n\n // Flag the active suggestion with a class\n if (index === activeSuggestion) {\n className = \"suggestion-active\";\n }\n\n return (\n
\n No cart found\n
\n );\n }\n }\n\n return (\n \n { \n (this.props.selectedResolution.toLowerCase().includes(\"swp\") && item.productCount > 0) ? \n (!item.productName.toLowerCase().includes(\"organic\")) ? [ (\n \n \n
),\n (this.state.productToSwap === item.productCode ? \n \n this.onSelectProduct(event)}\n name= \"available-product\"/>\n \n
),\n (this.state.productToSwap === item.productCode ? \n \n this.onSelectProduct(event)}\n name= \"available-product\"/>\n \n
),\n (this.state.productToSwap === item.productCode ? \n
\n ));\n\n var errorMessage = \"\";\n if(this.state.errorMessage.length > 0) {\n errorMessage = (\n {/* \n this.onShowSerialNumberCheck(event)}\n name= \"check-available-product\"/>\n \n
*/}\n \n \n this.onAssetIdSelected(event.target.value)}>\n // {item.serialNumber.map(item => {\n // return \n // })}\n \n // ]\n */}\n
\n \n
: null )\n ] : null \n : [ this.props.selectedResolution.substring(0,3).toLowerCase().includes(\"rpc\") ? \n [ \n ( \n { item.serialNumber.forEach(item => {\n options.push({value :item.assetId, name :item.serialNumber});\n })\n }\n {/* this.onAssetIdSelected(event)}\n filterOptions={fuzzySearch}\n placeholder=\"Select\"\n /> */}\n \n\n
\n \n \n \n
\n {/* \n this.onShowSerialNumberCheck(event)}\n name= \"check-available-product\"/>\n \n
*/}\n\n\n {/* {this.state.showSerialNumberCheck ? \n // this.onAssetIdSelected(event)}>\n // {item.serialNumber.map(item => {\n // return \n // })}\n // \n */}\n\n {(item.serialNumber.length > 0 && !this.state.showSerialNumberCheck) ? \n \n this.onAssetIdSelected(event)}\n emptyMessage=\"Not found\"\n value={this.state.selectedProductId}\n disabled= {this.state.showSerialNumberCheck}\n filterOptions={fuzzySearch}\n placeholder=\"Select\"\n /> */}\n \n
: null\n }\n \n\n {(item.serialNumber.length > 0) ? \n \n this.onShowSerialNumberCheck(event)}\n name= \"check-available-product\"/>\n \n
: null\n }\n \n { (this.state.showSerialNumberCheck || item.serialNumber.length <= 0) ? \n \n this.onManualSerialNumber(event)} value={this.state.manualSerialNumber}/> \n \n
: null\n }\n \n
: null ) \n ] : (item.productCount > 0) ?[ \n (\n {(item.serialNumber.length > 0) ? \n \n this.onAssetIdSelected(event)}\n onFocus ={(event)=>this.onAssetIdSelected(event)}\n emptyMessage=\"No cart found\"\n value={this.state.selectedProductId}\n className={(!this.state.valid && this.state.selectedProductId.length === 0)? \"select-search invalid-border\": \"select-search\"}\n filterOptions={fuzzySearch}\n placeholder=\"Select\"\n /> \n {/*
: null\n }\n \n
: null ) \n ] : null\n ]\n \n }\n \n \n {products}\n {errorMessage}\n
\n \n \n );\n \n }\n}\n\nexport default CurrentProduct;","export const SWAP_120L = \"SWP_120L\";\nexport const SWAP_240L = \"SWP_240L\";\nexport const SWAP_360L = \"SWP_360L\";\n\nexport const DELIVER_120L = \"Deliver 120L\";\nexport const DELIVER_240L = \"Deliver 240L\";\nexport const DELIVER_NEW_CART = \"Deliver New Service\";\nexport const DELIVER_120L_TRASH = \"120 LiterTrash\";\nexport const DELIVER_240L_TRASH = \"240 LiterTrash\";\nexport const ORGANICS_120L = \"120 LiterOrganics\";\nexport const FOOD_SCRAP_CART = \"Food Scrap Cart (Organics)\";\n\nexport const SELECT_A_NEW_CART = \"SELECT MY NEW CART\";\n\nexport const COMMENT_OTHER_SERIALNUMBER_SPLIT = \"Serial Number - \";","import React, { Component } from \"react\";\nimport {\n Container,\n Form,\n Row,\n Col,\n Button,\n Modal,\n Alert,\n} from \"react-bootstrap\";\nimport ProductDetails from \"../ProductDetails/ProductDetails\";\nimport UserSummary from \"../UserSummary/UserSummary\";\nimport Loading from \"../UI/Spinner/Spinner\";\nimport AuthUser from \"../Auth/Auth\";\nimport * as constant from \"../../Constant\";\nimport UserContext from \"../../context/user-context\";\nimport axios from \"../../axios-private-http.js\";\nimport CurrentProduct from \"../CurrentProduct/CurrentProduct\";\nimport \"./CreateRequest.css\";\nimport \"../../styles/Common.css\";\n\nclass CreateRequest extends Component {\n static contextType = UserContext;\n newAssetConfirmationMessage = \"\";\n\n constructor(props) {\n super(props);\n this.state = {\n loading: false,\n currentProduct: [],\n repairProduct: [],\n productToSwap: \"\",\n assetIdProductToSwap: \"\",\n assetManuallyEntered: \"\",\n productToDeliver: \"\",\n selectedResolution: \"\",\n selectedWorkFlowType: \"\",\n selectedNotification: \"\",\n setShowConfirmation: false,\n showNewCartMessage: false,\n woComment: \"\",\n selectedNotificationValue: \"\",\n selectedNotificationErrorMsg: \"\",\n isUserSelectedResolutionCodeFromDropDown: false,\n swapWarningMessage: \"\",\n requestType: [],\n valid: true,\n isNotificationValid: true,\n errorMessage: \"\",\n errorHeader: \"\",\n };\n\n this.onSwapProduct = this.onSwapProduct.bind(this);\n this.onProductToSwapSelected = this.onProductToSwapSelected.bind(this);\n this.onAssetToSwapSelected = this.onAssetToSwapSelected.bind(this);\n this.assetManuallyEntered = this.assetManuallyEntered.bind(this);\n }\n\n componentDidMount() {\n if (sessionStorage.getItem(\"Loc\") == null) {\n this.props.history.push(\"/\");\n } else {\n this.setProductListAndRequestType();\n }\n }\n\n removeInvalidCharachtersFromPhone(phoneNumber){\n return !phoneNumber?phoneNumber:phoneNumber.replace(/\\D/g,\"\")\n }\n\n formatPhoneNumber(phoneNumber) {\n phoneNumber = this.removeInvalidCharachtersFromPhone(phoneNumber);\n let formatPhoneNumber1 = \"\";\n let formatPhoneNumber2 = \"\";\n let formatPhoneNumber3 = \"\";\n if(!phoneNumber || phoneNumber.length === 0) {\n return \"\";\n }\n else {\n formatPhoneNumber1 = (phoneNumber.length <= 3) ? phoneNumber : (\"(\"+phoneNumber.substring(0, 3)+ \")\");\n if(phoneNumber.length > 3) {\n formatPhoneNumber2 = \" \";\n formatPhoneNumber2 = formatPhoneNumber2 + (phoneNumber.length < 6 ? phoneNumber.substring(3, phoneNumber.length) : phoneNumber.substring(3, 6));\n }\n if(phoneNumber.length > 6) { \n formatPhoneNumber3 = \"-\"\n formatPhoneNumber3 = formatPhoneNumber3 + (phoneNumber.length < 10 ? phoneNumber.substring(6, phoneNumber.length) :phoneNumber.substring(6, 10));\n }\n }\n return formatPhoneNumber1 + formatPhoneNumber2 + formatPhoneNumber3;\n }\n\n setProductListAndRequestType() {\n const currentProduct = JSON.parse(sessionStorage.getItem(\"Products\"));\n //this.props.location.state.customerInformation.customerLocationInformation[0].lstAssets;\n var repairProduct = [\n {\n defaultChecked: true,\n productName: \"120 Liter Organics\",\n productCode: \"120 LiterOrganics\",\n displayName: \"Food Scraps Cart\",\n productCount: 0,\n serialNumber: [],\n },\n {\n defaultChecked: false,\n productName: \"120 liter Trash\",\n productCode: \"120 LiterTrash\",\n displayName: \"Small (120L) Garbage Cart\",\n productCount: 0,\n serialNumber: [],\n },\n {\n defaultChecked: false,\n productName: \"240 Liter Trash\",\n productCode: \"240 LiterTrash\",\n displayName: \"Large (240L) Garbage Cart\",\n productCount: 0,\n serialNumber: [],\n },\n {\n defaultChecked: false,\n productName: \"360 Liter Trash\",\n productCode: \"360 LiterTrash\",\n displayName: \"Excess (360L) Garbage Cart\",\n productCount: 0,\n serialNumber: [],\n },\n ];\n var temp = [];\n var product = [];\n var tempSetLowerResolution = false;\n var tempSetBiggerResolution = false;\n\n if (currentProduct != null && currentProduct.length > 0) {\n currentProduct.forEach((item, i) => {\n var sNumber = {};\n var sNumbers = [];\n if (temp.indexOf(item.productCode) === -1) {\n temp.push(item.productCode);\n var _data = {};\n if (i === 0) {\n _data.defaultChecked = true;\n this.setState({ productToSwap: item.productCode });\n } else {\n _data.defaultChecked = false;\n }\n if (\n item.productName.includes(\"120\") &&\n item.productName.toLowerCase().includes(\"trash\")\n ) {\n tempSetLowerResolution = true;\n _data.displayName = \"Small (120L) Garbage Cart\";\n } else if (\n (item.productName.includes(\"240\") &&\n item.productName.toLowerCase().includes(\"trash\")) ||\n (item.productName.includes(\"360\") &&\n item.productName.toLowerCase().includes(\"trash\"))\n ) {\n tempSetBiggerResolution = true;\n if (item.productName.includes(\"240\")) {\n _data.displayName = \"Large (240L) Garbage Cart\";\n } else {\n _data.displayName = \"Excess (360L) Garbage Cart\";\n }\n } else if (\n item.productName.includes(\"120\") &&\n item.productName.toLowerCase().includes(\"organics\")\n ) {\n _data.displayName = \"Food Scraps Cart\";\n } else {\n _data.displayName = item.productName;\n }\n\n _data.productName = item.productName;\n _data.productCode = item.productCode;\n _data.productCount = 1;\n sNumber.serialNumber = item.serialNumber;\n sNumber.assetId = item.assetId;\n sNumbers.push(sNumber);\n _data.serialNumber = sNumbers;\n product.push(_data);\n } else {\n for (var j = 0; j < product.length; j++) {\n if (product[j].productCode === currentProduct[i].productCode) {\n var _x = parseInt(product[j].productCount) + 1;\n // if (_x > 1) {\n // product[j].productName = product[j].productName;\n sNumber.serialNumber = item.serialNumber;\n sNumber.assetId = item.assetId;\n sNumbers = product[j].serialNumber;\n sNumbers.push(sNumber);\n product[j].serialNumber = sNumbers;\n // + \" (\"+_x+\")\";\n // }\n product[j].productCount = _x;\n }\n }\n }\n });\n\n product.forEach((item, i) => {\n repairProduct.forEach((repairItem, j) => {\n if (item.productCode === repairItem.productCode) {\n repairItem.serialNumber = item.serialNumber;\n repairItem.productCount = item.productCount;\n }\n });\n });\n\n this.setState({ currentProduct: product });\n }\n this.setState({ repairProduct: repairProduct });\n\n // Todo\n const requestTypeTemp = JSON.parse(sessionStorage.getItem(\"RequestType\"));\n var requestType = [];\n\n requestTypeTemp.forEach((item, index) => {\n if (item.requestTypeCode.toUpperCase() === constant.SWAP_240L && tempSetLowerResolution) {\n requestType.push(item);\n } \n else if ( (item.requestTypeCode.toUpperCase() === constant.SWAP_120L || item.requestTypeCode.toUpperCase() === constant.SWAP_360L) &&\n tempSetBiggerResolution) {\n requestType.push(item);\n } \n else if ( item.requestTypeCode.toUpperCase() !== constant.SWAP_240L && item.requestTypeCode.toUpperCase() !== constant.SWAP_120L &&\n item.requestTypeCode.toUpperCase() !== constant.SWAP_360L) {\n requestType.push(item);\n }\n });\n\n this.setState({ requestType: requestType });\n }\n\n onProductToSwapSelected(value) {\n this.setState({ isUserSelectedResolutionCodeFromDropDown: false });\n this.setState({ productToSwap: value });\n if (value.includes(\"120\") && this.state.selectedWorkFlowType === \"Swap\") {\n this.setState({ selectedResolution: constant.SWAP_240L });\n } else if (this.state.selectedWorkFlowType === \"Swap\") {\n this.setState({ selectedResolution: constant.SWAP_120L });\n }\n }\n\n onAssetToSwapSelected(value) {\n this.setState({ assetIdProductToSwap: value });\n }\n\n assetManuallyEntered(value) {\n this.setState({ assetManuallyEntered: value });\n }\n\n onSwapProduct(value) {\n if (this.state.productToDeliver !== value) {\n this.setState({ productToDeliver: value });\n this.setState({ showNewCartMessage: true });\n }\n }\n\n onChangeRequestType(event) {\n this.setState({ valid: true });\n this.setState({ isUserSelectedResolutionCodeFromDropDown: true });\n this.setState({ assetManuallyEntered: \"\" });\n this.setState({ productToDeliver: \"\" });\n this.setState({ assetIdProductToSwap: \"\" });\n if (\n event.target.childNodes[event.target.selectedIndex].text === \"--Select--\"\n ) {\n this.setState({ selectedResolution: \"\" });\n this.setState({ selectedWorkFlowType: \"\" });\n this.setState({ showNewCartMessage: false });\n } else {\n this.setState({ selectedResolution: event.target.value });\n this.setState({\n selectedWorkFlowType:\n event.target.childNodes[event.target.selectedIndex].getAttribute(\n \"data\"\n ),\n });\n }\n\n const workFlowType =\n event.target.childNodes[event.target.selectedIndex].getAttribute(\"data\");\n if (workFlowType === \"Swap\") {\n if (\n sessionStorage.getItem(\"SwapMessage\").includes(\"rate\") &&\n sessionStorage.getItem(\"SwapMessage\").includes(\"monthly\")\n ) {\n this.setState({\n swapWarningMessage: sessionStorage.getItem(\"SwapMessage\"),\n });\n }\n } else if (workFlowType === \"Repair\") {\n this.setState({ swapWarningMessage: \"\" });\n } else {\n this.setState({ swapWarningMessage: \"\" });\n }\n }\n\n onChangeNotificationValue(event) {\n if (event.target.value.length > event.target.maxLength) {\n event.target.value = event.target.value.slice(0, event.target.maxLength)\n }\n let valid = false;\n if (this.state.selectedNotification.toLowerCase() === \"text\" || this.state.selectedNotification.toLowerCase() === \"phone\") \n {\n if (this.removeInvalidCharachtersFromPhone(event.target.value).length === 10 && this.removeInvalidCharachtersFromPhone(event.target.value).match('[0-9]{10}') ) {\n valid = true;\n }\n this.setState({ selectedNotificationValue: this.formatPhoneNumber(event.target.value) });\n }\n else if(this.state.selectedNotification.toLowerCase() === \"email\") {\n var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n if (event.target.value !== \"\" && event.target.value.match(validRegex)) {\n valid = true\n }\n this.setState({ selectedNotificationValue: event.target.value });\n }\n else {\n valid = true;\n }\n if (valid) {\n this.setState({ \n isNotificationValid: true, \n selectedNotificationErrorMsg: \"\"\n });\n }\n else {\n this.setState({ \n isNotificationValid: false \n });\n }\n }\n\n onBlurNotificationValue(event) {\n let valid = true;\n if (this.state.selectedNotification.toLowerCase() === \"text\" || this.state.selectedNotification.toLowerCase() === \"phone\") \n {\n if (!this.removeInvalidCharachtersFromPhone(event.target.value) || this.removeInvalidCharachtersFromPhone(event.target.value).length != 10 || \n !(this.removeInvalidCharachtersFromPhone(event.target.value).match('[0-9]{10}')) ) {\n this.setState({ \n isNotificationValid: false, \n selectedNotificationErrorMsg: \"Invalid Phone Number.\"\n });\n valid = false;\n }\n }\n else if(this.state.selectedNotification.toLowerCase() === \"email\") {\n var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n if (event.target.value === \"\" || !event.target.value.match(validRegex)) {\n this.setState({ \n isNotificationValid: false, \n selectedNotificationErrorMsg: \"Invalid Email Address.\"\n });\n valid = false;\n }\n }\n if(valid) {\n this.setState({ \n isNotificationValid: true, \n selectedNotificationErrorMsg: \"\"\n });\n }\n }\n\n onChangeNotification(event) {\n this.setState({ selectedNotification: event.target.value });\n this.setState({ selectedNotificationValue: \"\", selectedNotificationErrorMsg: \"\" });\n }\n\n onResetForm(event) {\n this.setState({ selectedResolution: \"\" });\n this.setState({ selectedWorkFlowType: \"\" });\n this.setState({ valid: true });\n document.querySelector(\"textarea\").value = \"\";\n this.setState({ woComment: \"\" });\n this.setState({ swapWarningMessage: \"\" });\n }\n\n onCheckNotification(event) {}\n\n checkValidity() {\n var message = this.state.selectedNotificationErrorMsg ? \"\\n\"+this.state.selectedNotificationErrorMsg : this.state.selectedNotificationErrorMsg;\n if (this.state.selectedResolution === null || this.state.selectedResolution === \"\") {\n message = \"\\nPlease select the service requested.\";\n }\n else if ((this.state.assetIdProductToSwap === null || this.state.assetIdProductToSwap === \"\")\n && (this.state.assetManuallyEntered === null || this.state.assetManuallyEntered === \"\")\n && this.state.selectedResolution.toUpperCase() !== constant.SELECT_A_NEW_CART) {\n message = \"\\nSerial number is mandatory. Please enter the serial number of the Asset that you want us to service in the provided field.\";\n }\n else if(!this.state.selectedNotification) {\n message = \"\\nPlease select the notification type.\";\n }\n else if (!this.state.isNotificationValid || (!this.state.selectedNotificationValue && this.state.selectedNotification !== \"noReminder\")) {\n if(this.state.selectedNotification.toLowerCase() === \"text\" || this.state.selectedNotification.toLowerCase() === \"phone\"){\n message = (this.state.selectedNotificationValue) ? \"\\nNotifications field has invalid phone number.\" : \"\\nNotifications field has missing phone number.\";\n }\n else if(this.state.selectedNotification.toLowerCase() === \"email\") {\n message = (this.state.selectedNotificationValue) ? \"\\nNotifications field has invalid email address.\" : \"\\nNotifications field has missing email address.\";\n }\n else {\n message = \"\\nNotification value is missing/Invalid.\";\n }\n }\n\n this.setState({ errorMessage: message });\n this.setState({ errorHeader: \"Required Field\" });\n if (message.length === 0) {\n this.setState({ valid: true });\n return true;\n } else {\n this.setState({ valid: false });\n return false;\n }\n }\n\n onSubmitClicked = (event) => {\n if (this.checkValidity()) {\n this.generateTokenAndSubmitServiceRequest();\n }\n };\n\n generateTokenAndSubmitServiceRequest() {\n //const {token} = this.context;\n this.setState({ loading: true });\n // if(token.length <= 0 ) {\n AuthUser.getSFToken(\n sessionStorage.getItem(\"Seg\"),\n this.setSFToken,\n this.setSFTokenError\n );\n // } else {\n // this.submitServiceRequestAPI();\n // }\n }\n\n setSFToken = (token) => {\n const { setSFToken } = this.context;\n this.setState({ token: token });\n setSFToken(token);\n this.submitServiceRequestAPI();\n };\n\n setSFTokenError = (errorMessage) => {\n //this.submitServiceRequestAPI();\n this.setState({ loading: false });\n this.setState({ errorHeader: \"Error\" });\n this.setState({ errorMessage: errorMessage });\n this.setState({ valid: false });\n };\n\n submitServiceRequestAPI() {\n if (!this.state.loading) {\n this.setState({ loading: true });\n }\n const locationId = sessionStorage.getItem(\"Loc\");\n const billAccountNumber = sessionStorage.getItem(\"AccountNumber\");\n var phone = \"\";\n var email = \"\";\n if (this.state.selectedNotification.toLowerCase() === \"email\") {\n email = this.state.selectedNotificationValue;\n } else {\n phone = this.removeInvalidCharachtersFromPhone(this.state.selectedNotificationValue);\n }\n\n var productToDeliverOrService = \"\";\n var productToRemove = \"\";\n var resolutionCode = \"\";\n if (this.state.selectedWorkFlowType === \"Swap\") {\n productToRemove = this.state.productToSwap;\n productToDeliverOrService =\n this.state.productToDeliver + productToRemove.replace(/[0-9]/g, \"\");\n } else {\n productToDeliverOrService = this.state.productToSwap;\n }\n\n if (\n this.state.selectedResolution.toUpperCase() === constant.SELECT_A_NEW_CART\n ) {\n resolutionCode = constant.DELIVER_NEW_CART;\n if (this.state.productToDeliver === \"120\") {\n productToDeliverOrService = constant.DELIVER_120L_TRASH;\n } else {\n productToDeliverOrService = constant.DELIVER_240L_TRASH;\n }\n } else {\n resolutionCode = this.state.selectedResolution;\n }\n\n const payLoad = {\n serviceProviderName:\n \"\" + process.env.REACT_APP_SERVICE_PROVIDER_NAME + \"\",\n billingAccountNumber: \"\" + billAccountNumber + \"\",\n customerLocationId: \"\" + locationId + \"\",\n requestTypeCode: \"\" + resolutionCode + \"\",\n productCode: \"\" + productToDeliverOrService + \"\",\n removedProductCode: \"\" + productToRemove + \"\",\n contactInfo: \"\" + (this.state.selectedNotification === \"noReminder\" ? \"\" : this.state.selectedNotification) + \"\", \n emailAddress: \"\" + email + \"\",\n phone: \"\" + phone + \"\",\n cartSerialToBeServiced:\n this.state.assetIdProductToSwap.length === 0\n ? null\n : \"\" + this.state.assetIdProductToSwap + \"\",\n otherSerialNumber:\n this.state.assetManuallyEntered.length === 0\n ? null\n : \"\" + this.state.assetManuallyEntered + \"\",\n isNotify:\n this.state.selectedNotification === \"Text\" ||\n this.state.selectedNotification === \"phone\" ||\n this.state.selectedNotification === \"email\"\n ? true\n : false,\n WoNotes: \"\" + this.state.woComment + \"\",\n caseOrigin: \"Web\",\n };\n\n axios(this.state.token)\n .post(\"/importWebWorkOrder\", JSON.stringify(payLoad))\n .then((response) => {\n if (response.data.StatusCode === \"200\") {\n this.setState({ errorHeader: \"\" });\n this.setState({ errorMessage: \"\" });\n this.newAssetConfirmationMessage = response.data.receivingCartInfo;\n const requestType = response.data.lstRequestTypeCategories;\n var requestTypeToShow = [];\n const select = {\n workflowType: \"--Select--\",\n reqestTypeCategory: \"\",\n requestTypeCode: \"\",\n requestTypeName: \"--Select--\",\n };\n if (this.state.accountNumber !== \"\") {\n requestTypeToShow = requestType;\n requestTypeToShow.unshift(select);\n } else {\n requestTypeToShow.push(select);\n requestType.forEach((item) => {\n if (item.reqestTypeCategory !== \"Billable\") {\n requestTypeToShow.push(item);\n }\n });\n }\n sessionStorage.setItem(\"RequestType\", JSON.stringify(requestType));\n\n if (\n this.state.selectedResolution.toUpperCase() ===\n constant.SELECT_A_NEW_CART\n ) {\n this.setState({ setShowConfirmation: true });\n } else {\n this.props.history.push({\n pathname: \"/view-request\",\n state: { woCreated: true },\n });\n }\n } else if (response.data.StatusCode === \"400\") {\n this.setState({ errorHeader: \"Error\" });\n var message = \"\\n \" + response.data.Message;\n this.setState({ errorMessage: message });\n this.setState({ valid: false });\n } else {\n this.setState({ errorHeader: \"Error\" });\n var messageEr = \"\\n Something went wrong.\";\n this.setState({ errorMessage: messageEr });\n this.setState({ valid: false });\n }\n this.setState({ loading: false });\n })\n .catch((error) => {\n this.setState({ loading: false });\n this.setState({ errorHeader: \"Error\" });\n var message = \"\\n Something went wrong.\";\n this.setState({ errorMessage: message });\n this.setState({ valid: false });\n });\n }\n\n onAddressEditButtonClick = () => {\n this.props.history.push({ pathname: \"/\", state: { isEdit: true } });\n };\n\n onModalOkClicked = (event) => {\n this.props.history.push({\n pathname: \"/view-request\",\n state: { woCreated: true },\n });\n };\n\n render() {\n // var loadingScreen = \"\";\n var currentProduct = \"\";\n var swapResolution = \"\";\n var notificationOptions = [];\n var notificationTextBox = \"\";\n var showErrorMessage = \"\";\n var requestTypeOptions = [];\n var loadingScreen = \"\";\n\n if (this.state.loading) {\n loadingScreen = \n
\n\n \n
\n );\n }\n\n if (this.state.loading) {\n loadingScreen = \n
\n {this.state.errorHeader}\n {this.state.errorMessage}\n
\n\n \n
\n\n this.setState({ productToSwap: event.target.value })\n }\n name=\"available-product\"\n />\n \n
\n ));\n currentProduct = product;\n }\n\n if (\n (this.state.currentProduct != null &&\n this.state.currentProduct.length > 0) ||\n this.state.selectedWorkFlowType === \"Repair\"\n ) {\n if (this.state.selectedWorkFlowType === \"Swap\") {\n swapResolution = (\n \n
Please Select the cart you would like to return: */}\n
Enter the serial number of your current garbage cart:\n *\n
\n
\n \n {/* new code RDI-4285 */}\n {/* Please select the new cart you would like to receive: */}\n
Select your new garbage cart size:\n *\n
\n \n
{lable}\n
\n
\n \n \n
{lableRe} *\n
\n
\n \n \n
\n \n
{lableFst} *\n
\n \n
\n ,\n {this.state.showNewCartMessage ? (\n \n
\n ) : null}\n
\n );\n } else {\n swapResolution = (\n {lableFst} *\n
\n
\n \n \n
\n No assets to show. Please contact the Waste Customer Support\n Team at 780-496-5698 for any questions\n
\n \n
\n
\n\n \n {loadingScreen}\n\n
\n { }\n\n
\n );\n }\n}\n\nexport default ComponentToPrint;","const aux = (props) => props.children;\n\nexport default aux;","import React, {Component} from 'react';\nimport { Form, Container, Button, Table, Modal, Alert } from 'react-bootstrap';\nimport UserSummary from '../UserSummary/UserSummary';\nimport AuthUser from '../Auth/Auth'\nimport './ViewRequest.css';\nimport UserContext from '../../context/user-context';\nimport Loading from '../UI/Spinner/Spinner';\n//import WorkOrder from '../../WorkOrder.json';\nimport axios from '../../axios-private-http.js';\nimport ReactToPrint from \"react-to-print\";\nimport PrintWorkorder from '../Print/PrintWorkOrder';\nimport Aux from '../../hoc/_Aux';\nimport { ToastContainer, toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css';\n\nclass ViewRequest extends Component {\n\n static contextType = UserContext;\n\n woIdToDelete = \"\";\n woIdForEmailConfirmation =\"\";\n\n state = {\n token: \"\",\n workOrderList: [],\n errorMessage: \"\",\n errorHeader:\"\",\n loading: false,\n setShowCancelModal: false,\n setShowEmailModal: false,\n emailConfirmationValue:\"\",\n emailConfirmErrorVisibility:false,\n woStatus: \"\",\n woToPrint:\"\"\n }\n\n componentDidMount() {\n if (sessionStorage.getItem('Loc') == null ) {\n this.props.history.push('/');\n } else {\n // const {token} = this.context;\n this.setState({loading : true});\n // if(token.length <= 0 ) {\n AuthUser.getSFToken(sessionStorage.getItem('Seg'), this.setSFToken, this.setSFTokenError);\n // } else {\n // this.getHistoricalWorkOrders();\n // }\n }\n }\n\n setSFToken = (token) => {\n const {setSFToken} = this.context;\n this.setState({token: token});\n setSFToken(token);\n this.getHistoricalWorkOrders();\n } \n\n setSFTokenError = (errorMessage) => {\n this.setState({loading : false});\n this.setState({errorHeader: \"Error\"})\n this.setState({errorMessage: errorMessage});\n }\n\n getHistoricalWorkOrders = () => {\n if (!this.state.loading) {\n this.setState({loading : true});\n }\n const locationId = sessionStorage.getItem('Loc');\n const payLoad = {\n \"ServiceProviderName\": \"\"+process.env.REACT_APP_SERVICE_PROVIDER_NAME+\"\",\n \"customerLocationId\":\"\"+locationId+\"\"\n }\n axios(this.state.token).post( '/exportWebWorkOrder', JSON.stringify(payLoad))\n .then( response => {\n if (response.data.StatusCode === \"200\") {\n if(response.data.Records.length !== 0) {\n this.setState({workOrderList: response.data.Records});\n this.setState({errorHeader: \"\"});\n this.setState({errorMessage: \"\"});\n } else {\n this.setState({errorHeader: \"No service request\"});\n this.setState({errorMessage: \"You have not made a service request yet.\"});\n }\n\n } else if(response.data.StatusCode === \"400\") {\n this.setState({errorHeader: \"Error\"});\n this.setState({errorMessage: response.data.Message});\n } else {\n this.setState({errorHeader: \"No service request\"});\n this.setState({errorMessage: \"You have not made a service request yet.\"});\n }\n this.setState({loading : false});\n })\n .catch(error => {\n this.setState({loading : false});\n this.setState({errorHeader: \"Error\"})\n this.setState({errorMessage: \"Something went wrong.\"});\n });\n }\n\n onCancelButtonClicked = (event) => {\n this.setState({woStatus: event.target.name});\n this.woIdToDelete = event.target.value;\n this.setState({setShowCancelModal: true});\n }\n\n onModalClose = () => {\n this.setState({setShowCancelModal: false});\n }\n\n onEmailModalClose = () => {\n this.setState({setShowEmailModal: false});\n }\n\n onSendConfirmationEmailButtonClicked =(event) => {\n this.woIdForEmailConfirmation = event.target.value;\n this.setState({setShowEmailModal: true});\n }\n\n onCreateNewRequestButtonClick = () => {\n this.props.history.push('/create-request');\n }\n\n onModalCancelClicked = (event) => {\n this.onModalClose();\n const locationId = sessionStorage.getItem('Loc');\n this.setState({loading : true});\n const payLoad = {\n \"serviceProviderName\":\"\"+process.env.REACT_APP_SERVICE_PROVIDER_NAME+\"\",\n \"customerLocationId\":\"\"+locationId+\"\",\n \"workOrderID\":\"\"+this.woIdToDelete+\"\",\n \"resolutionCode\":\"REQ_CANCELLED\",\n \"WONotes\":\"\"\n }\n axios(this.state.token).post( '/cancelWebWorkOrder', JSON.stringify(payLoad))\n .then( response => {\n if (response.data.StatusCode === \"200\") {\n this.setState({workOrderList: response.data.Records});\n this.setState({errorHeader: \"\"});\n this.setState({errorMessage: \"\"});\n toast.success('Service request cancelled successfully', {\n position: \"bottom-right\",\n autoClose: 5000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n } else if(response.data.StatusCode === \"400\") {\n this.setState({errorHeader: \"Error\"});\n this.setState({errorMessage: response.data.Message});\n } else {\n this.setState({errorHeader: \"Error\"});\n this.setState({errorMessage: \"Something went wrong while cancelling the service request.\"});\n }\n this.setState({loading : false});\n })\n .catch(error => {\n this.setState({loading : false});\n this.setState({errorHeader: \"Error\"})\n this.setState({errorMessage: \"Something went wrong while cancelling the service request.\"});\n });\n }\n\n setContentToPrint = (index) => {\n // alert('set content');\n this.setState({woToPrint : this.state.workOrderList[index]});\n }\n\n onEmailConfirmationChange = (event) => {\n const re = /^[-.@_a-z0-9]+$/gi;\n if (event.target.value === '' || re.test(event.target.value)) {\n this.setState({emailConfirmationValue: event.target.value});\n }\n }\n\n onEmailSendClick = (event) => {\n const re = /^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n if(!re.test(this.state.emailConfirmationValue)) {\n this.setState({emailConfirmErrorVisibility: true});\n } else {\n this.setState({emailConfirmErrorVisibility: false});\n this.onEmailModalClose();\n this.sendConfirmationEmail(this.state.emailConfirmationValue);\n }\n }\n\n sendConfirmationEmail(email) {\n const payLoad = {\n \"email\":\"\"+email+\"\",\n \"workOrderId\":\"\"+this.woIdForEmailConfirmation +\"\",\n \"billingAccountNumber\":\"\"+sessionStorage.getItem('AccountNumber')+\"\"\n }\n axios(this.state.token).post( '/ticketConfirmation', JSON.stringify(payLoad))\n .then( response => {\n if (response.data.StatusCode === \"200\") {\n this.setState({emailConfirmationValue: \"\"});\n this.setState({errorHeader: \"\"});\n this.setState({errorMessage: \"\"});\n toast.success('Service request emailed successfully', {\n position: \"bottom-right\",\n autoClose: 5000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n } else if(response.data.StatusCode === \"400\") {\n this.setState({errorHeader: \"Error\"});\n this.setState({errorMessage: response.data.Message});\n this.setState({emailConfirmationValue: \"\"});\n toast.error(response.data.Message, {\n position: \"bottom-right\",\n autoClose: 5000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n } else {\n this.setState({errorHeader: \"Error\"});\n this.setState({errorMessage: \"Something went wrong while sending the service request to the email\"});\n this.setState({emailConfirmationValue: \"\"});\n toast.error(\"Something went wrong while sending the email\", {\n position: \"bottom-right\",\n autoClose: 5000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n }\n })\n .catch(error => {\n this.setState({loading : false}); \n });\n\n }\n\n render() {\n var loadingScreen = \"\";\n\n const styleShowHide = {\n display: 'none'\n }\n\n if (this.state.emailConfirmErrorVisibility) {\n styleShowHide.display = 'block';\n } else {\n styleShowHide.display = 'none';\n }\n\n if (this.state.loading) {\n loadingScreen = \n
\n
\n
\n
\n
\n\n
\n \n ![\"\"](\"./edmonton-logo.png\")
\n
\n \n \n
\n \n
\n
\n \n \n
\n \n
\n
\n
\n \n Order {workOrder.workOrderLUID}\n
\n\n
\n\n
\n \n \n
\n
\n \n Order Date:\n | \n \n {workOrder.requestedDate}\n | \n
Request Type: | \n {workOrder.requestType} | \n
Serial Number: | \n {workOrder.serialNumber} | \n
Cart Size Requested: | \n {workOrder.cartSize} | \n
Comment: | \n {workOrder.woNotes} | \n
\n
\n\n \n
)\n }\n\n return \n
{this.state.errorHeader}
\n { this.state.errorMessage}\n \n
\n
Requests are generally completed within five business days.
\n Make sure that your cart is easy to see and access from the street or alley. Place it outside your fenced yard or garage. If your cart is not accessible, your work request will be rescheduled and a missed service fee of $18.50 may be applied to your utility bill.\n
Your Service Requests
\n {\n // (this.state.workOrderList.length < 1) ? (You have not made a service request yet.
) : (\"\")\n }\n| \n \n \n Confirmation Number: \n {item.workOrderLUID} \n \n \n Order Date: \n {item.requestedDate} \n \n \n {(item.serialNumber === null || item.serialNumber === \"\") ? null \n : Service Requested: \n {item.requestType} \n \n \n }\n Serial Number: \n {item.serialNumber} \n \n \n Comments: \n {item.woNotes} \n | \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n | \n
\n \n \n
\n \n Error \n
\n Please enter a valid email
\n \n (this.componentRef = event)}/>\n
\n\n \n \n {\n \n \n \n }\n \n
\n \n );\n }\n}\n\nexport default App;\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register() {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://goo.gl/SC7cgQ'\n );\n });\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport { BrowserRouter} from 'react-router-dom'\nimport registerServiceWorker from './registerServiceWorker';\n\n\nconst app = (\n