{"version":3,"sources":["webpack:///./src/assets/img/photoGuideSVG/VINnumber.png","webpack:///./src/views/pages/Listing.vue?cfce","webpack:///./src/assets/img/photoGuideSVG/VIN.png","webpack:///./src/views/pages/Listing.vue","webpack:///src/views/pages/Listing.vue","webpack:///./src/views/pages/Listing.vue?9b00","webpack:///./src/views/pages/Listing.vue?9851","webpack:///./src/views/pages/Listing.vue?93ab","webpack:///./src/assets/img/photoGuideSVG/ExampleVIN.png"],"names":["module","exports","_c","_self","staticClass","_vm","listingPage","listingPlanID","_s","_v","$t","directives","name","modifiers","attrs","class","preventDefault","callback","vin","expression","overlay","_e","scopedSlots","proxy","require","on","mileageError","keyPressHandler","model","mileage","staticStyle","$event","slot","nextButtonDisabled","ref","staticRenderFns","components","TheListingPlanSelecter","TheBasicDetails","TheListingPhoto","TheListingPrice","TheListingLocation","TheListingReview","TheListingCheckout","data","tagValueParams","lookup","mileageReader","availableVIN","errorMessage","vinLookupError","styleList","odometer","computed","steps","label","options","nextDisabled","vinState","methods","mileageInputHandler","mileageInput","scrollToTop","nextClicked","backClicked","element","goToPage","restart","Object","ListingId","console","VIN","OriginCountryCode","l","modelYear","cleanListingData","storeFalse","storeArray","storeName","beforeunloadHandler","window","e","back","setListener","history","removeListener","kmReading","miReading","beforeRouteEnter","next","vm","beforeDestroy","updated","beforeMount","component"],"mappings":"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,CACAF,mCACAvB,aACAwB,SACAC,mBAKA,CACA,CACAF,yCACAvB,aACAwB,SACAC,kBAGA,CACAF,0CACAvB,aACAwB,SACAC,kBAGA,CACAF,kCACAvB,aACAwB,SACAC,kBAGA,CACAF,qCACAvB,aACAwB,SACAC,kBAGA,CACAF,mCACAvB,aACAwB,SACAC,kBAGA,CACAF,qCACAvB,aACAwB,SACAC,oBAMAC,WACA,2BAEA,SAEA,qBADA,QAIAC,SACAhC,mBACA,2DAEAiC,uBACA,wCACA,cACA,OACAC,MACA,sBAEA,qBAEA,eACA,0CAEAC,cACA,kDACA,uBAEAC,eAEA,OADA,qBACA,8CACA,oCACA,sBAAAnD,yBACA,IAEA,qCACA,oBACA,IAEAoD,eAGA,OAFA,qBACA,oBACA,GAEA/B,wBACA,IACA,uBACA,aACAgC,4BAGA,SACA,WAGAC,YACA,qCAEAC,UACA,eACAC,+CACA,wBACA,qBACA,sCAEA,sBACA,UACA,kCACAC,+CAEA,4CACA,SACAC,iBAGA,iBACA,uBACA,iCACA,6DAEA,uBACA,iCACA,iBACA,IACA,6CACAC,QAEA,yBACA,SACA,oCAIA,kBAEA,GADA,uBACA,cACA,IACA,gBACA,iCACA,+CACAA,MACAC,qDAGA,GADA,sBACA,qBACA,kBACA,iFACA,qBACA,WACA,kBACA,cACA,qCACA,4CACAC,0BACA,yBACA,yBACA,yBACA,yBACA,2BAEA,qBACA,cACAC,eAGA,GACA,uCACA,wCACA,0CACA,GACA,uCACA,wCACA,0CACA,eACA,sBACA,gBACA,4BAGA,gBACA,qCAEA,SACAJ,eACA,oBACA,qBAGA,oBACA,4DAEA,iBAGAK,mBACA,SACA,eACA,iBACA,MACA,cACA,cACA,gBACA,oBACA,sBACA,kBACA,kBACA,4BACA,eACA,eACA,iBACA,sBACA,eACA,uBACA,eACA,iBACA,YACA,eACA,eACA,sBACA,kBACA,mBACA,cACA,kBACA,gBACA,0BACA,yBACA,uBACA,kCACA,uBAEAC,GACA,cACA,cACA,wBACA,qBACA,sBAEAC,4CACAC,cACA,+BAEAF,cACA,6BAEAC,cACA,8BAGAE,sBAKAC,kCAKA,OAJAC,kBACA,IACAA,wEAEA,6BAGAC,OACA,oBACA,oBACA,oDACA,mCACA,mCAGAC,cACAC,0CACAJ,iDAIA,4BAEAK,iBACAL,oDAIAA,4BAEAM,YACA,mBACA,mDAEAC,YACA,mBACA,oDAGAC,wBACAC,MACA,wBACAC,0BACAA,qBAOAC,gBACA,wBACA,uBAEAC,UACA,aACA,yBAIAC,cACA,4CC1sBqgB,I,kCCSjgBC,EAAY,eACd,EACA,EACA3D,GACA,EACA,KACA,WACA,MAIa,aAAA2D,E,kECpBf,W,qBCAA9F,EAAOC,QAAU,IAA0B","file":"assets/js/listing.8e9e048d.js","sourcesContent":["module.exports = __webpack_public_path__ + \"assets/img/VINnumber.c74c8341.png\";","export * from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/sass-loader/dist/cjs.js??ref--14-0!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Listing.vue?vue&type=style&index=1&id=cea9b6d8&prod&scoped=true&lang=scss&\"","module.exports = __webpack_public_path__ + \"assets/img/VIN.9acf7c7a.png\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{staticClass:\"listing mx-auto\"},[_c('div',{staticClass:\"mx-0 bg-white listing-easy mb-3 mb-md-5\"},[_c('div',{staticClass:\"listing-easy-text\"},[_c('h1',{staticClass:\"h5 m-0\"},[_vm._v(_vm._s(_vm.$t('ListingProcess.title')))])]),_c('div',{staticClass:\"listing-easy-option\"},[(_vm.listingPage > 2 && _vm.$store.getters.listingPlanID === 2)?_c('div',{staticClass:\"text-center text-lg-right\"},[_c('span',[_vm._v(_vm._s(_vm.$t('ListingProcess.currentListingOption')))]),_c('span',{staticClass:\"d-inline-block ml-3 py-2 px-4 border rounded\"},[_c('span',{staticClass:\"h5 m-0\"},[_vm._v(\" \"+_vm._s(_vm.$store.getters.listingPlanName))])])]):_c('div',{staticClass:\"text-center text-lg-right\"},[_c('span',[_vm._v(_vm._s(_vm.$t('ListingProcess.currentListingOption')))]),_c('b-button',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.planSelector\",modifiers:{\"planSelector\":true}}],staticClass:\"bg-transparent border-0\",attrs:{\"id\":\"planSelecterbtn\"}},[_c('span',[_c('span',{staticClass:\"m-0 select-option-text\"},[_vm._v(\" \"+_vm._s(_vm.$store.getters.listingPlanName)+\" \")]),_c('b-icon',{staticClass:\"ml-1\",attrs:{\"icon\":\"caret-down-fill\",\"variant\":\"primary\",\"scale\":\"0.5\"}})],1)])],1)])]),_c('b-collapse',{attrs:{\"id\":\"planSelector\"}},[_c('TheListingPlanSelecter')],1),(_vm.lookup)?_c('section',[_c('div',{staticClass:\"vin-lookup\"},[_c('h2',[_vm._v(_vm._s(_vm.$t(\"ListingProcess.VINLookup\")))]),_c('p',{staticClass:\"mt-3 mb-5\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.VINMessage1\"))+\" \"),_c('b-link',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.findVIN\",modifiers:{\"findVIN\":true}}],staticStyle:{\"text-decoration\":\"underline\"}},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.VINMessage2\")))]),_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.VINMessage3\"))+\" \")],1),_c('b-input-group',{staticClass:\"m-auto vin-search\"},[_c('b-form-input',{staticClass:\"left-rounded text-uppercase vin-input\",class:{ 'border-danger': _vm.errorMessage },attrs:{\"type\":\"text\",\"disabled\":_vm.overlay,\"state\":_vm.availableVIN,\"placeholder\":_vm.$t('ListingProcess.enterVinPlaceholder')},on:{\"input\":function($event){return _vm.checkVIN()},\"keydown\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"space\",32,$event.key,[\" \",\"Spacebar\"]))return null;$event.preventDefault();}},model:{value:(_vm.vin),callback:function ($$v) {_vm.vin=$$v},expression:\"vin\"}}),_c('b-input-group-append',[_c('b-overlay',{attrs:{\"show\":_vm.overlay}},[_c('b-btn',{staticClass:\"right-rounded\",attrs:{\"variant\":\"primary\",\"disabled\":_vm.errorMessage},on:{\"click\":function($event){return _vm.vinLookup()}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.Search\"))+\" \")])],1)],1)],1),(_vm.errorMessage)?_c('div',{staticClass:\"mt-3 mx-auto w-75 alert alert-danger alert-icon\"},[_c('span',[_vm._v(_vm._s(_vm.errorMessage))])]):_vm._e(),_c('b-modal',{attrs:{\"id\":\"findVIN\",\"size\":\"lg\",\"hide-footer\":\"\",\"centered\":\"\"},scopedSlots:_vm._u([{key:\"modal-title\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.VehicleIdentification\"))+\" \")]},proxy:true}],null,false,2339389554)},[_c('div',{staticClass:\"p-4\"},[_c('h3',{staticClass:\"h6\"},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.VehicleIdentification\")))]),_c('p',[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.VINMessage4\"))+\" \")]),_c('h3',{staticClass:\"h6 mt-4\"},[_vm._v(_vm._s(_vm.$t(\"carDetail.label.VINLookupQuestions\")))]),_c('p',[_vm._v(\" \"+_vm._s(_vm.$t(\"carDetail.label.vinExactly17\"))+\" \")]),_c('div',{staticClass:\"row mb-5\"},[_c('div',{staticClass:\"col-12 text-center\"},[_c('img',{staticClass:\"w-100 img-fluid\",attrs:{\"src\":require(\"@/assets/img/photoGuideSVG/ExampleVIN.png\")}})])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col text-center\"},[_c('img',{staticClass:\"w-100 img-fluid\",attrs:{\"src\":require(\"@/assets/img/photoGuideSVG/VIN.png\")}})]),_c('div',{staticClass:\"col text-center\"},[_c('img',{staticClass:\"w-100 img-fluid\",attrs:{\"src\":require(\"@/assets/img/photoGuideSVG/VINnumber.png\")}})])])])])],1),_c('b-button',{staticClass:\"cancel-listing\",attrs:{\"pill\":\"\",\"to\":{ name: 'listingOption' }}},[_c('v-icon',[_vm._v(\"mdi-close\")]),_vm._v(\" \"+_vm._s(_vm.$t(\"global.button.cancel\"))+\" \")],1)],1):(_vm.mileageReader)?_c('section',{staticClass:\"vin-details\"},[_c('div',{staticClass:\"border-bottom\"},[_c('h2',[_vm._v(_vm._s(_vm.$store.getters.vehicleName))]),_c('p',{staticClass:\"mini-font\"},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.VIN\"))+\": \"+_vm._s(_vm.vin))]),_c('b-link',{staticClass:\"change-vehicle\",on:{\"click\":function($event){_vm.lookup = true}}},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.ChangeVehicle\")))])],1),_c('p',{staticClass:\"odometr-reading\"},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.OdometerReading\")))]),(_vm.mileageError)?_c('p',{staticClass:\"text-danger\"},[_vm._v(_vm._s(_vm.$t(\"Validations.ListingProcess.maxMileage\")))]):_vm._e(),_c('b-input-group',{staticClass:\"mx-auto odometr-box\"},[_c('b-form-input',{staticClass:\"left-rounded vin-input\",attrs:{\"type\":\"number\",\"min\":\"0\",\"max\":\"300000\",\"placeholder\":_vm.$t(\"ListingProcess.EnterMileage\")},on:{\"change\":(e) => {_vm.mileageInputHandler(e)},\"keydown\":(e) => _vm.keyPressHandler(e)},model:{value:(_vm.mileage),callback:function ($$v) {_vm.mileage=$$v},expression:\"mileage\"}}),_c('b-input-group-append',[_c('b-dropdown',{staticClass:\"right-rounded border\",staticStyle:{\"max-height\":\"38px\"},attrs:{\"text\":_vm.odometer,\"variant\":\"transparent\"}},[_c('b-dropdown-item',{on:{\"click\":function($event){return _vm.kmReading()}}},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.Kilometers\")))]),_c('b-dropdown-item',{on:{\"click\":function($event){return _vm.miReading()}}},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.Miles\")))])],1)],1)],1),_c('div',{staticClass:\"my-4\"},[_c('b-button',{staticClass:\"getstarted-btn\",attrs:{\"variant\":\"primary\"},on:{\"click\":function($event){_vm.mileageReader = false}}},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.GetStarted\")))])],1)],1):_c('section',[_c('vue-good-wizard',{ref:\"listingWizard\",staticClass:\"listing-wizard\",attrs:{\"steps\":_vm.steps,\"onNext\":_vm.nextClicked,\"onBack\":_vm.backClicked,\"nextStepLabel\":_vm.$t('listing.label.next'),\"previousStepLabel\":_vm.$t('listing.label.back'),\"finalStepLabel\":_vm.$t('listing.label.finish')}},[_c('div',{attrs:{\"slot\":\"page1\"},slot:\"page1\"},[_c('TheBasicDetails',{attrs:{\"restart\":_vm.restart,\"nextButton\":_vm.nextButtonDisabled,\"styleList\":_vm.styleList}})],1),_c('div',{attrs:{\"slot\":\"page3\"},slot:\"page3\"},[_c('TheListingPhoto',{attrs:{\"nextButton\":_vm.nextButtonDisabled,\"toPage\":_vm.goToPage}})],1),_c('div',{attrs:{\"slot\":\"page4\"},slot:\"page4\"},[_c('TheListingPrice',{attrs:{\"nextButton\":_vm.nextButtonDisabled}})],1),_c('div',{attrs:{\"slot\":\"page5\"},slot:\"page5\"},[_c('TheListingLocation',{attrs:{\"nextButton\":_vm.nextButtonDisabled}})],1),_c('div',{attrs:{\"slot\":\"page6\"},slot:\"page6\"},[_c('TheListingReview',{ref:\"reviewPage\",attrs:{\"toPage\":_vm.goToPage,\"nextButton\":_vm.nextButtonDisabled}})],1),_c('div',{attrs:{\"slot\":\"page7\"},slot:\"page7\"},[_c('TheListingCheckout')],1)])],1),_c('b-modal',{attrs:{\"hide-header\":\"\",\"hide-footer\":\"\",\"no-close-on-backdrop\":\"\",\"no-close-on-esc\":\"\",\"centered\":\"\",\"id\":\"notYourVehicle\"}},[_c('div',{staticClass:\"p-4\"},[_c('h4',[_c('b-icon',{staticClass:\"mr-3\",attrs:{\"icon\":\"exclamation-triangle-fill\",\"scale\":\"1.5\",\"variant\":\"recommend\"}}),_c('b',[_vm._v(_vm._s(_vm.$t(\"ListingProcess.notMyVehicle\")))])],1),_c('div',{staticClass:\"p-4\"},[_c('b',[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.resetDataWarn\"))+\" \")])]),_c('b-row',{staticClass:\"text-center\"},[_c('b-col',[_c('b-btn',{staticStyle:{\"width\":\"100px\"},attrs:{\"variant\":\"recommend\",\"pill\":\"\",\"size\":\"sm\"},on:{\"click\":function($event){return _vm.restart()}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.StartOver\"))+\" \")])],1),_c('b-col',[_c('b-btn',{staticStyle:{\"width\":\"100px\"},attrs:{\"variant\":\"primary\",\"pill\":\"\",\"size\":\"sm\"},on:{\"click\":function($event){return _vm.$bvModal.hide('notYourVehicle')}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"global.button.cancel\"))+\" \")])],1)],1)],1)]),_c('b-modal',{attrs:{\"hide-header\":\"\",\"hide-footer\":\"\",\"no-close-on-backdrop\":\"\",\"no-close-on-esc\":\"\",\"centered\":\"\",\"id\":\"cancelModal\"}},[_c('div',{staticClass:\"p-4\"},[_c('h4',[_c('b-icon',{staticClass:\"mr-3\",attrs:{\"icon\":\"exclamation-triangle-fill\",\"scale\":\"1.5\",\"variant\":\"recommend\"}}),_vm._v(_vm._s(_vm.$t(\"ListingProcess.AreYouSure\"))+\" \")],1),_c('div',{staticClass:\"p-3\"},[_c('b',[_vm._v(_vm._s(_vm.$t(\"ListingProcess.cancelModalWarn\")))])]),_c('b-row',{staticClass:\"text-center\"},[_c('b-col',[_c('b-btn',{staticStyle:{\"width\":\"100px\"},attrs:{\"variant\":\"recommend\",\"pill\":\"\",\"size\":\"sm\",\"to\":{ name: 'listingOption' }},on:{\"click\":function($event){_vm.cleanListingData(), _vm.removeListing()}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"global.button.cancel\"))+\" \")])],1),_c('b-col',[_c('b-btn',{staticStyle:{\"width\":\"100px\"},attrs:{\"variant\":\"primary\",\"pill\":\"\",\"size\":\"sm\"},on:{\"click\":function($event){return _vm.$bvModal.hide('cancelModal')}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.agreementModalContinue\"))+\" \")])],1)],1)],1)])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-container class=\"listing mx-auto\">\r\n    <div class=\"mx-0 bg-white listing-easy mb-3 mb-md-5\">\r\n      <div class=\"listing-easy-text\">\r\n        <h1 class=\"h5 m-0\">{{$t('ListingProcess.title')}}</h1>\r\n      </div>\r\n      <div class=\"listing-easy-option\">\r\n        <div\r\n          v-if=\"listingPage > 2 && $store.getters.listingPlanID === 2\"\r\n          class=\"text-center text-lg-right\"\r\n        >\r\n          <span>{{$t('ListingProcess.currentListingOption')}}</span>\r\n          <span class=\"d-inline-block ml-3 py-2 px-4 border rounded\">\r\n            <!--bg-recommend-light rounded': $store.getters.listingPlanID === 2-->\r\n            <span class=\"h5 m-0\"> {{ $store.getters.listingPlanName }}</span>\r\n          </span>\r\n        </div>\r\n        <div v-else class=\"text-center text-lg-right\">\r\n          <span>{{$t('ListingProcess.currentListingOption')}}</span>\r\n\r\n          <b-button\r\n            v-b-toggle.planSelector\r\n            id=\"planSelecterbtn\"\r\n            class=\"bg-transparent border-0\"\r\n          >\r\n            <span>\r\n              <!--bg-recommend-light rounded': $store.getters.listingPlanID === 2-->\r\n              <span class=\"m-0 select-option-text\">\r\n                {{ $store.getters.listingPlanName }}\r\n              </span>\r\n              <b-icon\r\n                icon=\"caret-down-fill\"\r\n                variant=\"primary\"\r\n                scale=\"0.5\"\r\n                class=\"ml-1\"\r\n              />\r\n            </span>\r\n          </b-button>\r\n        </div>\r\n        <!-- <p>listingPage: {{ listingPage }}</p> -->\r\n      </div>\r\n    </div>\r\n\r\n    <b-collapse id=\"planSelector\">\r\n        <TheListingPlanSelecter />\r\n    </b-collapse>\r\n\r\n    <section v-if=\"lookup\">\r\n      <div class=\"vin-lookup\">\r\n        <h2>{{ $t(\"ListingProcess.VINLookup\") }}</h2>\r\n        <p class=\"mt-3 mb-5\">\r\n          {{ $t(\"ListingProcess.VINMessage1\") }}\r\n          <b-link v-b-modal.findVIN style=\"text-decoration: underline\"\r\n            >{{ $t(\"ListingProcess.VINMessage2\") }}</b-link>\r\n          {{ $t(\"ListingProcess.VINMessage3\") }}\r\n\r\n        </p>\r\n\r\n        <b-input-group class=\"m-auto vin-search\">\r\n          <b-form-input\r\n            v-model=\"vin\"\r\n            type=\"text\"\r\n            :disabled=\"overlay\"\r\n            :state=\"availableVIN\"\r\n            @input=\"checkVIN()\"\r\n            @keydown.space.prevent\r\n            class=\"left-rounded text-uppercase vin-input\"\r\n            :placeholder=\"$t('ListingProcess.enterVinPlaceholder')\"\r\n            :class=\"{ 'border-danger': errorMessage }\"\r\n          />\r\n          <b-input-group-append>\r\n            <b-overlay :show=\"overlay\">\r\n              <!-- :disabled=\"!availableVIN\" -->\r\n              <b-btn class=\"right-rounded\" variant=\"primary\" @click=\"vinLookup()\" :disabled=\"errorMessage\">\r\n                {{ $t(\"ListingProcess.Search\") }}\r\n              </b-btn>\r\n            </b-overlay>\r\n          </b-input-group-append>\r\n        </b-input-group>\r\n        <div v-if=\"errorMessage\" class=\"mt-3 mx-auto w-75 alert alert-danger alert-icon\">\r\n          <span>{{ errorMessage }}</span>\r\n        </div>\r\n\r\n        <b-modal id=\"findVIN\" size=\"lg\" hide-footer centered>\r\n          <template #modal-title> {{ $t(\"ListingProcess.VehicleIdentification\") }} </template>\r\n\r\n          <div class=\"p-4\">\r\n            <h3 class=\"h6\">{{ $t(\"ListingProcess.VehicleIdentification\") }}</h3>\r\n            <p>\r\n              {{ $t(\"ListingProcess.VINMessage4\") }}\r\n            </p>\r\n\r\n            <h3 class=\"h6 mt-4\">{{ $t(\"carDetail.label.VINLookupQuestions\") }}</h3>\r\n            <p>\r\n              {{ $t(\"carDetail.label.vinExactly17\") }}\r\n            </p>\r\n\r\n            <div class=\"row mb-5\">\r\n              <div class=\"col-12 text-center\">\r\n                <img\r\n                  class=\"w-100 img-fluid\"\r\n                  src=\"@/assets/img/photoGuideSVG/ExampleVIN.png\"\r\n                />\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"row\">\r\n              <div class=\"col text-center\">\r\n                <img class=\"w-100 img-fluid\" src=\"@/assets/img/photoGuideSVG/VIN.png\" />\r\n              </div>\r\n              <div class=\"col text-center\">\r\n                <img\r\n                  class=\"w-100 img-fluid\"\r\n                  src=\"@/assets/img/photoGuideSVG/VINnumber.png\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </b-modal>\r\n      </div>\r\n      <b-button pill class=\"cancel-listing\" :to=\"{ name: 'listingOption' }\">\r\n        <v-icon>mdi-close</v-icon> {{ $t(\"global.button.cancel\") }}\r\n      </b-button>\r\n    </section>\r\n\r\n    <section v-else-if=\"mileageReader\" class=\"vin-details\">\r\n      <div class=\"border-bottom\">\r\n        <h2>{{ $store.getters.vehicleName }}</h2>\r\n        <p class=\"mini-font\">{{ $t(\"ListingProcess.VIN\") }}: {{ vin }}</p>\r\n        <b-link @click=\"lookup = true\" class=\"change-vehicle\">{{ $t(\"ListingProcess.ChangeVehicle\") }}</b-link>\r\n      </div>\r\n\r\n      <p class=\"odometr-reading\">{{ $t(\"ListingProcess.OdometerReading\") }}</p>\r\n      <p v-if=\"mileageError\" class=\"text-danger\">{{ $t(\"Validations.ListingProcess.maxMileage\") }}</p>\r\n      <b-input-group class=\"mx-auto odometr-box\">\r\n        <b-form-input\r\n          type=\"number\"\r\n          min=\"0\"\r\n          max=\"300000\"\r\n          class=\"left-rounded vin-input\"\r\n          v-model=\"mileage\"\r\n          @change=\"(e) => {mileageInputHandler(e)}\"\r\n          @keydown=\"(e) => keyPressHandler(e)\"\r\n          :placeholder='$t(\"ListingProcess.EnterMileage\")'\r\n        />\r\n        <b-input-group-append>\r\n          <b-dropdown\r\n            :text=\"odometer\"\r\n            class=\"right-rounded border\"\r\n            style=\"max-height: 38px\"\r\n            variant=\"transparent\"\r\n          >\r\n            <b-dropdown-item @click=\"kmReading()\">{{ $t(\"ListingProcess.Kilometers\") }}</b-dropdown-item>\r\n            <b-dropdown-item @click=\"miReading()\">{{ $t(\"ListingProcess.Miles\") }}</b-dropdown-item>\r\n          </b-dropdown>\r\n        </b-input-group-append>\r\n      </b-input-group>\r\n\r\n      <div class=\"my-4\">\r\n        <b-button @click=\"mileageReader = false\" class=\"getstarted-btn\" variant=\"primary\"\r\n          >{{ $t(\"ListingProcess.GetStarted\") }}</b-button\r\n        >\r\n      </div>\r\n    </section>\r\n\r\n    <section v-else>\r\n      <vue-good-wizard\r\n        ref=\"listingWizard\"\r\n        :steps=\"steps\"\r\n        :onNext=\"nextClicked\"\r\n        :onBack=\"backClicked\"\r\n        :nextStepLabel=\"$t('listing.label.next')\"\r\n        :previousStepLabel=\"$t('listing.label.back')\"\r\n        :finalStepLabel=\"$t('listing.label.finish')\"\r\n        class=\"listing-wizard\"\r\n      >\r\n        <div slot=\"page1\">\r\n          <TheBasicDetails\r\n            :restart=\"restart\"\r\n            :nextButton=\"nextButtonDisabled\"\r\n            :styleList=\"styleList\"\r\n          />\r\n          <!-- <div class='d-flex'>\r\n            <button class=\"btn rounded-pill p-10 btn-secondary\" v-b-modal.cancelModal>{{  $t('global.button.cancel') }}</button>\r\n            <button class=\"btn rounded-pill p-10 btn-outline-primary\" @click=\"backClicked\">{{  $t('listing.label.back') }}</button>\r\n            <button class=\"btn rounded-pill p-10 btn-primary\" @click=\"nextClicked\">{{  $t('listing.label.next') }}</button>\r\n          </div> -->\r\n        </div>\r\n        <!-- <div slot=\"page2\">\r\n            <TheListingHistory\r\n              :nextButton=\"nextButtonDisabled\"\r\n              :toPage=\"goToPage\"\r\n            />\r\n          </div> -->\r\n        <div slot=\"page3\">\r\n          <TheListingPhoto :nextButton=\"nextButtonDisabled\" :toPage=\"goToPage\" />\r\n        </div>\r\n        <!-- <div slot=\"page4\"><TheListingCondition :toPage=\"goToPage\" /></div> -->\r\n        <div slot=\"page4\">\r\n          <TheListingPrice :nextButton=\"nextButtonDisabled\" />\r\n        </div>\r\n        <div slot=\"page5\">\r\n          <TheListingLocation :nextButton=\"nextButtonDisabled\" />\r\n        </div>\r\n        <div slot=\"page6\">\r\n          <TheListingReview ref=\"reviewPage\" :toPage=\"goToPage\" :nextButton=\"nextButtonDisabled\" />\r\n        </div>\r\n        <div slot=\"page7\"><TheListingCheckout /></div>\r\n      </vue-good-wizard>\r\n    </section>\r\n\r\n    <b-modal\r\n      hide-header\r\n      hide-footer\r\n      no-close-on-backdrop\r\n      no-close-on-esc\r\n      centered\r\n      id=\"notYourVehicle\"\r\n    >\r\n      <div class=\"p-4\">\r\n        <h4>\r\n          <b-icon\r\n            icon=\"exclamation-triangle-fill\"\r\n            scale=\"1.5\"\r\n            variant=\"recommend\"\r\n            class=\"mr-3\"\r\n          ></b-icon\r\n          ><b>{{ $t(\"ListingProcess.notMyVehicle\") }}</b>\r\n        </h4>\r\n        <div class=\"p-4\">\r\n          <b>\r\n            {{ $t(\"ListingProcess.resetDataWarn\") }}\r\n          </b>\r\n        </div>\r\n        <b-row class=\"text-center\">\r\n          <b-col>\r\n            <b-btn\r\n              variant=\"recommend\"\r\n              pill\r\n              size=\"sm\"\r\n              style=\"width: 100px\"\r\n              @click=\"restart()\"\r\n            >\r\n              {{ $t(\"ListingProcess.StartOver\") }}\r\n            </b-btn>\r\n          </b-col>\r\n          <b-col>\r\n            <b-btn\r\n              variant=\"primary\"\r\n              pill\r\n              size=\"sm\"\r\n              style=\"width: 100px\"\r\n              @click=\"$bvModal.hide('notYourVehicle')\"\r\n            >\r\n              {{ $t(\"global.button.cancel\") }}\r\n            </b-btn>\r\n          </b-col>\r\n        </b-row>\r\n      </div>\r\n    </b-modal>\r\n\r\n    <b-modal\r\n      hide-header\r\n      hide-footer\r\n      no-close-on-backdrop\r\n      no-close-on-esc\r\n      centered\r\n      id=\"cancelModal\"\r\n    >\r\n      <div class=\"p-4\">\r\n        <h4>\r\n          <b-icon\r\n            icon=\"exclamation-triangle-fill\"\r\n            scale=\"1.5\"\r\n            variant=\"recommend\"\r\n            class=\"mr-3\"\r\n          ></b-icon\r\n          >{{ $t(\"ListingProcess.AreYouSure\") }}\r\n        </h4>\r\n        <div class=\"p-3\">\r\n          <b>{{ $t(\"ListingProcess.cancelModalWarn\") }}</b>\r\n        </div>\r\n        <b-row class=\"text-center\">\r\n          <b-col>\r\n            <b-btn\r\n              variant=\"recommend\"\r\n              pill\r\n              size=\"sm\"\r\n              style=\"width: 100px\"\r\n              :to=\"{ name: 'listingOption' }\"\r\n              @click=\"cleanListingData(), removeListing()\"\r\n            >\r\n              {{ $t(\"global.button.cancel\") }}\r\n            </b-btn>\r\n          </b-col>\r\n          <b-col>\r\n            <b-btn\r\n              variant=\"primary\"\r\n              pill\r\n              size=\"sm\"\r\n              style=\"width: 100px\"\r\n              @click=\"$bvModal.hide('cancelModal')\"\r\n            >\r\n              {{ $t(\"ListingProcess.agreementModalContinue\") }}\r\n            </b-btn>\r\n          </b-col>\r\n        </b-row>\r\n      </div>\r\n    </b-modal>\r\n  </b-container>\r\n</template>\r\n\r\n<script>\r\nimport axios from \"axios\";\r\n\r\nexport default {\r\n  components: {\r\n    TheListingPlanSelecter: () => import(\"@/components/listing/TheListingPlanSelecter\"),\r\n    TheBasicDetails: () => import(\"@/components/listing/TheListingBasicDetails\"),\r\n    // TheListingHistory: () => import(\"@/components/listing/TheListingHistory\"),\r\n    TheListingPhoto: () => import(\"@/components/listing/TheListingPhoto\"),\r\n    // TheListingCondition: () =>\r\n    //   import(\"@/components/listing/TheListingCondition\"),\r\n    TheListingPrice: () => import(\"@/components/listing/TheListingPrice\"),\r\n    TheListingLocation: () => import(\"@/components/listing/TheListingLocation\"),\r\n    TheListingReview: () => import(\"@/components/listing/TheListingReview\"),\r\n    TheListingCheckout: () => import(\"@/components/listing/TheListingCheckout\"),\r\n  },\r\n  data() {\r\n    return {\r\n      listingPage: 0,\r\n      tagValueParams: [],\r\n      lookup: true,\r\n      mileageReader: false,\r\n      vin: \"\",\r\n      availableVIN: null,\r\n      overlay: false,\r\n      errorMessage: null,\r\n      mileageError:false,\r\n      vinLookupError: false,\r\n      styleList: null,\r\n      mileage: null,\r\n      odometer: \"km\",\r\n    };\r\n  },\r\n  computed: {\r\n    steps() {\r\n      if (this.$store.getters.listingPlanID === 1) {\r\n        return [\r\n          {\r\n            label: this.$t(\"Sell.steps.BasicDetails\"),\r\n            slot: \"page1\",\r\n            options: {\r\n              nextDisabled: true\r\n            }\r\n          },\r\n          // {\r\n          //   label: \"History\",\r\n          //   slot: \"page2\",\r\n          //   options: {\r\n          //     nextDisabled: true\r\n          //   }\r\n          // },\r\n          {\r\n            label: this.$t(\"Sell.steps.VehiclePhotos\"),\r\n            slot: \"page3\",\r\n            options: {\r\n              nextDisabled: true\r\n            }\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Price\"),\r\n            slot: \"page4\",\r\n            options: {\r\n              nextDisabled: true\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Location\"),\r\n            slot: \"page5\",\r\n            options: {\r\n              nextDisabled: true\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Review\"),\r\n            slot: \"page6\",\r\n            options: {\r\n              nextDisabled: true\r\n            },\r\n          },\r\n        ];\r\n      } else {\r\n        return [\r\n          {\r\n            label: this.$t(\"Sell.steps.BasicDetails\"),\r\n            slot: \"page1\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.VehiclePhotos\"),\r\n            slot: \"page3\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Price\"),\r\n            slot: \"page4\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Location\"),\r\n            slot: \"page5\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Review\"),\r\n            slot: \"page6\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n          {\r\n            label: this.$t(\"Sell.steps.Checkout\"),\r\n            slot: \"page7\",\r\n            options: {\r\n              nextDisabled: true,\r\n            },\r\n          },\r\n        ];\r\n      }\r\n    },\r\n    vinState() {\r\n      if (this.errorMessage) {\r\n        return false;\r\n      } else if (!this.vin) {\r\n        return null;\r\n      } else return this.vin.length === 17;\r\n    },\r\n  },\r\n  methods: {\r\n    keyPressHandler(e) {\r\n      if ( e.key === '.' || e.key === ',' || e.key === 'e') e.preventDefault();\r\n    },\r\n    mileageInputHandler(value) {\r\n      let santizedValue = value.toString().replace(/[,.e]/g, '')\r\n      let mileageInput = Math.abs(santizedValue);\r\n      if (mileageInput > 300000) {\r\n        mileageInput = 300000;\r\n        this.mileageError = true;\r\n      } else {\r\n        this.mileageError = false\r\n      }\r\n      this.mileage = mileageInput;\r\n      this.$store.dispatch('vehicleMileage', mileageInput);\r\n    },\r\n    scrollToTop(){\r\n      const wizardElement = document.querySelector('.listing-wizard');\r\n      if(wizardElement) wizardElement.scrollIntoView();\r\n    },\r\n    nextClicked(currentPage) {\r\n      this.listingPage = currentPage + 1;\r\n      if(currentPage=== 4 && this.$store.getters.listingPlanID !== 2) {\r\n        this.$refs.reviewPage.ListingDone();\r\n        this.$router.replace({ name: 'ListingSuccess' })\r\n        return false\r\n      }\r\n      if (this.steps[currentPage].options.nextDisabled) return false;\r\n      this.scrollToTop();\r\n      return true; //return false if you want to prevent moving to next page\r\n    },\r\n    backClicked(currentPage) {\r\n      this.listingPage = currentPage - 1;\r\n      this.scrollToTop();\r\n      return true; //return false if you want to prevent moving to previous page\r\n    },\r\n    nextButtonDisabled(page, boolean) {\r\n      try {\r\n        this.steps.forEach((element) => {\r\n          if (element.slot === page) {\r\n            element.options.nextDisabled = boolean;\r\n          }\r\n        });\r\n      }catch (e){\r\n        return true\r\n      }\r\n    },\r\n    goToPage(page) {\r\n      this.$refs[\"listingWizard\"].goTo(page);\r\n    },\r\n    restart() {\r\n      this.lookup = true;\r\n      Object.assign(this.$data, this.$options.data());\r\n      this.cleanListingData();\r\n      this.removeListing();\r\n      this.$bvModal.hide(\"notYourVehicle\");\r\n    },\r\n    async removeListing() {\r\n      try {\r\n        await axios.post(\"Listing/RemoveListing\", {\r\n          ListingId: this.$store.getters.listingStockID,\r\n        });\r\n        this.$store.dispatch(\"listingStockID\", null);\r\n      } catch (error) {\r\n        console.log(error);\r\n      }\r\n    },\r\n    async checkVIN() {\r\n      this.errorMessage = null;\r\n      if (this.vin && this.vin.length !== 17) {\r\n        this.errorMessage = this.$t(\"carDetail.label.vinLengthError\");\r\n      }\r\n      this.availableVIN = null;\r\n      let vin = this.vin.replace(/\\s/g, \"\");\r\n      if (this.vinState) {\r\n        try {\r\n          const response = await axios.post(\"Listing/IsVINValid\", {\r\n            VIN: vin,\r\n          });\r\n          this.availableVIN = response.data;\r\n        } catch (error) {\r\n          this.errorMessage = error.response.data;\r\n        }\r\n      }\r\n    },\r\n    async vinLookup() {\r\n      this.errorMessage = null;\r\n      if (this.vinState) {\r\n        try {\r\n          this.overlay = true;\r\n          let VIN = this.vin.replace(/\\s/g, \"\");\r\n          const response = await axios.post(\"Listing/VehicleStyle\", {\r\n            VIN: VIN,\r\n            OriginCountryCode: this.$store.getters.country.Code,\r\n          });\r\n          this.styleList = response.data;\r\n          if (response.data.ManualListing) {\r\n            this.errorMessage =\r\n              \"Auto listing is not available for this VIN, Manual Listing feature coming soon\";\r\n            this.overlay = false;\r\n          } else if (response.data) {\r\n            const l = response.data[0];\r\n            let modelYear, makeName, modelName, noOfPassengerDoors, noOfSeats;\r\n            this.$store.dispatch(\"vin\", this.vin);\r\n            this.$store.dispatch(\"listingStockID\", null);\r\n            l.ListingTags.forEach((element) => {\r\n              if (element.TagId === 1) modelYear = element.Value;\r\n              if (element.TagId === 2) makeName = element.Value;\r\n              if (element.TagId === 3) modelName = element.Value;\r\n              if (element.TagId === 6) noOfPassengerDoors = element.Value;\r\n              if (element.TagId === 7) noOfSeats = element.Value;\r\n            });\r\n            this.$store.dispatch(\r\n              \"vehicleName\",\r\n              modelYear + \" \" + makeName + \" \" + modelName\r\n            );\r\n\r\n            if (noOfPassengerDoors) {\r\n              this.$store.dispatch(\"vehicleDoors\", noOfPassengerDoors);\r\n              this.$store.dispatch(\"hasDoorInfo\", true);\r\n            } else if (!noOfPassengerDoors) this.$store.dispatch(\"hasDoorInfo\", false);\r\n            if (noOfSeats) {\r\n              this.$store.dispatch(\"vehicleSeats\", noOfSeats);\r\n              this.$store.dispatch(\"hasSeatInfo\", true);\r\n            } else if (!noOfSeats) this.$store.dispatch(\"hasSeatInfo\", false);\r\n            this.lookup = false;\r\n            this.mileageReader = true;\r\n            this.overlay = false;\r\n            this.errorMessage = null;\r\n            // this.setListener();\r\n          } else {\r\n            this.overlay = false;\r\n            this.errorMessage = \"no data received\";\r\n          }\r\n        } catch (error) {\r\n          console.log(error);\r\n          this.errorMessage = error;\r\n          this.overlay = false;\r\n        }\r\n      } else {\r\n        if (!this.availableVIN) {\r\n          this.errorMessage = this.$t(\"carDetail.label.enterVinError\");\r\n        }\r\n        this.overlay = false;\r\n      }\r\n    },\r\n    cleanListingData() {\r\n      const storeName = [\r\n          \"vehicleStyle\",\r\n          \"vehicleStyleId\",\r\n          \"vin\",\r\n          \"vehicleName\",\r\n          \"vehicleTrim\",\r\n          \"vehicleEngine\",\r\n          \"vehicleDrivetrain\",\r\n          \"vehicleTransmission\",\r\n          \"vehicleFuelType\",\r\n          \"vehicleBodyType\",\r\n          \"vehicleEngineDisplacement\",\r\n          \"vehicleDoors\",\r\n          \"vehicleSeats\",\r\n          \"vehicleMileage\",\r\n          \"vehicleNumberOfKeys\",\r\n          \"vehicleColor\",\r\n          \"vehicleColorInterior\",\r\n          \"vehiclePrice\",\r\n          \"vehicleMileage\",\r\n          \"questions\",\r\n          \"countSelects\",\r\n          \"vehicleUsage\",\r\n          \"vehiclePrimaryImage\",\r\n          \"vehicleLocation\",\r\n          \"vehicleLocation2\",\r\n          \"vehicleCity\",\r\n          \"vehicleProvince\",\r\n          \"vehiclePostal\",\r\n          \"vehicleContactFirstName\",\r\n          \"vehicleContactLastName\",\r\n          \"vehicleContactMobile\",\r\n          \"vehicleContactMobileCountryCode\",\r\n          \"vehicleContactEmail\",\r\n        ],\r\n        storeFalse = [\r\n          \"hasDoorInfo\",\r\n          \"hasSeatInfo\",\r\n          \"vehicleImagesUploaded\",\r\n          \"vehicleSameContact\",\r\n          \"vehicleSameAddress\",\r\n        ],\r\n        storeArray = [\"vehicleImageList\", \"detailPageShowMore\"];\r\n      storeName.forEach((name) => {\r\n        this.$store.dispatch(name, null);\r\n      });\r\n      storeFalse.forEach((name) => {\r\n        this.$store.dispatch(name, false);\r\n      });\r\n      storeArray.forEach((name) => {\r\n        this.$store.dispatch(name, []);\r\n      });\r\n    },\r\n    beforeunloadHandler() {\r\n      // if (e || window.event) {\r\n      //   return this.$bvModal.show('cancelModal')\r\n      // }\r\n      // else return null;\r\n      window.onbeforeunload = function (e) {\r\n        e = e || window.event;\r\n        if (e) {\r\n          e.returnValue = \"Do you want reload this page, all process will be lost\";\r\n        }\r\n        return \"All process will be lost\";\r\n      };\r\n    },\r\n    back() {\r\n      if (this.listingPage > 0) {\r\n        this.listingPage -= 1;\r\n        this.$refs[\"listingWizard\"].goTo(this.listingPage);\r\n      } else if (this.listingPage === 0 && !this.lookup) {\r\n        this.$bvModal.show(\"cancelModal\");\r\n      }\r\n    },\r\n    setListener() {\r\n      history.pushState(null, null, document.URL);\r\n      window.addEventListener(\"popstate\", this.back, false);\r\n      // window.addEventListener(\"beforeunload\", e => {\r\n      //   this.beforeunloadHandler(e);\r\n      // }, false);\r\n      this.beforeunloadHandler();\r\n    },\r\n    removeListener() {\r\n      window.removeEventListener(\"popstate\", this.back, false);\r\n      // window.removeEventListener(\"beforeunload\", e => {\r\n      //   this.beforeunloadHandler(e);\r\n      // }, false);\r\n      window.onbeforeunload = null;\r\n    },\r\n    kmReading() {\r\n      this.odometer = \"km\";\r\n      this.$store.dispatch(\"mileageUnit\", this.odometer);\r\n    },\r\n    miReading() {\r\n      this.odometer = \"mi\";\r\n      this.$store.dispatch(\"mileageUnit\", this.odometer);\r\n    },\r\n  },\r\n  beforeRouteEnter(to, from, next) {\r\n    next((vm) => {\r\n      if (!vm.$store.getters.user) {\r\n        vm.$bvModal.show(\"signin\");\r\n        vm.$router.back();\r\n      }\r\n    });\r\n  },\r\n  // beforeMount() {\r\n  //   this.setListener();\r\n  // },\r\n  beforeDestroy() {\r\n    this.cleanListingData();\r\n    this.removeListener();\r\n  },\r\n  updated() {\r\n    if (this.lookup) {\r\n      this.cleanListingData();\r\n    }\r\n    // this.$refs.planSelecter.$emit(\"close\");\r\n  },\r\n  beforeMount() {\r\n    this.$store.dispatch(\"setCurrency\", \"CAD\");\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\r\n.wizard__body {\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n}\r\n.final-step{\r\n  position: relative;\r\n  z-index: 10;\r\n}\r\n.wizard__arrow\r\n  /* ,\r\n  .wizard__body,\r\n  .wizard__body__actions  */ {\r\n  border: 0 !important;\r\n  background-color: transparent !important;\r\n}\r\n.wizard__body__actions a {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.bar {\r\n  position: relative;\r\n  bottom: 21px;\r\n  float: right;\r\n  width: 178px;\r\n  margin-right: 234px;\r\n  border-style: solid;\r\n  border-width: 2px;\r\n  border-color: $half-dark;\r\n  background: $half-dark;\r\n}\r\n\r\n.popover {\r\n  max-width: 1000px !important;\r\n}\r\n\r\n@media (max-width: 1200px) {\r\n  .bar {\r\n    width: 118px;\r\n    margin-right: 204px;\r\n  }\r\n}\r\n\r\n@media (max-width: 991px) {\r\n  .bar {\r\n    width: 38px;\r\n    margin-right: 164px;\r\n  }\r\n  .popover {\r\n    max-width: 500px !important;\r\n  }\r\n}\r\n.listing {\r\n  margin: 64px 0;\r\n  @media (max-width: 767px) {\r\n    margin: 32px 0;\r\n  }\r\n  .vehicle-details{\r\n    margin-bottom: 0 !important;\r\n  }\r\n  .listing-wizard {\r\n    counter-reset: li;\r\n    .wizard__body {\r\n      background: none !important;\r\n      &__actions {\r\n        a {\r\n          i {\r\n            display: inline-block;\r\n            font: normal normal normal 14px/1 FontAwesome;\r\n            -moz-osx-font-smoothing: grayscale;\r\n            &.vgw-next {\r\n              margin-left: 8px;\r\n              &:before {\r\n                content: \"\\f061\";\r\n              }\r\n            }\r\n            &.vgw-prev {\r\n              margin-right: 8px;\r\n              &:before {\r\n                content: \"\\f060\";\r\n              }\r\n            }\r\n            &:after {\r\n              display: none !important;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .wizard__steps {\r\n      margin: 64px 0;\r\n    }\r\n    .wizard__step__indicator {\r\n      width: 40px !important;\r\n      height: 40px !important;\r\n      box-sizing: border-box;\r\n      border: 1px solid white !important;\r\n      background: #dbdbdb !important;\r\n    }\r\n    .wizard__step {\r\n      position: relative;\r\n      &:after {\r\n        content: counter(li);\r\n        counter-increment: li;\r\n        position: absolute;\r\n        top: -28px;\r\n        left: 50%;\r\n        z-index: 2;\r\n        transform: translateX(5px);\r\n        font-size: 14px;\r\n        color: #363636;\r\n        font-family: \"Inter\", sans-serif !important;\r\n      }\r\n      &__label {\r\n        font-weight: 400;\r\n        font-size: 14px;\r\n        font-family: \"Inter\", sans-serif;\r\n        position: relative;\r\n        top: 12px;\r\n        color: #363636;\r\n      }\r\n      &.active {\r\n        .wizard__step__indicator {\r\n          border: 13px solid $light-blue !important;\r\n          background: white !important;\r\n        }\r\n        &:after {\r\n          opacity: 0;\r\n        }\r\n        .wizard__step__indicator {\r\n          // border: none !important;\r\n          // background: $light-blue !important ;\r\n          // &:after {\r\n          //   content: \"\\f00c\";\r\n          //   position: absolute;\r\n          //   width: 100%;\r\n          //   height: 100%;\r\n          //   top: 0;\r\n          //   right: 0;\r\n          //   font-family: \"FontAwesome\";\r\n          //   color: white;\r\n          //   display: flex;\r\n          //   align-items: center;\r\n          //   justify-content: center;\r\n          //   font-size: 23px;\r\n          // }\r\n        }\r\n      }\r\n    }\r\n    .wizard__body__actions {\r\n      position: static;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      height: auto;\r\n      padding-right: 0;\r\n      padding-left: 0;\r\n      margin-top: 40px;\r\n    }\r\n    .wizard__body {\r\n      padding-bottom: 0;\r\n    }\r\n    .wizard__body__step {\r\n      background: white;\r\n      border-radius: 4px;\r\n    }\r\n    .wizard-footer {\r\n      position: relative;\r\n      top: 96px;\r\n      width: 100%;\r\n      left: -33px;\r\n    }\r\n    .wizard__next,\r\n    .wizard__back {\r\n      min-width: 188px;\r\n      height: 56px !important;\r\n      display: flex !important;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 20px;\r\n      font-weight: 600 !important;\r\n      float: none !important;\r\n    }\r\n    .wizard__next {\r\n      margin-left: auto;\r\n      position: relative;\r\n      z-index: 10;\r\n    }\r\n    .wizard__back {\r\n      border: 1px solid $light-blue !important;\r\n      background: none !important;\r\n      color: $light-blue !important;\r\n    }\r\n  }\r\n  .saveAndLeave {\r\n    position: absolute;\r\n    right: 140px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n  }\r\n  .alert-box {\r\n    .close {\r\n      position: absolute;\r\n      right: 40px;\r\n      z-index: 2;\r\n      top: 50% !important;\r\n      transform: translateY(-50%);\r\n      font-size: 40px;\r\n      font-weight: 200;\r\n      color: #111;\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n}\r\n</style>\r\n\r\n<style scoped lang=\"scss\">\r\n.listing {\r\n  &-easy {\r\n    min-height: 116px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 24px;\r\n    @media (max-width: 991px) {\r\n      flex-direction: column;\r\n    }\r\n    h1 {\r\n      font-size: 24px;\r\n      font-weight: 600;\r\n      @media (max-width: 575px) {\r\n        font-size: 20px;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n  .select-option-text {\r\n    font-family: \"Inter\", sans-serif;\r\n    font-size: 16px;\r\n  }\r\n  .vin-lookup {\r\n    padding: 24px;\r\n    background: white;\r\n    border-radius: 4px;\r\n    text-align: center;\r\n    h2 {\r\n      font-size: 34px;\r\n      font-weight: 600;\r\n      color: $light-blue;\r\n      margin-bottom: 24px;\r\n      @media (max-width: 575px) {\r\n        font-size: 28px;\r\n      }\r\n    }\r\n    p {\r\n      width: 660px;\r\n      margin: auto;\r\n      line-height: 24px;\r\n      @media (max-width: 991px) {\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n  .vin-search {\r\n    width: 426px;\r\n    height: 48px;\r\n    border-radius: 35px;\r\n    @media (max-width: 767px) {\r\n      width: 100%;\r\n    }\r\n    button {\r\n      width: 154px;\r\n      font-weight: 500;\r\n      font-size: 16px;\r\n      font-family: \"Inter\", sans-serif;\r\n      height: 100%;\r\n    }\r\n    input {\r\n      height: 100%;\r\n      box-shadow: none !important;\r\n    }\r\n  }\r\n  .cancel-listing {\r\n    width: 188px;\r\n    height: 56px;\r\n    background: #acacac;\r\n    color: #111;\r\n    font-size: 20px;\r\n    font-weight: 600;\r\n    font-family: \"Inter\" !important;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-top: 40px;\r\n    .v-icon {\r\n      color: #111;\r\n      margin-right: 8px;\r\n    }\r\n  }\r\n  .vin-details {\r\n    border-radius: 4px;\r\n    background: white;\r\n    margin-top: 40px;\r\n    padding: 32px;\r\n    text-align: center;\r\n    h2 {\r\n      color: $light-blue;\r\n      font-size: 34px;\r\n      margin-bottom: 16px;\r\n      @media (max-width: 575px) {\r\n        font-size: 24px;\r\n      }\r\n    }\r\n    .mini-font {\r\n      font-size: 14px;\r\n      color: #363636;\r\n      margin-bottom: 16px;\r\n    }\r\n    .odometr-reading {\r\n      font-size: 20px;\r\n      font-weight: 600;\r\n      margin-bottom: 16px;\r\n      padding-top: 16px;\r\n    }\r\n    .odometr-box {\r\n      max-width: 426px;\r\n      height: 48px;\r\n      @media (max-width: 575px) {\r\n        max-width: 100%;\r\n      }\r\n      .input-group-append {\r\n        position: relative;\r\n        &:before {\r\n          content: \"\";\r\n          width: 1px;\r\n          position: absolute;\r\n          left: 0;\r\n          height: 24px;\r\n          background: #d0d0d0;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n        }\r\n      }\r\n      input,\r\n      div {\r\n        max-height: 100% !important;\r\n        height: 100%;\r\n        border-color: #d0d0d0 !important;\r\n      }\r\n      div {\r\n        border-left: 0 !important;\r\n      }\r\n      input {\r\n        border-right: 0;\r\n        box-shadow: none !important;\r\n      }\r\n    }\r\n    .change-vehicle {\r\n      font-weight: 500;\r\n      padding-bottom: 16px;\r\n      display: inline-block;\r\n    }\r\n    .getstarted-btn {\r\n      width: 426px;\r\n      height: 48px;\r\n      border-radius: 30px;\r\n      margin: auto;\r\n      font-weight: 500;\r\n      font-size: 16px;\r\n      @media (max-width: 575px) {\r\n        width: 100%;\r\n      }\r\n    }\r\n  }\r\n}\r\n#planSelecterbtn {\r\n  min-width: 204px;\r\n  background: #e6f0f9 !important;\r\n  height: 48px;\r\n  border: 1px solid $light-blue !important;\r\n  border-radius: 30px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-left: 16px;\r\n  font-weight: 500;\r\n  color: $light-blue;\r\n  padding: 0 16px;\r\n}\r\n\r\n#planSelector {\r\n  width: 914px;\r\n  margin: auto;\r\n  padding-top: 24px;\r\n  @media (max-width: 991px) {\r\n    width: 100%;\r\n  }\r\n}\r\n.planselector-title {\r\n  font-size: 40px;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  color: #111111;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.planselector-description {\r\n  margin-bottom: 50px;\r\n  font-size: 20px;\r\n  font-weight: 600;\r\n  color: #111111;\r\n  text-align: center;\r\n}\r\n.planselector-question {\r\n  color: #111111;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  font-size: 28px;\r\n  margin-top: 30px;\r\n  margin-bottom: 16px;\r\n}\r\n.question-buttons {\r\n  text-align: center;\r\n  margin-bottom: 64px;\r\n  button {\r\n    min-width: 220px;\r\n    border-radius: 30px;\r\n    height: 32px;\r\n    background: none;\r\n    border: 1px solid $light-blue;\r\n    padding: 0 15px;\r\n    color: $light-blue;\r\n    margin: 0 8px;\r\n    svg {\r\n      margin-right: 8px;\r\n    }\r\n  }\r\n}\r\n.vin-input {\r\n  &::placeholder {\r\n    color: #acacac;\r\n    font-size: 14px;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Listing.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Listing.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Listing.vue?vue&type=template&id=cea9b6d8&scoped=true&\"\nimport script from \"./Listing.vue?vue&type=script&lang=js&\"\nexport * from \"./Listing.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Listing.vue?vue&type=style&index=0&id=cea9b6d8&prod&lang=scss&\"\nimport style1 from \"./Listing.vue?vue&type=style&index=1&id=cea9b6d8&prod&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"cea9b6d8\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/sass-loader/dist/cjs.js??ref--14-0!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Listing.vue?vue&type=style&index=0&id=cea9b6d8&prod&lang=scss&\"","module.exports = __webpack_public_path__ + \"assets/img/ExampleVIN.9fab7a4b.png\";"],"sourceRoot":""}