will not this function\r\nexport function attachEnterAsClick($element) {\r\n if (!$element.length) {\r\n return\r\n }\r\n\r\n $element.each(function () {\r\n jQuery(this).on('keyproess', function (e) {\r\n // Enter key pressed\r\n if (e.which === 13) {\r\n // Trigger click event on the same element\r\n jQuery(this).trigger('click')\r\n }\r\n })\r\n })\r\n}\r\n\r\nexport function getUrlParameter(name) {\r\n name = name.replace(/[\\[]/, '\\\\[').replace(/[\\]]/, '\\\\]')\r\n const regex = new RegExp('[\\\\?&]' + name + '=([^&#]*)')\r\n const results = regex.exec(window.location.search)\r\n if (results !== null && results[1] === 'true') return true\r\n return results === null ? '' : parseInt(decodeURIComponent(results[1].replace(/\\+/g, ' ')))\r\n}\r\n\r\n// Simple function to check if the passed in value is null or undefined\r\nexport function isNullOrUndefined(value, rejectBlankString = false) {\r\n if (value === null) {\r\n return true\r\n }\r\n\r\n if (typeof (value) === 'undefined') {\r\n return true\r\n }\r\n\r\n if (rejectBlankString && value === '') {\r\n return true\r\n }\r\n\r\n return false\r\n}\r\n\r\n// Function to check if the passed in number odd or not\r\nexport function isOdd(num) {\r\n if (num === 0) return false\r\n\r\n return (num & -num) === 1\r\n}\r\n\r\n// Function to toggle value in / out of an array (object is not supported)\r\nexport function toggleArrayItem(valueArray, value) {\r\n const returnArray = cloneDeep(valueArray)\r\n const i = returnArray.indexOf(value)\r\n if (i === -1) {\r\n returnArray.push(value)\r\n } else {\r\n returnArray.splice(i, 1)\r\n }\r\n return returnArray\r\n}\r\n\r\n// Use ProgressBar.js library to draw the chassis percentage https://progressbarjs.readthedocs.io/en/latest/api/shape/\r\nexport function drawPercentProgressBars(fillQuoteRequirementError) {\r\n jQuery('.progress-bar-percent').each((index, element) => {\r\n const $progressBarElement = jQuery(element)\r\n const percentage = element.dataset.value\r\n\r\n $progressBarElement.empty()\r\n\r\n const progressBarConfiguration = {\r\n strokeWidth: 25,\r\n trailColor: '#f4f4f4',\r\n trailWidth: 8,\r\n text: {\r\n value: percentage + '%'\r\n },\r\n step: function(state, circle) {\r\n if (fillQuoteRequirementError) {\r\n circle.path.setAttribute('stroke', '#E74C3C')\r\n } else {\r\n circle.path.setAttribute('stroke', '#3DCD58')\r\n }\r\n\r\n circle.path.setAttribute('stroke-width', 8)\r\n var value = Math.round(circle.value() * 100)\r\n circle.setText(value + '%')\r\n }\r\n }\r\n\r\n if (fillQuoteRequirementError) {\r\n progressBarConfiguration.color = '#E74C3C'\r\n }\r\n\r\n const circle = new ProgressBar.Circle(element, progressBarConfiguration)\r\n\r\n if (window.progressCircles === undefined) {\r\n window.progressCircles = []\r\n } \r\n\r\n window.progressCircles.push(circle)\r\n\r\n circle.animate(percentage / 100)\r\n })\r\n}\r\n\r\nexport function getNumberOfRowsFromPolesString(polesString) {\r\n if (polesString === '8' || polesString === '11' || polesString === '12' || polesString === '15' || polesString === '17' || polesString === '18') {\r\n return 1\r\n } else if (polesString === '12x2' || polesString === '15x2') {\r\n return 2\r\n } else if (polesString === '12x3' || polesString === '15x3') {\r\n return 3\r\n } else if (polesString === '15x4') {\r\n return 4\r\n }\r\n}\r\n\r\n// Possible example values: \"5\", \"12\", \"17+4\", \"2+10\"\r\nexport function getNumberOfPolesFromStringExpression(numberOfPolesStringExpression) {\r\n const indexOfPlusSign = numberOfPolesStringExpression.indexOf('+')\r\n if (indexOfPlusSign === -1) return parseInt(numberOfPolesStringExpression, 10)\r\n\r\n const firstNumber = numberOfPolesStringExpression.substr(0, indexOfPlusSign) \r\n const secondNumber = numberOfPolesStringExpression.substr(indexOfPlusSign + 1)\r\n\r\n return parseInt(firstNumber, 10) + parseInt(secondNumber, 10)\r\n}\r\n\r\nexport function getPolesCountFromPolesString(polesString) {\r\n if (polesString === '12x2' || polesString === '12x3') return 12\r\n else if (polesString === '15x2' || polesString === '15x3') return 15\r\n else if (polesString === '15x4') return 15\r\n else return parseInt(polesString, 10)\r\n}\r\n\r\nexport function canAddDeviceToBoardPosition(speceUsed, rowIndex, poleIndex, returnErrorMessage, board, boardDetails, boardOptionData, isMainSwitch, breakerItemID, boardContactorId, boardFittedOptionId, isWiserEnergyGateWay, ignoreBusbarChecks) {\r\n const rowPoles = getPolesCountFromPolesString(boardDetails.PolesNeeded)\r\n const poleIndexesToUse = [poleIndex]\r\n const speceUsedInteger = parseInt(speceUsed, 10) \r\n for (let index = 1; index < speceUsedInteger; index++) {\r\n poleIndexesToUse.push(poleIndex + index)\r\n }\r\n\r\n let anyIssues = false\r\n let errorMessage = 'There is not enough space to add the device to that position!'\r\n\r\n // If a row has a busbar then don't allow to add it on the row\r\n const rowBusbar = board.ProjectBoardBusbarCollection.find(busbar => busbar.Row === rowIndex + 1)\r\n // For now ignore if it's a Wiser Energy Gateway, ideally we will check if a device goes on a position not covered \r\n // by the busbar and allow that, or if it's compatible device that can be added to the busbar\r\n if (rowBusbar && !isWiserEnergyGateWay && !boardContactorId && !breakerItemID && !boardFittedOptionId && (ignoreBusbarChecks === undefined || ignoreBusbarChecks === false)) { \r\n anyIssues = true\r\n errorMessage = 'Can\\'t add a device to a row with a busbar, please remove the busbar first!'\r\n }\r\n\r\n // Allow any breakers to be added to space not covered by busbars (incl. space for future upgrades).\r\n if (rowBusbar && !!breakerItemID) {\r\n // Find all the breakers under the busbar\r\n const poleIndexesUnderTheBusbar = [rowBusbar.StartPosition - 1]\r\n for (let index = rowBusbar.StartPosition; index < rowBusbar.StartPosition + rowBusbar.BusBarLength + rowBusbar.ExtraPoles - 1; index++) {\r\n poleIndexesUnderTheBusbar.push(index)\r\n }\r\n const breakersUnderBusbar = board.ProjectBoardBreakerCollection.filter(breaker => breaker.RowIndex === rowIndex && poleIndexesUnderTheBusbar.indexOf(breaker.PoleIndex) > -1)\r\n // Find breaker under the busbar with the highest PoleIndex, as it's the last element\r\n const lastBreakerUnderBusbar = breakersUnderBusbar.find(breaker => breaker.PoleIndex === Math.max(...breakersUnderBusbar.map(breaker => breaker.PoleIndex)))\r\n \r\n // Consider any extra poles as well, breakers can't go under the busbar\r\n if (poleIndex <= lastBreakerUnderBusbar.PoleIndex + rowBusbar.ExtraPoles) {\r\n anyIssues = true\r\n errorMessage = 'Can\\'t add the breaker under the busbar, please remove the busbar first!'\r\n }\r\n }\r\n \r\n // Allow contactors to be added to space not covered by busbars (incl. space for future upgrades).\r\n if (rowBusbar && !!boardContactorId) {\r\n // Find all the breakers under the busbar\r\n const poleIndexesUnderTheBusbar = [rowBusbar.StartPosition - 1]\r\n for (let index = rowBusbar.StartPosition; index < rowBusbar.StartPosition + rowBusbar.BusBarLength + rowBusbar.ExtraPoles - 1; index++) {\r\n poleIndexesUnderTheBusbar.push(index)\r\n }\r\n const breakersUnderBusbar = board.ProjectBoardBreakerCollection.filter(breaker => breaker.RowIndex === rowIndex && poleIndexesUnderTheBusbar.indexOf(breaker.PoleIndex) > -1)\r\n // Find breaker under the busbar with the highest PoleIndex\r\n const lastBreakerUnderBusbar = breakersUnderBusbar.find(breaker => breaker.PoleIndex === Math.max(...breakersUnderBusbar.map(breaker => breaker.PoleIndex)))\r\n \r\n // Consider any extra poles as well, contactors can't go under the busbar\r\n if (poleIndex <= lastBreakerUnderBusbar.PoleIndex + rowBusbar.ExtraPoles) {\r\n anyIssues = true\r\n errorMessage = 'Can\\'t add the contactor under the busbar!'\r\n }\r\n }\r\n\r\n // Allow fitted options to be added to space not covered by busbars (incl. space for future upgrades).\r\n if (rowBusbar && !!boardFittedOptionId) {\r\n // Find all the breakers under the busbar\r\n const poleIndexesUnderTheBusbar = [rowBusbar.StartPosition - 1]\r\n for (let index = rowBusbar.StartPosition; index < rowBusbar.StartPosition + rowBusbar.BusBarLength + rowBusbar.ExtraPoles - 1; index++) {\r\n poleIndexesUnderTheBusbar.push(index)\r\n }\r\n const breakersUnderBusbar = board.ProjectBoardBreakerCollection.filter(breaker => breaker.RowIndex === rowIndex && poleIndexesUnderTheBusbar.indexOf(breaker.PoleIndex) > -1)\r\n // Find breaker under the busbar with the highest PoleIndex\r\n const lastBreakerUnderBusbar = breakersUnderBusbar.find(breaker => breaker.PoleIndex === Math.max(...breakersUnderBusbar.map(breaker => breaker.PoleIndex)))\r\n\r\n // Consider any extra poles as well, fitted options can't go under the busbar\r\n if (poleIndex <= lastBreakerUnderBusbar.PoleIndex + rowBusbar.ExtraPoles) {\r\n anyIssues = true\r\n errorMessage = 'Can\\'t add the fitted option under the busbar!'\r\n }\r\n }\r\n\r\n // Surge protection always goes on first row in the first pole position, if it is there then it's not possible to add anything there\r\n if (rowIndex === 0 && boardDetails.SurgeProtection) {\r\n const mainSwitchDetails = boardOptionData.MainSwitches.find(mainSwitch => mainSwitch.ItemID === board.MainSwitchID)\r\n let positionsOccupiedBySurgeProtection = []\r\n // Surge protection is always on the first row and always starts from the first pole, but the size of it is based on the size of the main switch\r\n for (let index = 0; index < mainSwitchDetails.SpaceUsed; index++) {\r\n positionsOccupiedBySurgeProtection.push(index) \r\n }\r\n\r\n let intersectingElements = intersectionWith(poleIndexesToUse, positionsOccupiedBySurgeProtection, isEqual)\r\n if (intersectingElements.length > 0) anyIssues = true\r\n }\r\n\r\n // Main switch always goes on the first row, but can be moved to any position\r\n if (rowIndex === 0) {\r\n // And if the main switch will be in any potential positions of the device, then it can't be placed there\r\n const mainSwitchPosition = parseInt(board.MainSwitchPosition, 10)\r\n const mainSwitchDetails = boardOptionData.MainSwitches.find(mainSwitch => mainSwitch.ItemID === board.MainSwitchID)\r\n let positionsOccupiedByMainSwitch = []\r\n for (let index = mainSwitchPosition; index < mainSwitchPosition + mainSwitchDetails.SpaceUsed; index++) {\r\n positionsOccupiedByMainSwitch.push(index) \r\n }\r\n\r\n let intersectingElements = intersectionWith(poleIndexesToUse, positionsOccupiedByMainSwitch, isEqual)\r\n if (intersectingElements.length > 0 && !isMainSwitch) anyIssues = true\r\n }\r\n\r\n // Check breaker devices\r\n board.ProjectBoardBreakerCollection.forEach(breaker => {\r\n if (breakerItemID === undefined || (breakerItemID !== undefined && breaker.ItemID !== breakerItemID)) {\r\n let positionsOccupiedByExistingDevice = []\r\n const spaceUsedByExistingDevice = parseInt(breaker.BreakerTypeReadOnly.SpaceUsed, 10)\r\n for (let index = breaker.PoleIndex; index < breaker.PoleIndex + spaceUsedByExistingDevice; index++) {\r\n positionsOccupiedByExistingDevice.push(index) \r\n }\r\n \r\n let intersectingElements = intersectionWith(poleIndexesToUse, positionsOccupiedByExistingDevice, isEqual)\r\n if (breaker.RowIndex === rowIndex && intersectingElements.length > 0) {\r\n anyIssues = true\r\n }\r\n }\r\n })\r\n\r\n // Check contactors\r\n board.ProjectBoardContractorCollection.forEach(contactor => {\r\n if (boardContactorId === undefined || (boardContactorId !== undefined && contactor.ItemID !== boardContactorId)) {\r\n let positionsOccupiedByExistingDevice = []\r\n const spaceUsedByExistingDevice = parseInt(contactor.ContractorReadOnly.SpaceUsed, 10)\r\n for (let index = contactor.PoleIndex; index < contactor.PoleIndex + spaceUsedByExistingDevice; index++) {\r\n positionsOccupiedByExistingDevice.push(index) \r\n }\r\n\r\n const intersectingElements = intersectionWith(poleIndexesToUse, positionsOccupiedByExistingDevice, isEqual)\r\n if (contactor.RowIndex === rowIndex && intersectingElements.length > 0) anyIssues = true\r\n }\r\n })\r\n\r\n // Check fitted options\r\n board.ProjectBoardFittedOptionCollection.forEach(fittedOption => {\r\n if (boardFittedOptionId === undefined || (boardFittedOptionId !== undefined && fittedOption.ItemID !== boardFittedOptionId)) {\r\n let positionsOccupiedByExistingDevice = []\r\n const spaceUsedByExistingDevice = parseInt(fittedOption.FittedOptionReadOnly.SpaceUsed, 10)\r\n for (let index = fittedOption.PoleIndex; index < fittedOption.PoleIndex + spaceUsedByExistingDevice; index++) {\r\n positionsOccupiedByExistingDevice.push(index) \r\n }\r\n\r\n const intersectingElements = intersectionWith(poleIndexesToUse, positionsOccupiedByExistingDevice, isEqual)\r\n if (fittedOption.RowIndex === rowIndex && intersectingElements.length > 0) anyIssues = true\r\n }\r\n })\r\n\r\n if (poleIndex + speceUsedInteger > rowPoles) {\r\n anyIssues = true\r\n }\r\n\r\n if (!!returnErrorMessage) {\r\n return anyIssues ? errorMessage : ''\r\n } else {\r\n console.log('anyIssues', anyIssues)\r\n return !anyIssues\r\n }\r\n}\r\n\r\nexport function validateProjectOrBoardName(name) {\r\n const regex = /^[a-zA-Z0-9- ]*$/\r\n return regex.test(name)\r\n}","import React from 'react'\r\nimport { isNullOrUndefined } from './../../utils/helpers'\r\n\r\nexport default class RadioObjectGroup extends React.Component {\r\n static defaultProps = {\r\n enabled: true,\r\n displayGlobalWarnings: false\r\n }\r\n\r\n selectCall(value, item) {\r\n if (this.isEnabled(item) && this.props.selectedValue !== value) {\r\n this.props.selecteCallback(value)\r\n }\r\n }\r\n\r\n isEnabled(item) {\r\n if (this.props.enabled === true && this.props.enabledOptions) {\r\n if (this.props.enabledOptions.indexOf(item['value']) > -1) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n } else {\r\n return this.props.enabled\r\n }\r\n }\r\n\r\n render() {\r\n let anyEnabledFields = false\r\n let anySelectedFields = false\r\n\r\n this.props.options.map((item) => {\r\n const isItemEnabled = this.isEnabled(item)\r\n const selected = !isNullOrUndefined(this.props.selectedValue) ? this.props.selectedValue === item['value'] : false\r\n\r\n if (isItemEnabled) anyEnabledFields = true\r\n if (selected) anySelectedFields = true\r\n })\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n { this.props.title }\r\n \r\n \r\n\r\n {this.props.options.map((item, index) => {\r\n const isItemEnabled = this.isEnabled(item)\r\n const selected = !isNullOrUndefined(this.props.selectedValue) ? this.props.selectedValue === item['value'] : false\r\n const selectorFriendlyName = this.props.title.split(' ').join('-').toLowerCase() \r\n\r\n return (\r\n
\r\n\r\n \r\n \r\n { item['label'] }\r\n { item['warning'] ? '*' : ''}\r\n { item['hasConditionalGlobalWarning'] && this.props.displayGlobalWarnings ? '*' : ''}\r\n \r\n
\r\n\r\n {(item['warning']) ? (\r\n { item['warning'] }
\r\n ) : ''}\r\n \r\n )\r\n })}\r\n
\r\n FlexSelect \r\n \r\n \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\n\r\nexport default class HeaderBrandCommercial 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\n \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.landingPopupMessage !== '' &&\r\n
\r\n\r\n {this.state.landingPopupMessage}
\r\n\r\n \r\n }\r\n\r\n {\r\n this.state.isCreatingNewProject &&\r\n \r\n\r\n \r\n\r\n \r\n }\r\n\r\n\r\n {\r\n this.state.confirmingProjectDeletion &&\r\n \r\n\r\n Are you sure you want to delete this project?
\r\n\r\n \r\n \r\n Cancel \r\n \r\n \r\n \r\n Yes, Delete\r\n \r\n \r\n
\r\n \r\n }\r\n\r\n {this.state.howItWorksModal &&\r\n \r\n {this.state.isCommercial ?\r\n VIDEO \r\n :\r\n VIDEO \r\n }\r\n \r\n }\r\n\r\n {\r\n this.state.hasCreatedNewProject &&\r\n \r\n \r\n
\r\n \r\n \r\n Project Created \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isDuplicatingProject &&\r\n \r\n \r\n
\r\n \r\n \r\n Duplicating Project \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasDuplicatedProject &&\r\n \r\n \r\n
\r\n \r\n \r\n Project successfully copied \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isDeletingProject &&\r\n \r\n \r\n
\r\n \r\n \r\n {this.state.deletingProjectTitle} \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasDeletedProject &&\r\n \r\n \r\n
\r\n \r\n \r\n {this.state.deletedProjectMessage} \r\n
\r\n
\r\n }\r\n\r\n \r\n \r\n
\r\n \r\n My {this.state.isCommercial && !this.state.isSwitchBoardManufacturer && Commercial }{!this.state.isCommercial && Residential } Projects\r\n \r\n {\r\n !this.state.isSwitchBoardManufacturer &&\r\n \r\n \r\n \r\n \r\n Commercial \r\n
\r\n \r\n \r\n \r\n Residential \r\n
\r\n \r\n }\r\n \r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n New Project\r\n \r\n \r\n
\r\n
\r\n
\r\n
{ this.filterProjectType('all') }}>\r\n
{this.state['incompleteCount' + this.state.currentFlexType] + this.state['completeCount' + this.state.currentFlexType] + this.state['toBeApprovedCount' + this.state.currentFlexType]}
\r\n
All Projects
\r\n
\r\n
{ this.filterProjectType('incomplete') }}>\r\n
{this.state['incompleteCount' + this.state.currentFlexType] + this.state['toBeApprovedCount' + this.state.currentFlexType]}
\r\n
In Progress
\r\n
\r\n
{ this.filterProjectType('complete') }}>\r\n
{this.state['completeCount' + this.state.currentFlexType]}
\r\n
Completed Orders
\r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n {\r\n (!this.state.isLoadingOrders && this.state.orders.length === 0 && !this.state.isLandingPage ||\r\n (!this.state.isLandingPage && this.state['incompleteCount' + this.state.currentFlexType] === 0 &&\r\n this.state['toBeApprovedCount' + this.state.currentFlexType] === 0)) &&\r\n this.state.filterProjectTypeValue !== 'complete' &&\r\n
\r\n
\r\n \r\n
\r\n You don’t have any {this.state.isCommercial && Commercial }{!this.state.isCommercial && Residential } projects yet.\r\n
\r\n
\r\n Add your first project above\r\n
\r\n
\r\n }\r\n\r\n {this.state.isLandingPage &&\r\n <>\r\n
\r\n
\r\n Welcome to FlexSelect\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
this.openHowItWorksModal()}>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n See how it works\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Start with a project\r\n
\r\n
\r\n Creating a project allows you to configure your board(s)\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Add a board and components\r\n
\r\n
\r\n Create a board for your project and configure the components you need\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Get your boards\r\n
\r\n
\r\n Once your board is configured you are ready to get a quote, place the order and receive the board.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n }\r\n\r\n {\r\n this.state.orders.length > 0 && !this.state.anySearchResults && this.state.searchValue !== '' &&\r\n
\r\n
\r\n \r\n
\r\n No projects found\r\n
\r\n
\r\n }\r\n\r\n {\r\n !this.state.isLoadingOrders && this.state.orders.length > 0 && !this.state.isLandingPage &&\r\n
\r\n {\r\n (\r\n (this.state.anySearchResults && this.state.filterProjectTypeValue !== 'complete') ||\r\n (\r\n this.state.anySearchResults &&\r\n this.state.filterProjectTypeValue === 'complete' &&\r\n this.state['completeCount' + this.state.currentFlexType] > 0\r\n )\r\n ) &&\r\n (\r\n this.state['incompleteCount' + this.state.currentFlexType] > 0 ||\r\n this.state['toBeApprovedCount' + this.state.currentFlexType] > 0\r\n ) &&\r\n
\r\n
\r\n
{ this.setSorting('Title') }}>\r\n Project Name\r\n
\r\n
{ this.setSorting('ProjectNumberReadOnly') }}>\r\n Job Number\r\n
\r\n
{ this.setSorting('ItemModifiedWhen') }}>\r\n Last Edited\r\n
\r\n
{ this.setSorting('IsFinalised') }}>\r\n Status\r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n
\r\n {\r\n !this.state.isLoadingOrders && this.state['completeCount' + this.state.currentFlexType] === 0 && this.state.filterProjectTypeValue === 'complete' &&\r\n
\r\n
\r\n \r\n
\r\n You don’t have any completed {this.state.isCommercial && Commercial }{!this.state.isCommercial && Residential } projects yet.\r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.orders.map((order, index) => {\r\n if ((this.state.searchValue !== '' && order.Title.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) === -1) || (this.state.isCommercial && !order.isCommercial) || (!this.state.isCommercial && order.isCommercial)) {\r\n return ''\r\n } else {\r\n return (\r\n
\r\n {\r\n (\r\n (this.state.filterProjectTypeValue === 'all') ||\r\n (this.state.filterProjectTypeValue === 'incomplete' && !order.IsFinalised) ||\r\n (this.state.filterProjectTypeValue === 'complete' && order.IsFinalised)\r\n )\r\n &&\r\n { this.openProject(order.ItemID, order.isCommercial, event) }}>\r\n
{order.Title}
\r\n
{order.ProjectNumberReadOnly}
\r\n
{order.ItemModifiedWhen}
\r\n
\r\n \r\n {order.IsToBeApproved && 'Available'}\r\n {!order.IsFinalised && 'In Progress'}\r\n {order.IsFinalised && 'Order Completed'}\r\n \r\n
\r\n\r\n
\r\n { this.duplicateProject(order.ItemID) }} >\r\n \r\n \r\n \r\n Duplicate\r\n \r\n \r\n { this.startProjectDeletion(order.ItemID) }}>\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
\r\n Loading... \r\n
\r\n )\r\n } else {\r\n return (\r\n \r\n )\r\n }\r\n }\r\n\r\n isValueSelected(value) {\r\n if (this.isOptionDisabled(value)) { return }\r\n\r\n return this.state.selectedOptions && this.state.selectedOptions.includes(value)\r\n }\r\n\r\n isOptionDisabled(value) {\r\n if (!this.props.isPole2Filled){ return false }\r\n\r\n // If pole 2 is filled, then we disable option 2 and 3\r\n return (value === 2 || value === 3)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
Select extras
\r\n\r\n
\r\n {this.props.options.map(opt => {\r\n const isSelected = this.isValueSelected(opt.ItemID)\r\n const isDisabled = this.isOptionDisabled(opt.ItemID)\r\n\r\n return (\r\n
\r\n
\r\n
\r\n \r\n
\r\n { opt.DisplayTitle } \r\n { opt.DisplayDescription }
\r\n { isDisabled &&\r\n \r\n This option is only available when pole slot 2 is empty\r\n \r\n }\r\n \r\n
\r\n
\r\n )\r\n })}\r\n
\r\n
au.estimating@se.com `)\r\n\r\n canGoNextStep = false\r\n }\r\n }\r\n }\r\n }\r\n \r\n if (!!finalFilteredBoardData[0].EnclosureReference) {\r\n const enclosureParentItem = this.state.parentChildData.find(item => item.ParentItemReference === finalFilteredBoardData[0].EnclosureReference)\r\n if (enclosureParentItem !== undefined) {\r\n const enclosureChildItemReference = enclosureParentItem.ChildItemReference\r\n const enclosureAvailability = this.state.commercialAllPartsAvailable.find(item => item.ItemCode === enclosureChildItemReference)\r\n\r\n if (enclosureAvailability !== undefined) {\r\n if (enclosureAvailability.IsLowStock) {\r\n availablityMessages.push(`Enclosure ${enclosureAvailability.Description} Low stock, longer lead times may apply`)\r\n } else if (!enclosureAvailability.IsInStock) {\r\n availablityMessages.push(`Enclosure ${enclosureAvailability.Description} is out of stock. Please, contact au.estimating@se.com `)\r\n\r\n canGoNextStep = false\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (!!finalFilteredBoardData[0].PowerMeter1Code) {\r\n const meterParentItem = this.state.parentChildData.find(item => item.ParentItemReference === finalFilteredBoardData[0].PowerMeter1Code)\r\n if (meterParentItem !== undefined) {\r\n const meterChildItemReference = meterParentItem.ChildItemReference\r\n const meterAvailability = this.state.commercialAllPartsAvailable.find(item => item.ItemCode === meterChildItemReference)\r\n\r\n if (meterAvailability !== undefined) {\r\n if (meterAvailability.IsLowStock) {\r\n availablityMessages.push(`Power Meter ${meterAvailability.Description} Low stock, longer lead times may apply`)\r\n } else if (!meterAvailability.IsInStock) {\r\n availablityMessages.push(`Power Meter ${meterAvailability.Description} is out of stock. Please, contact au.estimating@se.com `)\r\n\r\n canGoNextStep = false\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (!!finalFilteredBoardData[0].PowerMeter2Code) {\r\n const meterParentItem = this.state.parentChildData.find(item => item.ParentItemReference === finalFilteredBoardData[0].PowerMeter2Code)\r\n if (meterParentItem !== undefined) {\r\n const meterChildItemReference = meterParentItem.ChildItemReference\r\n const meterAvailability = this.state.commercialAllPartsAvailable.find(item => item.ItemCode === meterChildItemReference)\r\n\r\n if (meterAvailability !== undefined) {\r\n if (meterAvailability.IsLowStock) {\r\n availablityMessages.push(`Power Meter ${meterAvailability.Description} Low stock, longer lead times may apply`)\r\n } else if (!meterAvailability.IsInStock) {\r\n availablityMessages.push(`Power Meter ${meterAvailability.Description} is out of stock. Please, contact au.estimating@se.com `)\r\n\r\n canGoNextStep = false\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (!!finalFilteredBoardData[0].ChassisReference) {\r\n const chassisParentItem = this.state.parentChildData.find(item => item.ParentItemReference === finalFilteredBoardData[0].ChassisReference)\r\n if (chassisParentItem !== undefined) {\r\n const chassisChildItemReference = chassisParentItem.ChildItemReference\r\n const chassisAvailability = this.state.commercialAllPartsAvailable.find(item => item.ItemCode === chassisChildItemReference)\r\n if (chassisAvailability !== undefined) {\r\n if (chassisAvailability.IsLowStock) {\r\n availablityMessages.push(`Chassis ${chassisAvailability.Description} Low stock, longer lead times may apply`)\r\n } else if (!chassisAvailability.IsInStock) {\r\n availablityMessages.push(`Chassis ${chassisAvailability.Description} is out of stock. Please, contact au.estimating@se.com `)\r\n\r\n canGoNextStep = false\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.setState({ availabilityValidationMessages: availablityMessages })\r\n }\r\n\r\n }\r\n\r\n return canGoNextStep\r\n }\r\n\r\n renderModalHeader = () => {\r\n let progress = this.state.currentStep * 20\r\n if (this.state.isExistingBoard) {\r\n progress = 100\r\n }\r\n\r\n const isNotAllowedToGoStep2 = (this.state.currentStep === 1 && !this.state.isExistingBoard && !this.state.canGoNextStep)\r\n const isNotAllowedToGoStep3 = (this.state.currentStep === 2 && !this.state.canGoNextStep) || (this.state.currentStep < 2 && !this.state.isExistingBoard)\r\n const isNotAllowedToGoStep4 = (this.state.currentStep === 3 && !this.state.canGoNextStep) || (this.state.currentStep < 3 && !this.state.isExistingBoard)\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.isExistingBoard && Edit board }\r\n {!this.state.isExistingBoard && Add a board }\r\n \r\n
\r\n
{ this.goStep(1) }}>\r\n 1 \r\n Set-Up \r\n
\r\n
2 || this.state.isExistingBoard ? ' is-done' : '') +\r\n (isNotAllowedToGoStep2 ? ' not-allowed' : '')\r\n } onClick={() => { if (!isNotAllowedToGoStep2) this.goStep(2) }}>\r\n 2 \r\n Main Switch \r\n
\r\n
3 || this.state.isExistingBoard ? ' is-done' : '') +\r\n (isNotAllowedToGoStep3 ? ' not-allowed' : '')\r\n } onClick={() => { if (!isNotAllowedToGoStep3) this.goStep(3) }}>\r\n 3 \r\n Chassis \r\n
\r\n
4 || this.state.isExistingBoard ? ' is-done' : '') +\r\n (isNotAllowedToGoStep4 ? ' not-allowed' : '')\r\n } onClick={() => { if (!isNotAllowedToGoStep4) this.goStep(4) }}>\r\n 4 \r\n Size \r\n
\r\n
{ this.goStep(5) }}>\r\n 5 \r\n Optional Extras \r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.state.currentStep > 1 &&\r\n { this.goStepBack() }}>\r\n \r\n Previous\r\n \r\n \r\n }\r\n {\r\n // ((this.state.hasUsedBackButton && this.state.canGoNextStep) || (this.state.isExistingBoard && this.state.currentStep !== 5)) &&\r\n (!this.state.isExistingBoard && this.state.currentStep !== 5) &&\r\n { this.goNextStep() }}>\r\n \r\n Next\r\n \r\n \r\n }\r\n\r\n {\r\n (this.state.isExistingBoard && this.state.currentStep !== 5) &&\r\n { this.goNextStep() }}>\r\n \r\n Next\r\n \r\n \r\n }\r\n\r\n {\r\n (this.state.isExistingBoard && this.state.currentStep < 5) &&\r\n { this.updateBoard() }}>\r\n \r\n Save & Close\r\n \r\n \r\n }\r\n\r\n {/* This is only showing on last step */}\r\n {\r\n this.state.currentStep === 5 &&\r\n { this.updateBoard() }}>\r\n \r\n {this.state.isExistingBoard && Update board }\r\n {!this.state.isExistingBoard && Add board }\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n\r\n goStepBack = () => {\r\n this.setState({\r\n currentStep: this.state.currentStep - 1,\r\n hasUsedBackButton: true\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n }\r\n\r\n goNextStep = () => {\r\n if (this.state.currentStep === 4 && !this.state.isExistingBoard && !this.state.existingBoard) {\r\n this.createBoardCall()\r\n } else {\r\n this.setState({\r\n currentStep: this.state.currentStep + 1\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n \r\n if (!this.state.currentStepStatus[this.state.currentStep]) {\r\n analyticsDataLayer.addBoard({\r\n \"item_board_name\": '',\r\n \"item_board_id\": '',\r\n \"configuration_name\": '',\r\n \"configuration_id\": '', \r\n \"project_name\": this.props.projectName,\r\n \"project_id\": this.props.projectID.toString(),\r\n \"project_type\": 'Commercial',\r\n \"funnel_step\": this.state.currentStep,\r\n \"funnel_total_steps\": '5'\r\n })\r\n }\r\n\r\n this.setState({\r\n currentStepStatus: {\r\n ...this.state.currentStepStatus,\r\n [this.state.currentStep]: true\r\n }\r\n })\r\n\r\n }\r\n }\r\n\r\n goStep = (stepNumber) => {\r\n if (this.state.isExistingBoard || (!this.state.isExistingBoard && stepNumber !== 5)) {\r\n this.setState({\r\n currentStep: stepNumber\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n }\r\n }\r\n\r\n closeModal = () => {\r\n jQuery('body').removeClass('modal-is-open')\r\n\r\n if (this.props.closeCallback !== undefined) {\r\n this.props.closeCallback(this.state.board)\r\n }\r\n }\r\n\r\n // This function returns the array of Board Option IDs of the options applied to the current board\r\n getSelectedChassisOptionArray() {\r\n if (!this.state.board.ProjectBoardFittedOptionCollection || !this.state.board.ProjectBoardFittedOptionCollection.length) {\r\n return []\r\n }\r\n\r\n // Loop throught the collection of option object and return an array of the selected options ID\r\n const selected = this.state.board.ProjectBoardFittedOptionCollection.map(item => {\r\n return item.FittedOptionItemID\r\n })\r\n\r\n return selected\r\n }\r\n\r\n // Check if there is a breaker covering chassis position index 2\r\n checkIfIndex2IsFilled() {\r\n if (!this.state.board.ProjectBoardBreakerCollection || !this.state.board.ProjectBoardBreakerCollection.length) {\r\n return false\r\n }\r\n\r\n const boardData = this.getCurrentBoardData()\r\n const largePoleCount = boardData.ChassisType === 'Hybrid' ? boardData.Chassis1PoleCount27mm : 0\r\n const checkOptions = this.state.board.ProjectBoardBreakerCollection.filter(item => {\r\n // We don't use this way of searching for breker data anymore. Leave it anyway so we can see a console log and find during client testing\r\n // if we missed anything, this can be very helpfull in debugging and hard to find again if we remove it\r\n // If you still see this code after June 2021, then please remove it\r\n const breakerObj = this.props.boardOptionData.find(dataItem => dataItem.ItemID === item.BreakerTypeItemID)\r\n if (breakerObj === undefined) {\r\n console.warn('Couldn\\'t find corresponding board option data for the breaker object')\r\n }\r\n\r\n return (item.ChassisPositionIndex === (2 + largePoleCount) || (item.ChassisPositionIndex === (4 + largePoleCount) && item.BreakerTypeReadOnly.PoleCount >= 3))\r\n })\r\n\r\n return (checkOptions.length > 0)\r\n }\r\n\r\n selectChassisOptionalExtras = (selectedOptions) => {\r\n let canAddOptionalExtras = true\r\n const availablityMessages = []\r\n if (this.state.chassisOptions.length > 0) { \r\n selectedOptions.forEach(optionItemID => {\r\n const optionData = this.state.chassisOptions.find(item => item.ItemID === optionItemID)\r\n \r\n // The optionData.BOMReference in the case of optional extras is the Parent Item Reference inside \r\n // the Parent-Child List, so we can find the Child Item Reference and check the availability\r\n const BOMElement = this.state.parentChildData.find(item => item.ParentItemReference === optionData.BOMReference)\r\n if (BOMElement !== undefined) {\r\n const BOMElementAvailability = this.state.commercialAllPartsAvailable.find(item => item.ItemCode === BOMElement.ChildItemReference)\r\n \r\n if (BOMElementAvailability.IsLowStock) {\r\n availablityMessages.push(`${BOMElementAvailability.Description} Low stock, longer lead times may apply`)\r\n } else if (!BOMElementAvailability.IsInStock) {\r\n availablityMessages.push(`${BOMElementAvailability.Description} is out of stock. Please, contact au.estimating@se.com `)\r\n \r\n canAddOptionalExtras = false\r\n }\r\n }\r\n })\r\n }\r\n\r\n this.setState({ \r\n selectedChassisOptions: selectedOptions,\r\n availabilityValidationMessages: availablityMessages,\r\n canAddOptionalExtras: canAddOptionalExtras\r\n })\r\n }\r\n\r\n render() {\r\n const boardOptions = this.props.boardOptions\r\n const boardDetails = this.state.boardDetails\r\n\r\n return (\r\n \r\n {\r\n this.state.isLoading &&\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n this.state.isExistingBoard ?\r\n Updating \r\n :\r\n \r\n {this.state.currentStep === 5 ? 'Adding board' : 'Saving'}\r\n \r\n }\r\n
\r\n
\r\n }\r\n\r\n
\r\n {this.renderModalHeader()}\r\n\r\n
\r\n {/* Step 1 */}\r\n
\r\n\r\n {/* Step 2 */}\r\n
\r\n\r\n {/* Step 3 */}\r\n
\r\n\r\n {/* Step 4 */}\r\n
\r\n\r\n {/* Step 5 */}\r\n
\r\n
\r\n\r\n {\r\n this.state.validationMessage &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n { this.state.availabilityValidationMessages.length > 0 &&\r\n
\r\n {\r\n this.state.availabilityValidationMessages.map((message, index) => {\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 {this.renderModalFooter()}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n { title }\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Qty \r\n Item \r\n \r\n {boardDescription.map((boardDescription, index) => {\r\n return (\r\n \r\n {boardDescription.Quantity} \r\n {boardDescription.Description} \r\n \r\n )\r\n })}\r\n \r\n
\r\n
\r\n {/* Add .is-error to put it in an error state */}\r\n
\r\n
\r\n { !this.props.isValid && '[DATA CORRUPTED] - ' } { this.props.name }\r\n \r\n
\r\n {this.renderPercent('Chassis 1', this.props.isValid ? this.props.chassis1percent : null, 1)}\r\n {this.renderPercent('Chassis 2', this.props.isValid ? this.props.chassis2percent : null, 2)}\r\n
\r\n \r\n
\r\n { !this.props.isFinalised &&\r\n \r\n {\r\n !this.props.maxBoardLimitReached &&\r\n \r\n \r\n \r\n Copy Board \r\n \r\n }\r\n \r\n \r\n \r\n Delete \r\n \r\n \r\n }\r\n
\r\n
\r\n { !this.props.isFinalised &&\r\n \r\n \r\n \r\n \r\n \r\n Edit Board\r\n \r\n \r\n { this.configureBoard(this.props.projectId, this.props.id) }}>\r\n \r\n Configure Board\r\n \r\n \r\n \r\n }\r\n\r\n { this.props.isFinalised &&\r\n \r\n \r\n \r\n \r\n \r\n View Details\r\n \r\n \r\n\r\n {\r\n this.props.drawingGuid ?\r\n this.downloadDrawing(this.props.drawingGuid) } className={\"button button--2 \" + (this.state.isLoading ? 'disabled' : '')} disabled={this.state.isLoading}>\r\n \r\n \r\n {\r\n analyticsDataLayer.downloadLayout({\r\n \"document_id\": this.props.drawingGuid,\r\n \"document_name\": \"Download Drawings\",\r\n \"document_type\": \"pdf\"\r\n })\r\n }}>\r\n View Drawings\r\n \r\n \r\n :\r\n \r\n \r\n \r\n \r\n {\r\n this.props.loadingDrawings ? 'Loading' : 'No board drawing available'\r\n }\r\n \r\n \r\n }\r\n \r\n }\r\n
\r\n
\r\n\r\n
\r\n { this.props.boards.map(item => {\r\n let drawingG = null;\r\n if (this.props.isFinalised && !this.props.loadingDrawings) {\r\n const drawingObj = this.props.boardDrawings.find(drawItem => drawItem.ProjectBoardID === item.ItemID);\r\n if (drawingObj) {\r\n drawingG = drawingObj.ItemGUID;\r\n }\r\n }\r\n // Create the list of breaker details\r\n let boardDescription = [];\r\n if (!item.hasOwnProperty('BoardBOMComponents') || !item.BoardBOMComponents.length) {\r\n item.ProjectBoardBreakerCollection.forEach(item => {\r\n const desc = item.BreakerTypeReadOnly.DrawingDesc;\r\n const inArray = boardDescription.find(item => item.Description === desc);\r\n if (inArray) {\r\n boardDescription = boardDescription.map(item => {\r\n if (item.Description === desc) {\r\n item.Quantity = item.Quantity + 1;\r\n }\r\n return item;\r\n });\r\n } else {\r\n boardDescription.push({\r\n Quantity: 1,\r\n Description: desc,\r\n StockAvailability: 'N/A'\r\n });\r\n }\r\n });\r\n } else {\r\n boardDescription = [...item.BoardBOMComponents];\r\n }\r\n\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react'\r\nimport { Link, withRouter } from 'react-router-dom'\r\nimport Header from './../../../components/header/Header'\r\nimport GlobalOverlay from './../../../components/global-overlay/GlobalOverlay'\r\nimport { apiCallsCommercial } from './../../../utils/apiCallsCommercial'\r\nimport { getUrlParameter, isNullOrUndefined } from './../../../utils/helpers'\r\nimport commonFunctionsService from './../../../services/CommonFunctionsService'\r\nimport Modal from './../../../components/modal/Modal'\r\nimport BoardDetails from './BoardDetails'\r\nimport cloneDeep from 'lodash.clonedeep'\r\nimport BoardList from './BoardList'\r\nimport analyticsDataLayer from '../../../services/AnalyticsDataLayer'\r\n\r\nconst { CONST } = require('./../../../CONST')\r\n\r\nclass ProjectDetails extends React.Component {\r\n constructor (props) {\r\n super(props)\r\n\r\n this.state = {\r\n projectID: '',\r\n project: {},\r\n userData: {},\r\n fillQuoteRequirement: 10,\r\n loadingDrawings: false,\r\n orderSummaryId: null,\r\n currentBoard: null,\r\n boardDrawings: [],\r\n boardOptionData: [],\r\n boardOptions: {},\r\n apiErrorMessage: '',\r\n isLoading: true,\r\n apiError: false,\r\n apiMessage: 'Loading page',\r\n isChangingProjectTitle: false,\r\n hasSubmittedNewProjectTitle: false,\r\n newProjectTitle: '',\r\n isRequestingNewProjectTitleChange: false,\r\n changingTitleApiErrorMessage: false,\r\n isConfiguringBoard: false,\r\n isDuplicatingBoard: false,\r\n hasDuplicatedBoard: false,\r\n isDeletingBoard: false,\r\n toDeleteBoardId: null,\r\n pageError: '',\r\n wholesalerBranchID: 0,\r\n showBoardDetails: false,\r\n selectedBoardDescription: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ projectID: getUrlParameter('orderID') }, () => {\r\n this.initialize()\r\n })\r\n }\r\n\r\n initialize() {\r\n apiCallsCommercial.apiGetProject(this.state.projectID)\r\n .then(projectData => {\r\n this.setState({\r\n project: projectData,\r\n newProjectTitle: projectData.Title,\r\n fillQuoteRequirement: projectData.FilledQuoteRequirement ? projectData.FilledQuoteRequirement : 10\r\n })\r\n\r\n // On a finalised project we need to get drawing links and order summary info\r\n if (projectData.IsFinalised) {\r\n this.setState({ loadingDrawings: true })\r\n\r\n apiCallsCommercial.apiGetLayoutDiagrams(this.state.projectID)\r\n .then(response => {\r\n // Split the response into distinct results\r\n const orderSummaryArray = response.ProjectFileCollection.filter(x => x.ProjectBoardID === -1)\r\n const drawingsArray = response.ProjectFileCollection.filter(x => x.ProjectBoardID !== -1)\r\n\r\n if (orderSummaryArray.length > 0) {\r\n this.setState({ orderSummaryId: orderSummaryArray[0].ItemGUID })\r\n }\r\n\r\n this.setState({\r\n boardDrawings: drawingsArray,\r\n loadingDrawings: false\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({\r\n apiErrorMessage: error.message,\r\n loadingDrawings: false\r\n })\r\n })\r\n }\r\n\r\n // Load the board options after the project has been loaded\r\n return apiCallsCommercial.apiGetBoardOption()\r\n })\r\n .then(boardOptionData => {\r\n this.tempBoardOptionData = boardOptionData\r\n this.setState({\r\n boardOptionData: boardOptionData\r\n })\r\n\r\n return apiCallsCommercial.apiGetBoardOptionLabels()\r\n })\r\n .then(boardOptionLabels => {\r\n // Once we get the board option labels, we need to alter it, as the chassis 1 / 2 pole counts needs to be\r\n // dynamically driven via the boardOptionData\r\n const chassis1PoleCount = []\r\n const chassis2PoleCount = []\r\n\r\n this.tempBoardOptionData.forEach(board => {\r\n const check1Data = chassis1PoleCount.find(check => check.value === board.Chassis1PoleCount)\r\n if (!check1Data && board.Chassis1PoleCount) {\r\n chassis1PoleCount.push({\r\n value: board.Chassis1PoleCount,\r\n label: `${board.Chassis1PoleCount}`\r\n })\r\n }\r\n\r\n const check2Data = chassis2PoleCount.find(check => check.value === board.Chassis2PoleCount)\r\n if (!check2Data && board.Chassis2PoleCount) {\r\n chassis2PoleCount.push({\r\n value: board.Chassis2PoleCount,\r\n label: `${board.Chassis2PoleCount}`\r\n })\r\n }\r\n })\r\n\r\n boardOptionLabels.OptionsChassis1PoleCount = chassis1PoleCount.sort((a,b) => {return (a.value > b.value) ? 1 : -1 })\r\n boardOptionLabels.OptionsChassis2PoleCount = chassis2PoleCount.sort((a,b) => {return (a.value > b.value) ? 1 : -1 })\r\n\r\n // All done, set it to state\r\n this.setState({\r\n boardOptions: boardOptionLabels\r\n })\r\n\r\n // If the user opens a project and there are no boards, then open the modal\r\n if (this.state.project.ProjectBoards.length === 0) {\r\n // Add some visual deleay to improve UX, without it it's just too fast and confusing\r\n window.setTimeout(() => {\r\n this.startConfiguringBoard()\r\n }, 500)\r\n }\r\n\r\n return apiCallsCommercial.apiUserSettings()\r\n })\r\n .then(userData => {\r\n this.setState({\r\n userData: userData,\r\n isLoading: false,\r\n wholesalerBranchID: userData.PreferredWholesaler1ItemID\r\n }, () => {\r\n let shouldTriggerNewBoardCreation = getUrlParameter('newBoard')\r\n if (shouldTriggerNewBoardCreation !== '') {\r\n this.startConfiguringBoard()\r\n }\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({ apiErrorMessage: error.message })\r\n })\r\n }\r\n\r\n startConfiguringBoard = (boardID) => {\r\n if (boardID === undefined) {\r\n if (this.hasMaxBoardLimitBeenReached()) {\r\n this.setState({ pageError: 'You have reached the maximum number of boards per project and cannot ADD or COPY anymore.' })\r\n } else if (this.state.project.IsFinalised) {\r\n this.setState({ pageError: 'The order has alredy been sent and the project can no longer be modified.' })\r\n } else {\r\n this.setState({ isConfiguringBoard: true, currentBoard: null })\r\n }\r\n\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n } else {\r\n const boardToEdit = this.state.project.ProjectBoards.find(board => board.ItemID === boardID)\r\n this.setState({ isConfiguringBoard: true, currentBoard: boardToEdit })\r\n }\r\n }\r\n\r\n stopConfiguringBoard = (board) => {\r\n this.setState({ isConfiguringBoard: false, currentBoard: null })\r\n \r\n if (!isNullOrUndefined(board)) {\r\n // Modal sucessfually create or updated a board, add it to the project states or update existing one\r\n const indexOfExistingBoard = this.state.project.ProjectBoards.findIndex(projectBoard => projectBoard.ItemGUID === board.ItemGUID)\r\n\r\n if (indexOfExistingBoard > -1) {\r\n this.state.project.ProjectBoards[indexOfExistingBoard] = board\r\n } else {\r\n this.state.project.ProjectBoards.push(board)\r\n }\r\n\r\n this.forceUpdate()\r\n }\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n copyBoard = (boardId) => {\r\n this.setState({ isDuplicatingBoard: true })\r\n\r\n apiCallsCommercial.apiCopyBoard(this.state.project.ItemID, boardId)\r\n .then(projectData => {\r\n this.setState({\r\n project: projectData\r\n })\r\n\r\n this.setState({ isDuplicatingBoard: false, hasDuplicatedBoard: true })\r\n window.setTimeout(() => { this.setState({ hasDuplicatedBoard: false }) }, 1500)\r\n })\r\n .catch(error => {\r\n this.setState({ isDuplicatingBoard: false })\r\n alert(`There was an error copying the board: ${error.message}`)\r\n })\r\n }\r\n\r\n toDeleteBoard = (boardId) => {\r\n this.setState({ isDeletingBoard: true, toDeleteBoardId: boardId })\r\n }\r\n\r\n deleteBoardRequest() {\r\n this.setState({ isRequestingBoardDeletion: true })\r\n\r\n this.stopDeletingBoard()\r\n\r\n apiCallsCommercial.apiDeleteBoard(this.state.projectID, this.state.toDeleteBoardId)\r\n .then(updatedProject => {\r\n this.setState({\r\n project: updatedProject,\r\n toDeleteBoardId: null,\r\n isRequestingBoardDeletion: false\r\n }) \r\n })\r\n .catch(error => alert(error.message))\r\n }\r\n \r\n startChangingProjectTitle = () => {\r\n this.setState({ isChangingProjectTitle: true })\r\n }\r\n\r\n stopChangingProjectTitle = () => {\r\n this.setState({ isChangingProjectTitle: false })\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n stopDeletingBoard = () => {\r\n this.setState({ isDeletingBoard: false })\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n changeProjectTitle = () => {\r\n this.setState({ hasSubmittedNewProject: true })\r\n\r\n if (this.state.newProjectTitle !== '') {\r\n this.setState({\r\n changingTitleApiErrorMessage: '',\r\n isRequestingNewProjectTitleChange: true\r\n })\r\n\r\n let projectData = cloneDeep(this.state.project)\r\n projectData.Title = this.state.newProjectTitle\r\n\r\n apiCallsCommercial.apiSetProjectTitle(projectData)\r\n .then(response => {\r\n // At this point we can read ItemGUID from the response and redirect user to that page\r\n this.setState({\r\n hasSubmittedNewProjectTitle: true,\r\n isRequestingNewProjectTitleChange: false,\r\n project: response\r\n }, () => {\r\n this.stopChangingProjectTitle()\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({\r\n changingTitleApiErrorMessage: error,\r\n isRequestingNewProjectTitleChange: false\r\n })\r\n })\r\n\r\n }\r\n }\r\n\r\n handelChange = (name, value) => {\r\n this.setState({ ['' + name]: value })\r\n }\r\n\r\n hasMaxBoardLimitBeenReached() {\r\n // Function to check if the user has reached max board limit or not\r\n // App should not let user copy or add boards if they are at the limit.\r\n // Hardcode the max board limit if its not returned from the API\r\n const boardLimit = this.state.project.MaxBoardLimit ? this.state.project.MaxBoardLimit : 8\r\n return (this.state.project.ProjectBoards.length >= boardLimit)\r\n }\r\n\r\n configureChassis = (projectID, boardID) => {\r\n this.props.history.push(CONST.PAGES.CONFIGURE_CHASSIS + '?projectID=' + projectID + '&boardID=' + boardID)\r\n }\r\n\r\n isEnoughFilledToGenerateQuote() {\r\n let noEnoughFilled = false\r\n this.state.project.ProjectBoards.map(board => {\r\n if (board.Chassis1PercentComplete < this.state.fillQuoteRequirement || ((board.BoardTypeReadOnly && board.BoardTypeReadOnly.ChassisCount === 2) && board.Chassis2PercentComplete < this.state.fillQuoteRequirement)) {\r\n noEnoughFilled = true\r\n return\r\n }\r\n })\r\n\r\n if (this.state.project.ProjectBoards.length === 0) {\r\n noEnoughFilled = true\r\n }\r\n\r\n return !noEnoughFilled\r\n }\r\n\r\n viewQuote() {\r\n // If you don't have any boards...\r\n if (!this.state.project.ProjectBoards || !this.state.project.ProjectBoards.length) {\r\n this.setState({ \r\n pageError: 'Your project needs at least one board filled greater than ' + this.state.fillQuoteRequirement + '% to generate a quote.',\r\n fillQuoteRequirementError: true\r\n })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n\r\n return false\r\n }\r\n\r\n // You've got boards but not all of them are filled out to minimum levels...\r\n let noEnoughFilled = !this.isEnoughFilledToGenerateQuote()\r\n if (noEnoughFilled) {\r\n this.setState({ \r\n pageError: 'Your project needs all boards filled greater than ' + this.state.fillQuoteRequirement + '% to generate a quote.',\r\n fillQuoteRequirementError: true\r\n })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n\r\n return false\r\n }\r\n\r\n // Check if all project boards meet the assembly performance checks, display error only for the first one encountered \r\n for (let index = 0; index < this.state.project.ProjectBoards.length; index++) {\r\n const projectBoard = this.state.project.ProjectBoards[index]\r\n \r\n if (!projectBoard.AssemblyPowerLossCheckSuccess || !projectBoard.Chassis1PowerLossCheckSuccess || !projectBoard.Chassis2PowerLossCheckSuccess || projectBoard.LoadFactorStatusColour === 'red') {\r\n this.setState({ \r\n pageError: 'Can\\'t generate quote. Please check error message on \"' + projectBoard.Name + '\" board.',\r\n fillQuoteRequirementError: true\r\n })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n \r\n return false\r\n }\r\n }\r\n\r\n // If you're a contractor you need a selected wholesaler\r\n if (this.state.userData.UserIsContractor && (this.state.wholesalerBranchID === 0 || this.state.wholesalerBranchID === -1)) {\r\n this.setState({ pageError: 'Current user doesn\\'t have a preferred wholesalers configured.' })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n return false\r\n }\r\n\r\n // Finally made it through all the hoops, go to the Quote page.\r\n let pageLink = \"\"\r\n if (this.state.userData.UserIsContractor) {\r\n pageLink = CONST.PAGES.QUOTE + '?projectID=' + this.state.projectID + '&wholesalerBranchID=' + this.state.wholesalerBranchID\r\n this.props.history.push(pageLink)\r\n } else {\r\n pageLink = CONST.PAGES.QUOTE + '?projectID=' + this.state.projectID\r\n this.props.history.push(pageLink)\r\n }\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: \"View Quote\",\r\n cta_link: window.location.hostname + pageLink,\r\n cta_location: \"Project details\",\r\n })\r\n }\r\n\r\n renderProjectBoardModals = () => {\r\n return (\r\n \r\n \r\n \r\n Quantity \r\n Item \r\n \r\n \r\n \r\n { this.state.selectedBoardDescription.map((boardDescription, index) => {\r\n return (\r\n \r\n { boardDescription.Quantity } \r\n { boardDescription.Description } \r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n }\r\n\r\n showBoardDetails = boardDescription => {\r\n this.setState({ selectedBoardDescription: boardDescription, showBoardDetails: true })\r\n }\r\n\r\n hideBoardDetails = () => {\r\n this.setState({ showBoardDetails: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n this.state.isLoading &&\r\n
\r\n \r\n
\r\n \r\n \r\n Loading \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isDuplicatingBoard &&\r\n
\r\n \r\n
\r\n \r\n \r\n Duplicating Board \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasDuplicatedBoard &&\r\n
\r\n \r\n
\r\n \r\n \r\n Board copied successfully \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isRequestingBoardDeletion &&\r\n
\r\n \r\n
\r\n \r\n \r\n Deleting Board \r\n
\r\n
\r\n }\r\n\r\n
\r\n \r\n
\r\n { this.state.project.Title } \r\n
\r\n
\r\n
\r\n
\r\n { this.state.project.Title }\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n { this.state.project.IsToBeApproved && 'Available' }\r\n { !this.state.project.IsFinalised && 'In Progress' }\r\n { this.state.project.IsFinalised && 'Order Completed' }\r\n \r\n \r\n\r\n { !this.state.isLoading && \r\n
\r\n this.viewQuote() }>\r\n \r\n \r\n \r\n View quote\r\n \r\n \r\n this.startConfiguringBoard() }>\r\n \r\n \r\n \r\n New Board\r\n \r\n \r\n
\r\n }\r\n
\r\n\r\n
\r\n {\r\n this.state.project.ProjectBoards !== undefined &&\r\n
\r\n {\r\n this.state.pageError !== '' &&\r\n
\r\n \r\n \r\n \r\n { this.state.pageError }\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.project.ProjectBoards.length > 4 &&\r\n
\r\n \r\n \r\n \r\n Maximum boards per project is 8. The first four boards will be dispatched in five business days as per standard. au.estimating@se.com \r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.project.ProjectBoards.length === 0 &&\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n You don’t have any board yet in your project.\r\n
\r\n
\r\n Add your first board above\r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.project.ProjectBoards.length > 0 &&\r\n
\r\n }\r\n \r\n
\r\n }\r\n
\r\n\r\n {\r\n this.state.project.ItemID !== undefined &&\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Project Created\r\n \r\n
\r\n\r\n
0 ? ' is-done' : '') }>\r\n \r\n \r\n \r\n Board Added\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n All Boards Configured (Min { this.state.fillQuoteRequirement }%) \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Quote Generated\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Order to Complete\r\n \r\n
\r\n\r\n
\r\n
\r\n }\r\n\r\n { this.state.isChangingProjectTitle &&\r\n
\r\n\r\n \r\n\r\n \r\n }\r\n\r\n { this.state.isDeletingBoard &&\r\n \r\n\r\n \r\n\r\n \r\n }\r\n\r\n {/* Board details */}\r\n {\r\n this.state.showBoardDetails &&\r\n \r\n { this.renderProjectBoardModals() }\r\n \r\n }\r\n\r\n {\r\n this.state.isConfiguringBoard && \r\n au.estimating@se.com `,\r\n outOfStock: true\r\n })\r\n return false\r\n } else if (availabilityItem?.IsLowStock) {\r\n this.setState({\r\n validationMessage: `Low stock, longer lead times may apply`,\r\n outOfStock: false\r\n })\r\n return true\r\n } else {\r\n this.setState({\r\n validationMessage: '',\r\n outOfStock: false\r\n })\r\n return true\r\n }\r\n }\r\n\r\n // Handle switching of the steps in the UI, this is a very specific manual division\r\n canGoNextStep = () => {\r\n let canGoNextStep = false\r\n\r\n if (this.state.currentStep === 1) {\r\n if (!validateProjectOrBoardName(this.state.boardDetails.Name)) {\r\n this.setState({ validationMessage: 'Invalid board name. Only letters, numbers, \"-\", and spaces are allowed.' })\r\n } else if ((this.state.boardDetails.EnclosureType === 'Surface Mount' && this.state.boardDetails.PolesNeeded !== '') ||\r\n (this.state.boardDetails.EnclosureType === 'Flush Mount' && this.state.boardDetails.PolesNeeded !== '' && this.state.boardDetails.MetalBlackPlate !== null)\r\n ) {\r\n let isFormValid = true\r\n let enclousureReference = null\r\n this.props.boardOptionData.Enclosures.forEach(boardOption => {\r\n if (boardOption.EnclosureType === this.state.boardDetails.EnclosureType && boardOption.PolesNeeded === this.state.boardDetails.PolesNeeded) {\r\n console.log('enclousureReference boardOption', boardOption)\r\n enclousureReference = boardOption.Reference\r\n }\r\n })\r\n let availabilityEnclousureReference = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === enclousureReference)\r\n isFormValid = this.checkIfInStock(availabilityEnclousureReference)\r\n\r\n let metalBlackPlateID = null\r\n if (this.state.boardDetails.MetalBlackPlate === true) {\r\n this.props.boardOptionData.Enclosures.forEach(boardOption => {\r\n const currentSelectionRows = getNumberOfRowsFromPolesString(this.state.boardDetails.PolesNeeded)\r\n if (boardOption.EnclosureType === 'Flush Mount Enclosure - Metal back plate' && boardOption.NumberOfRows === currentSelectionRows) {\r\n console.log('Black metal boardOption', boardOption)\r\n metalBlackPlateID = boardOption.Reference\r\n }\r\n })\r\n if (metalBlackPlateID === null) {\r\n window.alert('Could not find reference number for the selected metal black plate, please assure all options were selected.')\r\n return\r\n }\r\n }\r\n\r\n if (metalBlackPlateID) {\r\n let availabilityMetalBlackPlate = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === metalBlackPlateID)\r\n isFormValid = this.checkIfInStock(availabilityMetalBlackPlate)\r\n }\r\n\r\n canGoNextStep = isFormValid\r\n }\r\n } else if (this.state.currentStep === 2) {\r\n if (this.state.boardDetails.MainSwitchRating !== '') {\r\n\r\n // Get main Switch reference\r\n let mainSwitchReference = null\r\n for (let index = 0; index < this.props.boardOptionData.MainSwitches.length; index++) {\r\n const boardOption = this.props.boardOptionData.MainSwitches[index];\r\n if (boardOption.CurrentRating === this.state.boardDetails.MainSwitchRating &&\r\n boardOption.IncomerPhase === this.state.boardDetails.IncomerPhase &&\r\n boardOption.SwitchType === this.state.boardDetails.MainSwitchType) {\r\n if (!!this.state.boardDetails.CircuitBreaker) {\r\n if (boardOption.Rating === this.state.boardDetails.CircuitBreaker) {\r\n mainSwitchReference = boardOption.Reference\r\n break\r\n }\r\n } else {\r\n mainSwitchReference = boardOption.Reference\r\n break\r\n }\r\n }\r\n }\r\n let availability = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === mainSwitchReference)\r\n let isFormValid = this.checkIfInStock(availability)\r\n\r\n canGoNextStep = isFormValid\r\n }\r\n } else if (this.state.currentStep === 3) {\r\n if (this.state.boardDetails.SurgeProtection === false ||\r\n (this.state.boardDetails.SurgeProtection === true && this.state.boardDetails.MaxDischargeCapacity !== '') ||\r\n (this.state.boardDetails.SurgeProtection === true && this.state.boardDetails.IncomerPhase === '2 Phase')) {\r\n\r\n const SPDDetails = this.getSPDDetails(this.state.boardDetails.MaxDischargeCapacity, this.state.boardDetails.IncomerPhase)\r\n let isFormValid = true\r\n if (SPDDetails?.Reference) {\r\n let availability = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === SPDDetails?.Reference)\r\n if (availability) {\r\n isFormValid = this.checkIfInStock(availability)\r\n }\r\n }\r\n\r\n canGoNextStep = isFormValid\r\n }\r\n }\r\n\r\n return canGoNextStep\r\n }\r\n\r\n renderModalHeader = () => {\r\n let progress = this.state.currentStep * 33.33\r\n if (this.state.isExistingBoard) {\r\n progress = 100\r\n }\r\n\r\n const isNotAllowedToGoStep2 = (this.state.currentStep === 1 && !this.state.isExistingBoard && !this.state.canGoNextStep)\r\n const isNotAllowedToGoStep3 = (this.state.currentStep === 2 && !this.state.canGoNextStep) || (this.state.currentStep < 2 && !this.state.isExistingBoard)\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.isExistingBoard && Edit board }\r\n {!this.state.isExistingBoard && Add a board }\r\n \r\n
\r\n
{ this.goStep(1) }}>\r\n 1 \r\n Set-Up \r\n
\r\n
2 || this.state.isExistingBoard ? ' is-done' : '') +\r\n (isNotAllowedToGoStep2 ? ' not-allowed' : '')\r\n } onClick={() => { if (!isNotAllowedToGoStep2) this.goStep(2) }}>\r\n 2 \r\n Main Incomer \r\n
\r\n
3 || this.state.isExistingBoard ? ' is-done' : '') +\r\n (isNotAllowedToGoStep3 ? ' not-allowed' : '')\r\n } onClick={() => { if (!isNotAllowedToGoStep3) this.goStep(3) }}>\r\n 3 \r\n Extras \r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.state.currentStep > 1 &&\r\n { this.goStepBack() }}>\r\n \r\n Previous\r\n \r\n \r\n }\r\n\r\n {\r\n (!this.state.isExistingBoard && this.state.currentStep === 1) &&\r\n { this.goNextStep() }}>\r\n \r\n Confirm Selection\r\n \r\n \r\n }\r\n\r\n {\r\n !this.state.isExistingBoard && this.state.currentStep !== 3 && this.state.currentStep !== 1 &&\r\n { this.goNextStep() }}>\r\n \r\n Next\r\n \r\n \r\n }\r\n\r\n {\r\n this.state.isExistingBoard && this.state.currentStep !== 3 &&\r\n { this.goNextStep() }}>\r\n \r\n Next\r\n \r\n \r\n }\r\n\r\n {\r\n this.state.isExistingBoard && this.state.currentStep < 3 &&\r\n { this.saveBoard() }}>\r\n \r\n Save & Close\r\n \r\n \r\n }\r\n\r\n {/* This is only showing on last step */}\r\n {\r\n this.state.currentStep === 3 &&\r\n { this.saveBoard() }}>\r\n \r\n {this.state.isExistingBoard && Update board }\r\n {!this.state.isExistingBoard && Add board }\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n\r\n goStepBack = () => {\r\n this.setState({\r\n currentStep: this.state.currentStep - 1,\r\n hasUsedBackButton: true\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n }\r\n\r\n goNextStep = () => {\r\n this.setState({\r\n currentStep: this.state.currentStep + 1,\r\n validationMessage: ''\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n\r\n if (!this.state.currentStepStatus[this.state.currentStep]) {\r\n analyticsDataLayer.addBoard({\r\n \"item_board_name\": '',\r\n \"item_board_id\": '',\r\n \"configuration_name\": '',\r\n \"configuration_id\": '', \r\n \"project_name\": this.props.projectName,\r\n \"project_id\": this.props.projectID.toString(),\r\n \"project_type\": 'Residential',\r\n \"funnel_step\": this.state.currentStep,\r\n \"funnel_total_steps\": '3'\r\n })\r\n }\r\n\r\n this.setState({\r\n currentStepStatus: {\r\n ...this.state.currentStepStatus,\r\n [this.state.currentStep]: true\r\n }\r\n })\r\n }\r\n\r\n goStep = (stepNumber) => {\r\n if (this.state.isExistingBoard || (!this.state.isExistingBoard && stepNumber !== 3)) {\r\n this.setState({\r\n currentStep: stepNumber\r\n }, () => this.setState({ canGoNextStep: this.canGoNextStep() }))\r\n }\r\n }\r\n\r\n closeModal = () => {\r\n jQuery('body').removeClass('modal-is-open')\r\n\r\n if (this.props.closeCallback !== undefined) {\r\n this.props.closeCallback(this.state.board)\r\n }\r\n }\r\n\r\n getCircuitBreakerEnabledOptions = () => {\r\n if (this.state.boardDetails.IncomerPhase === 'Single Phase') {\r\n return ['4.5kA', '6kA']\r\n } else {\r\n return ['6kA']\r\n }\r\n }\r\n\r\n getMetalBlackPlateEnabledOptions = () => {\r\n const polesSelected = getNumberOfPolesFromStringExpression(this.state.boardDetails.PolesNeeded)\r\n if (polesSelected === 15) {\r\n return [true, false]\r\n } else {\r\n return [false]\r\n }\r\n }\r\n\r\n getMainSwitchRatingEnabledOptions = () => {\r\n if (this.state.boardDetails.MainSwitchType === 'Circuit breaker') {\r\n return ['40A', '50A', '63A']\r\n } else if (this.state.boardDetails.MainSwitchType === 'Switch Isolator') {\r\n if (this.state.boardDetails.IncomerPhase === 'Single Phase') {\r\n return ['80A', '100A']\r\n } else {\r\n return ['100A']\r\n }\r\n }\r\n }\r\n\r\n getSurgeProtectionEnabledOptions = () => {\r\n if (this.state.boardDetails.IncomerPhase === '2 Phase') {\r\n // You can't select a surge protection for 2 Phases\r\n return [false]\r\n } else {\r\n return [true, false]\r\n }\r\n }\r\n\r\n getMaxDischargeCapacityEnabledOptions = () => {\r\n if (this.state.boardDetails.IncomerPhase === 'Single Phase') {\r\n return ['20kA', '40kA']\r\n } else if (this.state.boardDetails.IncomerPhase === '3 Phase') {\r\n return ['40kA']\r\n } else {\r\n return []\r\n }\r\n }\r\n\r\n render() {\r\n const boardOptions = this.props.boardOptions\r\n const boardDetails = this.state.boardDetails\r\n const polesNeededEnabled = boardDetails.EnclosureType !== ''\r\n const polesNeededSelected = boardDetails.PolesNeeded !== ''\r\n\r\n return (\r\n \r\n {\r\n this.state.isLoading &&\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n this.state.isExistingBoard ?\r\n Updating \r\n :\r\n \r\n {this.state.currentStep === 5 ? 'Adding board' : 'Saving'}\r\n \r\n }\r\n
\r\n
\r\n }\r\n\r\n
\r\n {this.renderModalHeader()}\r\n\r\n
\r\n {/* Step 1 */}\r\n
\r\n {/* END Step 1 */}\r\n\r\n {/* Step 2 */}\r\n
\r\n {/* END Step 2 */}\r\n\r\n {/* Step 3 */}\r\n
\r\n {/* END Step 3 */}\r\n
\r\n\r\n {this.renderModalFooter()}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {title}\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Qty \r\n Item \r\n \r\n {boardDescription.map((boardDescription, index) => {\r\n return (\r\n \r\n {boardDescription.Quantity} \r\n {boardDescription.Description} \r\n \r\n )\r\n })}\r\n \r\n
\r\n
\r\n {/* Add .is-error to put it in an error state */}\r\n
\r\n
\r\n {!this.props.isValid && '[DATA CORRUPTED] - '} {this.props.name}\r\n \r\n
\r\n {this.renderPercent('Quantity', this.props.isValid ? this.props.precentComplete : null, 1)}\r\n
\r\n\r\n
\r\n {\r\n !this.props.isFinalised &&\r\n
this.decreaseQuantity()}>\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.props.isFinalised &&\r\n
this.increaseQuantity()} >\r\n \r\n \r\n \r\n }\r\n
\r\n\r\n
\r\n {!this.props.isFinalised &&\r\n \r\n {\r\n !this.props.maxBoardLimitReached &&\r\n \r\n \r\n \r\n Copy Board \r\n \r\n }\r\n \r\n \r\n \r\n Delete \r\n \r\n \r\n }\r\n
\r\n
\r\n {!this.props.isFinalised &&\r\n \r\n \r\n \r\n \r\n \r\n Edit Board\r\n \r\n \r\n { this.configureBoard(this.props.projectId, this.props.id) }}>\r\n \r\n Configure Board\r\n \r\n \r\n \r\n }\r\n\r\n {this.props.isFinalised &&\r\n \r\n \r\n \r\n \r\n \r\n View Details\r\n \r\n \r\n\r\n {\r\n this.props.drawingGuid ?\r\n this.downloadDrawing(this.props.drawingGuid) } className={\"button button--2 \" + (this.state.isLoading ? 'disabled' : '')} disabled={this.state.isLoading}>\r\n \r\n \r\n {\r\n analyticsDataLayer.downloadLayout({\r\n \"document_id\": this.props.drawingGuid,\r\n \"document_name\": \"Download Drawings\",\r\n \"document_type\": \"pdf\"\r\n })\r\n }}>\r\n View Drawings\r\n \r\n \r\n :\r\n \r\n \r\n \r\n \r\n {\r\n this.props.loadingDrawings ? 'Loading' : 'No board drawing available'\r\n }\r\n \r\n \r\n }\r\n \r\n }\r\n
\r\n
\r\n\r\n
\r\n { this.props.boards.map(item => {\r\n let drawingG = null;\r\n if (this.props.isFinalised && !this.props.loadingDrawings) {\r\n const drawingObj = this.props.boardDrawings.find(drawItem => drawItem.ProjectBoardID === item.ItemID);\r\n if (drawingObj) {\r\n drawingG = drawingObj.ItemGUID;\r\n }\r\n }\r\n // Create the list of breaker details\r\n let boardDescription = [];\r\n if (!item.hasOwnProperty('BoardBOMComponents') || !item.BoardBOMComponents.length) {\r\n item.ProjectBoardBreakerCollection.forEach(item => {\r\n const desc = item.BreakerTypeReadOnly.DrawingDesc;\r\n const inArray = boardDescription.find(item => item.Description === desc);\r\n if (inArray) {\r\n boardDescription = boardDescription.map(item => {\r\n if (item.Description === desc) {\r\n item.Quantity = item.Quantity + 1;\r\n }\r\n return item;\r\n });\r\n } else {\r\n boardDescription.push({\r\n Quantity: 1,\r\n Description: desc,\r\n StockAvailability: 'N/A'\r\n });\r\n }\r\n });\r\n } else {\r\n boardDescription = [...item.BoardBOMComponents];\r\n }\r\n\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n","import React from 'react'\r\nimport { Link, withRouter } from 'react-router-dom'\r\nimport Header from '../../../components/header/Header'\r\nimport { getUrlParameter, isNullOrUndefined } from '../../../utils/helpers'\r\nimport GlobalOverlay from '../../../components/global-overlay/GlobalOverlay'\r\nimport commonFunctionsService from '../../../services/CommonFunctionsService'\r\nimport Modal from '../../../components/modal/Modal'\r\nimport BoardDetailsResidential from './BoardDetails'\r\nimport cloneDeep from 'lodash.clonedeep'\r\nimport BoardList from './BoardList'\r\nimport { apiCallsCommercial } from '../../../utils/apiCallsCommercial'\r\nimport { apiCallsResidential } from '../../../utils/apiCallsResidential'\r\nimport BoardService from '../../../services/BoardService'\r\nimport analyticsDataLayer from '../../../services/AnalyticsDataLayer'\r\n\r\nconst { CONST } = require('./../../../CONST')\r\n\r\nclass ProjectDetailsResidential extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.deleteBreakerFromBoard = this.deleteBreakerFromBoard.bind(this)\r\n\r\n this.state = {\r\n projectID: '',\r\n project: {},\r\n userData: {},\r\n loadingDrawings: false,\r\n orderSummaryId: null,\r\n currentBoard: null,\r\n boardDrawings: [],\r\n boardOptionData: null,\r\n breakerOptionData: [],\r\n boardOptions: {},\r\n apiErrorMessage: '',\r\n isLoading: true,\r\n apiError: false,\r\n apiMessage: 'Loading page',\r\n isChangingProjectTitle: false,\r\n hasSubmittedNewProjectTitle: false,\r\n newProjectTitle: '',\r\n isRequestingNewProjectTitleChange: false,\r\n changingTitleApiErrorMessage: false,\r\n isConfiguringBoard: false,\r\n isDuplicatingBoard: false,\r\n hasDuplicatedBoard: false,\r\n isDeletingBoard: false,\r\n toDeleteBoardId: null,\r\n pageError: '',\r\n wholesalerBranchID: 0,\r\n showBoardDetails: false,\r\n selectedBoardDescription: [],\r\n isCommercial: false,\r\n isUpdatingBoardQuantity: false,\r\n residentialAllPartsAvailable: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ projectID: getUrlParameter('orderID') }, () => {\r\n this.initialize()\r\n })\r\n }\r\n\r\n initialize() {\r\n apiCallsResidential.apiGetProject(this.state.projectID)\r\n .then(projectData => {\r\n this.setState({\r\n project: projectData,\r\n newProjectTitle: projectData.Title\r\n })\r\n\r\n // On a finalised project we need to get drawing links and order summary info\r\n if (projectData.IsFinalised) {\r\n this.setState({ loadingDrawings: true })\r\n\r\n apiCallsResidential.apiGetLayoutDiagrams(this.state.projectID)\r\n .then(response => {\r\n // Split the response into distinct results\r\n const orderSummaryArray = response.ProjectFileCollection.filter(x => x.ProjectBoardID === -1)\r\n const drawingsArray = response.ProjectFileCollection.filter(x => x.ProjectBoardID !== -1)\r\n\r\n if (orderSummaryArray.length > 0) {\r\n this.setState({ orderSummaryId: orderSummaryArray[0].ItemGUID })\r\n }\r\n\r\n this.setState({\r\n boardDrawings: drawingsArray,\r\n loadingDrawings: false\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({\r\n apiErrorMessage: error.message,\r\n loadingDrawings: false\r\n })\r\n })\r\n }\r\n\r\n return apiCallsResidential.apiGetBreakerOptions()\r\n })\r\n .then(breakerTypeData => {\r\n this.setState({ breakerOptionData: breakerTypeData })\r\n\r\n // Load the board options after the project has been loaded\r\n return apiCallsResidential.apiGetBoardOption()\r\n })\r\n .then(boardOptionData => {\r\n this.setState({ boardOptionData: boardOptionData }, () => this.updateProjectBoardCompletions())\r\n\r\n return apiCallsResidential.apiGetBoardOptionLabels()\r\n })\r\n .then(boardOptionLabels => {\r\n this.setState({ boardOptions: boardOptionLabels })\r\n\r\n // If the user opens a project and there are no boards, then open the modal\r\n if (this.state.project.ProjectBoards.length === 0) {\r\n // Add some visual deleay to improve UX, without it it's just too fast and confusing\r\n window.setTimeout(() => {\r\n this.startConfiguringBoard()\r\n }, 500)\r\n }\r\n\r\n return apiCallsCommercial.apiUserSettings()\r\n })\r\n .then(userData => {\r\n\r\n this.setState({\r\n userData: userData,\r\n wholesalerBranchID: userData.PreferredWholesaler1ItemID\r\n }, () => {\r\n let shouldTriggerNewBoardCreation = getUrlParameter('newBoard')\r\n if (shouldTriggerNewBoardCreation !== '') {\r\n this.startConfiguringBoard()\r\n }\r\n })\r\n return apiCallsResidential.apiGetAllParts()\r\n })\r\n .then(allParts => {\r\n this.setState({\r\n residentialAllPartsAvailable: allParts,\r\n isLoading: false\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({ apiErrorMessage: error.message })\r\n })\r\n }\r\n\r\n updateProjectBoardCompletions() {\r\n const updatedProjectBoards = this.state.project.ProjectBoards.map(board => {\r\n const boardDetails = BoardService.getDetails(this.state.boardOptionData, board.EnclosureID, board.MainSwitchID, board.SPDID, board.MetalBlackPlateID)\r\n const boardCompletionDetails = BoardService.getBoardCompletionDetails(board, boardDetails)\r\n\r\n board.completionDetails = boardCompletionDetails\r\n\r\n return board\r\n })\r\n\r\n const updatedProject = cloneDeep(this.state.project)\r\n updatedProject.ProjectBoards = updatedProjectBoards\r\n\r\n this.setState({ project: updatedProject })\r\n }\r\n\r\n startConfiguringBoard = (boardID) => {\r\n if (boardID === undefined) {\r\n if (this.hasMaxBoardLimitBeenReached()) {\r\n this.setState({ pageError: 'You have reached the maximum number of boards per project and cannot ADD or COPY anymore.' })\r\n } else if (this.state.project.IsFinalised) {\r\n this.setState({ pageError: 'The order has alredy been sent and the project can no longer be modified.' })\r\n } else {\r\n this.setState({ isConfiguringBoard: true, currentBoard: null })\r\n }\r\n\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n } else {\r\n const boardToEdit = this.state.project.ProjectBoards.find(board => board.ItemID === boardID)\r\n this.setState({ isConfiguringBoard: true, currentBoard: boardToEdit })\r\n }\r\n }\r\n\r\n stopConfiguringBoard = (board) => {\r\n this.setState({ isConfiguringBoard: false, currentBoard: null })\r\n\r\n if (!isNullOrUndefined(board)) {\r\n // Modal sucessfually create or updated a board, add it to the project states or update existing one\r\n const indexOfExistingBoard = this.state.project.ProjectBoards.findIndex(projectBoard => projectBoard.ItemGUID === board.ItemGUID)\r\n\r\n if (indexOfExistingBoard > -1) {\r\n this.state.project.ProjectBoards[indexOfExistingBoard] = board\r\n } else {\r\n this.state.project.ProjectBoards.push(board)\r\n }\r\n\r\n this.updateProjectBoardCompletions()\r\n this.forceUpdate()\r\n }\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n copyBoard = (boardId) => {\r\n this.setState({ isDuplicatingBoard: true })\r\n\r\n apiCallsResidential.apiCopyBoard(this.state.project.ItemID, boardId)\r\n .then(projectData => {\r\n this.setState({\r\n project: projectData\r\n })\r\n\r\n this.setState({ isDuplicatingBoard: false, hasDuplicatedBoard: true })\r\n window.setTimeout(() => { this.setState({ hasDuplicatedBoard: false }) }, 1500)\r\n })\r\n .catch(error => {\r\n this.setState({ isDuplicatingBoard: false })\r\n alert(`There was an error copying the board: ${error.message}`)\r\n })\r\n }\r\n\r\n updateBoardQuantity = (boardId, newQuantity, isApiCall) => {\r\n const updatedBoard = this.state.project.ProjectBoards.find(board => board.ItemID === boardId)\r\n updatedBoard.Quantity = newQuantity\r\n\r\n const updatedProject = cloneDeep(this.state.project)\r\n\r\n const indexOfTheCurrentProjectBoard = updatedProject.ProjectBoards.findIndex(board => {\r\n return board.ItemID === updatedBoard.ItemID\r\n })\r\n\r\n updatedProject.ProjectBoards[indexOfTheCurrentProjectBoard] = updatedBoard\r\n\r\n if (isApiCall) {\r\n this.setState({ isUpdatingBoardQuantity: true })\r\n\r\n apiCallsResidential.apiSaveBoard(updatedBoard).then(() => {\r\n this.setState({ project: updatedProject })\r\n this.setState({ isUpdatingBoardQuantity: false })\r\n })\r\n } else {\r\n this.setState({ project: updatedProject })\r\n }\r\n }\r\n\r\n toDeleteBoard = (boardId) => {\r\n this.setState({ isDeletingBoard: true, toDeleteBoardId: boardId })\r\n }\r\n\r\n deleteBoardRequest() {\r\n this.setState({ isRequestingBoardDeletion: true })\r\n\r\n this.stopDeletingBoard()\r\n\r\n apiCallsResidential.apiDeleteBoard(this.state.projectID, this.state.toDeleteBoardId)\r\n .then(updatedProject => {\r\n this.setState({\r\n project: updatedProject,\r\n toDeleteBoardId: null,\r\n isRequestingBoardDeletion: false\r\n }, () => this.updateProjectBoardCompletions())\r\n })\r\n .catch(error => alert(error.message))\r\n }\r\n\r\n startChangingProjectTitle = () => {\r\n this.setState({ isChangingProjectTitle: true })\r\n }\r\n\r\n stopChangingProjectTitle = () => {\r\n this.setState({ isChangingProjectTitle: false })\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n stopDeletingBoard = () => {\r\n this.setState({ isDeletingBoard: false })\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n changeProjectTitle = () => {\r\n this.setState({ hasSubmittedNewProject: true })\r\n\r\n if (this.state.newProjectTitle !== '') {\r\n this.setState({\r\n changingTitleApiErrorMessage: '',\r\n isRequestingNewProjectTitleChange: true\r\n })\r\n\r\n let projectData = cloneDeep(this.state.project)\r\n projectData.Title = this.state.newProjectTitle\r\n\r\n apiCallsResidential.apiSetProjectTitle(projectData)\r\n .then(response => {\r\n // At this point we can read ItemGUID from the response and redirect user to that page\r\n this.setState({\r\n hasSubmittedNewProjectTitle: true,\r\n isRequestingNewProjectTitleChange: false,\r\n project: response\r\n }, () => {\r\n this.stopChangingProjectTitle()\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({\r\n changingTitleApiErrorMessage: error,\r\n isRequestingNewProjectTitleChange: false\r\n })\r\n })\r\n\r\n }\r\n }\r\n\r\n deleteBreakerFromBoard(rowIndex, poleIndex, boardBreakerId, boardID) {\r\n const indexOfTheCurrentProjectBoard = this.state.project.ProjectBoards.findIndex(board => board.ItemID === boardID)\r\n const selectedBoard = this.state.project.ProjectBoards[indexOfTheCurrentProjectBoard]\r\n const selectedBoardBreaker = selectedBoard.ProjectBoardBreakerCollection.find(boardBreaker => boardBreaker.ItemID === boardBreakerId)\r\n\r\n apiCallsResidential.apiSaveBreakerToChassis(this.state.projectID, boardID, boardBreakerId, selectedBoardBreaker.BreakerTypeItemID, rowIndex, poleIndex, true)\r\n .then(() => {\r\n const updatedBreakers = selectedBoard.ProjectBoardBreakerCollection.filter(item => item.ItemID !== boardBreakerId)\r\n const updatedProject = cloneDeep(this.state.project)\r\n const updatedBoard = cloneDeep(selectedBoard)\r\n updatedBoard.ProjectBoardBreakerCollection = updatedBreakers\r\n\r\n updatedProject.ProjectBoards[indexOfTheCurrentProjectBoard] = updatedBoard\r\n\r\n this.setState({ project: updatedProject })\r\n })\r\n }\r\n\r\n handelChange = (name, value) => {\r\n this.setState({ ['' + name]: value })\r\n }\r\n\r\n hasMaxBoardLimitBeenReached() {\r\n // Function to check if the user has reached max board limit or not\r\n // App should not let user copy or add boards if they are at the limit.\r\n // Hardcode the max board limit if its not returned from the API\r\n const boardLimit = this.state.project.MaxBoardLimit ? this.state.project.MaxBoardLimit : 8\r\n return (this.state.project.ProjectBoards.length >= boardLimit)\r\n }\r\n\r\n configureChassis = (projectID, boardID) => {\r\n this.props.history.push(CONST.PAGES.CONFIGURE_CHASSIS_RESIDENTIAL + '?projectID=' + projectID + '&boardID=' + boardID)\r\n }\r\n\r\n areEnoughBoardsToGenerateQuote = () => {\r\n let totalUserBoardsQuantity = 0\r\n this.state.project.ProjectBoards.map(board => {\r\n totalUserBoardsQuantity = totalUserBoardsQuantity + board.Quantity\r\n })\r\n\r\n return totalUserBoardsQuantity >= CONST.MINIMUM_RESIDENTIAL_BOARD_QUANTITY ? true : false\r\n }\r\n\r\n isEnoughFilledToGenerateQuote() {\r\n // Let's work with assumption all boards are all enough filled and invalidate this indicator as soon as any board is not enough filled\r\n let areAllProjectBoardsEnoughFilled = true\r\n\r\n if (this.state.boardOptionData !== null) {\r\n this.state.project.ProjectBoards.map(board => {\r\n const boardDetails = BoardService.getDetails(this.state.boardOptionData, board.EnclosureID, board.MainSwitchID, board.SPDID, board.MetalBlackPlateID)\r\n const boardCompletionDetails = BoardService.getBoardCompletionDetails(board, boardDetails)\r\n\r\n if (!boardCompletionDetails.isEnoughCompletedToSeeTheQuote) areAllProjectBoardsEnoughFilled = false\r\n })\r\n } else {\r\n areAllProjectBoardsEnoughFilled = false\r\n }\r\n\r\n return areAllProjectBoardsEnoughFilled\r\n }\r\n\r\n viewQuote() {\r\n if (this.state.isUpdatingBoardQuantity) return false\r\n // If you don't have any boards...\r\n if (!this.state.project.ProjectBoards || !this.state.project.ProjectBoards.length) {\r\n this.setState({\r\n pageError: 'Your project needs at least one board filled with 4 breakers to generate a quote.',\r\n fillQuoteRequirementError: true\r\n })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n\r\n return false\r\n }\r\n\r\n let areEnoughBoardsToGenerateQuote = this.areEnoughBoardsToGenerateQuote()\r\n if (!areEnoughBoardsToGenerateQuote) {\r\n this.setState({\r\n pageError: 'Board quantity is not enough to generate a quote.',\r\n fillQuoteRequirementError: true\r\n })\r\n return false\r\n }\r\n\r\n // You've got boards but not all of them are filled out to minimum levels...\r\n let noEnoughFilled = !this.isEnoughFilledToGenerateQuote()\r\n if (noEnoughFilled) {\r\n this.setState({\r\n pageError: 'Your project needs all boards filled with at least 4 breakers to generate a quote.',\r\n fillQuoteRequirementError: true\r\n })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n\r\n return false\r\n }\r\n\r\n // If you're a contractor you need a selected wholesaler\r\n if (this.state.userData.UserIsContractor && (this.state.wholesalerBranchID === 0 || this.state.wholesalerBranchID === -1)) {\r\n this.setState({ pageError: 'Current user doesn\\'t have a preferred wholesalers configured.' })\r\n window.setTimeout(() => this.setState({ pageError: '' }), 5000)\r\n return false\r\n }\r\n\r\n // Finally made it through all the hoops, go to the Quote page.\r\n let pageLink = ''\r\n if (this.state.userData.UserIsContractor) {\r\n pageLink += CONST.PAGES.QUOTE_RESIDENTIAL + '?projectID=' + this.state.projectID + '&wholesalerBranchID=' + this.state.wholesalerBranchID\r\n this.props.history.push(pageLink)\r\n } else {\r\n pageLink += CONST.PAGES.QUOTE_RESIDENTIAL + '?projectID=' + this.state.projectID\r\n this.props.history.push(pageLink)\r\n }\r\n\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: 'View Quote',\r\n cta_link: window.location.hostname + pageLink,\r\n cta_location: 'Project details'\r\n })\r\n }\r\n\r\n renderProjectBoardModals = () => {\r\n return (\r\n \r\n \r\n \r\n Quantity \r\n Item \r\n \r\n \r\n \r\n {this.state.selectedBoardDescription.map((boardDescription, index) => {\r\n return (\r\n \r\n {boardDescription.Quantity} \r\n {boardDescription.Description} \r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n }\r\n\r\n showBoardDetails = boardDescription => {\r\n this.setState({ selectedBoardDescription: boardDescription, showBoardDetails: true })\r\n }\r\n\r\n hideBoardDetails = () => {\r\n this.setState({ showBoardDetails: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {\r\n this.state.isLoading &&\r\n
\r\n \r\n
\r\n \r\n \r\n Loading \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isDuplicatingBoard &&\r\n
\r\n \r\n
\r\n \r\n \r\n Duplicating Board \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasDuplicatedBoard &&\r\n
\r\n \r\n
\r\n \r\n \r\n Board copied successfully \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isRequestingBoardDeletion &&\r\n
\r\n \r\n
\r\n \r\n \r\n Deleting Board \r\n
\r\n
\r\n }\r\n\r\n
\r\n \r\n
\r\n {this.state.project.Title} \r\n
\r\n
\r\n
\r\n
\r\n {this.state.project.Title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {this.state.project.IsToBeApproved && 'Available'}\r\n {!this.state.project.IsFinalised && 'In Progress'}\r\n {this.state.project.IsFinalised && 'Order Completed'}\r\n \r\n \r\n\r\n {!this.state.isLoading && !this.state.project.IsFinalised &&\r\n
\r\n this.viewQuote()}>\r\n \r\n \r\n \r\n View quote\r\n \r\n \r\n this.startConfiguringBoard()}>\r\n \r\n \r\n \r\n New Board\r\n \r\n \r\n
\r\n }\r\n
\r\n\r\n
\r\n {\r\n this.state.project.ProjectBoards !== undefined &&\r\n
\r\n {\r\n this.state.pageError !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.pageError}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.project.ProjectBoards.length === 0 &&\r\n
\r\n
\r\n \r\n
\r\n You don’t have any board yet in your project.\r\n
\r\n
\r\n Add your first board above\r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.project.ProjectBoards.length > 0 &&\r\n
\r\n }\r\n
\r\n }\r\n
\r\n\r\n {\r\n this.state.project.ItemID !== undefined &&\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Project Created\r\n \r\n
\r\n\r\n
0 ? ' is-done' : '')}>\r\n \r\n \r\n \r\n Board Added\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Board Quantity (Min {'30'} boards) \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n All Boards Configured (Min 4 breakers per board) \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Quote Generated\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n Order to Complete\r\n \r\n
\r\n\r\n
\r\n
\r\n }\r\n\r\n {this.state.isChangingProjectTitle &&\r\n
\r\n\r\n \r\n\r\n \r\n }\r\n\r\n {this.state.isDeletingBoard &&\r\n \r\n\r\n \r\n\r\n \r\n }\r\n\r\n {\r\n this.state.showBoardDetails &&\r\n \r\n {this.renderProjectBoardModals()}\r\n \r\n }\r\n\r\n {\r\n this.state.isConfiguringBoard &&\r\n \r\n \r\n {this.props.labelText}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Datepicker\r\n","import React, { Component } from 'react'\r\nimport { withRouter, Link } from 'react-router-dom'\r\nimport Header from '../../components/header/Header'\r\nimport { getUrlParameter } from '../../utils/helpers'\r\nimport GlobalOverlay from '../../components/global-overlay/GlobalOverlay'\r\nimport Modal from '../../components/modal/Modal'\r\nimport Datepicker from '../../components/datepicker/Datepicker'\r\nimport commonFunctionsService from '../../services/CommonFunctionsService'\r\nimport { apiCallsCommercial, apiUrlGetDocument } from '../../utils/apiCallsCommercial'\r\nimport { CONST } from '../../CONST'\r\nimport cloneDeep from 'lodash'\r\nimport jQuery from \"jquery\"\r\nimport analyticsDataLayer from '../../services/AnalyticsDataLayer'\r\n\r\n\r\nclass Quote extends Component {\r\n constructor() {\r\n super()\r\n\r\n // Bind this to element function calls for better performance / practise\r\n // - ref: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md\r\n this.saveProject = this.saveProject.bind(this)\r\n this.sendEmailCustomerQuote = this.sendEmailCustomerQuote.bind(this)\r\n this.requestWholesalersQuote = this.requestWholesalersQuote.bind(this)\r\n this.hideConfirmationModal = this.hideConfirmationModal.bind(this)\r\n this.showEmailCustomerQuote = this.showEmailCustomerQuote.bind(this)\r\n // this.handleCustomerDetailChange = this.handleCustomerDetailChange.bind(this)\r\n\r\n // Init states\r\n this.state = {\r\n apiError: '',\r\n pageInfo: '',\r\n promoCode: '',\r\n purchaseNumber: '',\r\n attachedPO: '',\r\n userData: {},\r\n showBreakdown: false,\r\n showPromoCodeInput: false,\r\n validation: {\r\n message: '',\r\n isError: false,\r\n disclaimerCheckbox: false,\r\n promoCodeInput: false,\r\n // purchaseOrderNumber: false,\r\n // noAttachedPO: false\r\n },\r\n isLoading: {\r\n app: true,\r\n promoCodeApi: false,\r\n placeOrderApi: false,\r\n drawing: false,\r\n attachingPO: false,\r\n emailQuote: false,\r\n updateDetails: false\r\n },\r\n drawings: [],\r\n showConfirmationModal: false,\r\n projectID: getUrlParameter('projectID'),\r\n contractorRequestAgain: false,\r\n preferredWholesalerID: getUrlParameter('wholesalerBranchID'),\r\n wholesalerToSendQuote: getUrlParameter('wholesalerBranchID'),\r\n selectedWholesalerIDForProduction: '',\r\n showEmailCustomerQuoteModal: false,\r\n QuoteCustomerQuoteRef: '',\r\n QuoteCompanyName: '',\r\n QuoteCustomerName: '',\r\n QuoteCustomerAddress: '',\r\n QuoteCustomerPhone: '',\r\n QuoteCustomerEmail: '',\r\n QuoteCustomerMarkupPercent: 125,\r\n orderPlacementCondition1Accepted: false,\r\n orderPlacementCondition2Accepted: false,\r\n orderPlacementCondition3Accepted: false,\r\n orderPlacementCondition4Accepted: false,\r\n orderPlacementCondition5Accepted: false\r\n }\r\n\r\n // Temp user data\r\n this.userData = {}\r\n }\r\n\r\n componentDidMount() {\r\n let isConsultant = false\r\n let preferredWholesaler = this.state.preferredWholesalerID\r\n if (preferredWholesaler === '') {\r\n preferredWholesaler = -1 // default value for API\r\n }\r\n\r\n // Load the API data after mounting so the spinner gets rendered first\r\n apiCallsCommercial.apiUserSettings()\r\n .then(userDataObj => {\r\n isConsultant = userDataObj.IsConsultant\r\n this.userData = userDataObj\r\n this.setState({\r\n userData: userDataObj,\r\n QuoteCustomerMarkupPercent: userDataObj.EndCustomerMarkupFactor !== null ? userDataObj.EndCustomerMarkupFactor * 100 : 125,\r\n })\r\n\r\n return apiCallsCommercial.apiGetProject(this.state.projectID)\r\n })\r\n .then(projectData => {\r\n // If its a consultant, we display this page with just the project data\r\n // OR Check if the project data already comes with quote info, also need to make sure the wholesaler order through has not changed\r\n const existingQuote = (projectData.QuoteCentsIncGST &&\r\n (projectData.WholesalerBranchIDOrderedThrough === 0\r\n || projectData.WholesalerBranchIDOrderedThrough === this.state.preferredWholesalerID))\r\n if (isConsultant || existingQuote) {\r\n this.setState({\r\n quote: projectData,\r\n purchaseNumber: projectData.PurchaseNumber,\r\n attachedPO: projectData.POIsValid ? 'already attached' : null,\r\n promoCode: projectData.QuotePromoCode ? projectData.QuotePromoCode : '',\r\n isLoading: { ...this.state.isLoading, app: false }\r\n })\r\n\r\n // Previousely it used to download drawings only for the consultant, but we want all users to see drawing\r\n // E.g. Contractor previously needed to place an order before downloading drawings, now he can download them even before placing an order\r\n this.getDrawingsFromServer()\r\n } else {\r\n this.setState({\r\n quote: projectData\r\n }, () => {\r\n this.generateQuote().then(() => {\r\n // Very first time we need to generate the quote at least once before we can call the drawings API\r\n this.getDrawingsFromServer()\r\n }).catch(error => {\r\n window.alert(error)\r\n this.props.history.push(CONST.PAGES.PROJECT_DETAILS + '?orderID=' + this.state.projectID)\r\n })\r\n })\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n getDrawingsFromServer() {\r\n this.setState({ isLoading: { ...this.state.isLoading, drawing: true } })\r\n\r\n apiCallsCommercial.apiGetLayoutDiagrams(this.state.projectID)\r\n .then(response => {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, drawing: false },\r\n drawings: response.ProjectFileCollection.filter(x => x.ProjectBoardID !== -1)\r\n })\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, drawing: false },\r\n apiError: error.message\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n generateQuote() {\r\n return new Promise((resolve, reject) => {\r\n // Since the quote company name is required, so we check the fields against that in the project data item\r\n // if its not already filled in, we will default the values to the values in user setting\r\n const quoteCompanyName = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCompanyName : null\r\n const quoteCustName = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerName : null\r\n const quoteAddress = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerAddress : null\r\n const quotePhone = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerPhone : null\r\n const quoteEmail = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerEmail : null\r\n const quoteRef = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerQuoteRef : null\r\n const quoteMarkup = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerMarkupPercent : 125\r\n\r\n apiCallsCommercial.apiGenerateQuote(this.state.projectID, this.state.preferredWholesalerID, quoteCompanyName, quoteCustName, quoteAddress, quotePhone, quoteEmail, quoteRef, quoteMarkup)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData,\r\n isLoading: { ...this.state.isLoading, app: false }\r\n })\r\n\r\n analyticsDataLayer.viewQuote({\r\n \"quote_id\": `${this.state.projectID}`,\r\n \"quote_name\": \"View quote\"\r\n })\r\n\r\n resolve(true)\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n\r\n reject(error.message)\r\n })\r\n })\r\n }\r\n\r\n getDisplayQuoteValues = quoteData => {\r\n const displayQuote = {\r\n unitPrice: 0,\r\n orgExGST: 0,\r\n incGST: 0,\r\n exGST: 0,\r\n GST: 0\r\n }\r\n\r\n displayQuote.orgExGST = quoteData.QuoteCentsExGST\r\n\r\n if (quoteData.QuoteDiscountedCentsExGST) {\r\n displayQuote.incGST = quoteData.QuoteDiscountedCentsIncGST\r\n displayQuote.exGST = quoteData.QuoteDiscountedCentsExGST\r\n displayQuote.GST = quoteData.QuoteDiscountCentsGST\r\n } else {\r\n displayQuote.incGST = quoteData.QuoteCentsIncGST\r\n displayQuote.exGST = quoteData.QuoteCentsExGST\r\n // TODO: This will not work if the BE doesn't return the Quantity on the boards\r\n displayQuote.unitPrice = Math.round((quoteData.QuoteCentsExGST / quoteData.Quantity) * 100) / 100\r\n displayQuote.GST = quoteData.QuoteCentsGST\r\n }\r\n\r\n return displayQuote\r\n }\r\n\r\n getCustomerDisplayQuoteValues = quoteData => {\r\n const displayQuote = {\r\n unitCost: 0,\r\n orgExGST: 0,\r\n incGST: 0,\r\n exGST: 0,\r\n GST: 0\r\n }\r\n\r\n displayQuote.orgExGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsExGST') ? quoteData.CustomerQuoteCentsExGST : quoteData.QuoteCentsExGST\r\n\r\n if (quoteData.QuoteDiscountedCentsExGST) {\r\n displayQuote.incGST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsIncGST') ? quoteData.CustomerDiscountedQuoteCentsIncGST : quoteData.QuoteDiscountedCentsIncGST\r\n displayQuote.exGST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsExGST') ? quoteData.CustomerDiscountedQuoteCentsExGST : quoteData.QuoteDiscountedCentsExGST\r\n displayQuote.GST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsGST') ? quoteData.CustomerDiscountedQuoteCentsGST : quoteData.QuoteDiscountCentsGST\r\n } else {\r\n displayQuote.incGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsIncGST') ? quoteData.CustomerQuoteCentsIncGST : quoteData.QuoteCentsIncGST\r\n displayQuote.exGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsExGST') ? quoteData.CustomerQuoteCentsExGST : quoteData.QuoteCentsExGST\r\n displayQuote.GST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsGST') ? quoteData.CustomerQuoteCentsGST : quoteData.QuoteCentsGST\r\n }\r\n\r\n return displayQuote\r\n }\r\n\r\n getNumericAttr(obj, attribute) {\r\n return obj.hasOwnProperty(attribute) ? obj[attribute] : 0\r\n }\r\n\r\n showLeadTimes(board) {\r\n this.setState({ selectedBoard: board, showBreakdown: true })\r\n let itemData = []\r\n board.BoardBOMComponents.forEach(item => {\r\n itemData.push({\r\n \"item_name\": item.Description,\r\n \"item_id\": item.ItemCode,\r\n \"item_brand\": 'FlexSelect',\r\n \"item_category\": item.Category,\r\n \"item_variant\": '',\r\n \"price\": item.Price,\r\n \"quantity\": item.Quantity\r\n })\r\n })\r\n analyticsDataLayer.viewItemList({\r\n \"currency\": 'AUD',\r\n \"project_type\": 'Commercial',\r\n \"project_name\": this.state.quote.Title,\r\n \"item_board_name\": board.Name,\r\n \"item_board_id\": board.ItemID.toString(),\r\n \"configuration_name\": board.Name,\r\n \"configuration_id\": board.ItemID.toString(), \r\n \"project_id\": this.state.quote.ItemID.toString(),\r\n \"items\": itemData\r\n })\r\n }\r\n\r\n hideLeadTimes = () => {\r\n this.setState({ showBreakdown: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n showEmailCustomerQuote() {\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: \"Email Customer Quote\",\r\n cta_link: window.location.href,\r\n cta_location: \"quote page\",\r\n })\r\n this.setState({ showEmailCustomerQuoteModal: true })\r\n }\r\n\r\n hideEmailCustomerQuote = () => {\r\n this.setState({ showEmailCustomerQuoteModal: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n renderCurrency = cents => {\r\n const dollars = cents / 100\r\n\r\n return dollars.toLocaleString('en-AU', {\r\n style: 'currency',\r\n currency: 'AUD',\r\n minimumFractionDigits: 2,\r\n maximumFractionDigits: 2\r\n })\r\n }\r\n\r\n renderProjectBoardModals = board => {\r\n let boardDescription = []\r\n if (!board.BoardBOMComponents.length) {\r\n board.ProjectBoardBreakerCollection.forEach(item => {\r\n const desc = item.BreakerTypeReadOnly.DrawingDesc\r\n const inArray = boardDescription.find(boardItem => boardItem.Description === desc)\r\n if (inArray) {\r\n boardDescription = boardDescription.map(boardItemObj => {\r\n if (boardItemObj.Description === desc) {\r\n boardItemObj.Quantity = boardItemObj.Quantity + 1\r\n }\r\n return boardItemObj\r\n })\r\n } else {\r\n boardDescription.push({\r\n Quantity: 1,\r\n Description: desc,\r\n StockAvailability: 'N/A'\r\n })\r\n }\r\n })\r\n } else {\r\n boardDescription = [...board.BoardBOMComponents]\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Quantity \r\n Items \r\n Stock \r\n \r\n \r\n \r\n {boardDescription.map((boardDescriptionObj, index) => {\r\n return (\r\n \r\n {boardDescriptionObj.Quantity} \r\n {boardDescriptionObj.Description} \r\n {boardDescriptionObj.StockAvailability ? boardDescriptionObj.StockAvailability : 'Available'} \r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n }\r\n\r\n applyPromoCode = () => {\r\n if (this.state.promoCode.length === 0) {\r\n this.setState({ validation: { ...this.state.validation, promoCodeInput: true } })\r\n } else {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, promoCodeApi: true },\r\n validation: { ...this.state.validation, promoCodeInput: false }\r\n })\r\n\r\n const applyPromoCodeRequestObj = {\r\n 'ProjectID': this.state.quote.ItemID,\r\n 'PromoCode': this.state.promoCode\r\n }\r\n\r\n apiCallsCommercial.apiApplyPromoCode(applyPromoCodeRequestObj)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData,\r\n attachedPO: quoteData.POIsValid ? '' : null,\r\n isLoading: { ...this.state.isLoading, promoCodeApi: false },\r\n promoCode: '',\r\n showPromoCodeInput: false,\r\n pageInfo: 'Promo code applied successfully! Note: Promo code has to be valid at the time of placing order.'\r\n })\r\n\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n this.setState({\r\n apiError: error.message,\r\n isLoading: { ...this.state.isLoading, promoCodeApi: false }\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n\r\n }\r\n }\r\n\r\n handlePromoCode = event => {\r\n this.setState({ promoCode: event.target.value })\r\n }\r\n\r\n handlePOUpload = e => {\r\n e.preventDefault()\r\n\r\n this.setState({ isLoading: { attachingPO: true } })\r\n\r\n // inspiration taken from http://www.hartzis.me/react-image-upload/\r\n // and https://www.html5rocks.com/en/tutorials/file/dndfiles/\r\n // should be everything the BEDs need to get the file.\r\n\r\n const reader = new FileReader()\r\n const fileInput = e.target\r\n const quoteObj = this.state.quote\r\n\r\n reader.onloadend = () => {\r\n apiCallsCommercial.apiAttachPo(quoteObj.ItemID, quoteObj.QuoteCentsIncGST, quoteObj.QuoteDiscountedCentsIncGST, reader.result)\r\n .then(response => {\r\n this.setState({\r\n attachedPO: response.POFileName === null ? 'this should be set to the return value' : response.POFileName,\r\n isLoading: { attachingPO: false },\r\n pageInfo: 'PO successfully attached to the project.'\r\n })\r\n\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n fileInput.value = ''\r\n this.setState({\r\n apiError: error.message,\r\n isLoading: { attachingPO: false }\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n reader.readAsDataURL(fileInput.files[0])\r\n }\r\n\r\n // handleCustomerDetailChange = stateObject => {\r\n // this.setState({ isLoading: {...this.state.isLoading, updateDetails: true} });\r\n // const projectId = this.getUrlParameter('projectID');\r\n // let preferredWholesaler = this.getUrlParameter('wholesalerBranchID');\r\n // if ( preferredWholesaler === '' ) {\r\n // preferredWholesaler = -1; // default value for API\r\n // }\r\n\r\n // apiCallsCommercial.apiGenerateQuote(projectId, preferredWholesaler, stateObject.QuoteCompanyName, stateObject.QuoteCustomerName,\r\n // stateObject.QuoteCustomerAddress, stateObject.QuoteCustomerPhone, stateObject.QuoteCustomerEmail, stateObject.QuoteCustomerQuoteRef, stateObject.QuoteCustomerMarkupPercent)\r\n // .then(quoteData => {\r\n // this.setValidationMsg('Customer details updated successfully.', false);\r\n // this.setState({ quote: quoteData });\r\n // })\r\n // .catch(error => {\r\n // this.setValidationMsg(error.message, true);\r\n // })\r\n // .then(() => {\r\n // this.setState({ isLoading: {...this.state.isLoading, updateDetails: false} });\r\n // // $.magnificPopup.close();\r\n // });\r\n // }\r\n\r\n // setDispatchDate = date => {\r\n // this.setState({\r\n // quote: {\r\n // ...this.state.quote,\r\n // PreferredDispatchDate: date\r\n // }\r\n // })\r\n // }\r\n\r\n validateForm = (event) => {\r\n event.preventDefault()\r\n\r\n // const noPurchaseNumber = this.state.purchaseNumber.length === 0 ? true : false\r\n // const noAttachedPO = this.state.attachedPO.length === 0 ? true : false\r\n\r\n // Tempoarary disable order requirment\r\n if (!this.state.userData.UserIsContractor && false) {\r\n // if (!this.state.userData.UserIsContractor && (noPurchaseNumber || noAttachedPO)) {\r\n this.setState({\r\n validation: {\r\n ...this.state.validation\r\n // ,\r\n // purchaseOrderNumber: noPurchaseNumber,\r\n // noAttachedPO: noAttachedPO\r\n }\r\n })\r\n } else {\r\n this.setState({\r\n showConfirmationModal: true,\r\n validation: {\r\n ...this.state.validation\r\n // ,\r\n // purchaseOrderNumber: false\r\n }\r\n })\r\n }\r\n }\r\n\r\n hideConfirmationModal() {\r\n this.setState({ showConfirmationModal: false }, () => jQuery('.app__body-content').animate({ scrollTop: 0 }, 'fast'))\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n async downloadDrawings() {\r\n let drawingsDownloaded = 0\r\n const numberOfDrawings = this.state.drawings.length\r\n const token = localStorage.getItem('token')\r\n \r\n const downloadDrawing = async (drawing) => {\r\n const downloadURL = `${apiUrlGetDocument}/${drawing.ItemGUID}`\r\n const response = await fetch(downloadURL, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`\r\n }\r\n })\r\n const blob = await response.blob()\r\n const url = window.URL.createObjectURL(blob)\r\n \r\n let contentDisposition = response.headers.get('Content-Disposition')\r\n // Remove all quotes \" from the contentDisposition, as some .NET behaviour adds them \r\n // it's because of the special characters \"(\" and \")\" in case of the project names with brackets\r\n contentDisposition = contentDisposition.replace(/\"/g, '')\r\n let filename = 'download.pdf'\r\n if (contentDisposition && contentDisposition.includes('attachment')) {\r\n const matches = /filename=([^;]+)/.exec(contentDisposition)\r\n if (matches && matches[1]) {\r\n filename = matches[1]\r\n }\r\n }\r\n \r\n const a = document.createElement('a')\r\n a.href = url\r\n a.download = filename\r\n a.click()\r\n window.URL.revokeObjectURL(url)\r\n \r\n analyticsDataLayer.downloadLayout({\r\n \"document_id\": drawing.ItemGUID,\r\n \"document_name\": \"Download Drawings\",\r\n \"document_type\": \"pdf\"\r\n })\r\n }\r\n \r\n const downloadNext = async () => {\r\n if (drawingsDownloaded < numberOfDrawings) {\r\n await downloadDrawing(this.state.drawings[drawingsDownloaded])\r\n drawingsDownloaded++\r\n setTimeout(downloadNext, 500)\r\n }\r\n }\r\n \r\n downloadNext()\r\n }\r\n\r\n saveProject = (event) => {\r\n event.preventDefault()\r\n\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: true },\r\n quote: { ...this.state.quote, QuoteCustomerMarkupPercent: this.state.QuoteCustomerMarkupPercent } // Save eventually changed mark-up on the front-end\r\n }, () => {\r\n const saveProjectRequestObj = {\r\n ...cloneDeep(this.state.quote).value()\r\n }\r\n\r\n saveProjectRequestObj['PurchaseNumber'] = this.state.purchaseNumber\r\n saveProjectRequestObj['DontResetQuote'] = true\r\n\r\n if (this.state.userData.UserIsContractor) {\r\n saveProjectRequestObj['WholesalerBranchIDOrderedThrough'] = parseInt(this.state.selectedWholesalerIDForProduction, 10)\r\n }\r\n\r\n apiCallsCommercial.apiSave(saveProjectRequestObj)\r\n .then(() => {\r\n // Once we save the project we submit the order for the contractor\r\n this.submitOrder()\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n })\r\n }\r\n\r\n sendEmailCustomerQuote = (event) => {\r\n event.preventDefault()\r\n\r\n this.setState({ isLoading: { ...this.state.isLoading, emailQuote: true } })\r\n\r\n // Before we send an email we need to save provided customer data by calling Project quote API\r\n apiCallsCommercial.apiGenerateQuote(this.state.projectID, this.state.preferredWholesalerID,\r\n this.state.QuoteCompanyName,\r\n this.state.QuoteCustomerName,\r\n '',\r\n '',\r\n this.state.QuoteCustomerEmail,\r\n this.state.QuoteCustomerQuoteRef,\r\n this.state.QuoteCustomerMarkupPercent)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData\r\n })\r\n\r\n apiCallsCommercial.apiEmailQuote(this.state.quote.ItemID, true)\r\n .then(() => {\r\n this.setState({ pageInfo: 'Quote email sent successfully.' })\r\n\r\n analyticsDataLayer.emailQuote({\r\n quote_id: `${this.state.projectID}`,\r\n quote_name: \"Send Quote\",\r\n currency: \"AUD\",\r\n total_amount: quoteData.CustomerQuoteCentsIncGST / 100,\r\n markup_percentage: `${this.state.QuoteCustomerMarkupPercent - 100}%`\r\n })\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n .then(() => {\r\n this.setState({ isLoading: { ...this.state.isLoading, emailQuote: false } })\r\n this.hideEmailCustomerQuote()\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n submitOrder() {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: true }\r\n })\r\n\r\n apiCallsCommercial.apiSendOrder(this.state.projectID)\r\n .then(() => {\r\n this.hideConfirmationModal()\r\n\r\n let projectBoards = []\r\n let newProjectBoardDetails = []\r\n this.state.quote.ProjectBoards.forEach(board => {\r\n board.BoardBOMComponents.forEach(item => {\r\n const baseEventDetails = {\r\n 'item_id': item.ItemCode,\r\n 'item_name': item.Description,\r\n 'item_brand': 'FlexSelect',\r\n 'item_category': item.Category,\r\n 'item_variant': '',\r\n 'price': item.Price,\r\n 'quantity': item.Quantity\r\n }\r\n\r\n // Old event details we still need to keep\r\n projectBoards.push({\r\n ...baseEventDetails,\r\n item_board_name: board.Name,\r\n item_board_id: board.ItemID.toString()\r\n })\r\n\r\n // New event details with new parameters configuration_name and configuration_id\r\n newProjectBoardDetails.push({\r\n ...baseEventDetails,\r\n configuration_name: board.Name,\r\n configuration_id: board.ItemID.toString()\r\n })\r\n })\r\n })\r\n\r\n // As part of new requirments we trigger the purchase event and also add to cart event at the same time\r\n // So this is intentional and not a mistake\r\n analyticsDataLayer.purchase({\r\n 'currency': 'AUD',\r\n 'transaction_id': this.state.quote.ProjectNumberReadOnly,\r\n 'value': this.state.quote.QuoteCentsIncGST / 100,\r\n 'project_type': 'Commercial',\r\n 'project_name': this.state.quote.Title,\r\n 'project_id': this.state.quote.ItemID.toString(),\r\n 'tax': this.state.quote.QuoteCentsGST ? this.state.quote.QuoteCentsGST / 100 : 0,\r\n 'order_number': this.state.purchaseNumber,\r\n 'items': projectBoards\r\n })\r\n\r\n analyticsDataLayer.addToCart({\r\n 'currency': 'AUD',\r\n 'value': this.state.quote.QuoteCentsIncGST / 100,\r\n 'project_type': 'Commercial',\r\n 'project_name': this.state.quote.Title,\r\n 'project_id': this.state.quote.ItemID.toString(),\r\n 'order_number': this.state.purchaseNumber,\r\n 'items': newProjectBoardDetails\r\n }, 'place order')\r\n\r\n // After the order is placed we redirect the user back to the project details, that page at this stage should indicate completly different state\r\n this.props.history.push(CONST.PAGES.PROJECT_DETAILS + '?orderID=' + this.state.projectID)\r\n })\r\n .catch(error => {\r\n this.hideConfirmationModal()\r\n\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: false },\r\n apiError: error.message\r\n })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n // Send email to each wholesaler selected\r\n requestWholesalersQuote() {\r\n this.setState({ apiError: '' })\r\n\r\n if (this.state.wholesalerToSendQuote === '') {\r\n this.setState({ apiError: 'You need to select a wholesaler to request a quote' })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n } else {\r\n this.setState({ isLoading: { ... this.state.isLoading, emailQuote: true } })\r\n\r\n apiCallsCommercial.apiEmailQuote(this.state.quote.ItemID, false, [this.state.wholesalerToSendQuote])\r\n .then(() => {\r\n // After sending a quote to one or multiple wholselers we need to display a message and show \"Proceed with production\" section\r\n this.setState({ hasRequestedEmailQuote: true, contractorRequestAgain: true })\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n .then(() => {\r\n this.setState({ isLoading: { ... this.state.isLoading, emailQuote: false } })\r\n window.setTimeout(() => this.setState({ hasRequestedEmailQuote: false }), 2500)\r\n })\r\n }\r\n }\r\n\r\n changeWholesalerMarkup(increase) {\r\n let markup = 0\r\n if (increase) {\r\n markup = this.state.QuoteCustomerMarkupPercent + 1\r\n } else {\r\n markup = this.state.QuoteCustomerMarkupPercent - 1\r\n }\r\n\r\n this.setState({ QuoteCustomerMarkupPercent: markup })\r\n }\r\n\r\n renderOrderItemTable(quote, quoteValue100, isSwitchManOrLargeContractor) {\r\n console.log('quote', quote, quoteValue100)\r\n return !this.state.userData.UserIsContractor &&\r\n \r\n
\r\n
\r\n {isSwitchManOrLargeContractor ?\r\n
\r\n
\r\n \r\n {quote.Title}\r\n \r\n \r\n {quote.ProjectNumberReadOnly}\r\n \r\n \r\n this.showEmailCustomerQuote()}>\r\n \r\n Email customer quote\r\n \r\n \r\n :\r\n
\r\n \r\n {quote.Title}\r\n \r\n \r\n {quote.ProjectNumberReadOnly}\r\n \r\n \r\n }\r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
Sell price
\r\n : null\r\n }\r\n
\r\n
\r\n Boards\r\n
\r\n
\r\n {/* This can be displayed once BE returns the Quantity and fixes the number */}\r\n {/* Unit Price */}\r\n
\r\n
\r\n Total Cost (Ex GST) \r\n
\r\n
\r\n GST\r\n
\r\n
\r\n Total Cost (Inc. GST) \r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n Mark-up\r\n
\r\n
this.changeWholesalerMarkup(false)}\r\n >\r\n \r\n \r\n \r\n\r\n
\r\n \r\n {this.state.QuoteCustomerMarkupPercent - 100}%\r\n \r\n
\r\n\r\n
this.changeWholesalerMarkup(true)}>\r\n \r\n \r\n \r\n
\r\n
: null\r\n }\r\n
\r\n\r\n {quote?.ProjectBoards?.map(board => {\r\n const boardValues = this.getDisplayQuoteValues(board)\r\n return (\r\n
\r\n
\r\n
\r\n \r\n {board.Name}\r\n \r\n { this.showLeadTimes(board) }}>\r\n \r\n View lead times\r\n \r\n \r\n
\r\n
\r\n
\r\n {/* This can be enabled once BE returns the Quantity and fixes the number */}\r\n {/* {this.renderCurrency(boardValues.unitPrice)} */}\r\n
\r\n
\r\n {board.QuoteDiscountedCentsExGST ? (\r\n \r\n {this.renderCurrency(boardValues.exGST)} \r\n Was {this.renderCurrency(boardValues.orgExGST)} \r\n \r\n ) : (\r\n this.renderCurrency(boardValues.exGST)\r\n )}\r\n
\r\n
\r\n {this.renderCurrency(boardValues.GST)}\r\n
\r\n
\r\n {this.renderCurrency(boardValues.incGST)}\r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n {this.renderCurrency(boardValues.exGST * this.state.QuoteCustomerMarkupPercent / 100)} + GST\r\n \r\n {this.renderCurrency((boardValues.exGST * this.state.QuoteCustomerMarkupPercent / 100) - boardValues.exGST)} (Mark-up)\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 Total\r\n \r\n
\r\n this.setState({ showPromoCodeInput: true })}>\r\n \r\n \r\n \r\n Add promo code\r\n \r\n \r\n\r\n \r\n \r\n \r\n Apply\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {/* Need to leave empty as the total row doesn't have unit price */}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.exGST)}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.GST)}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.incGST)}\r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n {this.renderCurrency(quoteValue100.exGST * this.state.QuoteCustomerMarkupPercent / 100)} + GST\r\n \r\n {this.renderCurrency((quoteValue100.exGST * this.state.QuoteCustomerMarkupPercent / 100) - quoteValue100.exGST)} (Mark-up)\r\n \r\n this.showEmailCustomerQuote()}>\r\n \r\n Email customer quote\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
Generating Quote \r\n
\r\n
)\r\n } else {\r\n const quote = this.state.quote\r\n const quoteValue = this.getCustomerDisplayQuoteValues(quote)\r\n const quoteValue100 = this.getDisplayQuoteValues(quote)\r\n\r\n return (\r\n \r\n \r\n\r\n {\r\n this.state.isLoading.placeOrderApi &&\r\n
\r\n \r\n
\r\n \r\n \r\n Placing Order \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isLoading.emailQuote &&\r\n
\r\n \r\n
\r\n \r\n \r\n Sending Quote \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasRequestedEmailQuote &&\r\n
\r\n \r\n
\r\n \r\n \r\n Quote sent \r\n
\r\n
\r\n }\r\n\r\n {/* Email Quote */}\r\n {this.state.showEmailCustomerQuoteModal &&\r\n
\r\n \r\n \r\n }\r\n\r\n {/* Confirm Order */}\r\n {\r\n this.state.showConfirmationModal &&\r\n \r\n \r\n \r\n }\r\n\r\n {/* Item Breakdown */}\r\n {\r\n this.state.showBreakdown &&\r\n \r\n {this.renderProjectBoardModals(this.state.selectedBoard)}\r\n\r\n \r\n *Longer lead times may apply\r\n
\r\n \r\n }\r\n\r\n \r\n )\r\n }\r\n }\r\n}\r\n\r\nexport default withRouter(Quote)","import React, { Component } from 'react'\r\nimport { withRouter, Link } from 'react-router-dom'\r\nimport Header from '../../components/header/Header'\r\nimport { getUrlParameter } from '../../utils/helpers'\r\nimport GlobalOverlay from '../../components/global-overlay/GlobalOverlay'\r\nimport Modal from '../../components/modal/Modal'\r\nimport Datepicker from '../../components/datepicker/Datepicker'\r\nimport commonFunctionsService from '../../services/CommonFunctionsService'\r\nimport { apiCallsCommercial } from '../../utils/apiCallsCommercial'\r\nimport { apiCallsResidential, apiUrlGetDocument } from './../../utils/apiCallsResidential'\r\nimport { CONST } from '../../CONST'\r\nimport cloneDeep from 'lodash'\r\nimport jQuery from \"jquery\"\r\nimport analyticsDataLayer from '../../services/AnalyticsDataLayer'\r\n\r\n\r\nclass Quote extends Component {\r\n constructor() {\r\n super()\r\n\r\n // Bind this to element function calls for better performance / practise\r\n // - ref: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md\r\n this.saveProject = this.saveProject.bind(this)\r\n this.sendEmailCustomerQuote = this.sendEmailCustomerQuote.bind(this)\r\n this.requestWholesalersQuote = this.requestWholesalersQuote.bind(this)\r\n this.hideConfirmationModal = this.hideConfirmationModal.bind(this)\r\n this.showEmailCustomerQuote = this.showEmailCustomerQuote.bind(this)\r\n // this.handleCustomerDetailChange = this.handleCustomerDetailChange.bind(this)\r\n\r\n // Init states\r\n this.state = {\r\n apiError: '',\r\n pageInfo: '',\r\n promoCode: '',\r\n purchaseNumber: '',\r\n attachedPO: '',\r\n userData: {},\r\n showBreakdown: false,\r\n showPromoCodeInput: false,\r\n validation: {\r\n message: '',\r\n isError: false,\r\n disclaimerCheckbox: false,\r\n promoCodeInput: false,\r\n purchaseOrderNumber: false,\r\n noAttachedPO: false\r\n },\r\n isLoading: {\r\n app: true,\r\n promoCodeApi: false,\r\n placeOrderApi: false,\r\n drawing: false,\r\n attachingPO: false,\r\n emailQuote: false,\r\n updateDetails: false\r\n },\r\n drawings: [],\r\n showConfirmationModal: false,\r\n projectID: getUrlParameter('projectID'),\r\n contractorRequestAgain: false,\r\n preferredWholesalerID: getUrlParameter('wholesalerBranchID'),\r\n wholesalersToSendQuote: [\r\n getUrlParameter('wholesalerBranchID')\r\n ],\r\n selectedWholesalerIDForProduction: '',\r\n showEmailCustomerQuoteModal: false,\r\n QuoteCompanyName: '',\r\n QuoteCustomerName: '',\r\n QuoteCustomerAddress: '',\r\n QuoteCustomerPhone: '',\r\n QuoteCustomerEmail: '',\r\n QuoteCustomerMarkupPercent: 125,\r\n orderPlacementCondition1Accepted: false,\r\n orderPlacementCondition2Accepted: false,\r\n orderPlacementCondition3Accepted: false,\r\n orderPlacementCondition4Accepted: false,\r\n orderPlacementCondition5Accepted: false\r\n // ,orderPlacementCondition6Accepted: false\r\n }\r\n\r\n // Temp user data\r\n this.userData = {}\r\n }\r\n\r\n componentDidMount() {\r\n let isConsultant = false\r\n let preferredWholesaler = this.state.preferredWholesalerID\r\n if (preferredWholesaler === '') {\r\n preferredWholesaler = -1 // default value for API\r\n }\r\n\r\n // Load the API data after mounting so the spinner gets rendered first\r\n apiCallsCommercial.apiUserSettings()\r\n .then(userDataObj => {\r\n isConsultant = userDataObj.IsConsultant\r\n this.userData = userDataObj\r\n this.setState({\r\n userData: userDataObj,\r\n QuoteCustomerMarkupPercent: userDataObj.ResidentialEndCustomerMarkupFactor !== null ? userDataObj.ResidentialEndCustomerMarkupFactor * 100 : 125,\r\n })\r\n\r\n return apiCallsResidential.apiGetProject(this.state.projectID)\r\n })\r\n .then(projectData => {\r\n // If its a consultant, we display this page with just the project data\r\n // OR Check if the project data already comes with quote info, also need to make sure the wholesaler order through has not changed\r\n const existingQuote = projectData.WholesalerBranchIDOrderedThrough === 0 || projectData.WholesalerBranchIDOrderedThrough === this.state.preferredWholesalerID\r\n\r\n const anyBoardMissingGeneratedComponents = projectData.ProjectBoards.some(board => board.BoardBOMComponents.length === 0)\r\n if (isConsultant || (existingQuote && !anyBoardMissingGeneratedComponents)) {\r\n this.setState({\r\n quote: projectData,\r\n purchaseNumber: projectData.PurchaseNumber,\r\n attachedPO: projectData.POIsValid ? 'already attached' : null,\r\n promoCode: projectData.QuotePromoCode ? projectData.QuotePromoCode : '',\r\n isLoading: { ...this.state.isLoading, app: false }\r\n })\r\n\r\n // Previousely it used to download drawings only for the consultant, but we want all users to see drawing\r\n // E.g. Contractor previously needed to place an order before downloading drawings, now he can download them even before placing an order\r\n this.getDrawingsFromServer()\r\n } else {\r\n this.setState({\r\n quote: projectData\r\n }, () => {\r\n this.generateQuote().then(() => {\r\n apiCallsResidential.apiGetProject(this.state.projectID).then(projectData => {\r\n this.setState({\r\n quote: projectData,\r\n purchaseNumber: projectData.PurchaseNumber,\r\n attachedPO: projectData.POIsValid ? 'already attached' : null,\r\n promoCode: projectData.QuotePromoCode ? projectData.QuotePromoCode : '',\r\n isLoading: { ...this.state.isLoading, app: false }\r\n })\r\n\r\n // Very first time we need to generate the quote at least once before we can call the drawings API\r\n this.getDrawingsFromServer()\r\n })\r\n })\r\n })\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n getDrawingsFromServer() {\r\n this.setState({ isLoading: { ...this.state.isLoading, drawing: true } })\r\n\r\n apiCallsResidential.apiGetLayoutDiagrams(this.state.projectID)\r\n .then(response => {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, drawing: false },\r\n drawings: response.ProjectFileCollection.filter(x => x.ProjectBoardID !== -1)\r\n })\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, drawing: false },\r\n apiError: error.message\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n generateQuote() {\r\n return new Promise((resolve, reject) => {\r\n // Since the quote company name is required, so we check the fields against that in the project data item\r\n // if its not already filled in, we will default the values to the values in user setting\r\n const quoteCompanyName = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCompanyName : null\r\n const quoteCustName = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerName : null\r\n const quoteAddress = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerAddress : null\r\n const quotePhone = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerPhone : null\r\n const quoteEmail = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerEmail : null\r\n const quoteMarkup = this.state.quote.QuoteCompanyName ? this.state.quote.QuoteCustomerMarkupPercent : 125\r\n\r\n apiCallsResidential.apiGenerateQuote(this.state.projectID, this.state.preferredWholesalerID, quoteCompanyName, quoteCustName, quoteAddress, quotePhone, quoteEmail, '', quoteMarkup)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData,\r\n isLoading: { ...this.state.isLoading, app: false }\r\n })\r\n\r\n analyticsDataLayer.viewQuote({\r\n \"quote_id\": `${this.state.projectID}`,\r\n \"quote_name\": \"View quote\"\r\n })\r\n\r\n resolve(true)\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n\r\n reject(error.message)\r\n })\r\n })\r\n }\r\n\r\n getDisplayQuoteValues = quoteData => {\r\n const displayQuote = {\r\n unitPrice: 0,\r\n orgExGST: 0,\r\n incGST: 0,\r\n exGST: 0,\r\n GST: 0\r\n }\r\n\r\n displayQuote.orgExGST = quoteData.QuoteCentsExGST\r\n\r\n if (quoteData.QuoteDiscountedCentsExGST) {\r\n displayQuote.incGST = quoteData.QuoteDiscountedCentsIncGST\r\n displayQuote.exGST = quoteData.QuoteDiscountedCentsExGST\r\n displayQuote.GST = quoteData.QuoteDiscountCentsGST\r\n } else {\r\n displayQuote.incGST = quoteData.QuoteCentsIncGST\r\n displayQuote.exGST = quoteData.QuoteCentsExGST\r\n displayQuote.unitPrice = Math.round((quoteData.QuoteCentsExGST / quoteData.Quantity) * 100) / 100\r\n displayQuote.GST = quoteData.QuoteCentsGST\r\n }\r\n\r\n return displayQuote\r\n }\r\n\r\n getCustomerDisplayQuoteValues = quoteData => {\r\n const displayQuote = {\r\n orgExGST: 0,\r\n incGST: 0,\r\n exGST: 0,\r\n GST: 0\r\n }\r\n\r\n displayQuote.orgExGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsExGST') ? quoteData.CustomerQuoteCentsExGST : quoteData.QuoteCentsExGST\r\n\r\n if (quoteData.QuoteDiscountedCentsExGST) {\r\n displayQuote.incGST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsIncGST') ? quoteData.CustomerDiscountedQuoteCentsIncGST : quoteData.QuoteDiscountedCentsIncGST\r\n displayQuote.exGST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsExGST') ? quoteData.CustomerDiscountedQuoteCentsExGST : quoteData.QuoteDiscountedCentsExGST\r\n displayQuote.GST = this.getNumericAttr(quoteData, 'CustomerDiscountedQuoteCentsGST') ? quoteData.CustomerDiscountedQuoteCentsGST : quoteData.QuoteDiscountCentsGST\r\n } else {\r\n displayQuote.incGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsIncGST') ? quoteData.CustomerQuoteCentsIncGST : quoteData.QuoteCentsIncGST\r\n displayQuote.exGST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsExGST') ? quoteData.CustomerQuoteCentsExGST : quoteData.QuoteCentsExGST\r\n displayQuote.GST = this.getNumericAttr(quoteData, 'CustomerQuoteCentsGST') ? quoteData.CustomerQuoteCentsGST : quoteData.QuoteCentsGST\r\n }\r\n\r\n return displayQuote\r\n }\r\n\r\n getNumericAttr(obj, attribute) {\r\n return obj.hasOwnProperty(attribute) ? obj[attribute] : 0\r\n }\r\n\r\n showLeadTimes(board) {\r\n this.setState({ selectedBoard: board, showBreakdown: true })\r\n let itemData = []\r\n board.BoardBOMComponents.forEach(item => {\r\n itemData.push({\r\n \"item_name\": item.Description,\r\n \"item_id\": item.ItemCode,\r\n \"item_brand\": 'FlexSelect',\r\n \"item_category\": item.Category,\r\n \"item_variant\": '',\r\n \"price\": item.Price,\r\n \"quantity\": item.Quantity\r\n })\r\n })\r\n analyticsDataLayer.viewItemList({\r\n \"currency\": 'AUD',\r\n \"project_type\": 'Residential',\r\n \"project_name\": this.state.quote.Title,\r\n \"item_board_name\": board.Name,\r\n \"item_board_id\": board.ItemID.toString(),\r\n \"configuration_name\": board.Name,\r\n \"configuration_id\": board.ItemID.toString(), \r\n \"project_id\": this.state.quote.ItemID.toString(),\r\n \"items\": itemData\r\n })\r\n }\r\n\r\n hideLeadTimes = () => {\r\n this.setState({ showBreakdown: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n showEmailCustomerQuote() {\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: \"Email Customer Quote\",\r\n cta_link: window.location.href,\r\n cta_location: \"quote page\",\r\n })\r\n this.setState({ showEmailCustomerQuoteModal: true })\r\n }\r\n\r\n hideEmailCustomerQuote = () => {\r\n this.setState({ showEmailCustomerQuoteModal: false })\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n renderCurrency = cents => {\r\n const dollars = cents / 100\r\n\r\n return dollars.toLocaleString('en-AU', {\r\n style: 'currency',\r\n currency: 'AUD',\r\n minimumFractionDigits: 2,\r\n maximumFractionDigits: 2\r\n })\r\n }\r\n\r\n renderProjectBoardModals = board => {\r\n let boardDescription = []\r\n let boardItemDescriptionsToAdd = []\r\n // It looks like for some users (at least consultant) the API doesn't return BoardBOMComponents and elements\r\n // In the original Commercial Flex were returned by reading board's included components\r\n if (!board.BoardBOMComponents.length) {\r\n board.ProjectBoardBreakerCollection.forEach(item => { boardItemDescriptionsToAdd.push(item.BreakerTypeReadOnly.Description) })\r\n board.ProjectBoardContractorCollection.forEach(item => { boardItemDescriptionsToAdd.push(item.ContractorReadOnly.Description) })\r\n board.ProjectBoardFittedOptionCollection.forEach(item => { boardItemDescriptionsToAdd.push(item.FittedOptionReadOnly.Description) })\r\n board.ProjectBoardBusbarCollection.forEach(item => { boardItemDescriptionsToAdd.push(item.BusBarReadOnly.Description) })\r\n\r\n boardItemDescriptionsToAdd.forEach(itemDescription => {\r\n const inArray = boardDescription.find(boardItem => boardItem.Description === itemDescription)\r\n if (inArray) {\r\n boardDescription = boardDescription.map(boardItemObject => {\r\n if (boardItemObject.Description === itemDescription) {\r\n boardItemObject.Quantity = boardItemObject.Quantity + 1\r\n }\r\n return boardItemObject\r\n })\r\n } else {\r\n boardDescription.push({\r\n Quantity: 1,\r\n Description: itemDescription\r\n })\r\n }\r\n })\r\n } else {\r\n boardDescription = [...board.BoardBOMComponents]\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n {boardDescription.some(item => item.ItemCode) && Reference }\r\n Quantity \r\n Items \r\n \r\n \r\n \r\n {boardDescription.map((BOMComponent, index) => {\r\n return (\r\n \r\n {BOMComponent.ItemCode && {BOMComponent.ItemCode} }\r\n {BOMComponent.Quantity} \r\n {BOMComponent.Description} \r\n \r\n )\r\n })}\r\n \r\n
\r\n )\r\n }\r\n\r\n applyPromoCode = () => {\r\n if (this.state.promoCode.length === 0) {\r\n this.setState({ validation: { ...this.state.validation, promoCodeInput: true } })\r\n } else {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, promoCodeApi: true },\r\n validation: { ...this.state.validation, promoCodeInput: false }\r\n })\r\n\r\n const applyPromoCodeRequestObj = {\r\n 'ProjectID': this.state.quote.ItemID,\r\n 'PromoCode': this.state.promoCode\r\n }\r\n\r\n apiCallsResidential.apiApplyPromoCode(applyPromoCodeRequestObj)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData,\r\n attachedPO: quoteData.POIsValid ? '' : null,\r\n isLoading: { ...this.state.isLoading, promoCodeApi: false },\r\n promoCode: '',\r\n showPromoCodeInput: false,\r\n pageInfo: 'Promo code applied successfully! Note: Promo code has to be valid at the time of placing order.'\r\n })\r\n\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n this.setState({\r\n apiError: error.message,\r\n isLoading: { ...this.state.isLoading, promoCodeApi: false }\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n\r\n }\r\n }\r\n\r\n handlePromoCode = event => {\r\n this.setState({ promoCode: event.target.value })\r\n }\r\n\r\n handlePOUpload = e => {\r\n e.preventDefault()\r\n\r\n this.setState({ isLoading: { attachingPO: true } })\r\n\r\n // inspiration taken from http://www.hartzis.me/react-image-upload/\r\n // and https://www.html5rocks.com/en/tutorials/file/dndfiles/\r\n // should be everything the BEDs need to get the file.\r\n\r\n const reader = new FileReader()\r\n const fileInput = e.target\r\n const quoteObj = this.state.quote\r\n\r\n reader.onloadend = () => {\r\n apiCallsResidential.apiAttachPo(quoteObj.ItemID, quoteObj.QuoteCentsIncGST, quoteObj.QuoteDiscountedCentsIncGST, reader.result)\r\n .then(response => {\r\n this.setState({\r\n attachedPO: response.POFileName === null ? 'this should be set to the return value' : response.POFileName,\r\n isLoading: { attachingPO: false },\r\n pageInfo: 'PO successfully attached to the project.'\r\n })\r\n\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n fileInput.value = ''\r\n this.setState({\r\n apiError: error.message,\r\n isLoading: { attachingPO: false }\r\n })\r\n\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n reader.readAsDataURL(fileInput.files[0])\r\n }\r\n\r\n // handleCustomerDetailChange = stateObject => {\r\n // this.setState({ isLoading: {...this.state.isLoading, updateDetails: true} });\r\n // const projectId = this.getUrlParameter('projectID');\r\n // let preferredWholesaler = this.getUrlParameter('wholesalerBranchID');\r\n // if ( preferredWholesaler === '' ) {\r\n // preferredWholesaler = -1; // default value for API\r\n // }\r\n\r\n // apiCallsResidential.apiGenerateQuote(projectId, preferredWholesaler, stateObject.QuoteCompanyName, stateObject.QuoteCustomerName,\r\n // stateObject.QuoteCustomerAddress, stateObject.QuoteCustomerPhone, stateObject.QuoteCustomerEmail, stateObject.QuoteCustomerQuoteRef, stateObject.QuoteCustomerMarkupPercent)\r\n // .then(quoteData => {\r\n // this.setValidationMsg('Customer details updated successfully.', false);\r\n // this.setState({ quote: quoteData });\r\n // })\r\n // .catch(error => {\r\n // this.setValidationMsg(error.message, true);\r\n // })\r\n // .then(() => {\r\n // this.setState({ isLoading: {...this.state.isLoading, updateDetails: false} });\r\n // // $.magnificPopup.close();\r\n // });\r\n // }\r\n\r\n setDispatchDate = date => {\r\n this.setState({\r\n quote: {\r\n ...this.state.quote,\r\n PreferredDispatchDate: date\r\n }\r\n })\r\n }\r\n\r\n validateForm = (event) => {\r\n event.preventDefault()\r\n\r\n const noPurchaseNumber = this.state.purchaseNumber.length === 0 ? true : false\r\n const noAttachedPO = this.state.attachedPO.length === 0 ? true : false\r\n\r\n if (!this.state.userData.UserIsContractor && (noPurchaseNumber || noAttachedPO)) {\r\n this.setState({\r\n validation: {\r\n ...this.state.validation,\r\n purchaseOrderNumber: noPurchaseNumber,\r\n noAttachedPO: noAttachedPO\r\n }\r\n })\r\n } else {\r\n this.setState({\r\n showConfirmationModal: true,\r\n validation: {\r\n ...this.state.validation,\r\n purchaseOrderNumber: false\r\n }\r\n })\r\n }\r\n }\r\n\r\n hideConfirmationModal() {\r\n this.setState({ showConfirmationModal: false }, () => jQuery('.app__body-content').animate({ scrollTop: 0 }, 'fast'))\r\n\r\n commonFunctionsService.closeModals()\r\n }\r\n\r\n async downloadDrawings() {\r\n let drawingsDownloaded = 0\r\n const numberOfDrawings = this.state.drawings.length\r\n const token = localStorage.getItem('token')\r\n \r\n const downloadDrawing = async (drawing) => {\r\n const downloadURL = `${apiUrlGetDocument}/${drawing.ItemGUID}`\r\n const response = await fetch(downloadURL, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`\r\n }\r\n })\r\n const blob = await response.blob()\r\n const url = window.URL.createObjectURL(blob)\r\n \r\n let contentDisposition = response.headers.get('Content-Disposition')\r\n // Remove all quotes \" from the contentDisposition, as some .NET behaviour adds them \r\n // it's because of the special characters \"(\" and \")\" in case of the project names with brackets\r\n contentDisposition = contentDisposition.replace(/\"/g, '')\r\n let filename = 'download.pdf'\r\n if (contentDisposition && contentDisposition.includes('attachment')) {\r\n const matches = /filename=([^;]+)/.exec(contentDisposition)\r\n if (matches && matches[1]) {\r\n filename = matches[1]\r\n }\r\n }\r\n \r\n const a = document.createElement('a')\r\n a.href = url\r\n a.download = filename\r\n a.click()\r\n window.URL.revokeObjectURL(url)\r\n \r\n analyticsDataLayer.downloadLayout({\r\n \"document_id\": drawing.ItemGUID,\r\n \"document_name\": \"Download Drawings\",\r\n \"document_type\": \"pdf\"\r\n })\r\n }\r\n \r\n const downloadNext = async () => {\r\n if (drawingsDownloaded < numberOfDrawings) {\r\n await downloadDrawing(this.state.drawings[drawingsDownloaded])\r\n drawingsDownloaded++\r\n setTimeout(downloadNext, 500)\r\n }\r\n }\r\n \r\n downloadNext()\r\n }\r\n\r\n handleWholsalerSendQuoteChange(wholesalerBranchID) {\r\n const indexOfAlreadySelectedWholeseler = this.state.wholesalersToSendQuote.indexOf(wholesalerBranchID)\r\n let wholesalersArray = this.state.wholesalersToSendQuote\r\n\r\n if (indexOfAlreadySelectedWholeseler > -1) {\r\n wholesalersArray.splice(indexOfAlreadySelectedWholeseler, 1)\r\n } else {\r\n wholesalersArray.push(wholesalerBranchID)\r\n }\r\n\r\n this.setState({ wholesalersToSendQuote: wholesalersArray })\r\n }\r\n\r\n saveProject = (event) => {\r\n event.preventDefault()\r\n\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: true },\r\n quote: { ...this.state.quote, QuoteCustomerMarkupPercent: this.state.QuoteCustomerMarkupPercent } // Save eventually changed margin on the front-end\r\n }, () => {\r\n const saveProjectRequestObj = cloneDeep(this.state.quote)\r\n saveProjectRequestObj['PurchaseNumber'] = this.state.purchaseNumber\r\n saveProjectRequestObj['DontResetQuote'] = true\r\n\r\n apiCallsResidential.apiSave(saveProjectRequestObj)\r\n .then(() => {\r\n // Once we save the project we submit the order for the contractor\r\n this.submitOrder()\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n })\r\n }\r\n\r\n sendEmailCustomerQuote = (event) => {\r\n event.preventDefault()\r\n\r\n this.setState({ isLoading: { ...this.state.isLoading, emailQuote: true } })\r\n\r\n // Before we send an email we need to save provided customer data by calling Project quote API\r\n apiCallsResidential.apiGenerateQuote(this.state.projectID, this.state.preferredWholesalerID,\r\n this.state.QuoteCompanyName,\r\n this.state.QuoteCustomerName,\r\n '',\r\n '',\r\n this.state.QuoteCustomerEmail,\r\n '',\r\n this.state.QuoteCustomerMarkupPercent)\r\n .then(quoteData => {\r\n this.setState({\r\n quote: quoteData\r\n })\r\n\r\n apiCallsResidential.apiEmailQuote(this.state.quote.ItemID, true)\r\n .then(() => {\r\n this.setState({ pageInfo: 'Quote email sent successfully.' })\r\n\r\n analyticsDataLayer.emailQuote({\r\n quote_id: `${this.state.projectID}`,\r\n quote_name: \"Send Quote\",\r\n currency: \"AUD\",\r\n total_amount: quoteData.CustomerQuoteCentsIncGST / 100,\r\n markup_percentage: `${this.state.QuoteCustomerMarkupPercent - 100}%`\r\n })\r\n window.setTimeout(() => this.setState({ pageInfo: '' }), 5000)\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n .then(() => {\r\n this.setState({ isLoading: { ...this.state.isLoading, emailQuote: false } })\r\n this.hideEmailCustomerQuote()\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n submitOrder() {\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: true }\r\n })\r\n\r\n apiCallsResidential.apiSendOrder(this.state.projectID)\r\n .then(() => {\r\n this.hideConfirmationModal()\r\n\r\n\r\n // Please refer to the corresponding code in the commercial FlexSelect\r\n // To better understand why these events are passed in the way they are\r\n let projectBoards = []\r\n let newProjectBoardDetails = []\r\n this.state.quote.ProjectBoards.forEach(board => {\r\n board.BoardBOMComponents.forEach(item => {\r\n const baseEventDetails = {\r\n 'item_id': item.ItemCode,\r\n 'item_name': item.Description,\r\n 'item_brand': 'FlexSelect',\r\n 'item_category': item.Category,\r\n 'item_variant': '',\r\n 'price': item.Price,\r\n 'quantity': item.Quantity\r\n }\r\n\r\n projectBoards.push({\r\n ...baseEventDetails,\r\n item_board_name: board.Name,\r\n item_board_id: board.ItemID.toString()\r\n })\r\n\r\n newProjectBoardDetails.push({\r\n ...baseEventDetails,\r\n configuration_name: board.Name,\r\n configuration_id: board.ItemID.toString()\r\n })\r\n })\r\n })\r\n\r\n analyticsDataLayer.purchase({\r\n 'currency': 'AUD',\r\n 'transaction_id': this.state.quote.ProjectNumberReadOnly,\r\n 'value': this.state.quote.QuoteCentsIncGST / 100,\r\n 'project_type': 'Residential',\r\n 'project_name': this.state.quote.Title,\r\n 'project_id': this.state.quote.ItemID.toString(),\r\n 'tax': this.state.quote.QuoteCentsGST ? this.state.quote.QuoteCentsGST / 100 : 0,\r\n 'order_number': this.state.purchaseNumber,\r\n 'items': projectBoards\r\n })\r\n\r\n analyticsDataLayer.addToCart({\r\n 'currency': 'AUD',\r\n 'value': this.state.quote.QuoteCentsIncGST / 100,\r\n 'project_type': 'Residential',\r\n 'project_name': this.state.quote.Title,\r\n 'project_id': this.state.quote.ItemID.toString(),\r\n 'order_number': this.state.purchaseNumber,\r\n 'items': newProjectBoardDetails\r\n }, 'place order')\r\n\r\n // After the order is placed we redirect the user back to the project details, that page at this stage should indicate completly \r\n // different state\r\n this.props.history.push(CONST.PAGES.PROJECT_DETAILS_RESIDENTIAL + '?orderID=' + this.state.projectID)\r\n })\r\n .catch(error => {\r\n this.hideConfirmationModal()\r\n\r\n this.setState({\r\n isLoading: { ...this.state.isLoading, placeOrderApi: false },\r\n apiError: error.message\r\n })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n }\r\n\r\n // Send email to each wholesaler selected\r\n requestWholesalersQuote() {\r\n this.setState({ apiError: '' })\r\n\r\n if (this.state.wholesalersToSendQuote.length === 0) {\r\n this.setState({ apiError: 'You need to select at least one wholesaler to request a quote' })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n } else {\r\n this.setState({ isLoading: { ... this.state.isLoading, emailQuote: true } })\r\n\r\n apiCallsResidential.apiEmailQuote(this.state.quote.ItemID, false, this.state.wholesalersToSendQuote)\r\n .then(() => {\r\n // After sending a quote to one or multiple wholselers we need to display a message and show \"Proceed with production\" section\r\n this.setState({ hasRequestedEmailQuote: true, contractorRequestAgain: true })\r\n })\r\n .catch(error => {\r\n this.setState({ apiError: error.message })\r\n window.setTimeout(() => this.setState({ apiError: '' }), 5000)\r\n })\r\n .then(() => {\r\n this.setState({ isLoading: { ... this.state.isLoading, emailQuote: false } })\r\n window.setTimeout(() => this.setState({ hasRequestedEmailQuote: false }), 2500)\r\n })\r\n }\r\n }\r\n\r\n changeWholesalerMargin(increase) {\r\n let margin = 0\r\n if (increase) {\r\n margin = this.state.QuoteCustomerMarkupPercent + 1\r\n } else {\r\n margin = this.state.QuoteCustomerMarkupPercent - 1\r\n }\r\n\r\n this.setState({ QuoteCustomerMarkupPercent: margin })\r\n }\r\n\r\n renderOrderItemTable(quote, quoteValue100, isSwitchManOrLargeContractor) {\r\n return !this.state.userData.UserIsContractor &&\r\n \r\n
\r\n
\r\n {isSwitchManOrLargeContractor ?\r\n
\r\n
\r\n \r\n {quote.Title}\r\n \r\n \r\n {quote.ProjectNumberReadOnly}\r\n \r\n \r\n this.showEmailCustomerQuote()}>\r\n \r\n Email customer quote\r\n \r\n \r\n :\r\n
\r\n \r\n {quote.Title}\r\n \r\n \r\n {quote.ProjectNumberReadOnly}\r\n \r\n \r\n }\r\n
\r\n
\r\n
\r\n Boards\r\n
\r\n
\r\n Unit Price \r\n
\r\n
\r\n Total Cost (Ex GST) \r\n
\r\n
\r\n GST\r\n
\r\n
\r\n Total Cost (Inc. GST) \r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n Margin\r\n
\r\n
this.changeWholesalerMargin(false)}\r\n >\r\n \r\n \r\n \r\n\r\n {/* In order to enable manual input add logic here also when user clicks on 'margin-control__amount' add 'is-active' and also focus input when user clicks out remove 'is-active' */}\r\n
\r\n
\r\n {this.state.QuoteCustomerMarkupPercent - 100}%\r\n \r\n {/*
\r\n
*/}\r\n
\r\n\r\n
this.changeWholesalerMargin(true)}>\r\n \r\n \r\n \r\n
\r\n
: null}\r\n
\r\n\r\n {quote.ProjectBoards.map(board => {\r\n const boardValues = this.getDisplayQuoteValues(board)\r\n return (\r\n
\r\n
\r\n
\r\n \r\n {board.Name}\r\n \r\n { this.showLeadTimes(board) }}>\r\n \r\n View lead times\r\n \r\n \r\n
\r\n
\r\n
\r\n {this.renderCurrency(boardValues.unitPrice)} \r\n
\r\n
\r\n {board.QuoteDiscountedCentsExGST ? (\r\n \r\n {this.renderCurrency(boardValues.exGST)} \r\n Was {this.renderCurrency(boardValues.orgExGST)} \r\n \r\n ) : (\r\n this.renderCurrency(boardValues.exGST)\r\n )}\r\n
\r\n
\r\n {this.renderCurrency(boardValues.GST)}\r\n
\r\n
\r\n {this.renderCurrency(boardValues.incGST)}\r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n {this.renderCurrency(boardValues.incGST * this.state.QuoteCustomerMarkupPercent / 100)}\r\n \r\n {this.renderCurrency((boardValues.incGST * this.state.QuoteCustomerMarkupPercent / 100) - boardValues.incGST)} (Margin)\r\n \r\n
: null}\r\n
\r\n )\r\n })}\r\n\r\n
\r\n
\r\n
\r\n
\r\n Total\r\n \r\n
\r\n this.setState({ showPromoCodeInput: true })}>\r\n \r\n \r\n \r\n Add promo code\r\n \r\n \r\n\r\n \r\n \r\n \r\n Apply\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {/* Need to leave empty as the total row doesn't have unit price */}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.exGST)}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.GST)}\r\n
\r\n
\r\n {this.renderCurrency(quoteValue100.incGST)}\r\n
\r\n {!isSwitchManOrLargeContractor ?\r\n
\r\n {this.renderCurrency(quoteValue100.incGST * this.state.QuoteCustomerMarkupPercent / 100)}\r\n \r\n {this.renderCurrency((quoteValue100.incGST * this.state.QuoteCustomerMarkupPercent / 100) - quoteValue100.incGST)} (Margin)\r\n \r\n\r\n this.showEmailCustomerQuote()}>\r\n \r\n Email customer quote\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
Generating Quote \r\n
\r\n
)\r\n } else {\r\n\r\n const isSwitchManOrLargeContractor = ['SwitchboardManufacturer', 'LargeContractor'].includes(this.state.userData.UserTypeString)\r\n const quote = this.state.quote\r\n const quoteValue = this.getCustomerDisplayQuoteValues(quote)\r\n const quoteValue100 = this.getDisplayQuoteValues(quote)\r\n\r\n return (\r\n \r\n \r\n\r\n {\r\n this.state.isLoading.placeOrderApi &&\r\n
\r\n \r\n
\r\n \r\n \r\n Placing Order \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.isLoading.emailQuote &&\r\n
\r\n \r\n
\r\n \r\n \r\n Sending Quote \r\n
\r\n
\r\n }\r\n\r\n {\r\n this.state.hasRequestedEmailQuote &&\r\n
\r\n \r\n
\r\n \r\n \r\n Quote sent \r\n
\r\n
\r\n }\r\n\r\n {/* Email Quote */}\r\n {this.state.showEmailCustomerQuoteModal &&\r\n
\r\n \r\n \r\n }\r\n\r\n {/* Confirm Order */}\r\n {\r\n this.state.showConfirmationModal &&\r\n \r\n \r\n \r\n }\r\n\r\n {/* Item Breakdown */}\r\n {\r\n this.state.showBreakdown &&\r\n \r\n {this.renderProjectBoardModals(this.state.selectedBoard)}\r\n\r\n \r\n *5 days standard lead time\r\n
\r\n \r\n }\r\n\r\n \r\n )\r\n }\r\n }\r\n}\r\n\r\nexport default withRouter(Quote)","import React, { Component } from 'react'\r\nimport HeaderLogo from '../../components/header-logo/HeaderLogo'\r\nimport Header from '../../components/header/Header'\r\n\r\nconst FAQs = [\r\n {\r\n question: 'Can we meet customers DB ‘smoke seal’ requirements with Flexselect?',\r\n answer: 'AS/NZS3000 has a requirement of IP5X against the spread of smoke from a switchboard. Flexselect boards come in IP42 and IP66, the IP66 board would meet this requirement.'\r\n },\r\n {\r\n question: 'Are we able to offer a DB locking solution for Schools, Mines, and PWD locks with Flexselect?',\r\n answer: 'IP66 boards have an option of a ‘padlockable handle’ this way customers can use their own padlocks in the above situations.'\r\n }, {\r\n question: 'Do Flexselect boards offer a separate BMS section which does not require moving the escutcheon?',\r\n answer: 'Flexselect offer a polycarbonate enclosure on the side of the board for easy access. Board is predrilled but enclosure is supplied loose to avoid damage in transit.'\r\n }, {\r\n question: 'CanFlexselect boards be offered with NMI meters?',\r\n answer: 'Flexselect has 3 metering options, Dual meter, power meter (PM3255) and NMI certified meter (EM3255-NMI)'\r\n }, {\r\n question: 'Does Flexselect come in marine grade stainless steel?',\r\n answer: 'The standard rangeof Flexselect are offered in mild steelbut we also offer Flexselect in 316 Stainless Steel with a slightly longer lead time.'\r\n }, {\r\n question: 'Are Flexselect boards offered as61439.2 compliant?',\r\n answer: 'The Flexselect tool calculates watts loses and Ina as you load the board with breakers, this is only a small part of 61439.2 complianceso a certificate of compliance is supplied with the final drawings.'\r\n }, {\r\n question: 'Can Flexselect boards be offered with both 18mm and 27mm pitch breakers?',\r\n answer: 'Hybrid chassis (fits both 18mm and 27mm pitchbreakers) are an option in Flexselect.'\r\n }, {\r\n question: 'I need aboard on site next week, is this possible with Flexselect?',\r\n answer: 'The standard dispatch time for Flexselect boards is 5 days dependent on sheet metal and component availability.'\r\n }, {\r\n question: 'Are Isobar chassis and option in Flexselect?',\r\n answer: 'Schneider’s isolation chassis is available in Flexselect.'\r\n }, {\r\n question: 'I need 3x boards on site every week for the next 4 weeks for a total of 12x boards, is this order suitable for Flexselect?',\r\n answer: 'With Flexselect up to 20x boards can be ordered at a time. The first 4x boards will be dispatched in 5 days with the remainder of 8x boards dispatching over the following 3 weeks.Depending on stock availability.'\r\n }, {\r\n question: 'Do my Flexselect boards come with the standard 1 year Schneider warranty?',\r\n answer: 'As per Schneiders standard terms and conditions Flexselect boards come with1 year warranty.'\r\n }, {\r\n question: 'Is my Flexselect board supplied with a test report and certificate of compliance to 61439.2?',\r\n answer: 'All Flexselect boards are issued with a QR code on the outside of the door. Once the customer has scanned this code and request transfer of the digital asset,they will have access to the drawings, test repots, 61439.2 documentation and data sheets for all components supplied in the board.'\r\n }\r\n]\r\n\r\nconst RESIDENTIALFAQS = [\r\n {\r\n question: 'What are the benefits of using FlexSelect for loaded boards?',\r\n answer: ``\r\n },\r\n {\r\n question: 'Are the FlexSelect loaded boards supplied with complete wiring done?',\r\n answer: 'Clipsal by Schneider Electric only loads the breakers in the boards and connects the busbar to them as per the user’s selection. It is the responsibility of Licensed electrician to make sure that the products selected are suitable for their applications. Before powering up the board, a licensed electrician must also check all the busbar connections to make sure the connection hasn’t come loose during transportation and handling.'\r\n }, {\r\n question: 'What are recommended applications for FlexSelect residential?',\r\n answer: 'FlexSelect loaded boards under ‘Residential’ category are more suitable for applications where electrician needs multiple plastic enclosure with similar configuration. An example of that could be a big apartment building where the user might only have single digit variations of plastic enclosures.'\r\n }, {\r\n question: 'Is there any minimum order qty for ordering load centres using FlexSelect?',\r\n answer: 'Minimum order quantity of 30 boards only applies to the total number of boards in a project. Without a minimum qty of 30 boards in one project (hence in 1 order) the user can’t proceed to view the quote or place an order using FlexSelect residential. User might have different type of board configurations in a project but the total of these various configurations in a project must be equal to or more than 30.'\r\n }, {\r\n question: 'Are the circuit ID labels attached to the front cover of enclosure?',\r\n answer: 'No the circuit ID labels are not attached to the front cover of enclosure. If there are circuit ID labels inside the board commercial reference, then the same circuit ID labels are repacked inside the load centres. In some cases, the user might need to order extra circuit ID labels through their wholesaler or e-commerce partner.'\r\n }, {\r\n question: 'How do I know if the product that I am selecting is a Resi MAX or MAX9 product? ',\r\n answer: 'You can work this out by looking at the kA rating of the breakers when you click on ‘Add Breaker’ option. Resi MAX products are 4.5kA rated and MAX9 products are 6kA rated (see below image)'\r\n }, {\r\n question: 'What are the busbar options available for Clipsal RCBOs',\r\n answer: ''\r\n }, {\r\n question: 'What is the recommended product selection procedure/sequence for loaded boards in FlexSelect?',\r\n answer: ''\r\n }, {\r\n question: 'Is neutral terminal block added with top feeding busbar switching neutral?',\r\n answer: 'Yes, the neutral terminal block is added automatically to the product layout as soon as you choose top mounted busbar option for a row with main incomer switch. Please note that this neutral terminal block is a solid neutral link and doesn’t switch the neutral.'\r\n }, {\r\n question: 'What are the benefits of selecting extra poles when selecting busbars?',\r\n answer: 'When you are making your selections for busbars by clicking on ‘Busbar’ button, you will notice that there is an option of extra poles. By selecting the number of extra poles that you need, you can request a longer length of busbar that will overhang the unoccupied poles in that row of the board. This helps you to make your board future ready….if you need to add more RCBO’s in future then you can just remove the tooth cover and add the device.'\r\n }\r\n]\r\nexport class TechnicalInformation extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n isCommercial: true,\r\n selectedProjectTypeForCreation: 'commercial'\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n
\r\n \r\n
\r\n Technical Information\r\n \r\n \r\n \r\n \r\n Commercial \r\n
\r\n \r\n \r\n \r\n Residential \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n {this.state.isCommercial &&\r\n
\r\n
\r\n \r\n MAIN SWITCH\r\n \r\n \r\n
\r\n
\r\n Switch disconnector CVS250NA
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
\r\n
\r\n NSX100F TM-D (36kA at 415V) molded case circuit breaker
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
\r\n
\r\n NSX160F TM-D (36kA at 415V) molded case circuit breaker
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
\r\n
\r\n NSX250F TM-D (36kA at 415V) molded case circuit breaker
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
\r\n
\r\n \r\n POWER METERS\r\n \r\n \r\n
A9MEM3255-NMI \r\n
\r\n Electrical Parameters (kWh (4Q), kVArh, I, U, F, P, Q, S, PF)
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
METSEEMD461R \r\n
\r\n Dual load multifunction energy meter
\r\n
Technical Data Sheets \r\n
\r\n
\r\n
METSEPM3255 \r\n
\r\n 3-phase PM3200 DIN-mount Power meter (5A external CTs)
\r\n
Technical Data Sheets \r\n
\r\n
\r\n\r\n
\r\n \r\n RESIDUAL CIRCUIT DEVICES (RCBOS) – 30mA, 6kA or 10kA, C CURVE\r\n \r\n \r\n The single-phase iC60N (6kA) and iC60H (10kA) RCBO’s self-contained residual current device provides protection of final circuits:
\r\n\r\n \r\n protection against short circuits and cable overloads
\r\n\r\n \r\n The neutral is not interrupted when the device is tripped. Conforms to AS/NZS 61009.1
\r\n Product range \r\n \r\n \r\n\r\n
\r\n \r\n MINIATURE CIRCUIT BREAKERS (MCBS) – 6kA or 10kA, C CURVE\r\n \r\n \r\n iC60N (6kA) and iC60H (10kA) circuit breakers are multi-standard circuit breakers which combine the following functions:
\r\n \r\n circuit protection against short circuit currents
\r\n\r\n Product range \r\n \r\n \r\n
\r\n\r\n }\r\n\r\n {!this.state.isCommercial &&\r\n
\r\n
\r\n \r\n MAX9™ - The Ultimate residential solution with MAX performance.\r\n \r\n \r\n This optimum range covers wide range of circuit protection needs for both single phase and multi phase installations. It provides SLIM RCBOs with earth leakage sensitivity of 30mA and 10mA, Super Immune RCBOs, Main switches, Miniature circuit breakers (MCBs), Surge Protection Devices (SPD), Contactors, Energy Management by Wiser solution, Premium plastic enclosures with robust construction and generous wiring space and accessories to cover all your needs. Circuit breakers and RCBOs in this range are rated at short circuit breaking capacity of 6kA.\r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n Resi MAX™ - Everyday essential needs for residential circuit protection.\r\n \r\n \r\n The Clipsal Resi MAX™ range offers a variety of consumer switchboards, SLIM RCBOs, miniature circuit breakers (MCB), Surge protection device (SPD), safety switches (RCD), comb busbars and accessories. SLIM RCBOs and MCBs have short circuit breaking capacity rating of 4.5kA, it achieves a 6kA rating when combined with the HRC service fuse of up to 100A rating.\r\n
\r\n\r\n \r\n \r\n
\r\n }\r\n
\r\n
\r\n\r\n {this.state.isCommercial &&\r\n
\r\n
\r\n \r\n Frequently Asked questions\r\n \r\n \r\n
\r\n Learn how to configure and order your distribution boards
\r\n VIDEO \r\n \r\n
\r\n {FAQs.map((faq, index) => {\r\n return (\r\n \r\n
\r\n {faq.question}\r\n
\r\n
\r\n {faq.answer}\r\n
\r\n
\r\n
\r\n }\r\n\r\n {!this.state.isCommercial &&\r\n
\r\n
\r\n \r\n Frequently Asked questions\r\n \r\n \r\n
\r\n Learn how to configure and order your distribution boards
\r\n VIDEO \r\n \r\n
\r\n {RESIDENTIALFAQS.map((faq, index) => {\r\n if (index === 0) {\r\n return (\r\n \r\n
\r\n {faq.question}\r\n
\r\n
\r\n
\r\n
Some of the key benefits of using FlexSelect for loaded boards are:
\r\n
\r\n Flexibility of customizing the layout of devices in a board as per your preference \r\n Manage both chassis boards and loaded boards using FlexSelect gives the user the option of managing the complete project in one location \r\n Faster installation on site as the boards come loaded with breakers and busbars based on your selection \r\n Less packaging waste on-site to dispose of \r\n Faster turnaround on quotes for projects and delivery times of loaded boards \r\n \r\n
\r\n
\r\n
\r\n
\r\n {faq.question}\r\n
\r\n
\r\n
\r\n
You can work this out by looking at the kA rating of the breakers when you click on ‘Add Breaker’ option. Resi MAX products are 4.5kA rated and MAX9 products are 6kA rated (see below image)
\r\n
\r\n
\r\n
\r\n
In case of selecting surge protection, Resi MAX SPD 20kA maximum discharge capacity and MAX9 SPDs have 40kA maximum discharge capacity.
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {faq.question}\r\n
\r\n
\r\n
\r\n
There are 2 options for busbar selections for RCBOs:
\r\n
\r\n Top mounted busbar – This is MAX9 MAXBAR and it connects to all type of Clipsal RCBOs, it distributes both active & neutral to all RCBOs (no need for terminating flying neutral leads) and it can connect directly to the main incomer. \r\n Bottom mounted busbar – These are Resi MAX SLIM comb busbars and can only connect SLIM RCBOs together…doesn’t connect to other type of RCBOs. This busbar also distributes both active & neutral to the SLIM RCBOs but doesn’t connect to main switch. You will need to bring in the active and neutral feed to these busbars using right size cables and connectors. \r\n \r\n
\r\n
\r\n
\r\n
\r\n {faq.question}\r\n
\r\n
\r\n
\r\n
Ideally, we would recommend the below sequence for selecting products using FlexSelect for loaded boards:
\r\n
\r\n Choose the type (Surface/Flush) & size of your enclosure \r\n Select the main incomer type (Isolator switch or MCB), number of poles, and the ratings of the main incomer suitable for your application \r\n Decide if you need an SPD or not in your board \r\n Add breakers (MCB, RCD, RCBO, AFDD, etc.) to your board in your preferred location \r\n Add busbars (top or bottom connection) to all the rows of boards that you would like to connect to \r\n Add any ‘Additional items’ like contactors & DIN mounted socket outlets \r\n \r\n
\r\n
\r\n
\r\n
\r\n {faq.question}\r\n
\r\n
\r\n {faq.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}\r\n","import React, { Component } from 'react'\r\n\r\nexport class SvgLifeIsOnSchneiderElectric extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","import React, { Component } from 'react'\r\n\r\nexport class SvgChevronRight extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react'\r\nimport { SvgFlexSelectLogo } from '../svg/SvgFlexSelectLogo'\r\nimport { SvgLifeIsOnSchneiderElectric } from '../svg/SvgLifeIsOnSchneiderElectric'\r\nimport { SvgChevronLeft } from '../svg/SvgChevronLeft'\r\nimport { SvgChevronRight } from '../svg/SvgChevronRight'\r\nimport analyticsDataLayer from '../../services/AnalyticsDataLayer'\r\n\r\nexport class RegisterSide extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n totalSlides: 3,\r\n currentSlide: 0\r\n }\r\n }\r\n\r\n findOutMore = () => {\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: 'Find out more',\r\n cta_link: '',\r\n cta_location: 'Registration'\r\n })\r\n\r\n this.handleNextSlide()\r\n }\r\n\r\n handleNextSlide = () => {\r\n this.setState(prevState => ({\r\n currentSlide: prevState.currentSlide + 1\r\n }))\r\n }\r\n\r\n handlePrevSlide = () => {\r\n this.setState(prevState => ({\r\n currentSlide: prevState.currentSlide - 1\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 {this.state.slide} Streamline your projects with our digital tool. Effortlessly configure, price, and order custom distribution boards and load centres, anytime and anywhere.\r\n
\r\n \r\n
\r\n \r\n Find out more\r\n \r\n \r\n
\r\n
\r\n \r\n )}\r\n\r\n {this.state.currentSlide === 1 && (\r\n \r\n
\r\n
Start your FlexSelect Journey today
\r\n
\r\n Experience effortless configuration, quoting, and ordering \r\n Faster pricing: get instant indicative pricing and order at the click of a button \r\n Faster delivery: most selections produced in just 5 days \r\n Speedy installation: cut labour costs with loaded boards \r\n Minimise onsite packaging waste \r\n \r\n
\r\n
\r\n
\r\n
Commercial Highlights
\r\n
\r\n Create fully customisable distribution boards \r\n Layout and As-built drawings \r\n Range of metering options \r\n Faster installations \r\n \r\n
\r\n
\r\n
\r\n
Residential Highlights
\r\n
\r\n Peace of mind: 7-year warranty for MAX9 devices and enclosures \r\n Instant PDF layouts complete with bill of materials \r\n Choose between 4.5kA and 6kA with options for ResiMAX or MAX9 \r\n Speedy installation: pre-loaded boards with connected busbars for efficiency \r\n Project focused: only 30 boards required to process orders \r\n \r\n
\r\n
\r\n \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n Register \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {\r\n this.state.pageError !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.pageError}\r\n \r\n
\r\n }\r\n\r\n
\r\n
\r\n
\r\n \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 { Portal } from '../portal/Portal'\r\nimport { SvgLocation } from '../svg/SvgLocation'\r\nimport { apiWholesalerSearch } from '../../utils/apiCallsCommercial'\r\nimport { debounce } from 'lodash'\r\nexport class InputwholesalersLookUp extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n if (!!props.existingWholesalerData) {\r\n console.log(props.existingWholesalerData)\r\n this.state = {\r\n isOpen: false,\r\n isDirty: false,\r\n list: [],\r\n selectedBranchName: props.existingWholesalerData.WholesalerBranchName,\r\n selectedWholesalerBranchID: props.existingWholesalerData.WholesalerBranchID,\r\n latitude: null,\r\n longitude: null,\r\n isPending: false\r\n }\r\n } else {\r\n this.state = {\r\n isOpen: false,\r\n isDirty: false,\r\n list: [],\r\n selectedBranchName: '',\r\n selectedWholesalerBranchID: '',\r\n latitude: null,\r\n longitude: null,\r\n isPending: false\r\n }\r\n }\r\n }\r\n\r\n toggleFlyout = () => {\r\n this.setState({ isOpen: !this.state.isOpen })\r\n }\r\n\r\n handleSearch = () => {\r\n const term = document.getElementById('search-wholesalers-input').value\r\n const { latitude, longitude } = this.state\r\n this.setState({ isPending: true })\r\n\r\n apiWholesalerSearch({\r\n SearchText: term,\r\n Latitude: latitude,\r\n Longitude: longitude\r\n })\r\n .then(response => {\r\n this.setState({ list: response })\r\n })\r\n .catch(error => {\r\n window.alert(`Failed to fetch wholesalers: ${error.message}`)\r\n })\r\n .finally(() => {\r\n this.setState({ isDirty: true })\r\n this.setState({ isPending: false })\r\n })\r\n }\r\n\r\n handleGeoSearch = (e) => {\r\n if (!navigator.geolocation || (this.state.latitude != null && !this.state.longitude != null)) {\r\n this.handleSearch()\r\n return\r\n }\r\n\r\n navigator.geolocation.getCurrentPosition(position => {\r\n this.setState({ latitude: position.coords.latitude })\r\n this.setState({ longitude: position.coords.longitude })\r\n this.handleSearch()\r\n })\r\n }\r\n\r\n fetchWholesalers = debounce(this.handleSearch, 2000)\r\n\r\n render() {\r\n return (\r\n <>\r\n \r\n \r\n
{this.props?.placeholder || this.props?.label || 'Select and option'} \r\n {this.state.selectedBranchName !== '' &&
{this.state.selectedBranchName}
}\r\n
\r\n \r\n \r\n {this.props?.label || 'Select and option'} \r\n
\r\n\r\n {this.state.isOpen && (\r\n \r\n
\r\n
\r\n
Search Wholesalers \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Near Me\r\n \r\n \r\n \r\n \r\n
\r\n\r\n {this.state.isDirty && this.state.list.length === 0 && (\r\n
\r\n
No wholesalers match your search. Please try again.
\r\n
\r\n )}\r\n\r\n {this.state.list.length > 0 && (\r\n
\r\n {this.state.list.map((item) => (\r\n
{ \r\n this.setState({ selectedBranchName: item.WholesalerBranchName, selectedWholesalerBranchID: item.WholesalerBranchID }); this.toggleFlyout() \r\n }}>\r\n \r\n
{item.WholesalerBranchName}
\r\n
{item.WholesalerBranchAddress}, {item.WholesalerBranchSuburb}, {item.WholesalerBranchPostcode} {item.WholesalerBranchState} \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 { Link } from 'react-router-dom'\r\nimport { RegisterSide } from '../../components/registerSide/RegisterSide'\r\nimport { InputwholesalersLookUp } from '../../components/inputwholesalersLookUp/InputwholesalersLookUp'\r\nimport { apiRegisterUser } from '../../utils/apiCalls'\r\nimport analyticsDataLayer from '../../services/AnalyticsDataLayer'\r\nimport ReCAPTCHA from 'react-google-recaptcha'\r\n\r\nconst { CONST } = require('../../CONST')\r\n\r\nconst SECTIONS = {\r\n profileSection: 0,\r\n businessSection: 1,\r\n wholesalersSection: 2,\r\n thankYouSection: 3\r\n}\r\n\r\nconst recaptchaRef = React.createRef()\r\nconst recaptchaRefElectrician = React.createRef()\r\n\r\nexport class Registration extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n queryParams: {},\r\n isLoading: false,\r\n isFinalStep: false,\r\n currentSection: SECTIONS.profileSection\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const urlParams = new URLSearchParams(window.location.search)\r\n const queryParams = {}\r\n for (const [key, value] of urlParams.entries()) {\r\n queryParams[key] = value\r\n }\r\n this.setState({ queryParams })\r\n }\r\n\r\n validateForm = (formId) => {\r\n const form = document.getElementById(formId)\r\n if (form.dataset.submitIntent === 'false') return false\r\n\r\n const formElements = form.elements\r\n let formIsValid = true\r\n\r\n for (let i = 0; i < formElements.length; i++) {\r\n const element = formElements[i]\r\n if (![\"INPUT\", \"SELECT\"].includes(element.nodeName)) continue\r\n\r\n const elementId = element.id\r\n const elementLabel = document.querySelector(`label[for=\"${elementId}\"]`)?.textContent || 'Field'\r\n const elementValue = element.value\r\n const elementError = document.querySelector(`[data-error-for=\"${elementId}\"]`)\r\n\r\n if (element.type === 'checkbox') {\r\n if (element.required && !element.checked) {\r\n formIsValid = false\r\n elementError.style.display = 'block'\r\n } else {\r\n elementError.style.display = 'none'\r\n }\r\n } else {\r\n if (element.required && elementValue.trim() === '') {\r\n elementError.textContent = elementLabel + ' is required'\r\n formIsValid = false\r\n } else if (element.type === 'email' && !this.validateEmail(elementValue)) {\r\n elementError.textContent = 'Please enter a valid email address'\r\n formIsValid = false\r\n } else if (element.type === 'tel' && element.dataset?.postal === 'true' && !this.validatePostalCode(elementValue)) {\r\n elementError.textContent = 'Please enter a valid postal code'\r\n formIsValid = false\r\n } else if (element.type === 'tel' && ! element.dataset?.postal && !this.validatePhone(elementValue)) {\r\n elementError.textContent = 'Please enter a valid phone number'\r\n formIsValid = false\r\n } else {\r\n elementError.textContent = ''\r\n }\r\n\r\n elementError.style.display = !formIsValid ? 'block' : 'none'\r\n }\r\n }\r\n\r\n return formIsValid\r\n }\r\n\r\n validateEmail = (email) => {\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\r\n return emailRegex.test(email)\r\n }\r\n\r\n validatePhone = (phone) => {\r\n const phoneRegex = /^\\d{7,20}$/\r\n return phoneRegex.test(phone)\r\n }\r\n\r\n validatePostalCode = (postalCode) => {\r\n const postalCodeRegex = /^\\d{2,4}$/\r\n return postalCodeRegex.test(postalCode)\r\n }\r\n \r\n submitProfileForm = (event) => {\r\n event.preventDefault()\r\n event.target.dataset.submitIntent = 'true'\r\n const isValid = this.validateForm('profileForm')\r\n\r\n if (!isValid) return\r\n\r\n if (this.state.queryParams?.type !== 'Electrician') {\r\n this.setState({ isFinalStep: true })\r\n }\r\n\r\n if (this.state.queryParams?.type === 'Electrician') {\r\n analyticsDataLayer.registrationStep(2, 3)\r\n } else {\r\n analyticsDataLayer.registrationStep(2, 2)\r\n }\r\n \r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: 'Next Step',\r\n cta_link: '',\r\n cta_location: 'Registration'\r\n })\r\n\r\n this.setState({ currentSection: SECTIONS.businessSection })\r\n }\r\n \r\n submitBusinessForm = (event) => {\r\n event.preventDefault()\r\n event.target.dataset.submitIntent = 'true'\r\n const isValid = this.validateForm('businessForm')\r\n\r\n if (!isValid) return\r\n\r\n if (this.state.queryParams?.type === 'Electrician') {\r\n analyticsDataLayer.registrationStep(3, 3)\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: 'Next Step',\r\n cta_link: '',\r\n cta_location: 'Registration'\r\n })\r\n\r\n this.setState({ currentSection: SECTIONS.wholesalersSection })\r\n } else {\r\n analyticsDataLayer.ctaButtonClick({\r\n cta_name: 'Register',\r\n cta_link: '',\r\n cta_location: 'Registration'\r\n })\r\n\r\n const recaptchaValue = recaptchaRef.current.getValue()\r\n if (!recaptchaValue) {\r\n window.alert('Please complete the reCAPTCHA challenge')\r\n return\r\n }\r\n\r\n this.registerUser(recaptchaValue)\r\n }\r\n }\r\n \r\n submitWholesalersForm = (event) => {\r\n event.preventDefault()\r\n event.target.dataset.submitIntent = 'true'\r\n const isValid = this.validateForm('wholesalersForm')\r\n\r\n if (!isValid) return\r\n\r\n const recaptchaValue = recaptchaRefElectrician.current.getValue()\r\n if (!recaptchaValue) {\r\n window.alert('Please complete the reCAPTCHA challenge')\r\n return\r\n }\r\n\r\n this.registerUser(recaptchaValue)\r\n }\r\n\r\n registerUser = (recaptchaValue) => {\r\n this.setState({ isLoading: true })\r\n let registerRequest = {\r\n \"firstName\": '',\r\n \"lastName\": '',\r\n \"email\": '',\r\n \"phoneNumber\": '',\r\n \"businessName\": '',\r\n \"businessPhoneNumber\": '',\r\n \"businessWebsite\": '',\r\n \"accountId\": '',\r\n \"businessPostalAddress\": '',\r\n \"businessPostalPostCode\": '',\r\n \"businessPostalCity\": '',\r\n \"businessPostalState\": '',\r\n \"userType\": '',\r\n \"branchId\": 0,\r\n \"preferredWholesaler1Id\": 0,\r\n \"preferredWholesaler2Id\": 0,\r\n \"preferredWholesaler3Id\": 0,\r\n \"userSubscriptionIndustryNews\": false,\r\n \"businessAbnacnnumber\": '',\r\n \"isBusinessABNACNMatchingWholesaler\": false,\r\n \"acceptedTermsAndConditions\": false,\r\n \"UseRecaptchaResponse\": recaptchaValue\r\n }\r\n\r\n // Read data from the form and populate the registerRequest object\r\n registerRequest.firstName = document.getElementById('register-first-name').value\r\n registerRequest.lastName = document.getElementById('register-last-name').value\r\n registerRequest.email = document.getElementById('register-email').value\r\n registerRequest.phoneNumber = document.getElementById('register-phone').value\r\n registerRequest.businessName = document.getElementById('register-business-name').value\r\n registerRequest.businessPhoneNumber = document.getElementById('register-business-phone').value\r\n registerRequest.businessWebsite = document.getElementById('register-business-website').value\r\n registerRequest.accountId = document.getElementById('register-business-account-number')?.value || ''\r\n registerRequest.businessPostalAddress = document.getElementById('register-business-address').value\r\n registerRequest.businessPostalPostCode = document.getElementById('register-business-postal-code').value\r\n registerRequest.businessPostalCity = document.getElementById('register-business-suburb').value\r\n registerRequest.businessPostalState = document.getElementById('register-business-state').value\r\n registerRequest.userType = this.state.queryParams?.type\r\n registerRequest.branchId = 0\r\n\r\n const preferredWholesaler1Id = document.getElementById('register-wholesaler-1').value\r\n const preferredWholesaler2Id = document.getElementById('register-wholesaler-2').value\r\n const preferredWholesaler3Id = document.getElementById('register-wholesaler-3').value\r\n\r\n if (preferredWholesaler1Id) registerRequest.preferredWholesaler1Id = parseInt(preferredWholesaler1Id)\r\n if (preferredWholesaler2Id) registerRequest.preferredWholesaler2Id = parseInt(preferredWholesaler2Id)\r\n if (preferredWholesaler3Id) registerRequest.preferredWholesaler3Id = parseInt(preferredWholesaler3Id)\r\n\r\n registerRequest.userSubscriptionIndustryNews = document.getElementById('keep-up-to-date').checked\r\n registerRequest.businessAbnacnnumber = document.getElementById('register-business-ABN-ACN')?.value || ''\r\n registerRequest.isBusinessABNACNMatchingWholesaler = false\r\n registerRequest.acceptedTermsAndConditions = document.getElementById('register-terms').checked\r\n\r\n apiRegisterUser(registerRequest)\r\n .then(() => {\r\n analyticsDataLayer.registrationComplete()\r\n this.setState({ currentSection: SECTIONS.thankYouSection })\r\n })\r\n .catch(error => {\r\n // Since we made a call with reCaptcha and it passed the test, in case of any error, we can't pass the same\r\n // reCaptcha value as it won't be valid, so we need to restart it if an error occurs\r\n // Wholesaler section means that electrician is selecting their preferred wholesalers which uses different reCaptcha\r\n if (this.state.currentSection === SECTIONS.wholesalersSection) {\r\n recaptchaRefElectrician.current.reset()\r\n } else {\r\n recaptchaRef.current.reset()\r\n }\r\n \r\n window.alert(`Registration failed: ${typeof error === 'object' ? error.message : error}`)\r\n })\r\n .finally(() => {\r\n this.setState({ isLoading: false })\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
\r\n
\r\n
\r\n Back\r\n \r\n \r\n
\r\n Let’s grab some details\r\n \r\n
\r\n
\r\n 1 \r\n Profile \r\n
\r\n
\r\n 2 \r\n Business Details \r\n
\r\n {/* */}\r\n {this.state.queryParams?.type === 'Electrician' && (\r\n
\r\n 3 \r\n Select Wholesalers \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n\r\n {/* */}\r\n
\r\n
\r\n
{ this.setState({ currentSection: SECTIONS.profileSection }) }}\r\n >\r\n \r\n Back\r\n \r\n \r\n \r\n
\r\n Tell us about your business\r\n \r\n
\r\n
\r\n 1 \r\n Profile \r\n
\r\n
\r\n 2 \r\n Business Details \r\n
\r\n {/* */}\r\n {this.state.queryParams?.type === 'Electrician' && (\r\n
\r\n 3 \r\n Select Wholesalers \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n\r\n {/* */}\r\n \r\n\r\n {/* */}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Thanks for Registering \r\n \r\n\r\n
\r\n Your registration is awaiting approval.\r\n
\r\n\r\n
\r\n We need to approve your account before you will have access. This can take up to two business days.\r\n
\r\n \r\n
\r\n
\r\n Back to Home\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
au.estimating@se.com `,\r\n isOutOfStock: true\r\n })\r\n } else if (availabilityDataForSelectedBreaker.IsLowStock) {\r\n this.setState({\r\n validationMessage: 'Low stock, longer lead times may apply',\r\n isOutOfStock: false\r\n })\r\n } else {\r\n this.setState({ validationMessage: '', isOutOfStock: false })\r\n }\r\n }\r\n })\r\n }\r\n\r\n\r\n render() {\r\n // Setup the business logic\r\n this.logic = new BreakerDetailsFormBusinessLogic(this.props.breakerOptions, this.props.breakerOptionData, this.state.breakerDetails, this.props.isHybridBoard, this.props.breakingCapacity)\r\n\r\n const breakerOptions = this.props.breakerOptions\r\n const breakerDetails = this.state.breakerDetails\r\n const breakingCapacity = this.props.breakingCapacity\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n item.breakingCapacity.includes(breakingCapacity))}\r\n selectedValue={breakerDetails.TypeCode}\r\n selecteCallback={value => { this.optionSelectedCall(value, 'TypeCode') }}\r\n enabledOptions={this.logic.getEnableOptions('TypeCode')} />\r\n
\r\n\r\n
\r\n { this.optionSelectedCall(value, 'PoleCount') }}\r\n enabledOptions={this.logic.getEnableOptions('PoleCount')} />\r\n
\r\n\r\n
\r\n { this.optionSelectedCall(value, 'PitchPoleSize') }}\r\n enabledOptions={this.logic.getEnableOptions('PitchPoleSize')} />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n { this.optionSelectedCall(value, 'CurrentRating') }}\r\n layout={'radio-button-row'}\r\n enabledOptions={this.logic.getEnableOptions('CurrentRating')} />\r\n
\r\n
\r\n
\r\n\r\n {\r\n this.state.validationMessage &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n
\r\n {/* If the user specified Current Rating which is the very last input to choose, then enable Save/Edit button */}\r\n { this.updateCall() }}\r\n disabled={(this.state.breakerDetails.CurrentRating === null && this.state.validationMessage !== '') || this.state.isOutOfStock}\r\n >\r\n \r\n {!this.props.breaker && Add Breaker }\r\n {this.props.breaker && Edit Breaker }\r\n \r\n \r\n
\r\n
\r\n
{ this.props.rowIndex } \r\n\r\n
\r\n \r\n {\r\n isActive ?\r\n Release to drop \r\n :\r\n Slot Available \r\n }\r\n \r\n \r\n Drag and drop a breaker from your library \r\n \r\n
\r\n
\r\n
\r\n
\r\n Chassis { index }\r\n \r\n
\r\n { this.renderTab(1, this.props.chassis1filled) }\r\n { this.renderTab(2, this.props.chassis2filled) }\r\n
\r\n )\r\n }\r\n}\r\n","import React from 'react'\r\nimport {isOdd, toggleArrayItem} from '../../../utils/helpers'\r\nimport ChassisBreaker from './ChassisBreaker'\r\nimport ChassisEmptyPole from './ChassisEmptyPole'\r\nimport ChassisSelection from './ChassisSelection'\r\n\r\nexport default class ChassisBoard extends React.Component {\r\n\r\n constructor() {\r\n super()\r\n // Bind this to element function calls for better performance / practise\r\n // - ref: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md\r\n this.deleteCall = this.deleteCall.bind(this)\r\n this.updateBrekerChassisNote = this.updateBrekerChassisNote.bind(this)\r\n\r\n // Internal states to track what mode the selections are\r\n this.state = {\r\n notesOpen: []\r\n }\r\n }\r\n\r\n clickCall(index) {\r\n this.props.clickedCallback(index)\r\n }\r\n\r\n deleteCall(chassisIndex, itemId) {\r\n this.props.deleteCallback(chassisIndex, itemId)\r\n }\r\n\r\n updateBrekerChassisNote(positionIndex, note) {\r\n this.props.updateBrekerChassisNote(positionIndex, note)\r\n }\r\n\r\n updateNotesCall(positionIndex) {\r\n const noteInput = this.refs['inputNotes-' + positionIndex].value\r\n this.props.updateNotesCallback(positionIndex, noteInput)\r\n this.togglelNotesCall(positionIndex)\r\n }\r\n\r\n togglelNotesCall(positionIndex) {\r\n this.setState({\r\n notesOpen: toggleArrayItem(this.state.notesOpen, positionIndex)\r\n })\r\n }\r\n\r\n renderRows() {\r\n const rowCounts = Math.floor(this.props.poles / 2)\r\n const rows = []\r\n for (let i = 0; i < rowCounts; i++) {\r\n // Find the row color based on the passed in prop\r\n const rowIndex = (i * 2 + 1) + this.props.indexOffset\r\n const rightIndex = rowIndex + 1\r\n const rightPoleDisabled = (this.props.disabledIndex2 && rightIndex === (this.props.hybridPoleCount + 2))\r\n const isLarge = this.props.hybridPoleCount ? (rightIndex <= this.props.hybridPoleCount) : false\r\n\r\n // Check if there is a breaker that is positioned on this index\r\n const leftBoardBreaker = this.props.breakers.find(item => item.ChassisPositionIndex === rowIndex)\r\n const rightBoardBreaker = this.props.breakers.find(item => item.ChassisPositionIndex === rightIndex)\r\n\r\n // Pushes in a row into the array to be rendered out\r\n rows.push(\r\n \r\n { !leftBoardBreaker ?\r\n \r\n { rowIndex } \r\n \r\n { this.renderBreakers(rowIndex, isLarge) }\r\n
\r\n }\r\n\r\n { !rightBoardBreaker && !rightPoleDisabled ?\r\n \r\n {\r\n rightPoleDisabled ?\r\n \r\n
{ rightIndex } \r\n
\r\n \r\n { this.props.disabledIndex2ComponentName } \r\n \r\n
\r\n
\r\n { rightIndex } \r\n \r\n { this.renderBreakers(rightIndex, isLarge) }\r\n
\r\n }\r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n return rows\r\n }\r\n\r\n renderNote(index) {\r\n const noteItem = this.props.breakers.find(item => item.ChassisPositionIndex === index)\r\n if (!noteItem) {\r\n return\r\n }\r\n\r\n const isOpen = this.state.notesOpen.includes(index)\r\n return (\r\n \r\n {isOpen &&\r\n
e.stopPropagation()}>\r\n
\r\n
\r\n Cross Icon\r\n
\r\n
\r\n Tick Icon\r\n
\r\n
\r\n }\r\n {!isOpen && !noteItem.BreakerCircuitLabel &&\r\n
\r\n Plus Icon\r\n
\r\n }\r\n {!isOpen && noteItem.BreakerCircuitLabel &&\r\n
\r\n Pen Icon\r\n
\r\n }\r\n
\r\n \r\n Slot Available \r\n \r\n \r\n Drag and drop a breaker from your library \r\n \r\n
\r\n )\r\n }\r\n\r\n renderBreakers(index, isLarge = false) {\r\n if (!this.props.breakers || !this.props.breakers.length) { \r\n return this.renderEmptySlot()\r\n }\r\n\r\n // Check if there is a breaker that is positioned on this index\r\n const boardBreaker = this.props.breakers.find(item => item.ChassisPositionIndex === index)\r\n if (!boardBreaker) { \r\n return this.renderEmptySlot()\r\n }\r\n const breakerObj = this.props.breakerData.find(dataItem => dataItem.ItemID === boardBreaker.BreakerTypeItemID)\r\n const displayCode = boardBreaker.ParentBreakerCurrentRating ? `${breakerObj.DrawingDesc}-${boardBreaker.ParentBreakerCurrentRating}A` : breakerObj.DrawingDesc\r\n // Render the breaker if we found one in this index position\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.props.remaining } Remaining\r\n
\r\n
\r\n\r\n
\r\n
\r\n { this.props.powerLossPercentage.toFixed(2) }% Component Thermal Losses \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n {/* */}\r\n
\r\n { this.renderRows() }\r\n
\r\n
\r\n
\r\n
\r\n
{ this.props.usedCount } \r\n
\r\n \r\n
\r\n { this.props.drawingDesc }\r\n\r\n {\r\n this.props.isDisabled &&\r\n Cannot be fitted on to this board
\r\n }\r\n \r\n
\r\n
{ this.handleDeletingBreaker(this.props.ItemID) } }>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {!this.props.isDragAndDropEnabled && !this.props.isDisabled &&\r\n
\r\n
\r\n }\r\n\r\n { !this.props.isDisabled && \r\n
{ this.handleBreakerAutoAdd(this.props.ItemID) } }>\r\n \r\n \r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n
Loose Items {this.getTotalSelectedQuantity()} \r\n \r\n \r\n \r\n \r\n Save & close\r\n \r\n \r\n \r\n
\r\n
Please note: Loose items will be delivered with the board, However they won’t come fitted/mounted to the board.
\r\n
\r\n\r\n {this.props.partsList.map(opt => {\r\n const selectedQty = this.getPartSelectedQty(opt.ItemID)\r\n\r\n const availabilityDataForSelectedBreaker = this.props.commercialAllPartsAvailable.find(item => item.ItemCode === opt.BOMReference)\r\n let validationMessage = ''\r\n if (!availabilityDataForSelectedBreaker?.IsInStock) {\r\n validationMessage = `${opt.Description} is out of stock. Please, contact
au.estimating@se.com `\r\n } else if (availabilityDataForSelectedBreaker?.IsLowStock) {\r\n validationMessage = 'Low stock, longer lead times may apply'\r\n console.log('availabilityDataForSelectedBreaker', availabilityDataForSelectedBreaker)\r\n } else {\r\n validationMessage = ''\r\n }\r\n\r\n return (\r\n
\r\n {\r\n (opt.BOMReference === 'LBASE2GALBK' || opt.BOMReference === 'LBASE3GALIP66') && selectedQty > 0 &&\r\n
\r\n \r\n \r\n \r\n Bottom gland plate will be fitted inside the board and not removable\r\n \r\n
\r\n }\r\n\r\n
\r\n
\r\n {opt.Description}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {selectedQty}\r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {validationMessage &&\r\n
\r\n \r\n \r\n
\r\n }\r\n
\r\n )\r\n })}\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Loading \r\n
\r\n
\r\n )\r\n }\r\n\r\n // Display loading only when adding the first breaker\r\n if (this.state.isAddingBreaker.length > 0 && breaker === 0) {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n Adding Breaker \r\n
\r\n
\r\n )\r\n }\r\n\r\n const boardData = this.getCurrentBoardData()\r\n const editingFav = this.state.editedBreaker.isFav\r\n const assemblyPowerLossePercentage = this.state.board.MaxAssemblyPowerLoss > 0 ? (this.state.board.TotalAssemblyPowerLoss * 100 / this.state.board.MaxAssemblyPowerLoss) : 0\r\n const assemblyCurrentPercentage = this.state.board.MaxCurrent > 0 ? (this.state.board.TotalCurrent * 100 / this.state.board.MaxCurrent) : 0\r\n\r\n return (\r\n \r\n {\r\n this.state.showDragNDropTutorial &&\r\n
\r\n \r\n }\r\n\r\n {\r\n this.state.isBreakerModalOpen &&\r\n
this.closeBreakerModal()}>\r\n\r\n \r\n
0 ? ' is-recalculating' : '')}>\r\n
Assembly Performance \r\n
\r\n
100 ? ' is-error' : '')}>\r\n
\r\n {assemblyPowerLossePercentage.toFixed(2)}% Max. Thermal Losses \r\n
\r\n
\r\n
\r\n
\r\n\r\n
100 ? ' is-error' : '')}>\r\n
\r\n {assemblyCurrentPercentage.toFixed(2)}% Max. Current \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n {\r\n this.state.board.MaxThermalLossesDescription !== null &&\r\n
{this.state.board.MaxThermalLossesDescription}
\r\n }\r\n
\r\n
\r\n\r\n
\r\n Based on maximum loading at the tee-offs\r\n
\r\n
\r\n\r\n
\r\n {\r\n this.state.board.LoadFactorDescription !== '' && this.state.board.LoadFactorStatusColour === \"red\" &&\r\n
\r\n \r\n \r\n \r\n {this.state.board.LoadFactorDescription}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.board.LoadFactorDescription !== '' && this.state.board.LoadFactorStatusColour === \"orange\" &&\r\n
\r\n \r\n \r\n \r\n {this.state.board.LoadFactorDescription}\r\n \r\n
\r\n }\r\n
\r\n
\r\n\r\n
\r\n
\r\n {\r\n this.state.pageInfo !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.pageInfo}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.apiError !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.apiError}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.displayMaxBoardLimitReached &&\r\n
\r\n \r\n \r\n \r\n You have reached the maximum number of boards per project and cannot ADD or COPY anymore.\r\n \r\n
\r\n }\r\n\r\n {/* {\r\n this.state.shouldDisplayLooseOptionPlinthMessage &&\r\n
\r\n \r\n \r\n \r\n Bottom gland plate will be fitted inside the board and not removable.\r\n \r\n
\r\n } */}\r\n
\r\n\r\n
\r\n
\r\n\r\n 0 && this.state.board.MaxChassisPowerLoss > 0 ?\r\n ((this.state.board.PowerLossChassis2 / this.state.board.MaxChassisPowerLoss) * 100) : 0\r\n )\r\n :\r\n (this.state.board.PowerLossChassis1 > 0 && this.state.board.MaxChassisPowerLoss > 0 ?\r\n ((this.state.board.PowerLossChassis1 / this.state.board.MaxChassisPowerLoss) * 100) : 0\r\n )\r\n }\r\n powerLossCheckSuccess={this.state.selectedChassisIndex === 2 ? this.state.board.Chassis2PowerLossCheckSuccess : this.state.board.Chassis1PowerLossCheckSuccess}\r\n />\r\n
\r\n
\r\n
\r\n
{\r\n this.setState({ board: updatedBoardData })\r\n }}\r\n projectID={this.state.projectID}\r\n />\r\n }\r\n \r\n\r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(ConfigChassis)","import React from 'react'\r\nimport cloneDeep from 'lodash.clonedeep'\r\nimport RadioObjectGroup from '../../radio-object-group/RadioObjectGroup'\r\n\r\nexport default class BreakerDetailsFormContainerResidential extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n // Internal states that no one else needs to know about, holds info on the selection options\r\n this.initStates(this.props)\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!this.props.breaker && !nextProps.breaker) {\r\n return\r\n }\r\n\r\n if (!this.props.breaker || !nextProps.breaker || this.props.breaker.ItemID !== nextProps.breaker.ItemID) {\r\n this.initStates(nextProps, true)\r\n }\r\n }\r\n\r\n initStates(propsData, useSetState = false) {\r\n // const existingBreaker = propsData.breaker ? propsData.breakerOptionData.find(item => item.ItemID === propsData.breaker.BreakerTypeItemID) : null\r\n const updatedState = {\r\n breakerDetails: {\r\n TypeOfDevice: null,\r\n NumberOfPoles: null,\r\n CurrentRating: null\r\n },\r\n validationMessage: '',\r\n residentialAllPartsAvailable: propsData.residentialAllPartsAvailable,\r\n }\r\n if (useSetState) {\r\n this.setState(updatedState)\r\n } else {\r\n this.state = updatedState\r\n }\r\n }\r\n\r\n createCall() {\r\n const finalSelections = cloneDeep(this.state.breakerDetails)\r\n const selectedBreaker = this.props.breakerOptionData.find(breaker => {\r\n return breaker.TypeOfDevice === finalSelections.TypeOfDevice &&\r\n breaker.NumberOfPoles === finalSelections.NumberOfPoles &&\r\n breaker.CurrentRating === finalSelections.CurrentRating\r\n })\r\n\r\n if (selectedBreaker === undefined) {\r\n this.setState({ validationMessage: 'There was an error finding a breaker, please contact the administrator of the website.' })\r\n return\r\n }\r\n\r\n this.props.createCallback(selectedBreaker.ItemID)\r\n }\r\n\r\n // Update the selected option value in local state\r\n optionSelectedCall(value, key) {\r\n const updatebreaker = cloneDeep(this.state.breakerDetails)\r\n updatebreaker[key] = value\r\n\r\n if (key === 'PoleType') updatebreaker['CurrentRating'] = null\r\n if (key === 'TypeOfDevice') {\r\n updatebreaker['CurrentRating'] = null\r\n updatebreaker['NumberOfPoles'] = null\r\n\r\n // Some devices have only one option for NumberOfPoles, in that case we select it by default\r\n const availableValues = this.getNumberOfPolesEnabledOptions(value)\r\n if (availableValues.length === 1) {\r\n updatebreaker['NumberOfPoles'] = availableValues[0]\r\n }\r\n }\r\n\r\n this.setState({ breakerDetails: updatebreaker }, () => {\r\n if (this.state.breakerDetails.CurrentRating !== null) {\r\n const finalSelections = cloneDeep(this.state.breakerDetails)\r\n const selectedBreaker = this.props.breakerOptionData.find(breaker => {\r\n return breaker.TypeOfDevice === finalSelections.TypeOfDevice &&\r\n breaker.NumberOfPoles === finalSelections.NumberOfPoles &&\r\n breaker.CurrentRating === finalSelections.CurrentRating\r\n })\r\n\r\n const availabilityDataForSelectedBreaker = this.state.residentialAllPartsAvailable.find(item => item.ItemCode === selectedBreaker.Reference)\r\n if (!availabilityDataForSelectedBreaker.IsInStock) {\r\n this.setState({\r\n validationMessage: `${selectedBreaker.Description} is out of stock. Please, contact au.estimating@se.com `,\r\n isOutOfStock: true\r\n })\r\n } else if (availabilityDataForSelectedBreaker.IsLowStock) {\r\n this.setState({\r\n validationMessage: 'Low stock, longer lead times may apply',\r\n isOutOfStock: false\r\n })\r\n } else {\r\n this.setState({ validationMessage: '', isOutOfStock: false })\r\n }\r\n }\r\n })\r\n }\r\n\r\n getTypeOfDeviceEnabledOptions() {\r\n // this.props.incomerPhase // Single Phase, 2 Phase, 3 Phase\r\n let availableValues = []\r\n\r\n // TODO: this is based on the data provided from a spread sheet and how we store it in the DB, it works, but will be good to make it\r\n // better in the database, so we can perform more secure, not string based, checks\r\n // NOTE: this is not DRY, but very easy to read with very good debug feedback, it's prefered to leave it like this to now make a future \r\n // developer loose time trying to understand the logic, but feel free if you think it can ba slightly writte in a more elegant way\r\n console.warn('Explanation of why type of the breakers where enabled')\r\n this.props.breakerOptionData.forEach(breakerOption => {\r\n if (this.props.incomerPhase === 'Single Phase' && breakerOption.IncomerPhase === 'Single, 2 or 3 phase') {\r\n if (availableValues.indexOf(breakerOption.TypeOfDevice) === -1) {\r\n availableValues.push(breakerOption.TypeOfDevice)\r\n console.log('The incomer phase of the board is \"Single Phase\", enabling breaker type: \"' + breakerOption.TypeOfDevice + '\", because its IncomerPhase is: \"' + breakerOption.IncomerPhase + '\" and skipping further checks if that type of device should be enabled. If this breaker type should not be enabled, then please review the data coming from the spreadsheet provided and database values imported from that spreadsheet.')\r\n console.log(breakerOption)\r\n }\r\n }\r\n\r\n if (this.props.incomerPhase === '2 Phase' && breakerOption.IncomerPhase.indexOf('2 or 3 phase') > -1) {\r\n if (availableValues.indexOf(breakerOption.TypeOfDevice) === -1) {\r\n availableValues.push(breakerOption.TypeOfDevice)\r\n console.log('The incomer phase of the board is \"2 Phase\", enabling breaker type: \"' + breakerOption.TypeOfDevice + '\", because its IncomerPhase is: \"' + breakerOption.IncomerPhase + '\" and skipping further checks if that type of device should be enabled. If this breaker type should not be enabled, then please review the data coming from the spreadsheet provided and database values imported from that spreadsheet.')\r\n console.log(breakerOption)\r\n }\r\n }\r\n\r\n if (this.props.incomerPhase === '3 Phase' && (breakerOption.IncomerPhase.indexOf('2 or 3 phase') > -1 || breakerOption.IncomerPhase === '3 phase')) {\r\n if (availableValues.indexOf(breakerOption.TypeOfDevice) === -1) {\r\n availableValues.push(breakerOption.TypeOfDevice)\r\n console.log('The incomer phase of the board is \"3 Phase\", enabling breaker type: \"' + breakerOption.TypeOfDevice + '\", because its IncomerPhase is: \"' + breakerOption.IncomerPhase + '\" and skipping further checks if that type of device should be enabled. If this breaker type should not be enabled, then please review the data coming from the spreadsheet provided and database values imported from that spreadsheet.')\r\n console.log(breakerOption)\r\n }\r\n }\r\n })\r\n\r\n return availableValues\r\n }\r\n\r\n getNumberOfPolesEnabledOptions(typeOfDevice) {\r\n let availableValues = []\r\n\r\n this.props.breakerOptionData.forEach(breakerOption => {\r\n if (breakerOption.TypeOfDevice === typeOfDevice) {\r\n if (availableValues.indexOf(breakerOption.NumberOfPoles) === -1) {\r\n availableValues.push(breakerOption.NumberOfPoles)\r\n }\r\n }\r\n })\r\n\r\n return availableValues\r\n }\r\n\r\n getCurrentRatingEnabledOptions() {\r\n let availableValues = []\r\n\r\n this.props.breakerOptionData.forEach(breakerOption => {\r\n if (breakerOption.TypeOfDevice === this.state.breakerDetails.TypeOfDevice &&\r\n breakerOption.NumberOfPoles === this.state.breakerDetails.NumberOfPoles) {\r\n if (availableValues.indexOf(breakerOption.CurrentRating) === -1) {\r\n availableValues.push(breakerOption.CurrentRating)\r\n }\r\n }\r\n })\r\n\r\n return availableValues\r\n }\r\n\r\n render() {\r\n const breakerOptions = this.props.breakerOptions\r\n const breakerDetails = this.state.breakerDetails\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n this.optionSelectedCall(value, 'TypeOfDevice')}\r\n layout={\"layout-50 radio-button-row\"}\r\n enabledOptions={this.getTypeOfDeviceEnabledOptions()}\r\n />\r\n
\r\n\r\n
\r\n this.optionSelectedCall(value, 'NumberOfPoles')}\r\n layout={\"layout-auto radio-button-row\"}\r\n enabledOptions={this.getNumberOfPolesEnabledOptions(this.state.breakerDetails.TypeOfDevice)}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n this.optionSelectedCall(value, 'CurrentRating')}\r\n layout={\"radio-button-row\"}\r\n enabledOptions={this.getCurrentRatingEnabledOptions()}\r\n />\r\n
\r\n
\r\n
\r\n\r\n {\r\n this.state.validationMessage &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n
\r\n {/* If the user specified Current Rating which is the very last input to choose, then enable Save/Edit button */}\r\n { this.createCall() }} disabled={this.state.breakerDetails.CurrentRating === null || this.state.isOutOfStock}>\r\n \r\n {!this.props.breaker && Add Breaker }\r\n {this.props.breaker && Edit Breaker }\r\n \r\n \r\n
\r\n
au.estimating@se.com `,\r\n outOfStock: true\r\n })\r\n } else if (availabilityItem?.IsLowStock) {\r\n this.setState({\r\n validationMessage: `Low stock, longer lead times may apply`,\r\n outOfStock: false\r\n })\r\n } else {\r\n this.setState({\r\n validationMessage: '',\r\n outOfStock: false\r\n })\r\n }\r\n }\r\n\r\n const onSelectCell = (type, value) => {\r\n if (type === 'contactor') {\r\n let selectedItem = this.props.contactors.find(contactor => contactor.ItemID === value)\r\n let availabilityItem = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === selectedItem.Rating)\r\n checkIfInStock(availabilityItem)\r\n this.setState({ selectedContactor: value, selectedFittedOption: '' })\r\n } else {\r\n let selectedItem = this.props.fittedOptions.find(fittedOption => fittedOption.ItemID === value)\r\n let availabilityItem = this.props.residentialAllPartsAvailable.find(part => part.ItemCode === selectedItem.Reference)\r\n checkIfInStock(availabilityItem)\r\n this.setState({ selectedFittedOption: value, selectedContactor: '' })\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n { onSelectCell('contactor', value) }}\r\n layout={\"layout-33 radio-button-row\"}\r\n // enabledOptions={ this.getTypeOfDeviceEnabledOptions() }\r\n />\r\n
\r\n
\r\n
\r\n
\r\n { onSelectCell('fittedOption', value) }}\r\n layout={\"layout-33 radio-button-row\"}\r\n // enabledOptions={ this.getTypeOfDeviceEnabledOptions() }\r\n />\r\n
\r\n
\r\n
\r\n\r\n {\r\n this.state.validationMessage &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n
\r\n { this.createCall() }} disabled={this.state.outOfStock}>\r\n \r\n Add item\r\n \r\n \r\n
\r\n
au.estimating@se.com `,\r\n isOutOfStock: true\r\n })\r\n } else if (availabilityDataForSelectedBusbar.IsLowStock) {\r\n canProceed = true\r\n this.setState({\r\n validationMessage: 'Low stock, longer lead times may apply',\r\n isOutOfStock: false\r\n })\r\n } else {\r\n canProceed = true\r\n this.resetAvailabilityValidation()\r\n }\r\n\r\n if (!canProceed) return\r\n\r\n this.setState({ selectedBusBarData: possibleBusbars[0] }, () => {\r\n // We also need to determinate if any extra poles can be selected\r\n this.setState({ isExtraPolesFieldEnabled: this.getMaximumExtraPoles() > 0 }, () => {\r\n // What we want to do here is that instead of having 0 extra poles after selecting a busbar length\r\n // we want to defaul to the maximum number of extra poles allowed, so the user doesn't have to click\r\n // This is because with 0 extra poles behaviour in real life scenario the busbars would be cut to the\r\n // last connectable device, which caused issues as not expected behaviour in initial lunch of the platform\r\n this.changeExtraPolesQuantity(this.getMaximumExtraPoles()) \r\n })\r\n })\r\n\r\n }\r\n })\r\n }\r\n\r\n getMaximumExtraPoles() {\r\n // We already should have checks at this stage where it will be determinated if the busbar length is possible to fit on the row\r\n // Now we just check how many extra poles are left on the row\r\n const isRowWithMainSwitch = this.state.RowSelection === '1'\r\n const mainSwitchPosition = parseInt(this.props.board.MainSwitchPosition, 10)\r\n const selectedRowIndex = parseInt(this.state.RowSelection, 10) - 1\r\n let shouldHaveNeutralTerminalBlock = false\r\n let rowDevices = this.props.breakersAttachedToTheBoard.filter(existingBreaker => existingBreaker.RowIndex === selectedRowIndex)\r\n let orderedRowDevices = orderBy(rowDevices, ['PoleIndex'])\r\n let connectableDevices = this.getBusbarConnectableDevices(orderedRowDevices, this.state.MountingPosition)\r\n let incompatibleDevicesOnRightSideOfLastCompatibleDevice = orderedRowDevices.filter(breaker => breaker.PoleIndex > connectableDevices[connectableDevices.length -1].PoleIndex)\r\n let firstIncompatibleDevicePoleIndexOnRightSideOfLastCompatibleDevice = null\r\n if (incompatibleDevicesOnRightSideOfLastCompatibleDevice.length > 0) {\r\n firstIncompatibleDevicePoleIndexOnRightSideOfLastCompatibleDevice = parseInt(incompatibleDevicesOnRightSideOfLastCompatibleDevice[0].PoleIndex, 10)\r\n }\r\n\r\n if (isRowWithMainSwitch) {\r\n // Don't consider breakers on the left of the main switch\r\n connectableDevices = connectableDevices.filter(breaker => {\r\n return breaker.PoleIndex > mainSwitchPosition\r\n })\r\n\r\n if (isRowWithMainSwitch && this.state.MountingPosition === 'Top') {\r\n shouldHaveNeutralTerminalBlock = true\r\n }\r\n }\r\n\r\n // So we know if the row should have the neutral terminal block, but check as well if we will be actually moving automatically the devices\r\n // so we can better determine the maximum extra poles\r\n let willBeMovingDevicesToMakeSpaceForNeutralTerminalBlock = false\r\n if (shouldHaveNeutralTerminalBlock) {\r\n const selectedRowNumber = parseInt(this.state.RowSelection, 10)\r\n const selectedRowIndex = selectedRowNumber - 1 // Value selected by the user is not array based index which we need in this case\r\n const existingRowBreakers = this.props.breakersAttachedToTheBoard.filter(existingBreaker => existingBreaker.RowIndex === selectedRowIndex)\r\n let isPositionBeforeMainSwitchOccupied = false\r\n isPositionBeforeMainSwitchOccupied = existingRowBreakers.some(breaker => {\r\n let positionsOccupiedByExistingDevice = []\r\n const spaceUsedByExistingDevice = parseInt(breaker.BreakerTypeReadOnly.SpaceUsed, 10)\r\n for (let index = breaker.PoleIndex; index < breaker.PoleIndex + spaceUsedByExistingDevice; index++) {\r\n positionsOccupiedByExistingDevice.push(index) \r\n }\r\n\r\n let intersectingElements = intersectionWith([mainSwitchPosition - 1], positionsOccupiedByExistingDevice, isEqual)\r\n \r\n return intersectingElements.length > 0\r\n })\r\n\r\n // We need to check the case of surge protection\r\n if (mainSwitchPosition === 1 && this.props.board.SPDID !== null && this.props.board.SPDID !== 0) {\r\n isPositionBeforeMainSwitchOccupied = true\r\n }\r\n\r\n if (mainSwitchPosition === 0 || isPositionBeforeMainSwitchOccupied) {\r\n if (this.canDevicesBeMovedToMakeSpaceForNeutralTerminalBlock()) {\r\n willBeMovingDevicesToMakeSpaceForNeutralTerminalBlock = true\r\n }\r\n }\r\n }\r\n\r\n console.warn('willBeMovingDevicesToMakeSpaceForNeutralTerminalBlock', willBeMovingDevicesToMakeSpaceForNeutralTerminalBlock)\r\n\r\n let poleIndexOfFirstConnectableDevice = 0\r\n if (connectableDevices.length > 0 && connectableDevices[0].PoleIndex !== undefined) {\r\n poleIndexOfFirstConnectableDevice = connectableDevices[0].PoleIndex\r\n }\r\n let lastConnectableBreaker = connectableDevices[connectableDevices.length - 1]\r\n let busbarStartIndex = BusbarService.getBusbarStartIndex(this.state.MountingPosition, isRowWithMainSwitch, mainSwitchPosition, shouldHaveNeutralTerminalBlock, poleIndexOfFirstConnectableDevice)\r\n let busbarMaximumExtraPoles = BusbarService.getMaximumAllowedExtraPoles(busbarStartIndex, lastConnectableBreaker.PoleIndex, parseInt(lastConnectableBreaker.BreakerTypeReadOnly.SpaceUsed, 10), parseInt(this.state.BusBarPoles, 10), this.state.boardRowPoles, firstIncompatibleDevicePoleIndexOnRightSideOfLastCompatibleDevice, willBeMovingDevicesToMakeSpaceForNeutralTerminalBlock)\r\n \r\n console.log('Maximum number of Extra Poles allowed', busbarMaximumExtraPoles)\r\n\r\n return busbarMaximumExtraPoles\r\n }\r\n\r\n changeExtraPolesQuantity(updatedQuantity) {\r\n let maximumExtraPoles = this.getMaximumExtraPoles()\r\n\r\n const updatedQuantityAsNumber = parseInt(updatedQuantity, 10)\r\n if (updatedQuantityAsNumber > 0) {\r\n if (updatedQuantityAsNumber < maximumExtraPoles) {\r\n this.setState({ BusBarExtraPoles: updatedQuantityAsNumber })\r\n } else {\r\n this.setState({ BusBarExtraPoles: maximumExtraPoles })\r\n }\r\n } else {\r\n this.setState({ BusBarExtraPoles: 0 })\r\n }\r\n }\r\n \r\n\r\n decreaseQuantity() {\r\n if (this.state.BusBarExtraPoles > 0) this.setState({ BusBarExtraPoles: this.state.BusBarExtraPoles - 1 })\r\n }\r\n\r\n increaseQuantity() {\r\n let maximumExtraPoles = this.getMaximumExtraPoles()\r\n if (this.state.BusBarExtraPoles < maximumExtraPoles) this.setState({ BusBarExtraPoles: this.state.BusBarExtraPoles + 1 })\r\n }\r\n\r\n canDevicesBeMovedToMakeSpaceForNeutralTerminalBlock() {\r\n // Get the list of all compatible busbar devices on the row (breakers & fitted options)\r\n const existingRowBreakers = this.props.breakersAttachedToTheBoard.filter(breaker => breaker.RowIndex === parseInt(this.state.RowSelection, 10) - 1)\r\n const existingRowFittedOptions = this.props.fittedOptionsAttachedToTheBoard.filter(device => device.RowIndex === parseInt(this.state.RowSelection, 10) - 1)\r\n const existingRowContactors = this.props.contactorsAttachedToTheBoard.filter(contactor => contactor.RowIndex === parseInt(this.state.RowSelection, 10) - 1)\r\n const existingRowDevices = [...existingRowBreakers, ...existingRowFittedOptions, ...existingRowContactors]\r\n const orderedRowDevices = orderBy(existingRowDevices, ['PoleIndex'])\r\n\r\n // Note: NTB is always 1 pole, so we always will need to move breakers only by 1 pole\r\n\r\n // Get the last device on the row (breaker, contactor, etc.) and see if it can be moved by one pole, because if we can then all devices between the last one and the main switch can be moved\r\n const lastDeviceOnRow = orderedRowDevices[orderedRowDevices.length - 1]\r\n\r\n let lastDeviceType = 'BreakerTypeReadOnly'\r\n if (lastDeviceOnRow.FittedOptionReadOnly !== undefined) {\r\n lastDeviceType = 'FittedOptionReadOnly'\r\n } else if (lastDeviceOnRow.ContractorReadOnly !== undefined) {\r\n lastDeviceType = 'ContractorReadOnly'\r\n }\r\n\r\n let canMoveBrekerByOnePole = false\r\n if (lastDeviceType === 'BreakerTypeReadOnly') {\r\n canMoveBrekerByOnePole = canAddDeviceToBoardPosition(lastDeviceOnRow[lastDeviceType].SpaceUsed, lastDeviceOnRow.RowIndex, lastDeviceOnRow.PoleIndex + 1, false, this.props.board, this.props.boardDetails, this.props.boardOptionData, false, lastDeviceOnRow.ItemID)\r\n } else if (lastDeviceType === 'FittedOptionReadOnly') {\r\n canMoveBrekerByOnePole = canAddDeviceToBoardPosition(lastDeviceOnRow[lastDeviceType].SpaceUsed, lastDeviceOnRow.RowIndex, lastDeviceOnRow.PoleIndex + 1, false, this.props.board, this.props.boardDetails, this.props.boardOptionData, false, null, null, lastDeviceOnRow.ItemID)\r\n } else if (lastDeviceType === 'ContractorReadOnly') {\r\n canMoveBrekerByOnePole = canAddDeviceToBoardPosition(lastDeviceOnRow[lastDeviceType].SpaceUsed, lastDeviceOnRow.RowIndex, lastDeviceOnRow.PoleIndex + 1, false, this.props.board, this.props.boardDetails, this.props.boardOptionData, false, null, lastDeviceOnRow.ItemID)\r\n }\r\n \r\n\r\n console.log('Can automatically move devices on the row to make space for NTB?', canMoveBrekerByOnePole)\r\n return canMoveBrekerByOnePole\r\n }\r\n\r\n automaticallyMoveRowDevicesToMakeSpaceForNeutralTerminalBlock() {\r\n const existingRowOrderedBreakers = orderBy(this.props.breakersAttachedToTheBoard.filter(breaker => breaker.RowIndex === parseInt(this.state.RowSelection, 10) - 1), ['PoleIndex'])\r\n const existingRowOrderedFittedOptions = orderBy(this.props.fittedOptionsAttachedToTheBoard.filter(fittedOption => fittedOption.RowIndex === parseInt(this.state.RowSelection, 10) - 1), ['PoleIndex']) \r\n const existingRowOrderedContactors = orderBy(this.props.contactorsAttachedToTheBoard.filter(contactor => contactor.RowIndex === parseInt(this.state.RowSelection, 10) - 1), ['PoleIndex'])\r\n const breakersOnRightOfTheMainSwitch = existingRowOrderedBreakers.filter(breaker => breaker.PoleIndex > parseInt(this.props.board.MainSwitchPosition, 10))\r\n const fittedOptionsOnRightOfTheMainSwitch = existingRowOrderedFittedOptions.filter(fittedOption => fittedOption.PoleIndex > parseInt(this.props.board.MainSwitchPosition, 10))\r\n const contactorsOnRightOfTheMainSwitch = existingRowOrderedContactors.filter(contactor => contactor.PoleIndex > parseInt(this.props.board.MainSwitchPosition, 10))\r\n \r\n console.log('breakersOnRightOfTheMainSwitch', breakersOnRightOfTheMainSwitch)\r\n breakersOnRightOfTheMainSwitch.forEach(breaker => {\r\n this.updateBreakerPosition(breaker.ItemID, breaker.RowIndex, breaker.PoleIndex + 1, breaker.Note, true)\r\n })\r\n console.log('fittedOptionsOnRightOfTheMainSwitch', fittedOptionsOnRightOfTheMainSwitch)\r\n fittedOptionsOnRightOfTheMainSwitch.forEach(fittedOption => {\r\n this.updateFittedOptionPosition(fittedOption.ItemID, fittedOption.RowIndex, fittedOption.PoleIndex + 1, fittedOption.Note, true)\r\n })\r\n\r\n console.log('contactorsOnRightOfTheMainSwitch', contactorsOnRightOfTheMainSwitch)\r\n contactorsOnRightOfTheMainSwitch.forEach(contactor => {\r\n this.updateContactorPosition(contactor.ItemID, contactor.RowIndex, contactor.PoleIndex + 1, contactor.Note, true)\r\n })\r\n\r\n this.updateMainSwitchPosition(parseInt(this.props.board.MainSwitchPosition, 10) + 1)\r\n }\r\n\r\n saveBusbar() {\r\n // Before we allow adding a busbar we need to check if there is a space for neutral block, if there isn't then we need to ask\r\n // user to make a space on indicated position, we don't support switching elements for the user at this stage\r\n const busbarsWithNeutralBlock = BusbarService.getBusbarsWithNeutralTerminalBlockReferences()\r\n const busbarErrorMessage = 'This Busbar requires a Neutral Terminal Block to be inserted on left side of the main switch. Please make space available.'\r\n const mainSwitchPosition = parseInt(this.props.board.MainSwitchPosition, 10)\r\n let isPositionBeforeMainSwitchOccupied = false\r\n let isAutomaticallyUpdatingDevices = false\r\n if (busbarsWithNeutralBlock.indexOf(this.state.selectedBusBarData.Reference) > -1) {\r\n if (mainSwitchPosition === 0) {\r\n // Here we know that we need a NTB before the main switch, but if the main switch is on the very first position then we check if we can move it and we move it\r\n // before doing other checks etc., otherwise we just throw an error for user to take manual action\r\n if (this.canDevicesBeMovedToMakeSpaceForNeutralTerminalBlock()) {\r\n // We need to move the main switch by one pole to the right\r\n console.warn('Automatically moving devices on the row to make space for NTB')\r\n this.automaticallyMoveRowDevicesToMakeSpaceForNeutralTerminalBlock()\r\n isAutomaticallyUpdatingDevices = true\r\n } else { \r\n this.setState({ errorInfo: busbarErrorMessage })\r\n return false\r\n }\r\n }\r\n\r\n // Here we know busbar requires a neutral block which needs to go on first row, first position and occupies 1 space\r\n const selectedRowNumber = parseInt(this.state.RowSelection, 10)\r\n const selectedRowIndex = selectedRowNumber - 1 // Value selected by the user is not array based index which we need in this case\r\n const existingRowBreakers = this.props.breakersAttachedToTheBoard.filter(existingBreaker => existingBreaker.RowIndex === selectedRowIndex)\r\n isPositionBeforeMainSwitchOccupied = existingRowBreakers.some(breaker => {\r\n let positionsOccupiedByExistingDevice = []\r\n const spaceUsedByExistingDevice = parseInt(breaker.BreakerTypeReadOnly.SpaceUsed, 10)\r\n for (let index = breaker.PoleIndex; index < breaker.PoleIndex + spaceUsedByExistingDevice; index++) {\r\n positionsOccupiedByExistingDevice.push(index) \r\n }\r\n\r\n let intersectingElements = intersectionWith([mainSwitchPosition - 1], positionsOccupiedByExistingDevice, isEqual)\r\n \r\n return intersectingElements.length > 0\r\n })\r\n\r\n // We need to check the case of surge protection\r\n if (mainSwitchPosition === 1 && this.props.board.SPDID !== null && this.props.board.SPDID !== 0) {\r\n isPositionBeforeMainSwitchOccupied = true\r\n }\r\n\r\n if (isPositionBeforeMainSwitchOccupied) {\r\n if (this.canDevicesBeMovedToMakeSpaceForNeutralTerminalBlock()) {\r\n console.warn('Automatically moving devices on the row to make space for NTB')\r\n this.automaticallyMoveRowDevicesToMakeSpaceForNeutralTerminalBlock()\r\n isAutomaticallyUpdatingDevices = true\r\n } else { \r\n this.setState({ errorInfo: busbarErrorMessage })\r\n return false\r\n }\r\n }\r\n }\r\n\r\n let busbarStartPosition = 0\r\n let busbarLength = 0\r\n\r\n const isRowWithMainSwitch = this.state.RowSelection === '1'\r\n const selectedRowIndex = parseInt(this.state.RowSelection, 10) - 1\r\n let shouldHaveNeutralTerminalBlock = false\r\n let rowDevices = this.props.breakersAttachedToTheBoard.filter(existingBreaker => existingBreaker.RowIndex === selectedRowIndex)\r\n let connectableDevices = this.getBusbarConnectableDevices(rowDevices, this.state.MountingPosition)\r\n\r\n if (isRowWithMainSwitch && this.state.MountingPosition === 'Top') {\r\n shouldHaveNeutralTerminalBlock = true\r\n }\r\n\r\n let poleIndexOfFirstConnectableDevice = 0\r\n if (connectableDevices.length > 0 && connectableDevices[0].PoleIndex !== undefined) {\r\n poleIndexOfFirstConnectableDevice = connectableDevices[0].PoleIndex\r\n }\r\n\r\n let lastConnectableBreaker = connectableDevices[connectableDevices.length - 1]\r\n let busbarStartIndex = BusbarService.getBusbarStartIndex(this.state.MountingPosition, isRowWithMainSwitch, mainSwitchPosition, shouldHaveNeutralTerminalBlock, poleIndexOfFirstConnectableDevice)\r\n busbarStartPosition = busbarStartIndex + 1\r\n\r\n // If we are moving the devices then save starting position of busbar as one pole to the right\r\n if (isAutomaticallyUpdatingDevices) {\r\n busbarStartPosition = busbarStartPosition + 1\r\n }\r\n\r\n let busbarRequiredLengthToCoverAllDevices = BusbarService.getBusbarMinimumLengthToCoverAllRowDevices(busbarStartIndex, lastConnectableBreaker.PoleIndex, parseInt(lastConnectableBreaker.BreakerTypeReadOnly.SpaceUsed, 10))\r\n busbarLength = busbarRequiredLengthToCoverAllDevices\r\n\r\n this.props.addBusBarToBoard(this.state.selectedBusBarData.ItemID, parseInt(this.state.RowSelection, 10), this.state.BusBarExtraPoles, busbarStartPosition, busbarLength)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}","import React from 'react'\r\nimport { DragSource } from 'react-dnd'\r\n\r\nexport class ChassisBreaker extends React.Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n // Bind this to element function calls for better performance / practise\r\n // - ref: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md\r\n this.editClickCall = this.editClickCall.bind(this)\r\n this.deleteCall = this.deleteCall.bind(this)\r\n this.updateBrekerChassisNoteCall = this.updateBrekerChassisNoteCall.bind(this)\r\n\r\n // Internal states that no one else needs to know about holds info on the selection options\r\n this.state = {\r\n showEditOptions: false,\r\n isDeleting: false,\r\n BreakerCircuitLabelInput: this.props.BreakerCircuitLabelInput\r\n }\r\n }\r\n\r\n deleteCall() {\r\n this.setState({ isDeleting: true })\r\n this.props.deletedCallback(this.props.RowIndex, this.props.PoleIndex, this.props.itemId)\r\n }\r\n\r\n editClickCall() {\r\n this.setState({ showEditOptions: !this.state.showEditOptions }, () => {\r\n if (this.state.showEditOptions) this.refs.labelInput.focus()\r\n })\r\n }\r\n\r\n updateBrekerChassisNoteCall() {\r\n this.props.updateBrekerChassisNote(this.props.itemId, this.props.RowIndex, this.props.PoleIndex, this.state.BreakerCircuitLabelInput)\r\n this.setState({ showEditOptions: false })\r\n }\r\n\r\n generateBrekerPositions(startNumber) {\r\n const spaceUsed = parseInt(this.props.poles, 10)\r\n const displayNumbers = []\r\n\r\n for (let i = 0; i < spaceUsed; i++) {\r\n let displayNumber = startNumber + i\r\n if (displayNumber < 10) displayNumber = '0' + displayNumber\r\n\r\n displayNumbers.push(\r\n \r\n
{ displayNumber }
\r\n
\r\n }\r\n \r\n return (\r\n \r\n
{ this.props.PoleIndex + 1 } \r\n
\r\n
\r\n
{ displayNumber }
\r\n
\r\n }\r\n \r\n return (\r\n \r\n
{ this.props.PoleIndex + 1 } \r\n
\r\n
\r\n
{ displayNumber }
\r\n
\r\n }\r\n \r\n return (\r\n \r\n
{ this.props.PoleIndex + 1 } \r\n
\r\n
\r\n
{ this.props.poleDisplayIndex } \r\n
\r\n \r\n {\r\n isActive ?\r\n \r\n {\r\n this.props.isAllowedToDragNDropPole ?\r\n Release to drop \r\n :\r\n Busbar present \r\n }\r\n \r\n :\r\n Space \r\n }\r\n \r\n \r\n {/* Need to fix */}\r\n {/* Drag and drop a breaker from your library */}\r\n \r\n
\r\n
\r\n
{ displayNumber }
\r\n
\r\n }\r\n\r\n return (\r\n \r\n
\r\n {/*
{ this.props.poleDisplayIndex } */}\r\n
\r\n { this.generateDevicePositions(this.props.poleIndex + 1) }\r\n
\r\n
\r\n Main switch
\r\n
\r\n
\r\n
{ displayNumber }
\r\n
\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n { this.generateDevicePositions(this.props.poleIndex + 1) }\r\n
\r\n
\r\n Wiser Energy Gateway\r\n
\r\n
\r\n
\r\n
{ displayNumber }
\r\n
\r\n
\r\n
\r\n { this.generateDevicePositions(this.props.poleIndex + 1, this.props.spaceUsed) }\r\n
\r\n {/*
{ this.props.poleDisplayIndex } */}\r\n
\r\n Surge Protection\r\n
\r\n
\r\n
\r\n
\r\n
\r\n { rowArrayIndex === 0 ? 'First' : ''} { rowArrayIndex === 1 ? 'Second' : ''} { rowArrayIndex === 2 ? 'Third' : ''} { rowArrayIndex === 3 ? 'Fourth' : ''} row\r\n
\r\n\r\n {/* Top slots */}\r\n
\r\n {\r\n !this.props.isEditingPowerTags && \r\n
Space Available - Busbar \r\n //
Space Available - Busbar or PowerTags \r\n }\r\n\r\n {\r\n rowTopBusbar !== undefined &&\r\n
\r\n
Busbar { rowTopBusbar.BusBarReadOnly.NumberOfPoles } \r\n
Extra Poles { rowTopBusbar.ExtraPoles } \r\n\r\n
\r\n this.removeBusbar(rowTopBusbar.ItemID, rowTopBusbar.BusBarItemID)}>\r\n \r\n
\r\n
\r\n }\r\n
\r\n\r\n {/* Device columns */}\r\n
\r\n { this.renderPoles(rowArrayIndex, isAllowedToDragNDropPole) }\r\n
\r\n\r\n {/* Bottom slots */}\r\n
\r\n {\r\n !this.props.isEditingPowerTags && \r\n
Space Available - Busbar \r\n //
Space Available - Busbar or PowerTags \r\n }\r\n\r\n {/* Manipulate is-position-1 class to indicate where busbar starts */}\r\n {\r\n rowBottomBusbar !== undefined &&\r\n
\r\n
Busbar { rowBottomBusbar.BusBarReadOnly.NumberOfPoles } \r\n
Extra Poles { rowBottomBusbar.ExtraPoles } \r\n\r\n
\r\n this.removeBusbar(rowBottomBusbar.ItemID, rowBottomBusbar.BusBarItemID)}>\r\n \r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n )\r\n\r\n // Checks for the main switch\r\n } else if (rowArrayIndex === 0 && poleArrayIndex === this.props.mainSwitchPosition) { \r\n poles.push(\r\n \r\n \r\n this.props.canAddDeviceToPosition(speceUsed, rowIndex, poleIndex, isMainSwitch)}\r\n />\r\n )\r\n } else if (breaker !== undefined) {\r\n poles.push(\r\n \r\n \r\n this.props.canAddDeviceToPosition(speceUsed, rowIndex, poleIndex, isMainSwitch, breakerItemID)}\r\n />\r\n )\r\n } else if (contactor !== undefined) {\r\n poles.push(\r\n \r\n )\r\n } else if (fittedOption !== undefined) {\r\n poles.push(\r\n \r\n )\r\n } else if (shouldDisplayNeutralBlock) {\r\n poles.push(\r\n \r\n \r\n
\r\n
{ poleDisplayIndex } \r\n
\r\n Neutral terminal block\r\n
\r\n
\r\n
)\r\n } else if (shouldDisplayWiserEnergyGateway) {\r\n poles.push(\r\n \r\n \r\n this.props.canAddDeviceToPosition(speceUsed, rowIndex, poleIndex)}\r\n />\r\n )\r\n } else {\r\n poles.push(\r\n \r\n )\r\n }\r\n }\r\n\r\n return poles\r\n }\r\n\r\n render() { \r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{ this.props.boardName } \r\n
\r\n
\r\n \r\n \r\n \r\n Busbar \r\n \r\n {/* this.togglePowerTags()}>\r\n PowerTags \r\n */}\r\n
\r\n
\r\n
\r\n
\r\n { this.props.configured } Pole Configured \r\n { this.props.remaining } of { this.props.total } poles Remaining \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n { this.renderRows() }\r\n
\r\n
\r\n
\r\n
{ this.props.usedCount } \r\n
\r\n \r\n
\r\n { this.props.description }\r\n\r\n {\r\n this.props.isDisabled &&\r\n Cannot be fitted on to this board
\r\n }\r\n \r\n
\r\n
{ this.handleDeletingBreaker(this.props.ItemID) } }>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {!this.props.isDragAndDropEnabled && !this.props.isDisabled &&\r\n
\r\n
\r\n }\r\n\r\n { !this.props.isDisabled && \r\n
{ this.handleBreakerAutoAdd(this.props.ItemID) } }>\r\n \r\n \r\n \r\n }\r\n
\r\n
\r\n
{ this.props.usedCount } \r\n
\r\n \r\n
\r\n Contactor: { this.props.description }\r\n\r\n {\r\n this.props.isDisabled &&\r\n Cannot be fitted on to this board
\r\n }\r\n \r\n
\r\n
{ this.handleDeletingContactor(this.props.ItemID) } }>\r\n \r\n \r\n \r\n\r\n {!this.props.isDragAndDropEnabled && !this.props.isDisabled &&\r\n
\r\n
\r\n }\r\n\r\n { !this.props.isDisabled && \r\n
{ this.handleContactorAutoAdd(this.props.ItemID) } }>\r\n \r\n \r\n \r\n }\r\n
\r\n
\r\n
{ this.props.usedCount } \r\n
\r\n \r\n
\r\n { this.props.description }\r\n\r\n {\r\n this.props.isDisabled &&\r\n Cannot be fitted on to this board
\r\n }\r\n \r\n
\r\n
{ this.handleDeletingFittedOption(this.props.ItemID) } }>\r\n \r\n \r\n \r\n\r\n {!this.props.isDragAndDropEnabled && !this.props.isDisabled &&\r\n
\r\n
\r\n }\r\n\r\n { !this.props.isDisabled && \r\n
{ this.handleFittedOptionAutoAdd(this.props.ItemID) } }>\r\n \r\n \r\n \r\n }\r\n
\r\n
au.estimating@se.com `\r\n } else if (item?.IsLowStock) {\r\n validationMessage = 'Low stock, longer lead times may apply'\r\n } else {\r\n validationMessage = ''\r\n }\r\n return validationMessage\r\n }\r\n\r\n handleUpdateQuantity(qty, id) {\r\n const updatedBoard = cloneDeep(this.state.board)\r\n updatedBoard.ProjectBoardBreakerToolboxCollection = updatedBoard.ProjectBoardBreakerToolboxCollection.map(item => {\r\n if (item.ItemID === id) {\r\n item.quantity = qty\r\n }\r\n return item\r\n })\r\n\r\n this.setState({ board: updatedBoard })\r\n }\r\n\r\n handleContactorUpdateQuantity(qty, id) {\r\n const updatedBoard = cloneDeep(this.state.board)\r\n updatedBoard.ProjectBoardContactorToolboxCollection = updatedBoard.ProjectBoardContactorToolboxCollection.map(item => {\r\n if (item.ItemID === id) {\r\n item.quantity = qty\r\n }\r\n return item\r\n })\r\n\r\n this.setState({ board: updatedBoard })\r\n }\r\n\r\n handleFittedOptionUpdateQuantity(qty, id) {\r\n const updatedBoard = cloneDeep(this.state.board)\r\n updatedBoard.ProjectBoardFittedOptionToolboxCollection = updatedBoard.ProjectBoardFittedOptionToolboxCollection.map(item => {\r\n if (item.ItemID === id) {\r\n item.quantity = qty\r\n }\r\n return item\r\n })\r\n\r\n this.setState({ board: updatedBoard })\r\n }\r\n\r\n render() {\r\n const breaker = this.state.board.ProjectBoardBreakerCollection?.filter(item => item.ItemID).length\r\n const contractor = this.state.board.ProjectBoardContractorCollection?.filter(item => item.ItemID).length\r\n const fittedOption = this.state.board.ProjectBoardFittedOptionCollection?.filter(item => item.ItemID).length\r\n const totalComponent = breaker + contractor + fittedOption\r\n\r\n if (this.state.isLoading) {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n Loading \r\n
\r\n
\r\n )\r\n }\r\n\r\n if (this.state.isAddingDevice.length > 0 && totalComponent === 0) {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n Saving Device \r\n
\r\n
\r\n )\r\n }\r\n\r\n if (this.state.isAddingBusBar) {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n Saving Busbar \r\n
\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n {\r\n this.state.showDragNDropTutorial &&\r\n
\r\n \r\n }\r\n\r\n {\r\n this.state.isBreakerModalOpen &&\r\n
this.closeBreakerModal()}>\r\n\r\n this.closeAddingAdditionalItemsModal()}>\r\n\r\n this.stopCreatingBusbar()}>\r\n\r\n {\r\n this.addBusBarToBoard(busBarItemID, row, extraPoles, startPosition, busbarLength)\r\n }}\r\n\r\n board={this.state.board}\r\n boardDetails={this.state.boardDetails}\r\n boardOptions={this.state.boardOptions}\r\n\r\n updateBreakerPosition={this.updateBreakerPosition}\r\n updateContactorPosition={this.updateContactorPosition}\r\n updateFittedOptionPosition={this.updateFittedOptionPosition}\r\n updateMainSwitchPosition={this.updateMainSwitchPosition}\r\n residentialAllPartsAvailable={this.state.residentialAllPartsAvailable}\r\n />\r\n \r\n }\r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
{this.state.board.Name} \r\n\r\n
this.startConfiguringBoard()}>\r\n \r\n \r\n \r\n Edit Board\r\n \r\n \r\n
\r\n\r\n
\r\n
0 ? ' is-loading' : ''))}\r\n onClick={() => this.viewQuote()}>\r\n \r\n \r\n \r\n View Quote\r\n \r\n \r\n\r\n
this.addNewBoard()}>\r\n \r\n \r\n \r\n Add Board\r\n \r\n \r\n\r\n
this.setState({ activeBreakersTab: 'all' })}>\r\n
\r\n All\r\n
\r\n
\r\n
this.setState({ activeBreakersTab: 'favourites' })}>\r\n
\r\n
\r\n Favourites\r\n
\r\n
\r\n
this.setState({ activeBreakersTab: 'boardonly' })}>\r\n
\r\n
\r\n This board only\r\n
\r\n
\r\n
\r\n {this.state.board.ProjectBoardBreakerToolboxCollection.length === 0 &&\r\n this.state.board.ProjectBoardContactorToolboxCollection.length === 0 &&\r\n this.state.board.ProjectBoardFittedOptionToolboxCollection.length === 0 &&\r\n
\r\n
\r\n \r\n
You don’t have any devices in your library yet.
\r\n
Add your first device above
\r\n
\r\n }\r\n\r\n {/* Render Breakers */}\r\n {this.state.board.ProjectBoardBreakerToolboxCollection.length > 0 &&\r\n
\r\n {\r\n this.state.activeBreakersTab !== 'favourites' &&\r\n
Breakers
\r\n }\r\n {this.state.board.ProjectBoardBreakerToolboxCollection.map((toolboxItem, index) => {\r\n toolboxItem.quantity = toolboxItem.quantity === undefined ? 1 : toolboxItem.quantity\r\n if (this.state.activeBreakersTab === 'all' ||\r\n (this.state.activeBreakersTab === 'favourites' && this.isBreakerFavourite(toolboxItem.BreakerTypeItemID)) ||\r\n (this.state.activeBreakersTab === 'boardonly' && !this.isBreakerFavourite(toolboxItem.BreakerTypeItemID))) {\r\n\r\n const breakerObj = this.state.breakerOptionData.find(dataItem => dataItem.ItemID === toolboxItem.BreakerTypeItemID)\r\n\r\n const availabilityDataForSelectedBreaker = this.state.residentialAllPartsAvailable.find(item => item.ItemCode === breakerObj.Reference)\r\n let validationMessage = ''\r\n validationMessage = this.getValidationMessage(availabilityDataForSelectedBreaker, breakerObj.Description)\r\n\r\n return (\r\n <>\r\n
{ this.handleDeletingBreaker(itemID) }}\r\n isBreakerFavourite={this.isBreakerFavourite(toolboxItem.BreakerTypeItemID)}\r\n quantity={toolboxItem.quantity}\r\n handleToggleBreakerFavourite={(itemID) => { this.handleToggleBreakerFavourite(itemID) }}\r\n usedCount={this.getUsedCount(breakerObj)}\r\n isDisabled={false} // It's always enabled, leave it for now, as there could be conditions where it's not enabled\r\n handleBreakerAutoAdd={(itemID, quantity) => {\r\n quantity = parseInt(quantity)\r\n for (let i = 0; i < quantity; i++) {\r\n setTimeout(() => {\r\n this.autoAddbreaker(itemID, toolboxItem.BreakerTypeItemID)\r\n }, 0);\r\n }\r\n }}\r\n addBreakerToBoard={(rowIndex, poleIndex, ItemID, BreakerTypeItemID) => {\r\n this.handleBreakerDrop(rowIndex, poleIndex, ItemID, BreakerTypeItemID)\r\n }}\r\n handleUpdateQuantity={(quantity, itemID) => { this.handleUpdateQuantity(quantity, itemID) }}\r\n />\r\n {validationMessage &&\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n )\r\n } else {\r\n return ''\r\n }\r\n })}\r\n \r\n }\r\n\r\n {/* Render Additinal items */}\r\n {(this.state.board.ProjectBoardContactorToolboxCollection.length > 0 ||\r\n this.state.board.ProjectBoardFittedOptionToolboxCollection.length > 0) &&\r\n
\r\n {\r\n this.state.activeBreakersTab !== 'favourites' &&\r\n
Additional Items
\r\n }\r\n {this.state.board.ProjectBoardContactorToolboxCollection.map((toolboxItem, index) => {\r\n toolboxItem.quantity = toolboxItem.quantity === undefined ? 1 : toolboxItem.quantity\r\n if (this.state.activeBreakersTab === 'all' || this.state.activeBreakersTab === 'boardonly') {\r\n const contactorObj = toolboxItem.ContactorReadOnly\r\n\r\n const availabilityDataForSelectedBreaker = this.state.residentialAllPartsAvailable.find(item => item.ItemCode === toolboxItem?.ContactorReadOnly?.Rating)\r\n let validationMessage = ''\r\n validationMessage = this.getValidationMessage(availabilityDataForSelectedBreaker, toolboxItem.ContactorReadOnly.Description)\r\n\r\n return (\r\n <>\r\n
{ this.handleDeletingContactor(itemID) }}\r\n usedCount={this.getUsedContactorCount(contactorObj)}\r\n isDisabled={false}\r\n handleContactorAutoAdd={(itemID, quantity) => { \r\n quantity = parseInt(quantity)\r\n for (let i = 0; i < quantity; i++) {\r\n setTimeout(() => {\r\n this.autoAddContactor(itemID, toolboxItem.ContactorItemID) \r\n }, 0)\r\n }\r\n }}\r\n addContactorToBoard={(rowIndex, poleIndex, ItemID, ContactorItemID) => {\r\n this.handleContactorDrop(rowIndex, poleIndex, ItemID, ContactorItemID)\r\n }}\r\n handleContactorUpdateQuantity={(quantity, itemID) => { this.handleContactorUpdateQuantity(quantity, itemID) }}\r\n />\r\n {validationMessage &&\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 {this.state.board.ProjectBoardFittedOptionToolboxCollection.map((toolboxItem, index) => {\r\n toolboxItem.quantity = toolboxItem.quantity === undefined ? 1 : toolboxItem.quantity\r\n if (this.state.activeBreakersTab === 'all' || this.state.activeBreakersTab === 'boardonly') {\r\n const fittedOptionObj = toolboxItem.FittedOptionReadOnly\r\n\r\n const availabilityDataForSelectedBreaker = this.state.residentialAllPartsAvailable.find(item => item.ItemCode === toolboxItem?.FittedOptionReadOnly?.Reference)\r\n\r\n let validationMessage = ''\r\n validationMessage = this.getValidationMessage(availabilityDataForSelectedBreaker, toolboxItem.FittedOptionReadOnly?.Description)\r\n\r\n return (\r\n <>\r\n { this.handleDeletingFittedOption(itemID) }}\r\n usedCount={this.getUsedFittedOptionCount(fittedOptionObj)}\r\n isDisabled={false}\r\n handleFittedOptionAutoAdd={(itemID, quantity) => { \r\n quantity = parseInt(quantity)\r\n for (let i = 0; i < quantity; i++) {\r\n setTimeout(() => {\r\n this.autoAddFittedOption(itemID, toolboxItem.FittedOptionItemID) \r\n }, 0)\r\n }\r\n }}\r\n addFittedOptionToBoard={(rowIndex, poleIndex, ItemID, FittedOptionItemID) => {\r\n this.handleFittedOptionDrop(rowIndex, poleIndex, ItemID, FittedOptionItemID)\r\n }}\r\n handleFittedOptionUpdateQuantity={(quantity, itemID) => { this.handleFittedOptionUpdateQuantity(quantity, itemID) }}\r\n />\r\n {validationMessage &&\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n )\r\n } else {\r\n return ''\r\n }\r\n })}\r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n Drag and Drop \r\n
\r\n \r\n \r\n \r\n Auto Placement \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.state.pageInfo !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.pageInfo}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.isEditingPowerTags &&\r\n
\r\n \r\n \r\n \r\n Power Tags will be supplied loose, and not fitted to the board.\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.hasMixedDifferentProductRanges &&\r\n
\r\n \r\n \r\n \r\n You have mixed 6kA and 4.5kA. Please note that these breakers belong to different product ranges and that their appearance on the board will be different.\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.apiError !== '' &&\r\n
\r\n \r\n \r\n \r\n {this.state.apiError}\r\n \r\n
\r\n }\r\n\r\n {\r\n this.state.displayMaxBoardLimitReached &&\r\n
\r\n \r\n \r\n \r\n You have reached the maximum number of boards per project and cannot ADD or COPY anymore.\r\n \r\n
\r\n }\r\n
\r\n\r\n
\r\n
\r\n this.startCreatingBusbar()}\r\n updatePowerTagsEditing={(isEditingPowerTags) => this.setState({ isEditingPowerTags: isEditingPowerTags })}\r\n isEditingPowerTags={this.state.isEditingPowerTags}\r\n isUpdatingDevice={this.state.isUpdatingDevice}\r\n canAddDeviceToPosition={(speceUsed, rowIndex, poleIndex, isMainSwitch, breakerItemID) => {\r\n return this.canAddDeviceToPosition(speceUsed, rowIndex, poleIndex, false, isMainSwitch, breakerItemID)\r\n }}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\r\n this.state.hasUpdatedUserProfile &&\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Changes were saved \r\n \r\n
\r\n Your profile is updated.\r\n
\r\n
\r\n Your changes have been saved to your account.\r\n
\r\n
\r\n \r\n Back to Home\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n { !this.state.hasUpdatedUserProfile &&\r\n
\r\n }\r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\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 withRouter(App)\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from \"react\"\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass CookieSetting extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n componentDidMount() {\r\n if (this.props.location.pathname === '/project-details') {\r\n const cookieSettingsElement = document.querySelector('.cookie-settings');\r\n cookieSettingsElement.style.bottom = '11rem';\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 \r\n \r\n\r\n\r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n ,\r\n rootElement\r\n)\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals()\r\n","exports.CONST = {\r\n API_PATH: '/Clipsal_LDB_API/api/v3',\r\n API_PATH_RESIDENTIAL: '/Clipsal_Residential_API/api/v3',\r\n LEGACY_API_PATH: '/api',\r\n API_PATH_SSO_LOCALHOST: 'https://localhost:7030',\r\n SSO_CURRENT_SITE: 'FLEXSELECT',\r\n SSO_API_KEY: 'dVCakwqW8Ri4R8kA1UBibJWGnvnvwROQ',\r\n RECAPTCH_SITE_KEY: '6Lc8Gl0qAAAAAPK6qBvbhChnogaIhXCTmWrulKG_',\r\n PAGES: {\r\n HOME: '/home',\r\n LOGIN: '/login',\r\n REGISTER: '/register',\r\n PROFILE: '/user-profile',\r\n UPDATE_PROFILE_INFO: '/Update-Profile-Info',\r\n PROJECT_DETAILS: '/project-details',\r\n PROJECT_DETAILS_RESIDENTIAL: '/project-details-residential',\r\n TECHNICAL_INFORMATION: '/technical-information',\r\n CONFIGURE_CHASSIS: '/config-chassis',\r\n CONFIGURE_CHASSIS_RESIDENTIAL: '/config-chassis-residential',\r\n QUOTE: '/project-quote',\r\n QUOTE_RESIDENTIAL: '/project-quote-residential'\r\n },\r\n MINIMUM_RESIDENTIAL_BOARD_QUANTITY: 30\r\n}\r\n "],"sourceRoot":""}