\n\t\t\t
\n\t\t\t\t
{cmsData.CustomerDetailTitle}
\n\t\t\t\t{cmsData.OwnershipHeading}
\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t- \n\t\t\t\t\t\t
{\n\t\t\t\t\t\t\t\tsetOwnership('Individual');\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
An individual
\n\t\t\t\t\t\t
\n\t\t\t\t\t \n\t\t\t\t\t- \n\t\t\t\t\t\t
{\n\t\t\t\t\t\t\t\tsetOwnership('Business');\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
A business
\n\t\t\t\t\t\t
\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t);\n};\n\nexport default SubscriptionPersonalDetail;\n","import React, {useState, useEffect, useImperativeHandle, forwardRef, useRef} from 'react';\nimport {utils} from '../../../../global/js/utils.js';\nimport _ from 'lodash';\nimport PlacesAutocomplete, {geocodeByPlaceId} from 'react-places-autocomplete';\nimport DOMPurify from 'dompurify';\n\nDOMPurify.setConfig({ADD_ATTR: ['target']});\n\nconst AddressSearchBox = (props, ref)=> {\n\tif (!window.google) return;\n\tif (!window.sessionToken) window.sessionToken = new window.google.maps.places.AutocompleteSessionToken();\n\tconst [searchTerm, setSearchTerm] = useState('');\n\tconst [address, setAddress] = useState(props.defaultAddress);\n\tconst [activeInput, setActiveInput] = useState('');\n\tconst [prevSuggestions, setPrevSuggestions] = useState([]);\n\tconst [canClear, setCanClear] = useState(false);\n\tconst [showManualInput, setShowManualInput] = useState(false);\n\tconst [addrError, setAddrError] = useState(null);\n\tconst [streetLine1Error, setStreetLine1Error] = useState(null);\n\tconst [suburbError, setSuburbError] = useState(null);\n\tconst [stateError, setStateError] = useState(null);\n\tconst [postCodeError, setPostCodeError] = useState(null);\n\tconst $addr = useRef(null);\n\tconst $token = useRef(window.sessionToken);\n\n\tconst onSelect = (address, placeId) => {\n\t\tif(prevSuggestions.length < 1 || address.length <= 10) return;\n\n\t\tif(!address.includes('Australia')) return;\n\n\t\thandleSelect(placeId);\n\t};\n\n\tconst handleSelect = (placeId) => {\n\t\t$addr.current = null;\n\t\tgeocodeByPlaceId(placeId)\n\t\t\t.then((results) => {\n\t\t\t\treturn utils.extractAddressComponents(results[0]);\n\t\t\t})\n\t\t\t.then((addr)=> {\n\t\t\t\t$addr.current = addr;\n\t\t\t\tsetAddress(addr);\n\t\t\t\tconst _formatAddr = formatAddr(addr);\n\t\t\t\tsetSearchTerm(_formatAddr);\n\t\t\t\tif(props.onSelect) {\n\t\t\t\t\tprops.onSelect(_formatAddr, addr);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error('Error', error);\n\t\t\t});\n\t};\n\n\tconst searchOptions = {\n\t\ttypes: ['address'],\n\t\tcomponentRestrictions: {\n\t\t\tcountry: 'au',\n\t\t},\n\t\tsessionToken: $token.current,\n\t};\n\n\tconst handleActiveInput = ((str) => {\n\t\tsetActiveInput(str);\n\t});\n\n\tconst clearInput = () => {\n\t\tsetSearchTerm('');\n\t\tsetCanClear(false);\n\t};\n\n\tconst renderFunc = ({getInputProps, getSuggestionItemProps, suggestions}) => {\n\t\tsetPrevSuggestions(suggestions);\n\n\t\treturn (\n\t\t\t\n\t\t\t{\n\t\t\t\t!showManualInput &&\n\t\t\t\t
\n\t\t\t\t\t
= 2}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t{renderFunc}\n\t\t\t\t\t\n\t\t\t\t\t{addrError &&
}\n\t\t\t\t
\n\t\t\t}\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t{\n\t\t\t\tshowManualInput &&\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t{streetLine1Error &&
}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t{suburbError &&
}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t{stateError &&
}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t{postCodeError &&
}\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t}\n\t\t
\n\t);\n};\n\nexport default forwardRef(AddressSearchBox);\n","import DOMPurify from 'dompurify';\nimport React, {useEffect, useRef, useState} from 'react';\nimport Cognito from '../../../../global/js/cognito';\nimport {utils} from '../../../../global/js/utils';\nimport {LoginModal} from '../../../widgets/loginModal/js/loginModal';\nimport {AuthenticationUtils} from '../../../widgets/loginModal/js/authenticationUtils';\nimport {VerifyAccountModal} from '../../../widgets/verifyAccountModal/js/verifyAccountModal';\n\nDOMPurify.setConfig({ADD_ATTR: ['target']});\n\nconst SubscriptionSignUpForm = (props) => {\n\tconst [cmsData, setCmsData] = useState(props.cmsData);\n\tconst [passwordError, setPasswordError] = useState('');\n\tconst $head = useRef(null);\n\tconst $form = useRef(null);\n\tconst $btnNext = useRef(null);\n\tconst userPool = Cognito.getUserPool({\n\t\tUserPoolId: window.cognitoUserPoolId,\n\t\tClientId: window.cognitoAppClientId,\n\t});\n\tconst loginModal = new LoginModal();\n\tconst verifyModal = new VerifyAccountModal({\n\t\tonVerified: ()=> {\n\t\t\t// Auto-login if verifying account successfully\n\t\t\tauthenticatedHandler();\n\t\t},\n\t});\n\tconst authUtils = new AuthenticationUtils();\n\n\tconst submitStep = (e)=> {\n\t\te.preventDefault();\n\t\tconst validateData = validateForm();\n\t\tif (validateData.isValid) {\n\t\t\tsignup(validateData.formData);\n\t\t}\n\t};\n\n\tconst signup = (params)=> {\n\t\tconst $$btnNext = $($btnNext.current);\n\t\t$$btnNext.prop('disabled', true);\n\t\tCognito.signup(params, userPool)\n\t\t\t.then(\n\t\t\t\t(result)=> {\n\t\t\t\t\tsetPasswordError('success');\n\t\t\t\t\tconst {username, password} = params;\n\t\t\t\t\tconst authenticationDetails = Cognito.createAuthData(username, password);\n\t\t\t\t\tconst userData = Cognito.createUserData(username, userPool);\n\t\t\t\t\tconst cognitoUser = Cognito.getCognitoUser(userData);\n\t\t\t\t\tauthUtils.login(\n\t\t\t\t\t\tauthenticationDetails,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcognitoUser: cognitoUser,\n\t\t\t\t\t\t\tuserPool: userPool,\n\t\t\t\t\t\t\tonAuthenticatedSuccess: (result)=> {\n\t\t\t\t\t\t\t\tauthenticatedHandler(result);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonAskedToVerify: () => {\n\t\t\t\t\t\t\t\tverifyModal.init();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonError: (err)=> {\n\t\t\t\t\t\t\t\terrorHandler(err.message);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t});\n\t\t\t\t}, (err)=> {\n\t\t\t\t\terrorHandler(err.message);\n\t\t\t\t\tif ('InvalidPasswordException' === err.code) {\n\t\t\t\t\t\tsetPasswordError('error');\n\t\t\t\t\t}\n\t\t\t\t});\n\t};\n\n\tconst validateForm = ()=> {\n\t\tconst $$form = $($form.current);\n\t\tconst $username = $$form.find('#username');\n\t\tconst $password = $$form.find('#password');\n\t\tconst $firstname = $$form.find('#firstname');\n\t\tconst $lastname = $$form.find('#lastname');\n\t\tconst $userError = $username.siblings('.error');\n\t\tconst $userFormGrp = $userError.closest('.form-group');\n\t\tconst $passwordError = $password.siblings('.error');\n\t\tconst $passwordFormGrp = $password.closest('.form-group');\n\t\tconst $firstNameError = $firstname.siblings('.error');\n\t\tconst $firstNameFormGrp = $firstNameError.closest('.form-group');\n\t\tconst $lastNameError = $lastname.siblings('.error');\n\t\tconst $lastNameFormGrp = $lastNameError.closest('.form-group');\n\t\tconst username = $username.val().trim();\n\t\tconst password = $password.val().trim();\n\t\tconst firstname = $firstname.val().trim();\n\t\tconst lastname = $lastname.val().trim();\n\t\tlet invalidUserName = false;\n\t\tlet invalidPassword = false;\n\t\tlet invalidFirstName = false;\n\t\tlet invalidLastName = false;\n\t\tif (!firstname) {\n\t\t\t$firstNameError.html('\n\t\t\t
${cmsData.CustomerSignUpTitle}` + cmsData.AccountInfo)}}>\n\t\t\t
\n\t\t\t
\n\t\t\t\t{(props.GoogleLoginUrl || props.FacebookLoginUrl || props.AppleLoginUrl) &&\n\t\t\t\t\t
\n\t\t\t\t}\n\t\t\t\t
\n\t\t\t\t\tOR\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t);\n};\n\nexport default SubscriptionSignUpForm;\n","import _ from 'lodash';\nimport DOMPurify from 'dompurify';\nimport React, {useEffect, useRef, useState} from 'react';\nimport ReCAPTCHA from 'react-google-recaptcha';\nimport DateSelector from '../../../widgets/dateSelector/js/DateSelector.jsx';\nimport CardModal from '../../../widgets/cardModal/js/CardModal.jsx';\nimport {utils} from '../../../../global/js/utils.js';\nimport axios from 'axios';\nimport LoadingSpinner from '../../../../global/js/loading-spinner.js';\nimport moment from 'moment';\n\nDOMPurify.setConfig({ADD_ATTR: ['target']});\n\nconst SubscriptionReviewAndPurchase = (props) => {\n\tconst months = props.months;\n\tconst [subscriptionData, setSubscriptionData] = useState(props.subscriptionData);\n\tconst [paymentData, setPaymentData] = useState(props.paymentData);\n\tconst [cardType, setCardType] = useState('');\n\tconst [cardImg, setCardImg] = useState('card-visa.png');\n\tconst [firstPayment, setFirstPayment] = useState(props.paymentData.Transactions[0]);\n\tconst [ongoingPayment, setOngoingPayment] = useState(props.paymentData.Transactions[1]);\n\tconst [formData, setFormData] = useState(props.formData);\n\tconst [cmsData, setCmsData] = useState(props.cmsData);\n\tconst [dateIndex, setDateIndex] = useState(-1);\n\tconst [showDateSelector, setShowDateSelector] = useState(false);\n\tconst [navDateStr, setNavDateStr] = useState('');\n\tconst [startDate, setStartDate] = useState('');\n\tconst [paymentDesc, setPaymentDesc] = useState('');\n\tconst $cardModal = useRef();\n\tconst $recaptchaRef = useRef();\n\n\tconst submitStep = (e)=> {\n\t\te.preventDefault();\n\t\tconst _recaptchaValue = $recaptchaRef.current.getValue();\n\t\tif (_recaptchaValue) {\n\t\t\tLoadingSpinner.show();\n\t\t\tpurchase()\n\t\t\t\t.then((response)=> {\n\t\t\t\t\tif (typeof props.onCompleted === 'function') props.onCompleted(response);\n\t\t\t\t}, (err)=> {\n\t\t\t\t\tif (typeof props.onServerError === 'function') props.onServerError(err);\n\t\t\t\t})\n\t\t\t\t.finally(()=> {\n\t\t\t\t\tLoadingSpinner.hide();\n\t\t\t\t});\n\t\t}\n\t};\n\n\tconst setFormDataProps = (props, newValue)=> {\n\t\tlet _formData = _.clone(formData);\n\t\tif (typeof props === 'string') {\n\t\t\t_formData[props] = newValue;\n\t\t} else {\n\t\t\t_formData = _.merge(_formData, props);\n\t\t}\n\t\tsetFormData(_formData);\n\t};\n\n\tconst updateStartDate = (startDate)=> {\n\t\treturn axios.post(props.apiUpdateStartDate, {StartDate: startDate});\n\t};\n\n\tconst updatePaymentCard = (card)=> {\n\t\treturn axios.post(props.apiUpdatePaymentCard, card);\n\t};\n\n\tconst purchase = ()=> {\n\t\treturn axios.post(props.apiPurchase);\n\t};\n\n\tconst setFirstPaymentDesc = (selectedIndex)=> {\n\t\tif (selectedIndex < 0) return;\n\t\t// First Payment Desc\n\t\tconst _datesToSelect = props.cmsData.DatesToSelect;\n\t\tconst firstPaymentAfterCutOffInfo = props.cmsData.FirstPaymentAfterCutOffInfo? props.cmsData.FirstPaymentAfterCutOffInfo : '';\n\t\tconst firstPaymentBeforeCutOffInfo = props.cmsData.FirstPaymentBeforeCutOffInfo? props.cmsData.FirstPaymentBeforeCutOffInfo: '';\n\t\tlet _firstPaymentDesc = _datesToSelect[selectedIndex].Day >= cmsData.CutOffDay ? firstPaymentAfterCutOffInfo : firstPaymentBeforeCutOffInfo;\n\t\tconst _startPayment = utils.dateFormatter(firstPayment.StartDate, 'DD MMMM YYYY');\n\t\tconst _endPayment = utils.dateFormatter(firstPayment.EndDate, 'DD MMMM YYYY');\n\t\tconst _diff = moment(_endPayment, 'DD MMMM YYYY').diff(moment(_startPayment, 'DD MMMM YYYY'), 'days');\n\t\t_firstPaymentDesc = _firstPaymentDesc\n\t\t\t.replace('[NumberOfDays]', _diff)\n\t\t\t.replace('[StartDate]', _startPayment)\n\t\t\t.replace('[EndDate]', _endPayment);\n\t\tsetPaymentDesc(_firstPaymentDesc);\n\t};\n\n\tconst selectDateHandler = (index)=> {\n\t\tif (index < 0) {\n\t\t\treturn {\n\t\t\t\tStartDate: '',\n\t\t\t};\n\t\t}\n\t\tconst selectedDate = cmsData.DatesToSelect[index];\n\t\tconst currentMonth = months[selectedDate.Month - 1];\n\t\tconst dateStr = `${selectedDate.Year}/${selectedDate.Month}/${selectedDate.Day}`;\n\t\tsetStartDate(utils.dateFormatter(dateStr, 'dddd DD MMMM YYYY'));\n\t\t// Set date string for sidebar\n\t\tsetNavDateStr(`${selectedDate.DayOfWeek} ${selectedDate.Day} ${currentMonth}`);\n\t\treturn {\n\t\t\tStartDate: utils.dateFormatter(dateStr, 'YYYY/MM/DD'),\n\t\t};\n\t};\n\n\tconst selectStartDate = (index)=> {\n\t\tconst _startDate = selectDateHandler(index);\n\t\tsetFormDataProps(_startDate);\n\t\tLoadingSpinner.show();\n\t\tupdateStartDate(_startDate.StartDate)\n\t\t\t.then((response)=> {\n\t\t\t\tsetDateIndex(index);\n\t\t\t\tsetFirstPayment(response.data.Data.PaymentInfo.Transactions[0]);\n\t\t\t\tif (typeof props.onUpdated === 'function') props.onUpdated(response);\n\t\t\t}, (err)=> {\n\t\t\t\tif (typeof props.onServerError === 'function') props.onServerError(err);\n\t\t\t})\n\t\t\t.finally(()=> {\n\t\t\t\tLoadingSpinner.hide();\n\t\t\t});\n\t};\n\n\tconst changeDate = (e)=> {\n\t\te.preventDefault();\n\t\tsetShowDateSelector(true);\n\t};\n\n\tconst openCardModal = ()=> {\n\t\t$cardModal.current.openModal();\n\t};\n\n\tconst setupCard = (paymentInfo)=> {\n\t\tconst _cardType = paymentInfo.CardType;\n\t\tif (_cardType === 'VISA') {\n\t\t\tsetCardImg('card-visa.png');\n\t\t} else if (_cardType === 'MASTERCARD') {\n\t\t\tsetCardImg('card-master.png');\n\t\t} else if (_cardType === 'AMEX') {\n\t\t\tsetCardImg('card-amex.png');\n\t\t} else {\n\t\t\tsetCardImg('card-visa.png');\n\t\t}\n\t\tsetCardType(_cardType);\n\t};\n\n\tconst onCardUpdate = (card)=> {\n\t\tLoadingSpinner.show();\n\t\tupdatePaymentCard(card)\n\t\t\t.then((response)=> {\n\t\t\t\tconst _data = response.data;\n\t\t\t\tconst _result = _data.Result;\n\t\t\t\tconst _issues = _result.Issues;\n\t\t\t\tif (_issues && _issues.length > 0) {\n\t\t\t\t\t$cardModal.current.showError('\n\t\t\t{step < 6 &&\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t{ [...Array(5).keys()].map((item)=> {\n\t\t\t\t\t\t\treturn ();\n\t\t\t\t\t\t})}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t}\n\t\t\t{error &&\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
Sorry, looks like there's a problem
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 1 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 2 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 3 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 4 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 5 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 6 &&\n\t\t\t\t
\n\t\t\t}\n\t\t\t{step === 8 &&\n\t\t\t\t
\n\t\t\t}\n\t\t
\n\t);\n};\n\nexport default SubscriptionParkingForm;\n","import _ from 'lodash';\nimport DOMPurify from 'dompurify';\nimport React, {useEffect, useState} from 'react';\nimport DateSelector from '../../../widgets/dateSelector/js/DateSelector.jsx';\nimport {utils} from '../../../../global/js/utils.js';\nimport SubscriptionBaySelector from '../../subscriptionBaySelector/js/SubscriptionBaySelector.jsx';\n\nDOMPurify.setConfig({ADD_ATTR: ['target']});\n\nconst FormStep1 = (props) => {\n\tconst months = props.months;\n\tconst mergedFormData = _.mergeWith(\n\t\t{\n\t\t\tBayType: props.bayType,\n\t\t\tNumberOfBays: 1,\n\t\t},\n\t\tprops.formData,\n\t\tutils.ignoreNullMergeCustomizer);\n\tconst [cmsData, setCmsData] = useState(props.cmsData);\n\tconst [formData, setFormData] = useState(mergedFormData);\n\tconst [error, setError] = useState(null);\n\tconst [parkingTypeDetails, setParkingTypeDetails] = useState(null);\n\tconst [cutOffInfo, setCutOffInfo] = useState('');\n\tconst [dateIndex, setDateIndex] = useState(-1);\n\tconst [navDateStr, setNavDateStr] = useState('');\n\n\t// Bay Type handlers\n\tconst selectBayType = (selectedParkingType)=> {\n\t\tconst _bayInfo = selectBayTypeHandler(selectedParkingType);\n\t\tsetFormDataProps(_bayInfo);\n\t};\n\n\tconst selectBayTypeHandler = (selectedParkingType)=> {\n\t\tlet _price = null;\n\t\tif (selectedParkingType === 'Unreserved') {\n\t\t\tsetParkingTypeDetails({\n\t\t\t\tinfoContent: cmsData.UnreservedParkingInfoContent,\n\t\t\t\tinfoLinkText: cmsData.UnreservedParkingInfoLinkText,\n\t\t\t});\n\t\t\t_price = cmsData.UnreservedMonthlyPrice;\n\t\t} else {\n\t\t\tsetParkingTypeDetails({\n\t\t\t\tinfoContent: cmsData.ReservedParkingInfoContent,\n\t\t\t\tinfoLinkText: cmsData.ReservedParkingInfoLinkText,\n\t\t\t});\n\t\t}\n\t\treturn {\n\t\t\tBayType: selectedParkingType,\n\t\t\tPrice: _price,\n\t\t};\n\t};\n\t// END Bay Type handlers\n\n\t// Date selector handlers\n\tconst selectStartDate = (index)=> {\n\t\tconst _startDate = selectDateHandler(index);\n\t\tsetFormDataProps(_startDate);\n\t};\n\n\tconst selectDateHandler = (index)=> {\n\t\tif (index < 0) {\n\t\t\tsetCutOffInfo(cmsData.StartDateInfo.replace('[CarParkName]', props.carParkData.CarParkName));\n\t\t\treturn {\n\t\t\t\tStartDate: '',\n\t\t\t};\n\t\t}\n\t\tconst selectedDate = cmsData.DatesToSelect[index];\n\t\tconst currentMonth = months[selectedDate.Month - 1];\n\t\tconst dateStr = `${selectedDate.Year}/${selectedDate.Month}/${selectedDate.Day}`;\n\t\tconst nextMonth = selectedDate.Month === 12 ? months[0] : months[selectedDate.Month];\n\t\tconst startAfterCutOffDateInfo = props.cmsData.StartAfterCutOffDateInfo? props.cmsData.StartAfterCutOffDateInfo : '';\n\t\tconst startBeforeCutOffDateInfo = props.cmsData.StartBeforeCutOffDateInfo? props.cmsData.StartBeforeCutOffDateInfo: '';\n\t\tlet _cutOffInfo = selectedDate.Day >= cmsData.CutOffDay ? startAfterCutOffDateInfo : startBeforeCutOffDateInfo;\n\t\t_cutOffInfo = _cutOffInfo.replace('[CurrentMonth]', currentMonth).replace('[NextMonth]', nextMonth);\n\t\tsetCutOffInfo(_cutOffInfo);\n\t\t// Set date string for sidebar\n\t\tsetNavDateStr(`${selectedDate.DayOfWeek} ${selectedDate.Day} ${currentMonth}`);\n\t\treturn {\n\t\t\tStartDate: utils.dateFormatter(dateStr, 'YYYY/MM/DD'),\n\t\t};\n\t};\n\t// END Date selector handlers\n\n\t// Number of Bays handlers\n\tconst selectBaysNumber = (baysNumber)=> {\n\t\tsetFormDataProps('NumberOfBays', baysNumber);\n\t};\n\n\tconst setFormDataProps = (props, newValue)=> {\n\t\tlet _formData = _.clone(formData);\n\t\tif (typeof props === 'string') {\n\t\t\t_formData[props] = newValue;\n\t\t} else {\n\t\t\t_formData = _.merge(_formData, props);\n\t\t}\n\t\tsetFormData(_formData);\n\t};\n\n\tconst submitStep = (e)=> {\n\t\te.preventDefault();\n\t\tif (!formData.StartDate) {\n\t\t\tsetError({\n\t\t\t\tmessage: 'Please select a start date for your subscription',\n\t\t\t});\n\t\t} else {\n\t\t\tsetError(null);\n\t\t\tif (typeof props.callback === 'function') {\n\t\t\t\tprops.callback({SubscriptionInfo: formData});\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(()=> {\n\t\tconst _bayInfo = selectBayTypeHandler(formData.BayType);\n\t\tlet _dateIndex = _.clone(dateIndex);\n\t\tif (formData.StartDate) {\n\t\t\tconst _dateArr = formData.StartDate.split('/');\n\t\t\tconst _datesToSelect = props.cmsData.DatesToSelect;\n\t\t\t_dateIndex = _.findIndex(_datesToSelect, {Day: parseInt(_dateArr[2], 10), Month: parseInt(_dateArr[1], 10), Year: parseInt(_dateArr[0], 10)});\n\t\t}\n\t\tif (_dateIndex >= 0) setDateIndex(_dateIndex);\n\t\tconst _startDate = selectDateHandler(_dateIndex);\n\t\tsetFormDataProps(_.merge({}, _bayInfo, _startDate));\n\t}, []);\n\n\tuseEffect(()=> {\n\t\tif (formData) {\n\t\t\tif (typeof props.onChangeData === 'function') props.onChangeData({startDate: navDateStr, formData, parkingTypeDetails});\n\t\t}\n\t}, [formData]);\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t
{cmsData.SubscriptionTitle}
\n\t\t\t\n\t\t\t
\n\t\t\t{formData.BayType &&\n\t\t\t\t
\n\t\t\t\t\t{parkingTypeDetails &&\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t}\n\t\t\t\t\t
\n\t\t\t\t\t\t
How many bays do you need?
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t- {\n\t\t\t\t\t\t\t\t\tselectBaysNumber(1);\n\t\t\t\t\t\t\t\t}}>1
\n\t\t\t\t\t\t\t- {\n\t\t\t\t\t\t\t\t\tselectBaysNumber(2);\n\t\t\t\t\t\t\t\t}}>2
\n\t\t\t\t\t\t\t- {\n\t\t\t\t\t\t\t\t\tselectBaysNumber(3);\n\t\t\t\t\t\t\t\t}}>3+
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
Choose your start date
\n\t\t\t\t\t\t{error &&\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
{error.message}
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t}\n\t\t\t
\n\t\t\t\t
*Price shown is the monthly subscription fee including Government Levy charges, where applicable, service fees and GST. Our daily calculation is based on 21 business days per month, but you'll have access to the car park every day. 24/7 access may not be available at all locations.
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t);\n};\n\nexport default FormStep1;\n","import React, {useState} from 'react';\n\nconst SubscriptionAlreadyInUse = (props) => {\n\tconst [cmsData, setCmsData] = useState(props.cmsData);\n\n\treturn (\n\t\t