{children}
\r\n {title}
\r\n {description ?{description}
: null}\r\n \r\n\r\n The password should be at least 8 characters, contain one lowercase character, one\r\n uppercase character and one symbol.\r\n
\r\n\r\n\r\n {errorMessage} please request another password reset\r\n
\r\n ) : (\r\n\r\n
\r\n \r\n
\r\n {price}
\r\n {/* {status} */}\r\n\r\n {loading ? (\r\n getStatementPdf(statementNumber)} />\r\n )}\r\n
\r\n \r\n
\r\n ) : (\r\n {`${convertDate(startDate)} - ${convertDate(endDate)}`}
\r\n\r\n {loading ? (\r\n getStatementPdf(statementNumber)} />\r\n )}\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n );\r\n\r\n return (\r\n An error occurred
\r\nCannot display information at this time, please try refreshing the page.
\r\n\r\n {data!.length <= 0 ? (\r\n
\r\n );\r\n};\r\n\r\nexport default BillingList;\r\n","import axios, { AxiosResponse } from 'axios';\r\nimport { useQuery } from 'react-query';\r\nimport { useContext } from 'react';\r\nimport { UserContext } from '../../context/UserContext';\r\n\r\nimport { ApiParamsAndHeaders } from '../../types/ApiParamsAndHeaders';\r\nimport { useQueryConfig } from '../useQueryConfig';\r\nimport { Statement } from '../../types/Statement';\r\n\r\nconst getStatementDetails = async (apiParamsAndHeaders: ApiParamsAndHeaders) => {\r\n const { data } = await axios.postNo statements
\r\n ) : (\r\n data?.map(statement => (\r\n\r\n Total Outstanding\r\n
\r\n \r\n ${currentBalance}\r\n
\r\n\r\n Total Overdue\r\n
\r\n \r\n {overduePrice(statementData!.currentCharges, customerData!.currentBalance)}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Chevron;\r\n","import React, { useState } from 'react';\r\n\r\nimport styled from 'styled-components/macro';\r\nimport { ExternalPrimaryButtonLink, PrimaryButtonLink, SecondaryButtonLink } from '../Buttons';\r\nimport Chevron from '../Icons/Chevron';\r\n\r\ntype StyleProps = {\r\n src?: string;\r\n isError: boolean;\r\n};\r\n\r\nconst StyledCard = styled.div setToggle(!toggle)}>\r\n {imgSrc && title &&
\r\n )}\r\n {!imgSrc ? {title}
}\r\n {isDropDown ? (\r\n\r\n
\r\n ) : null}\r\n {title}
: null}\r\n\r\n {isDropDown ? (\r\n\r\n {children}\r\n
\r\n )}\r\n\r\n {button === 'primary' ? (\r\n externalLink ? (\r\n {
\r\n \r\n
\r\n
\r\n\r\n Total Outstanding
\r\n\r\n ${currentBalance}\r\n
\r\n\r\n \r\n {overduePrice(statementData!.currentCharges, customerData!.currentBalance)}\r\n\r\n
\r\n
\r\n Total Overdue
\r\n\r\n {overduePrice(statementData!.currentCharges, customerData!.currentBalance)}\r\n\r\n \r\n {isOverDue(statementData!.currentCharges, customerData!.currentBalance)\r\n ? 'Overdue'\r\n : 'Nothing overdue'}\r\n \r\n
\r\n \r\n Make a payment \r\n
\r\n Bills
\r\n\r\n
\r\n \r\n
\r\n Account Details
\r\nAccount number
\r\n{loggedInUser.customerNumber}
\r\nNational Meter Identifier (NMI)
\r\n{data?.nmi}
\r\nSupply address
\r\n{data?.address}
\r\n\r\n {editing ? (\r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n 0\r\n \r\n
\r\n ) : (\r\n !mutation.isLoading && (\r\n \r\n {0}\r\n {detail}{' '}\r\n
{detail}
\r\n{error?.message}
;\r\n\r\n return (\r\nPersonal Details
\r\n {isLoading || isIdle ? (\r\nLogin Details
\r\n {isLoading || isIdle ? (\r\nPayment method
\r\n\r\n
\r\n );\r\n\r\n if (isError)\r\n return (\r\n \r\n
\r\n );\r\n\r\n return (\r\n Information unavailable
\r\nOops, something went wrong. Please refresh the page.
\r\n\r\n
\r\n Feel Good Plan
\r\n\r\n {data?.tariffLists.map(detail => (\r\n
\r\n Rates are inclusive of GST
\r\nMy Details
\r\n\r\n
\r\n Payment Method
\r\n\r\n Direct Debit {accountNumber}\r\n
\r\nSet up direct debit
\r\nPlease contact support on 1300 133 055 to setup Direct Debit
\r\n \r\n );\r\n};\r\n\r\nexport default DirectDebitCard;\r\n","export default __webpack_public_path__ + \"static/media/cancer-council.d4821300.svg\";","export default __webpack_public_path__ + \"static/media/smartenergy-sleep.bac10c79.svg\";","import React from 'react';\r\nimport styled from 'styled-components/macro';\r\n// Components\r\nimport Card from '../Card/Card';\r\n// Assets\r\nimport feelGoodBg from '../../images/feel-good-bg.png';\r\nimport cancerCouncil from '../../images/cancer-council.svg';\r\nimport australianFlag from '../../images/australian-flag.png';\r\nimport smartSleep from '../../images/smartenergy-sleep.svg';\r\n\r\nconst StyledImageDetail = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n width: 100%;\r\n margin-top: 24px;\r\n .image {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 120px;\r\n img {\r\n text-align: center;\r\n display: inline-block;\r\n height: 48px;\r\n }\r\n }\r\n .content {\r\n margin-left: 25px;\r\n display: inline-block;\r\n width: 206px;\r\n }\r\n`;\r\nconst PlanCard = () => {\r\n return (\r\n\r\n 
\r\n
\r\n \r\n We donate $1 of every electricity bill to Cancer Council.\r\n
\r\n \r\n 
\r\n
\r\n \r\n Sleep well at night, your electricity is 100% carbon neutral.\r\n
\r\n \r\n 
\r\n
\r\n \r\n Aussie customer support at your service.\r\n
\r\n {start.toString()}
\r\n{end.toString()}
\r\n{`${daysLeft <= 1 ? 0 : daysLeft} days left`}
\r\n {/*{`${calcDayDifference(data!.start, data!.end)} Days`}
*/}\r\n\r\n {
\r\n
\r\n );\r\n\r\n return (\r\n {
\r\n \r\n
Hi {data?.firstName},
\r\n\r\n \r\n \r\n Account number: {data?.customerNumber}\r\n \r\n
\r\n
\r\n {/* Two column layout */}\r\n Incorrect email or password
\r\n ) : null}\r\n\r\nThe email you have entered doesn’t match our records.
\r\n\r\n Please contact customer service on 1300 133 055 if you\r\n think your email is right and still can’t reset your password.\r\n
\r\n \r\n ) : null}\r\n \r\n ) : (\r\nCheck your email!
\r\n\r\n We’ve sent a link to {email}. Please follow the instructions in the\r\n email to set your password.\r\n
\r\nDidn't get it?
\r\n\r\n Give it a minute. Also remember to check your spam folder. Sometimes emails end up\r\n there.\r\n
\r\nOops something went wrong. We are redirecting you back to the login screen.
\r\nSecure payments by
\r\n\r\n {img1 && 
}\r\n {img2 && 
}\r\n
\r\n \r\n \r\n
\r\n\r\n {bpay && (\r\n \r\n \r\n
\r\n )}\r\n Pay with debit or credit card
\r\n\r\n \r\n \r\n {cvnError && CVN invalid}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CardDetailsInputs;\r\n","export const calcPercentage = (percentage: number, total: number) => {\r\n if (total) {\r\n return parseFloat(((percentage / 100) * total).toFixed(2));\r\n } else {\r\n return 0.0;\r\n }\r\n};\r\n","import { calcPercentage } from '../utils/calcPercentage';\r\n\r\nexport type CardDetails = {\r\n cardHolderName: string;\r\n cardNumber: string;\r\n cvn: string;\r\n expiryDate: string;\r\n};\r\n\r\nexport class PaymentPayload {\r\n amountSurcharge: number;\r\n\r\n constructor(\r\n public amount: number,\r\n public currency: string,\r\n public merchantReference: string,\r\n public customerNumber: string,\r\n public emailAddress: string,\r\n public cardDetails: CardDetails\r\n ) {\r\n this.amountSurcharge = parseInt(calcPercentage(1.78, amount).toString());\r\n }\r\n}\r\n","import styled from 'styled-components/macro';\r\n\r\nconst StyledBpayInfo = styled.div`\r\n .info {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n span {\r\n font-weight: 900;\r\n }\r\n }\r\n`;\r\n\r\nconst BPayInfo = () => (\r\n <>\r\n Pay with BPAY
\r\n\r\n Make a payment directly from your Australian Bank account using the reference number.\r\n
\r\n\r\n Biller code
\r\n 361030
\r\n\r\n Reference
\r\n 700000002
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DropDownArrow;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { ClipLoader } from 'react-spinners';\r\nimport styled from 'styled-components/macro';\r\nimport useCustomerDetails from '../../hooks/api/useCustomerDetails';\r\nimport useStatementDetails from '../../hooks/api/useStatementDetails';\r\nimport { isOverDue } from '../../utils/isOverdue';\r\nimport { overduePrice } from '../../utils/overduePrice';\r\nimport DropDownArrow from '../Icons/DropDownArrow';\r\n\r\nconst AmountButton = styled.button<{ active?: boolean }>`\r\n padding: 12px 20px;\r\n width: 100%;\r\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\r\n text-align: left;\r\n background: none;\r\n display: block;\r\n border-radius: 2px;\r\n &:hover {\r\n box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);\r\n }\r\n border: solid 1px ${props => (props.active ? props.theme.smartBlue : '#dadada')};\r\n opacity: ${props => (props.disabled ? '50%' : '100%')};\r\n background-color: #fff;\r\n transition: all 0.2s ease-in-out;\r\n span {\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: block;\r\n }\r\n .price {\r\n font-weight: 900;\r\n }\r\n`;\r\n\r\nconst StyledSelectAmount = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n label {\r\n margin: 16px 0px;\r\n font-size: 16px;\r\n font-weight: 900;\r\n }\r\n`;\r\n\r\nconst SelectAmountDropdown = styled.div`\r\n display: flex;\r\n width: 100%;\r\n`;\r\ntype Props = {\r\n amountType: 'total' | 'over' | '';\r\n handlePaymentAmountSelect: (\r\n e: React.MouseEvent\r\n
\r\n );\r\n }\r\n\r\n if (isStatementError || isCustomerError) {\r\n return Oops, something went wrong. Please refresh the page.
;\r\n }\r\n if (!customerData || !statementData) {\r\n returnno balances to display
;\r\n }\r\n const openAmountsHandler = (e: React.MouseEvent\r\n {amountType === 'over' ? (\r\n
\r\n \r\n \r\n \r\n {overduePrice(statementData!.currentCharges, customerData!.currentBalance)}\r\n \r\n Overdue amount\r\n
\r\n ) : (\r\n \r\n {'$' + customerData!.currentBalance.toFixed(2)}\r\n Total outstanding\r\n
\r\n )}\r\n \r\n \r\n Total: {getLocation.currencySign}{paymentAmount != null && paymentAmount != '' ? paymentAmount : '0.00'}\r\n
\r\n \r\n\r\n {'+'}{percentage}{'%'} Transaction Fee\r\n
\r\n\r\n \r\n Checkout\r\n \r\n )}\r\n
\r\n \r\n
\r\n ) : (\r\n {message}
\r\n\r\n
\r\n);\r\n\r\nexport default PoliInfo;\r\n","import React, { useState } from 'react';\r\nimport styled from 'styled-components/macro';\r\n\r\nimport Input from '../Input';\r\n\r\nimport stripeLogo from '../../images/stripe-logo.png';\r\nimport SecurePaymentsLogos from './SecurePaymentsLogos';\r\nimport PaymentOptions from './PaymentOptions';\r\n\r\nimport { StripeComponent } from './StripeComponent';\r\nimport PoliInfo from './PoliInfo';\r\nimport BPayInfo from './BPayInfo';\r\nimport { LocationModel } from '../Helpers/Location';\r\n\r\nconst StyledFees = styled.div`\r\n text-align: right;\r\n margin-bottom: 32px;\r\n`;\r\n\r\nconst StyledFieldWrapper = styled.div`\r\n max-width: 405px;\r\n width: 90%;\r\n margin: 0 auto;\r\n`;\r\ntype Props = {\r\n getLocation: LocationModel;\r\n \r\n};\r\nconst SolarPaymentForm = ({getLocation} : Props) => {\r\n const [customerName, setCustomerName] = useState('');\r\n const [customerEmail, setCustomerEmail] = useState('');\r\n const [paymentAmount, setPaymentAmount] = useState('');\r\n const [salesOrderNo, setSalesOrderNo] = useState('');\r\n\r\n const [amountError, setAmountError] = useState(false);\r\n // const [customerEmailError, setCustomerEmailError] = useState(false);\r\n const [customerNameError, setCustomerNameError] = useState(false);\r\n const [salesOrderNoError, setSalesOrderNoError] = useState(false);\r\n\r\n const [option, setOption] = useState<'credit-card' | 'poli' | 'bpay'>('credit-card');\r\n\r\n const enableButton = () =>\r\n [customerName, customerEmail, salesOrderNo, paymentAmount].some(value => value.trim() === '') ||\r\n [amountError, customerNameError, salesOrderNoError].some(value => value === true);\r\n\r\n const handleSubmit = (e: React.FormEventPay with POLi
\r\n\r\n Pay with your bank account using Internet Banking. You’ll be redirected to POLi to complete\r\n your payment.\r\n
\r\n\r\n \r\n \r\n \r\n {submitError && (\r\n setSubmitError(false)}\r\n message={`Oops, an error occurred: Please ensure all details are correct.`}\r\n />\r\n )}\r\n \r\n {\r\n getLocation.hidePayForEnergy ? :\r\n tab === 'solar' ? (\r\n \r\n ) : (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PaymentScreen;\r\n","import axios from \"axios\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nexport const useGetLocation = () => {\r\n const [countryName, setCountryName] = useState('')\r\n const [countryCode, setCountryCode] = useState('')\r\n\r\n const getData = async()=>{\r\n const res = await axios.get('https://geolocation-db.com/json/')\r\n setCountryCode(res.data.country_code)\r\n console.log(res.data.country_code);\r\n setCountryName(res.data.country_name)\r\n }\r\n \r\n useEffect(()=>{\r\n //passing getData method to the lifecycle method\r\n getData()\r\n }, [])\r\n\r\n return {\r\n countryCode,\r\n countryName\r\n }\r\n}","import { faCheck } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport moment from 'moment';\r\nimport React, { useContext, useEffect } from 'react';\r\nimport { useHistory, useLocation } from 'react-router';\r\nimport styled from 'styled-components/macro';\r\nimport { PrimaryButtonLink, SecondaryButton } from '../components/Buttons';\r\nimport Header from '../components/Layout/Header';\r\nimport { UserContext } from '../context/UserContext';\r\nimport { BPointSuccess } from '../types/BPointPayment';\r\n\r\nconst StyledHeader = styled.div`\r\n padding: 54px 0px 0px 0px;\r\n text-align: center;\r\n margin-top: 54px;\r\n .success-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50px;\r\n width: 50px;\r\n border-radius: 100px;\r\n background-color: ${props => props.theme.smartGreen};\r\n margin: 0 auto;\r\n }\r\n`;\r\n\r\nconst StyledContainer = styled.div`\r\n max-width: 90%;\r\n width: 405px;\r\n margin: 32px auto 0px auto;\r\n .buttons {\r\n margin-top: 31px;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n`;\r\n\r\nconst StyledPaymentDetail = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 70px;\r\n border-bottom: solid 1px ${props => props.theme.borderColor};\r\n span {\r\n font-weight: 900;\r\n }\r\n p {\r\n }\r\n`;\r\n\r\nconst PaymentSuccessScreen = () => {\r\n const location = useLocationMake a payment
\r\nPay for energy or solar with one of the payment options below.
\r\n {/* {!user ? ( */}\r\n\r\n {!getLocation.hidePayForEnergy ? setTab('energy')}\r\n >\r\n Pay for energy\r\n : \"\"\r\n }\r\n setTab('solar')}>\r\n Pay for solar\r\n \r\n
\r\n {/* ) : null} */}\r\n \r\n \r\n \r\n \r\n \r\n Sales order number\r\n \r\n \r\n Name\r\n \r\n \r\n Email sent to\r\n \r\n \r\n Payment type\r\n \r\n \r\n Payment amount\r\n \r\n \r\n Payment date\r\n \r\n \r\n Receipt\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PaymentSuccessScreen;\r\n","import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport axios, { AxiosResponse } from 'axios';\r\nimport { useEffect, useState } from 'react';\r\n\r\nimport styled from 'styled-components/macro';\r\nimport Header from '../components/Layout/Header';\r\nimport { StripeOrderDetails } from '../types/StripePayment';\r\n\r\nconst StyledHeader = styled.div`\r\n padding: 54px 0px 0px 0px;\r\n text-align: center;\r\n margin-top: 54px;\r\n .success-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50px;\r\n width: 50px;\r\n border-radius: 100px;\r\n background-color: ${props => props.theme.smartGreen};\r\n margin: 0 auto;\r\n }\r\n .fail-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50px;\r\n width: 50px;\r\n border-radius: 100px;\r\n background-color: ${props => props.theme.smartRed};\r\n margin: 0 auto;\r\n }\r\n`;\r\n\r\nconst StyledContainer = styled.div`\r\n max-width: 90%;\r\n width: 405px;\r\n margin: 32px auto 0px auto;\r\n .buttons {\r\n margin-top: 31px;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n`;\r\n\r\nconst StyledPaymentDetail = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 70px;\r\n border-bottom: solid 1px ${props => props.theme.borderColor};\r\n span {\r\n font-weight: 900;\r\n }\r\n p {\r\n }\r\n`;\r\n\r\nconst StripeSuccessScreen = () => {\r\n const [isSuccess, setIsSuccess] = useState(false);\r\n const [orderData, setOrderData] = useState\r\n
\r\n Payment completed
\r\nYour payment was accepted and receipt has been sent to your email.
\r\n{loggedInUser?.customerNumber}
\r\n{successResponse?.name}
\r\n{successResponse?.email}
\r\nCard ending {successResponse?.data.maskedCardNo}
\r\n\r\n {'$'}\r\n {successResponse?.paymentAmount}\r\n
\r\n{moment(successResponse?.data.processDateTime).format('Do MMMM yy')}
\r\n{successResponse?.data.receiptNumber}
\r\n\r\n \r\n Print\r\n \r\n \r\n Pay another bill\r\n \r\n
\r\n \r\n \r\n {isSuccess ? (\r\n \r\n {orderData && isSuccess ? (\r\n \r\n \r\n Email sent to\r\n \r\n \r\n Sales order number\r\n \r\n \r\n Payment type\r\n \r\n \r\n Customer reference\r\n \r\n \r\n Payment reference\r\n \r\n \r\n Payment amount\r\n \r\n \r\n ) : (\r\n false\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default StripeSuccessScreen;\r\n","export interface ITheme {\r\n smartBlue: string;\r\n smartDark: string;\r\n smartYellow: string;\r\n smartGray: string;\r\n borderColor: string;\r\n inputBorder: string;\r\n smartGreen: string;\r\n smartRed: string;\r\n}\r\n\r\nconst theme = {\r\n smartBlue: '#2b5cff',\r\n smartDark: '#36373c',\r\n smartYellow: '#fee857',\r\n smartGray: '#f7f7f7',\r\n borderColor: '#eaeaeb',\r\n inputBorder: '#dadada',\r\n smartGreen: '#34d399',\r\n smartRed: '#ef4444'\r\n};\r\n\r\nexport default theme;\r\n","import { QueryClient, QueryClientProvider } from 'react-query';\r\nimport { ReactQueryDevtools } from 'react-query/devtools';\r\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\r\nimport { Redirect, RouteProps } from 'react-router';\r\nimport { ThemeProvider } from 'styled-components/macro';\r\nimport GlobalStyle from './globalStyles';\r\nimport ResetPasswordScreen from './screens/ResetPasswordScreen';\r\nimport BillingScreen from './screens/BillingScreen';\r\nimport DetailsScreen from './screens/DetailsScreen';\r\nimport OverviewScreen from './screens/OverviewScreen';\r\nimport SignInScreen from './screens/SignInScreen';\r\n\r\nimport { auth } from './service/firebase';\r\nimport { useAuthState } from 'react-firebase-hooks/auth';\r\nimport UserProvider from './context/UserContext';\r\nimport ForgotPasswordScreen from './screens/ForgotPasswordScreen';\r\n\r\nimport LoadingScreen from './screens/LoadingScreen';\r\nimport UnauthorisedScreen from './screens/UnauthorisedScreen';\r\nimport PaymentScreen from './screens/PaymentScreen';\r\nimport PaymentSuccessScreen from './screens/PaymentSuccessScreen';\r\nimport StripeSuccessScreen from './screens/StripeSuccessScreen';\r\nimport theme from './theme';\r\nimport ReactGA from 'react-ga4';\r\nimport { Helmet, HelmetProvider } from 'react-helmet-async';\r\n\r\nReactGA.initialize('G-2Q23JELHCE');\r\nReactGA.send('pageview');\r\nconst queryClient = new QueryClient();\r\n\r\nconst AuthRoute = ({ ...props }: RouteProps) => {\r\n const [user, loading] = useAuthState(auth);\r\n if (loading) return \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n {isSuccess ? Payment completed
:Payment could not be completed
}\r\n {isSuccess ? (\r\nYour payment was accepted and receipt has been sent to your email.
\r\n ) : (\r\nPayment was canceled.
\r\n )}\r\n{orderData?.email}
\r\n{stripeOrder.salesOrderNo}
\r\nCard ending {orderData?.maskedCard}
\r\n{orderData?.customerId}
\r\n{orderData?.paymentIntentId}
\r\n\r\n {'$'}\r\n {orderData?.amountReceived ? (orderData.amountReceived / 100).toFixed(2) : 'blank'}\r\n
\r\n