\n {isLoading &&
\n \n )\n}\n\nButtonSpinner.propTypes = {\n title: PropTypes.any,\n color: PropTypes.string\n}\n\nexport default ButtonSpinner;\n","import React, { useState } from 'react';\nimport { cdnDomain } from '../../utilities/config';\n\nconst NortonImage = `${cdnDomain}/static/images/norton-icon.png`;\nconst typingCompleteInterval = 2000;\n\nexport default (props) => {\n const {\n value,\n placeholder,\n errorMessage,\n isValid,\n onBlur,\n name,\n hideRecording,\n type,\n readOnly,\n note,\n idName,\n maxLength,\n showLengthCounter,\n emoji,\n label,\n isVerified,\n disabled,\n isMultiLine = false,\n inputMode,\n allowAutoComplete = false,\n customEventName,\n sensitiveData,\n } = props;\n\n const [isTyping, setIsTyping] = useState(false);\n const [listenForErrors, setListenForErrors] = useState(false);\n const [typingTimeout, setTypingTimeout] = useState(0);\n\n const onChange = (e) => {\n setIsTyping(true);\n if(type === 'number') {\n const { value } = e.currentTarget;\n const numberValue = Number(value);\n if (isNaN(numberValue)) {\n return;\n }\n }\n\n props.onChange && props.onChange(e);\n \n if (typingTimeout) {\n clearTimeout(typingTimeout);\n }\n\n setTypingTimeout(setTimeout(() => {\n setIsTyping(false);\n props.onEndTyping && props.onEndTyping(e);\n }, typingCompleteInterval));\n };\n\n const commonProps = {\n className: `\n ${isMultiLine ? 'multi-line-input text-input--is-rounded' : 'text-input text-input--is-rounded'} \n ${emoji ? 'text-input-with--emoji' : ''}\n ${sensitiveData ? 'sensitive-data-field' : ''}\n ${disabled || readOnly ? 'text-input--is-disabled' : ''}\n `,\n name,\n value: value ?? '',\n onBlur: () => {\n onBlur && onBlur();\n setListenForErrors(true);\n },\n placeholder,\n id: idName ?? '',\n maxLength,\n onChange: isMultiLine ? undefined : (event) => {\n onChange(event);\n customEventName && smartlook('track', customEventName, {})\n },\n onInput: isMultiLine ? (event) => {\n onChange(event);\n } : undefined,\n disabled,\n readOnly,\n };\n\n if (note) {\n return (\n \n
\n );\n }\n\n const renderInputField = () => {\n if (isMultiLine) {\n return ;\n }\n return ;\n };\n\n return (\n <>\n \n \n {emoji && 
}\n\n {/* Conditionally render the input or textarea */}\n {renderInputField()}\n {maxLength && showLengthCounter ?\n
\n \n {listenForErrors && \n {label && 
: ''}\n
\n {label}
}\n {isVerified ?\n \n {value && value.length || 0}\n / 2000\n
\n\n : \n }\n\n{isValid ? '' : errorMessage}
}\n \n );\n}\n","import React from 'react'\nimport Popup from 'reactjs-popup'\nimport VehicleMakeModelImage from '../VehicleMakeModelImage'\nimport Button from '../Button';\n\nconst ConfirmationPopup = (props) => {\n\n const {\n image,\n title,\n content,\n buttons,\n visible\n } = props\n\n return (\n\n
\n \n
\n \n {title}
\n\n {content}\n
\n \n {buttons && buttons.map((button, index) => {\n return
\n \n \n {labelBeforeCheckInput && label && \n \n }\n \n
\n )\n}\n","import React, { Component } from 'react'\nimport Validators from '../../utilities/validators'\nimport ClickableIcon from '../ClickableIcon'\n\nclass NumberInput extends Component {\n constructor(props) {\n super(props)\n this.state = {\n listenForErrors: false\n }\n }\n\n render = () => {\n const {\n label,\n value,\n validate,\n onChange,\n placeholder,\n errorMessage,\n isValid,\n isParentModal,\n showButton,\n buttonLabel,\n onButtonClick,\n minimumValue = '0',\n idName,\n readOnly,\n onInfoButtonClick,\n isVerifyAccount,\n onBlur,\n maximumValue = '9999999'\n } = this.props\n const { listenForErrors } = this.state\n\n const handleOnChange = (event) => {\n let { value, min, max } = event.target;\n\n if (parseFloat(min) > parseFloat(value) || parseFloat(max) < parseFloat(value)) return\n\n !Validators.containsSpecialCharacter(value, '-') &&\n onChange(event) && Validators.isValueInRange(value, min, max)\n }\n\n return (\n <>\n \n
\n {listenForErrors && \n {label}\n {onInfoButtonClick &&
\n {\n isParentModal && this.setState({ listenForErrors: true })\n handleOnChange(event)\n }}\n onBlur={() => {\n !isParentModal && this.setState({ listenForErrors: true })\n }}\n onKeyDown={event => {\n if (event.key === '-') {\n event.preventDefault();\n }\n }}\n placeholder={placeholder}\n id={idName ?? ''}\n />\n
\n {isValid ? '' : errorMessage}
}\n \n )\n }\n}\n\nexport default NumberInput","import React from 'react'\n\nexport default (props) => {\n const {\n invertWhenValid,\n value,\n onChange,\n placeholder,\n errorMessage,\n name,\n onBlur,\n isValid,\n idName,\n disabled,\n label,\n allowAutoComplete = false,\n } = props;\n\n return (\n <>\n\n {label && \n
\n \n {(!isValid && !disabled) && {label}
}\n\n {\n onBlur && onBlur()\n }}\n placeholder={placeholder}\n id={idName ?? ''}\n disabled={disabled}\n autocomplete={allowAutoComplete ? 'on' : 'off'}\n />\n \n
\n {errorMessage}
}\n \n )\n}\n","import React, { Component } from 'react'\nimport { Redirect } from 'react-router-dom'\nimport queryString from 'query-string'\nimport Navigation from '../Navigation'\nimport Footer from '../Footer'\nimport Button from '../Button'\nimport ProgressStepIndicator from '../ProgressStepIndicator'\nimport TextInput from '../forms/TextInput'\nimport { MotorService } from '../../services/motorService'\nimport { DealershipService } from '../../services/dealershipService'\nimport { Helpers } from '../../utilities/helpers'\nimport Validators from '../../utilities/validators'\nimport Alert from '../forms/Alert'\nimport ActivityIndicator from '../forms/ActivityIndicator'\nimport NumberplateInput from '../forms/NumberplateInput'\nimport CheckboxInput from '../forms/CheckboxInput'\nimport IntercomManager from '../../utilities/intercomManager'\nimport { tag } from '../../services/tagService'\nimport PopupView from '../forms/PopupView'\nimport { validationMessages, BLOCKED_REFFERER_URLS } from '../../utilities/enums'\nimport ChatBot from '../ChatBot'\nimport pineappleLogo from 'images/Pineapple_icon.png'\nimport RadioButton from '../RadioButton'\nimport NumberInput from '../forms/NumberInput'\nimport { AnalyticsManager } from '../../utilities/analyticsManager'\nimport posthog from 'posthog-js'\nimport { WillHelper } from '../../utilities/WillHelper'\nimport WillModal from '../WillModal'\nclass MotorGetStartedPage extends Component {\n constructor(props) {\n super(props)\n\n this.chatBotRef = React.createRef(null)\n this.state = {\n progressTotal: 0,\n progressCurrentPage: 0,\n validFirstName: false,\n validLastName: false,\n canSubmitForm: false,\n redirect: false,\n redirectToVehicleDetails: false,\n isRetrievingUser: false,\n hasNoNumberPlate: false,\n wantsFreePineappleWill: false,\n showWantsFreePineappleWillModal: false,\n displayDealershipCodeInput: false,\n firstName: '',\n lastName: '',\n email: '',\n contactNumber: '',\n numberPlate: '',\n showThirdPartyInfoPopup: false,\n showCreditChecksPopup: false,\n isQueryStringId: false,\n showValidateAccountPopup: false,\n verifyAccountUserId: null,\n verifyContactNumber: null,\n isSendingOtp : false,\n isConfirmingOtp: false,\n isVerifySMS: false,\n isVerifyEmail: false,\n isOtpSent: false,\n otp: null,\n experimentName: '',\n variantName: '',\n userAcceptedFreeWill: '',\n canSubmitWillLead: false,\n salesAgent: null,\n previousUrl: '',\n userId: '',\n verifyEmailAddress: '',\n isReferredClient: false,\n }\n }\n\n componentDidMount = async () => {\n // page title\n document.title = 'Motor Get Started'\n\n // capture page view for PostHog\n AnalyticsManager.capturePageView()\n\n // get the agent from storage\n const salesAgent = await Helpers.getInStorage('sales_agent', true)\n if (salesAgent) {\n // reset posthog identity\n AnalyticsManager.resetUserIdentity()\n this.setState({\n salesAgent: JSON.parse(salesAgent),\n })\n }\n // check if this is a user coming from the quick start flow\n const quickStartEmailAddress = await Helpers.getInStorage('quickStartEmailAddress')\n if (quickStartEmailAddress) {\n this.setEmail(quickStartEmailAddress.trim().toLowerCase())\n await Helpers.removeFromStorage('quickStartEmailAddress')\n }\n\n const getParams = queryString.parse(this.props.location.search)\n const { ucid, duuid, uuid, gclid, u: userId, v: verifyEmailAddress } = getParams\n\n if (userId && verifyEmailAddress) {\n this.setState({ userId, verifyEmailAddress }, () => {\n this.verifyEmail()\n })\n }\n this.renderWillsProductOptInVariant(!!duuid, !!salesAgent)\n\n if (uuid) {\n posthog.identify(uuid)\n } else {\n posthog.reset()\n }\n\n const previousUrl = await Helpers.getInStorage('referrerUrl');\n Helpers.removeFromStorage('referrerUrl')\n\n // if userId is present in query string, send it over\n this.setState({ \n isQueryStringId: uuid || duuid,\n userId: uuid, \n dealershipCode: duuid, \n ucid,\n previousUrl\n }, \n async () => {\n const promises = [\n duuid && this.retrieveDealership(),\n ucid && Helpers.setInStorage('ucid', `${ucid}`, true),\n gclid && Helpers.setInStorage('gclid', `${gclid}`, true),\n ];\n await Promise.all(promises.filter(Boolean));\n uuid && this.retrieveUser();\n })\n\n // if pid is Email_Jag_Method set externalLeadSource to jag_method\n if (getParams.pid && getParams.pid === 'Email_Jag_Method') {\n await Helpers.setInStorage('externalLeadSource', 'jag_method')\n }\n\n await Helpers.removeFromStorage('vehicle-image')\n\n this.chatBotRef.current.speak('GetStarted_General_Greet')\n }\n\n componentDidUpdate = (prevProps, prevState) => {\n // update form validness\n if (\n prevState.firstName !== this.state.firstName\n || prevState.lastName !== this.state.lastName\n || prevState.email !== this.state.email\n || prevState.contactNumber !== this.state.contactNumber\n || prevState.numberPlate !== this.state.numberPlate\n || prevState.hasNoNumberPlate !== this.state.hasNoNumberPlate\n ) {\n this.setState({\n canSubmitForm:\n Validators.isName(this.state.firstName)\n && Validators.isName(this.state.lastName)\n && Validators.isEmail(this.state.email)\n && Validators.isCellNo(this.state.contactNumber)\n && (\n !this.state.hasNoNumberPlate && Validators.isNumberPlate(this.state.numberPlate)\n || this.state.hasNoNumberPlate\n )\n }, () => {\n this.state.canSubmitForm && this.chatBotRef.current.speak('startPromt')\n })\n\n this.setState({\n canSubmitWillLead: false // hide will leads temporarily\n // Validators.isName(this.state.firstName)\n // && Validators.isName(this.state.lastName)\n // && Validators.isEmail(this.state.email)\n // && Validators.isCellNo(this.state.contactNumber)\n })\n this.getFormProgress()\n }\n }\n getWillLeadDetails = () => {\n const { firstName, lastName, email, contactNumber } = this.state\n\n return { first_name: firstName,\n last_name: lastName,\n email: email,\n contact_number: contactNumber\n }\n\n }\n\n handleWillModalActions = (willAcceptance) => {\n if(willAcceptance){\n\n WillHelper.processWillLead({\n will_send_lead: willAcceptance ,\n leadDetails: this.getWillLeadDetails()\n })\n this.setState({userAcceptedFreeWill: willAcceptance})\n }\n\n this.setState({ showWantsFreePineappleWillModal: false}, () => {\n this.retrieveUser()\n })\n \n }\n\n getFormProgress = () => {\n const total = 5 // number of things that constitute 100%\n let completed = 0 // start at 0\n\n if (Validators.isName(this.state.firstName)) { completed += 1 } // first name\n if (Validators.isName(this.state.lastName)) { completed += 1 } // last name\n if (Validators.isEmail(this.state.email)) { completed += 1 } // email\n if (Validators.isCellNo(this.state.contactNumber)) { completed += 1 } // cell no\n if ( // number plate\n !this.state.hasNoNumberPlate && Validators.isNumberPlate(this.state.numberPlate)\n || this.state.hasNoNumberPlate\n ) { completed += 1 }\n\n const progressCurrentPage = (completed / total * 100)\n const progressTotal = progressCurrentPage / 3 // divide by 3 because this is section 1 of 3\n this.setState({ progressTotal, progressCurrentPage })\n }\n\n validateFirstName = (onBlur=false) => {\n const { firstName } = this.state\n\n const valid = Validators.isName(firstName)\n\n this.setState({\n validFirstName: valid,\n firstNameErrorText: valid\n ? undefined\n : onBlur ? validationMessages.firstName: undefined,\n })\n }\n\n isReferrerBlocked = (referrer_website) => {\n if (!referrer_website) return true\n\n const isUrlBlocked = BLOCKED_REFFERER_URLS.includes(referrer_website)\n const isUrlFromPineapple = referrer_website.includes('pineapple')\n const isUrlFromOneLink = referrer_website.includes('onelink')\n\n return isUrlBlocked || isUrlFromPineapple || isUrlFromOneLink\n }\n\n validateLastName = (onBlur=false) => {\n const { lastName } = this.state\n\n const valid = Validators.isName(lastName)\n\n this.setState({\n validLastName: valid,\n lastNameErrorText: valid\n ? undefined\n : onBlur ? validationMessages.lastName : undefined,\n })\n }\n\n validateEmail = (onBlur=false) => {\n const { email } = this.state\n const valid = Validators.isEmail(email)\n\n this.setState({\n validEmail: valid,\n emailErrorText: valid\n ? undefined\n : onBlur ? validationMessages.email : undefined,\n })\n }\n\n validateContactNumber = (onBlur=false) => {\n const { contactNumber } = this.state\n const valid = Validators.isCellNo(contactNumber)\n\n this.setState({\n validContactNumber: valid,\n contactNumberErrorText: valid\n ? undefined\n : onBlur ? validationMessages.contactNumber : undefined,\n })\n }\n\n validateNumberPlate = (onBlur=false) => {\n const { numberPlate, hasNoNumberPlate } = this.state\n if (!hasNoNumberPlate) {\n const valid = Validators.isNumberPlate(numberPlate)\n\n this.setState({\n validNumberPlate: valid,\n numberPlateErrorText: valid\n ? undefined\n : onBlur ? validationMessages.numberPlate : undefined,\n })\n }\n }\n\n setFirstName = firstName => this.setState({ firstName }, this.validateFirstName)\n setLastName = lastName => this.setState({ lastName }, this.validateLastName)\n setEmail = email => this.setState({ email }, this.validateEmail)\n setContactNumber = contactNumber => this.setState({ contactNumber }, this.validateContactNumber)\n setRegistrationNumber = numberPlate => this.setState({ numberPlate }, this.validateNumberPlate)\n\n retrieveDealership = async () => {\n const { dealershipCode } = this.state\n if (!dealershipCode) return\n // retrieve the dealership\n const response = await DealershipService.retrieveDealership(dealershipCode.trim())\n if (response && response.success && response.data) {\n const { dealership } = response.data\n // save the dealership in state\n this.setState({ dealership, dealershipCode: dealership.uuid, displayDealershipCodeInput: true })\n }\n }\n\n retrieveUser = async () => {\n this.setState({ isRetrievingUser: true })\n // check if the current user is a sales agent\n let retrievingUserTimer\n const externalLeadSource = await Helpers.getInStorage('externalLeadSource')\n const { \n firstName,\n lastName,\n email,\n contactNumber,\n hippoPayload,\n userId,\n numberPlate,\n hasNoNumberPlate,\n dealership,\n isQueryStringId,\n userAcceptedFreeWill,\n salesAgent,\n ucid,\n isReferredClient\n } = this.state\n // referrerWebsite is saved via cross-browser messaging from www.pineapple.co.za to App.js in this project\n // else we check if the current page has a referrer\n let referrerWebsite = await Helpers.getInStorage('referrerWebsite', true)\n if (!referrerWebsite){\n referrerWebsite = document.referrer\n }\n // get the UCID from storage, this is also sent from www.pineapple.co.za to App.js\n let referrerUcid = await Helpers.getInStorage('ucid', true)\n\n // verify if we can send the ucid and/ or the referrer website\n const canSendUcid = !salesAgent\n const canSendReferrerWebsite = referrerWebsite && referrerWebsite.trim() !== '' && !salesAgent && !this.isReferrerBlocked(referrerWebsite)\n const isConnexReferral = referrerWebsite === 'https://pineappletech-cxm.cnx1.cloud/'\n\n // handle fallback UCID's in case a user comes directly to this page from another site\n if (!referrerUcid) {\n if (!referrerWebsite) {\n referrerUcid = 'PINCARDIR0001'\n } else if (referrerWebsite === 'https://www.google.com/' || referrerWebsite === 'https://www.google.co.za/') {\n referrerUcid = 'PINCARGORG0001';\n } else if (referrerWebsite === 'https://www.bing.com/') {\n referrerUcid = 'PINCARBORG0001';\n } else if (referrerWebsite && canSendReferrerWebsite) {\n referrerUcid = 'PINCARREF0001'\n }\n }\n\n const params = {\n user_id: userId,\n first_name: firstName,\n last_name: lastName,\n email,\n contact_number: contactNumber,\n hippo_payload: hippoPayload,\n dealership_code: dealership && dealership.uuid ? dealership.uuid : '',\n isWebUser: true,\n externalLeadSource,\n ...(salesAgent || isConnexReferral ? {} : Helpers.getUserMetaData(this.state.previousUrl)),\n ...(canSendUcid && referrerUcid ? \n { referrer: referrerUcid } : {}),\n ...(canSendReferrerWebsite && referrerWebsite ?\n { referrer_website: referrerWebsite } : {}),\n is_referred_client: isReferredClient,\n }\n\n // time out after 30 secs if no response\n if(isQueryStringId) {\n retrievingUserTimer = setTimeout(() => {\n this.setState({ isRetrievingUser: false })\n return Alert.alert('Could not retrieve your details',\n 'An error occurred while processing your request. Please try again later.'\n )\n }, 30000)\n }\n\n // clear the referrer website from storage\n await Helpers.removeFromStorage('referrerWebsite', true)\n const response = await MotorService.retrieveUser(params)\n clearTimeout(retrievingUserTimer)\n this.setState({ isRetrievingUser: false })\n\n // something went wrong\n if (!response?.success) { \n // remove userId to allow user with non-existent\n // uuid to continue motor flow normally\n this.setState({ userId: null })\n\n if (response?.error?.isVerifyAccount) {\n this.setState({\n verifyAccountUserId: response.error.userId,\n verifyContactNumber: response.error.verifyContactNumber \n })\n return Alert.alert('Could not retrieve your details', response.error.message,\n [\n {\n text: 'Ok',\n },\n {\n text: 'Verify',\n onClick: async () => {\n this.setState({ showValidateAccountPopup: true })\n },\n },\n ])\n }\n\n return Alert.alert('Could not retrieve your details', response?.error?.message || 'An error occurred while processing your request. Please try again later.')\n } \n\n // all went well - clear storage and start over\n Helpers.clearStorage()\n\n await Helpers.setAuthUser(response.data)\n\n if (userAcceptedFreeWill !== ''){\n await WillHelper.processWillLead({\n user_id: response.data.id,\n will_send_lead: userAcceptedFreeWill,\n leadDetails: this.getWillLeadDetails()\n })\n }\n\n await Helpers.setInStorage('userAlreadyAcceptedFreeWill', JSON.stringify(userAcceptedFreeWill === '' ? false : userAcceptedFreeWill))\n\n if (dealership) await Helpers.setInStorage('dealership', JSON.stringify(dealership))\n\n // if there is an external_lead_source carry that through to the rest of the motor flow\n if (externalLeadSource) {\n await Helpers.setInStorage('externalLeadSource', externalLeadSource)\n }\n\n // add user_id to smartlook\n smartlook('identify', response.data?.id.toString())\n\n // identify postHog User\n AnalyticsManager.identifyUser(response.data?.id.toString(), {\n email: email,\n name: `${firstName} ${lastName}`\n }\n )\n\n // register static event details\n AnalyticsManager.registerStaticEventDetails({\n platform: 'web',\n entity: salesAgent ? 'agent' : 'user',\n ...(salesAgent ? {\n entity_name: `${salesAgent.first_name} ${salesAgent.last_name}`,\n entity_email: salesAgent.email,\n } : {\n entity_name: `${firstName} ${lastName}`,\n entity_email: email,\n })\n })\n\n // if has number plate, set it\n if (!hasNoNumberPlate) {\n await Helpers.setInStorage('numberPlate', Helpers.replaceAllInString(numberPlate, ' ', ''))\n }\n\n await Helpers.setInStorage('hasNoNumberPlate', hasNoNumberPlate)\n \n // initiate Intercom\n IntercomManager.init()\n tag.sendWebEvent({\n first_name: firstName,\n last_name: lastName,\n email,\n contact_number: contactNumber,\n event_name: 'new_user_registration'\n })\n\n // Prevent redirect to dashboard if user has no contact_number\n if (response && response.data && !response.data.contact_number) {\n const {\n first_name,\n last_name,\n email,\n } = response.data\n\n if (first_name && first_name.trim() !== '') {\n this.setFirstName(first_name)\n }\n\n if (last_name && last_name.trim() !== '') {\n this.setLastName(last_name)\n }\n \n if (email && Validators.isEmail(email)) {\n this.setEmail(email)\n }\n } else {\n try {\n const {\n first_name,\n last_name,\n email,\n contact_number,\n id\n } = response.data\n\n await Helpers.addDataLayer({ \n event: 'get-started',\n uuid: id?.toString(),\n ucid: ucid,\n clientEmail: email,\n clientPhone: contact_number,\n clientFirstName: first_name,\n clientLastName: last_name,\n })\n } catch (error) {\n // console.error('Error adding data layer', error)\n }\n\n await this.checkForExistingVehicles()\n }\n }\n\n checkForExistingVehicles = async () => {\n const { experimentName, variantName, salesAgent } = this.state\n const numberPlate = Helpers.replaceAllInString(this.state.numberPlate, ' ', '')\n\n // get all user's saved vehicle\n this.setState({ isRetrievingUser: true })\n const vehiclesResponse = await MotorService.getVehicles({ insured: false })\n this.setState({ isRetrievingUser: false })\n\n const vehicles = vehiclesResponse.success ? vehiclesResponse.data : null\n\n let existingVehicle\n\n if (vehicles && vehicles.length) {\n await Helpers.setInStorage('vehicles', JSON.stringify(vehicles))\n\n vehicles.some((vehicle) => {\n if (vehicle.registration.toUpperCase() === numberPlate.toUpperCase()) {\n existingVehicle = vehicle\n return true\n }\n })\n }\n\n // Capture event for A/B testing\n AnalyticsManager.captureEvent('user_signed_up')\n // Capture the event in the database for A/B testing\n if (experimentName && variantName) {\n // save the experimentName and variantName in local storage\n await Helpers.setInStorage('experimentName', experimentName)\n await Helpers.setInStorage('variantName', variantName)\n await AnalyticsManager.trackExperiment(experimentName, variantName, salesAgent, existingVehicle);\n }\n\n // if found, give user option to use it\n if (existingVehicle) {\n const modelTruncateIndex = existingVehicle.model.indexOf('[')\n const model = existingVehicle.model.substring(0, modelTruncateIndex)\n\n return Alert.alert(\n 'You\\'ve added this car before - we can save you some time! ⏱',\n `We have a ${existingVehicle.year} ${existingVehicle.make} ${model} on record for this registration. You can save time on filling this form out by using it now.`,\n [\n {\n text: 'Insure another vehicle',\n style: 'cancel',\n onClick: () => this.setState({ numberPlate: '' })\n },\n {\n text: 'Use it',\n onClick: () => this.useVehicle(existingVehicle)\n },\n ]\n )\n } else if (vehicles && vehicles.length) {\n return this.setState({ redirect: true })\n } else {\n // no existing vehicle - go to next page\n return this.setState({ redirectToVehicleDetails: true })\n }\n }\n\n useVehicle = async (vehicle) => {\n await Helpers.setInStorage('vehicle', JSON.stringify(vehicle))\n this.setState({ redirect: true })\n }\n\n renderThirdPartyInfoPopup = () => {\n const {\n showThirdPartyInfoPopup\n } = this.state\n\n return (\n\n
\n )\n }}\n />\n )\n }\n\n renderCreditChecksPopup = () => {\n const {\n showCreditChecksPopup\n } = this.state\n\n return (\n \n This application will serve as the basis of an insurance contract. The information you supply will determine your premium, its acceptance and terms and conditions of your application.\n
\n\n We need to obtain your personal information to calculate a premium and to form the basis of any policy that may be taken out, and to provide our products and services to you. This may require sharing your information with service providers, for example credit bureaus to perform ITC checks, laws enforcement, fraud prevention, and other regulatory bodies.\n
\n\n By clicking “Start” you consent to providing and sharing your personal information.\n
\n\n
\n )\n }}\n />\n )\n }\n\n sendOTP = async () => {\n const {isVerifySMS, verifyAccountUserId} = this.state\n this.setState({isSendingOtp: true})\n if (isVerifySMS) {\n const sms_type = 'verify_contact_number_web'\n const sendSMSResponse = await MotorService.sendSMS(verifyAccountUserId, sms_type)\n if(!sendSMSResponse.success) {\n this.setState({isOtpSent: false, showValidateAccountPopup:false, isSendingOtp: false})\n Alert.alert('Something went wrong sending OTP', 'An error occured while processing your request. Please try again later')\n } else {\n this.setState({ isOtpSent: true, isSendingOtp: false })\n }\n }\n }\n\n verifyEmail = async () => {\n const { userId, verifyEmailAddress } = this.state\n const response = await MotorService.verifyEmail(userId, verifyEmailAddress)\n if (response && response?.success) {\n Alert.alert('Email verified', 'Thank you. Your email has been successfully verified')\n } else {\n Alert.alert('Email verification failed', ' An error occured while processing your request. Please try again later')\n }\n }\n\n confirmOTP = async() => {\n const { verifyContactNumber, verifyAccountUserId, otp, email } = this.state\n const verifyCodeParams = {\n code: otp,\n contact_number: verifyContactNumber,\n user_id: verifyAccountUserId\n }\n\n this.setState({isConfirmingOtp: true})\n const verifyResponse = await MotorService.verifySMS(verifyCodeParams)\n this.setState({isConfirmingOtp: false})\n if (verifyResponse.success) {\n this.setState({showValidateAccountPopup: false})\n //update and redirect\n const updateUserParams = {\n email,\n verifyContactNumber,\n }\n const updateUserResponse = await MotorService.updateUserOnVerifyAccount(verifyAccountUserId, updateUserParams)\n if (updateUserResponse.success) {\n Alert.alert('Success!', 'Thank you, account verified successfully')\n this.setState({email, contactNumber: verifyContactNumber })\n this.retrieveUser()\n } else {\n Alert.alert('Error', 'something went wrong updating account details')\n }\n } else {\n Alert.alert('Error', 'Something went wrong verifying account')\n }\n }\n\n renderVerifyAccountPopup = () => {\n const {\n isOtpSent,\n otp,\n isSendingOtp,\n isConfirmingOtp,\n verifyContactNumber,\n showValidateAccountPopup,\n isVerifySMS\n } = this.state\n\n const phoneCode = verifyContactNumber ? verifyContactNumber.substring(0, 3) : null\n const phoneLast = verifyContactNumber ? verifyContactNumber.substring(6, 10) : null\n\n return (\n \n This application will serve as the basis of an insurance contract. The information you supply will determine your premium, its acceptance and terms and conditions of your application.\n
\n\n We need to obtain your personal information to calculate a premium and to form the basis of any policy that may be taken out, and to provide our products and services to you. This may require sharing your information with service providers, for example credit bureaus to perform ITC checks, laws enforcement, fraud prevention, and other regulatory bodies.\n
\n\n By clicking “Start” you consent to providing and sharing your personal information.\n
\n\n
\n )\n }\n }\n />\n )\n }\n\n renderWillsProductOptInVariant = (isDealership, isAgent) => {\n posthog.onFeatureFlags(async() => {\n // render the appropriate variant\n if (isDealership || isAgent) {\n // force the checkbox variant if an agent is logged in or dealership link is used\n await AnalyticsManager.forceExperimentVariant('wills-opt-in', 'wills-checkbox-opt-in')\n }\n let experimentVariant = await AnalyticsManager.getExperimentVariant('wills-opt-in')\n switch (experimentVariant) {\n case 'wills-checkbox-opt-in':\n this.setState({\n showWillsCheckbox: true,\n experimentName: 'wills-opt-in',\n variantName: 'wills-checkbox-opt-in'\n })\n break\n case 'wills-popup-opt-in':\n this.setState({\n showWillsPopup: true,\n experimentName: 'wills-opt-in',\n variantName: 'wills-popup-opt-in'\n })\n break\n case 'control':\n this.setState({\n hideWillsProduct: true,\n experimentName: 'wills-opt-in',\n variantName: 'control'\n })\n break\n default:\n // if experimentVariant is undefined, default to the control\n this.setState({\n hideWillsProduct: true,\n experimentName: 'wills-opt-in',\n variantName: 'control'\n })\n break\n }\n })\n }\n\n render = () => {\n if (this.state.redirect) {\n return \n
\n \n Verify Account\n
\n\n Before you can continue we need to verify your account.\n
\n\n We will send a verification code via SMS.\n
\n\n {\n isSendingOtp ? (\n this.setState({ isVerifySMS: true }, this.sendOTP)}\n />\n )\n }\n
\n {\n isOtpSent ? (\n \n
\n ) : null\n }\n \n
\n We have sent a verification code to {`${phoneCode} *** ${phoneLast}`}
\nPlease enter the code below.
\n\n { this.setState({ otp: e.target.value }) }}\n />\n
\n \n {\n isConfirmingOtp ? (\n
\n \n \n {this.renderThirdPartyInfoPopup()}\n {this.renderCreditChecksPopup()}\n {this.renderVerifyAccountPopup()}\n
\n )\n }\n}\n\nconst styles = {\n cell: {\n paddingLeft: '0!important',\n paddingRight: '0!important',\n },\n content: {\n position: 'relative',\n display: 'flex',\n flex: 1\n },\n motorGetStartedContentHeading: {\n fontWeight: 600,\n lineHeight: '68px',\n letterSpacing: '2px',\n },\n motorGetStartedContentSubHeading: {\n fontWeight: 600,\n marginBottom: '20px',\n fontSize: '18px',\n },\n motorGetStartedContentText: {\n fontWeight: 500,\n fontSize: '16px',\n },\n getStartedActivityIndicatorContainer:{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '10px',\n },\n backgroundPages: {\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundPosition: 'bottom left',\n backgroundAttachment: 'fixed',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n contentPageLeftRight: {\n flexDirection: 'column',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n verifyAccountFormInputContainer: {\n textAlign: 'center',\n alignContent: 'center',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n paddingBottom: '50px',\n },\n verifyAccountHeading: {\n fontWeight: 600,\n fontSize: '25px',\n marginTop: '5px',\n },\n verifyAccountSubHeading: {\n fontWeight: 600,\n fontSize: '17px',\n marginTop: '10px',\n marginBottom: '50px',\n width: '50%',\n },\n verifyAccountConfirmButtonContainer: {\n width: '100%',\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: '25px',\n },\n selectRadioButtonText: {\n color: '#000',\n fontSize: '13px',\n fontWeight: 300,\n marginTop: '10px',\n },\n radioButtonsWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: '20px',\n },\n actionButtonWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 15,\n },\n}\n\nexport default MotorGetStartedPage\n","import React, { Component } from 'react'\nimport { Spinner } from 'react-activity'\nimport 'react-activity/dist/react-activity.css'\n\nexport default class ActivityIndicator extends Component {\n render = () => \n
\n \n \n
\n \n
\n Hi there!
\n\n Are you ready to roll?\n
\n\n First... We need a few details to get you going.\n
The more you give us, the better your price.\n
\n
\n \n
\n \n
\n
\n \n Let's get started\n
\n\n
\n
\n ) : (\n <>\n \n
\n \n this.setFirstName(event.target.value)}\n onBlur={() => {\n this.validateFirstName(true)\n validFirstName && this.chatBotRef.current.speak('GetStarted_FirstName_Greet', firstName)\n this.setState({ editable: false })\n }}\n isValid={validFirstName}\n value={firstName}\n idName={'motor-get-started-first-name'}\n errorMessage={firstNameErrorText}\n onFocus={() => {\n this.setState({ editable: true }) // Allow editing when the input is focused\n }}\n customEventName={'GetStarted_FirstName'}\n />\n
\n \n this.setLastName(event.target.value)}\n onBlur={() => {\n this.validateLastName(true)\n this.setState({ editable: false })\n }}\n isValid={validLastName}\n value={lastName}\n idName={'motor-get-started-last-name'}\n errorMessage={lastNameErrorText}\n customEventName={'GetStarted_LastName'}\n onFocus={() => {\n this.setState({ editable: true }) // Allow editing when the input is focused\n }}\n />\n
\n \n
\n \n this.setEmail(event.target.value.trim())}\n onBlur={()=>this.validateEmail(true)}\n isValid={validEmail}\n value={email}\n idName={'motor-get-started-email'}\n errorMessage={emailErrorText}\n customEventName={'GetStarted_Email'}\n />\n
\n \n
\n {\n displayDealershipCodeInput &&\n \n this.setContactNumber(event.target.value)}\n type={'number'}\n onBlur={()=>this.validateContactNumber(true)}\n isValid={validContactNumber}\n value={contactNumber ? contactNumber.trim() : ''}\n idName={'motor-get-started-contact-number'}\n errorMessage={contactNumberErrorText}\n customEventName={'GetStarted_ContactNumber'}\n />\n
\n \n
\n }\n \n
\n \n \n
\n \n
\n {showWillsCheckbox && canSubmitWillLead && \n \n this.setRegistrationNumber(event.target.value)\n }\n onBlur={()=>this.validateNumberPlate(true)}\n isValid={hasNoNumberPlate || validNumberPlate}\n value={hasNoNumberPlate ? '' : this.state.numberPlate.toUpperCase()}\n idName={'motor-get-started-number-plate'}\n errorMessage={numberPlateErrorText}\n disabled={!!hasNoNumberPlate}\n />\n
\n \n \n
}\n\n {salesAgent && \n \n
}\n\n \n {\n // temporary fix to prevent the will modal from showing to improve lead quality\n //this.state.showWillsPopup ?\n //this.setState({showWantsFreePineappleWillModal: !this.state.showWantsFreePineappleWillModal}) : this.retrieveUser()\n this.retrieveUser()\n }}\n idName={'motor-get-started-start-button'}\n />\n
\n )}\n \n
\n \n By clicking 'Start' you agree to Ts & Cs, POPI requirements, this.setState({ showThirdPartyInfoPopup: true })} target=\"_blank\">3rd party information sharing and this.setState({ showCreditChecksPopup: true })}>credit checks.\n
\n