{heading}
\n{title}
\n{desc}
\n\n {userName && typeof userName === \"string\" && userName.trim().length > 0\n ? `Hi ${userName.trim()}`\n : \"Welcome\"}\n
\n\n Welcome to {dealerName}. Click on the button below to schedule your car\n service with us.\n
\n\n
\n );\n }\n\n return (\n \n 
\n
\n \n
\n );\n};\n\nexport default Brand;\n","import React from \"react\";\n\nconst HeroImage = props => {\n const { img } = props;\n return \n \n
\n {dealerName}\n \n Welcome to Service booking. Your invitation has expired, please\n contact {dealerName} on{\" \"}\n \n {dealerPhoneNumber}\n \n .\n
\n );\n default:\n return dealerName && dealerPhoneNumber ? (\n\n Welcome to Service booking. We are not able to process your request,\n please contact {dealerName} on{\" \"}\n \n {dealerPhoneNumber}\n \n .\n
\n ) : (\n\n Welcome to Service booking. We are not able to process your request,\n please make sure the url was not modified from your message or email\n
\n );\n }\n};\n\nexport default ErrorMessage;\n","import React from \"react\";\nimport ErrorMessage from \"./ErrorMessage\";\n\nconst Error = props => {\n const { errorMessage, dealerName, dealerPhoneNumber } = props;\n return (\nHi
\nHi
\n\n Welcome to Service booking. You have already made a booking for this\n car, booking reference: {existingBooking}. If you want to modify this\n booking, please contact {dealerName} on{\" \"}\n \n {dealerPhoneNumber}\n \n
\n\n {isContentShown && children}\n {isLoading && (\n
\n );\n }\n\n return isLoading ? (\n \n
\n )}\n \n
\n \n
\n ) : (\n children\n );\n};\n\nexport default WithLoader;\n","import React from \"react\";\nimport GeneralErrorPage from \"containers/GeneralErrorPage\";\n\nconst WithErrorPage = props => {\n const { children, isError = false, buttonText } = props;\n\n if (isError) {\n return \n
\n \n );\n }\n}\n\nexport default props => (\n \n \n \n {mainSection()} \n \n \n
\n \n \n
\n );\n};\n\nexport default MileageInputCard;\n","import React from \"react\";\n\nconst Header = props => {\n const { headerLeft, headerTitle, progressBar, headerRight } = props;\n\n return (\n \n onChange(event.target.rawValue)}\n type=\"text\"\n pattern=\"\\d*\"\n inputMode=\"numeric\"\n />\n {odometerUnit}\n
\n \n
\n {headerLeft}
\n \n
\n {headerTitle}
\n {progressBar}\n{headerRight}
\n \n
\n );\n};\n\nconst StepHeader = props => {\n const { goBackLink, headerTitle, stepNumber, headerRight } = props;\n const headerLeft = \n \n {Enums.ProgressBarStepNumber.SelectServices}\n \n \n {Enums.ProgressBarStepNumber.Appointment}\n \n \n
\n \n
\n );\n\n if (isVehicleInfoError === true) {\n return (\n \n
\n \n Looks like you have already made a booking for this car, booking\n reference: {existingBooking}. If you want to modify this\n booking, please contact {dealerName} on{\" \"}\n
\n
\n );\n } else if (isVehicleInfoAvailable) {\n return (\n <>\n \n
\n \n We can not find your vehicle {regoNumberEntered} details,\n please try with a valid vehicle registration number or please\n contact {dealerName} on{\" \"}\n \n
\n
\n \n
\n Your car's details
\n\n
\n \n {vehicleYear} {vehicleMake} {vehicleModel}{\" \"}\n {vehicleVariant}\n
\n\n Registration Number: {vehicleRegoNumber}\n
\n {vehicleLastOdometerReading && (\n\n Last Odometer Reading: {vehicleLastOdometerReading}\n
\n )}\n {vehicleNextWOFDate && (\n\n Next {vehicleInspectionTestName} Date: {vehicleNextWOFDate}\n
\n )}\n\n \n \n \n \n
\n \n
\n {resultSection()}\n \n
\n \n \n What's your registration number?\n \n
\n \n {\n this.onSetRegoNumberValue(event.target.value);\n }}\n />\n \n {\"✕\"}\n \n
\n \n {regoNumberError &&\n \"Registration number can only be alphanumeric.\"}\n \n \n
\n \n
\n );\n};\n\nexport default CarDetailsCard;\n","import { fetchApi } from \"utils/apiFetchWrapper\";\nimport { Api, ApiSource } from \"constants/api\";\n\nexport const dismissVehicleOwner = (\n dealerId,\n customerNo,\n vehicleNo,\n onReceiveResponse\n) => {\n const request = {\n DealerId: dealerId,\n CustomerNo: customerNo,\n VehicleNo: vehicleNo\n };\n return fetchApi(\n ApiSource.CustomerVehicle,\n Api.CustomerVehicle.Endpoint.DismissVehicleOwnership,\n request\n ).then(() => {\n onReceiveResponse();\n });\n};\n","import React from \"react\";\nimport Modal from \"react-modal\";\nimport AlertImage from \"assets/img/alert-image.svg\";\nimport CancelSvg from \"components/Svg/CancelSvg\";\n\nModal.setAppElement(\"body\");\n\nconst AlertDialogModal = props => {\n const { isOpen, closeAlert, ...rest } = props;\n\n return (\n \n 
\n
\n \n
\n \n {modelYear} {modelName}\n
\n\n Registration Number: {registrationNumber}\n
\n {nextServiceDate && (\n\n Next Service Date: {nextServiceDate}\n
\n )}\n {nextWOFDate && (\n\n Next {vehicleInspectionTestName} Date: {nextWOFDate}\n
\n )}\n\n
\n \n \n 
\n\n {title &&
\n );\n};\n\nexport default AlertDialogModal;\n","import React, { Component } from \"react\";\nimport StepHeader from \"components/Header/StepHeader\";\nimport ActionButton from \"components/ActionButton\";\nimport CarDetailsCard from \"./CarDetails\";\nimport MileageInputCard from \"./MileageInput\";\nimport { dismissVehicleOwner } from \"./actions\";\nimport WithLoader from \"components/WithLoader/index\";\nimport WithErrorPage from \"components/WithErrorPage\";\nimport AlertDialog from \"components/AlertDialog\";\nimport { Api } from \"constants/api\";\n\nexport default class CheckCarDetailsPage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isSubmitting: false,\n isError: false,\n mileage:\n sessionStorage.getItem(\"mileage\") ||\n (sessionStorage.getItem(\"nextServiceMileage\") > 0\n ? sessionStorage.getItem(\"nextServiceMileage\")\n : \"\"),\n isAlertOpen: false\n };\n this.data = {\n detailData: {\n modelYear: sessionStorage.getItem(\"modelYear\"),\n modelName: sessionStorage.getItem(\"modelName\"),\n registrationNumber: sessionStorage.getItem(\"registrationNumber\"),\n vehicleImage:\n Api.Img.Url + sessionStorage.getItem(\"defaultVehicleImage\"),\n nextServiceDate: JSON.parse(\n sessionStorage.getItem(\"nextServiceDate\") || null\n ),\n nextWOFDate: JSON.parse(sessionStorage.getItem(\"nextWOFDate\") || null),\n vehicleInspectionTestName: sessionStorage.getItem(\"vehicleInspectionTestName\")\n },\n dealerId: sessionStorage.getItem(\"dealerId\"),\n customerNo: sessionStorage.getItem(\"customerNo\"),\n vehicleNo: sessionStorage.getItem(\"vehicleNo\"),\n isMileageVisible: JSON.parse(\n sessionStorage.getItem(\"isMileageVisible\") || null\n ),\n odometerUnit: sessionStorage.getItem(\"odometerUnit\")\n };\n }\n\n onSetMileageValue = mileage => {\n this.setState({ mileage });\n };\n\n saveData = () => {\n sessionStorage.setItem(\n \"mileage\",\n this.state.mileage || sessionStorage.getItem(\"nextServiceMileage\")\n );\n };\n\n onReceiveReportResponse = () => {\n this.props.history.push(\"/bookService/notOwnVehicle\");\n };\n\n onError = () => {\n this.setState({\n isSubmitting: false,\n isError: true\n });\n };\n\n onClickReportBtn = () => {\n this.setState({ isSubmitting: true });\n const { dealerId, customerNo, vehicleNo } = this.data;\n dismissVehicleOwner(\n dealerId,\n customerNo,\n vehicleNo,\n this.onReceiveReportResponse\n ).catch(() => {\n this.onError();\n });\n };\n\n openAlert = () => {\n this.setState({ isAlertOpen: true });\n };\n\n closeAlert = () => {\n this.setState({ isAlertOpen: false });\n };\n\n render() {\n const { detailData, isSubmitting, isError, isMileageVisible, odometerUnit } = this.data;\n const { mileage, isAlertOpen } = this.state;\n\n const queryString = sessionStorage.getItem(\"queryString\");\n\n return (\n {title}
}\n{message}
\n\n {onClickYes ? (\n\n \n Yes, remove it\n \n \n No\n \n
\n ) : (\n \n \n OK\n \n
\n )}\n \n \n \n \n \n
\n {branchName}
\n\n
\n\n \n
\n \n );\n};\n\nconst BranchOptionList = props => {\n const { data, selectedBranchId, onClick } = props;\n\n if (!data || data.length <= 0) {\n return null;\n }\n\n const itemList = data.map((item, index) => {\n return (\n {itemList}
;\n};\n\nconst BranchOptionListWrapper = props => {\n const { data, selectedBranchId, onSetSelectedBranch } = props;\n\n return (\n \n \n \n
\n \n
\n \n
\n \n {`${amount} ${serviceType}`}\n {isEnable &&
No description.
;\n }\n\n return {data}
;\n};\n\nconst AddToCartButton = props => {\n const { serviceCode, isSelected, onClick } = props;\n return (\n \n onClick(serviceCode)}\n >\n \n
\n );\n};\n\nclass DistanceBasedServiceItem extends React.Component {\n state = {\n isServiceDetailShown: false,\n isReplacementDetailShown: false\n };\n\n onClickToggle = option => {\n if (option === \"Services\") {\n this.setState({\n isServiceDetailShown: !this.state.isServiceDetailShown,\n isReplacementDetailShown: false\n });\n } else if (option === \"Replacements\") {\n this.setState({\n isServiceDetailShown: false,\n isReplacementDetailShown: !this.state.isReplacementDetailShown\n });\n }\n };\n\n render() {\n const { isServiceDetailShown, isReplacementDetailShown } = this.state;\n const { data, isSelected, onClickAddBtn } = this.props;\n const { Description, ServiceCode, Name } = data;\n return (\n \n
\n );\n }\n}\n\nconst DistanceBasedServiceList = props => {\n const { data, selectedService, onClickAddBtn } = props;\n if (!data || data.length <= 0) {\n return null;\n }\n\n const itemList = data.map((item, index) => {\n return (\n \n
\n \n
\n {Name}
\n\n
\n {isServiceDetailShown && (\n {itemList}
;\n};\n\nconst DistanceBasedServicesWrapper = props => {\n const { data, selectedService, onSetSelectedService } = props;\n\n return (\n Recommended Service Options
\n\n All of the basic services needed to keep your vehicle up to\n Manufacturer's specification\n
\n{title}
\n\n {isSelected ? (\n
\n \n );\n};\n\nconst AdditionalServiceItemList = props => {\n const { data, selectedServices, onSetSelectedServices } = props;\n\n if (data.length === 0) {\n return (\n \n
\n ); //TODO: styling\n }\n\n const itemList = data.map((item, index) => (\n No options available.
\nPlease Select Additional Services
\n\n \n description ? setToggleCardDescription(!displayCardDescription) : \"\"\n }\n >\n \n {description}\n \n )}\n \n
\n );\n};\n\nconst UncategorisedServiceItemList = props => {\n const { data, selectedServices, onSetSelectedServices } = props;\n\n if (data.length === 0) {\n return (\n {title}
\n {description && (\n\n {isSelected ? (\n
\n \n
\n );\n }\n\n const itemList = data.map((item, index) => (\n No options available.
\nPlease select from the service options
\n\n
\n \n \n {\n this.setSelectedService(event.target.value);\n }}\n />\n
\n \n 
\n
\n );\n};\n\nexport default CarDetail;\n","import React from \"react\";\nimport CancelSvg from \"components/Svg/CancelSvg\";\n\nconst CartListItem = props => {\n const { data, isPriceVisible, isDeletable, onClickRemoveBtn, currencySymbol } = props;\n\n return (\n \n
\n {`${modelYear} ${modelName}`}
\n {isMileageVisible && Number(mileage) > 0 && (\n\n {\"Approx. \" + Number(mileage).toLocaleString() + odometerUnit}\n
\n )}\n\n onClickRemoveBtn(data.ServiceCode)}\n >\n
\n );\n};\n\nexport default CartListItem;\n","import React from \"react\";\nimport CartListItem from \"./CartListItem\";\n\nconst CartList = props => {\n const {\n unDeletableData,\n deletableData,\n isPriceVisible,\n deleteService,\n notes,\n currencySymbol\n } = props;\n const data = [...unDeletableData, ...deletableData];\n const totalPrice = data\n .map(item => Number(item.Price))\n .reduce((acc, value) => acc + value, 0)\n .toFixed(2);\n\n if (data.length <= 0) {\n return (\n {data.Name}
\n\n {isPriceVisible && currencySymbol + data.Price}\n
\n {isDeletable && (\n{data.Description}
\n )}\n\n
\n );\n }\n\n return (\n \n
\n Your Shopping Cart is empty.
\n\n {unDeletableData.map(item => (\n {}}\n />\n ))}\n {deletableData.map(item => (\n
\n );\n};\n\nexport default CartList;\n","import React from \"react\";\nimport BackSvg from \"components/Svg/BackSvg\";\nimport Header from \"components/Header/Header\";\n\nconst GoBackButton = props => (\n \n \n Total\n {currencySymbol}{totalPrice}\n
\n )}\n {notes && (\n \n \n
\n )}\n Additional Job Notes
\n {notes}\n \n \n
\n );\n};\n\nexport default ShoppingCart;\n","import React from \"react\";\nimport Modal from \"react-modal\";\nimport ShoppingCart from \"containers/ShoppingCart/ShoppingCart\";\n\nModal.setAppElement(\"body\");\n\nconst ShoppingCartModal = props => {\n const { isOpen, closeModal, data, deleteService } = props;\n return (\n \n \n \n \n \n
\n \n \n \n {isServiceListCategorised === true && (\n <>\n \n \n
\n \n
\n \n {isServiceListCategorised === false && (\n saveData(this.state, selectedServicesData)}\n isEnabled={\n selectedDistanceBasedServices[0] ||\n selectedAdditionalServices[0]\n }\n text=\"Book Appointment\"\n />\n )}\n {isServiceListCategorised === true && (\n saveData(this.state, selectedServicesData)}\n isEnabled={selectedDistanceBasedServices[0]}\n text=\"Book Appointment\"\n />\n )}\n
\n \n \n
\n );\n};\n\nexport default ChooseAdvisor;\n","import React from \"react\";\n\nconst TransportMethodOption = props => {\n const { data, selectedValue, onSelectChange } = props;\n return (\n \n \n \n {advisorData &&\n Object.keys(advisorData).map(advisorId => {\n const optionData = advisorData[advisorId];\n return (\n \n );\n })}\n \n
\n \n
\n );\n};\n\nclass TransportationOptions extends React.Component {\n state = {\n isOpen: false,\n isMounting: true\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const IsOtherTransportOptionSelected = props => {\n const { data, selectedValue, topTransportationOptionsCount } = props;\n const result = selectedValue\n ? !Object.keys(data)\n .slice(0, topTransportationOptionsCount)\n .includes(selectedValue)\n : false;\n return result;\n };\n\n if (prevState.isMounting && nextProps.selectedValue) {\n if (\n prevState.isOpen === false &&\n IsOtherTransportOptionSelected(nextProps)\n ) {\n return {\n isOpen: IsOtherTransportOptionSelected(nextProps),\n isMounting: false\n };\n }\n return {\n isOpen: false,\n isMounting: false\n };\n }\n return null;\n }\n\n onClickTitle = () => {\n this.setState({ isOpen: !this.state.isOpen });\n };\n\n onSelectChange = event => {\n const { onSetSelectedValue } = this.props;\n onSetSelectedValue(event.target.value);\n };\n\n render() {\n const { data, selectedValue, topTransportationOptionsCount } = this.props;\n if (Object.keys(data).length > topTransportationOptionsCount) {\n return (\n \n
\n {data.OptionDescription}
\n\n {Object.keys(data)\n .slice(0, topTransportationOptionsCount)\n .map(optionId => {\n const optionData = data[optionId];\n return (\n
\n );\n }\n return (\n \n
\n \n \n Other Transport Options\n \n {this.state.isOpen && (\n
\n \n {Object.keys(data)\n .slice(topTransportationOptionsCount)\n .map(optionId => {\n const optionData = data[optionId];\n return (\n
\n )}\n \n {Object.keys(data).map(optionId => {\n const optionData = data[optionId];\n return (\n
\n );\n }\n}\n\nconst SelectTransportation = props => {\n const {\n data,\n selectedValue,\n onSetSelectedValue,\n isVisible,\n topTransportationOptionsCount\n } = props;\n\n if (!isVisible) {\n return null;\n }\n\n return (\n \n \n {data ? (\n
\n );\n};\n\nexport default SelectTransportation;\n","// mobile responsive\nexport const calendarDaySize =\n window.innerWidth < 540 ? Math.floor((window.innerWidth - 52) / 7) : 70;\n","import React from \"react\";\nimport { calendarDaySize } from \"utils/responsiveUtils\";\nimport { DayPickerSingleDateController } from \"react-dates\";\nimport Enums from \"constants/enum\";\nimport moment from \"moment\";\n\nconst onDateChange = (moment, dateData, onSetSelectedDate) => {\n const date = moment.format(\"YYYY-MM-DD\");\n if (dateData && date in dateData) {\n onSetSelectedDate(date);\n }\n};\n\nconst dayAvailabilityType = (date, dateData) => {\n if (dateData && date in dateData) {\n if (dateData[date].availabilityType === Enums.DateAvailabilityType.Full) {\n return \"FullyAvailable\";\n }\n if (\n dateData[date].availabilityType === Enums.DateAvailabilityType.Partial\n ) {\n return \"PartiallyAvailable\";\n }\n }\n return \"NotAvailable\";\n};\n\nconst DayContents = (moment, dateData) => (\n No available options.
\n )}\n{moment.format(\"D\")}
\n ⬤
\n \n);\n\nconst InitialVisibleMonth = (dateData, selectedDate) => {\n const [firstAvailableDate] = Object.keys(dateData);\n let initialVisibleMonthValue = moment(new Date());\n if (selectedDate) initialVisibleMonthValue = moment(selectedDate);\n else if (firstAvailableDate)\n initialVisibleMonthValue = moment(firstAvailableDate);\n return initialVisibleMonthValue;\n};\n\nconst DayPicker = props => {\n const { datePickerKey, dateData, selectedDate, onSetSelectedDate } = props;\n return (\n \n {/*datePickerKey is incremented by the parent component AppointmentPage on initializeDayPickerState\n This update to datePickerKey will force the parent component to re-render and also its child component DayPickerSingleDateController.\n When DayPickerSingleDateController is rendered again it will call the InitialVisibleMonth method which will set\n the initialVisibleMonth of DayPickerSingleDateController property based on the selectedDate or the firstAvailableDate value.\n */}\n \n
\n );\n};\n\nexport default DayPicker;\n","import React from \"react\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\n\nconst groupPredefinedTimeSlotOptionsByAmPm = predefinedTimeSlotOptions => {\n let am = [];\n let pm = [];\n\n predefinedTimeSlotOptions &&\n predefinedTimeSlotOptions.length > 0 &&\n predefinedTimeSlotOptions.forEach(slot => {\n const startHourString = slot.split(\":\")[0];\n const startHourInt = parseInt(startHourString, 10);\n\n if (startHourInt >= 0 && startHourInt < 12) {\n am.push(slot);\n } else if (startHourInt >= 12 && startHourInt <= 24) {\n pm.push(slot);\n }\n });\n\n return { am, pm };\n};\n\nconst TimeSlotBtnGroup = props => {\n const {\n availableTimeSlotList,\n selectedTimeSlot,\n predefinedOptions,\n onSetSelectedValue\n } = props;\n\n const isAvailable = (option, availableList) => {\n return availableList && availableList.includes(option);\n };\n\n return (\n \n {dateData ? (\n \n InitialVisibleMonth(dateData, selectedDate)\n }\n onDateChange={moment =>\n onDateChange(moment, dateData, onSetSelectedDate)\n }\n date={selectedDate ? moment(selectedDate) : null}\n noBorder={true}\n showKeyboardShortcuts={false}\n hideKeyboardShortcutsPanel={true}\n daySize={calendarDaySize}\n numberOfMonths={1}\n renderDayContents={moment => DayContents(moment, dateData)}\n focused={true}\n />\n ) : (\n
\n No available dates.
\n )}\n\n {predefinedOptions.map((predefinedOption, index) =>\n isAvailable(predefinedOption, availableTimeSlotList) ? (\n onSetSelectedValue(predefinedOption)}\n >\n {predefinedOption.split(\"-\")[0]}\n \n ) : (\n \n {predefinedOption.split(\"-\")[0]}\n \n )\n )}\n
\n );\n};\n\nconst TimePicker = props => {\n const {\n timeSlotData,\n selectedTimeSlot,\n onSetSelectedTimeSlot,\n isVisible,\n predefinedTimeSlotOptions\n } = props;\n\n if (!isVisible || !predefinedTimeSlotOptions) {\n return null;\n }\n\n const predefinedTimeSlotOptionsGroupedByAmPm = groupPredefinedTimeSlotOptionsByAmPm(\n predefinedTimeSlotOptions\n );\n\n return (\n \n \n 0 ? 0 : 1\n }\n selectedTabClassName=\"current\"\n disabledTabClassName=\"disabled\"\n >\n \n \n AM\n \n \n PM\n \n
\n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n saveData(this.state)}\n isEnabled={\n this.state.selectedTransportMethod &&\n this.state.selectedDate &&\n this.state.selectedTimeSlot &&\n !isLoading\n }\n text=\"Next\"\n />\n
\n \n {isTimeslotsVisible ? (\n \n \n ) : (\n
\n );\n\n const AdvisorItem = (\n \n {timeSlot && timeSlot !== \"null\"\n ? moment(timeSlot.split(\"-\")[0], \"HH:mm\").format(\"hh:mm A\")\n : \"Not Selected\"}\n
\n{moment(jobDate).format(\"dddd, DD MMM YYYY\")}
\n{moment(jobDate).format(\"DD MMM YYYY\")}
\n )}\n\n
\n );\n\n const TransportationItem = (\n Advisor agent
\n\n {advisorName && advisorName !== \"null\"\n ? advisorName\n : \"First available Advisor\"}\n
\n\n
\n );\n\n return (\n Transportation
\n{transportMethodName}
\nAppointment Review
\n\n
\n \n
\n \n {TimeItem}\n {!isAdvisorsVisible &&\n isTransportationOptionsVisible &&\n TransportationItem}\n
\n {isAdvisorsVisible && (\n \n {AdvisorItem}\n {isTransportationOptionsVisible && TransportationItem}\n
\n )}\n \n
\n Service Review
\n\n Please carefully review your request below\n
\n\n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default Disclaimer;\n","import React from \"react\";\nimport Cleave from \"cleave.js/react\";\n\nexport default function(props) {\n const { data, onChange, askForComments } = props;\n\n function onInputChange(event)\n {\n const {name, value} = event.target;\n onChange(name, value);\n }\n\n return <>\n \n
\n \n \n Disclaimer\n \n {this.state.isOpen && (\n
\n \n
\n )}\n \n The Dealership will endeavour to ensure that all your booking\n requests are met. However, on rare occasions, we reserve the\n right to amend aspects of your booking. If this occurs you\n will be notified by one of our Service Advisors in advance of\n your booking. Price information will be provided at your\n appointment.\n
\n\n The Dealership collects personal information from you in order\n to provide you with confirmation and updates about your\n booking.\n
\n\n \n
\n \n \n
\n \n \n
\n \n \n
\n { askForComments && \n (\n \n \n
\n ) \n }\n ;\n};","import React from \"react\";\nimport OutlineButton from \"components/OutlineButton\";\nimport CustomerContactEdit from \"components/CustomerContactEdit\";\n\nconst CheckContactInfo = props => {\n const { data, checkContactRef, isNewCustomer, onChange } = props;\n return (\n \n {isNewCustomer ? \"Enter\" : \"Check\"} Your Contact Information\n
\n\n {isNewCustomer ? (\n
\n \n
\n \n
\n First Name:
\n{data.firstName}
\n\n
\n Last Name:
\n{data.surname}
\n\n
\n Email:
\n{data.email}
\n\n
\n \n {data.isError &&\n \"Please update your contact information to continue with your booking.\"}\n \n Phone Number:
\n{data.phoneNumber}
\n\n
\n \n )}\n Not Correct?
\n\n \n \n \n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default ConfirmationHeading;\n","import React from \"react\";\nimport moment from \"moment\";\n\nconst ConfirmationItems = props => {\n const {\n appointmentId,\n wipNo,\n selectedServiceNameList,\n timeSlot,\n jobDate,\n advisorName,\n vehicleDesc,\n registrationNumber,\n transportMethodName,\n branchName,\n address,\n phoneNumber,\n emailAddress,\n isTransportationOptionsVisible,\n isTimeslotsVisible,\n isAdvisorsVisible\n } = props.data;\n\n const serviceStartTime = isTimeslotsVisible\n ? timeSlot && timeSlot !== \"null\"\n ? moment(timeSlot.split(\"-\")[0], \"HH:mm\").format(\"hh:mm A\")\n : null\n : \"07:30 AM\"; // Full day booking when \"Timeslots\" is not visible\n const serviceEndTime =\n timeSlot && timeSlot !== \"null\"\n ? moment(timeSlot.split(\"-\")[1], \"HH:mm\").format(\"hh:mm A\")\n : null;\n const serviceDate =\n jobDate && jobDate !== \"null\"\n ? moment(jobDate).format(\"DD MMM YYYY\")\n : null;\n const isSyncCalendarVisible = serviceStartTime && serviceDate;\n\n const TimeItem = (\n \n {\"Thanks\" +\n (firstName &&\n typeof firstName === \"string\" &&\n firstName.trim().length > 0\n ? \" \" + firstName.trim()\n : \"\")}\n
\nYour appointment is confirmed.
\n\n
\n Confirmation Number
\n{wipNo}
\n \n
\n );\n\n const DateItem = (\n Time
\n{serviceStartTime || \"Not Selected\"}
\n\n
\n );\n\n const AdvisorItem = (\n Date
\n{serviceDate || \"Not Selected\"}
\n\n
\n );\n\n const VehicleItem = (\n Advisor
\n\n {advisorName && advisorName !== \"null\"\n ? advisorName\n : \"First available advisor\"}\n
\n\n
\n );\n\n const TransportationItem = (\n Vehicle
\n{vehicleDesc}
\n\n
\n );\n\n const SyncToYourCalendarItem = (\n Transportation
\n{transportMethodName}
\n\n \n {serviceDate + \" \" + serviceStartTime}\n {serviceDate + \" \" + serviceEndTime}\n \n Car Service Booking\n \n Thank you for booking your vehicle {vehicleDesc}{\" \"}\n {registrationNumber} into our workshop.\n
\n
\n Your booking confirmation number is {wipNo}.
\n
\n You have selected:\n
\n
\n Services: {selectedServiceNameList.join(\", \")}\n
\n
\n Appointment Type: {transportMethodName}\n
\n
\n Appointment Date: {serviceDate}\n
\n
\n Appointment Time: {timeSlot}\n
\n
\n If you need to cancel or amend your booking, please call us on{\" \"}\n {phoneNumber} or email at {emailAddress}\n
\n
\n We look forward to welcoming you at {branchName}, {address}.\n
\n \n {address}\n
\n ) : (\n Sync to your calendar
\n {isSyncCalendarVisible ? (\n\n
\n Your booking confirmation number is {wipNo}.
\n
\n You have selected:\n
\n
\n Services: {selectedServiceNameList.join(\", \")}\n
\n
\n Appointment Type: {transportMethodName}\n
\n
\n Appointment Date: {serviceDate}\n
\n
\n Appointment Time: {timeSlot}\n
\n
\n If you need to cancel or amend your booking, please call us on{\" \"}\n {phoneNumber} or email at {emailAddress}\n
\n
\n We look forward to welcoming you at {branchName}, {address}.\n
\n \n {address}\n
Date and time are not selected.
\n )}\n \n );\n\n // refresh Add to Calendar button, wrapped in setTimeOut just in case.\n setTimeout(function() {\n window.addeventatc.refresh();\n }, 200);\n\n return (\n\n
\n );\n};\n\nexport default ConfirmationItems;\n","import React, { Fragment } from \"react\";\nimport iconPhone from \"assets/img/icon-phone.svg\";\nimport iconLocation from \"assets/img/icon-location.svg\";\nimport { Api } from \"constants/api\";\n\nconst DealershipLocation = props => {\n const {\n BranchName: branchName,\n Address: address,\n PhoneNumber: phoneNumber,\n Longitude: longitude,\n Latitude: latitude,\n BranchPhoto: branchPhoto\n } = props.data;\n\n return (\n \n {isTimeslotsVisible && TimeItem}\n {DateItem}\n {isAdvisorsVisible && AdvisorItem}\n {VehicleItem}\n {isTransportationOptionsVisible && TransportationItem}\n {isAdvisorsVisible && SyncToYourCalendarItem}\n
\n {!isAdvisorsVisible && SyncToYourCalendarItem}\n {branchName} Location
\n\n {branchPhoto ? (\n 
\n ) : (\n
\n \n ) : (\n \n
\n \n \n 
\n \n \n {address}\n \n
\n \n \n 
\n \n {phoneNumber}\n
\n \n
\n );\n }\n}\n\nexport default props => (\n \n \n \n \n \n
\n \n {userName && typeof userName === \"string\" && userName.trim().length > 0\n ? `Hi ${userName.trim()}`\n : \"\"}\n
\n\n Thanks for letting us know. We will update our records. If you own\n another vehicle that is due for a service, please give us a call{\" \"}\n \n {dealerPhoneNumber}\n \n
\n\n
\n );\n }\n}\n\nexport default props => (\n \n \n \n \n \n
\n \n
\n \n \n \n \n \n
\n \n
\n