{children}
*/}\r\n // \r\n //
\r\n // {children}
\r\n // The amount you need to pay can be found on your latest bill or statement.
\r\n\r\n- \r\n
- \r\n If you pay more than you owe this may be refunded or taken off your next bill.\r\n \r\n
- \r\n If you pay less than you owe this may mean we send reminders to you.\r\n \r\n
\r\n
\r\n )}\r\n You currently pay {getFormattedFrequencyText()}.
\r\n\r\n If you’ve missed any payments, you might need to pay more than your usual{' '}\r\n {getFormattedFrequencyText() === 'annually' ? 'annual' : getFormattedFrequencyText()} amount. You can visit\r\n the{' '}\r\n \r\n bill and payments\r\n {' '}\r\n section to see if you’re up to date.\r\n
\r\nIf you pay less than you owe this may mean we send reminders to you.
\r\n \r\n\r\n If you pay more than you owe\r\n
\r\n this may be refunded or taken off your next bill.\r\n
\r\n If you pay less than you owe\r\n
\r\n this may mean we send reminders to you.\r\n
If you pay less than you owe this may mean we send reminders to you.
\r\n \r\n\r\n I agree to the{' '}\r\n \r\n terms & conditions\r\n {' '}\r\n and{' '}\r\n \r\n privacy policy.\r\n \r\n
\r\nPlease try again or come back later.
,\r\n});\r\n\r\nexport const ERRORS = {\r\n unknownError: genericError('unknown'),\r\n 400: genericError('400'),\r\n 403: genericError('403'),\r\n 404: genericError('404'),\r\n 429: genericError('429'),\r\n 500: genericError('500'),\r\n 503: genericError('503'),\r\n};\r\n\r\nconst ErrorMessage = ({ error, errorCount }) => (\r\n\r\n {ERRORS[error] && (\r\n \r\n \r\n \r\n {ERRORS[error].message}\r\n \r\n \r\n \r\n )}\r\n
\r\n);\r\n\r\nErrorMessage.propTypes = {\r\n error: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n errorCount: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default ErrorMessage;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { ContentGroup, Loader, ReviewDetails, HeadingBlock, AccordionSingle, Button } from 'yw-ui.v2';\r\n\r\nimport { PageHeading } from '../components';\r\nimport { updateIsEditing } from '../../store/app/appActions';\r\nimport { submitPaymentDetails, updatePaymentIsLoading } from '../../store/payment/paymentActions';\r\nimport { PROP_TYPES } from '../../settings';\r\nimport { APP_URLS, YW_URLS } from '../../common/constants';\r\nimport { handleFocus, getFormattedAccountReference } from '../../common/functions';\r\nimport { TermsAndConditions } from './components';\r\n\r\nconst CheckDetails = ({\r\n decrementPage,\r\n app: { channel },\r\n auth,\r\n payment: { paymentAmount: amount, paymentIsLoading, paymentError },\r\n customer: {\r\n customerReferenceNumber: accountReference,\r\n title,\r\n firstName,\r\n lastName,\r\n telephoneNumber,\r\n emailAddress,\r\n postcode,\r\n customerResponse,\r\n billingAddressDetails,\r\n autoEnrol,\r\n autoEnrolPassword,\r\n },\r\n submitPaymentDetails,\r\n history,\r\n updatePaymentIsLoading,\r\n updateIsEditing,\r\n isAuthenticated,\r\n}) => {\r\n const reCaptchaRef = useRef(null);\r\n const [errorCount, setErrorCount] = useState(0);\r\n\r\n useEffect(() => {\r\n handleFocus('#page-heading_heading');\r\n updateIsEditing(false);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n paymentError && setErrorCount(errorCount + 1);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [paymentError]);\r\n\r\n const getAddressDetails = (addressSource) => {\r\n if (!addressSource) {\r\n return '';\r\n }\r\n const { addressLineOne, addressLineTwo, addressLineThree, town, postcode } = addressSource;\r\n let address = '';\r\n\r\n if (addressLineOne) {\r\n address += `${addressLineOne}, `;\r\n }\r\n if (addressLineTwo) {\r\n address += `${addressLineTwo}, `;\r\n }\r\n if (addressLineThree) {\r\n address += `${addressLineThree}, `;\r\n }\r\n if (town) {\r\n address += `${town}, `;\r\n }\r\n if (postcode) {\r\n address += postcode;\r\n }\r\n return address;\r\n };\r\n\r\n const handleReCaptcha = () => {\r\n updatePaymentIsLoading(true);\r\n reCaptchaRef.current.reset();\r\n reCaptchaRef.current.execute();\r\n };\r\n\r\n const onSubmit = async () => {\r\n const reCaptchaResponse = await reCaptchaRef.current.getResponse();\r\n // If authenticated make an api call to get customer details.\r\n const token = auth && auth.authResponse && auth.authResponse.access_token ? auth.authResponse.access_token : '';\r\n let autoEnrolData = null;\r\n if (autoEnrol.eligible) {\r\n autoEnrolData = {\r\n email: emailAddress,\r\n password: autoEnrolPassword.password,\r\n };\r\n }\r\n await submitPaymentDetails({\r\n accountReference,\r\n postcode,\r\n amount,\r\n title,\r\n firstName,\r\n lastName,\r\n telephoneNumber,\r\n emailAddress,\r\n reCaptchaResponse,\r\n channel,\r\n token,\r\n billingAddressDetails,\r\n autoEnrol: autoEnrolData,\r\n });\r\n };\r\n\r\n return (\r\n \r\n {customerResponse && customerResponse.decryptedAccountReference && (\r\n {getFormattedAccountReference(customerResponse.decryptedAccountReference)}\r\n )}\r\n {customerResponse.hasMultipleAccounts && (\r\n
\r\n If you want to make a payment for a different property you manage, please go back to your online\r\n account and select the correct property.\r\n
\r\n
\r\n
Payment reference: {paymentReference}
\r\nYour payment can take up to 3 working days to show on your account
\r\n\r\n We've sent a receipt to your email address {emailAddress}\r\n
\r\n {autoEnrol.eligible ? (\r\n\r\n Keep an eye on your inbox for an email to verify your online account and check your spam/junk folder if you\r\n don't hear from us.\r\n
\r\n ) : (\r\nCheck your email junk or spam folder if you don't hear from us.
\r\n )}\r\n\r\n
\r\n \r\n \r\n Something
went
wrong\r\n
\r\n\r\n went
wrong\r\n
\r\n
\r\n \r\n Sorry, your payment hasn't been authorised. You may need to contact your bank. You could try\r\n paying with another card.\r\n
\r\nPlease close this tab and try again in a couple of hours.
\r\n\r\n
\r\n \r\n \r\n Something
went
wrong\r\n
\r\n\r\n went
wrong\r\n
\r\n
\r\n \r\n If you've just submitted a payment we'll email you about this or if you're wanting to\r\n make a payment, please go to the start of the payment form.\r\n
\r\nPlease close this tab and try again in a couple of hours.
\r\n\r\n
\r\n \r\n \r\n Something
went
wrong\r\n
\r\n\r\n went
wrong\r\n
\r\n
\r\n \r\n If you've just submitted a payment we'll email you about this or if you're wanting to\r\n make a payment, please start again.\r\n
\r\nPlease close this tab and try again in a couple of hours.
\r\n\r\n
\r\n \r\n \r\n Something
went
wrong\r\n
\r\n\r\n went
wrong\r\n
\r\n
\r\n \r\n Sorry, there's been a technical problem and we're unable to take your payment. Please try\r\n again later.\r\n
\r\n\r\n {message}\r\n
\r\n \r\n )}\r\nYour password needs to have:
\r\n- \r\n
- at least 8 characters \r\n
- at least one capital letter \r\n
- a number or symbol. \r\n
*You need to complete this information
\r\n\r\n
\r\n );\r\n}\r\n\r\nMainLayout.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n};\r\n\r\nexport default MainLayout;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst HeroLayout = ({ heroCollapse, children }) => {\r\n return (\r\n {children}
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nHeroLayout.propTypes = {\r\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\r\n heroCollapse: PropTypes.bool,\r\n};\r\n\r\nexport default HeroLayout;\r\n","import React, { StrictMode, useState, useEffect } from 'react';\r\nimport { Switch, Route, Redirect, useLocation } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { PrivateRoute } from 'fluid-auth';\r\n\r\nimport { TELEMETRY } from './common/settings';\r\nimport useTelemetry from './common/hooks/useTelemetry';\r\nimport {\r\n scrollToSwoosh,\r\n handleFocus,\r\n handleRedirects,\r\n getSavedAccountReference,\r\n LOGGED_IN_SLUG,\r\n} from './common/functions';\r\nimport { history } from './store';\r\nimport { ACCESS_TOKEN_LIFESPAN, APP_URLS, YW_URLS } from './common/constants';\r\nimport * as SCENES from './scenes';\r\nimport { MainLayout } from './scenes/layouts';\r\nimport { updatePaymentState } from './store/payment/paymentActions';\r\nimport { updateChannel } from './store/app/appActions';\r\nimport { PROP_TYPES } from './settings';\r\nimport './common/styles/index.scss';\r\nimport { ADDRESS_OPTIONS } from './scenes/03_address-details/settings/constants';\r\nimport HeroLayout from './scenes/layouts/HeroLayout';\r\nimport { AppBreadcrumbs, PageContentHeader } from './scenes/components';\r\nimport { PAYEE_TYPE } from './common/constants/payeeType';\r\n\r\nconst App = ({\r\n updatePaymentState,\r\n updateChannel,\r\n auth,\r\n app: { formStarted, addressOption, payeeType },\r\n customer: { autoEnrol },\r\n}) => {\r\n useTelemetry(TELEMETRY.INSTRUMENTATION_KEY, TELEMETRY.IS_ENABLED, history, TELEMETRY.REPLACE_TITLE);\r\n\r\n const [isAuthenticated, setIsAuthenticated] = useState(false);\r\n const [savedAccountReference, setSavedAccountReference] = useState('');\r\n const { search } = useLocation();\r\n const [routesConfig, setRoutesConfig] = useState([\r\n { route: APP_URLS.START, component: SCENES.Start },\r\n { route: APP_URLS.PAYEE_TYPE, component: SCENES.PayeeType },\r\n { route: APP_URLS.ACCOUNT_DETAILS, component: SCENES.AccountDetails },\r\n { route: APP_URLS.ADDRESS_DETAILS, component: SCENES.AddressDetails },\r\n { route: APP_URLS.ADDRESS_LOOKUP, component: SCENES.AddressLookup },\r\n { route: APP_URLS.CONTACT_DETAILS, component: SCENES.ContactDetails },\r\n { route: APP_URLS.CREATE_LOGIN, component: SCENES.CreateLogin },\r\n { route: APP_URLS.PAYMENT_AMOUNT, component: SCENES.PaymentAmount },\r\n { route: APP_URLS.CHECK_DETAILS, component: SCENES.CheckDetails },\r\n { route: APP_URLS.THANKS, component: SCENES.Thanks },\r\n { route: APP_URLS.SOMETHING_WENT_WRONG, component: SCENES.SomethingWentWrong },\r\n ]);\r\n const [routes, setRoutes] = useState(routesConfig.map(({ route }) => route));\r\n const [routesUpdated, setRoutesUpdated] = useState(false);\r\n\r\n useEffect(() => {\r\n const { pathname } = history.location;\r\n if (search) {\r\n const accountReference = new URLSearchParams(search).get('accountReference');\r\n const channel = new URLSearchParams(search).get('channel');\r\n const state = new URLSearchParams(search).get('state');\r\n // Save account reference if not already exists.\r\n if (accountReference) {\r\n setSavedAccountReference(accountReference);\r\n const data = {\r\n accountReference: encodeURIComponent(accountReference),\r\n lastUpdated: new Date(),\r\n };\r\n sessionStorage.setItem('savedAccountReference', JSON.stringify(data));\r\n }\r\n if (channel) {\r\n updateChannel(channel);\r\n }\r\n // Handle return from Pay360\r\n if (pathname.includes(APP_URLS.CALLBACK) && !pathname.includes(APP_URLS.RESPONSE) && state) {\r\n updatePaymentState(state);\r\n history.push(APP_URLS.THANKS);\r\n }\r\n } else {\r\n // Check if there is a saved account reference\r\n const { accountReference, lastUpdated } = getSavedAccountReference();\r\n if (accountReference) {\r\n //Check lastUpdated timestamp is less than the specified amount of minutes\r\n const currentDateTime = new Date();\r\n const futureDateTime = new Date(\r\n lastUpdated.setMinutes(new Date(lastUpdated).getMinutes() + ACCESS_TOKEN_LIFESPAN),\r\n );\r\n if (currentDateTime > futureDateTime) {\r\n // Redirect to account login page.\r\n sessionStorage.removeItem('savedAccountReference');\r\n window.location.replace(YW_URLS.ACCOUNT_AREA);\r\n } else {\r\n setSavedAccountReference(accountReference);\r\n const authenticationRetry = sessionStorage.getItem('authenticationRetry') || null;\r\n if (!authenticationRetry) {\r\n sessionStorage.setItem('authenticationRetry', `${true}`);\r\n history.push(`${APP_URLS.REDIRECT}?accountReference=${accountReference}`);\r\n }\r\n }\r\n } else if (pathname.includes(LOGGED_IN_SLUG)) {\r\n window.location.replace(YW_URLS.ACCOUNT_AREA);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n const { accountReference } = getSavedAccountReference();\r\n if (accountReference) {\r\n setSavedAccountReference(accountReference);\r\n if ((auth && auth.isAuthenticated) || accountReference) {\r\n setIsAuthenticated(true);\r\n const authenticationRetry = sessionStorage.getItem('authenticationRetry') || null;\r\n if (authenticationRetry) {\r\n sessionStorage.removeItem('authenticationRetry');\r\n }\r\n\r\n if (auth && auth.isAuthenticated) {\r\n const { pathname } = history.location;\r\n if (pathname.includes(APP_URLS.CALLBACK_RESPONSE)) {\r\n history.push(APP_URLS.START);\r\n }\r\n }\r\n\r\n // Filter slugs to remove logged out steps.\r\n if (!routesUpdated) {\r\n const updatedRouteConfig = routesConfig.filter((routeConfig) => {\r\n return (\r\n routeConfig.route !== APP_URLS.PAYEE_TYPE &&\r\n routeConfig.route !== APP_URLS.ACCOUNT_DETAILS &&\r\n routeConfig.route !== APP_URLS.CONTACT_DETAILS &&\r\n routeConfig.route !== APP_URLS.CREATE_LOGIN\r\n );\r\n });\r\n setRoutesConfig(updatedRouteConfig);\r\n setRoutes(updatedRouteConfig.map((routeConfig) => routeConfig.route));\r\n setRoutesUpdated(true);\r\n }\r\n }\r\n }\r\n }, [auth, routesUpdated, routesConfig]);\r\n\r\n useEffect(() => {\r\n const { accountReference } = getSavedAccountReference();\r\n // handleQueries();\r\n handleRedirects(formStarted, history, accountReference, auth);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const isLastUpdatedTimeStampValid = () => {\r\n const { lastUpdated } = getSavedAccountReference();\r\n if (!lastUpdated) {\r\n return true;\r\n }\r\n const currentDateTime = new Date();\r\n const futureDateTime = new Date(lastUpdated.setMinutes(new Date(lastUpdated).getMinutes() + ACCESS_TOKEN_LIFESPAN));\r\n return currentDateTime < futureDateTime;\r\n };\r\n\r\n const incrementPage = (isEditing = false, currentStep = '', autoEnrolResponse = autoEnrol) => {\r\n //Check lastUpdated timestamp is less than the specified amount of minutes\r\n if (!isLastUpdatedTimeStampValid()) {\r\n // Redirect to account login page.\r\n window.location.replace(YW_URLS.ACCOUNT_AREA);\r\n } else {\r\n if (currentStep === APP_URLS.START) {\r\n history.push(routes[1]);\r\n } else if (isEditing) {\r\n history.push(APP_URLS.CHECK_DETAILS);\r\n } else {\r\n const current = routes[routes.indexOf(history.location.pathname)];\r\n if (current === APP_URLS.ADDRESS_DETAILS && addressOption === ADDRESS_OPTIONS.USE_ACCOUNT_ADDRESS) {\r\n history.push(routes[routes.indexOf(history.location.pathname) + 2]);\r\n } else if (current === APP_URLS.CONTACT_DETAILS) {\r\n if (payeeType === PAYEE_TYPE.SOMEONE_ELSE || !autoEnrolResponse.eligible) {\r\n history.push(routes[routes.indexOf(history.location.pathname) + 2]);\r\n } else {\r\n history.push(routes[routes.indexOf(history.location.pathname) + 1]);\r\n }\r\n } else {\r\n history.push(routes[routes.indexOf(history.location.pathname) + 1]);\r\n }\r\n }\r\n scrollToSwoosh();\r\n handleFocus('#page-heading_heading');\r\n }\r\n };\r\n\r\n const decrementPage = () => {\r\n if (\r\n (routes[routes.indexOf(history.location.pathname)] === APP_URLS.CONTACT_DETAILS &&\r\n addressOption === ADDRESS_OPTIONS.USE_ACCOUNT_ADDRESS) ||\r\n (auth &&\r\n auth.isAuthenticated &&\r\n routes[routes.indexOf(history.location.pathname)] === APP_URLS.PAYMENT_AMOUNT &&\r\n addressOption === ADDRESS_OPTIONS.USE_ACCOUNT_ADDRESS)\r\n ) {\r\n history.push(routes[routes.indexOf(history.location.pathname) - 2]);\r\n } else if (routes[routes.indexOf(history.location.pathname)] === APP_URLS.PAYMENT_AMOUNT) {\r\n if (payeeType === PAYEE_TYPE.SOMEONE_ELSE || !autoEnrol.eligible) {\r\n history.push(routes[routes.indexOf(history.location.pathname) - 2]);\r\n } else {\r\n history.push(routes[routes.indexOf(history.location.pathname) - 1]);\r\n }\r\n } else {\r\n history.push(routes[routes.indexOf(history.location.pathname) - 1]);\r\n }\r\n scrollToSwoosh();\r\n handleFocus('#page-heading_heading');\r\n };\r\n\r\n const renderComponent = (Component) => (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {children}
\r\n