\r\n \r\n {validationMessage}\r\n
) : \r\n (null)\r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default TextInput;\r\n","import React, { Component } from \"react\";\r\nimport Accordion from \"../UI/Accordion\";\r\nimport TextInput from \"../UI/TextInput\";\r\n\r\nexport class Location extends Component {\r\n continue = (e) => {\r\n e.preventDefault();\r\n\r\n if (this.props.values.initForm) {\r\n this.props.handleValidationFields(1);\r\n }\r\n\r\n\r\n if (this.props.values.step1FormValid) {\r\n this.props.nextStep();\r\n }\r\n\r\n try {\r\n if (typeof (ga) === \"function\") {\r\n var fields = {\r\n hitType: \"event\",\r\n event_category: \"InstaQuote\",\r\n eventAction: \"completed Moving From/To\",\r\n value: \"1\",\r\n };\r\n\r\n window.gtag('event', fields.eventAction, fields);\r\n }\r\n } catch (err) {\r\n console.log(\"Error Logging Google Analytics Event for Step 1 - Online booking\");\r\n }\r\n };\r\n\r\n previous = (e) => {\r\n e.preventDefault();\r\n this.props.prevStep();\r\n };\r\n\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n render() {\r\n const { values, handleChange, updateInputValue } = this.props;\r\n\r\n return (\r\n \r\n {label && (\r\n \r\n {label}\r\n \r\n )}\r\n
\r\n {\r\n !isValid ? \r\n (\r\n {renderInput}\r\n {renderSvg}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Location;\r\n","import React, { Component } from \"react\";\r\n\r\nexport class Progress extends Component { \r\n\r\n jumpToStep = (e, step) => {\r\n e.preventDefault();\r\n this.props.jumpToStep(step);\r\n };\r\n\r\n render() {\r\n\r\n const { values, activeStep } = this.props;\r\n\r\n return (\r\n \r\n \r\n {\r\n updateInputValue(\"movingFromStreet\", selected);\r\n }}\r\n />\r\n {/* \r\n \r\n {\r\n updateInputValue(\"movingToStreet\", selected);\r\n }}\r\n />\r\n \r\n
\r\n {document.getElementById(\"Step1Title\").value}
\r\n\r\n
*/}\r\n \r\n {/* */}\r\n \r\n {document.getElementById(\"Step1NextButtonText\").value}\r\n \r\n
\r\n - \r\n
- \r\n
\r\n Location Details \r\n {\r\n (values.step1FormValid && activeStep !== 1 && !values.isDataByLMPID) ?\r\n (\r\n this.jumpToStep(e, 1)}>Edit\r\n ) :\r\n (null)\r\n }\r\n
\r\n\r\n\r\n\r\n\r\nMoving from:
\r\n\r\n {values.movingFromStreet}\r\n
\r\n\r\n {values.movingFromUnit}\r\n
\r\n\r\n\r\nMoving to:
\r\n\r\n {values.movingToStreet}\r\n
\r\n\r\n {values.movingToUnit}\r\n
\r\n \r\n - \r\n
\r\n Move Details \r\n {\r\n (values.step2FormValid && activeStep !== 2 && !values.isDataByLMPID) ?\r\n (\r\n this.jumpToStep(e, 2)}>Edit\r\n ) :\r\n (null)\r\n }\r\n
\r\n\r\n\r\n\r\n\r\nDate:
\r\n{values.movingDate.toLocaleDateString()}
\r\n\r\n\r\nSize:
\r\n{values.houseSize}
\r\n\r\n\r\nVehicle:
\r\n\r\n {values.movingVehicle}\r\n
\r\n \r\n - \r\n
\r\n Contact Detail \r\n {\r\n (values.step3FormValid && activeStep !== 3 && !values.isDataByLMPID) ?\r\n (\r\n this.jumpToStep(e, 3)}>Edit\r\n ) :\r\n (null)\r\n }\r\n
\r\n\r\n\r\n\r\n\r\n\r\n {values.contactName}\r\n
\r\n\r\n {values.contactEmail}\r\n
\r\n\r\n {values.contactPhone}\r\n
\r\n \r\n - \r\n
\r\n Instant Quote\r\n
\r\n\r\n\r\n\r\n\r\n{values.quote}
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default RadioInput;\r\n","import React, { Component, useState } from \"react\";\r\nimport Accordion from \"../UI/Accordion\";\r\nimport RadioInput from \"../UI/RadioInput\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport moment from \"moment/moment\";\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\n\r\nexport class Location extends Component {\r\n continue = (e) => {\r\n e.preventDefault();\r\n\r\n if (this.props.values.step2FormValid) {\r\n this.props.nextStep();\r\n }\r\n\r\n try {\r\n if (typeof (ga) === \"function\") {\r\n var fields = {\r\n hitType: \"event\",\r\n event_category: \"InstaQuote\",\r\n eventAction: \"completed Moving Date\",\r\n value: \"2\",\r\n };\r\n\r\n window.gtag('event', fields.eventAction, fields);\r\n }\r\n } catch (err) {\r\n console.log(\"Error Logging Google Analytics Event for Step 2 - Online booking\");\r\n }\r\n };\r\n previous = (e) => {\r\n e.preventDefault();\r\n this.props.prevStep();\r\n };\r\n\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n render() {\r\n const { values, handleChange, handleDateChange } = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Location;\r\n","export class leadSubmissionApi {\r\n\r\n private props: any;\r\n\r\n private handleLeadSubmission: any;\r\n\r\n constructor(local: any, handleLeadSubmission: (this: void) => any) {\r\n this.props = local;\r\n this.handleLeadSubmission = handleLeadSubmission;\r\n }\r\n\r\n async submitLead(bookAppointment = false) {\r\n var requestModel;\r\n //Create request at step 3 (Contact)\r\n requestModel = {\r\n \"MovingFromInput\": this.props.values.movingFromAddrComponent.MovingFromInput,\r\n \"MovingFromAddress\": this.props.values.movingFromAddrComponent.MovingFromAddress,\r\n \"MovingFromCity\": this.props.values.movingFromAddrComponent.MovingFromCity,\r\n \"MovingFromState\": this.props.values.movingFromAddrComponent.MovingFromState,\r\n \"MovingFromZip\": this.props.values.movingFromAddrComponent.MovingFromZip,\r\n \"MovingFromCountryCode\": this.props.values.movingFromAddrComponent.MovingFromCountryCode,\r\n \"MovingFromClientValidated\": \"true\",\r\n \"MovingToInput\": this.props.values.movingToAddrComponent.MovingToInput,\r\n \"MovingToAddress\": this.props.values.movingToAddrComponent.MovingToAddress,\r\n \"MovingToCity\": this.props.values.movingToAddrComponent.MovingToCity,\r\n \"MovingToState\": this.props.values.movingToAddrComponent.MovingToState,\r\n \"MovingToZip\": this.props.values.movingToAddrComponent.MovingToZip,\r\n \"MovingToCountryCode\": this.props.values.movingToAddrComponent.MovingToCountryCode,\r\n \"MovingToClientValidated\": \"true\",\r\n \"MoveDate\": this.props.values.movingDateString,\r\n \"home-type\": \"house\",\r\n \"home-size\": this.getHomeSizeforAPI(),\r\n \"DwellingType\": this.getHomeSizeforAPI(),\r\n \"Name\": this.props.values.contactName,\r\n \"Email\": this.props.values.contactEmail,\r\n \"Phone\": this.props.values.contactPhone,\r\n \"HasVehicle\": this.props.values.movingVehicle === \"yes\" ? \"true\" : \"false\",\r\n \"WidgetSpecificRefCode\": this.props.values.referralCode,\r\n \"RefferalCode\": this.props.values.referralCode,\r\n \"DeviceType\": (\r\n \r\n handleDateChange(date)}\r\n name=\"movingDate\"\r\n minDate={new Date(+new Date() + 86400000)}\r\n dateFormat=\"MM/dd/yyyy\"\r\n inline\r\n formatWeekDay={(nameOfDay) => nameOfDay.substr(0, 1)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {document.getElementById(\"Step2Title\").value}
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Quote;\r\n","export class instaQuoteApi {\r\n\r\n private props: any;\r\n\r\n private handleInstaQuote: any;\r\n\r\n private moveToNextStep: boolean;\r\n\r\n constructor(local: any, moveToNextStep: boolean, handleInstaQuote: (this: void) => any) {\r\n this.props = local;\r\n this.moveToNextStep = moveToNextStep\r\n this.handleInstaQuote = handleInstaQuote;\r\n }\r\n\r\n async GetInstaquoteData() {\r\n const requestOptions = {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },\r\n body: new URLSearchParams({\r\n \"MovingFromInput\": this.props.values.movingFromAddrComponent.MovingFromInput,\r\n \"MovingFromAddress\": this.props.values.movingFromAddrComponent.MovingFromAddress,\r\n \"MovingFromCity\": this.props.values.movingFromAddrComponent.MovingFromCity,\r\n \"MovingFromState\": this.props.values.movingFromAddrComponent.MovingFromState,\r\n \"MovingFromZip\": this.props.values.movingFromAddrComponent.MovingFromZip,\r\n \"MovingFromCountryCode\": this.props.values.movingFromAddrComponent.MovingFromCountryCode,\r\n \"MovingFromClientValidated\": \"true\",\r\n \"MovingToInput\": this.props.values.movingToAddrComponent.MovingToInput,\r\n \"MovingToAddress\": this.props.values.movingToAddrComponent.MovingToAddress,\r\n \"MovingToCity\": this.props.values.movingToAddrComponent.MovingToCity,\r\n \"MovingToState\": this.props.values.movingToAddrComponent.MovingToState,\r\n \"MovingToZip\": this.props.values.movingToAddrComponent.MovingToZip,\r\n \"MovingToCountryCode\": this.props.values.movingToAddrComponent.MovingToCountryCode,\r\n \"MovingToClientValidated\": \"true\",\r\n \"MoveDate\": this.props.values.movingDateString,\r\n \"home-type\": \"house\",\r\n \"home-size\": this.getHomeSizeforAPI(),\r\n \"DwellingType\": this.getHomeSizeforAPI(),\r\n \"Name\": this.props.values.contactName,\r\n \"Email\": this.props.values.contactEmail,\r\n \"Phone\": this.props.values.contactPhone,\r\n \"WidgetSpecificRefCode\": \"\",\r\n \"DeviceType\": \"Desktop\",\r\n \"quote-range\": \"Medium\"\r\n })\r\n };\r\n\r\n console.log(\"Starting instaquote the API Call\");\r\n\r\n let apiSuccess = false;\r\n //Call Instaquote API\r\n await fetch('/json/instaquote/GetSingleInstaquote/', requestOptions)\r\n .then(response => response.json())\r\n .then((data) => {\r\n console.log(\"Got Data instaquote the API Call\");\r\n this.handleInstaQuote(data, this.moveToNextStep);\r\n apiSuccess = true;\r\n },\r\n (error) => {\r\n console.error(error);\r\n this.handleInstaQuote(error, this.moveToNextStep);\r\n apiSuccess = false;\r\n });\r\n\r\n return apiSuccess;\r\n \r\n }\r\n\r\n getHomeSizeforAPI() {\r\n switch (this.props.values.houseSize) {\r\n case \"small\":\r\n return \"H1\";\r\n\r\n case \"medium\":\r\n return \"H2\";\r\n\r\n case \"large\":\r\n return \"H4\";\r\n\r\n default:\r\n return \"H2\"\r\n }\r\n }\r\n}","import { leadSubmissionApi } from \"./leadSubmissionApi\";\r\n\r\nexport class agentAppointmentDetailApi {\r\n private props: any;\r\n\r\n private handleAgentAppointmentDetailFromApi: any;\r\n\r\n private handleLeadSubmission: any;\r\n\r\n constructor(local: any, \r\n handleAgentAppointmentDetailFromApi: (this: void) => any,\r\n handleLeadSubmission: (this:void) => any) {\r\n this.props = local;\r\n this.handleAgentAppointmentDetailFromApi = handleAgentAppointmentDetailFromApi;\r\n this.handleLeadSubmission = handleLeadSubmission;\r\n }\r\n\r\n async GetAgentAppointmentDetail() {\r\n const requestOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json; charset=utf-8',\r\n 'x-api-key': 'IbxeqEcmkQ52cE4burH3kqczlSCY9Wvr',\r\n 'X-Requested-With': 'XMLHttpRequest',\r\n },\r\n body: JSON.stringify({\r\n \"zip\": this.props.values.movingFromAddrComponent.MovingFromZip,\r\n \"moveType\": this.props.values.isLocalMove ? \"L\" : \"I\",\r\n })\r\n };\r\n console.log(\"Starting AgentAppointment the API Call\");\r\n //Call Instaquote API\r\n let apiSuccess = false;\r\n\r\n await fetch('/CustomApi/OnlineAppointmentBooking/GetAgentAppointmentDetails', requestOptions)\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error('error => Error while getting Appointment details for agent')\r\n }\r\n return response.json();\r\n })\r\n .then((data) => {\r\n console.log(\"Got Data AgentAppointemtn the API Call\");\r\n if(!data.Success)\r\n {\r\n this.postLeadThruApi();\r\n }\r\n this.handleAgentAppointmentDetailFromApi(data);\r\n apiSuccess = true;\r\n },\r\n (error) => {\r\n console.log(error);\r\n apiSuccess = false;\r\n }) \r\n .catch(error => {\r\n console.log(error)\r\n });\r\n\r\n return apiSuccess;\r\n }\r\n\r\n postLeadThruApi() {\r\n //Submit Lead \r\n const leadSubmissionService = new leadSubmissionApi(this.props, this.handleLeadSubmission);\r\n \r\n leadSubmissionService.submitLead(false).then((leadSuccess) => {\r\n if (leadSuccess) {\r\n console.log(\"Lead Success\");\r\n }\r\n else {\r\n console.log(\"Lead Failed\");\r\n }\r\n });\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport TextInput from \"../UI/TextInput\";\r\nimport { instaQuoteApi } from \"../../services/instaQuoteApi\";\r\nimport { agentAppointmentDetailApi } from \"../../services/agentAppointmentDetailApi\";\r\nimport { leadSubmissionApi } from \"../../services/leadSubmissionApi\";\r\n\r\nexport class Contact extends Component {\r\n continue = (e) => {\r\n e.preventDefault();\r\n //console.log(e);\r\n\r\n if (this.props.values.initStep3From) {\r\n this.props.handleValidationFields(3);\r\n }\r\n\r\n if (this.props.values.step3FormValid) {\r\n let diff = this.props.values.movingDate - new Date();\r\n let isMoveWithin7Days = diff <= 604800000; //Diff in 7 Days in millisecond\r\n\r\n this.props.nextStep();\r\n\r\n //IF Local Move then no Need to Call InstaQuote API.\r\n if (this.props.values.isLocalMove) {\r\n if (!isMoveWithin7Days) { //No need to show appointment booking\r\n this.getAppointmentDataFromApi();\r\n }\r\n else { //If Move within 7 Days then post the lead.\r\n this.postLeadThruApi();\r\n }\r\n //return;\r\n }\r\n else {\r\n //Get InstaQuote From API\r\n const instaQuoteService = new instaQuoteApi(this.props, isMoveWithin7Days, this.props.handleInstaQuotePriceRance);\r\n instaQuoteService.GetInstaquoteData().then(\r\n (instaQuoteSuccess) => {\r\n if (instaQuoteSuccess) {\r\n if (!isMoveWithin7Days) { //No need to show appointment booking\r\n this.getAppointmentDataFromApi();\r\n }\r\n else { //If Move within 7 Days then post the lead.\r\n this.postLeadThruApi();\r\n }\r\n }\r\n else {\r\n console.log(\"Instaquote Api Data Get Failed !\");\r\n }\r\n }\r\n );\r\n }\r\n\r\n try {\r\n if (typeof (ga) === \"function\") {\r\n var fields = {\r\n hitType: \"event\",\r\n event_category: \"InstaQuote\",\r\n eventAction: \"completed Contact Info\",\r\n value: \"4\",\r\n };\r\n\r\n window.gtag('event', fields.eventAction, fields);\r\n }\r\n } catch (err) {\r\n console.log(\"Error Logging Google Analytics Event for Step 4 - Online booking\");\r\n }\r\n }\r\n };\r\n\r\n previous = (e) => {\r\n e.preventDefault();\r\n this.props.prevStep();\r\n };\r\n\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n getAppointmentDataFromApi() {\r\n const agentAppointmentdetailapi = new agentAppointmentDetailApi(this.props, this.props.handleAgentAppointmentDetailFromApi, this.props.handleLeadSubmission);\r\n\r\n //Get Agent Details\r\n agentAppointmentdetailapi.GetAgentAppointmentDetail().then(\r\n (agentAppDetailSuccess) => {\r\n if (agentAppDetailSuccess) {\r\n console.log(\"this Worked !\");\r\n }\r\n }\r\n );\r\n }\r\n\r\n postLeadThruApi() {\r\n //Submit Lead \r\n const leadSubmissionService = new leadSubmissionApi(this.props, this.props.handleLeadSubmission);\r\n\r\n leadSubmissionService.submitLead(false).then((leadSuccess) => {\r\n if (leadSuccess) {\r\n console.log(\"Lead Success\");\r\n }\r\n else {\r\n console.log(\"Lead Failed\");\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const { values, handleChange } = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n (isLMPID) ? //Quote with lead ID\r\n (errorMessage === \"\") ?\r\n <>\r\n
\r\n \r\n \r\n handleAptDateChange(date)}\r\n name=\"appointmentDate\"\r\n dateFormat=\"MM/dd/yyyy\"\r\n minDate={values.agentAppointmentStartDate}\r\n maxDate={values.movingDate}\r\n filterDate={isWeekday}\r\n //excludeDates={values.agentAppointmentNextHoliday}\r\n inline\r\n //formatWeekDay={(nameOfDay) => nameOfDay.substr(0, 1)}\r\n />\r\n handleTimeChange(date)}\r\n excludeTimes={values.agentAppointmentBusySlotsUpdated}\r\n includeTimes={values.agentOperatingHours}\r\n inline\r\n name=\"appointmentTime\"\r\n showTimeSelect\r\n showTimeSelectOnly\r\n timeFormat=\"hh:mm aa\"\r\n timeIntervals={60}\r\n />\r\n \r\n
\r\n \r\n :\r\n <>\r\n Schedule an Appointment
\r\n\r\n {document.getElementById(\"Step4BookingDescription\").value}\r\n
\r\n\r\n \r\n
\r\n {this.props.values.errorMsg}
\r\n \r\n : //If IsDataByLMPID is false\r\n\r\n (isMoveWithin7Days || this.props.values.isOutOfAreaMove) ?\r\n <>\r\n\r\n
\r\n :\r\n <>\r\n To get a guaranteed rate with one of our in house estimators call {document.getElementById(\"PhoneNumToShow\").value}.
\r\n\r\n \r\n handleAptDateChange(date)}\r\n name=\"appointmentDate\"\r\n dateFormat=\"MM/dd/yyyy\"\r\n minDate={values.agentAppointmentStartDate}\r\n maxDate={values.movingDate}\r\n filterDate={isWeekday}\r\n excludeDates={values.agentAppointmentNextHoliday}\r\n inline\r\n formatWeekDay={(nameOfDay) => nameOfDay.substr(0, 1)}\r\n />\r\n handleTimeChange(date)}\r\n excludeTimes={values.agentAppointmentBusySlotsUpdated}\r\n //excludeDates={values.agentAppointmentBusySlots}\r\n inline\r\n name=\"appointmentTime\"\r\n showTimeSelect\r\n showTimeSelectOnly\r\n timeFormat=\"hh:mm aa\"\r\n timeIntervals={60}\r\n minTime={setHours(setMinutes(new Date(), 0), 9)}\r\n maxTime={setHours(setMinutes(new Date(), 45), 16)}\r\n />\r\n \r\n
\r\n \r\n }\r\n Schedule an Appointment
\r\n\r\n {document.getElementById(\"Step4BookingDescription\").value}\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Contact;\r\n","import React, { Component, useState, useEffect } from \"react\";\r\n\r\nexport class Loading extends Component {\r\n continue = (e) => {\r\n //window.alert(\"this\");\r\n //e.preventDefault();\r\n this.props.nextStep();\r\n };\r\n\r\n previous = (e) => {\r\n e.preventDefault();\r\n this.props.prevStep();\r\n };\r\n\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n render() {\r\n\r\n if(!this.props.isFinalStep){\r\n const { values } = this.props;\r\n let diff = values.movingDate - new Date();\r\n let isMoveWithin7Days = diff <= 604800000; //Diff in 7 Days in millisecond\r\n if(isMoveWithin7Days && values.isLocalMove){\r\n setTimeout(() => {\r\n this.props.nextStep()\r\n }, 5000);\r\n } \r\n }\r\n \r\n return (\r\n \r\n
\r\n {document.getElementById(\"Step3Title\").value}
\r\n\r\n
\r\n Contact Information
\r\n\r\n
\r\n \r\n By pressing this button, I give Allied Van Lines consent to use\r\n automated telephone dialing technology to call and/or use SMS text\r\n messages at the phone number provided including a wireless number\r\n for telemarketing purposes. I understand consent is not a\r\n condition of puchase of Allied's services. By pressing submit I\r\n also agree to the Allied Privacy Policy.\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 Loading;\r\n","import React, { Component, useEffect, useRef } from \"react\";\r\nimport { Wrapper } from \"@googlemaps/react-wrapper\";\r\nimport Geocode from \"react-geocode\";\r\n\r\nexport class Confirm extends Component {\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n render() {\r\n const { values } = this.props;\r\n let errorMessage = values.errorMsg;\r\n return (\r\n <>\r\n \r\n
\r\n {this.props.loadingText}
\r\nThis may take a moment.
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {document.getElementById(\"FinalPageTitle\").value}\r\n
\r\n {\r\n (errorMessage === \"\") ?\r\n\r\n You will receive a confirmation email at \"{values.contactEmail}\"\r\n momentarily.\r\n
\r\n :\r\n\r\n {errorMessage}, please contact us at{\" \"}\r\n \r\n +1 (833) 591-0365\r\n \r\n
\r\n }\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Appointment details
\r\n\r\n A local agent will be in touch within 24 hours to confirm your\r\n requested appointment.\r\n
\r\n- \r\n
- \r\n Date: \r\n {values.appointmentDateString}\r\n \r\n
- \r\n Time: \r\n {values.appointmentTimeString}\r\n \r\n
- \r\n \r\n Phone : \r\n
- \r\n \r\n Location : \r\n
\r\n If you have any questions and would like to speak to a rep,\r\n please contact us at{\" \"}\r\n \r\n +1 (833) 591-0365\r\n \r\n
\r\n\r\n .value})
\r\n
\r\n \r\n
\r\n {(values.agentAddress) ? \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n .value})
\r\n
\r\n \r\n
\r\n :\r\n <>\r\n }\r\n \r\n );\r\n }\r\n}\r\n\r\nfunction MapComponent({ address, zoom }) {\r\n const ref = useRef();\r\n\r\n useEffect(() => {\r\n Geocode.fromAddress(address).then(\r\n (response) => {\r\n const center = response.results[0].geometry.location;\r\n const map = new window.google.maps.Map(ref.current, {\r\n center,\r\n zoom,\r\n });\r\n\r\n const image = {\r\n url: \"/ResourcePackages/Allied/assets/dist/img/template/map-marker.png\",\r\n size: new window.google.maps.Size(79, 79),\r\n origin: new window.google.maps.Point(0, 0),\r\n anchor: new window.google.maps.Point(39, 39)\r\n };\r\n\r\n new window.google.maps.Marker({\r\n position: center,\r\n map: map,\r\n icon: image\r\n });\r\n },\r\n (error) => {\r\n console.error(error);\r\n }\r\n );\r\n });\r\n\r\n return ;\r\n}\r\n\r\nexport default Confirm;\r\n","import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport Location from \"./Steps/Location\";\r\nimport Progress from \"./UI/Progress\";\r\nimport Move from \"./Steps/Move\";\r\nimport Quote from \"./Steps/Quote\";\r\nimport Contact from \"./Steps/Contact\";\r\nimport Loading from \"./Steps/Loading\";\r\nimport Confirm from \"./Steps/Confirm\";\r\nimport { format } from 'date-fns';\r\nimport Geocode from \"react-geocode\";\r\nimport WindowWarning from \"./WindowWarning\";\r\nimport setHours from \"date-fns/setHours\";\r\nimport setMinutes from \"date-fns/setMinutes\";\r\nimport setSeconds from \"date-fns/setSeconds\";\r\n\r\n\r\nexport default class OnlineBooking extends Component {\r\n state = {\r\n LeadId: document.getElementById(\"LeadID\").value ? document.getElementById(\"LeadID\").value:\"\",\r\n isDataByLMPID: document.getElementById(\"IsDataByLMPID\").value === \"True\" || document.getElementById(\"errorMsg\").value ? true : false,\r\n errorMsg: document.getElementById(\"errorMsg\").value ? document.getElementById(\"errorMsg\").value :\"\",\r\n step: document.getElementById(\"IsDataByLMPID\").value === \"True\" ? 5\r\n : document.getElementById(\"errorMsg\").value ? 5\r\n : (document.getElementById(\"MovingFromInput\").value ? 2 : 1),\r\n isGoogleApiSetup: false,\r\n isFilled: false,\r\n checked: false,\r\n isLoading: true,\r\n movingFromStreet: document.getElementById(\"MovingFromInput\").value ? document.getElementById(\"MovingFromInput\").value : \"\",\r\n movingFromUnit: \"\",\r\n movingToStreet: document.getElementById(\"MovingToInput\").value ? document.getElementById(\"MovingToInput\").value : \"\",\r\n movingToUnit: \"\",\r\n movingDate: new Date(document.getElementById(\"MoveDate\").value ? document.getElementById(\"MoveDate\").value : +new Date() + 86400000),\r\n houseSize: document.getElementById(\"HouseSize\").value ? document.getElementById(\"HouseSize\").value : \"\",\r\n movingVehicle: \"\",\r\n contactName: document.getElementById(\"ContactName\").value ? document.getElementById(\"ContactName\").value : \"\",\r\n contactEmail: document.getElementById(\"ContactEmail\").value ? document.getElementById(\"ContactEmail\").value : \"\",\r\n contactPhone: document.getElementById(\"ContactPhone\").value ? document.getElementById(\"ContactPhone\").value : \"\",\r\n appointmentType: \"\",\r\n appointmentDate: this.setFirstDay(),\r\n appointmentDateString: format(this.setFirstDay(), 'MM/dd/yyyy'),\r\n appointmentTime: document.getElementById(\"AgentAppointmentStartDate\").value ? this.SetOperatingHoursByDay(document.getElementById(\"AgentAppointmentStartDate\").value)[0] : new Date(+new Date() + 86400000),\r\n appointmentTimeString: document.getElementById(\"AgentAppointmentStartDate\").value ? format(this.SetOperatingHoursByDay(document.getElementById(\"AgentAppointmentStartDate\").value)[0], 'hh:mm aa') : format(new Date(+new Date() + 86400000), 'MM/dd/yyyy'),\r\n agentAppointmentStartDate: new Date(document.getElementById(\"AgentAppointmentStartDate\").value ? document.getElementById(\"AgentAppointmentStartDate\").value : +new Date() + 86400000),\r\n agentAppointmentNextHoliday: new Date(+new Date() + 86400000),\r\n agentCode: document.getElementById(\"AgentCode\").value ? document.getElementById(\"AgentCode\").value : \"\",\r\n agentName: document.getElementById(\"AgentName\").value ? document.getElementById(\"AgentName\").value : \"\",\r\n agentPhone: \"\",\r\n agentAddress: \"\",\r\n agentAllocationId: document.getElementById(\"AllocationId\").value ? document.getElementById(\"AllocationId\").value : \"\",\r\n agentPreferenceMondayHours: document.getElementById(\"AgentPreferenceMondayHours\").value ? document.getElementById(\"AgentPreferenceMondayHours\").value : \"\",\r\n agentPreferenceTuesdayHours: document.getElementById(\"AgentPreferenceTuesdayHours\").value ? document.getElementById(\"AgentPreferenceTuesdayHours\").value : \"\",\r\n agentPreferenceWednesdayHours: document.getElementById(\"AgentPreferenceWednesdayHours\").value ? document.getElementById(\"AgentPreferenceWednesdayHours\").value : \"\",\r\n agentPreferenceThursdayHours: document.getElementById(\"AgentPreferenceThursdayHours\").value ? document.getElementById(\"AgentPreferenceThursdayHours\").value : \"\",\r\n agentPreferenceFridayHours: document.getElementById(\"AgentPreferenceFridayHours\").value ? document.getElementById(\"AgentPreferenceFridayHours\").value : \"\",\r\n agentOperatingHours: this.SetOperatingHoursByDay(document.getElementById(\"AgentAppointmentStartDate\").value),\r\n appointmentPhone: \"\",\r\n isAppointmentstackingAllow: document.getElementById(\"IsAppointmentstackingAllow\").value === \"True\" ? true : false,\r\n agentAppointmentBusySlotsOriginal: document.getElementById(\"AgentAppointmentBusy\").value ? this.parseBusyAppointmentSlots(document.getElementById(\"AgentAppointmentBusy\").value) : [],\r\n agentAppointmentBusySlotsUpdated: [],\r\n appointmentLocation: \"\",\r\n movingDateString: format(new Date(document.getElementById(\"MoveDate\").value ? document.getElementById(\"MoveDate\").value : +new Date() + 86400000), 'MM/dd/yyyy'),\r\n movingToAddrComponent: {\r\n MovingToInput: document.getElementById(\"MovingToInput\").value ? document.getElementById(\"MovingToInput\").value : \"\",\r\n MovingToAddress: document.getElementById(\"MovingToAddress\").value ? document.getElementById(\"MovingToAddress\").value : \"\",\r\n MovingToCity: document.getElementById(\"MovingToCity\").value ? document.getElementById(\"MovingToCity\").value : \"\",\r\n MovingToState: document.getElementById(\"MovingToState\").value ? document.getElementById(\"MovingToState\").value : \"\",\r\n MovingToZip: document.getElementById(\"MovingToZip\").value ? document.getElementById(\"MovingToZip\").value : \"\",\r\n MovingToCountryCode: document.getElementById(\"MovingToCountryCode\").value ? document.getElementById(\"MovingToCountryCode\").value : \"\"\r\n },\r\n movingFromAddrComponent: {\r\n MovingFromInput: document.getElementById(\"MovingFromInput\").value ? document.getElementById(\"MovingFromInput\").value : \"\",\r\n MovingFromAddress: document.getElementById(\"MovingFromAddress\").value ? document.getElementById(\"MovingFromAddress\").value : \"\",\r\n MovingFromCity: document.getElementById(\"MovingFromCity\").value ? document.getElementById(\"MovingFromCity\").value : \"\",\r\n MovingFromState: document.getElementById(\"MovingFromState\").value ? document.getElementById(\"MovingFromState\").value : \"\",\r\n MovingFromZip: document.getElementById(\"MovingFromZip\").value ? document.getElementById(\"MovingFromZip\").value : \"\",\r\n MovingFromCountryCode: document.getElementById(\"MovingFromCountryCode\").value ? document.getElementById(\"MovingFromCountryCode\").value : \"\"\r\n },\r\n instaQuotePriceRange: \"\",\r\n isLoadingAgain: false,\r\n formErrors: {\r\n movingFromStreetErrMsg: 'Please Enter Moving From Location.',\r\n movingToStreetErrMsg: 'Please Enter Moving To Location.',\r\n contactNameErrMsg: 'Please Enter Contact Name.',\r\n contactEmailErrMsg: 'Please Enter Email Address.',\r\n contactPhoneErrMsg: 'Please Enter Phone Number.'\r\n },\r\n referralCode: document.getElementById(\"RefferalCode\").value,\r\n vendorName: document.getElementById(\"VendorName\").value,\r\n vendorId: document.getElementById(\"VendorId\").value,\r\n deviceType: document.getElementById(\"DeviceType\").value,\r\n prevPageUrlReferral: document.getElementById(\"PrevPageUrlReferrer\").value,\r\n verificationToken: document.getElementsByName(\"__RequestVerificationToken\")[0].value,\r\n movingFromValid: true,\r\n movingToValid: true,\r\n houseSizeValid: false,\r\n movingVehicleValid: false,\r\n contactNameValid: true,\r\n contactEmailValid: true,\r\n contactPhoneValid: true,\r\n appointmentTypeValid: false,\r\n step1FormValid: document.getElementById(\"IsDataByLMPID\").value === \"True\" || document.getElementById(\"errorMsg\").value ? true : ((document.getElementById(\"MovingFromInput\").value ? true : false)),\r\n step2FormValid: document.getElementById(\"IsDataByLMPID\").value === \"True\" || document.getElementById(\"errorMsg\").value ? true : false,\r\n step3FormValid: document.getElementById(\"IsDataByLMPID\").value === \"True\" || document.getElementById(\"errorMsg\").value ? true : false,\r\n step5FormValid: false,\r\n initForm: true,\r\n initStep3From: true,\r\n isLocalMove: false,\r\n instaQuoteApiSuccess: false,\r\n validationFields: [\"movingFromStreet\", \"movingToStreet\", \"houseSize\", \"contactName\", \"contactEmail\", \"contactPhone\"],\r\n isOutOfAreaMove: false,\r\n\r\n };\r\n\r\n // proceed to next step\r\n nextStep = () => {\r\n const { step } = this.state;\r\n this.setState({\r\n step: step + 1,\r\n });\r\n };\r\n\r\n // go back to previous step\r\n prevStep = () => {\r\n const { step } = this.state;\r\n this.setState({\r\n step: step - 1,\r\n });\r\n };\r\n\r\n setFirstDay() {\r\n const date = new Date(+new Date() + 2 * 86400000)\r\n const dayOfWeek = date.getDay();\r\n if (dayOfWeek === 0 || dayOfWeek === 6) {\r\n // If it's a weekend, calculate the next business day\r\n const nextBusinessDay = new Date(date);\r\n nextBusinessDay.setDate(date.getDate() + (dayOfWeek === 0 ? 1 : 2));\r\n return nextBusinessDay;\r\n } else {\r\n return date;\r\n }\r\n }\r\n\r\n // handle fields change\r\n handleChange = (input) => (e) => {\r\n const value = e.target.value;\r\n this.setState({\r\n [input]: value,\r\n },\r\n () => {\r\n this.validateField(input, value);\r\n if (input === \"contactPhone\")\r\n this.setState({\r\n [input]: this.phoneNumberFormatter(value)\r\n })\r\n });\r\n };\r\n\r\n handleDateChange = (date) => {\r\n this.setState({\r\n movingDate: date,\r\n movingDateString: format(date, 'MM/dd/yyyy'),\r\n });\r\n };\r\n\r\n handleAptDateChange = (date) => {\r\n var isExist = false;\r\n let timeSlotsForSelectedDate = [];\r\n for (var i = 0; i < this.state.agentAppointmentBusySlotsOriginal.length; i++) {\r\n if (this.state.agentAppointmentBusySlotsOriginal[i].getDate() === date.getDate()) {\r\n isExist = true;\r\n timeSlotsForSelectedDate.push(this.state.agentAppointmentBusySlotsOriginal[i]);\r\n }\r\n }\r\n //Get Operating hours by selected day\r\n let hourArray = this.SetOperatingHoursByDay(date.toString());\r\n console.log(timeSlotsForSelectedDate);\r\n console.log(hourArray);\r\n\r\n this.setState({\r\n appointmentDate: date,\r\n appointmentTime: date,\r\n appointmentDateString: format(date, 'MM/dd/yyyy'),\r\n agentAppointmentBusySlotsUpdated: ((isExist && !this.state.isAppointmentstackingAllow) ? timeSlotsForSelectedDate : []),\r\n agentOperatingHours: hourArray\r\n });\r\n };\r\n\r\n handleTimeChange = (date) => {\r\n this.setState({\r\n appointmentTime: date,\r\n appointmentTimeString: format(date, 'hh:mm aa'),\r\n })\r\n };;\r\n\r\n handleCheck = (e) => {\r\n this.setState({\r\n checked: e.target.checked,\r\n });\r\n };\r\n\r\n handleLoading = () => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n };\r\n\r\n jumpToStep = (step) => {\r\n this.setState({\r\n step: step,\r\n });\r\n };\r\n\r\n triggerStep1Validation = () => {\r\n //alert(\"validation triggered !\");\r\n let validationFields = this.state.validationFields;\r\n\r\n validationFields.forEach(element => {\r\n this.validateField(element, document.getElementById(element).value);\r\n });\r\n };\r\n\r\n handleValidationFields = (step) => {\r\n switch (step) {\r\n case 1:\r\n this.setState({\r\n movingFromValid: false,\r\n movingToValid: false,\r\n });\r\n break;\r\n\r\n case 3:\r\n this.setState({\r\n contactNameValid: false,\r\n contactEmailValid: false,\r\n contactPhoneValid: false\r\n });\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n handleInstaQuotePriceRance = (data, moveToNextStep) => {\r\n try {\r\n this.setState({\r\n instaQuotePriceRange: (\"$\" + data.result.Average.LowPrice + \" - $\" + data.result.Average.HighPrice),\r\n isLoadingAgain: true,\r\n instaQuoteApiSuccess: true\r\n }, moveToNextStep ? this.handleLocalMove : null);\r\n } catch (err) {\r\n this.handleInstaQuoteError();\r\n }\r\n };\r\n\r\n handleInstaQuoteError = (data) => {\r\n this.setState({\r\n instaQuotePriceRange: \"Please Call\",\r\n isLoadingAgain: true,\r\n instaQuoteApiSuccess: false\r\n }, this.handleLocalMove);\r\n }\r\n\r\n handleAgentAppointmentDetailFromApi = (data) => {\r\n if (data.Success) {\r\n\r\n let busyAppointmentSlots = this.parseBusyAppointmentSlots(data.aasCalendarDetails.busy);\r\n let holidaysSlots = this.parseBusyAppointmentSlots(data.aasCalendarDetails.nextHolidays);\r\n\r\n this.setState({\r\n agentCode: data.agentCode,\r\n agentName: data.agentName,\r\n agentPhone: data.agentPhone,\r\n agentAddress: data.agentAddress,\r\n agentAllocationId: data.allocationID,\r\n agentAppointmentStartDate: Date.parse(data.aasCalendarDetails.startDate),\r\n agentAppointmentNextHoliday: holidaysSlots,\r\n isAppointmentstackingAllow: data.aasCalendarDetails.aasStackAppointments,\r\n agentAppointmentBusySlotsOriginal: busyAppointmentSlots,\r\n agentAppointmentBusySlotsUpdated: []\r\n }, this.handleLocalMove)\r\n }\r\n else {\r\n this.setState({\r\n isOutOfAreaMove: true\r\n })\r\n this.jumpToStep(5);\r\n }\r\n }\r\n\r\n handleLeadSubmission = (data) => {\r\n this.jumpToStep(7);\r\n }\r\n handleOnlineBookingFinalResponse = (success) => {\r\n console.log(\"Submission Status: \" + success);\r\n if (!success) {\r\n this.setState({\r\n errorMsg: \"There is something wrong with the appointment booking\",\r\n });\r\n }\r\n }\r\n handleIsLoadingFlag = (flag) => {\r\n this.setState({\r\n isLoadingAgain: flag,\r\n });\r\n };\r\n\r\n handleMovingFromValidation = () => {\r\n this.setState({\r\n movingFromValid: false,\r\n });\r\n }\r\n\r\n handleMovingToValidation = () => {\r\n this.setState({\r\n movingToValid: false,\r\n });\r\n }\r\n\r\n handleLocalMove() {\r\n let diff = this.state.movingDate - new Date();\r\n let isMoveWithin7Days = diff <= 604800000; //Diff in 7 Days in millisecond\r\n if (!this.state.isLocalMove || !isMoveWithin7Days) {\r\n this.jumpToStep(5);\r\n }\r\n }\r\n\r\n validateField(fieldName, value) {\r\n let fieldValidationErrors = this.state.formErrors;\r\n let movingFromValid = this.state.movingFromValid;\r\n let movingToValid = this.state.movingToValid;\r\n let houseSizeValid = this.state.houseSizeValid;\r\n let movingVehicleValid = this.state.movingVehicleValid;\r\n let contactNameValid = this.state.contactNameValid;\r\n let contactEmailValid = this.state.contactEmailValid;\r\n let contactPhoneValid = this.state.contactPhoneValid;\r\n let appointmentTypeValid = this.state.appointmentTypeValid;\r\n let initForm = this.state.initForm\r\n let initStep3From = this.state.initStep3From\r\n\r\n switch (fieldName) {\r\n case 'movingFromStreet':\r\n movingFromValid = value.length >= 1;\r\n initForm = false;\r\n //fieldValidationErrors.movingFromStreetErrMsg = movingFromValid ? '' : ' is required';\r\n break;\r\n\r\n case 'movingToStreet':\r\n movingToValid = value.length >= 1;\r\n initForm = false;\r\n //fieldValidationErrors.movingToStreetErrMsg = movingToValid ? '' : ' is required';\r\n break;\r\n\r\n case 'houseSize':\r\n houseSizeValid = value.length >= 1;\r\n break;\r\n\r\n case 'movingVehicle':\r\n movingVehicleValid = value.length >= 1;\r\n break;\r\n\r\n case 'appointmentType':\r\n appointmentTypeValid = value.length >= 1;\r\n break;\r\n\r\n case 'contactName':\r\n contactNameValid = value.length >= 1;\r\n fieldValidationErrors.contactNameErrMsg = contactNameValid ? '' : 'Please Enter Contact Name.';\r\n initStep3From = false;\r\n break;\r\n\r\n case 'contactEmail':\r\n if (value.length < 1) {\r\n contactEmailValid = false;\r\n fieldValidationErrors.contactEmailErrMsg = contactEmailValid ? '' : 'Please Enter Email Address.';\r\n }\r\n else if (!/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(value)) {\r\n contactEmailValid = false;\r\n fieldValidationErrors.contactEmailErrMsg = contactEmailValid ? '' : 'Email Address is Invalid !';\r\n }\r\n else {\r\n contactEmailValid = true;\r\n }\r\n initStep3From = false;\r\n break;\r\n\r\n case 'contactPhone':\r\n // if (value.length < 1) {\r\n // contactPhoneValid = false;\r\n // fieldValidationErrors.contactPhoneErrMsg = contactPhoneValid ? '' : 'Please Enter Phone Number.';\r\n // }\r\n // else if (value.length > 10) {\r\n // contactPhoneValid = false;\r\n // fieldValidationErrors.contactPhoneErrMsg = contactPhoneValid ? '' : 'Phone Number Needs to be 10 Digits';\r\n // }\r\n // else if (isNaN(+value)) {\r\n // contactPhoneValid = false;\r\n // fieldValidationErrors.contactPhoneErrMsg = contactPhoneValid ? '' : 'Non Digit is not allowed.';\r\n // }\r\n // else {\r\n // contactPhoneValid = true;\r\n // }\r\n contactPhoneValid = true;\r\n initStep3From = false;\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n\r\n this.setState(() => ({\r\n formErrors: fieldValidationErrors,\r\n movingFromValid: movingFromValid,\r\n movingToValid: movingToValid,\r\n houseSizeValid: houseSizeValid,\r\n initForm: initForm\r\n }), this.validateStep1Form);\r\n\r\n this.setState(() => ({\r\n formErrors: fieldValidationErrors,\r\n houseSizeValid: houseSizeValid,\r\n movingVehicleValid: movingVehicleValid,\r\n }), this.validateStep2Form);\r\n\r\n this.setState(() => ({\r\n formErrors: fieldValidationErrors,\r\n contactNameValid: contactNameValid,\r\n contactEmailValid: contactEmailValid,\r\n contactPhoneValid: contactPhoneValid,\r\n initStep3From: initStep3From,\r\n }), this.validateStep3Form);\r\n\r\n this.setState(() => ({\r\n appointmentTypeValid: appointmentTypeValid\r\n }), this.validateStep5Form);\r\n }\r\n\r\n validateStep1Form() {\r\n this.setState({ step1FormValid: this.state.movingToValid && this.state.movingFromValid });\r\n }\r\n\r\n validateStep2Form() {\r\n this.setState({ step2FormValid: this.state.houseSizeValid && this.state.movingVehicleValid });\r\n }\r\n\r\n validateStep3Form() {\r\n if (!this.state.initStep3From) {\r\n this.setState({ step3FormValid: this.state.contactNameValid && this.state.contactEmailValid && this.state.contactPhoneValid });\r\n }\r\n }\r\n\r\n validateStep5Form() {\r\n this.setState({ step5FormValid: this.state.appointmentTypeValid });\r\n }\r\n\r\n errorClass(error) {\r\n return (error.length === 0 ? '' : 'has-error');\r\n }\r\n \r\n SetOperatingHoursByDay(dateValue) {\r\n let date = new Date(dateValue);\r\n let day = date.getDay();\r\n let operatingHourArray = [];\r\n console.log(date);\r\n switch (day) {\r\n case 1:\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceMondayHours\").value, date.toString());\r\n break;\r\n case 2:\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceTuesdayHours\").value, date.toString());\r\n break;\r\n case 3:\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceWednesdayHours\").value, date.toString());\r\n break;\r\n case 4:\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceThursdayHours\").value, date.toString());\r\n\r\n break;\r\n case 5:\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceFridayHours\").value, date.toString());\r\n break;\r\n default://if Sunday or Saturday apply operating hours for Monday\r\n operatingHourArray = this.parseOperatingHours(document.getElementById(\"AgentPreferenceMondayHours\").value, date.toString());\r\n break;\r\n }\r\n\r\n let agentAppointmentBusySlotsOriginalArray = this.parseBusyAppointmentSlots(document.getElementById(\"AgentAppointmentBusy\").value)\r\n let busyTimeSlotsForSelectedDate = [];\r\n let isStackingAllow = document.getElementById(\"IsAppointmentstackingAllow\").value === \"True\" ? true : false;\r\n for (var i = 0; i < agentAppointmentBusySlotsOriginalArray.length; i++)\r\n {\r\n if (agentAppointmentBusySlotsOriginalArray[i].getDate() === date.getDate())\r\n {\r\n busyTimeSlotsForSelectedDate.push(agentAppointmentBusySlotsOriginalArray[i]);\r\n }\r\n }\r\n\r\n //Remove busy hour(s) from selected day based on is stacking appointment allowed AND busyTimeSlotsForSelectedDate array is not empty\r\n if (busyTimeSlotsForSelectedDate.length > 0 && !isStackingAllow) {\r\n operatingHourArray = operatingHourArray.filter(s => busyTimeSlotsForSelectedDate.every(e => e.toString() !== s.toString()));\r\n }\r\n \r\n //console.log(\"result after fillered (first time) -------\");\r\n //console.log(operatingHourArray);\r\n\r\n\r\n return operatingHourArray;\r\n }\r\n\r\n parseOperatingHours(Hourdata, dateValue) {\r\n if (!Hourdata) return [];\r\n let finalDataArray = [];\r\n let hourArray = Hourdata.split(',');\r\n hourArray.forEach(element => {\r\n var operatingHours = setHours(setMinutes(setSeconds(new Date(dateValue), 0), 0), element).toString();\r\n finalDataArray.push(new Date(operatingHours));\r\n });\r\n return finalDataArray;\r\n }\r\n\r\n parseBusyAppointmentSlots(busy) {\r\n if (!busy) return [];\r\n let parsedSlotData = []\r\n let finalSlotData = []\r\n\r\n let slotArr = busy.split(',');\r\n\r\n slotArr.forEach(element => {\r\n var a = new Date(element);\r\n var b = a.toString();\r\n parsedSlotData.push(b)\r\n });\r\n\r\n let uniqueChars = [];\r\n parsedSlotData.forEach((element) => {\r\n if (!uniqueChars.includes(element)) {\r\n uniqueChars.push(element);\r\n }\r\n });\r\n\r\n uniqueChars.forEach((element) => {\r\n finalSlotData.push(new Date(element))\r\n });\r\n return finalSlotData;\r\n }\r\n\r\n updateInputVal(input, selected) {\r\n this.setState({\r\n [input]: selected.formatted_address,\r\n });\r\n\r\n var googleAutoCompleteReadableJsonFormat = this.convertGoogleApiComponentToReadableJson(selected, input);\r\n if (input === \"movingFromStreet\") {\r\n this.setState({\r\n movingFromAddrComponent: {\r\n MovingFromInput: selected.formatted_address,\r\n MovingFromAddress: googleAutoCompleteReadableJsonFormat.addy,\r\n MovingFromCity: googleAutoCompleteReadableJsonFormat.city,\r\n MovingFromState: googleAutoCompleteReadableJsonFormat.state,\r\n MovingFromZip: googleAutoCompleteReadableJsonFormat.zip,\r\n MovingFromCountryCode: googleAutoCompleteReadableJsonFormat.cntryCode\r\n }\r\n });\r\n\r\n //console.log(this.state.movingFromAddrComponent);\r\n }\r\n\r\n if (input === \"movingToStreet\") {\r\n this.setState({\r\n movingToAddrComponent: {\r\n MovingToInput: selected.formatted_address,\r\n MovingToAddress: googleAutoCompleteReadableJsonFormat.addy,\r\n MovingToCity: googleAutoCompleteReadableJsonFormat.city,\r\n MovingToState: googleAutoCompleteReadableJsonFormat.state,\r\n MovingToZip: googleAutoCompleteReadableJsonFormat.zip,\r\n MovingToCountryCode: googleAutoCompleteReadableJsonFormat.cntryCode\r\n },\r\n }, this.determineMoveType);\r\n\r\n //console.log(this.state.movingToAddrComponent);\r\n }\r\n }\r\n\r\n determineMoveType() {\r\n this.setState({\r\n isLocalMove: this.state.movingFromAddrComponent.MovingFromState === this.state.movingToAddrComponent.MovingToState\r\n })\r\n }\r\n\r\n convertGoogleApiComponentToReadableJson(place, input) {\r\n var components = place.address_components;\r\n var comp, township, county, sep, streetNumber, route;\r\n var resultJson = {};\r\n\r\n if (!components) {\r\n console.log(\"components error: \");\r\n console.log(components);\r\n return resultJson;\r\n }\r\n\r\n for (var c = 0; c < components.length; ++c) {\r\n comp = components[c];\r\n\r\n if (comp.types.indexOf(\"street_number\") > -1) {\r\n streetNumber = comp.long_name;\r\n }\r\n if (comp.types.indexOf(\"route\") > -1) {\r\n route = comp.short_name;\r\n }\r\n if (comp.types.indexOf(\"locality\") > -1 && comp.types.indexOf(\"political\") > -1) {\r\n resultJson.city = comp.long_name;\r\n }\r\n if (comp.types.indexOf(\"administrative_area_level_3\") > -1 && comp.types.indexOf(\"political\") > -1) {\r\n township = comp.long_name;\r\n }\r\n if (comp.types.indexOf(\"administrative_area_level_2\") > -1 && comp.types.indexOf(\"political\") > -1) {\r\n county = comp.long_name;\r\n }\r\n if (comp.types.indexOf(\"administrative_area_level_1\") > -1 && comp.types.indexOf(\"political\") > -1) {\r\n resultJson.state = comp.short_name;\r\n }\r\n if (comp.types.indexOf(\"postal_code\") > -1) {\r\n resultJson.zip = comp.short_name.replace(/\\s/g, \"\");\r\n }\r\n if (comp.types.indexOf(\"country\") > -1) {\r\n resultJson.cntryCode = comp.short_name;\r\n }\r\n }\r\n\r\n if (!resultJson.city) {\r\n resultJson.city = township || county || \"\";\r\n }\r\n\r\n sep = (streetNumber && route) ? \" \" : \"\";\r\n\r\n streetNumber = streetNumber || \"\";\r\n route = route || \"\";\r\n\r\n resultJson.addy = streetNumber + sep + route;\r\n\r\n resultJson.zip = \"\";\r\n\r\n if (!resultJson.zip && place.geometry && place.geometry.location) { // autocomplete failed to return a zip code. Use lat/long to get one\t\t\t\t\t\r\n var location = place.geometry.location,\r\n lat = location.lat(),\r\n lng = location.lng();\r\n\r\n Geocode.setApiKey(\"AIzaSyAhGzSn1R46p94ApfqMiBHVHzi8IeMqhoU\");\r\n\r\n Geocode.fromLatLng(lat, lng).then(\r\n (response) => {\r\n if (response.results.length >= 0) {\r\n\r\n console.log(response.results);\r\n\r\n for (var i = 0; i < response.results.length; i++) {\r\n if (response.results[i]) {\r\n var cmpts = response.results[i].address_components;\r\n var breakOut = false;\r\n for (var c = 0; c < cmpts.length; ++c) {\r\n comp = cmpts[c];\r\n\r\n if (comp.types.indexOf(\"postal_code\") > -1) {\r\n this.updateInputZipAfterGeoCode(input, comp.short_name.replace(/\\s/g, \"\"))\r\n //resultJson.zip = comp.short_name.replace(/\\s/g, \"\");\r\n //window.alert(resultJson.zip);\r\n breakOut = true;\r\n break;\r\n //console.log('zip gets ' + comp.short_name)\r\n }\r\n }\r\n\r\n if (breakOut) {\r\n //this.validateLocationInterpretation();\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n },\r\n (error) => {\r\n console.error(error);\r\n }\r\n );\r\n }\r\n //else validateLocationInterpretation();\r\n //console.log(zipper);\r\n return resultJson\r\n }\r\n\r\n updateInputZipAfterGeoCode(input, zip) {\r\n\r\n if (input === \"movingFromStreet\") {\r\n\r\n var oldVal = this.state.movingFromAddrComponent;\r\n\r\n this.setState({\r\n movingFromAddrComponent: {\r\n MovingFromInput: oldVal.MovingFromInput,\r\n MovingFromAddress: oldVal.MovingFromAddress,\r\n MovingFromCity: oldVal.MovingFromCity,\r\n MovingFromState: oldVal.MovingFromState,\r\n MovingFromZip: zip,\r\n MovingFromCountryCode: oldVal.MovingFromCountryCode\r\n }\r\n });\r\n\r\n // console.log(this.state.movingFromAddrComponent);\r\n }\r\n\r\n if (input === \"movingToStreet\") {\r\n\r\n oldVal = this.state.movingToAddrComponent;\r\n\r\n this.setState({\r\n movingToAddrComponent: {\r\n MovingToInput: oldVal.MovingToInput,\r\n MovingToAddress: oldVal.MovingToAddress,\r\n MovingToCity: oldVal.MovingToCity,\r\n MovingToState: oldVal.MovingToState,\r\n MovingToZip: zip,\r\n MovingToCountryCode: oldVal.MovingToCountryCode\r\n },\r\n });\r\n\r\n // console.log(this.state.movingToAddrComponent);\r\n }\r\n }\r\n\r\n formatPhoneNumber(value) {\r\n if (!value) return value;\r\n const phoneNumber = value.replace(/[^\\d]/g, '');\r\n const phoneNumberLength = phoneNumber.length;\r\n if (phoneNumberLength < 4) return phoneNumber;\r\n if (phoneNumberLength < 7) {\r\n return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;\r\n }\r\n return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(\r\n 3,\r\n 6\r\n )}-${phoneNumber.slice(6, 10)}`;\r\n }\r\n\r\n phoneNumberFormatter(value) {\r\n const formattedInputValue = this.formatPhoneNumber(value);\r\n console.log(formattedInputValue);\r\n return formattedInputValue;\r\n }\r\n\r\n render() {\r\n const { step, isFilled } = this.state;\r\n const {\r\n LeadId,\r\n isDataByLMPID,\r\n errorMsg,\r\n movingFromStreet,\r\n movingFromUnit,\r\n movingToStreet,\r\n movingToUnit,\r\n movingDate,\r\n houseSize,\r\n movingVehicle,\r\n contactName,\r\n contactEmail,\r\n contactPhone,\r\n appointmentType,\r\n appointmentDate,\r\n appointmentTime,\r\n appointmentPhone,\r\n appointmentLocation,\r\n movingToAddrComponent,\r\n movingFromAddrComponent,\r\n movingDateString,\r\n instaQuotePriceRange,\r\n isLoadingAgain,\r\n appointmentDateString,\r\n appointmentTimeString,\r\n agentAppointmentStartDate,\r\n agentAppointmentNextHoliday,\r\n agentCode,\r\n agentName,\r\n agentPhone,\r\n agentAddress,\r\n agentAllocationId,\r\n agentPreferenceMondayHours,\r\n agentPreferenceTuesdayHours,\r\n agentPreferenceWednesdayHours,\r\n agentPreferenceThursdayHours,\r\n agentPreferenceFridayHours,\r\n agentOperatingHours,\r\n isAppointmentstackingAllow,\r\n agentAppointmentBusySlotsOriginal,\r\n agentAppointmentBusySlotsUpdated,\r\n referralCode,\r\n vendorName,\r\n vendorId,\r\n deviceType,\r\n prevPageUrlReferral,\r\n verificationToken,\r\n step1FormValid,\r\n step2FormValid,\r\n step3FormValid,\r\n formErrors,\r\n movingFromValid,\r\n movingToValid,\r\n contactNameValid,\r\n contactEmailValid,\r\n contactPhoneValid,\r\n initForm,\r\n initStep3From,\r\n isLocalMove,\r\n isOutOfAreaMove\r\n } = this.state;\r\n const values = {\r\n LeadId,\r\n isDataByLMPID,\r\n errorMsg,\r\n movingFromStreet,\r\n movingFromUnit,\r\n movingToStreet,\r\n movingToUnit,\r\n movingDate,\r\n houseSize,\r\n movingVehicle,\r\n contactName,\r\n contactEmail,\r\n contactPhone,\r\n appointmentType,\r\n appointmentDate,\r\n appointmentTime,\r\n appointmentPhone,\r\n appointmentLocation,\r\n movingToAddrComponent,\r\n movingFromAddrComponent,\r\n movingDateString,\r\n instaQuotePriceRange,\r\n isLoadingAgain,\r\n appointmentDateString,\r\n appointmentTimeString,\r\n agentAppointmentStartDate,\r\n agentAppointmentNextHoliday,\r\n agentCode,\r\n agentName,\r\n agentPhone,\r\n agentAddress,\r\n agentAllocationId,\r\n agentPreferenceMondayHours,\r\n agentPreferenceTuesdayHours,\r\n agentPreferenceWednesdayHours,\r\n agentPreferenceThursdayHours,\r\n agentPreferenceFridayHours,\r\n agentOperatingHours,\r\n isAppointmentstackingAllow,\r\n agentAppointmentBusySlotsOriginal,\r\n agentAppointmentBusySlotsUpdated,\r\n referralCode,\r\n vendorName,\r\n vendorId,\r\n deviceType,\r\n prevPageUrlReferral,\r\n verificationToken,\r\n step1FormValid,\r\n step2FormValid,\r\n step3FormValid,\r\n formErrors,\r\n movingFromValid,\r\n movingToValid,\r\n contactNameValid,\r\n contactEmailValid,\r\n contactPhoneValid,\r\n initForm,\r\n initStep3From,\r\n isLocalMove,\r\n isOutOfAreaMove\r\n };\r\n\r\n let { activeStep } = this.props;\r\n\r\n const container = document.getElementById(\"online-booking\");\r\n\r\n switch (step) {\r\n case 1:\r\n activeStep = 1\r\n return ReactDOM.createPortal(\r\n \r\n
\r\n \r\n
\r\n Meet your local agent
\r\n {/*\r\n {values.agentName}\r\n
*/}\r\n\r\n \r\n Agent Name : {values.agentName}\r\n \r\n
\r\n {/*\r\n Proin gravida dolor leo, et finibus mauris aliquam et. Interdum\r\n et malesuada fames ac ante ipsum primis in faucibus. Aliquam a\r\n varius neque. Dones in dictum turpis. Nunc ornare massa eget\r\n posuere commodo.\r\n
*/}\r\n\r\n \r\n Agent Phone : \r\n \r\n {values.agentPhone}\r\n \r\n \r\n
\r\n\r\n \r\n Agent Address : \r\n \r\n {values.agentAddress}\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n this.updateInputVal(input, selected)}\r\n triggerValidation={this.triggerStep1Validation}\r\n handleValidationFields={this.handleValidationFields}\r\n />\r\n {/* {this.setGoogleApi()} */}\r\n
,\r\n container\r\n );\r\n case 2:\r\n activeStep = 2\r\n return ReactDOM.createPortal(\r\n \r\n
,\r\n container\r\n );\r\n case 3:\r\n activeStep = 3\r\n return ReactDOM.createPortal(\r\n \r\n
,\r\n container\r\n );\r\n case 4:\r\n return ReactDOM.createPortal(\r\n \r\n
,\r\n container\r\n );\r\n case 5:\r\n activeStep = 5\r\n return ReactDOM.createPortal(\r\n \r\n \r\n this.handleOnlineBookingFinalResponse(leadSuccess)}\r\n />\r\n
,\r\n container\r\n );\r\n case 6:\r\n activeStep = 6\r\n return ReactDOM.createPortal(\r\n \r\n
,\r\n container\r\n );\r\n case 7:\r\n return ReactDOM.createPortal(\r\n \r\n
,\r\n container\r\n );\r\n default:\r\n //do nothing\r\n }\r\n }\r\n}\r\n","import React from \"react\";\r\n\r\nconst Svgs = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Svgs;\r\n","import React from \"react\";\r\nimport OnlineBooking from \"./components/OnlineBooking\";\r\nimport Svg from \"./components/svgs/svg\";\r\nimport rg4js from 'raygun4js';\r\nimport { useEffect } from \"react\";\r\n\r\nrg4js('apiKey', 'WTaSVCys1E9G1J1JetTctg');\r\nrg4js('enableCrashReporting', true);\r\n\r\nconst onlineBookingPage = document.getElementById(\"online-booking\");\r\n\r\nconst App = (props) => {\r\n // useEffect(() => {\r\n // const unloadCallback = (event) => {\r\n // event.preventDefault();\r\n // event.returnValue = \"\";\r\n // return \"\";\r\n // };\r\n\r\n // window.addEventListener(\"beforeunload\", unloadCallback);\r\n // return () => window.removeEventListener(\"beforeunload\", unloadCallback);\r\n // }, []);\r\n\r\n return (\r\n \r\n \r\n {onlineBookingPage &&
\r\n );\r\n};\r\n\r\nexport default App;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport 'react-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\nimport App from \"./App\";\r\n\r\nReactDOM.render(\r\n