i
;\r\n\r\nexport default null;\r\nexport {\r\n ArrowDown,\r\n ArrowUp,\r\n BottledGas,\r\n Broadband,\r\n Card,\r\n Cross,\r\n Close,\r\n CrossRed,\r\n Download,\r\n DuelFuel,\r\n Electricity,\r\n Email,\r\n House,\r\n Clock,\r\n Check,\r\n Exclamation,\r\n Loading,\r\n PipedGas,\r\n PPD,\r\n RedTick,\r\n Summer,\r\n Upload,\r\n Info,\r\n Winter,\r\n QuestionMark,\r\n VioletTick,\r\n WhiteTick,\r\n};\r\n","import React, { Component } from 'react';\r\nimport { Loading, RedTick } from '../SVG';\r\n\r\nexport default class LoadingAnimation extends Component {\r\n state = {\r\n loadingElements: [\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepOne &&\r\n this.props.fields.CheckAddressStepOne.value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[0] &&\r\n this.props.steps[0].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[0] &&\r\n this.props.steps[0].completed) ||\r\n false,\r\n },\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepTwo &&\r\n this.props.fields.CheckAddressStepTwo.value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[1] &&\r\n this.props.steps[1].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[1] &&\r\n this.props.steps[1].completed) ||\r\n false,\r\n },\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepThree &&\r\n this.props.fields.CheckAddressStepThree.value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[2] &&\r\n this.props.steps[2].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[2] &&\r\n this.props.steps[2].completed) ||\r\n false,\r\n },\r\n ],\r\n };\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.steps) {\r\n this.setState({\r\n loadingElements: [\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepOne &&\r\n this.props.fields.CheckAddressStepOne.value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[0] &&\r\n this.props.steps[0].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[0] &&\r\n this.props.steps[0].completed) ||\r\n false,\r\n },\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepTwo &&\r\n this.props.fields.CheckAddressStepTwo.value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[1] &&\r\n this.props.steps[1].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[1] &&\r\n this.props.steps[1].completed) ||\r\n false,\r\n },\r\n {\r\n title:\r\n (this.props.fields.CheckAddressStepThree &&\r\n this.props.fields.CheckAddressStepThree\r\n .value) ||\r\n '',\r\n started:\r\n (this.props.steps &&\r\n this.props.steps[2] &&\r\n this.props.steps[2].started) ||\r\n false,\r\n completed:\r\n (this.props.steps &&\r\n this.props.steps[2] &&\r\n this.props.steps[2].completed) ||\r\n false,\r\n },\r\n ],\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.loadingElements.map((element, index) => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst Load = props => {\r\n const loadingTypeComponent = props.check.completed ? (\r\n \r\n {loadingTypeComponent}\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\n\r\nconst ActionsContext = React.createContext({\r\n searchAddress: async () => {},\r\n updateAddress: async () => {},\r\n updateICPAddress: async () => {},\r\n updateService: async () => {},\r\n updatePlan: async () => {},\r\n updateBroadband: async () => {},\r\n\r\n setExpandRates: () => {},\r\n setLivingSituation: () => {},\r\n setShowBillCompareModal: async () => {},\r\n setError: () => {},\r\n setPlanFilterTabsTitle: () => {},\r\n\r\n updatePlansAndServices: () => {},\r\n saveService: async () => {},\r\n saveUsageType: async () => {},\r\n savePlan: async () => {},\r\n saveBB: async () => {},\r\n toggleSelectedService: () => {},\r\n toggleLpgUsage: () => {},\r\n toggleSelectedPlan: async () => {},\r\n toggleSelectedBB: async () => {},\r\n\r\n updateEmailAddress: async () => {},\r\n validateAndSavePromoCode: async () => {},\r\n removePromoCode: async () => {},\r\n restorePromoCode: async () => {},\r\n\r\n registerPlan: () => {},\r\n\r\n pushEpValuesToDatalayer: () => {},\r\n pushImpressionsToDatalayer: () => {},\r\n pushPlanAndDetailsToDatalayer: () => {},\r\n\r\n registerGoal: async () => {},\r\n});\r\n\r\nexport default ActionsContext;\r\n","import React from 'react';\r\n\r\nconst UIContext = React.createContext({\r\n expandRates: false,\r\n livingSituationValue: null,\r\n usageType: 'S',\r\n returningUser: false,\r\n isTouch: false,\r\n showBillCompareModal: false,\r\n planFilterTabsTitles: [],\r\n});\r\n\r\nexport default UIContext;\r\n","import React from 'react';\r\n\r\nconst CustomerContext = React.createContext({\r\n});\r\n\r\nexport default CustomerContext;\r\n","import React from 'react';\r\n\r\nconst PlansAndServicesContext = React.createContext({\r\n selectedService: [],\r\n lpgUsage: [],\r\n selectedServiceName: [],\r\n selectedBroadband: null,\r\n selectedPlan: null,\r\n activeFilter: null,\r\n activeAlerts: [],\r\n});\r\n\r\nexport default PlansAndServicesContext;\r\n","/**\r\n * Returns postcode from specified address.\r\n * @param address\r\n * @returns {string|undefined}\r\n */\r\nexport function getPostcodeFromAddress(address) {\r\n if (!address) return;\r\n const match = address.match(/(\\d{4})(?:, [a-zA-Z0-9\\s]+)?$/);\r\n if (match) {\r\n return match[1];\r\n }\r\n}\r\n\r\n/**\r\n * Returns true, if postcode is from South Island.\r\n * @param postcode\r\n * @returns {boolean}\r\n */\r\nexport function isSouthIslandPostcode(postcode) {\r\n return Boolean(postcode && postcode.match(/^[789]/));\r\n}\r\n\r\n/**\r\n * Returns true, if specified address is in South Island.\r\n * @param address\r\n * @returns {boolean}\r\n */\r\nexport function isSouthIslandAddress(address) {\r\n if (!address) return false;\r\n const postcode = getPostcodeFromAddress(address);\r\n return isSouthIslandPostcode(postcode);\r\n}\r\n\r\n/**\r\n * Returns customer's address.\r\n * @param customer\r\n * @returns {string}\r\n */\r\nexport function getCustomerAddress(customer) {\r\n return (\r\n customer &&\r\n customer.Property &&\r\n customer.Property.PropertyInfo &&\r\n customer.Property.PropertyInfo.Address\r\n );\r\n}\r\n\r\n/**\r\n * Returns true, if customer lives in South Island.\r\n * @param customer\r\n * @returns {boolean}\r\n */\r\nexport function isSouthIslandCustomer(customer) {\r\n const address = getCustomerAddress(customer);\r\n return Boolean(address && isSouthIslandAddress(address));\r\n}\r\n","import React from 'react';\r\nimport { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport { branch, compose, mapProps, withProps, renderNothing, withHandlers } from 'recompose';\r\n\r\nimport ActionsContext from '../context/ActionsContext';\r\nimport UIContext from '../context/UIContext';\r\nimport CustomerContext from '../context/CustomerContext';\r\nimport PlandAndServicesContext from '../context/PlandAndServicesContext';\r\n\r\nimport {\r\n getPostcodeFromAddress,\r\n isSouthIslandPostcode,\r\n} from '../utils/address';\r\n\r\n/**\r\n * HOC\r\n * Injects selected properties from provided context into\r\n * components props\r\n */\r\nexport const withContextProps = (\r\n Context,\r\n propNames = []\r\n) => Component => props => {\r\n function getContextProps(context) {\r\n return propNames.reduce((acc, propName) => {\r\n acc[propName] = context[propName];\r\n return acc;\r\n }, {});\r\n }\r\n\r\n return (\r\n {props.check.title}
\r\n \r\n
\r\n );\r\n};\r\n\r\nconst IconEditor = ({ img = null, className }) => (\r\n \r\n
\r\n);\r\n\r\nexport default compose(\r\n withExperienceEditor,\r\n // Do not render if img src not set (except of when editing)\r\n branch(\r\n ({ isExperienceEditor, img }) =>\r\n !isExperienceEditor && !(img && img.value && img.value.src),\r\n renderNothing\r\n ),\r\n // Render icon editor if editing\r\n branch(\r\n ({ isExperienceEditor }) => Boolean(isExperienceEditor),\r\n renderComponent(IconEditor)\r\n )\r\n)(IconImg);\r\n","import React from \"react\";\r\nimport { RichText, Text } from \"@sitecore-jss/sitecore-jss-react\";\r\nimport { default as Icon } from \"../Icon\";\r\n\r\nconst ToolTip = props => {\r\n return (\r\n \r\n
\r\n ) : null}\r\n \r\n {props.content.head ? (\r\n
\r\n \r\n)};\r\n\r\nexport default ToolTip;\r\n","export const idGen = () => {\r\n return (\r\n \"uid\" +\r\n Math.random()\r\n .toString(36)\r\n .substr(2, 9)\r\n );\r\n};\r\n","import React, { Component } from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose } from 'recompose';\r\n\r\nimport { default as Icon } from '../Icon';\r\nimport { default as ToolTip } from '../ToolTip';\r\nimport { idGen } from '../../utils/id-generator';\r\n\r\nimport { withExperienceEditor, withTouch } from '../../enhancers';\r\n\r\nclass CTA extends Component {\r\n state = {\r\n hovered: false,\r\n };\r\n\r\n tooltipRef = null;\r\n // Enable additional Tooltip Btn on CTA for Touch devices\r\n tooltipBtnEnabled = this.props.isTouch;\r\n\r\n handler = e => {\r\n e.preventDefault();\r\n const { disabled, fields, onClick, onDisabledClick } = this.props;\r\n if (disabled) {\r\n onDisabledClick && onDisabledClick(fields);\r\n } else {\r\n onClick && onClick(fields);\r\n }\r\n };\r\n\r\n getStateLabel = () => {\r\n const fields = this.props.fields;\r\n if (this.props.selected) {\r\n return fields.SelectedLabel;\r\n }\r\n if (this.state.hovered) {\r\n return fields.HoverLabel;\r\n }\r\n return fields.Label;\r\n };\r\n\r\n getStateIcon = () => {\r\n const fields = this.props.fields;\r\n if (this.props.selected) {\r\n return fields.SelectedIcon;\r\n }\r\n if (this.state.hovered) {\r\n return fields.HoverIcon;\r\n }\r\n return fields.Icon;\r\n };\r\n\r\n toggleHover = (flag, TT) => {\r\n this.setState({\r\n hovered: flag,\r\n });\r\n\r\n if (this.isToolTipEnabled()) {\r\n if (flag) {\r\n this.activateToolTip(TT.id);\r\n } else {\r\n this.deActivateToolTip(TT.id);\r\n }\r\n }\r\n };\r\n\r\n activateToolTip = id => {\r\n const tooltip = document.getElementById(id);\r\n if (tooltip) {\r\n const height = tooltip.clientHeight;\r\n const styles = {\r\n bottom: `-${height + 15}px`,\r\n left: '15px',\r\n };\r\n Object.assign(tooltip.style, styles);\r\n this.tooltipRef = tooltip;\r\n tooltip.className += ' shown';\r\n document.addEventListener('mousemove', this.updateTooltip);\r\n }\r\n };\r\n\r\n deActivateToolTip = id => {\r\n document.removeEventListener('mousemove', this.updateTooltip);\r\n const tooltip = document.getElementById(id);\r\n if (tooltip) {\r\n tooltip.className = tooltip.className.replace('shown', '');\r\n }\r\n this.tooltipRef = null;\r\n };\r\n\r\n updateTooltip = $event => {\r\n const tooltip = this.tooltipRef;\r\n let xShift = $event.movementX;\r\n if (tooltip) {\r\n const coords = tooltip.getBoundingClientRect();\r\n const totalWidth = window && window.innerWidth;\r\n if (\r\n (coords.left - 15 < 0 && xShift < 0) ||\r\n (totalWidth && coords.right - 15 > totalWidth && xShift > 0)\r\n ) {\r\n xShift = 0;\r\n }\r\n const xShiftFinal = parseInt(tooltip.style.left, 10) + xShift;\r\n const styles = {\r\n left: `${xShiftFinal}px`,\r\n };\r\n Object.assign(tooltip.style, styles);\r\n }\r\n };\r\n\r\n getStateStyles = () => {\r\n let generated = {};\r\n let styles =\r\n this.props.fields &&\r\n this.props.fields.CTAColorSchema &&\r\n this.props.fields.CTAColorSchema.fields;\r\n if (!styles) {\r\n styles = this.props.fields;\r\n }\r\n if (this.props.selected) {\r\n generated = {\r\n borderColor: styles.SelectedColor.value,\r\n color: styles.SelectedColor.value,\r\n backgroundColor: styles.SelectedBackgroundColor.value,\r\n };\r\n } else if (this.state.hovered) {\r\n generated = {\r\n borderColor: styles.HoverColor.value,\r\n color: styles.HoverColor.value,\r\n backgroundColor: styles.HoverBackgroundColor.value,\r\n };\r\n } else {\r\n generated = {\r\n borderColor: styles.Color.value,\r\n color: styles.Color.value,\r\n backgroundColor: styles.BackgroundColor.value,\r\n };\r\n }\r\n\r\n return generated;\r\n };\r\n\r\n getSubText = () => {\r\n let sub = null;\r\n if (this.props.fields.HelperText) {\r\n sub = this.props.fields.HelperText;\r\n }\r\n if (this.props.fields.SubTitle) {\r\n sub = this.props.fields.SubTitle;\r\n }\r\n return sub;\r\n };\r\n\r\n isToolTipEnabled = (isInEE = false) => {\r\n if (isInEE) {\r\n return (\r\n this.props.fields.TTDescription || this.props.fields.TTHeading\r\n );\r\n }\r\n return (\r\n (this.props.fields.TTDescription &&\r\n this.props.fields.TTDescription.value) ||\r\n (this.props.fields.TTHeading && this.props.fields.TTHeading.value)\r\n );\r\n };\r\n\r\n toggleToolTip = ($e, id) => {\r\n $e.preventDefault();\r\n $e.stopPropagation();\r\n this.tooltipRef ? this.deActivateToolTip(id) : this.activateToolTip(id);\r\n };\r\n\r\n getToolTip = () => {\r\n const TT = {\r\n id: idGen(),\r\n };\r\n if (this.isToolTipEnabled()) {\r\n const fields = this.props.fields;\r\n TT.head = fields.TTHeading ? fields.TTHeading : '';\r\n TT.body = fields.TTDescription ? fields.TTDescription : '';\r\n TT.icon = fields.TTImg ? fields.TTImg : '';\r\n TT.color = fields.TTColor ? fields.TTColor : '';\r\n }\r\n return TT;\r\n };\r\n\r\n render() {\r\n const subText = this.getSubText();\r\n const toolTip = this.getToolTip();\r\n const fields = this.props.fields;\r\n const disabled = this.props.disabled;\r\n const textPattern = /<\\/?/;\r\n const buttonLabel = this.getStateLabel();\r\n\r\n const { isExperienceEditor, isTouch } = this.props;\r\n\r\n return (\r\n \r\n
\r\n ) : null}\r\n {props.content.body ? (\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n this.toggleToolTip($event, toolTip.id)\r\n }\r\n >\r\n
\r\n ) : null} */}\r\n \r\n\r\n {isExperienceEditor && this.isToolTipEnabled(true) ? (\r\n \r\n \r\n
\r\n ) : null}\r\n\r\n {/* {!isExperienceEditor &&\r\n this.tooltipBtnEnabled &&\r\n this.isToolTipEnabled() ? (\r\n \r\n {textPattern.test(subText.value) ? (\r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n \r\n ) : this.isToolTipEnabled(true) ? (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n);\r\nLoadingIcon.propTypes = propTypes;\r\nLoadingIcon.defaultProps = defaultProps;\r\n\r\nexport default LoadingIcon;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport LoadingIcon from '../LoadingIcon';\r\n\r\nimport styles from './styles.module.scss';\r\n\r\nconst propTypes = {\r\n color: PropTypes.string,\r\n bgColor: PropTypes.string,\r\n};\r\nconst defaultProps = {\r\n color: '#000',\r\n bgColor: '#fff',\r\n};\r\n\r\nconst LoadingOverlay = ({ color, bgColor }) => (\r\n \r\n
\r\n);\r\nLoadingOverlay.propTypes = propTypes;\r\nLoadingOverlay.defaultProps = defaultProps;\r\n\r\nexport default LoadingOverlay;\r\n","import React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose } from 'recompose';\r\nimport TextInput from './TextInput';\r\nimport LoadingAnimation from '../AddressPicker/LoadingAnimation';\r\nimport { Cross, Loading } from '../SVG';\r\n// import { default as Alert } from '../Common/Alert';\r\nimport { default as CTAButton } from '../CTA/CTAButton';\r\nimport LoadingOverlay from '../Common/LoadingOverlay';\r\nimport { withActions, withSaving } from '../../enhancers';\r\n\r\nclass AddressPicker extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n focused: false,\r\n value: '',\r\n\r\n isCheckingAddress: false,\r\n isCheckingAutocomplete: false,\r\n\r\n manualAddressRequired: false,\r\n selectedAddress: null,\r\n\r\n searchResults: [],\r\n icpResults: [],\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n };\r\n\r\n if (props && props.preselectedAddress) {\r\n this.state.selectedAddress = props.preselectedAddress;\r\n this.state.value = props.preselectedAddress;\r\n }\r\n\r\n this.inputField = null;\r\n this.searchTimer = null;\r\n\r\n this.steps = [\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n ];\r\n\r\n this.manualAddress = {\r\n Street: null,\r\n Suburb: null,\r\n City: null,\r\n Code: null, \r\n };\r\n\r\n this.manualAddressRefs = [];\r\n this.manualAddressInput = React.createRef();\r\n this.manualSuburbInput = React.createRef();\r\n this.manualCodeInput = React.createRef();\r\n this.manualCityInput = React.createRef();\r\n this.manualAddressRefs[0] = this.manualAddressInput;\r\n this.manualAddressRefs[1] = this.manualSuburbInput;\r\n this.manualAddressRefs[2] = this.manualCodeInput;\r\n this.manualAddressRefs[3] = this.manualCityInput;\r\n\r\n this.clearInputField = this.clearInputField.bind(this);\r\n this.updateSelectedAddress = this.updateSelectedAddress.bind(this);\r\n this.updateSelectedICPAddress = this.updateSelectedICPAddress.bind(\r\n this\r\n );\r\n this.checkForMultipleICPs = this.checkForMultipleICPs.bind(this);\r\n this.updateManualAddress = this.updateManualAddress.bind(this);\r\n this.checkManualAddress = this.checkManualAddress.bind(this);\r\n this.updateValue = this.updateValue.bind(this);\r\n this.proceedWithoutICP = this.proceedWithoutICP.bind(this);\r\n }\r\n\r\n componentWillReceiveProps(nextProps, _) {\r\n if (nextProps.preselectedAddress !== this.props.preselectedAddress) {\r\n this.setState({\r\n selectedAddress: nextProps.preselectedAddress || '',\r\n value: nextProps.preselectedAddress || '',\r\n });\r\n }\r\n }\r\n\r\n updateElementFocus = () => {\r\n this.setState(\r\n ({ focused }) => ({\r\n focused: !focused,\r\n }),\r\n () => {\r\n if (!this.state.focused) {\r\n if (!this.state.value) {\r\n this.setState({\r\n selectedAddress:\r\n this.props.preselectedAddress || '',\r\n value: this.props.preselectedAddress || '',\r\n });\r\n }\r\n }\r\n }\r\n );\r\n };\r\n\r\n focusOnInputField = () => {\r\n this.inputField.focus();\r\n };\r\n\r\n postponeAction = () => {\r\n return new Promise(resolve => setTimeout(resolve, 1000));\r\n };\r\n\r\n async clearInputField() {\r\n this.setState({\r\n manualAddressRequired: false,\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isCheckingAutocomplete: false,\r\n isSaveError: false,\r\n value: '',\r\n saveErrorMsg: '',\r\n selectedAddress: null,\r\n });\r\n this.steps = [\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n ];\r\n this.focusOnInputField();\r\n }\r\n\r\n async updateSelectedAddress(address) {\r\n const { actions } = this.props;\r\n\r\n this.setState({\r\n value: address.PartialAddress,\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: true,\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n });\r\n\r\n this.steps[0] = { started: true, completed: false };\r\n try {\r\n const customer = await actions.updateAddress(address);\r\n this.steps[0] = { started: true, completed: true };\r\n this.steps[1] = { started: true, completed: false };\r\n this.checkForMultipleICPs(customer, address);\r\n } catch (error) {\r\n this.setState({\r\n selectedAddress: null,\r\n value: '',\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isSaveError: true,\r\n saveErrorMsg: 'Error: Unable to save current address',\r\n });\r\n }\r\n }\r\n\r\n async updateSelectedICPAddress(address) {\r\n const { actions } = this.props;\r\n\r\n this.setState({\r\n searchResults: [],\r\n icpResults: [],\r\n isSaveError: false,\r\n isCheckingAddress: true,\r\n saveErrorMsg: '',\r\n });\r\n\r\n this.steps[1] = { started: true, completed: false };\r\n try {\r\n await actions.updateICPAddress(address);\r\n this.setState({\r\n selectedAddress: address.IcpAddress,\r\n icpResults: [],\r\n isCheckingAddress: true,\r\n isSaveError: false,\r\n });\r\n this.steps[1] = { started: true, completed: true };\r\n this.steps[2] = { started: true, completed: false };\r\n\r\n try {\r\n // Call: Save ICP to Analitics\r\n actions.pushEpValuesToDatalayer();\r\n } catch (error) {\r\n console.log('Analitics error', error);\r\n }\r\n\r\n this.postponeAction().then(() => {\r\n this.steps[2] = { started: true, completed: true };\r\n this.setState({\r\n isCheckingAddress: false,\r\n });\r\n });\r\n } catch (error) {\r\n this.setState({\r\n selectedAddress: null,\r\n value: '',\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isSaveError: true,\r\n saveErrorMsg: 'Error: Unable to save current ICP number',\r\n });\r\n }\r\n }\r\n\r\n checkForMultipleICPs(customer, address) {\r\n const { fields, actions } = this.props;\r\n const IcpEnabled =\r\n fields && fields.ICPLookupEnabled && fields.ICPLookupEnabled.value;\r\n const ICPList =\r\n customer &&\r\n customer.PriceChecker &&\r\n customer.PriceChecker.PossibleAddresses;\r\n\r\n if (IcpEnabled && ICPList && ICPList.length) {\r\n this.steps[2] = { started: true, completed: false };\r\n this.setState({\r\n searchResults: [],\r\n icpResults: ICPList,\r\n isCheckingAddress: false,\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n });\r\n } else {\r\n this.steps[1] = { started: true, completed: false };\r\n this.steps[2] = { started: true, completed: false };\r\n this.setState({\r\n searchResults: [],\r\n selectedAddress: address,\r\n value: address.PartialAddress,\r\n icpResults: [],\r\n isCheckingAddress: true,\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n });\r\n\r\n try {\r\n // Call: Save ICP to Analitics\r\n actions.pushEpValuesToDatalayer();\r\n } catch (error) {\r\n console.log('Analitics error', error);\r\n }\r\n\r\n this.postponeAction().then(() => {\r\n this.steps[1] = { started: true, completed: true };\r\n this.steps[2] = { started: true, completed: true };\r\n this.setState({\r\n isCheckingAddress: false,\r\n });\r\n });\r\n }\r\n }\r\n\r\n checkManualAddress() {\r\n return (\r\n Object.values(this.manualAddress).filter(val => val).length === 4\r\n );\r\n }\r\n\r\n triggerEvent = (el, type) => {\r\n if ('createEvent' in document) {\r\n var e = document.createEvent('HTMLEvents');\r\n e.initEvent(type, false, true);\r\n el.dispatchEvent(e);\r\n }\r\n };\r\n\r\n async updateManualAddress() {\r\n const valid = this.checkManualAddress();\r\n\r\n if (valid) {\r\n const { actions } = this.props;\r\n\r\n const jointLine = Object.values(this.manualAddress)\r\n .map(line => line)\r\n .join(', ');\r\n const address = {\r\n PartialAddress: jointLine,\r\n Moniker: null,\r\n };\r\n\r\n try {\r\n await actions.updateAddress(address);\r\n this.setState({\r\n selectedAddress: address.PartialAddress,\r\n value: address.PartialAddress,\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isSaveError: false,\r\n manualAddressRequired: false,\r\n });\r\n } catch (error) {\r\n this.setState({\r\n selectedAddress: null,\r\n value: '',\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isSaveError: true,\r\n saveErrorMsg: 'Error: Unable to save current address',\r\n });\r\n }\r\n } else {\r\n let toShake = document.getElementsByClassName('input-error');\r\n if (toShake && toShake.length) {\r\n toShake = toShake[0];\r\n toShake.className += ' shake-it';\r\n setTimeout(() => {\r\n toShake.className = toShake.className.replace(\r\n 'shake-it',\r\n ''\r\n );\r\n }, 1500);\r\n } else {\r\n // No value entered\r\n const firstEmpty = Object.values(this.manualAddress).findIndex(\r\n val => !val\r\n );\r\n const manualInputs = document.getElementsByClassName(\r\n 'manual-address-input'\r\n );\r\n if (\r\n firstEmpty >= 0 &&\r\n firstEmpty < this.manualAddressRefs.length\r\n ) {\r\n this.manualAddressRefs[firstEmpty].current.updateValue({\r\n target: { value: '' },\r\n });\r\n try {\r\n const toShakeInput = manualInputs[firstEmpty];\r\n toShakeInput.className += ' shake-it';\r\n setTimeout(() => {\r\n toShakeInput.className = toShakeInput.className.replace(\r\n 'shake-it',\r\n ''\r\n );\r\n }, 1500);\r\n } catch {}\r\n }\r\n }\r\n }\r\n }\r\n\r\n updateValue = e => {\r\n const addressSearch = e.target.value;\r\n const { actions } = this.props;\r\n\r\n if (addressSearch.length >= 1) {\r\n this.setState({\r\n value: addressSearch,\r\n isCheckingAutocomplete: true,\r\n searchResults: [],\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n });\r\n\r\n clearTimeout(this.searchTimer);\r\n this.searchTimer = setTimeout(async () => {\r\n let trimmed = addressSearch;\r\n trimmed = trimmed.replace(/^([0-9]*\\s*)|\\s*/gi, '');\r\n\r\n if (trimmed.length >= 1) {\r\n try {\r\n const address = await actions.searchAddress(\r\n addressSearch\r\n );\r\n if (address.Addresses && address.Addresses.length) {\r\n // Get first 5\r\n const trimedList = address.Addresses.filter(\r\n (el, i) => i <= 4\r\n );\r\n this.steps = [\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n { started: false, completed: false },\r\n ];\r\n this.setState({\r\n isCheckingAutocomplete: false,\r\n manualAddressRequired: false,\r\n searchResults: trimedList,\r\n });\r\n // Commented temporary per Slav's comment on bug report\r\n //this.scrollTop();\r\n } else {\r\n this.setState({\r\n isCheckingAutocomplete: false,\r\n manualAddressRequired: true,\r\n });\r\n }\r\n } catch (error) {\r\n this.setState({\r\n isCheckingAutocomplete: false,\r\n manualAddressRequired: true,\r\n });\r\n }\r\n }\r\n }, 1000);\r\n } else {\r\n this.setState({\r\n value: '',\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAutocomplete: false,\r\n });\r\n }\r\n };\r\n\r\n updateManualValue = (key, value) => {\r\n return (this.manualAddress[key] = value);\r\n };\r\n\r\n enableManualAddress = () => {\r\n this.setState({\r\n manualAddressRequired: true,\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n });\r\n };\r\n\r\n scrollTop = () => {\r\n return setTimeout(() => {\r\n const addressInput = document.getElementsByClassName(\r\n 'address-input'\r\n );\r\n if (addressInput && addressInput.length) {\r\n const scrollTop =\r\n addressInput[0].offsetTop -\r\n (window && window.innerHeight / 3);\r\n if (window && window.scrollTo) {\r\n window.scrollTo({\r\n top: scrollTop,\r\n left: 0,\r\n behavior: 'smooth',\r\n });\r\n } else {\r\n const root = document.getElementsByTagName('html')[0];\r\n root.scrollTop = scrollTop;\r\n }\r\n }\r\n }, 500);\r\n };\r\n\r\n makeItScroll = (e, i, address, type) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const collection = document.getElementsByClassName('result');\r\n const noAddressLink =\r\n document.getElementsByClassName('noaddress') &&\r\n document.getElementsByClassName('noaddress')[0];\r\n if (e.which === 38 || e.keyCode === 38) {\r\n if (i < 0) {\r\n collection[collection.length - 1].focus();\r\n }\r\n if (i > 0) {\r\n collection[i - 1].focus();\r\n }\r\n if (i === 0) {\r\n this.focusOnInputField();\r\n // noAddressLink\r\n // ? noAddressLink.focus()\r\n // : collection[collection.length - 1].focus();\r\n }\r\n }\r\n if (e.which === 40 || e.keyCode === 40) {\r\n if (i < 0) {\r\n collection[0].focus();\r\n }\r\n if (i < collection.length - 1) {\r\n collection[i + 1].focus();\r\n }\r\n if (i === collection.length - 1) {\r\n noAddressLink ? noAddressLink.focus() : collection[0].focus();\r\n }\r\n }\r\n if (e.which === 13 || e.keyCode === 13) {\r\n if (type === 'address') {\r\n this.updateSelectedAddress(address);\r\n }\r\n if (type === 'manual') {\r\n this.enableManualAddress();\r\n }\r\n if (type === 'icp') {\r\n this.updateSelectedICPAddress(address);\r\n }\r\n if (type === 'noicp') {\r\n this.proceedWithoutICP();\r\n }\r\n }\r\n };\r\n\r\n slideToDropdown = e => {\r\n if (e.which === 40 || e.keyCode === 40) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const collection = document.getElementsByClassName('result');\r\n if (collection && collection.length) {\r\n collection[0].focus();\r\n }\r\n }\r\n };\r\n\r\n focusElement = ref => {\r\n setTimeout(() => {\r\n if (this.divRef) {\r\n const link = ReactDOM.findDOMNode(this.divRef);\r\n if (link.className.indexOf('touched') < 0) {\r\n link.focus();\r\n link.className += ' touched';\r\n }\r\n }\r\n }, 300);\r\n };\r\n\r\n proceedWithoutICP() {\r\n this.setState({\r\n searchResults: [],\r\n icpResults: [],\r\n isCheckingAddress: false,\r\n isSaveError: false,\r\n saveErrorMsg: '',\r\n });\r\n\r\n this.steps[0] = { started: true, completed: true };\r\n this.steps[1] = { started: false, completed: false };\r\n this.steps[2] = { started: false, completed: false };\r\n }\r\n\r\n render() {\r\n let classList = [\r\n 'text-input',\r\n this.state.focused ? 'focused' : null,\r\n this.state.value ? 'populated' : null,\r\n ];\r\n const UnableToLocate = this.props.fields.UnableToLocate;\r\n const isSaving = this.props.isSaving;\r\n\r\n return (\r\n \r\n \r\n {\r\n this.inputField = input;\r\n }}\r\n onFocus={() => this.updateElementFocus()}\r\n onBlur={() => this.updateElementFocus()}\r\n />\r\n {this.state.value && (\r\n \r\n
\r\n {this.state.manualAddressRequired && (\r\n \r\n
\r\n )}\r\n\r\n {this.state.searchResults.length >= 1 && (\r\n \r\n {this.state.searchResults.map((address, index) => (\r\n \r\n this.updateSelectedAddress(address)\r\n }\r\n onKeyUp={e =>\r\n this.makeItScroll(\r\n e,\r\n index,\r\n address,\r\n 'address'\r\n )\r\n }\r\n key={index}\r\n ref={\r\n index === 0\r\n ? div => {\r\n this.divRef = div;\r\n }\r\n : null\r\n }\r\n tabIndex={0}\r\n >\r\n {address.PartialAddress}\r\n {/* {index === 0\r\n ? this.focusElement.call(this, address)\r\n : null} */}\r\n
\r\n ))}\r\n \r\n \r\n this.updateSelectedICPAddress(address)\r\n }\r\n onKeyUp={e =>\r\n this.makeItScroll(e, index, address, 'icp')\r\n }\r\n ref={\r\n index === 0\r\n ? div => {\r\n this.divRef = div;\r\n }\r\n : null\r\n }\r\n tabIndex={0}\r\n >\r\n \r\n {address.IcpAddress}\r\n {' - '}\r\n \r\n \r\n {' ICP: '}\r\n {address.IcpNumber}\r\n \r\n\r\n {index === 0\r\n ? this.focusElement.call(this, address)\r\n : null}\r\n
\r\n ))}\r\n {this.props.fields.ICPConfirmTitle.value}
\r\n {this.state.icpResults.map((address, index) => (\r\n\r\n
\r\n )}\r\n\r\n {this.state.manualAddressRequired && (\r\n \r\n \r\n
\r\n \r\n )}\r\n\r\n {this.state.isSaveError ? (\r\n \r\n An Error occured while saving your Address. Please try\r\n again later.\r\n
\r\n ) : null}\r\n\r\n {/* {this.state.manualAddressRequired ? (\r\n \r\n
\r\n);\r\n\r\nexport default FormHeader;\r\n","import React, { Component } from 'react';\r\nimport { compose, withProps, branch, renderNothing } from 'recompose';\r\nimport AddressInput from '../FormFields/AddressInput';\r\nimport Header from '../FormHeader';\r\nimport { withCustomerAddress, withJourneyType, withJourneyTypes } from '../../enhancers';\r\n\r\nclass AddressPicker extends Component {\r\n getJourneyHeader = () => {\r\n const { fields } = this.props;\r\n const journey = this.props.journeyType;\r\n let header = fields.HeadingText;\r\n if (parseInt(journey, 10) === 1) {\r\n header =\r\n fields.MoveHouseTitle && fields.MoveHouseTitle.value\r\n ? fields.MoveHouseTitle\r\n : header;\r\n }\r\n if (parseInt(journey, 10) === 2) {\r\n header =\r\n fields.AddHouseTitle && fields.AddHouseTitle.value\r\n ? fields.AddHouseTitle\r\n : header;\r\n }\r\n return header;\r\n };\r\n\r\n getSubTitle = () => {\r\n const { fields } = this.props;\r\n const journey = this.props.journeyType;\r\n let subTitle = fields.Title;\r\n if (parseInt(journey, 10) === 1) {\r\n subTitle =\r\n fields.MoveHouseSubtitle && fields.MoveHouseSubtitle.value\r\n ? fields.MoveHouseSubtitle\r\n : subTitle;\r\n }\r\n if (parseInt(journey, 10) === 2) {\r\n subTitle =\r\n fields.AddHouseSubtitle && fields.AddHouseSubtitle.value\r\n ? fields.AddHouseSubtitle\r\n : subTitle;\r\n }\r\n return subTitle;\r\n };\r\n\r\n render() {\r\n const { fields, address } = this.props;\r\n const header = this.getJourneyHeader();\r\n const subTitle = this.getSubTitle();\r\n\r\n return (\r\n \r\n
\r\n);\r\n\r\nexport default ContinueButtonsWrapper;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { withExpandedPlan } from '../../enhancers/all-plans';\r\n\r\nimport ContinueButtonsWrapper from './ContinueButtonsWrapper';\r\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\r\n\r\nconst propTypes = {\r\n rendering: PropTypes.object.isRequired,\r\n};\r\n\r\nconst ContinueButtons = ({ rendering, expandedPlan }) => (\r\n \r\n {children}\r\n
\r\n \r\n
\r\n
\r\n);\r\n\r\nexport default AllPlans;\r\n","import React from 'react';\r\nimport { compose, withHandlers, withState } from 'recompose';\r\nimport Cookies from 'js-cookie';\r\n\r\nimport { withActions } from '../../enhancers';\r\n\r\nimport CTA from '../CTA';\r\nimport LoadingOverlay from '../Common/LoadingOverlay';\r\n\r\nconst AllPlansContinueButton = compose(\r\n // use internal state instead of global, otherwise all buttons\r\n // will have loading indicator on\r\n withState('isSaving', 'setSaving', false),\r\n withActions,\r\n withHandlers({\r\n onClick: ({ planId, fields, actions, isSaving, setSaving }) => async () => {\r\n if (isSaving) return;\r\n\r\n if (planId) {\r\n setSaving(true);\r\n try {\r\n await actions.toggleSelectedPlan(planId, true);\r\n } catch (err) { }\r\n setSaving(false);\r\n }\r\n const url = (\r\n fields.ContinueUrl &&\r\n fields.ContinueUrl.value &&\r\n fields.ContinueUrl.value.href\r\n );\r\n\r\n if (url && typeof window != 'undefined') {\r\n const expiryDate = new Date();\r\n expiryDate.setMilliseconds(expiryDate.getMilliseconds() + 60000);\r\n let options = {\r\n expires: expiryDate,\r\n path: '/',\r\n secure: true,\r\n domain: '.contact.co.nz'\r\n };\r\n Cookies.remove('sharedPlanId');\r\n Cookies.remove('selectedService');\r\n\r\n Cookies.set('sharedPlanId', planId, options);\r\n\r\n window.location = url;\r\n }\r\n }\r\n })\r\n)(({ isSaving, loading, actions, planId, ...ctaProps }) => (\r\n \r\n
- \r\n
\r\n
\r\n));\r\n\r\nexport default AllPlansContinueButton;\r\n","export function getFieldValue(field) {\r\n return field && field.value;\r\n}\r\n\r\nexport function getImageFieldSrc(field) {\r\n const value = getFieldValue(field);\r\n if (value && typeof value == 'object') {\r\n return value.src;\r\n }\r\n return null;\r\n}\r\n\r\nexport function stripFieldTags (field) {\r\n if (field && field.value) {\r\n return {\r\n value: field.value.replace(/(<([^>]+)>)/ig,\"\"),\r\n editable: field.editable,\r\n };\r\n }\r\n}\r\n","import React from 'react';\r\nimport { compose, withHandlers } from 'recompose';\r\n\r\nimport { withActions } from '../../enhancers';\r\n\r\nexport const withTogglePlanHandler = compose(\r\n withActions,\r\n withHandlers({\r\n onTogglePlan: ({ fields, actions }) => () => {\r\n const id = (fields && fields.ApiPlanId && fields.ApiPlanId.value) || null;\r\n actions.toggleSelectedPlan(id);\r\n }\r\n })\r\n);\r\n\r\n/**\r\n * HOC\r\n *\r\n * Extracts data from component sitecore content using extractFn function\r\n * and then saves it into the store (in extractFn function).\r\n *\r\n * @param extractFn\r\n */\r\nexport const withExtractContentToState = (extractFn) => compose(\r\n withActions,\r\n Component => {\r\n class WrappedComponent extends React.Component {\r\n componentDidMount() {\r\n extractFn(this.props);\r\n }\r\n\r\n render () {\r\n return \r\n
\r\n \r\n
- \r\n {Object.keys(DISCOUNTS).map((discountKey) => {\r\n const { fieldName, icon } = DISCOUNTS[discountKey];\r\n return (\r\n
- \r\n
\r\n
\r\n {this.props.children}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default ContactModal;\r\n","import React from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { default as CTAButton } from '../CTA/CTAButton';\r\n\r\nconst PlanTAC = props => {\r\n const fields = props.fields || {};\r\n\r\n const toggleLink = () => {\r\n const link =\r\n fields &&\r\n fields.TandCPdfLink &&\r\n fields.TandCPdfLink.value &&\r\n fields.TandCPdfLink.value.href;\r\n if (link) {\r\n window && (window.location = link);\r\n }\r\n };\r\n\r\n const getDetailsStyles = (styles, lab) => {\r\n const label =\r\n lab && lab.value && lab.value.text\r\n ? { value: lab.value.text }\r\n : null;\r\n const fields = styles && styles.fields;\r\n if (fields) {\r\n return {\r\n Color:\r\n fields.TextColorInitialState &&\r\n fields.TextColorInitialState.fields &&\r\n fields.TextColorInitialState.fields.HexColor,\r\n Label: label || fields.TextInitialState,\r\n Icon: fields.IconInitialState,\r\n BackgroundColor:\r\n fields.BackgroundColorInitialState &&\r\n fields.BackgroundColorInitialState.fields &&\r\n fields.BackgroundColorInitialState.fields.HexColor,\r\n HoverLabel:\r\n (fields.TextHoverState && fields.TextHoverState.value) ||\r\n label ||\r\n fields.TextInitialState,\r\n HoverIcon: fields.IconHoverState,\r\n HoverColor:\r\n fields.TextColorHoverState &&\r\n fields.TextColorHoverState.fields &&\r\n fields.TextColorHoverState.fields.HexColor,\r\n HoverBackgroundColor:\r\n fields.BackgroundColorHoverState &&\r\n fields.BackgroundColorHoverState.fields &&\r\n fields.BackgroundColorHoverState.fields.HexColor,\r\n };\r\n }\r\n return {\r\n Label: label,\r\n HoverLabel: label,\r\n };\r\n };\r\n\r\n const pdfCTA = getDetailsStyles(\r\n props.fields.TandCPdfStyle,\r\n props.fields.TandCPdfLink\r\n );\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PlanTAC;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withStateHandlers } from 'recompose';\r\n\r\nimport Modal from '../../../Common/Modal';\r\nimport PlanTAC from '../../../PlanCard/PlanTAC';\r\n\r\nconst propTypes = {\r\n fields: PropTypes.object.isRequired,\r\n existingFields: PropTypes.object.isRequired,\r\n};\r\n\r\nconst TermsAndConditions = ({ fields, existingFields, isModalOpen, showModal, hideModal }) => (\r\n <>\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {fields.ViewTSCSText && fields.ViewTSCSText.value ? (\r\n
\r\n {isModalOpen && (\r\n \r\n
\r\n \r\n
\r\n \r\n {fields.DiscountsOverride && fields.DiscountsOverride.value ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {continueButtons}\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n {props.placeholder.length > 0 && props.placeholder[0].props.fields.ExistingPlan\r\n ? displayPlans()\r\n : React.Children.map(props.placeholder, (child, index) =>\r\n React.cloneElement(child, {\r\n slideIndex: index,\r\n })\r\n )\r\n }\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCarousel.propTypes = propTypes;\r\n\r\nconst PrevArrow = props => {\r\n const { className, onClick } = props;\r\n return ;\r\n};\r\nconst NextArrow = props => {\r\n const {\r\n className,\r\n onClick,\r\n slideCount,\r\n currentSlide,\r\n goTo,\r\n device,\r\n } = props;\r\n const visibilityLimit = device === 'tablet' ? 2 : 3;\r\n const handler =\r\n slideCount - currentSlide > visibilityLimit ? onClick : () => goTo(0);\r\n return ;\r\n};\r\n\r\n/**\r\n * React Hook\r\n * Scrolls the slider to selected tile once mounted.\r\n *\r\n * @param selected\r\n * @param slideIndex\r\n */\r\nexport function useScrollToSelectedOnce({ selected, slideIndex }) {\r\n const { setInitialSlide } = useContext(SliderContext);\r\n\r\n useEffect(() => {\r\n if (selected) {\r\n setInitialSlide(slideIndex);\r\n }\r\n // eslint-disable-next-line\r\n }, []);\r\n}\r\n\r\nexport default compose(withPlansAndServicesProps([\r\n 'selectedPlan',\r\n 'selectedService'\r\n]), withProps(({ selectedPlan, selectedService }) => ({\r\n selectedPlan: selectedPlan,\r\n selectedService: selectedService\r\n})), withActions, withIsSouthIsland, withCustomerAddress, withDevice([1024, 1200]), withCustomerServiceRates, withAvailableServices, withPriceChecker)(Carousel);\r\n\r\n/**\r\n * Returns geo location from specified plan.\r\n * @param planID\r\n * @param isSouthLand\r\n * @param postalcode\r\n @returns {boolean}\r\n */\r\nfunction checkGeoLocation(planID, isSouthLand, postalcode) {\r\n var geolocation;\r\n {\r\n var planList = window.ContactEnergy.Data.PlansRules;\r\n for (var i = 0; i < planList.length; i++) {\r\n if (planList[i].id === planID.value) {\r\n geolocation = planList[i].geographicalLocation\r\n break;\r\n }\r\n }\r\n }\r\n if (geolocation === \"ALL\" || !geolocation) {\r\n return false;\r\n }\r\n else {\r\n if (geolocation === \"NI\" && isSouthLand) {\r\n return true;\r\n }\r\n else if (geolocation === \"SI\" && !isSouthLand && postalcode) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n}\r\n\r\nfunction isPlanHidden(planID, customerTouEligible) {\r\n //if(customerTouEligible == false) {hide TOU plans} else {show them}\r\n try {\r\n var planList = window.ContactEnergy.Data.PlansRules;\r\n var plan = planList.find(f => f.id === planID.value);\r\n var touPlan = plan.touPlan;\r\n\r\n //console.log(\"IsPlanHidden planID=\", planID, \"customerTouEligible=\", customerTouEligible, \" touPlan=\", touPlan);\r\n\r\n if (customerTouEligible === false && touPlan) {\r\n return true;\r\n }\r\n else { return false; }\r\n } catch (error) { console.error(error); return true; }\r\n}\r\n\r\n/**\r\n * Returns geo location from specified plan.\r\n * @param planID\r\n @returns {string}\r\n */\r\nfunction getServicesToRemove(planID) {\r\n var serviceToRemove;\r\n var services;\r\n var servicePlanList = window.ContactEnergy.Data.PlansRules;\r\n for (var i = 0; i < servicePlanList.length; i++) {\r\n if (servicePlanList[i].id === planID.value) {\r\n services = servicePlanList[i].services\r\n break;\r\n }\r\n }\r\n for (var i = 0; i < services.length; i++) {\r\n if (services[i].mandatory && services[i].id !== \"ELEC\") {\r\n serviceToRemove = services[i].id;\r\n break;\r\n }\r\n }\r\n return serviceToRemove\r\n}\r\n\r\n\r\nfunction getCustomerTou(props) {\r\n\r\n var customerTouEligible = true;\r\n\r\n try {\r\n customerTouEligible = props.customerEligibilities.find(f => f.name === \"SMART TOU\").eligible;\r\n }\r\n catch (error) { }\r\n\r\n return customerTouEligible;\r\n}","import React from 'react';\r\nimport { withPlaceholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, withProps, lifecycle } from 'recompose';\r\n\r\nimport { withBestAvailableBroadband, withSelectedBroadband, withActions } from '../../enhancers';\r\nimport Carousel from './Carousel';\r\n\r\nconst CarouselBBPlans = ({ placeholder }) => (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withExperienceEditor(BroadbandContainer);\r\n","import React, { useEffect } from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, withProps, withHandlers } from 'recompose';\r\n\r\nimport {\r\n withCustomer,\r\n withActions,\r\n withSelectedBroadband,\r\n} from '../../enhancers';\r\n\r\nimport CTA from '../CTA';\r\nimport { Download, Upload } from '../SVG';\r\n\r\nimport { useScrollToSelectedOnce } from '../Common/Carousel';\r\n\r\nimport { default as Modal } from '../Common/Modal';\r\n\r\nconst BBTileFace = ({\r\n customer,\r\n fields,\r\n existingFields,\r\n apiId,\r\n selected,\r\n onToggleBroadband,\r\n slideIndex,\r\n}) => {\r\n useScrollToSelectedOnce({ selected, slideIndex });\r\n\r\n const [isShow, setShow] = React.useState(false);\r\n\r\n let BBDataCapDesc = existingFields.DataCapDesc.value;\r\n let BBNetworkDesc = existingFields.NetworkDesc.value;\r\n let BYOModemAllowedMessage = existingFields.BYOModemDesc.value;\r\n let isBYOModemAllowed = existingFields.BYOModemAllowed.value;\r\n\r\n const toggleTAC = () => {\r\n setShow(!isShow);\r\n };\r\n\r\n const bbChoose = (p) => {\r\n onToggleBroadband(p);\r\n toggleTAC();\r\n }\r\n\r\n const restoreOrReplace = (price, flag) => {\r\n if (flag) {\r\n return price.replace(/(\\/mth|\\/month)/gi, '');\r\n } else {\r\n return price.replace(/mth/gi, 'month');\r\n }\r\n };\r\n\r\n const BBOptions =\r\n customer &&\r\n customer.PriceChecker &&\r\n customer.PriceChecker.BroadbandOfferings &&\r\n customer.PriceChecker.BroadbandOfferings.Offerings;\r\n\r\n let finalPrice = existingFields.Price.value;\r\n let isRenderBundle = false;\r\n let initialPrice = finalPrice;\r\n let broadbandOfferings =\r\n customer &&\r\n customer.PriceChecker &&\r\n customer.PriceChecker.BroadbandOfferings &&\r\n customer.PriceChecker.BroadbandOfferings.Offerings;\r\n\r\n var downloadSpeed = existingFields.DownloadSpeed;\r\n var uploadSpeed = existingFields.UploadSpeed;\r\n\r\n if (existingFields\r\n && existingFields.EnableNorthPower\r\n && existingFields.EnableNorthPower.value == true) {\r\n if (broadbandOfferings) {\r\n let network = broadbandOfferings.find(plan => plan.Id === apiId);\r\n if (network &&\r\n network.Vendor == \"northpower\") {\r\n downloadSpeed = existingFields.NorthPowerDownloadSpeed;\r\n uploadSpeed = existingFields.NorthPowerUploadSpeed;\r\n }\r\n }\r\n }\r\n\r\n if (BBOptions) {\r\n const pricing = BBOptions.find(plan => plan.Id === apiId);\r\n\r\n if (pricing && pricing.BundlePrice) {\r\n finalPrice = restoreOrReplace(pricing.BundlePrice);\r\n initialPrice = restoreOrReplace(pricing.OriginalPrice, true);\r\n isRenderBundle = true;\r\n } else if (pricing && pricing.OriginalPrice) {\r\n finalPrice = restoreOrReplace(pricing.OriginalPrice);\r\n }\r\n }\r\n\r\n if (broadbandOfferings) {\r\n const BBOffering = broadbandOfferings.find(plan => plan.Id === apiId);\r\n\r\n if (BBOffering) {\r\n BBDataCapDesc = BBOffering.DataCapDesc;\r\n BBNetworkDesc = BBOffering.NetworkDesc;\r\n isBYOModemAllowed = BBOffering.BYOModemAllowed;\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n {fields.BBBestFor && fields.BBBestFor.value && (\r\n
\r\n\r\n\r\n );\r\n};\r\n\r\n/**\r\n * HOC\r\n * Injects selected (bool) prop.\r\n */\r\nconst withSelected = compose(\r\n withSelectedBroadband,\r\n withProps((props) => ({\r\n selected: props.selectedBroadband && props.selectedBroadband === props.apiId,\r\n }))\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects selected broadband toggle handler.\r\n */\r\nconst withToggleHandler = compose(\r\n withActions,\r\n withHandlers({\r\n onToggleBroadband: ({ actions, apiId, optionName }) => () => {\r\n actions.toggleSelectedBB(apiId, optionName);\r\n },\r\n })\r\n);\r\n\r\nexport default compose(\r\n withCustomer,\r\n withSelected,\r\n withToggleHandler\r\n)(BBTileFace);\r\n","import React from 'react';\r\nimport { branch, compose, renderNothing, withProps } from 'recompose';\r\n\r\nimport BBTileFace from './BBTileFace';\r\n\r\nconst BroadbandTiles = props => (\r\n \r\n
\r\n )}\r\n\r\n {fields.BBPlanRibbon && fields.BBPlanRibbon.value && (\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {finalPrice}\r\n {isRenderBundle && (\r\n \r\n {initialPrice}\r\n \r\n \r\n )}\r\n
\r\n {BBDataCapDesc && ({BBDataCapDesc}
)}\r\n {BBNetworkDesc && ({BBNetworkDesc}
)}\r\n {isBYOModemAllowed && ({BYOModemAllowedMessage}
)}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Learn more\r\n \r\n\r\n {isShow ? (\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
\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects broadband existingTileFields, apiId and optionName props.\r\n */\r\nconst withBroadbandProps = withProps(({ fields }) => {\r\n const existingFields =\r\n fields.BBExistingTile &&\r\n fields.BBExistingTile.fields;\r\n return {\r\n existingFields,\r\n apiId: existingFields.ApiId && existingFields.ApiId.value,\r\n optionName:\r\n existingFields.OptionName && existingFields.OptionName.value,\r\n };\r\n});\r\n\r\nexport default compose(\r\n withBroadbandProps,\r\n // do not render if no existing broadband fields present\r\n branch(({ existingFields }) => !existingFields, renderNothing),\r\n)(BroadbandTiles);\r\n","import React from 'react';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\n/**\r\n * A simple Content Block component, with a heading and rich text block.\r\n * This is the most basic building block of a content site, and the most basic\r\n * JSS component that's useful.\r\n */\r\nconst ContentBlock = ({ fields }) => (\r\n \r\n
\r\n);\r\n\r\nexport default Error;\r\n","// @flow\r\nimport React from 'react';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport cx from 'classnames';\r\n\r\nimport classes from './RatesOverview.module.scss';\r\n\r\ntype Props = {\r\n fields: Object,\r\n};\r\n\r\nconst MultipleRates = ({ fields }: Props) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default MultipleRates;\r\n","import React from 'react';\r\nimport { compose, branch, renderNothing } from 'recompose';\r\nimport cx from 'classnames';\r\nimport {\r\n RATE_UNIT_TYPE_WATT,\r\n RATE_FREE\r\n} from '../constants';\r\nimport classes from './RatesOverview.module.scss';\r\n\r\nconst Rate = ({ rate, totalRates, summedRates }) => (\r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default compose(\r\n branch(\r\n ({ summedRates }) => !summedRates || (!summedRates.watt && !summedRates.day),\r\n renderNothing\r\n ),\r\n)(Rate);\r\n","import React from 'react';\r\nimport {\r\n compose,\r\n withProps,\r\n branch,\r\n renderNothing,\r\n renderComponent,\r\n} from 'recompose';\r\nimport classNames from 'classnames';\r\n\r\nimport classes from './RatesOverview.module.scss';\r\n\r\nimport { hasMultipleRates, getSummedRates } from '../utils';\r\nimport { SERVICE_ID_ELECTRICITY, SERVICE_ID_PIPED_GAS } from '../constants';\r\n\r\nimport MultipleRates from './MultipleRates';\r\nimport Rate from './Rate';\r\n\r\nconst RatesOverview = ({ fields, rates, totalRates, summedRates }) => (\r\n \r\n {rate.titleMobile}\r\n
\r\n \r\n {rate.title}\r\n
\r\n\r\n {!(rate.lowRates.filter(obj => { if (obj.rate == RATE_FREE) return false; if(obj.type == RATE_UNIT_TYPE_WATT) return true; else return false; }).length > 1\r\n || rate.standardRates.filter(obj => { if (obj.rate == RATE_FREE) return false; if(obj.type == RATE_UNIT_TYPE_WATT) return true; else return false; }).length > 1) && (\r\n \r\n {summedRates.watt && (\r\n \r\n {summedRates.watt}/kWh\r\n \r\n )}\r\n {' '}\r\n {summedRates.day && (\r\n \r\n &{' '}{summedRates.day}/day\r\n \r\n )}\r\n
\r\n )}\r\n\r\n {(rate.lowRates.filter(obj => { if (obj.rate == RATE_FREE) return false; if (obj.type == RATE_UNIT_TYPE_WATT) return true; else return false; }).length > 1\r\n || rate.standardRates.filter(obj => { if (obj.rate == RATE_FREE) return false; if (obj.type == RATE_UNIT_TYPE_WATT) return true; else return false; }).length > 1) && (\r\n \r\n Multiple rates apply\r\n
\r\n )}\r\n \r\n
\r\n);\r\n\r\nexport default NoRates;\r\n","import React from 'react';\r\nimport { compose } from 'recompose';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Info } from '../SVG';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener';\r\nimport { withTouch } from '../../enhancers';\r\n\r\nclass InfoTip extends React.Component {\r\n state = {\r\n open: false,\r\n };\r\n\r\n infotipClose = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n infotipOpen = () => { \r\n this.setState({ open: !this.state.open });\r\n };\r\n\r\n render() {\r\n const { isTouch, fields } = this.props;\r\n\r\n if (isTouch) {\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 * Returns switch usage type text, e.g. \"Show standard user rates\"\r\n * @param usageType {APIUsageType}\r\n * @param message {string}\r\n * @return {string}\r\n */\r\nfunction getSwitchRatesLabel(usageType: APIUsageType, message: string): string {\r\n const switchedUsageType = usageType === USAGE_TYPE_STANDARD ? USAGE_TYPE_LOW : USAGE_TYPE_STANDARD;\r\n const utLabel = usageTypeLabel[switchedUsageType];\r\n if (!message || !utLabel) return '';\r\n return message.replace('%usageType%', utLabel.toLowerCase())\r\n}\r\n\r\nconst RateLabel = ({ label, userRatesLabel, tooltip }) => (\r\n <>\r\n \r\n
\r\n \r\n {rate.type === SERVICE_ID_ELECTRICITY && (\r\n
\r\n {areRatesToggleable && (\r\n \r\n {getSwitchRatesLabel(\r\n usageType,\r\n (fields.ToggleLabel && fields.ToggleLabel.value) || 'Show %usageType% rates'\r\n )}\r\n
\r\n )}\r\n \r\n
\r\n \r\n {currentRates.map((r, i) => (\r\n
\r\n {areRatesToggleable && (\r\n \r\n {getSwitchRatesLabel(\r\n usageType,\r\n (fields.ToggleLabel && fields.ToggleLabel.value) || 'Show %usageType% rates'\r\n )}\r\n
\r\n )}\r\n \r\n {props.title}\r\n \r\n {props.price}\r\n {/\\d/.test(props.price) ? props.value === 'day' ? '/day' : '/kWh' : \"\"}\r\n \r\n
\r\n);\r\n\r\nexport default compose(\r\n branch(\r\n // render only for electricity an d piped gas and only if rates are set\r\n ({ rate, usageType }) => (\r\n !rate ||\r\n ![SERVICE_ID_ELECTRICITY, SERVICE_ID_PIPED_GAS].includes(rate.type) ||\r\n (rate.type === SERVICE_ID_ELECTRICITY && usageType === USAGE_TYPE_LOW\r\n ? !rate.lowRates || !rate.lowRates.length\r\n : !rate.standardRates || !rate.standardRates.length\r\n )\r\n ),\r\n renderNothing\r\n ),\r\n withProps(({ usageType, rate }) => ({\r\n currentRates: usageType === USAGE_TYPE_LOW && rate.type === SERVICE_ID_ELECTRICITY\r\n ? rate.lowRates\r\n : rate.standardRates\r\n })),\r\n)(DetailedRate);\r\n","// @flow\r\nimport React from 'react';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport classes from './RatesContent.module.scss';\r\n\r\nimport BillCompare from '../../../BillCompare';\r\n\r\nimport type { Rate, Rates } from '../types';\r\nimport { SERVICE_ID_ELECTRICITY } from '../constants';\r\n\r\nimport NoRates from './NoRates';\r\nimport DetailedRate from './DetailedRate';\r\nimport type { APIUsageType } from \"../types\";\r\n\r\ntype Props = {\r\n usageType: APIUsageType,\r\n fields: Object,\r\n rates: Rates,\r\n hasElectricityRatesError: boolean,\r\n hasGasRatesError: boolean,\r\n isBachPlan: boolean,\r\n billCompare?: any,\r\n onToggleUsageType: () => void,\r\n};\r\n\r\nconst RatesContent = (props: Props) => (\r\n \r\n
\r\n);\r\n\r\nexport default RatesContent;\r\n","// @flow\r\nimport React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, branch, renderComponent, withHandlers } from 'recompose';\r\nimport classNames from 'classnames';\r\n\r\nimport classes from './Rates.module.scss';\r\n\r\nimport { withActions, withUIContextProps } from '../../../enhancers';\r\nimport type { Rates as RatesType } from './types';\r\nimport {USAGE_TYPE_LOW, USAGE_TYPE_STANDARD} from \"./constants\";\r\nimport { areRatesValid } from './utils';\r\n\r\nimport ToggleDetailsButton from '../../Common/ToggleDetailsButton';\r\nimport Error from './Error';\r\nimport RatesOverview from './RatesOverview';\r\nimport RatesContent from './RatesContent';\r\n\r\ntype Props = {\r\n id: string,\r\n rates: RatesType,\r\n hasGasRatesError: boolean,\r\n hasElectricityRatesError: boolean,\r\n isBachPlan: boolean,\r\n billCompare?: any,\r\n fields: Object,\r\n className?: string,\r\n};\r\n\r\nconst Rates = ({\r\n id,\r\n rates,\r\n usageType,\r\n hasGasRatesError,\r\n hasElectricityRatesError,\r\n isBachPlan,\r\n fields,\r\n billCompare,\r\n expandRates,\r\n toggleExpandRates,\r\n onToggleUsageType,\r\n className,\r\n}: Props) => {\r\n return (\r\n \r\n {props.hasElectricityRatesError && (\r\n
\r\n\r\n \r\n
\r\n\r\n {props.billCompare && (\r\n \r\n
\r\n );\r\n};\r\n\r\n/**\r\n * HOC\r\n * Injects toggle expand rates event handler.\r\n */\r\nconst withExpandRatesHandler = compose(\r\n withActions,\r\n withHandlers({\r\n toggleExpandRates: ({ expandRates, actions }) => () => {\r\n actions.setExpandRates(!expandRates);\r\n },\r\n })\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects toggle usage type event handler.\r\n */\r\nconst withToggleUsageTypeHandler = compose(\r\n withActions,\r\n withHandlers({\r\n onToggleUsageType: ({ actions, usageType }) => () => {\r\n actions.saveUsageType(\r\n usageType === USAGE_TYPE_STANDARD ? USAGE_TYPE_LOW : USAGE_TYPE_STANDARD\r\n );\r\n },\r\n }),\r\n);\r\n\r\nexport default compose(\r\n branch(\r\n ({ rates }) => !areRatesValid(rates),\r\n renderComponent(Error)\r\n ),\r\n withUIContextProps(['expandRates', 'usageType']),\r\n withExpandRatesHandler,\r\n withToggleUsageTypeHandler,\r\n)(Rates);\r\n","// @flow\r\nimport React from 'react';\r\nimport cx from 'classnames';\r\n\r\nimport classes from './EnergyRates.module.scss';\r\nimport ratesClasses from './Rates/Rates.module.scss';\r\n\r\ntype Props = {\r\n};\r\n\r\nconst NoAddress = (props: Props) => (\r\n \r\n
\r\n {expandRates && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default NoAddress;\r\n","// @flow\r\nimport React from 'react';\r\nimport {compose, withProps, branch, renderComponent} from 'recompose';\r\n\r\nimport classes from './EnergyRates.module.scss';\r\n\r\nimport Rates from './Rates';\r\nimport * as RatesUtil from './Rates/utils';\r\nimport {\r\n SERVICE_ID_ELECTRICITY,\r\n SERVICE_ID_PIPED_GAS,\r\n SERVICE_ID_BROADBAND\r\n} from './Rates/constants';\r\n\r\nimport {\r\n withCustomerAddress,\r\n withCustomerServiceRates,\r\n withSelectedService,\r\n withIsSouthIsland,\r\n withIsBachPlan,\r\n withUIContextProps,\r\n withSaving,\r\n} from '../../enhancers';\r\n\r\nimport NoAddress from './NoAddress';\r\nimport LoadingOverlay from '../Common/LoadingOverlay';\r\n\r\n/**\r\n * HOC\r\n * Checks if customer address set.\r\n * If not renders no address message instead.\r\n */\r\nconst withAddressCheck = compose(\r\n withCustomerAddress,\r\n // We're not rendering rates (we're rendering a no address message instead) if we don't have address\r\n // as we cannot price estimate without it.\r\n branch(({address}) => !address, renderComponent(NoAddress))\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects fields into component.\r\n */\r\nconst withFields = withProps(({ definition }) => ({\r\n fields: definition && definition[0] && definition[0].fields,\r\n}));\r\n\r\n/**\r\n * HOC\r\n * Injects readable rates as a prop.\r\n * Renders error message if not set/valid.\r\n */\r\nconst withRates = compose(\r\n withCustomerServiceRates,\r\n withProps(({ serviceRates, fields }) => ({\r\n rates: RatesUtil.getRates(serviceRates, {\r\n [SERVICE_ID_ELECTRICITY]: [\r\n fields.ElectricityLabel && fields.ElectricityLabel.value,\r\n fields.ElectricityLabelMob && fields.ElectricityLabelMob.value,\r\n ],\r\n [SERVICE_ID_PIPED_GAS]: [\r\n fields.GasLabel && fields.GasLabel.value,\r\n fields.GasLabelMob && fields.GasLabel.value,\r\n ],\r\n [SERVICE_ID_BROADBAND]: ['Your Broadband rates', 'Broadband rates'],\r\n }),\r\n })),\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects hasElectricityRatesError and hasGasRatesError properties.\r\n */\r\nconst withRatesErrors = compose(\r\n withProps(({rates, usageType, hasElectricity, hasPipedGas, isSouthIsland}) => ({\r\n hasElectricityRatesError: hasElectricity && RatesUtil.hasElectricityRatesError(rates, usageType),\r\n hasGasRatesError: hasPipedGas && !isSouthIsland && RatesUtil.hasGasRatesError(rates),\r\n })),\r\n);\r\n\r\n/**\r\n * HOC\r\n * Displays loading indicator of the wrapped component if saving.\r\n */\r\nconst withSavingOverlay = compose(\r\n withSaving,\r\n Component => ({ className, isSaving, ...props }) => (\r\n \r\n
\r\n \r\n Your street address and services are required to calculate your rates\r\n
\r\n \r\n
\r\n )\r\n);\r\n\r\nexport default compose(\r\n withAddressCheck,\r\n withFields,\r\n withSelectedService,\r\n withProps(({ selectedService }) => ({\r\n hasElectricity: selectedService && selectedService.includes(SERVICE_ID_ELECTRICITY),\r\n hasPipedGas: selectedService && selectedService.includes(SERVICE_ID_PIPED_GAS),\r\n })),\r\n withIsSouthIsland,\r\n withIsBachPlan,\r\n withUIContextProps(['usageType']),\r\n withRates,\r\n withRatesErrors,\r\n withProps({\r\n className: classes.EnergyRates,\r\n }),\r\n withSavingOverlay,\r\n)(Rates);\r\n","import React, { Fragment } from 'react';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { withExperienceEditor } from '../../enhancers';\r\n\r\nconst FormIntro = props => {\r\n const { isExperienceEditor, Text } = props;\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n\r\n {(isExperienceEditor ||\r\n (fields.IsDismissible && fields.IsDismissible.value\r\n && fields.CloseLink && fields.CloseLink.value)) && (\r\n \r\n
\r\n )}\r\n {tooltipOpen ? (\r\n \r\n
\r\n {(isExperienceEditor ||\r\n (this.props && this.props.showComponent\r\n && fields.UserAccount && fields.UserAccount.value)) && (\r\n \r\n \r\n
\r\n \r\n
\r\n {props.title}
}\r\n\r\n \r\n {isDiscountSet(props.fields.PromptNumber, props.fields.PromptText) && (\r\n
\r\n \r\n
\r\n ) : (\r\n {props.icon}
\r\n {props.amount}%
\r\n \r\n {props.amount}% {props.desc}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default withExperienceEditor(Discounts);\r\n","import React, { Component } from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { default as CTA } from '../CTA';\r\nimport { default as CTAButton } from '../CTA/CTAButton';\r\nimport { default as Modal } from '../Common/Modal';\r\nimport { default as PlanFace } from './PlanFace';\r\nimport { default as PlanTAC } from './PlanTAC';\r\n\r\nimport { withTogglePlanHandler } from './enhancers';\r\n\r\nclass PlanDetails extends Component {\r\n state = {\r\n isModalOpen: false,\r\n };\r\n\r\n toggleTAC = () => {\r\n if (this.props.fields) {\r\n this.setState({\r\n isModalOpen: !this.state.isModalOpen,\r\n });\r\n }\r\n return null;\r\n };\r\n\r\n getDetailsStyles = (styles, label) => {\r\n const fields = styles && styles.fields;\r\n if (fields) {\r\n return {\r\n Color:\r\n fields.TextColorInitialState &&\r\n fields.TextColorInitialState.fields &&\r\n fields.TextColorInitialState.fields.HexColor,\r\n Label: label || fields.TextInitialState,\r\n Icon: fields.IconInitialState,\r\n BackgroundColor:\r\n fields.BackgroundColorInitialState &&\r\n fields.BackgroundColorInitialState.fields &&\r\n fields.BackgroundColorInitialState.fields.HexColor,\r\n HoverLabel:\r\n (fields.TextHoverState && fields.TextHoverState.value) ||\r\n label ||\r\n fields.TextInitialState,\r\n HoverIcon: fields.IconHoverState,\r\n HoverColor:\r\n fields.TextColorHoverState &&\r\n fields.TextColorHoverState.fields &&\r\n fields.TextColorHoverState.fields.HexColor,\r\n HoverBackgroundColor:\r\n fields.BackgroundColorHoverState &&\r\n fields.BackgroundColorHoverState.fields &&\r\n fields.BackgroundColorHoverState.fields.HexColor,\r\n };\r\n }\r\n return {\r\n Label: label,\r\n HoverLabel: label,\r\n };\r\n };\r\n\r\n onTogglePlan = (e) => {\r\n const mainHandler = this.props.onTogglePlan;\r\n const secondHandler = this.props.closeModal;\r\n if (secondHandler) {\r\n secondHandler();\r\n }\r\n mainHandler(e);\r\n };\r\n\r\n render() {\r\n const { fields, isSelected } = this.props;\r\n const { isModalOpen } = this.state;\r\n const detailsCTA = this.getDetailsStyles(\r\n this.props.fields.DetailsTermsAndConditionsStyle,\r\n this.props.fields.DetailsTermsAndConditionsText\r\n );\r\n\r\n return (\r\n {props.icon}
\r\n {props.amount}%
\r\n \r\n {props.amount}% {props.desc}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withTogglePlanHandler(PlanDetails);\r\n\r\n/*** {this.props.modalShowDiscounts && (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {isModalOpen ? (\r\n \r\n {fields.BestFor && fields.BestFor.value && (\r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n\r\n \r\n
\r\n )}\r\n\r\n {(ribbonSet || logoEnabled) && (\r\n \r\n
\r\n {logoEnabled && (\r\n \r\n \r\n \r\n {!logoEnabled && (\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n {fullView ? (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/* Plan Card View Rendering Detailed vs Card */}\r\n {!flat ? (\r\n
\r\n );\r\n};\r\n\r\n/**\r\n * Extracts plan data from sitecore content and registers plan\r\n * into global store (allPlans).\r\n * @param siteCoreId\r\n * @param apiId\r\n * @param title\r\n * @param actions\r\n */\r\nfunction extractPlan({ siteCoreId, apiId, title, actions }) {\r\n actions.registerPlan({ siteCoreId, apiId, title });\r\n}\r\n\r\n\r\nexport default compose(\r\n // register plan first\r\n withProps(({ fields }) => ({\r\n siteCoreId: (\r\n fields &&\r\n fields.ExistingPlan &&\r\n (fields.ExistingPlan.id || fields.ExistingPlan.uid)\r\n ) || null,\r\n apiId: (\r\n fields &&\r\n fields.ExistingPlan &&\r\n fields.ExistingPlan.fields &&\r\n fields.ExistingPlan.fields.ApiPlanId &&\r\n fields.ExistingPlan.fields.ApiPlanId.value\r\n ),\r\n title: (\r\n fields &&\r\n fields.ExistingPlan &&\r\n fields.ExistingPlan.fields &&\r\n fields.ExistingPlan.fields.Title &&\r\n fields.ExistingPlan.fields.Title.value\r\n ),\r\n })),\r\n withExtractContentToState(extractPlan),\r\n\r\n // check if not filtered and render\r\n withPlansAndServicesProps([\r\n 'selectedPlan',\r\n 'selectedService',\r\n 'plansRules',\r\n ]),\r\n branch(\r\n ({ applyFilter, apiId, plansRules, selectedService }) => (\r\n applyFilter && !doesPlanMeetRequirements(plansRules, selectedService, apiId)\r\n ),\r\n renderNothing\r\n ),\r\n // inject component props\r\n withProps(({ selectedPlan, apiId, fields }) => ({\r\n selected: selectedPlan && selectedPlan === apiId,\r\n fields: {\r\n ...fields,\r\n ...((\r\n fields &&\r\n fields.ExistingPlan &&\r\n fields.ExistingPlan.fields\r\n ) || {})\r\n }\r\n })),\r\n)(PlanCard);\r\n","import React from 'react';\r\nimport { compose, withHandlers } from 'recompose';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport Header from '../FormHeader';\r\nimport { default as PlanCard } from '../PlanCard';\r\nimport { default as CTAButton } from '../CTA/CTAButton';\r\nimport { withExperienceEditor, withSelectedPlan } from '../../enhancers';\r\nimport { withActions } from '../../enhancers';\r\nimport Cookies from 'js-cookie';\r\n\r\nconst LandingPlanPage = props => {\r\n const { fields, action } = props; \r\n const { MappedPlans } = fields;\r\n const flat = MappedPlans && MappedPlans.length === 1;\r\n\r\n const goNewCustomer = async () => {\r\n await props.customerChoiceIsNo();\r\n\r\n const url =\r\n fields.NewCustomer &&\r\n fields.NewCustomer.value &&\r\n fields.NewCustomer.value.href;\r\n\r\n\r\n if (url && window) { \r\n \r\n const expiryDate = new Date();\r\n expiryDate.setMilliseconds(expiryDate.getMilliseconds() + 60000);\r\n let options = {\r\n expires: expiryDate,\r\n path: '/',\r\n secure: true,\r\n domain: '.contact.co.nz'\r\n };\r\n Cookies.remove('sharedPlanId');\r\n Cookies.remove('selectedService');\r\n\r\n const selectedPlan = props.actions.JustGetSelectedPlan();\r\n Cookies.set('sharedPlanId', selectedPlan, options);\r\n\r\n window.location.href = url;\r\n }\r\n };\r\n\r\n const goExistingCustomer = async () => {\r\n await props.customerChoiceIsYes();\r\n\r\n const url =\r\n fields.ExistingCustomer &&\r\n fields.ExistingCustomer.value &&\r\n fields.ExistingCustomer.value.href;\r\n\r\n\r\n if (url && window) {\r\n window.location.href = url;\r\n }\r\n };\r\n\r\n const twoButtons =\r\n fields.ExistingCustomer &&\r\n fields.ExistingCustomer.value &&\r\n fields.ExistingCustomer.value.text &&\r\n fields.NewCustomer &&\r\n fields.NewCustomer.value &&\r\n fields.NewCustomer.value.text;\r\n\r\n const getMappedPlanIds = () => {\r\n const arr = [];\r\n if (MappedPlans && MappedPlans.length) {\r\n MappedPlans.forEach(plan => {\r\n const id =\r\n plan &&\r\n plan.fields &&\r\n plan.fields.ExistingPlan &&\r\n plan.fields.ExistingPlan.fields &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId.value;\r\n if (id) {\r\n arr.push(id);\r\n }\r\n });\r\n }\r\n return arr;\r\n };\r\n\r\n const landingPlans = getMappedPlanIds();\r\n\r\n const planSelected =\r\n props.selectedPlan &&\r\n props.selectedPlan !== '' &&\r\n landingPlans.includes(props.selectedPlan);\r\n\r\n return (\r\n \r\n {(props.isExperienceEditor ||\r\n (fields.Heading && fields.Heading.value)) && (\r\n \r\n {MappedPlans &&\r\n MappedPlans.length &&\r\n MappedPlans.map((plan, index) => {\r\n return (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n);\r\n\r\nexport default compose(\r\n branch(\r\n ({ fields }) => !fields,\r\n renderNothing\r\n ),\r\n withPlansAndServicesProps(['selectedService']),\r\n branch(\r\n ({ selectedService }) => !selectedService || !selectedService.includes('LPG'),\r\n renderNothing\r\n )\r\n)(LpgUsage);\r\n","import React from 'react';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { CSSTransitionGroup } from 'react-transition-group';\r\nimport cx from 'classnames';\r\n\r\nimport { withExperienceEditor } from '../../enhancers';\r\n\r\nimport CloseIcon from '@material-ui/icons/Close';\r\n\r\nimport css from './Alert.module.scss';\r\n\r\nfunction filterNullValues(obj) {\r\n return Object.keys(obj)\r\n .filter(key => Boolean(obj[key]))\r\n .reduce((acc, key) => {\r\n acc[key] = obj[key];\r\n return acc;\r\n }, {});\r\n}\r\n\r\nconst styles = ({ fields }) =>\r\n filterNullValues({\r\n backgroundColor: fields.BackgroundColor && fields.BackgroundColor.value,\r\n color: fields.color && fields.Color.value,\r\n });\r\n\r\nconst classes = ({ fields }) =>\r\n cx(\r\n css.Alert,\r\n fields.AlertType && css[fields.AlertType.value.toLowerCase()]\r\n );\r\n\r\nconst Alert = ({ fields, payload, onClose, isExperienceEditor }) => (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n);\r\n\r\nexport default withExperienceEditor(Alert);\r\n","import React from 'react';\r\nimport Alert from './Alert';\r\n\r\nimport { compose } from 'recompose';\r\nimport { withPlansAndServicesProps, withIsSouthIsland } from '../../enhancers';\r\n\r\nimport css from './styles.module.scss';\r\n\r\nclass Messaging extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n closed: [],\r\n };\r\n }\r\n\r\n handleClose(alert) {\r\n this.setState(({ closed }) => ({\r\n closed: [...closed, alert.fields.Id.value],\r\n }));\r\n }\r\n\r\n render() {\r\n const { fields, activeAlerts } = this.props;\r\n const { closed } = this.state;\r\n let alerts = (fields && fields.Messages) || [];\r\n \r\n alerts = alerts\r\n .filter(alert => alert && alert.fields)\r\n // map active alerts\r\n .map(alert => ({\r\n alert,\r\n active: activeAlerts.find(([id]) => alert.fields.Type.value === id),\r\n closed: closed.includes(alert.fields.Id.value),\r\n }))\r\n // filter active alerts only\r\n .filter(({ active }) => Boolean(active))\r\n // filter closed alerts\r\n .filter(({ closed }) => !closed);\r\n\r\n if (alerts.length === 0) {\r\n return null;\r\n }\r\n \r\n // Outfilter rockgas if not a South Address\r\n const isRockGas = alerts.find(alert => alert.active.includes(\"rockgas-south\"));\r\n if (!this.props.isSouthIsland && isRockGas) {\r\n alerts = alerts.filter(alert => { \r\n return !(alert.active.find(item => item === \"rockgas-south\")); \r\n });\r\n }\r\n \r\n \r\n const isNorthIslandOnly = alerts.find(alert => alert.active.includes(\"north-only\"));\r\n if (!this.props.isSouthIsland && isNorthIslandOnly) {\r\n console.log(\"messaging > south-only\");\r\n alerts = alerts.filter(alert => { \r\n return !(alert.active.find(item => item === \"north-only\")); \r\n });\r\n }\r\n\r\n const isSouthIslandOnly = alerts.find(alert => alert.active.includes(\"south-only\"));\r\n if (this.props.isSouthIsland && isSouthIslandOnly) {\r\n console.log(\"messaging > south-only\");\r\n alerts = alerts.filter(alert => { \r\n return !(alert.active.find(item => item === \"south-only\")); \r\n });\r\n }\r\n\r\n //const isTou = alerts.find(alert => alert.active.includes(\"tou-message\"));\r\n //if (isTou) {\r\n // alerts = alerts.filter(alert => {\r\n // return !(alert.active.find(item => item === \"tou-message\"));\r\n // });\r\n //}\r\n\r\n return (\r\n \r\n {isExperienceEditor || !payload ? (\r\n
\r\n \r\n
\r\n \r\n {alerts.map(({ alert, active }, i) => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default compose(withPlansAndServicesProps(['activeAlerts']), withIsSouthIsland)(Messaging);\r\n","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, withProps, withHandlers } from 'recompose';\r\nimport WelcomeMsg from 'contact-join-poc';\r\nimport MainPage from 'contact-join-poc-address';\r\n\r\nconst MyDetails = ({ fields, username, goToHomePage }) => (\r\n \r\n {}}\r\n style={{}}\r\n username={'test user'}\r\n goToHomePage={() => {}} />\r\n
\r\n);\r\n\r\nexport default compose(\r\n withProps(() => ({\r\n username: 'test'\r\n })),\r\n withHandlers({\r\n goToHomePage: () => () => {\r\n console.log('go to home');\r\n }\r\n })\r\n)(MyDetails);\r\n","import { default as Carousel } from './Carousel';\r\nimport { withPlaceholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst CarouselPlans = withPlaceholder({\r\n placeholder: 'plans-placeholder',\r\n prop: 'placeholder'\r\n})(Carousel);\r\n\r\nexport default CarouselPlans;","import React, { Fragment } from 'react';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, branch, renderNothing, withProps } from 'recompose';\r\n\r\nimport EnergyRates from '../EnergyRates';\r\nimport { default as CarouselPlans } from '../Common/CarouselPlans';\r\n\r\nimport { withExperienceEditor, withPlansAndServicesProps, withActions } from '../../enhancers';\r\nimport { doesPlanMeetRequirements } from '../../utils/plans-rules';\r\n\r\n\r\nconst PlanFilter = ({ items, rates, billCompare, filterIndex }) => (\r\n MyDetails Component
\r\n\r\n
\r\n);\r\n\r\n\r\nclass PlanFilterItem extends React.Component {\r\n componentDidMount() {\r\n const { filterIndex, tabTitle, actions } = this.props;\r\n actions.setPlanFilterTabsTitle(filterIndex, tabTitle)\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const { filterIndex, tabTitle, actions } = this.props;\r\n if (tabTitle !== prevProps.tabTitle) {\r\n actions.setPlanFilterTabsTitle(filterIndex, tabTitle)\r\n }\r\n }\r\n\r\n render() {\r\n const { rendering, isExperienceEditor, applyFilter, flat } = this.props;\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 {items.map((item, index) => {\r\n const hidden = getListedFilters(item, this.props).length === 0;\r\n const leftAligned = item && item.LeftAligned && item.LeftAligned.value;\r\n return (\r\n \r\n \r\n {this.getRenderedChildren(index)}\r\n
\r\n ))}\r\n \r\n );\r\n }\r\n}\r\n\r\nconst withDefaultActiveIndex = withProps(({ placeholder }) => {\r\n let index = 0;\r\n if (placeholder) {\r\n index = placeholder.findIndex(\r\n item =>\r\n item.props &&\r\n item.props.fields &&\r\n item.props.fields.DefaultSelected &&\r\n item.props.fields.DefaultSelected.value\r\n );\r\n index = parseInt(index);\r\n if (isNaN(index)) index = 0;\r\n if (index < 0) index = 0;\r\n }\r\n return {\r\n defaultActiveIndex: index,\r\n };\r\n});\r\n\r\nexport default compose(\r\n withDefaultActiveIndex,\r\n // We need those for getListedFilters\r\n withPlansAndServicesProps([\r\n 'plansRules',\r\n 'selectedService',\r\n 'activeFilter'\r\n ]),\r\n withProps(({ defaultActiveIndex, activeFilter }) => {\r\n let index = parseInt(activeFilter);\r\n if (isNaN(index) || index < 0) {\r\n index = defaultActiveIndex;\r\n }\r\n return {\r\n activeFilter: index,\r\n };\r\n }),\r\n withActions\r\n)(TabContainer);\r\n","import { doesPlanMeetRequirements } from '../../utils/plans-rules';\r\n\r\nexport function getListedFilters (item, { rendering, selectedService, plansRules }) {\r\n const applyFilter = (\r\n selectedService &&\r\n selectedService.length === 1 &&\r\n selectedService.includes('GAS')\r\n );\r\n let listedFilters = (\r\n rendering &&\r\n rendering.placeholders &&\r\n rendering.placeholders['plans-filter-placeholder']\r\n );\r\n listedFilters = listedFilters.filter(rendering => {\r\n const id = (\r\n rendering &&\r\n rendering.fields &&\r\n rendering.fields.Id &&\r\n rendering.fields.Id.value\r\n );\r\n return id === item.Id.value;\r\n });\r\n listedFilters = listedFilters.filter(rendering => {\r\n let listedPlans = (\r\n (\r\n rendering &&\r\n rendering.placeholders &&\r\n rendering.placeholders['plans-placeholder'] &&\r\n rendering.placeholders['plans-placeholder']\r\n ) || []\r\n ).map(planCard => ({\r\n planId: (\r\n planCard.fields &&\r\n planCard.fields.ExistingPlan &&\r\n planCard.fields.ExistingPlan.fields &&\r\n planCard.fields.ExistingPlan.fields.ApiPlanId &&\r\n planCard.fields.ExistingPlan.fields.ApiPlanId.value\r\n ),\r\n }));\r\n if (applyFilter) {\r\n listedPlans = listedPlans\r\n .filter(({ planId }) => doesPlanMeetRequirements(plansRules, selectedService, planId));\r\n }\r\n return listedPlans.length > 0;\r\n });\r\n return listedFilters;\r\n}","import TabContainer from './TabContainer';\r\nimport { withPlaceholder } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nexport default withPlaceholder({\r\n placeholder: 'plans-filter-placeholder',\r\n prop: 'placeholder'\r\n})(TabContainer);\r\n","import React, { Component, Fragment } from 'react';\r\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Summer, Winter } from '../SVG';\r\nimport AddressPicker from '../AddressPicker';\r\nimport Modal from '../Common/Modal';\r\nimport { compose, branch, renderNothing } from 'recompose';\r\n\r\nimport { withBillCompare } from './enhancers';\r\nimport { withExperienceEditor } from '../../enhancers';\r\n\r\nclass BillCompareModal extends Component {\r\n state = {\r\n DisclaimerPopupShown: false,\r\n };\r\n\r\n toggleDisclaimerPopup = () => {\r\n if (\r\n this.props.content.BillCompareDisclaimerLinkContent &&\r\n this.props.content.BillCompareDisclaimerLinkContent.value\r\n ) {\r\n this.setState({\r\n DisclaimerPopupShown: !this.state.DisclaimerPopupShown,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n showBillCompareModal,\r\n toggleCompareBill,\r\n content,\r\n customer,\r\n isExperienceEditor,\r\n } = this.props;\r\n\r\n const { DisclaimerPopupShown } = this.state;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n toggleCompareBill()}\r\n >\r\n
\r\n \r\n
\r\n\r\n {(isExperienceEditor ||\r\n (content.BillCompareDisclaimerLink &&\r\n content.BillCompareDisclaimerLink.value)) && (\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n\r\n {DisclaimerPopupShown && (\r\n {props.children}
\r\n);\r\n\r\nconst Estimate = props => (\r\n \r\n
\r\n);\r\n\r\nexport default compose(\r\n withBillCompare,\r\n withExperienceEditor,\r\n // do not render if not open\r\n branch(({ showBillCompareModal }) => !showBillCompareModal, renderNothing)\r\n)(BillCompareModal);\r\n","import React, { Component } from 'react';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose } from 'recompose';\r\nimport cx from 'classnames';\r\n\r\nimport { isFakePlanId } from '../../utils/plans-rules';\r\n\r\nimport { default as Header } from '../FormHeader';\r\nimport PlanFilterTabContainer from '../Common/PlanFilterTabContainer';\r\nimport { default as PlanFilter } from '../PlanFilter';\r\nimport BillCompareModal from '../BillCompare/BillCompareModal';\r\n\r\nimport {\r\n withReturningUser,\r\n withPlansAndServicesProps,\r\n withIsSouthIsland,\r\n withActions,\r\n withCustomer,\r\n withJourneyTypes\r\n} from '../../enhancers';\r\n\r\nclass PlansAndServices extends Component {\r\n componentDidMount() {\r\n const {\r\n returningUser,\r\n selectedPlan,\r\n selectedService,\r\n selectedBroadband,\r\n actions,\r\n } = this.props;\r\n\r\n actions.updatePlansAndServices({\r\n allServices: extractAllServices(this.props),\r\n });\r\n\r\n if (returningUser) {\r\n if (selectedPlan || selectedService) {\r\n let foundPlan = null;\r\n if (selectedPlan) {\r\n foundPlan = this.checkDefaultPlan(selectedPlan);\r\n }\r\n\r\n const resetBroadband =\r\n selectedService &&\r\n selectedService.length &&\r\n selectedService.indexOf('BB') > -1 &&\r\n !this.checkIfBBExists(selectedBroadband);\r\n\r\n let resetPlan = false;\r\n if (foundPlan && foundPlan.id) {\r\n actions.updatePlansAndServices({\r\n activeFilter: foundPlan.filter,\r\n selectedBroadband: resetBroadband\r\n ? null\r\n : selectedBroadband,\r\n });\r\n } else if (!isFakePlanId(selectedPlan)) {\r\n actions.updatePlansAndServices({\r\n selectedPlan: null,\r\n activeFilter: null,\r\n selectedBroadband: resetBroadband\r\n ? null\r\n : selectedBroadband,\r\n });\r\n resetPlan = true;\r\n }\r\n (async () => {\r\n if (resetPlan) {\r\n await actions.savePlan(null);\r\n }\r\n if (resetBroadband) {\r\n await actions.saveBB(null, null);\r\n }\r\n })();\r\n }\r\n } else {\r\n let defaultServices;\r\n defaultServices = this.checkDefaultServices();\r\n\r\n if (defaultServices) {\r\n actions.updatePlansAndServices({\r\n selectedService: defaultServices.services,\r\n selectedServiceName: defaultServices.names,\r\n });\r\n if (defaultServices && defaultServices.services) {\r\n actions.saveService(\r\n defaultServices.services,\r\n defaultServices.names\r\n );\r\n }\r\n }\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n const { selectedPlan, actions, address } = this.props;\r\n const isAddressChanged = prevProps.address !== address;\r\n const isPlanChanged = prevProps.selectedPlan !== selectedPlan;\r\n // update tab if plan or address has changed\r\n if (isPlanChanged || isAddressChanged) {\r\n const plan = this.checkDefaultPlan(selectedPlan);\r\n if (plan) {\r\n actions.updatePlansAndServices({\r\n activeFilter: plan.filter,\r\n });\r\n }\r\n }\r\n }\r\n\r\n checkIfBBExists = id => {\r\n if (id) {\r\n const container =\r\n this.props &&\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['broadband-placeholder'];\r\n if (container) {\r\n const options =\r\n container[0] &&\r\n container[0].placeholders &&\r\n container[0].placeholders['broadband-tiles-placeholder'];\r\n if (options) {\r\n const found = options.find(\r\n option =>\r\n id &&\r\n id ===\r\n (option.fields &&\r\n option.fields.BBExistingTile &&\r\n option.fields.BBExistingTile.fields &&\r\n option.fields.BBExistingTile.fields.ApiId &&\r\n option.fields.BBExistingTile.fields.ApiId\r\n .value)\r\n );\r\n if (found) {\r\n return id;\r\n }\r\n }\r\n }\r\n }\r\n return null;\r\n };\r\n\r\n checkDefaultPlan = planId => {\r\n let index = null;\r\n const filters = this.getPlanFilterItems();\r\n const foundPlan = filters\r\n .map(filter => {\r\n let plans =\r\n filter &&\r\n filter.placeholders &&\r\n filter.placeholders['plans-placeholder'];\r\n if (plans) {\r\n return (\r\n plans.find(plan => {\r\n const id =\r\n plan.fields &&\r\n plan.fields.ExistingPlan &&\r\n plan.fields.ExistingPlan.fields &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId.value;\r\n return id && id === planId;\r\n }) || {}\r\n );\r\n }\r\n return {};\r\n })\r\n .filter((item, i) => {\r\n if (item.uid) {\r\n index = index ? index : i;\r\n return true;\r\n }\r\n return false;\r\n });\r\n if (foundPlan && foundPlan[0]) {\r\n const plan = foundPlan[0];\r\n const thisId =\r\n plan.fields &&\r\n plan.fields.ExistingPlan &&\r\n plan.fields.ExistingPlan.fields &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId &&\r\n plan.fields.ExistingPlan.fields.ApiPlanId.value;\r\n\r\n const thisItemId =\r\n plan.fields &&\r\n plan.fields.ExistingPlan &&\r\n plan.fields.ExistingPlan.id;\r\n // id: Plan Id (name), itemId: Plan Sitecore Instance Id, filter: first tab containing plan\r\n return {\r\n id: thisId,\r\n itemId: thisItemId,\r\n filter: index,\r\n };\r\n }\r\n return false;\r\n };\r\n\r\n checkDefaultServices = () => {\r\n let services =\r\n this.props &&\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['services-placeholder'];\r\n if (services) {\r\n services = services.filter(service => {\r\n if (service.fields) {\r\n return service.fields &&\r\n service.fields.AutoSelected &&\r\n service.fields.AutoSelected.value\r\n ? true\r\n : false;\r\n }\r\n return false;\r\n });\r\n }\r\n if (services) {\r\n const onDefault = [];\r\n const onDefaultName = [];\r\n services.forEach(service => {\r\n const ServiceId =\r\n service.fields && service.fields.ExistingService;\r\n const Label =\r\n service.fields &&\r\n service.fields.Title &&\r\n service.fields.Title.value\r\n ? service.fields.Title\r\n : service.fields.Label;\r\n if (ServiceId && ServiceId.value) {\r\n onDefault.push(ServiceId && ServiceId.value);\r\n onDefaultName.push(Label && Label.value);\r\n }\r\n });\r\n return {\r\n services: onDefault,\r\n names: onDefaultName,\r\n };\r\n }\r\n return null;\r\n };\r\n\r\n getPlanFilterItems = () => {\r\n if (\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['plans-filter-placeholder']\r\n ) {\r\n return this.props.rendering.placeholders[\r\n 'plans-filter-placeholder'\r\n ].filter(item => item.componentName === 'PlanFilter');\r\n }\r\n return null;\r\n };\r\n\r\n getEnergyRates = () => {\r\n if (\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['plans-filter-placeholder']\r\n ) {\r\n return this.props.rendering.placeholders[\r\n 'plans-filter-placeholder'\r\n ].filter(item => item.componentName === 'EnergyRates');\r\n }\r\n return null;\r\n };\r\n getBillCompare = () => {\r\n if (\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['plans-filter-placeholder']\r\n ) {\r\n return this.props.rendering.placeholders[\r\n 'plans-filter-placeholder'\r\n ].filter(item => item.componentName === 'BillCompare');\r\n }\r\n return null;\r\n };\r\n\r\n toggleFilterShown = (items, index) => {\r\n const children = React.Children.toArray(items);\r\n const generated = [];\r\n // Deep Cloning of Object except outfiltered items\r\n children.forEach(child => {\r\n const newChild = {};\r\n for (const key in child) {\r\n if (key) {\r\n if (key === 'props') {\r\n let props = child[key];\r\n const newProps = {};\r\n for (const innerKey in props) {\r\n if (innerKey) {\r\n if (innerKey === 'items') {\r\n let items = props[innerKey];\r\n newProps[innerKey] = [items[index]];\r\n } else {\r\n newProps[innerKey] = props[innerKey];\r\n }\r\n }\r\n }\r\n newChild[key] = newProps;\r\n } else {\r\n newChild[key] = child[key];\r\n }\r\n }\r\n }\r\n generated.push(newChild);\r\n });\r\n return generated;\r\n };\r\n\r\n render() {\r\n const { selectedService, isSouthIsland } = this.props;\r\n const serviceSectionHeader = this.props.fields.ServicesHeader;\r\n const planSectionHeader = this.props.fields.PlansHeader;\r\n const services =\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['services-placeholder'] &&\r\n this.props.rendering.placeholders['services-placeholder'].length;\r\n const planFilters =\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['plans-filter-placeholder'] &&\r\n this.props.rendering.placeholders['plans-filter-placeholder']\r\n .length;\r\n const broadband =\r\n this.props.rendering &&\r\n this.props.rendering.placeholders &&\r\n this.props.rendering.placeholders['broadband-placeholder'] &&\r\n this.props.rendering.placeholders['broadband-placeholder'].length;\r\n\r\n const broadbandSelected =\r\n selectedService &&\r\n selectedService.length &&\r\n selectedService.indexOf('BB') > -1;\r\n\r\n const planFilterItems = this.getPlanFilterItems();\r\n const energyRates = this.getEnergyRates();\r\n const billCompare = this.getBillCompare();\r\n const lpgOnly =\r\n selectedService &&\r\n selectedService.length &&\r\n selectedService.length === 1 &&\r\n selectedService.indexOf('LPG') > -1;\r\n const pipedGasOnly =\r\n selectedService &&\r\n selectedService.length &&\r\n selectedService.length === 1 &&\r\n selectedService.includes('GAS');\r\n\r\n return (\r\n \r\n
\r\n {props.icon}
\r\n \r\n
\r\n {props.season}
\r\n \r\n $\r\n {props.rate}\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
\r\n \r\n
\r\n ) : null}\r\n\r\n {broadband && broadbandSelected ? (\r\n \r\n
\r\n \r\n \r\n {planFilterItems ? (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\n/**\r\n * HOC\r\n * Injects promo code popup styles (background and color) as a prop.\r\n */\r\nexport const withStyles = compose(\r\n withBackgroundImage,\r\n withProps(({ fields, backgroundImage }) => ({\r\n styles: {\r\n backgroundImage: backgroundImage && `url(${backgroundImage})`,\r\n backgroundColor:\r\n fields.BackgroundColor && fields.BackgroundColor.value,\r\n color: fields.TextColor && fields.TextColor.value,\r\n },\r\n }))\r\n);\r\n\r\n/**\r\n * HOC\r\n * Injects promo code button text as a prop.\r\n */\r\nexport const withPromoCodeButton = compose(\r\n withPromoCode('MappedPromo'),\r\n withProps(({ fields, promoCode }) => ({\r\n promoButtonText: (\r\n (fields.PromoButtonText && fields.PromoButtonText.value) ||\r\n ''\r\n ).replace('%promoCode%', promoCode),\r\n }))\r\n);\r\n\r\nexport default compose(\r\n withPromoCodeButton,\r\n withExperienceEditor,\r\n withStyles,\r\n withRegisterPromoCodeCloseGoal,\r\n withSavePromoCode('MappedPromo')\r\n)(Popup);\r\n","import React, { useState, useEffect } from 'react';\r\nimport { compose, withProps, branch, renderNothing } from 'recompose';\r\n\r\nimport {\r\n withDevice,\r\n withDelayedProps,\r\n withIdleProps,\r\n withLeaveIntentionProps,\r\n} from '../../enhancers/common';\r\nimport { withCustomerPromoCode } from '../../enhancers';\r\nimport {\r\n withPromoCodeValidCheck,\r\n withApplyOrDissmissAction,\r\n} from '../../enhancers/promo-code';\r\n\r\nimport { withBackgroundImage } from './enhanders';\r\nimport Popup from './Popup';\r\nimport { default as PromoBanner } from '../PromoCodeBanner';\r\n\r\nconst defaultProps = {\r\n open: false,\r\n};\r\n\r\nexport const PromoPopup = props => {\r\n const [open, setOpen] = useState(props.open);\r\n const [applied, setApplied] = useState(props.applied);\r\n const { setDismissed, promoDismissed } = props;\r\n\r\n useEffect(() => {\r\n setOpen(props.open);\r\n setApplied(props.applied);\r\n }, [props.open, props.applied]);\r\n\r\n function onClose() {\r\n setOpen(false);\r\n setDismissed(true);\r\n }\r\n\r\n function onApply(e) {\r\n setApplied(true);\r\n setDismissed(true);\r\n }\r\n\r\n if (promoDismissed) {\r\n const isBannerAllowed =\r\n props.fields &&\r\n props.fields.ShowBannerOnAction &&\r\n props.fields.ShowBannerOnAction.value;\r\n const bannerProps =\r\n props && props.fields && props.fields.MappedPromoBanner;\r\n return isBannerAllowed ? (\r\n \r\n
\r\n \r\n {props.isExperienceEditor ? (\r\n {\r\n props.onApply(e);\r\n props.onSavePromoCode(e);\r\n }}\r\n >\r\n {props.promoButtonText}\r\n \r\n )}\r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n\r\n {isExperienceEditor ||\r\n (fields.MarketingPermissionLabel &&\r\n fields.MarketingPermissionLabel.value) ? (\r\n \r\n slideToOptions(evt)}\r\n ref={emailInput}\r\n required={true}\r\n pattern={EMAIL_VALIDATION}\r\n error={errorMessage}\r\n />\r\n {autocomplete && autocomplete.length ? (\r\n \r\n {autocomplete && autocomplete.length\r\n ? autocomplete.map((item, index) => {\r\n return (\r\n setEmailValue(item)}\r\n onKeyUp={evt =>\r\n checkEmailOptionAction(\r\n evt,\r\n index,\r\n item\r\n )\r\n }\r\n tabIndex=\"0\"\r\n >\r\n {item}\r\n
\r\n );\r\n })\r\n : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n );\r\n};\r\n\r\nexport default compose(\r\n withExperienceEditor,\r\n withActions,\r\n withCustomer\r\n)(EmailSection);","import React, { useState, useEffect } from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, lifecycle } from 'recompose';\r\nimport Modal from '@material-ui/core/Modal';\r\nimport classes from './SaveForLater.module.scss';\r\nimport {\r\n withIsPopupOpenState,\r\n withActions,\r\n withCustomerExistingEmail,\r\n} from '../../enhancers';\r\nimport { Clock, Check, Exclamation } from '../SVG';\r\nimport { EMAIL_VALIDATION } from '../../constants';\r\nimport { default as EmailSection } from '../Summary/email-section';\r\n\r\nexport const SaveForLaterPopup = props => {\r\n\r\n const [open, setOpen] = useState(props.isPopupOpen);\r\n const [autocomplete, setAutocomplete] = useState([]);\r\n const [existingEmail, setExistingEmail] = useState();\r\n const [isValid, setisValid] = useState(false);\r\n const [emailError, setEmailError] = useState(\"\");\r\n const [isSaving, setIsSaving] = useState(false);\r\n const [isSuccess, setIsSuccess] = useState(false);\r\n const [isFailedBefore, setIsFailedBefore] = useState(false);\r\n //const [isUserTypedsomething, setIsUserTypedsomething] = useState(false);\r\n const [isUserInteracted, setIsUserInteracted] = useState(false);\r\n //const [isFirstTime, setIsFirstTime] = useState(true);\r\n const [showErrorMessage, setShowErrorMessage] = useState(false);\r\n const [email, setEmail] = useState(\"\");\r\n const [mounted, setMounted] = useState(false);\r\n\r\n var emailInput = React.createRef();\r\n\r\n function init() {\r\n setisValid(false);\r\n setEmailError(\"\");\r\n setIsSaving(false);\r\n setIsSuccess(false);\r\n setIsFailedBefore(false);\r\n setIsUserInteracted(false);\r\n setShowErrorMessage(false);\r\n setEmail(\"\");\r\n }\r\n\r\n function onClose() {\r\n close();\r\n }\r\n\r\n function onCancel() {\r\n close();\r\n onCancelClicked();\r\n }\r\n\r\n function onDone() {\r\n close();\r\n onDoneClicked();\r\n }\r\n\r\n function close() {\r\n setOpen(false);\r\n props.actions.togglePopup(false);\r\n\r\n init();\r\n }\r\n\r\n function onDisabledSave() {\r\n setIsUserInteracted(true);\r\n }\r\n\r\n function updateEmailErrorMessage() {\r\n console.log(\"updateEmailErrorMessage.isUserInteracted=\", isUserInteracted);\r\n console.log(\"updateEmailErrorMessage.isValid=\", isValid);\r\n console.log(\"updateEmailErrorMessage.email=\", email);\r\n\r\n if (!isUserInteracted) {\r\n setEmailError(\"\");\r\n console.log(\"1 setEmailError('')\");\r\n return;\r\n }\r\n\r\n if (isValid) {\r\n setEmailError(\"\");\r\n console.log(\"2 setEmailError('')\");\r\n }\r\n else {\r\n //TODO: This should be contnent enabled\r\n if (email) {\r\n setEmailError(\"Please enter a valid email address\");\r\n console.log(\"3 setEmailError('not valid')\");\r\n }\r\n else {\r\n setEmailError(\"Email address is required*\");\r\n console.log(\"4 setEmailError('required')\");\r\n }\r\n }\r\n }\r\n\r\n function onSave() {\r\n save();\r\n onSaveClicked();\r\n }\r\n\r\n function onRetry() {\r\n save();\r\n onRetryClicked();\r\n }\r\n\r\n function save() {\r\n setIsUserInteracted(true);\r\n setIsSaving(true);\r\n\r\n updateEmailErrorMessage();\r\n\r\n const updatedData = {\r\n SaveForLaterEmail: email\r\n };\r\n\r\n props.actions.saveForLater(updatedData).then(success => {\r\n //Success\r\n console.log(\"Save Successeded\");\r\n setIsSaving(false);\r\n setIsSuccess(true);\r\n onSuccess(email);\r\n\r\n //////Test Fail\r\n //console.log(\"Save Failed\");\r\n //setIsSaving(false);\r\n //setIsSuccess(false);\r\n //setIsFailedBefore(true);\r\n //setShowErrorMessage(true);\r\n\r\n }, error => {\r\n //Fail\r\n console.log(\"Save Failed\");\r\n setIsSaving(false);\r\n setIsSuccess(false);\r\n setIsFailedBefore(true);\r\n setShowErrorMessage(true);\r\n onError();\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (emailError && isValid) {\r\n setEmailError(\"\");\r\n }\r\n\r\n if (props.isPopupOpen && !open) //was closed and opened\r\n onPopupOpened();\r\n\r\n setOpen(props.isPopupOpen);\r\n\r\n console.log(\"props=\", props);\r\n //console.log(\"isValid=\", isValid);\r\n //console.log(\"isSaving=\", isSaving);\r\n //console.log(\"isSuccess=\", isSuccess);\r\n //console.log(\"isFailedBefore=\", isFailedBefore);\r\n //console.log(\"SaveForLaterPopup.useEffect() props.isPopupOpen=\", props.isPopupOpen)\r\n //console.log(\"emailError=\", emailError);\r\n updateEmailErrorMessage();\r\n\r\n if (open)\r\n setMounted(true);\r\n\r\n }, [props.isPopupOpen, isValid, isSaving, isSuccess, isFailedBefore, isUserInteracted, email]);\r\n\r\n var updateEmailValue = event => {\r\n const email = event.target.value;\r\n onEmailUpdated(email);\r\n };\r\n\r\n function onEmailUpdated(email) {\r\n const pattern = RegExp(EMAIL_VALIDATION);\r\n setisValid(pattern.test(email));\r\n\r\n setEmail(email);\r\n setIsSuccess(false);\r\n setShowErrorMessage(false);\r\n setIsUserInteracted(true);\r\n }\r\n\r\n //GOOGLE ANAYTICS \r\n function onPopupOpened() {\r\n\r\n setExistingEmail(props.existingEmail);\r\n setEmail(props.existingEmail);\r\n\r\n setEmail((emailvalue) => {\r\n onEmailUpdated(emailvalue);\r\n return emailvalue;\r\n });\r\n\r\n props.actions.pushToDataLayer({\r\n 'event': 'virtualPageview',\r\n 'virtualUrl': '/save-my-sign-up-for-later',\r\n 'virtualPageTitle': 'VPV-Save my sign up for later'\r\n });\r\n }\r\n\r\n function onSuccess(email) {\r\n props.actions.pushToDataLayer({\r\n 'event': 'save_signup_success',\r\n 'hashedEmail': props.actions.sha256(email)\r\n });\r\n }\r\n\r\n function onSaveClicked() {\r\n props.actions.pushToDataLayer({\r\n 'event': 'cta_click',\r\n 'cta_text': 'save'\r\n });\r\n }\r\n\r\n function onDoneClicked() {\r\n props.actions.pushToDataLayer({\r\n 'event': 'cta_click',\r\n 'cta_text': 'done'\r\n });\r\n }\r\n\r\n function onCancelClicked() {\r\n props.actions.pushToDataLayer({\r\n 'event': 'cta_click',\r\n 'cta_text': 'cancel'\r\n });\r\n }\r\n\r\n function onRetryClicked() {\r\n props.actions.pushToDataLayer({\r\n 'event': 'cta_click',\r\n 'cta_text': 'retry'\r\n });\r\n }\r\n\r\n function onError() {\r\n props.actions.pushToDataLayer({\r\n 'event': 'save_signup_error'\r\n });\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n x\r\n\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default compose(\r\n withIsPopupOpenState,\r\n withActions,\r\n withCustomerExistingEmail,\r\n)(SaveForLaterPopup);\r\n","import React from 'react';\r\nimport { Placeholder } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose, branch, renderNothing } from 'recompose';\r\nimport cx from 'classnames';\r\n\r\nimport { withDevice } from '../../enhancers/common';\r\nimport { withReturningUser } from '../../enhancers';\r\n\r\nconst SegmentBanner = ({ device, fields, rendering }) => (\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n {(isSuccess && !isSaving) && (\r\n \r\n
\r\n\r\n \r\n
\r\n {emailError}
\r\n\r\n \r\n {\r\n (isValid) ?
\r\n \r\n
\r\n )}\r\n\r\n {(showErrorMessage) && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {(isSuccess) && (\r\n \r\n
\r\n\r\n )}\r\n\r\n {(isFailedBefore && !isSuccess && !isSaving) && (\r\n \r\n
\r\n\r\n )}\r\n\r\n {(isValid && !isSaving && !isSuccess && !isFailedBefore) && (\r\n \r\n
\r\n )}\r\n\r\n {(isSaving && isFailedBefore) && (\r\n \r\n
\r\n )}\r\n\r\n {(isSaving && !isFailedBefore) && (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n\r\n {(!isValid) && (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n);\r\n\r\nconst withGlobalState = compose(\r\n withUIContextProps(['livingSituationValue']),\r\n withSelectedPlan,\r\n mapProps(({ livingSituationValue, selectedPlan, ...props }) => ({\r\n ...props,\r\n globalSelectedPlan: selectedPlan,\r\n globalLivingSituationValue: livingSituationValue,\r\n }))\r\n);\r\n\r\nconst withSegmentBannerProps = withProps(({ fields, breakpoint }) => {\r\n const fieldName = {\r\n desktop: 'DesktopBg',\r\n tablet: 'TabletBg',\r\n mobile: 'MobileBg',\r\n };\r\n const secondary = getFieldValue(fields.UseSecondary);\r\n return {\r\n bannerUrl: (\r\n (secondary && getImageFieldSrc(fields[`Secondary${fieldName[breakpoint]}`])) ||\r\n getImageFieldSrc(fields[fieldName[breakpoint]])\r\n ),\r\n defaultPlanId: (\r\n fields.DefaultPlanId &&\r\n fields.DefaultPlanId.fields &&\r\n fields.DefaultPlanId.fields.ApiPlanId &&\r\n fields.DefaultPlanId.fields.ApiPlanId.value) || null,\r\n livingSituationValue: getFieldValue(fields.Title),\r\n usageType:\r\n getFieldValue(fields.UsageType) ||\r\n (fields.UsageType &&\r\n fields.UsageType.fields &&\r\n fields.UsageType.fields.ApiId &&\r\n fields.UsageType.fields.ApiId.value),\r\n autoExpandRates: getFieldValue(fields.AutoExpandRates),\r\n };\r\n});\r\n\r\nconst withSetLivingSituation = compose(\r\n withActions,\r\n withHandlers({\r\n onToggleLivingSituation: ({\r\n selected,\r\n defaultPlanId,\r\n livingSituationValue,\r\n usageType,\r\n autoExpandRates,\r\n globalSelectedPlan,\r\n actions,\r\n }) => () => {\r\n const newUsageType = selected ? 'S' : usageType;\r\n const ui = {\r\n livingSituationValue: selected ? null : livingSituationValue,\r\n expandRates: selected ? false : autoExpandRates,\r\n };\r\n // update global state\r\n actions.setLivingSituation(ui);\r\n\r\n // update and save plan if plan not selected\r\n if (defaultPlanId && !globalSelectedPlan) {\r\n actions.toggleSelectedPlan(defaultPlanId);\r\n }\r\n // save customer data with updated usage type to server\r\n actions.saveUsageType(newUsageType);\r\n },\r\n })\r\n);\r\n\r\nexport default compose(\r\n // Do not render if not setup in sitecore\r\n branch(({ breakpoint, fields }) => !breakpoint || !fields, renderNothing),\r\n // Inject global app state (living situation)\r\n // Note: withGlobalState must be injected before withSegmentBannerProps\r\n // as otherwise it would override the props\r\n withGlobalState,\r\n // Inject segment banner props (extracted from fields)\r\n withSegmentBannerProps,\r\n // Inject selected prop depending on global app state\r\n withProps(({ livingSituationValue, globalLivingSituationValue }) => ({\r\n selected: livingSituationValue === globalLivingSituationValue,\r\n })),\r\n // Inject toggle button event handler\r\n withSetLivingSituation\r\n)(SegmentBannerTile);\r\n","import React from 'react';\r\nimport { compose, withProps, withHandlers, lifecycle } from 'recompose';\r\n\r\nimport { withAvailableServices, withActions } from '../../enhancers';\r\n\r\nimport CTA from '../CTA';\r\n\r\nconst Service = ({ selected, disabled, fields, onToggleService }) => (\r\n \r\n
\r\n {props.children}
;\r\n};\r\n\r\nexport const SummarySection = props => {\r\n return {props.children}
;\r\n};\r\n\r\nexport const Disclaimer = props => {\r\n return {props.children}
;\r\n};\r\n\r\nexport const Details = props => {props.children}
;\r\n\r\nexport const Detail = props => (\r\n \r\n
\r\n);\r\n\r\nexport const Heading = props => {\r\n return {props.title}
\r\n {props.rateDescription ? {props.rateDescription}
: props.data && {props.data}
}\r\n \r\n {props.icon}\r\n
\r\n );\r\n};\r\n\r\nexport const Switch = props => {\r\n return (\r\n \r\n {props.title} {props.subtitle && {props.subtitle}}\r\n
\r\n\r\n {props.usageType === 'S' ? (\r\n
\r\n );\r\n};\r\n","import React from 'react';\r\nimport { compose } from 'recompose';\r\nimport { withCustomer } from '../../enhancers';\r\nimport { SummarySection, Details, Detail, Heading, Title } from './particles';\r\nimport { Card } from '../SVG';\r\n\r\nconst PlanSection = props => {\r\n const { fields, customer } = props;\r\n const cart =\r\n customer &&\r\n customer.PriceChecker &&\r\n customer.PriceChecker.CartInformation;\r\n const plan =\r\n customer &&\r\n customer.Property &&\r\n customer.Property.PlanInfo &&\r\n customer.Property.PlanInfo.Plan;\r\n const discounts = cart && cart.Discounts;\r\n const extras = cart && cart.Extras;\r\n\r\n return (\r\n \r\n We think you are a standard user.\r\n props.toggleType()}>\r\n Switch to low user\r\n \r\n
\r\n ) : (\r\n \r\n We think you are a low user.\r\n props.toggleType()}>\r\n Switch to standard user\r\n \r\n
\r\n )}\r\n \r\n {extras &&\r\n extras.map((extra, index) => (\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n {(isExperienceEditor ||\r\n (fields &&\r\n fields.PromocodeDisclaimer &&\r\n fields.PromocodeDisclaimer.value)) && (\r\n \r\n
\r\n {!promocodeError &&\r\n !(\r\n promoRemovedWithServices ||\r\n promoRemovedWithRules ||\r\n isPromoCodeRestricted ||\r\n promoRemovedWithPlan\r\n ) &&\r\n (promocodeMsg ||\r\n (promocodeSet && promocodeCartMsg)) && (\r\n \r\n {promocodeMsg\r\n ? promocodeMsg\r\n : promocodeCartMsg}\r\n
\r\n )}\r\n\r\n {(promocodeError || promocodeRemoved) && (\r\n \r\n {((isPromoCodeRestricted && promoOnMount) ||\r\n promoRemovedWithPlan) &&\r\n fields.PromocodeRemovedMsgByPlan &&\r\n fields.PromocodeRemovedMsgByPlan.value && (\r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n {(promocodeError || promocodeRemoved) && \r\n !promoSet && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {currentRate &&\r\n currentRate.map((rate, index) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )}\r\n {rate.type === 'ELEC' && selectedPlan !== 'BACH' && (\r\n <>\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n {plan && \r\n {!isLpgOnly && (\r\n \r\n \r\n )}\r\n
\r\n\r\n \r\n {this.props.WhyContactPlaceholder}\r\n
\r\n\r\n \r\n
\r\n );\r\n};\r\nexport default SummaryContainer;\r\n","import React from 'react';\r\nimport { RichText, Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nconst WhyContact = props => {\r\n const img =\r\n props.fields.Image && props.fields.Image.value\r\n ? props.fields.Image.value.src\r\n : null;\r\n return (\r\n \r\n
\r\n {WhyContactPlaceholder}\r\n \r\n
\r\n backToPlans()}>\r\n < Back to plan select\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default WhyContact;\r\n","/* eslint-disable */\n// Do not edit this file, it is auto-generated at build time!\n// See scripts/generate-component-factory.js to modify the generation of this file.\nimport AddressPicker from '../components/AddressPicker';\nimport AllPlans from '../components/AllPlans';\nimport AllPlansContinueButton from '../components/AllPlansContinueButton';\nimport AllPlansGroup from '../components/AllPlansGroup';\nimport BillCompare from '../components/BillCompare';\nimport BroadbandContainer from '../components/BroadbandContainer';\nimport BroadbandTiles from '../components/BroadbandTiles';\nimport ContentBlock from '../components/ContentBlock';\nimport ContinueButton from '../components/ContinueButton';\nimport CTA from '../components/CTA';\nimport EnergyRates from '../components/EnergyRates';\nimport FormHeader from '../components/FormHeader';\nimport FormIntro from '../components/FormIntro';\nimport Icon from '../components/Icon';\nimport InfoBanner from '../components/InfoBanner';\nimport JourneyActionContainer from '../components/JourneyActionContainer';\nimport JourneyButton from '../components/JourneyButton';\nimport LandingPlanPage from '../components/LandingPlanPage';\nimport LpgUsage from '../components/LpgUsage';\nimport Messaging from '../components/Messaging';\nimport MyDetails from '../components/MyDetails';\nimport PlanCard from '../components/PlanCard';\nimport PlanFilter from '../components/PlanFilter';\nimport PlansAndServices from '../components/PlansAndServices';\nimport PromoCodeBanner from '../components/PromoCodeBanner';\nimport PromoPopup from '../components/PromoPopup';\nimport SaveForLaterPopup from '../components/SaveForLaterPopup';\nimport SegmentBanner from '../components/SegmentBanner';\nimport SegmentBannerTile from '../components/SegmentBannerTile';\nimport Services from '../components/Services';\nimport Summary from '../components/Summary';\nimport SummaryContainer from '../components/SummaryContainer';\nimport SVG from '../components/SVG';\nimport ToolTip from '../components/ToolTip';\nimport WhyContact from '../components/WhyContact';\n\nconst components = new Map();\ncomponents.set('AddressPicker', AddressPicker);\ncomponents.set('AllPlans', AllPlans);\ncomponents.set('AllPlansContinueButton', AllPlansContinueButton);\ncomponents.set('AllPlansGroup', AllPlansGroup);\ncomponents.set('BillCompare', BillCompare);\ncomponents.set('BroadbandContainer', BroadbandContainer);\ncomponents.set('BroadbandTiles', BroadbandTiles);\ncomponents.set('ContentBlock', ContentBlock);\ncomponents.set('ContinueButton', ContinueButton);\ncomponents.set('CTA', CTA);\ncomponents.set('EnergyRates', EnergyRates);\ncomponents.set('FormHeader', FormHeader);\ncomponents.set('FormIntro', FormIntro);\ncomponents.set('Icon', Icon);\ncomponents.set('InfoBanner', InfoBanner);\ncomponents.set('JourneyActionContainer', JourneyActionContainer);\ncomponents.set('JourneyButton', JourneyButton);\ncomponents.set('LandingPlanPage', LandingPlanPage);\ncomponents.set('LpgUsage', LpgUsage);\ncomponents.set('Messaging', Messaging);\ncomponents.set('MyDetails', MyDetails);\ncomponents.set('PlanCard', PlanCard);\ncomponents.set('PlanFilter', PlanFilter);\ncomponents.set('PlansAndServices', PlansAndServices);\ncomponents.set('PromoCodeBanner', PromoCodeBanner);\ncomponents.set('PromoPopup', PromoPopup);\ncomponents.set('SaveForLaterPopup', SaveForLaterPopup);\ncomponents.set('SegmentBanner', SegmentBanner);\ncomponents.set('SegmentBannerTile', SegmentBannerTile);\ncomponents.set('Services', Services);\ncomponents.set('Summary', Summary);\ncomponents.set('SummaryContainer', SummaryContainer);\ncomponents.set('SVG', SVG);\ncomponents.set('ToolTip', ToolTip);\ncomponents.set('WhyContact', WhyContact);\n\nexport default function componentFactory(componentName) {\n return components.get(componentName);\n};\n","import { SitecoreContextFactory } from '@sitecore-jss/sitecore-jss-react';\r\n\r\n/*\r\n The SitecoreContextFactory stores the current Sitecore context for the app.\r\n For example, whether the page is currently being edited, or the current language.\r\n Note that the export makes this essentially a singleton, so we can store state in it.\r\n\r\n The Sitecore context is generally updated on route change (/src/index.js).\r\n The `withSitecoreContext()` higher order component from `sitecore-jss-react`\r\n can be used to access the context from within a component.\r\n*/\r\nexport default new SitecoreContextFactory();\r\n","import axios from 'axios';\r\n\r\n/**\r\n * Implements a data fetcher using Axios - replace with your favorite\r\n * SSR-capable HTTP or fetch library if you like. See HttpJsonFetcher\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 Alert;\r\n","import React from 'react';\r\nimport Cookies from 'js-cookie';\r\n\r\nimport * as API from './utils/api';\r\nimport {\r\n planDoesNotMeetSupportedRequirements,\r\n planDoesNotMeetMandatoryRequirements,\r\n doesPlanMeetRequirements,\r\n} from './utils/plans-rules';\r\nimport { isSouthIslandCustomer, isSouthIslandAddress } from './utils/address';\r\nimport { CustomerJourney } from './data/Customer';\r\nimport { PlanRules } from './data/PlansRules';\r\nimport { Services } from './data/Services';\r\nimport { PLAN_LPG_ONLY, PLAN_PIPED_GAS_ONLY } from './constants';\r\n\r\nimport ActionsContext from './context/ActionsContext';\r\nimport UIContext from './context/UIContext';\r\nimport CustomerContext from './context/CustomerContext';\r\nimport PlansAndServicesContext from './context/PlandAndServicesContext';\r\n\r\nimport Alert from './components/Common/Alert';\r\n\r\nclass AppState extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n // Customer will load from API (see componentDidMount)\r\n customer: null,\r\n plansAndServices: {\r\n selectedService: null,\r\n plansRules: initializePlansRules(),\r\n allServices: initializeServices(),\r\n allPlans: [],\r\n lpgUsage: [],\r\n selectedServiceName: [],\r\n selectedBroadband: null,\r\n selectedPlan: null,\r\n activeFilter: null,\r\n activeAlerts: [],\r\n },\r\n ui: {\r\n isTouch: isTouch(),\r\n returningUser: false,\r\n showBillCompareModal: false,\r\n livingSituationValue: null,\r\n usageType: 'S',\r\n planFilterTabsTitles: [],\r\n isSaving: false,\r\n journeyActionsActive: false,\r\n promoDismissed: false,\r\n isPopupOpen: false,\r\n },\r\n error: false,\r\n errorMsg: null,\r\n };\r\n\r\n this.actions = {\r\n createStateApiSession: this.createStateApiSession.bind(this),\r\n\r\n saveForLater: this.saveForLater.bind(this),\r\n searchAddress: this.searchAddress.bind(this),\r\n updateAddress: this.updateAddress.bind(this),\r\n updateICPAddress: this.updateICPAddress.bind(this),\r\n updateService: this.updateService.bind(this),\r\n updatePlan: this.updatePlan.bind(this),\r\n updateBroadband: this.updateBroadband.bind(this),\r\n toggleJourneyActions: this.toggleJourneyActions.bind(this),\r\n togglePopup: this.togglePopup.bind(this),\r\n updateUserAccount: this.updateUserAccount.bind(this),\r\n JustGetSelectedPlan: this.JustGetSelectedPlan.bind(this),\r\n\r\n setExpandRates: this.setExpandRates.bind(this),\r\n setLivingSituation: this.setLivingSituation.bind(this),\r\n setShowBillCompareModal: this.setShowBillCompareModal.bind(this),\r\n setError: this.setError.bind(this),\r\n setPlanFilterTabsTitle: this.setPlanFilterTabsTitle.bind(this),\r\n\r\n updatePlansAndServices: this.updatePlansAndServices.bind(this),\r\n saveService: this.saveService.bind(this),\r\n saveUsageType: this.saveUsageType.bind(this),\r\n savePlan: this.savePlan.bind(this),\r\n saveBB: this.saveBB.bind(this),\r\n toggleSelectedService: this.toggleSelectedService.bind(this),\r\n toggleLpgUsage: this.toggleLpgUsage.bind(this),\r\n toggleSelectedPlan: this.toggleSelectedPlan.bind(this),\r\n toggleSelectedBB: this.toggleSelectedBB.bind(this),\r\n customerChoice: this.customerChoice.bind(this),\r\n\r\n updateEmailAddress: this.updateEmailAddress.bind(this),\r\n toggleMarketingPermission: this.toggleMarketingPermission.bind(\r\n this\r\n ),\r\n validateAndSavePromoCode: this.validateAndSavePromoCode.bind(this),\r\n removePromoCode: this.removePromoCode.bind(this),\r\n restorePromoCode: this.restorePromoCode.bind(this),\r\n setJourneyType: this.setJourneyType.bind(this),\r\n setPromoState: this.setPromoState.bind(this),\r\n\r\n registerPlan: this.registerPlan.bind(this),\r\n checkIfActionsComponentPresent: this.checkIfActionsComponentPresent.bind(\r\n this\r\n ),\r\n\r\n setSitecoreGAId: this.setSitecoreGAId.bind(this),\r\n pushEpValuesToDatalayer: this.pushEpValuesToDatalayer.bind(this),\r\n pushImpressionsToDatalayer: this.pushImpressionsToDatalayer.bind(\r\n this\r\n ),\r\n pushPlanAndDetailsToDatalayer: this.pushPlanAndDetailsToDatalayer.bind(\r\n this\r\n ),\r\n pushContinueToSummaryToDatalayer: this.pushContinueToSummaryToDatalayer.bind(\r\n this\r\n ),\r\n pushSummaryToDatalayer: this.pushSummaryToDatalayer.bind(this),\r\n pushToDataLayer: this.pushToDataLayer.bind(this),\r\n pushPromoCodeToDatalayer: this.pushPromoCodeToDatalayer.bind(this),\r\n pushSummaryOnProceedToDatalayer: this.pushSummaryOnProceedToDatalayer.bind(\r\n this\r\n ),\r\n\r\n registerGoal: this.registerGoal.bind(this),\r\n sha256: this.sha256.bind(this),\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.loadCustomerJourney();\r\n }\r\n\r\n /**\r\n * Check if Journey Actions Component added to page, if not - default to Join journey\r\n */\r\n checkIfActionsComponentPresent = () => {\r\n const route = this.props && this.props.children;\r\n if (route) {\r\n const placeholder =\r\n route.props &&\r\n route.props.rendering &&\r\n route.props.rendering.placeholders &&\r\n route.props.rendering.placeholders['jss-main'];\r\n if (placeholder) {\r\n const actions = placeholder.find(\r\n component =>\r\n component.componentName === 'JourneyActionContainer'\r\n );\r\n if (!actions) {\r\n const journey =\r\n this.state.customer &&\r\n this.state.customer.Customer &&\r\n this.state.customer.Customer.Action;\r\n if (parseInt(journey, 10) !== 0) {\r\n this.setJourneyType({ text: 'Join', id: 0 });\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Returns updated customer state\r\n * @param customer\r\n * @returns {Object}\r\n * @private\r\n */\r\n _getUpdatedCustomerState(customer) {\r\n if (!customer || !(customer instanceof Object) || !customer.Property) {\r\n // set default customer object\r\n customer = { ...CustomerJourney };\r\n }\r\n return {\r\n customer: { ...customer },\r\n error: false,\r\n errorMsg: null,\r\n };\r\n }\r\n\r\n async loadCustomerJourney() {\r\n //console.log(\"sha256 for 'mattlaw@contact.co.nz' is \", this.sha256(\"mattlaw@contact.co.nz\"))\r\n let customer;\r\n try {\r\n\r\n var urlSearchParams = new URLSearchParams(window.location.search);\r\n var saveForLaterID = urlSearchParams.get(\"saveforlaterid\");\r\n var urlPromocode = urlSearchParams.get(\"promocode\");\r\n\r\n customer = await API.getCustomerJourney(saveForLaterID, urlPromocode);\r\n } catch (e) {\r\n /* noop */\r\n }\r\n\r\n return new Promise(resolve => {\r\n this.setState(\r\n state => {\r\n let newState = this._getUpdatedCustomerState(\r\n customer,\r\n true\r\n );\r\n newState = {\r\n ...newState,\r\n plansAndServices: initializePlansAndServices(\r\n newState.customer\r\n ),\r\n ui: {\r\n ...state.ui,\r\n returningUser: isReturning(newState.customer),\r\n ...getLivingSituation(newState.customer),\r\n },\r\n };\r\n return newState;\r\n },\r\n () => {\r\n resolve(this.state.customer);\r\n }\r\n );\r\n });\r\n }\r\n\r\n /**\r\n * Saves customer object into session.\r\n * @param dataToUpdate A partial customer object to be updated.\r\n * @returns {Promise<* | *>}\r\n */\r\n async saveCustomerJourney(dataToUpdate) {\r\n return new Promise((resolve, reject) => {\r\n // Note: this is an ugly workaround for async updater for setState\r\n // something like this.setState(async (prevState) => ({ ... }))\r\n this.setState(({ customer, ui }) => {\r\n (async () => {\r\n try {\r\n const data = await API.saveCustomerJourney(\r\n customer,\r\n dataToUpdate\r\n );\r\n this.setState(\r\n state => {\r\n let newState = this._getUpdatedCustomerState(\r\n data\r\n );\r\n let plansAndServices = {\r\n ...state.plansAndServices,\r\n selectedService: getSelectedServices(\r\n newState.customer\r\n ),\r\n lpgUsage: getLpgUsage(newState.customer),\r\n selectedServiceName: getSelectedServiceNames(\r\n newState.customer\r\n ),\r\n selectedBroadband: getSelectedBroadband(\r\n newState.customer\r\n ),\r\n selectedPlan: getSelectedPlan(\r\n newState.customer\r\n ),\r\n };\r\n newState = {\r\n ...newState,\r\n plansAndServices,\r\n ui: {\r\n ...state.ui,\r\n returningUser: isReturning(\r\n newState.customer\r\n ),\r\n ...getLivingSituation(\r\n newState.customer\r\n ),\r\n isSaving: false,\r\n },\r\n };\r\n return newState;\r\n },\r\n () => {\r\n resolve(this.state.customer);\r\n }\r\n );\r\n } catch (error) {\r\n this.setState(\r\n state => ({\r\n error: true,\r\n errorMsg: error.message,\r\n ui: {\r\n ...state.ui,\r\n isSaving: false,\r\n },\r\n }),\r\n () => {\r\n reject(error);\r\n }\r\n );\r\n }\r\n })();\r\n // do not change state just yet\r\n if (ui.isSaving) {\r\n return {};\r\n }\r\n return {\r\n ui: {\r\n ...ui,\r\n isSaving: true,\r\n },\r\n };\r\n });\r\n });\r\n }\r\n\r\n async saveForLater(dataToUpdate) {\r\n return new Promise((resolve, reject) => {\r\n // Note: this is an ugly workaround for async updater for setState\r\n // something like this.setState(async (prevState) => ({ ... }))\r\n this.setState(({ customer, ui }) => {\r\n (async () => {\r\n try {\r\n const data = await API.saveForLater(\r\n customer,\r\n dataToUpdate\r\n );\r\n\r\n if (data && data.IsSuccessful) {\r\n this.setState(\r\n state => ({}),\r\n () => { resolve(data); }\r\n );\r\n }\r\n else {\r\n this.setState(\r\n state => ({}),\r\n () => { reject(data); }\r\n );\r\n }\r\n\r\n } catch (error) {\r\n this.setState(\r\n state => ({\r\n error: true,\r\n errorMsg: error.message,\r\n }),\r\n () => {\r\n reject(error);\r\n }\r\n );\r\n }\r\n })();\r\n\r\n return {};\r\n });\r\n });\r\n }\r\n\r\n\r\n async createStateApiSession() {\r\n try {\r\n clearStateApiCookie();\r\n const sessionId = await API.createStateApiSession(\r\n this.state.customer\r\n );\r\n setStateApiCookie(sessionId);\r\n return sessionId;\r\n } catch (err) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to establish session for you.\",\r\n });\r\n }\r\n }\r\n\r\n async updateEmailAddress(email) {\r\n const updatedEmailAddress = {\r\n Customer: {\r\n CustomerInfo: {\r\n EmailAddress: email,\r\n },\r\n },\r\n };\r\n\r\n const emailFieldToSave = {\r\n FieldId: 'Customer[CustomerInfo][EmailAddress]',\r\n Value: email,\r\n };\r\n\r\n // We don't need to wait until fulfilled\r\n this.saveField(emailFieldToSave).catch(error => {\r\n console.log('Saving Email field Error ', error);\r\n });\r\n\r\n return this.saveCustomerJourney(updatedEmailAddress);\r\n }\r\n\r\n async updateUserAccount(acc) {\r\n const updatedAccount = {\r\n ExistingCustomer: {\r\n AccountNumber: acc,\r\n },\r\n };\r\n\r\n return this.saveCustomerJourney(updatedAccount);\r\n }\r\n\r\n JustGetSelectedPlan() {\r\n return (\r\n (this.state.customer &&\r\n this.state.customer.Property &&\r\n this.state.customer.Property.PlanInfo &&\r\n this.state.customer.Property.PlanInfo.PlanId) ||\r\n null\r\n );\r\n }\r\n\r\n async toggleMarketingPermission(permit) {\r\n const updatedMarketingPermission = {\r\n Confirmation: {\r\n ReceiveNewsAndOffers: permit,\r\n },\r\n };\r\n\r\n const marketingFieldToSave = {\r\n FieldId: 'Confirmation[ReceiveNewsAndOffers]',\r\n Value: permit ? 'true' : 'false',\r\n };\r\n this.saveField(marketingFieldToSave).catch(error => {\r\n console.log('Saving Marketing Confirmation field Error ', error);\r\n });\r\n\r\n return this.saveCustomerJourney(updatedMarketingPermission);\r\n }\r\n\r\n async validateAndSavePromoCode(promo) {\r\n // Validate promo code & save if valid\r\n return API.validatePromocode(promo).then(\r\n success => {\r\n return new Promise((resolve, reject) => {\r\n if (success && success.IsValid) {\r\n const promocodeFieldToSave = {\r\n FieldId: 'Promotion[PromoCode]',\r\n Value: promo,\r\n };\r\n this.saveField(promocodeFieldToSave).catch(error => {\r\n console.log('Saving Promocode field Error ', error);\r\n });\r\n const promoCodeRestoreFieldToSave = {\r\n FieldId: 'PromoCodeRestore',\r\n Value: promo,\r\n };\r\n this.saveField(promoCodeRestoreFieldToSave).catch(\r\n () => {\r\n /* noop */\r\n }\r\n );\r\n\r\n const promocode = {\r\n Discounts: {\r\n PromoCode: promo,\r\n },\r\n };\r\n this.saveCustomerJourney(promocode).then(\r\n resolve({\r\n status: true,\r\n message: 'Promocode valid',\r\n description: success && success.Description,\r\n plans: success && success.PlanRestricted,\r\n isFGF: success && success.IsReferralCode,\r\n requiredservices:success && success.RequiredServices,\r\n allowedjourneys: success && success.AllowedJourneys,\r\n })\r\n );\r\n } else {\r\n reject({\r\n status: false,\r\n message: success.InvalidMessage,\r\n });\r\n }\r\n });\r\n },\r\n error => {\r\n return {\r\n status: false,\r\n message: 'Network error, please try again later',\r\n };\r\n }\r\n );\r\n }\r\n\r\n async removePromoCode() {\r\n return Promise.all([\r\n this.saveField({\r\n FieldId: 'Promotion[PromoCode]',\r\n Value: null,\r\n }),\r\n this.saveCustomerJourney({\r\n Discounts: {\r\n PromoCode: null,\r\n },\r\n Payment:{\r\n PromoCode: null,\r\n },\r\n }),\r\n ]).catch(() => {\r\n /* noop */\r\n });\r\n }\r\n\r\n async restorePromoCode() {\r\n try {\r\n const restored = await API.getField('PromoCodeRestore');\r\n if (restored) {\r\n await this.saveCustomerJourney({\r\n Discounts: {\r\n PromoCode: restored,\r\n },\r\n });\r\n }\r\n } catch (err) {\r\n /* noop */\r\n }\r\n }\r\n\r\n async saveField(fieldToSave) {\r\n return API.saveField(fieldToSave);\r\n }\r\n\r\n async searchAddress(address) {\r\n return API.searchAddress(address);\r\n }\r\n\r\n async updateAddress(address) {\r\n let updatedCustomer = {\r\n Property: {\r\n PropertyInfo: {\r\n Address: address.PartialAddress,\r\n Moniker: address.Moniker,\r\n AddressDetails: null,\r\n },\r\n },\r\n PriceChecker: {\r\n ElectricityICP: null,\r\n },\r\n Customer: {\r\n SelectedICPNumber: null,\r\n },\r\n };\r\n\r\n // Set piped gas only plan, if address on south island and\r\n // piped only gas service selected.\r\n const { plansAndServices } = this.state;\r\n const services = plansAndServices.selectedService;\r\n if (\r\n services &&\r\n services.length === 1 &&\r\n services.includes('GAS') &&\r\n isSouthIslandAddress(address.PartialAddress)\r\n ) {\r\n updatedCustomer = setGasOnlyPlan(updatedCustomer);\r\n }\r\n\r\n return this.saveCustomerJourney(updatedCustomer);\r\n }\r\n\r\n async updateICPAddress(address) {\r\n return this.saveCustomerJourney({\r\n Property: {\r\n PropertyInfo: {\r\n Address: address.PartialAddress,\r\n ElectricityICP: address.IcpNumber,\r\n },\r\n },\r\n PriceChecker: {\r\n ElectricityICP: { IcpNumber: address.IcpNumber },\r\n },\r\n Customer: {\r\n SelectedICPNumber: address.IcpNumber,\r\n },\r\n });\r\n }\r\n\r\n async setJourneyType(journey) {\r\n let journeyToSet = {\r\n Confirmation: {\r\n JourneyType: journey.text,\r\n },\r\n Customer: {\r\n Action: journey.id,\r\n IsExistingCustomer: journey.id > 0 ? true : false,\r\n },\r\n ExistingCustomer: {\r\n Action: journey.id,\r\n IsExistingCustomer: journey.id > 0 ? true : false,\r\n },\r\n };\r\n\r\n return this.saveCustomerJourney(journeyToSet);\r\n }\r\n\r\n async customerChoice(choice) {\r\n \r\n console.log(\"inside customerChoice\");\r\n console.log(choice);\r\n\r\n return this.saveCustomerJourney({LandingPage: {\r\n IsExistingCustomer: choice\r\n }});\r\n }\r\n\r\n\r\n async updateUsageType(usageType) {\r\n // XXX: Uncomment this after API is implemented\r\n // const usageQuestions = {\r\n // UsageQuestions: {\r\n // LivingSituation: living.livingSituationValue,\r\n // UsageType: living.usageType,\r\n // },\r\n // };\r\n return this.saveCustomerJourney({\r\n Property: {\r\n PropertyInfo: {\r\n ElectricityUserType:\r\n usageType === 'L' ? 'Low User' : 'Standard',\r\n },\r\n },\r\n });\r\n }\r\n\r\n async updateService(services, servicesFullNames) {\r\n let updatedCustomer = {\r\n Property: {\r\n Services: services,\r\n ServicesFullNames: servicesFullNames,\r\n },\r\n };\r\n\r\n // Unselect broadband if no broadband in services\r\n if (!services || !services.includes('BB')) {\r\n updatedCustomer = deselectBroadband(updatedCustomer);\r\n }\r\n\r\n // Additionally check for LPG only - set LPG-only Plan\r\n if (services && services.length === 1 && services.includes('LPG')) {\r\n updatedCustomer = setLpgOnlyPlan(updatedCustomer);\r\n\r\n // if not LPG only but LPG-only plan selected, deselect\r\n } else if (isLpgOnlyPlan(this.state.customer)) {\r\n updatedCustomer = deselectPlan(updatedCustomer);\r\n }\r\n\r\n // Additionally check for piped gas only AND south island address\r\n // if that - set PIPEDGAS-only Plan\r\n if (\r\n services &&\r\n services.length === 1 &&\r\n services.includes('GAS') &&\r\n isSouthIslandCustomer(this.state.customer)\r\n ) {\r\n updatedCustomer = setGasOnlyPlan(updatedCustomer);\r\n\r\n // if not GAS only but PIPEDGAS-only plan selected, deselect\r\n } else if (isGasOnlyPlan(this.state.customer)) {\r\n updatedCustomer = deselectPlan(updatedCustomer);\r\n }\r\n\r\n // Additionally check for non LPG - remove lpg usage data then\r\n if (!services || !services.includes('LPG')) {\r\n updatedCustomer = setLpgUsage(updatedCustomer, null);\r\n }\r\n\r\n return this.saveCustomerJourney(updatedCustomer);\r\n }\r\n\r\n async updateLpgUsage(lpgUsage) {\r\n return this.saveCustomerJourney(setLpgUsage({}, lpgUsage));\r\n }\r\n\r\n async updatePlan(plan) {\r\n return this.saveCustomerJourney(\r\n selectPlan({}, plan.PlanId, plan.PlanItemId)\r\n );\r\n }\r\n\r\n async updateBroadband(id, name) {\r\n\r\n let BBType = null;\r\n let broadbandOfferings =\r\n this.state.customer &&\r\n this.state.customer.PriceChecker &&\r\n this.state.customer.PriceChecker.BroadbandOfferings &&\r\n this.state.customer.PriceChecker.BroadbandOfferings.Offerings;\r\n\r\n if (broadbandOfferings) {\r\n const BBOffering = broadbandOfferings.find(plan => plan.Id === id);\r\n\r\n if (BBOffering) {\r\n BBType = BBOffering.Type;\r\n }\r\n }\r\n\r\n return this.saveCustomerJourney(selectBroadband({}, id, name, BBType));\r\n }\r\n\r\n setExpandRates(value) {\r\n this.setState(({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n expandRates: value,\r\n },\r\n }));\r\n }\r\n\r\n toggleJourneyActions(flag) {\r\n this.setState(({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n journeyActionsActive: flag,\r\n },\r\n }));\r\n }\r\n\r\n togglePopup(flag) {\r\n this.setState(({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n isPopupOpen: flag,\r\n },\r\n }));\r\n\r\n console.log(\"isPopupOpen=\", flag);\r\n }\r\n\r\n setLivingSituation(living) {\r\n this.setState(({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n ...living,\r\n },\r\n error: false,\r\n errorMsg: null,\r\n }));\r\n }\r\n\r\n setPromoState(flag) {\r\n this.setState(({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n promoDismissed: flag,\r\n },\r\n }));\r\n }\r\n\r\n async setShowBillCompareModal(value) {\r\n return new Promise(resolve => {\r\n this.setState(\r\n ({ ui }) => ({\r\n ui: {\r\n ...ui,\r\n showBillCompareModal: value,\r\n },\r\n }),\r\n () => {\r\n resolve();\r\n }\r\n );\r\n });\r\n }\r\n\r\n setError(err) {\r\n if (!err || !err.error) {\r\n this.setState({\r\n error: false,\r\n errorMsg: null,\r\n });\r\n }\r\n if (err && err.error) {\r\n this.setState({\r\n error: true,\r\n errorMsg: err.message ? err.message : null,\r\n });\r\n }\r\n }\r\n\r\n setPlanFilterTabsTitle(index, title) {\r\n this.setState(({ ui }) => {\r\n const planFilterTabsTitles = ui.planFilterTabsTitles || [];\r\n planFilterTabsTitles[index] = title;\r\n return {\r\n ui: {\r\n ...ui,\r\n planFilterTabsTitles,\r\n },\r\n };\r\n });\r\n }\r\n\r\n updatePlansAndServices(data) {\r\n this.setState(({ plansAndServices }) => ({\r\n plansAndServices: {\r\n ...plansAndServices,\r\n ...data,\r\n activeAlerts:\r\n data.activeAlerts ||\r\n ('selectedService' in data ||\r\n 'selectedPlan' in data ||\r\n 'lpgUsage' in data\r\n ? getAlerts(\r\n 'selectedService' in data\r\n ? data.selectedService\r\n : plansAndServices.selectedService,\r\n 'selectedPlan' in data\r\n ? data.selectedPlan\r\n : plansAndServices.selectedPlan,\r\n plansAndServices.plansRules,\r\n 'lpgUsage' in data\r\n ? data.lpgUsage\r\n : plansAndServices.lpgUsage,\r\n plansAndServices.allServices\r\n )\r\n : plansAndServices.activeAlerts),\r\n },\r\n }));\r\n }\r\n\r\n async saveService(services, names) {\r\n try {\r\n await this.updateService(services, names);\r\n } catch (error) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to set services for you.\",\r\n });\r\n }\r\n }\r\n\r\n async saveUsageType(usageType) {\r\n try {\r\n // save customer data with updated usage type to server\r\n await this.updateUsageType(usageType);\r\n } catch (error) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to set your living situation.\",\r\n });\r\n }\r\n }\r\n\r\n async saveLpgUsage(lpgUsage) {\r\n try {\r\n await this.updateLpgUsage(lpgUsage);\r\n } catch (error) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to set services for you.\",\r\n });\r\n }\r\n }\r\n\r\n registerPlan(plan) {\r\n this.setState(({ plansAndServices }) => ({\r\n plansAndServices: {\r\n ...plansAndServices,\r\n allPlans: [\r\n // add a plan which has not been added already\r\n ...plansAndServices.allPlans.filter(\r\n ({ apiId }) => apiId !== plan.apiId\r\n ),\r\n plan,\r\n ],\r\n },\r\n }));\r\n }\r\n\r\n getPlanSiteCoreId(planId) {\r\n const { allPlans } = this.state.plansAndServices;\r\n const plan = allPlans.find(({ apiId }) => apiId === planId);\r\n if (plan) {\r\n return plan.siteCoreId;\r\n }\r\n return null;\r\n }\r\n\r\n getPlanName(planId) {\r\n const { allPlans } = this.state.plansAndServices;\r\n const plan = allPlans.find(({ apiId }) => apiId === planId);\r\n if (plan) {\r\n return plan.title;\r\n }\r\n return null;\r\n }\r\n\r\n async savePlan(planId) {\r\n const plan = {\r\n PlanId: planId,\r\n PlanItemId: this.getPlanSiteCoreId(planId),\r\n };\r\n try {\r\n await this.updatePlan(plan);\r\n } catch (error) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to set Plan for you.\",\r\n });\r\n }\r\n }\r\n\r\n async saveBB(BBId, BBName) {\r\n try {\r\n await this.updateBroadband(BBId, BBName);\r\n } catch (error) {\r\n this.setError({\r\n error: true,\r\n message:\r\n \"We've got a Network error trying to set Broadband Option for you.\",\r\n });\r\n }\r\n }\r\n\r\n toggleSelectedService(id,isIslandRestricted) {\r\n if (!id) return;\r\n\r\n let resetPlan = false;\r\n let resetBroadband = false;\r\n\r\n this.setState(\r\n ({ plansAndServices, customer }) => {\r\n const {\r\n selectedService,\r\n lpgUsage,\r\n selectedPlan,\r\n selectedBroadband,\r\n plansRules,\r\n allServices,\r\n ...rest\r\n } = plansAndServices;\r\n\r\n let newState = {\r\n selectedService: selectedService || [],\r\n selectedPlan,\r\n selectedBroadband,\r\n };\r\n\r\n // toggle service\r\n if (newState.selectedService.includes(id)) {\r\n newState.selectedService = newState.selectedService.filter(\r\n serviceId => serviceId !== id\r\n );\r\n } else {\r\n newState.selectedService = [\r\n ...newState.selectedService,\r\n id,\r\n ];\r\n }\r\n\r\n newState.activeAlerts = getAlertsBeforeRulesApplied(\r\n newState.selectedService\r\n );\r\n\r\n // Check for mutually excluded\r\n const lpg = newState.selectedService.includes('LPG');\r\n const gas = newState.selectedService.includes('GAS');\r\n if (id === 'LPG' && gas && lpg) {\r\n newState.selectedService = newState.selectedService.filter(\r\n srv => srv !== 'GAS'\r\n );\r\n }\r\n if (id === 'GAS' && gas && lpg) {\r\n newState.selectedService = newState.selectedService.filter(\r\n srv => srv !== 'LPG'\r\n );\r\n }\r\n\r\n // Additional check if BB but not ELEC only\r\n const isElec = newState.selectedService.includes('ELEC');\r\n const isBB = newState.selectedService.includes('BB');\r\n if (isBB && !isElec) {\r\n if (id === 'ELEC') {\r\n // unselect broadband\r\n newState.selectedService = newState.selectedService.filter(\r\n srv => srv !== 'BB'\r\n );\r\n } else if (id === 'BB') {\r\n // select electricity\r\n newState.selectedService = [\r\n ...newState.selectedService,\r\n 'ELEC',\r\n ];\r\n }\r\n }\r\n\r\n // Additional check if no BB - set option to null\r\n if (\r\n selectedBroadband &&\r\n (!newState.selectedService ||\r\n !newState.selectedService.includes('BB'))\r\n ) {\r\n newState.selectedBroadband = null;\r\n resetBroadband = true;\r\n }\r\n\r\n // Additional check if LPG only\r\n const lpgOnly =\r\n newState.selectedService.length === 1 &&\r\n newState.selectedService.includes('LPG');\r\n if (lpgOnly) {\r\n // Unselect plan for LPG only\r\n newState.selectedPlan = null;\r\n resetPlan = true;\r\n }\r\n\r\n // Additional check if piped gas only in South Island\r\n const pipedGasOnly =\r\n newState.selectedService.length === 1 &&\r\n newState.selectedService.includes('GAS');\r\n if (pipedGasOnly && isSouthIslandCustomer(customer)) {\r\n // Unselect plan for LPG only\r\n newState.selectedPlan = null;\r\n resetPlan = true;\r\n }\r\n\r\n // Update selected services full names\r\n newState.selectedServiceName = newState.selectedService.map(\r\n service => getServiceFullNameById(allServices, service)\r\n );\r\n\r\n // Update LPG usage\r\n newState.lpgUsage = newState.selectedService.includes('LPG')\r\n ? lpgUsage\r\n : null;\r\n\r\n newState.activeAlerts = [\r\n ...newState.activeAlerts,\r\n ...getAlerts(\r\n newState.selectedService,\r\n newState.selectedPlan,\r\n plansRules,\r\n lpgUsage,\r\n allServices,\r\n false,\r\n isIslandRestricted,\r\n ),\r\n ];\r\n\r\n // Check if selected plan meets requirements\r\n if (\r\n newState.selectedPlan &&\r\n !doesPlanMeetRequirements(\r\n plansRules,\r\n newState.selectedService,\r\n newState.selectedPlan\r\n )\r\n ) {\r\n // Unselect plan\r\n newState.selectedPlan = null;\r\n resetPlan = true;\r\n }\r\n\r\n return {\r\n plansAndServices: {\r\n plansRules,\r\n allServices,\r\n ...rest,\r\n ...newState,\r\n },\r\n };\r\n },\r\n () => {\r\n // save stuff to API once the state is updated\r\n const {\r\n selectedService,\r\n selectedServiceName,\r\n } = this.state.plansAndServices;\r\n if (resetPlan) {\r\n this.savePlan(null);\r\n }\r\n if (resetBroadband) {\r\n this.saveBB(null, null);\r\n }\r\n this.saveService(selectedService, selectedServiceName);\r\n }\r\n );\r\n }\r\n\r\n toggleLpgUsage(id) {\r\n if (!id) return;\r\n\r\n let updatedLpgUsage;\r\n this.setState(\r\n ({ plansAndServices }) => {\r\n const { lpgUsage } = plansAndServices;\r\n\r\n // toggle\r\n if (lpgUsage && lpgUsage.includes(id)) {\r\n updatedLpgUsage = lpgUsage.filter(x => x !== id);\r\n } else {\r\n updatedLpgUsage = [...(lpgUsage || []), id];\r\n }\r\n\r\n const newState = {\r\n ...plansAndServices,\r\n lpgUsage: updatedLpgUsage,\r\n };\r\n // active alerts\r\n newState.activeAlerts = getAlerts(\r\n newState.selectedService,\r\n newState.selectedPlan,\r\n newState.plansRules,\r\n newState.lpgUsage,\r\n newState.allServices\r\n );\r\n return {\r\n plansAndServices: newState,\r\n };\r\n },\r\n () => {\r\n this.saveLpgUsage(updatedLpgUsage);\r\n }\r\n );\r\n }\r\n\r\n async toggleSelectedPlan(id, forceSelect = false, isRestrictionReason) {\r\n if (!id) return;\r\n\r\n return new Promise((resolve, reject) => {\r\n let updateServices = false;\r\n this.setState(\r\n ({ plansAndServices }) => {\r\n const {\r\n selectedPlan,\r\n selectedService,\r\n plansRules,\r\n lpgUsage,\r\n allServices,\r\n } = plansAndServices;\r\n\r\n let newState = {\r\n selectedPlan: id,\r\n selectedService,\r\n };\r\n\r\n // toggle plan\r\n if (newState.selectedPlan === selectedPlan) {\r\n if (forceSelect) {\r\n // don't do any changes if plan already selected\r\n // and forceSelect on\r\n return {};\r\n }\r\n newState.selectedPlan = null;\r\n }\r\n\r\n newState.activeAlerts = getAlerts(\r\n newState.selectedService,\r\n newState.selectedPlan,\r\n plansRules,\r\n lpgUsage,\r\n allServices,\r\n true,\r\n isRestrictionReason\r\n );\r\n\r\n if (newState.selectedPlan) {\r\n // Do Analytics Call\r\n try {\r\n this.pushPlanAndDetailsToDatalayer(\r\n newState.selectedPlan\r\n );\r\n } catch (error) {\r\n console.log('Analytics error', error);\r\n }\r\n\r\n // Check for mandatory requirements\r\n const doesNotMeetMandatory = planDoesNotMeetMandatoryRequirements(\r\n plansRules,\r\n newState.selectedService,\r\n newState.selectedPlan\r\n );\r\n if (doesNotMeetMandatory) {\r\n // Select services\r\n newState.selectedService = [\r\n ...newState.selectedService,\r\n ...doesNotMeetMandatory,\r\n ];\r\n updateServices = true;\r\n }\r\n\r\n // Check for supported requirements\r\n const doesNotMeetSupported = planDoesNotMeetSupportedRequirements(\r\n plansRules,\r\n newState.selectedService,\r\n newState.selectedPlan\r\n );\r\n if (doesNotMeetSupported) {\r\n // Unselect service\r\n newState.selectedService = newState.selectedService.filter(\r\n serviceId =>\r\n !doesNotMeetSupported.includes(serviceId)\r\n );\r\n updateServices = true;\r\n }\r\n }\r\n\r\n newState.selectedServiceName = newState.selectedService.map(\r\n service => getServiceFullNameById(allServices, service)\r\n );\r\n\r\n return {\r\n plansAndServices: {\r\n ...plansAndServices,\r\n ...newState,\r\n },\r\n };\r\n },\r\n () => {\r\n const {\r\n selectedPlan,\r\n selectedService,\r\n selectedServiceName,\r\n } = this.state.plansAndServices;\r\n // requests\r\n const promises = [\r\n updateServices\r\n ? this.saveService(\r\n selectedService,\r\n selectedServiceName\r\n )\r\n : null,\r\n selectedPlan && selectedPlan === 'BACH'\r\n ? this.saveUsageType('S')\r\n : null,\r\n this.savePlan(selectedPlan),\r\n ].filter(Boolean);\r\n // resolve once all requests are fulfilled\r\n Promise.all(promises)\r\n .then(data => resolve(data[data.length - 1]))\r\n .catch(err => reject(err));\r\n }\r\n );\r\n });\r\n }\r\n\r\n async toggleSelectedBB(id, name) {\r\n if (!id) return;\r\n\r\n let reset = false;\r\n this.setState(\r\n ({ plansAndServices }) => {\r\n const { selectedBroadband } = plansAndServices;\r\n const newState = {\r\n ...plansAndServices,\r\n selectedBroadband: id,\r\n };\r\n // toggle\r\n if (newState.selectedBroadband === selectedBroadband) {\r\n newState.selectedBroadband = null;\r\n reset = true;\r\n }\r\n // alerts - Broadband does not trigger any alerts\r\n // newState.activeAlerts = getAlerts(\r\n // newState.selectedService,\r\n // newState.selectedPlan,\r\n // newState.plansRules,\r\n // newState.lpgUsage,\r\n // newState.allServices,\r\n // );\r\n return {\r\n plansAndServices: newState,\r\n };\r\n },\r\n () => {\r\n const { selectedBroadband } = this.state.plansAndServices;\r\n this.saveBB(selectedBroadband, reset ? null : name);\r\n }\r\n );\r\n }\r\n\r\n /*\r\n ** Analitics / eCommerce stuff\r\n **\r\n */\r\n async setSitecoreGAId() {\r\n const id =\r\n window &&\r\n window.dataLayer &&\r\n window.dataLayer.find(key => key['SitecoreContactId']);\r\n if (id) {\r\n const value = id['SitecoreContactId'];\r\n return this.saveCustomerJourney({\r\n SitecoreContactId: value,\r\n });\r\n }\r\n return new Promise(resolve => null);\r\n }\r\n\r\n pushEpValuesToDatalayer() {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const customer = this.state.customer;\r\n const priceChecker = customer && customer.PriceChecker;\r\n const propertyIcp =\r\n customer &&\r\n customer.Property &&\r\n customer.Property.PropertyInfo &&\r\n customer.Property.PropertyInfo.ElectricityICP;\r\n const icp =\r\n priceChecker && priceChecker.ElectricityICP\r\n ? priceChecker.ElectricityICP.IcpNumber\r\n : propertyIcp;\r\n dataLayer.push({\r\n event: 'EPValues',\r\n available: priceChecker.PricingAvailable,\r\n region: priceChecker.Region,\r\n provider: '',\r\n icp: icp || null,\r\n pricingCalc: 'Pricing Calculator',\r\n });\r\n\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n getUserJourneyAction() {\r\n const customer = this.state.customer;\r\n if (customer.ExistingCustomer) {\r\n switch (customer.ExistingCustomer.Action) {\r\n case 1:\r\n case 'MoveHouse':\r\n return 'Existing/MoveHouse';\r\n case 2:\r\n case 'AddProperty':\r\n return 'Existing/AddProperty';\r\n case 3:\r\n case 'ChangePlan':\r\n return 'Existing/ChangePlan';\r\n default: {\r\n if (customer.Property.MoveInfo) {\r\n return typeof customer.Property.MoveInfo\r\n .IsMovingHouse !== 'undefined' &&\r\n (customer.Property.MoveInfo.IsMovingHouse ===\r\n 'true' ||\r\n customer.Property.MoveInfo.IsMovingHouse)\r\n ? 'New/Move'\r\n : 'New/Join';\r\n }\r\n\r\n return 'New/Not Selected';\r\n }\r\n }\r\n }\r\n return 'New/Not Selected';\r\n }\r\n\r\n getProductImpressions(plans) {\r\n const impressions = [];\r\n const body = document.getElementsByTagName('body');\r\n const bodyClasses = body && body.length ? body[0].className : '';\r\n const journey = this.getUserJourneyAction();\r\n\r\n if (plans && plans.length) {\r\n plans.forEach((plan, i) => {\r\n var impression = {\r\n name: plan.name,\r\n id: plan.plan,\r\n price: '',\r\n brand: '',\r\n category: journey,\r\n variant: '',\r\n list: bodyClasses + ' ijoin',\r\n position: i + 1,\r\n };\r\n impressions.push(impression);\r\n });\r\n }\r\n\r\n return impressions;\r\n }\r\n\r\n pushImpressionsToDatalayer(plans) {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n\r\n dataLayer.push({\r\n event: 'productImpression',\r\n ecommerce: {\r\n impressions: this.getProductImpressions(plans),\r\n },\r\n });\r\n\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n pushPlanAndDetailsToDatalayer(plan) {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const body = document.getElementsByTagName('body');\r\n const bodyClasses = body && body.length ? body[0].className : '';\r\n const journey = this.getUserJourneyAction();\r\n const name = this.getPlanName(plan);\r\n\r\n dataLayer.push({\r\n event: 'productClick',\r\n ecommerce: {\r\n click: {\r\n actionField: { list: bodyClasses + ' ijoin' },\r\n products: [\r\n {\r\n name: name,\r\n id: plan,\r\n price: '',\r\n brand: '',\r\n category: journey,\r\n variant: '',\r\n },\r\n ],\r\n },\r\n },\r\n });\r\n dataLayer.push({\r\n event: 'detailView',\r\n ecommerce: {\r\n detail: {\r\n products: [\r\n {\r\n name: name,\r\n id: plan,\r\n price: '',\r\n brand: '',\r\n category: journey,\r\n variant: '',\r\n },\r\n ],\r\n },\r\n },\r\n });\r\n\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n pushContinueToSummaryToDatalayer(acc) {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const journey = this.getUserJourneyAction();\r\n\r\n dataLayer.push({\r\n event: 'planBuilderPageSubmitted',\r\n baid: acc ? acc : '',\r\n journey: journey,\r\n });\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n pushSummaryToDatalayer() {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const journey = this.getUserJourneyAction();\r\n\r\n dataLayer.push({\r\n event: 'SummaryJourney',\r\n journey: journey,\r\n });\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n pushToDataLayer(obj) {\r\n\r\n const dataLayer = (window && window.dataLayer) || [];\r\n\r\n dataLayer.push(obj);\r\n\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n pushPromoCodeToDatalayer(promo, status, reason) {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const journey = this.getUserJourneyAction();\r\n\r\n dataLayer.push({\r\n event: 'promoCodesubmitted',\r\n promoCode: promo,\r\n promoCodeStatus: status,\r\n promoCodeApplicationStatus: reason\r\n ? reason.includes('Error:')\r\n ? 'was not applied based on ' + reason\r\n : 'was removed based on ' + reason\r\n : 'was successfully applied',\r\n journey: journey,\r\n });\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n async pushSummaryOnProceedToDatalayer(summary) {\r\n const dataLayer = (window && window.dataLayer) || [];\r\n const journey = this.getUserJourneyAction();\r\n /*\r\n * Summary in format of:\r\n * {\r\n * marketingConfirmation: true/false,\r\n * email: '%email%',\r\n * address: '%address%',\r\n * city: '%city%',\r\n * postcode: '%postcode%',\r\n * }\r\n */\r\n const email =\r\n summary && summary.email ? await this.sha256(summary.email) : '';\r\n const address =\r\n summary && summary.address\r\n ? await this.sha256(summary.address)\r\n : '';\r\n const city =\r\n summary && summary.city ? await this.sha256(summary.city) : '';\r\n const postcode =\r\n summary && summary.postcode\r\n ? await this.sha256(summary.postcode)\r\n : '';\r\n\r\n dataLayer.push({\r\n event: 'summaryPageSubmitted',\r\n optIn:\r\n summary && summary.marketingConfirmation\r\n ? 'opted-in'\r\n : 'opted-out',\r\n hashedEmail: email,\r\n hashedAddress: address,\r\n hashedCity: city,\r\n hashedZip: postcode,\r\n journey: journey,\r\n });\r\n if (window) {\r\n window.dataLayer = dataLayer;\r\n }\r\n }\r\n\r\n async sha256(string) {\r\n // encode as UTF-8\r\n const strBuffer = new TextEncoder('utf-8').encode(string);\r\n // hash the string\r\n const hashBuffer = await crypto.subtle.digest('SHA-256', strBuffer);\r\n // convert ArrayBuffer to Array\r\n const hashArray = Array.from(new Uint8Array(hashBuffer));\r\n // convert bytes to hex string\r\n const hashHex = hashArray\r\n .map(i => ('00' + i.toString(16)).slice(-2))\r\n .join('');\r\n return hashHex;\r\n }\r\n\r\n async registerGoal(goalId) {\r\n return API.registerGoal(goalId);\r\n }\r\n\r\n /*\r\n ** EOP\r\n */\r\n\r\n render() {\r\n const { customer, plansAndServices, ui, error, errorMsg } = this.state;\r\n\r\n // Wait until customer loaded\r\n if (!customer) return null;\r\n\r\n return (\r\n <>\r\n Page not found
\r\nThis page does not exist.
\r\n\r\n Site: {context.site && context.site.name}\r\n
\r\n Language: {context.language}\r\n
\r\n \r\n Page not found \r\n \r\n
\r\n );\r\n }\r\n\r\n // Don't render anything if the route data is not fully loaded yet.\r\n // This is a good place for a \"Loading\" component, if one is needed.\r\n if (!routeData) {\r\n return null;\r\n }\r\n\r\n // Render the app's root structural layout\r\n return