\r\n
\r\n {(this.state.isTimeLineDataReady\r\n ? \r\n\r\n
\r\n \r\n \r\n {Moment().month(new Date(this.state.selectedDate).getMonth()).format('MMMM')}{\" \"}\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && {Moment().year(new Date(this.state.selectedDate).getFullYear()).format('YYYY')}}\r\n
\r\n \r\n
\r\n - \r\n\r\n {this.state.timeLineData.length > 0 && this.state.timeLineData.map(function (day, key) {\r\n if (key < 4) {\r\n return (\r\n
- \r\n {Moment(day.dayDate, 'D/M/Y').format('ddd')}\r\n {Moment(day.dayDate, 'D/M/Y').format('D')}\r\n \r\n )\r\n }\r\n })}\r\n\r\n
\r\n {(this.state.timeLineData.length > 0 &&\r\n typeof (this.state.timeLineData[0]) !== 'undefined' &&\r\n this.state.timeLineData[0].hours.length > 0\r\n ? (\r\n <>\r\n {this.state.timeLineData.map(function (day, keyDay) {\r\n if (keyDay < 4) {\r\n return (\r\n
\r\n : - \r\n {\r\n day.hours.map(function (hour, keyHours) {\r\n return (\r\n
{this.props.dealerDistance} Km
;\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.props.dealerName}
\r\n \r\n {locationMarkup}\r\n \r\n\r\n {this.props.dealerAdress}
\r\n {this.props.dealerZipCode} {this.props.dealerCity}\r\n
\r\n {(this.props.dealerLCV || this.props.dealerPC) && }\r\n
}\r\n \r\n {(this.props.dealerPC && !this.props.dealerLCV) &&
\r\n {CONSTANTS.LABELS.dealer_locator_filter_pc_descriptive}
}\r\n {(this.props.dealerLCV && !this.props.dealerPC) &&{CONSTANTS.LABELS.dealer_locator_filter_lcv_descriptive}
}\r\n {(this.props.dealerLCV && this.props.dealerPC) &&{CONSTANTS.LABELS.dealer_locator_filter_pc_lvc_descriptive}
}\r\n\r\n {this.moreDealers &&\r\n }\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nDealerBlock.defaultProps = {\r\n isPageSolo: false\r\n}\r\n\r\nexport default DealerBlock;\r\n","import React from 'react';\r\nimport ContentLoader from 'react-content-loader'\r\n\r\n\r\n\r\n\r\nconst DealerBlockLoader = (props) => {\r\n\r\n\treturn (\r\n\t\t\r\n {this.state.showWidget && (\r\n
\r\n \r\n {label}\r\n
)}\r\n footer={false}\r\n culture={window.siteConfig['language']}\r\n onChange={(value) => { this.updateTimeLineCalendar(value); this.setState({ 'showWidget': false, 'isTimeLineDataReady': false }) }}\r\n style={{height : window.isMobile() == 'mobile' ? CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && this.state.showFiltersPCLCV ? \"323px\" : \"411px\" : undefined}}\r\n />}\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default HappyHoureTitle;\r\n","import React from 'react';\r\nimport CONSTANTS from '../../constants';\r\n\r\nconst ShowMoreButton = (props) => {\r\n\tfunction sendDataToGTM() {\r\n\t\t//event label remonte les données renseignées lors de Click sur CTA \"afficher plus de garages à proximité\"\r\n\t\twindow.dataLayer.push({\r\n\t\t\t'pageName': \"multicréneaux\",\r\n\t\t\t'event': 'uaevent',\r\n\t\t\t'eventCategory': 'Content',\r\n\t\t\t'eventAction': \"Display::MoreDealers\",\r\n\t\t\t'eventLabel': CONSTANTS.LABELS.multislots_display_more_dealers\r\n\t\t});\r\n\t\tprops.onClick();\r\n\t}\r\n\treturn (\r\n\t\t sendDataToGTM()} onKeyDown={(e) => e.key === 'Enter' && sendDataToGTM()}>\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nexport default ShowMoreButton;\r\n","import React, { PureComponent } from 'react'\r\n\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { withRouter } from 'react-router'\r\nimport { headTitleTag } from '../../helpers/functions'\r\n\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nimport { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'\r\nimport MarkerClusterer from 'react-google-maps/lib/components/addons/MarkerClusterer'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport BodyClassName from 'react-body-classname'\r\nimport DealerBlock from '../DealerBlock/DealerBlock'\r\nimport DealerBlockLoader from '../DealerBlock/dealerBlockLoader'\r\n\r\nimport HappyHoureTitle from '../Titles/HappyHoureTitle'\r\nimport ShowMoreButton from '../buttons/showMoreButton'\r\nimport { connect } from 'react-redux'\r\nimport { CurrentStepSetAction } from '../../actions/action'\r\nimport CONSTANTS from '../../constants'\r\nimport './pagemapsolo.css'\r\n\r\nimport markerIconAP from '../../images/AP/pin-peugeot-map.png'\r\nimport markerIconActiveAP from '../../images/AP/pin-peugeot-hover.png'\r\nimport clusterIconAP from '../../images/AP/ap-pin-number.png'\r\n\r\nimport markerIconAC from '../../images/AC/pin-ac-defaut.svg'\r\nimport markerIconActiveAC from '../../images/AC/pin-ac-hover.svg'\r\nimport clusterIconAC from '../../images/AC/ac-pin-number.svg'\r\n\r\nimport markerIconDS from '../../images/DS/ds-pin-Small.png'\r\nimport markerIconActiveDS from '../../images/DS/ds-pin-Big-Hover.png'\r\nimport clusterIconDS from '../../images/DS/ds-pin-number.svg'\r\n\r\nimport markerIconOV from '../../images/OV/pin-ov-defaut.png'\r\nimport markerIconActiveOV from '../../images/OV/pin-ov-hover.png'\r\nimport clusterIconOV from '../../images/OV/ov-pin-number.png'\r\n\r\nvar _marker = new Object()\r\nif (window.siteConfig.currentBrand === 'P') {\r\n _marker = {\r\n icon: markerIconAP,\r\n iconActive: markerIconActiveAP,\r\n iconCluster: clusterIconAP,\r\n size: (window.google.maps ? new window.google.maps.Size(80, 80) : false),\r\n scaledSize: (window.google.maps ? new window.google.maps.Size(80, 80) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n }\r\n}\r\nif (window.siteConfig.currentBrand === 'C') {\r\n _marker = {\r\n icon: markerIconAC,\r\n iconActive: markerIconActiveAC,\r\n iconCluster: clusterIconAC,\r\n size: (window.google.maps ? new window.google.maps.Size(91, 98) : false),\r\n scaledSize: (window.google.maps ? new window.google.maps.Size(91, 98) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n }\r\n}\r\nif (window.siteConfig.currentBrand === 'D') {\r\n _marker = {\r\n icon: markerIconDS,\r\n iconActive: markerIconActiveDS,\r\n iconCluster: clusterIconDS,\r\n size: (window.google.maps ? new window.google.maps.Size(50, 50) : false),\r\n scaledSize: (window.google.maps ? new window.google.maps.Size(50, 50) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n }\r\n}\r\n\r\nif (window.siteConfig.currentBrand === 'V') {\r\n _marker = {\r\n icon: markerIconOV,\r\n iconActive: markerIconActiveOV,\r\n iconCluster: clusterIconOV,\r\n size: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n scaledSize: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n }\r\n}\r\n\r\nconst google = window.google\r\nvar Gmap\r\nconst MyMapComponent = withGoogleMap(\r\n (props) =>\r\n \r\n\t\t\t\t{CONSTANTS.LABELS.multislots_display_more_dealers} \r\n\t\t\t
\r\n\t\t\r\n \r\n }\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n )\r\n }\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageMapSolo))\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {\r\n\tRedirect,\r\n\tSwitch\r\n} from 'react-router-dom';\r\nimport { withRouter } from \"react-router\";\r\n\r\nimport { connect } from 'react-redux';\r\nimport { CurrentStepSetAction, setListDealersFiltred } from '../../actions/action';\r\nimport { headTitleTag } from '../../helpers/functions';\r\n\r\nimport { withGoogleMap, GoogleMap, Marker } from \"react-google-maps\";\r\nimport MarkerClusterer from \"react-google-maps/lib/components/addons/MarkerClusterer\";\r\n\r\nimport BodyClassName from 'react-body-classname';\r\nimport DealerBlock from '../DealerBlock/DealerBlock';\r\nimport DealerBlockLoader from '../DealerBlock/dealerBlockLoader';\r\nimport HappyHoureTitle from '../Titles/HappyHoureTitle';\r\nimport CONSTANTS from '../../constants.js';\r\nimport './pagemap.css';\r\n/*import markerIconAP from '../../images/AP/pin-peugeot-map.svg';\r\nimport markerIconActiveAP from '../../images/AP/pin-peugeot-map-active.svg';*/\r\n\r\n\r\nimport markerIconAP from '../../images/AP/pin-peugeot-map.png';\r\nimport markerIconActiveAP from '../../images/AP/pin-peugeot-hover.png';\r\nimport clusterIconAP from '../../images/AP/ap-pin-number.png';\r\n/*import markerIconAC from '../../images/AC/citroen-pin.svg';\r\nimport markerIconActiveAC from '../../images/AC/citroen-pin-hover.svg';*/\r\n\r\nimport markerIconAC from '../../images/AC/pin-ac-defaut.svg';\r\nimport markerIconActiveAC from '../../images/AC/pin-ac-hover.svg';\r\nimport clusterIconAC from '../../images/AC/ac-pin-number.svg';\r\n\r\nimport markerIconDS from '../../images/DS/ds-pin-Small.png';\r\nimport markerIconActiveDS from '../../images/DS/ds-pin-Big-Hover.png';\r\nimport clusterIconDS from '../../images/DS/ds-pin-number.svg';\r\n\r\nimport markerIconOV from '../../images/OV/pin-ov-defaut.png'\r\nimport markerIconActiveOV from '../../images/OV/pin-ov-hover.png'\r\nimport clusterIconOV from '../../images/OV/ov-pin-number.png'\r\n\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nimport ShowMoreButton from '../buttons/showMoreButton'\r\nimport { isEqual } from 'lodash'\r\n\r\n\r\nif (window.siteConfig.currentBrand == 'P') {\r\n\tvar _marker = new Object({\r\n\t\ticon: markerIconAP,\r\n\t\ticonActive: markerIconActiveAP,\r\n\t\ticonCluster: clusterIconAP,\r\n\t\tsize: (window.google.maps ? new window.google.maps.Size(80, 80) : false),\r\n\t\tscaledSize: (window.google.maps ? new window.google.maps.Size(80, 80) : false),\r\n\t\torigin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n\t});\r\n}\r\n\r\nif (window.siteConfig.currentBrand == 'C') {\r\n\tvar _marker = new Object({\r\n\t\ticon: markerIconAC,\r\n\t\ticonActive: markerIconActiveAC,\r\n\t\ticonCluster: clusterIconAC,\r\n\t\tsize: (window.google.maps ? new window.google.maps.Size(91, 98) : false),\r\n\t\tscaledSize: (window.google.maps ? new window.google.maps.Size(91, 98) : false),\r\n\t\torigin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n\t});\r\n\r\n}\r\nif (window.siteConfig.currentBrand == 'D') {\r\n\t_marker = new Object({\r\n\t\ticon: markerIconDS,\r\n\t\ticonActive: markerIconActiveDS,\r\n\t\ticonCluster: clusterIconDS,\r\n\t\tsize: (window.google.maps ? new window.google.maps.Size(50, 50) : false),\r\n\t\tscaledSize: (window.google.maps ? new window.google.maps.Size(50, 50) : false),\r\n\t\torigin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n\t});\r\n\r\n}\r\n\r\nif (window.siteConfig.currentBrand == 'V') {\r\n\t_marker = new Object({\r\n\t\ticon: markerIconOV,\r\n\t\ticonActive: markerIconActiveOV,\r\n\t\ticonCluster: clusterIconOV,\r\n\t\tsize: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n\t\tscaledSize: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n\t\torigin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n\t})\r\n}\r\n\r\n\r\n\r\n\r\n\r\nvar labels = window.labels;\r\nconst google = window.google;\r\nvar Gmap;\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { CurrentStepSetAction, setListDealersFiltred };\r\n\r\nconst MyMapComponent = withGoogleMap(\r\n\t(props) =>\r\n\t\t\r\n {CONSTANTS.LABELS.multislots_select_slot}\r\n
}\r\n\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n \r\n
\r\n\r\n \r\n\r\n {!this.state.isLoading && this.state.selectedData && this.state.selectedData.map(function (item, key) {\r\n return (
\r\n \r\n { this.markerIsHover(item.DealerId) }\r\n : ''\r\n }\r\n onMouseOut={(marker) =>\r\n this.markerNotHover()}\r\n onClick={(marker) =>\r\n this.handleScrollToElement(item.DealerId)}\r\n key={item.DealerId}\r\n />\r\n }.bind(this)\r\n )}\r\n\r\n \r\n\r\n
\r\n \r\n\t\t\t\t{\r\n\t\t\t\t\theadTitleTag(SEO_TITLE.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()).replace('[nom_ville]', this.state.map.adress.toUpperCase()),\r\n\t\t\t\t\t\tSEO_DESC.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()).replace('[nom_ville]', this.state.map.adress.toUpperCase()))\r\n\t\t\t\t}\r\n\r\n\t\t\t\t{\r\n\t\t\t\t\tthis.state.errorRedirect &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t }\r\n\r\n\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageMap));\r\n","\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport { connect } from 'react-redux';\r\nimport {\r\n\tRedirect,\r\n\tSwitch\r\n} from 'react-router-dom';\r\nimport { withRouter } from \"react-router\";\r\nimport { headTitleTag } from '../../helpers/functions';\r\n\r\nimport { CurrentStepSetAction, setListDealersFiltred } from '../../actions/action';\r\n\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nimport BodyClassName from 'react-body-classname';\r\nimport DealerBlock from '../DealerBlock/DealerBlock';\r\nimport HappyHoureTitle from '../Titles/HappyHoureTitle';\r\nimport ShowMoreButton from '../buttons/showMoreButton';\r\nimport CONSTANTS from '../../constants';\r\nimport { isEqual } from 'lodash'\r\nimport './pagenomap.css';\r\n\r\n\r\nvar labels = window.labels;\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { CurrentStepSetAction, setListDealersFiltred };\r\nconst google = window.google;\r\n\r\nclass PageNoMap extends Component {\r\n\t_isMounted = false;\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.getDistanceBetweenPlaces = this.getDistanceBetweenPlaces.bind(this);\r\n\t\tthis.setOpendDealerBlock = this.setOpendDealerBlock.bind(this);\r\n\t\tthis.setLatLangAccordingToCityInURL = this.setLatLangAccordingToCityInURL.bind(this);\r\n\t\tthis.showMore = this.showMore.bind(this);\r\n\t\tthis.state = {\r\n\t\t\tdata: [],\r\n\t\t\tdealersFiltred: this.props.store.dealersFiltred,\r\n\t\t\tselectedDate: [],\r\n\t\t\topenDealerBlock: null,\r\n\t\t\tisLoading: false,\r\n\t\t\terrorRedirect: null,\r\n\t\t\tpagination: 10,\r\n\t\t\tmap: {\r\n\t\t\t\tadress: \"\",\r\n\t\t\t\tlat: 0,\r\n\t\t\t\tlng: 0,\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t}\r\n\tsetLatLangAccordingToCityInURL(props = this.props) {\r\n\t\tlet geocoder = new google.maps.Geocoder;\r\n\t\treturn new Promise((resolve, reject) => {\r\n\t\t\tgeocoder.geocode({ 'address': props.match.params.adress }, function (results, status) {\r\n\t\t\t\tif (status === 'OK') {\r\n\t\t\t\t\tconsole.log(results);\r\n\t\t\t\t\tif (results[0]) {\r\n\t\t\t\t\t\tconsole.log(results[0].formatted_address);\r\n\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\tmap: {\r\n\t\t\t\t\t\t\t\tadress: results[0].formatted_address,\r\n\t\t\t\t\t\t\t\tlat: results[0].geometry.location.lat(),\r\n\t\t\t\t\t\t\t\tlng: results[0].geometry.location.lng(),\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\tresolve(results[0].formatted_address);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconsole.log('No results found');\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\r\n\t\t\t\t\tthis.setState({ errorRedirect: true });\r\n\t\t\t\t\tconsole.error('Geocoder failed due to: ' + status);\r\n\t\t\t\t}\r\n\t\t\t}.bind(this));\r\n\t\t});\r\n\r\n\t}\r\n\tcomponentDidMount() {\r\n\t\tthis.props.CurrentStepSetAction(2);\r\n\t\tthis._isMounted = true;\r\n\t\tthis.setState({ isLoading: true });\r\n\r\n\t\tthis.setLatLangAccordingToCityInURL().then(() => {\r\n\t\t\tconst listDealers = new fetchApiData();\r\n\t\t\tlistDealers.getListDealers()\r\n\t\t\t\t.then(data => {\r\n\t\t\t\t\tif (this._isMounted) {\r\n\r\n\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\tisLoading: false,\r\n\t\t\t\t\t\t\tdata: data.d,\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\tthis.props.store.filterDealersBy.length > 0 ? this.filterDealers() : this.setState({ dealersFiltred: data.d })\r\n\r\n\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\tselectedData: Object.values(this.getDistanceBetweenPlaces(this.props)).sort(function (a, b) {\r\n\t\t\t\t\t\t\t\treturn a.Distance - b.Distance;\r\n\t\t\t\t\t\t\t}).slice(0, 10)\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\tconsole.log(this.state.selectedData);\r\n\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t\t\t.catch(error => {\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\terror,\r\n\t\t\t\t\t\tisLoading: false\r\n\t\t\t\t\t})\r\n\t\t\t\t\tconsole.error('fail', error);\r\n\t\t\t\t});\r\n\r\n\t\t});\r\n\r\n\t\t// GA Start\r\n\t\twindow.dataLayer.push({\r\n\t\t\t'event': 'updatevirtualpath',\r\n\t\t\t'brand': window.siteConfig['brand'],\r\n\t\t\t'virtualPageURL': \"/dealer-locator/appointment-schedule-search\",\r\n\t\t\t'pageName': window.siteConfig['pageName'],\r\n\t\t\t'language': window.siteConfig['language'],\r\n\t\t\t'country': window.siteConfig['currentCountry'],\r\n\t\t\t'siteTypeLevel1': window.siteConfig['siteTypeLevel1'],\r\n\t\t\t'siteTypeLevel2': \"appointement\",\r\n\t\t\t'siteOwner': \"central\",\r\n\t\t\t'siteTarget': \"B2C\",\r\n\t\t\t'siteFamily': \"after-sales\",\r\n\t\t\t'pageCategory': \"dealer locator page\",\r\n\t\t});\r\n\r\n\t\t// GA Ends\r\n\r\n\t}\r\n\t//flter the dealers and add the filtres liste to the store\r\n\tfilterDealers = () => {\r\n\t\tlet dealersFiltred = this.props.store.filterDealersBy.length > 0\r\n\t\t\t? this.state.data.filter(dealer =>\r\n\t\t\t\tthis.props.store.filterDealersBy.every(elemnt => dealer.ListeIdSP.includes(elemnt)))\r\n\t\t\t: this.state.data\r\n\t\tthis.setState({ dealersFiltred: dealersFiltred })\r\n\t\tthis.props.setListDealersFiltred(dealersFiltred)\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis._isMounted = false;\r\n\t}\r\n\r\n\t//call the filter methode if the filter by changed \r\n\tcomponentDidUpdate = (prevProps) => {\r\n\t\tif (!isEqual(this.props.store.filterDealersBy, prevProps.store.filterDealersBy)) {\r\n\t\t\tthis.filterDealers();\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tthis.setLatLangAccordingToCityInURL(nextProps).then(() => {\r\n\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedData: Object.values(this.getDistanceBetweenPlaces(nextProps)).slice(0, 10)\r\n\r\n\t\t\t});\r\n\r\n\t\t});\r\n\r\n\r\n\t}\r\n\tgetDistanceBetweenPlaces(urlProps = this.props) {\r\n\t\tlet place = [this.props.store.selectedLat, this.props.store.selectedLong];\r\n\t\tlet dealers = Object.assign({}, this.state.dealersFiltred);\r\n\t\tdealers = Object.values(dealers).map(function (dealer) {\r\n\t\t\tconst currentAdress = new google.maps.LatLng(place[0], place[1]);\r\n\t\t\tconst dealerLocation = new google.maps.LatLng(dealer.Latitude, dealer.Longitude);\r\n\t\t\tdealer.Distance = (google.maps.geometry.spherical.computeDistanceBetween(currentAdress, dealerLocation) / 1000).toFixed(2);\r\n\t\t\treturn dealer;\r\n\t\t});\r\n\t\tthis.setState({\r\n\t\t\tdealersFiltred: dealers.sort(function (a, b) {\r\n\t\t\t\treturn a.Distance - b.Distance;\r\n\t\t\t})\r\n\t\t});\r\n\t\treturn dealers.sort(function (a, b) {\r\n\t\t\treturn a.Distance - b.Distance;\r\n\t\t});\r\n\t}\r\n\tshowMore() {\r\n\t\tthis.setState({\r\n\t\t\tselectedData: this.state.dealersFiltred.slice(0, this.state.pagination + 10),\r\n\t\t\tpagination: this.state.pagination + 10,\r\n\t\t})\r\n\t}\r\n\r\n\thandleScrollToElement(idDealer) {\r\n\t\tconsole.log(idDealer);\r\n\t\tconst d = ReactDOM.findDOMNode(this.refs['id' + idDealer]);\r\n\t\tif (d) {\r\n\t\t\td.focus();\r\n\t\t\twindow.scrollTo(0, d.offsetTop);\r\n\t\t}\r\n\r\n\r\n\t}\r\n\tsetOpendDealerBlock(idDealer) {\r\n\t\tthis.setState({ openDealerBlock: idDealer });\r\n\t\tthis.handleScrollToElement(idDealer);\r\n\t}\r\n\r\n\trender() {\r\n\r\n\t\tconst SEO_TITLE = (window.siteConfig.v2multicreneaux != undefined ? window.siteConfig.v2multicreneaux.Title : '');\r\n\t\tconst SEO_DESC = (window.siteConfig.v2multicreneaux != undefined ? window.siteConfig.v2multicreneaux.MetaDescription : '');\r\n\t\tconst happyHoureMessage = (window.innerWidth <= 800 ? CONSTANTS.LABELS.multislots_happy_hours_mobile : CONSTANTS.LABELS.multislots_happy_hours_desktop);\r\n\t\tconst isHappuHoureMessageEnabled = (happyHoureMessage.length > 2 ? true : false);\r\n\r\n\t\treturn (\r\n\t\t\t{CONSTANTS.LABELS.multislots_select_slot}
}\r\n\t\t\t\t\r\n\t\t\t\t\t{isHappuHoureMessageEnabled && CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{!this.state.isLoading && this.state.selectedData && this.state.selectedData.map(function (item, key) {\r\n\t\t\t\t\t\t\t\treturn (
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t { this.markerIsHover(item.DealerId) }\r\n\t\t\t\t\t\t\t\t\t\t: ''\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\tonMouseOut={(marker) =>\r\n\t\t\t\t\t\t\t\t\t\tthis.markerNotHover()\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\tonClick={(marker) => {\r\n\t\t\t\t\t\t\t\t\t\tthis.handleScrollToElement(item.DealerId);\r\n\t\t\t\t\t\t\t\t\t\tthis.markerIsHover(item.DealerId, true);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\tkey={item.DealerId} />\r\n\t\t\t\t\t\t\t}.bind(this)\r\n\t\t\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\theadTitleTag(SEO_TITLE.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()).replace('[nom_ville]', this.state.map.adress.toUpperCase()),\r\n\t\t\t\t\t\tSEO_DESC.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()).replace('[nom_ville]', this.state.map.adress.toUpperCase()))\r\n\t\t\t\t}\r\n\t\t\t\t{this.state.errorRedirect &&\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t }\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageNoMap));\r\n","import React, { Component } from 'react'\r\n\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { withRouter } from 'react-router'\r\nimport { headTitleTag } from '../../helpers/functions'\r\n\r\nimport { CurrentStepSetAction } from '../../actions/action'\r\nimport CONSTANTS from '../../constants.js'\r\n\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport BodyClassName from 'react-body-classname'\r\nimport DealerBlock from '../DealerBlock/DealerBlock'\r\nimport DealerBlockLoader from '../DealerBlock/dealerBlockLoader'\r\nimport HappyHoureTitle from '../Titles/HappyHoureTitle'\r\nimport ShowMoreButton from '../buttons/showMoreButton'\r\n\r\nimport './pagemapsolo.css'\r\n\r\nconst google = window.google\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { CurrentStepSetAction }\r\n\r\nclass PageSolo extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.getDistanceBetweenPlaces = this.getDistanceBetweenPlaces.bind(this)\r\n this.showMore = this.showMore.bind(this)\r\n this.dealerIsHover = this.dealerIsHover.bind(this)\r\n this.state = {\r\n data: [],\r\n isLoading: false,\r\n selectedData: [],\r\n errorRedirect: false,\r\n pagination: 1,\r\n stickyMap: null,\r\n currentDealerData: [],\r\n map: {\r\n lat: Number(window.siteConfig.defaultCountryGeo.lat),\r\n lng: Number(window.siteConfig.defaultCountryGeo.lng)\r\n }\r\n }\r\n this._isMounted = false\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.props.CurrentStepSetAction(2)\r\n this.setState({ isLoading: true })\r\n this._isMounted = true\r\n const listDealers = new fetchApiData()\r\n listDealers.getListDealers().then(\r\n data => {\r\n if (this._isMounted) {\r\n this.setState({\r\n isLoading: false,\r\n data: data.d\r\n\r\n })\r\n\r\n this.setState({\r\n selectedData: Object.values(this.getDistanceBetweenPlaces(this.props)).slice(0, this.state.pagination)\r\n })\r\n if (!Object.values(this.state.currentDealerData).length) { this.setState({ errorRedirect: true }) }\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({\r\n error: true,\r\n isLoading: false\r\n })\r\n console.error('fail', error)\r\n })\r\n\r\n // GA Start\r\n window.dataLayer.push({\r\n brand: window.siteConfig.brand,\r\n virtualPageURL: '/dealer-locator/solo-dealer',\r\n pageName: window.siteConfig.pageName,\r\n language: window.siteConfig.language,\r\n country: window.siteConfig.currentCountry,\r\n siteTypeLevel1: window.siteConfig.siteTypeLevel1,\r\n siteTypeLevel2: 'appointement',\r\n siteOwner: 'central',\r\n siteTarget: 'B2C',\r\n siteFamily: 'after-sales',\r\n pageCategory: 'dealer locator page'\r\n })\r\n\r\n // GA Ends\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n\r\n this.setState({\r\n selectedData: Object.values(this.getDistanceBetweenPlaces(nextProps)).slice(0, this.state.pagination)\r\n })\r\n }\r\n\r\n getDistanceBetweenPlaces(urlProps = this.props) {\r\n console.log(urlProps)\r\n const IdDealer = urlProps.match.params.iddealer\r\n let dealers = Object.assign({}, this.state.data)\r\n let dealerKey = -1\r\n dealers = Object.values(dealers).map(function (dealer, key) {\r\n if (dealer.GeoId === IdDealer) {\r\n dealerKey = key\r\n }\r\n\r\n return dealer\r\n })\r\n if (dealers.length > 0 && dealerKey > -1) {\r\n this.setState({\r\n map: {\r\n lat: Number(dealers[dealerKey].Latitude),\r\n lng: Number(dealers[dealerKey].Longitude)\r\n },\r\n currentDealerData: dealers[dealerKey], pagination: 1\r\n })\r\n } else {\r\n this.setState({ currentDealerData: [], pagination: 0 })\r\n }\r\n\r\n dealers = Object.values(dealers).map(function (dealer, key) {\r\n dealer.IsHover = false\r\n const currentAdress = new google.maps.LatLng(this.state.map.lat, this.state.map.lng)\r\n const dealerLocation = new google.maps.LatLng(Number(dealer.Latitude), Number(dealer.Longitude))\r\n dealer.Distance = (google.maps.geometry.spherical.computeDistanceBetween(currentAdress, dealerLocation) / 1000).toFixed(2)\r\n return dealer\r\n }.bind(this))\r\n this.setState({\r\n data: dealers.sort(function (a, b) {\r\n return a.Distance - b.Distance\r\n })\r\n })\r\n return dealers.sort(function (a, b) {\r\n return a.Distance - b.Distance\r\n })\r\n }\r\n\r\n showMore() {\r\n this.setState({\r\n selectedData: this.state.data.slice(0, this.state.pagination + 10),\r\n pagination: this.state.pagination + 4\r\n })\r\n }\r\n\r\n dealerIsHover(id) {\r\n let dealers = Object.assign({}, this.state.selectedData)\r\n let selectedDealer = []\r\n dealers = Object.values(dealers).map(function (dealer) {\r\n if (dealer.DealerId === id) {\r\n dealer.IsHover = true\r\n selectedDealer = dealer\r\n }\r\n return dealer\r\n })\r\n\r\n this.setState({\r\n selectedData: dealers\r\n })\r\n }\r\n\r\n handleScrollToElement(idDealer) {\r\n const d = ReactDOM.findDOMNode(this.refs['id' + idDealer])\r\n d.focus()\r\n window.scrollTo(0, d.offsetTop)\r\n }\r\n\r\n render() {\r\n const SEO_TITLE = (window.siteConfig.v2solodealer != undefined ? window.siteConfig.v2solodealer.Title : '')\r\n const SEO_DESC = (window.siteConfig.v2solodealer != undefined ? window.siteConfig.v2solodealer.MetaDescription : '')\r\n const happyHoureMessage = (window.innerWidth <= 800 ? CONSTANTS.LABELS.multislots_happy_hours_mobile : CONSTANTS.LABELS.multislots_happy_hours_desktop)\r\n const isHappuHoureMessageEnabled = (happyHoureMessage.length > 2)\r\n\r\n return (\r\n {CONSTANTS.LABELS.multislots_select_slot}
\r\n\t\t\t\t{isHappuHoureMessageEnabled &&\r\n \r\n }\r\n\r\n
\r\n )\r\n }\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageSolo))\r\n","import React from 'react';\r\n\r\n\r\n\r\nconst Icon = (props) => {\r\n\tconst { onKeyDown = (e) => { }, ...restProps } = props\r\n\t/*function sendDataToGTM(){\r\n\t\t //event label remonte les données renseignées lors de Click sur CTA \"afficher plus de garages à proximité\"\r\n\t\t\t\t\t window.dataLayer.push({\r\n\t\t\t\t\t 'pageName':\"multicréneaux\", \r\n\t\t\t\t\t 'event': 'uaevent', \r\n\t\t\t\t\t 'eventCategory': 'Content', \r\n\t\t\t\t\t 'eventAction': \"Display::MoreDealers\",\r\n\t\t\t\t\t 'eventLabel': window.labels['Multi-creneaux_AfficherPlusGarages'] \r\n\t\t\t\t }); \r\n\t props.onClick();\r\n\t}*/\r\n\tif (typeof restProps.dataImage != \"undefined\" && restProps.dataImage.length)\r\n\t\treturn (\r\n\t\t\t{CONSTANTS.LABELS.multislots_select_slot}
\r\n\r\n\r\n {isHappuHoureMessageEnabled &&
\r\n \r\n
\r\n\r\n \r\n {!this.state.isLoading && this.state.selectedData && this.state.selectedData.map(function (item, key) {\r\n return (
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(NotFoundPage)\r\n","import React, { Component } from 'react'\r\nimport BodyClassName from 'react-body-classname'\r\nimport {\r\n Route,\r\n Switch,\r\n Link,\r\n Redirect\r\n} from 'react-router-dom'\r\nimport Icon from '../buttons/Icon'\r\nimport { withRouter } from 'react-router'\r\nimport CONSTANTS from '../../constants.js'\r\n\r\nimport imageMTNAP from '../../images/AP/ap-404.png'\r\nimport imageMTNAC from '../../images/AC/ac-404.png'\r\nimport imageMTNDS from '../../images/AP/ap-404.png'\r\nimport imageMTNOV from '../../images/OV/ov-404.png'\r\n\r\nclass MaintenancePage extends Component {\r\n render() {\r\n const imageMTN = (window.siteConfig.currentBrand == 'P' ? imageMTNAP : (window.siteConfig.currentBrand == 'C' ? imageMTNAC : (window.siteConfig.currentBrand == 'D' ? imageMTNDS : imageMTNOV)))\r\n return (\r\n \r\n {/* \r\n {CONSTANTS.LABELS.common_v2_errorpage_button}\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(MaintenancePage)\r\n","import React, { Component } from 'react';\r\nimport BodyClassName from 'react-body-classname';\r\nimport { connect } from 'react-redux';\r\nimport { CurrentStepSetAction } from '../../actions/action';\r\nimport { headTitleTag } from '../../helpers/functions';\r\n\r\nimport CONSTANTS from '../../constants';\r\n\r\nimport './home.css';\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { CurrentStepSetAction };\r\n\r\nclass HomePage extends Component {\r\n\r\n\r\n\tcomponentDidMount() {\r\n\t\t// GA Start\r\n\t\twindow.dataLayer.push({\r\n\t\t\t'brand': window.siteConfig['brandGTM'],\r\n\t\t\t'virtualPageURL': \"/dealer-locator/searchwomap\",\r\n\t\t\t'pageName': window.siteConfig['pageName'],\r\n\t\t\t'language': window.siteConfig['language'],\r\n\t\t\t'country': window.siteConfig['currentCountry'],\r\n\t\t\t'siteTypeLevel1': window.siteConfig['siteTypeLevel1'],\r\n\t\t\t'siteTypeLevel2': \"appointement\",\r\n\t\t\t'siteOwner': \"central\",\r\n\t\t\t'siteTarget': \"B2C\",\r\n\t\t\t'siteFamily': \"after-sales\",\r\n\t\t\t'pageCategory': \"dealer locator page\",\r\n\t\t});\r\n\r\n\t\t// GA Ends\r\n\t\tthis.props.CurrentStepSetAction(1);\r\n\t\t// scroll to the top on user arrive to page\r\n\t\twindow.scrollTo(0, 0);\r\n\t}\r\n\trender() {\r\n\t\tconst SEO_TITLE = (window.siteConfig.v2homepage != undefined ? window.siteConfig.v2homepage.Title : '');\r\n\t\tconst SEO_DESC = (window.siteConfig.v2homepage != undefined ? window.siteConfig.v2homepage.MetaDescription : '');\r\n\r\n\t\treturn (\r\n\t\t\t\r\n \r\n \r\n {CONSTANTS.LABELS.common_v2_errorpage_button}\r\n \r\n
\r\n \r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(HomePage);\r\n","\r\nimport React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport CONSTANTS from '../../constants'\r\n\r\nimport { CurrentStepSetAction, setListDealersFiltred } from '../../actions/action'\r\nimport { headTitleTag, slugify } from '../../helpers/functions'\r\n\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nimport { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'\r\n\r\nimport MarkerClusterer from 'react-google-maps/lib/components/addons/MarkerClusterer'\r\nimport InfoBox from 'react-google-maps/lib/components/addons/InfoBox'\r\n\r\nimport BodyClassName from 'react-body-classname'\r\nimport './home.css'\r\nimport markerIconAP from '../../images/AP/pin-peugeot-map.png'\r\nimport markerIconMobileAP from '../../images/AP/pin-peugeot-map-mobile.png'\r\nimport markerIconActiveAP from '../../images/AP/pin-peugeot-hover.png'\r\nimport markerIconActiveMobileAP from '../../images/AP/pin-peugeot-hover-mobile.png'\r\nimport clusterIconAP from '../../images/AP/ap-pin-number.png'\r\nimport clusterIconAPMobile from '../../images/AP/ap-pin-number-mobile.png'\r\n/* import markerIconAC from '../../images/AC/citroen-pin.svg';\r\nimport markerIconActiveAC from '../../images/AC/citroen-pin-hover.svg'; */\r\n\r\nimport markerIconAC from '../../images/AC/pin-ac-defaut.svg'\r\nimport markerIconActiveAC from '../../images/AC/pin-ac-hover.svg'\r\nimport clusterIconAC from '../../images/AC/ac-pin-number.svg'\r\nimport clusterIconACMobile from '../../images/AC/ac-pin-number-mobile.svg'\r\n\r\nimport markerIconDS from '../../images/DS/ds-pin-Small.png'\r\nimport markerIconActiveDS from '../../images/DS/ds-pin-Big-Hover.png'\r\nimport clusterIconDS from '../../images/DS/ds-pin-number.svg'\r\nimport clusterIconDSMobile from '../../images/DS/ds-pin-number-mobile.svg'\r\n\r\nimport markerIconOV from '../../images/OV/pin-ov-defaut.png'\r\nimport markerIconActiveOV from '../../images/OV/pin-ov-hover.png'\r\nimport clusterIconOV from '../../images/OV/ov-pin-number.png'\r\nimport { isEqual } from 'lodash'\r\n\r\nvar _marker = {}\r\nif (window.siteConfig.currentBrand == 'P') {\r\n _marker = new Object({\r\n icon: window.innerWidth <= 800 ? markerIconMobileAP : markerIconAP,\r\n iconActive: window.innerWidth <= 800 ? markerIconActiveMobileAP : markerIconActiveAP,\r\n iconCluster: clusterIconAP,\r\n iconClusterMobile: clusterIconAPMobile,\r\n size: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(80, 80) : new window.google.maps.Size(120, 120) : false),\r\n scaledSize: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(80, 80) : new window.google.maps.Size(120, 120) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n })\r\n}\r\n\r\nif (window.siteConfig.currentBrand == 'C') {\r\n _marker = new Object({\r\n icon: markerIconAC,\r\n iconActive: markerIconActiveAC,\r\n iconCluster: clusterIconAC,\r\n iconClusterMobile: clusterIconACMobile,\r\n size: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(45, 53) : new window.google.maps.Size(112, 112) : false),\r\n scaledSize: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(45, 53) : new window.google.maps.Size(112, 112) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n })\r\n}\r\nif (window.siteConfig.currentBrand == 'D') {\r\n _marker = new Object({\r\n icon: markerIconDS,\r\n iconActive: markerIconActiveDS,\r\n iconCluster: clusterIconDS,\r\n iconClusterMobile: clusterIconDSMobile,\r\n size: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(45, 53) : new window.google.maps.Size(50, 50) : false),\r\n scaledSize: (window.google.maps ? window.innerWidth <= 800 ? new window.google.maps.Size(45, 53) : new window.google.maps.Size(50, 50) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n })\r\n}\r\n\r\nif (window.siteConfig.currentBrand == 'V') {\r\n _marker = new Object({\r\n icon: markerIconOV,\r\n iconActive: markerIconActiveOV,\r\n iconCluster: clusterIconOV,\r\n size: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n scaledSize: (window.google.maps ? new window.google.maps.Size(44, 63) : false),\r\n origin: (window.google.maps ? new window.google.maps.Point(0, 0) : false)\r\n })\r\n}\r\n\r\nconst labels = window.labels\r\nconst siteConfig = window.siteConfig\r\n\r\nconst google = window.google\r\nvar Gmap\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { CurrentStepSetAction, setListDealersFiltred }\r\n\r\nconst MyMapComponent = withGoogleMap(\r\n (props) =>\r\n \r\n \r\n\r\n {\r\n to={`${CONSTANTS.SITE_ROUTS.SOLODEALERPAGE}${slugify(item.City) + '/' + slugify(item.Name) + '/' + item.GeoId}`} className='mark-buttons button-filled' onClick={() => {\r\n // event label remonte les informations du dealer choisi\r\n window.dataLayer.push({\r\n pageName: 'dealer locator',\r\n event: 'uaevent',\r\n eventCategory: 'Dealerlocator',\r\n eventAction: 'Redirection::Internal::DealerSchedule',\r\n eventLabel: item.Name\r\n\r\n })\r\n this.handleScroll()\r\n\r\n }}\r\n >\r\n {CONSTANTS.LABELS.dealer_locator_mapcta}\r\n \r\n
\r\n\r\n \r\n }\r\n\r\n render() {\r\n const SEO_TITLE = (window.siteConfig.v2homepage != undefined ? window.siteConfig.v2homepage.Title : '')\r\n const SEO_DESC = (window.siteConfig.v2homepage != undefined ? window.siteConfig.v2homepage.MetaDescription : '')\r\n return (\r\n \r\n
\r\n {item.Name}
\r\n\r\n
\r\n \r\n \r\n
\r\n {item.Distance} Km
\r\n\r\n {item.Address}
\r\n {item.ZipCode} {item.City}\r\n
\r\n {(item.LCV || item.PC) && }\r\n
}\r\n \r\n {(item.PC && !item.LCV) &&
\r\n\r\n {CONSTANTS.LABELS.dealer_locator_filter_pc_descriptive}
/*the dealer do only particular vehicles*/}\r\n {(item.LCV && !item.PC) &&{CONSTANTS.LABELS.dealer_locator_filter_lcv_descriptive}
/*the dealer do only utilitaire vehicles*/}\r\n {(item.LCV && item.PC) &&{CONSTANTS.LABELS.dealer_locator_filter_pc_lvc_descriptive}
/*the dealer do both particular & utilitaire vehicles*/}\r\n\r\n {\r\n headTitleTag(SEO_TITLE.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()),\r\n SEO_DESC.replace('[nom_marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()))\r\n }\r\n { this.handleMarkerRef(m, item.DealerId) }}\r\n icon={(item.IsHover ? new Object({\r\n url: _marker.iconActive,\r\n size: _marker.size,\r\n scaledSize: _marker.scaledSize,\r\n origin: _marker.origin\r\n })\r\n : new Object({\r\n url: _marker.icon,\r\n size: _marker.size,\r\n scaledSize: _marker.scaledSize,\r\n origin: _marker.origin\r\n }))}\r\n onMouseOver={window.siteConfig.currentBrand != 'D' ?\r\n (marker) => { this.markerIsHover(item.DealerId) }\r\n : ''\r\n }\r\n onClick={(marker) => {\r\n this.markerIsClicked(item.DealerId, true)\r\n }}\r\n onMouseOut={(marker) =>\r\n this.markerNotHover(item.DealerId)}\r\n\r\n key={item.DealerId}\r\n >\r\n\r\n {item.isInfosVisible && this.infoBoxRender(item)}\r\n\r\n \r\n }.bind(this)\r\n )}\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(HomePageMap)\r\n","import React from 'react'\r\nimport ContentLoader from 'react-content-loader'\r\n\r\nconst VosBesoinsLoader = (props) => {\r\n if (window.isMobile() == 'desktop') {\r\n return (\r\n \r\n\t\t\t{props.Title && }\r\n\r\n\r\n\t\t\t{props.SubTitle && \r\n\t\t\t}\r\n\t\t
\r\n\t);\r\n\r\n}\r\n\r\nexport default StepHeadline;\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport \"./besoinsList.css\";\r\n\r\nclass BesoinList extends PureComponent {\r\n static defaultProps = {\r\n className: \"\",\r\n };\r\n constructor(props) {\r\n super(props);\r\n }\r\n componentDidMount() {\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n - \r\n {this.props.children && this.props.children.map(function (child, id) {\r\n\r\n return
\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default Input;\r\n","import React, { PureComponent } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport \"./Forms.css\";\r\n// add .error to component for error state.\r\n\r\nclass Button extends PureComponent {\r\n static defaultProps = {\r\n classes: \"\",\r\n linkTo: \"\",\r\n Type: \"filled\", // filled or border\r\n };\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleClick = () => {\r\n if (this.props.Disabled) {\r\n return;\r\n }\r\n this.props.onClick();\r\n };\r\n handleKeyDown = (event) => {\r\n if (this.props.Disabled) {\r\n return;\r\n }\r\n if (event.key === \"Enter\") {\r\n this.props.onClick();\r\n }\r\n };\r\n\r\n render() {\r\n const { Disabled, customButtonStyle } = this.props;\r\n const buttonType =\r\n this.props.Type == \"filled\" ? \"button-filled\" : \"button-bordred--full\";\r\n if (this.props.linkTo.length && !Disabled)\r\n return (\r\n \r\n \r\n \r\n {this.props.children}\r\n
\r\n \r\n \r\n );\r\n else\r\n return (\r\n \r\n \r\n {this.props.children}\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default Button;\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport \"./Forms.css\";\r\n// add .error to component for error state.\r\n\r\nclass Radio extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst { isChecked, customDivStyle, customInputStyle, customClassName, customLabelStyle,...otherProps } = this.props\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\nexport default Radio;\r\n","import React, { PureComponent } from \"react\";\r\nimport \"./Forms.css\";\r\nimport CONSTANTS from \"../../constants\";\r\n// add .error to component for error state.\r\n\r\nclass CheckBox extends PureComponent {\r\n static defaultProps = {\r\n label: \"\",\r\n wrapperClasses: \"\",\r\n };\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n const {\r\n isChecked,\r\n label,\r\n wrapperClasses,\r\n customLabelStyle,\r\n ...otherProps\r\n } = this.props;\r\n return (\r\n \r\n this.props.onClick(e)}\r\n />\r\n {label && (\r\n
\r\n );\r\n }\r\n}\r\nexport default CheckBox;\r\n","\r\nimport React, { PureComponent } from 'react';\r\nimport \"./Forms.css\";\r\n// add .error to component for error state.\r\n\r\nclass Select extends PureComponent {\r\n static defaultProps = {\r\n Options: [],\r\n Disabled: false,\r\n Inverse: false,\r\n ariaLabel:'',\r\n autoComplete:'off'\r\n };\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n\r\n render() {\r\n const { Options, Selected, Disabled, Name, Inverse } = this.props;\r\n const entries = Object.entries(Options)\r\n function sortable(entries, Inverse) {\r\n if (Inverse == true) {\r\n return entries.sort((a, b) => {\r\n var x = a[1].toLowerCase();\r\n var y = b[1].toLowerCase();\r\n return x > y ? -1 : x < y ? 1 : 0;\r\n })\r\n } else {\r\n return entries.sort((a, b) => {\r\n var x = a[1].toLowerCase();\r\n var y = b[1].toLowerCase();\r\n return x < y ? -1 : x > y ? 1 : 0;\r\n })\r\n }\r\n }\r\n \r\n const sortableOptions = sortable(entries, Inverse)\r\n return (\r\n \r\n \r\n {\r\n sortableOptions.map(function (option, key) {\r\n return \r\n {option[1]}\r\n \r\n\r\n })}\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default Select;\r\n","import React, { PureComponent } from \"react\";\r\nimport \"./Forms.css\";\r\n// add .error to component for error state.\r\n\r\nclass TextArea extends PureComponent {\r\n static defaultProps = {\r\n rows: \"4\",\r\n cols: \"120\",\r\n classes: \"\",\r\n autoComplete: \"on\",\r\n };\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.iserror && (\r\n
\r\n );\r\n }\r\n}\r\nexport default TextArea;\r\n","\r\nimport React, { PureComponent } from 'react';\r\nimport \"./Forms.css\";\r\nimport CONSTANTS from '../../constants.js';\r\nimport { connect } from 'react-redux';\r\nimport { setUploadFiles, setCustomerAttachmentId } from '../../actions/action';\r\nimport fetchApiData from '../apiHandlers/fetchApiData';\r\nimport Dropzone from 'react-dropzone'\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { setUploadFiles, setCustomerAttachmentId };\r\n\r\nclass Attachments extends PureComponent {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showFormErrors: false,\r\n ErrorMsg: \"\",\r\n isLoading: false\r\n };\r\n }\r\n\r\n validateAttachmentFile(file) {\r\n let fileList = this.props.store.UploadFiles\r\n let attachmentId = this.props.store.customerAttachmentId\r\n const fileService = new fetchApiData();\r\n\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n fileService.postSendFile(formData).then(\r\n res => {\r\n switch (res.errorCode) {\r\n case 0:\r\n file.attachmentUrl = res.encodedUrl\r\n fileList.push(file)\r\n this.props.setUploadFiles(fileList);\r\n if (attachmentId === \"\") {\r\n this.props.setCustomerAttachmentId(res.customerAttachmentId);\r\n }\r\n this.setState({ isLoading: false })\r\n this.setState({ showFormErrors: false })\r\n break\r\n\r\n default:\r\n this.setState({ isLoading: false })\r\n this.setState({ showFormErrors: true });\r\n this.setState({ ErrorMsg: res.message });\r\n break\r\n }\r\n },\r\n error => {\r\n console.log(error)\r\n this.setState({ isLoading: false })\r\n this.setState({ showFormErrors: true });\r\n this.setState({ ErrorMsg: error.message });\r\n }\r\n )\r\n }\r\n removeFile = file => {\r\n let fileList = this.props.store.UploadFiles\r\n const removeFileService = new fetchApiData();\r\n //remove file from front only\r\n const newFiles = [...fileList]; // make a var for the new array\r\n newFiles.splice(newFiles.indexOf(file), 1); // remove the file from the array\r\n this.props.setUploadFiles(newFiles);\r\n //OLD Code\r\n removeFileService.DeleteAttachment(file.attachmentUrl).then(\r\n res => {\r\n if (res.d.status === 'OK') {\r\n const newFiles = [...fileList]; // make a var for the new array\r\n newFiles.splice(newFiles.indexOf(file), 1); // remove the file from the array\r\n this.props.setUploadFiles(newFiles);\r\n }\r\n },\r\n error => {\r\n this.setState({ isLoading: false })\r\n this.setState({ showFormErrors: true });\r\n this.setState({ ErrorMsg: error.message });\r\n }\r\n )\r\n }\r\n\r\n render() {\r\n const isLoading = (this.state.isLoading ? \" isLoading\" : \"\");\r\n return (\r\n {this.props.labelerror}
\r\n )}\r\n \r\n {\r\n if (acceptedFiles.length > 3) {\r\n this.setState({ showFormErrors: true });\r\n this.setState({ ErrorMsg: \"Un client ne peut uploadé que 3 pièces jointes max.\" });\r\n } else {\r\n acceptedFiles.forEach((file) => {\r\n this.setState({ showFormErrors: false });\r\n\r\n const reader = new FileReader()\r\n\r\n reader.onabort = () => { console.log('file reading was aborted') }\r\n reader.onerror = () => { console.log('file reading has failed') }\r\n reader.onload = () => {\r\n console.log('file loading ...')\r\n this.setState({ isLoading: true })\r\n this.validateAttachmentFile(file)\r\n }\r\n reader.readAsArrayBuffer(file)\r\n })\r\n }\r\n }}>\r\n {({ getRootProps, getInputProps }) => (\r\n \r\n
\r\n {this.state.showFormErrors && \r\n \r\n\r\n {\r\n this.props.store.UploadFiles.length > 0 &&\r\n \r\n }\r\n
\r\n )}\r\n \r\n \r\n {{CONSTANTS.LABELS.needs_attachment_cta1}}\r\n
\r\n\r\n {\r\n \r\n \r\n
\r\n \r\n {\r\n Object.values(this.props.store.UploadFiles).map((file, key) => {\r\n return {file.path}\r\n e.key === 'Enter' && this.removeFile(file)}\r\n onClick={() => this.removeFile(file)}\r\n className='mark-icons delete-icon'\r\n />\r\n \r\n })\r\n }\r\n
\r\n }\r\n {this.state.ErrorMsg}
}\r\n {forfaitCatTitle}
\r\n )}\r\n\r\n
\r\n \r\n \r\n this.props.selectThatForfait(\r\n e.target.checked,\r\n forfait.Items[0].Ref\r\n )\r\n }\r\n customLabelStyle={{\r\n color:\r\n forfait.isSelected && CONSTANTS.SITE_INFO.BRAND_CODE === \"C\"\r\n ? \"#57718a\"\r\n : CONSTANTS.SITE_INFO.BRAND_CODE === \"C\"\r\n ? \"#3b3938\"\r\n : undefined,\r\n }}\r\n />\r\n {!!forfait.Comments.length &&\r\n CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && (\r\n {\r\n e.key === \"Enter\" &&\r\n (this.state.showItemDetails\r\n ? this.setState({ showItemDetails: false })\r\n : this.setState({ showItemDetails: true }));\r\n }}\r\n onClick={() =>\r\n this.state.showItemDetails\r\n ? this.setState({ showItemDetails: false })\r\n : this.setState({ showItemDetails: true })\r\n }\r\n >\r\n )}\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&\r\n !!forfait.Comments.length && (\r\n
\r\n \r\n {\r\n e.key === \"Enter\" &&\r\n (this.state.showItemDetails\r\n ? this.setState({ showItemDetails: false })\r\n : this.setState({ showItemDetails: true }));\r\n }}\r\n onClick={() =>\r\n this.state.showItemDetails\r\n ? this.setState({ showItemDetails: false })\r\n : this.setState({ showItemDetails: true })\r\n }\r\n >\r\n\r\n {this.state.showItemDetails && (\r\n
\r\n )}\r\n \r\n {typeof forfait.Comments == \"object\" &&\r\n forfait.Comments.map(function(item, key) {\r\n return (\r\n \r\n {key + 1} - {item.Text}\r\n
\r\n \r\n );\r\n })}\r\n {typeof forfait.Comments == \"string\" && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n {typeof forfait.Comments == \"string\" && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n {!!Number(this.props.store.booking.happy) && (\r\n \r\n {priceFormat(forfait.Items[0].Prix) +\r\n ` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n )}\r\n \r\n {/* {this.currencyPlacement && CONSTANTS.LABELS.common_v2_currency} */}\r\n {!!Number(this.props.store.booking.happy)\r\n ? priceFormat(\r\n (\r\n forfait.Items[0].Prix -\r\n forfait.Items[0].Prix *\r\n 0.01 *\r\n this.props.store.booking.happy\r\n ).toFixed(2)\r\n )\r\n : priceFormat(forfait.Items[0].Prix)}\r\n {` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n\r\n {!!Number(this.props.store.booking.happy) && (\r\n \r\n {this.props.store.booking.happy}%\r\n \r\n )}\r\n
\r\n {this.state.showItemDetails &&\r\n CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && (\r\n \r\n {typeof forfait.Comments == \"object\" &&\r\n forfait.Comments.map(function(item, key) {\r\n return (\r\n \r\n {key + 1} - {item.Text}\r\n
\r\n \r\n );\r\n })}\r\n {typeof forfait.Comments == \"string\" && (\r\n \r\n {\" \"}\r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n {typeof forfait.Comments == \"string\" && (\r\n \r\n {\" \"}\r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n
\r\n );\r\n }\r\n}\r\nexport default connect(mapStateToProps)(BesoinsDetailsListRegular);\r\n","\r\nimport React, { PureComponent } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport CONSTANTS from '../../../constants';\r\nimport { priceFormat } from '../../../helpers/functions';\r\nimport { CheckBox, Radio } from \"../../Forms/Forms\";\r\nimport './forfaitRevisionItem.css';\r\nconst mapStateToProps = state => state;\r\n\r\nclass ForfaitRevisionItem extends PureComponent {\r\n static defaultProps = {\r\n className: \"\",\r\n selectedForfait: \"\",\r\n data: {},\r\n TotalPrice: 0,\r\n showComments: false,\r\n };\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedForfait: \"\",\r\n showObligatoryMessage: false,\r\n showItemDetails: false,\r\n }\r\n this.currencyPlacement = !!Number(window.siteConfig.PoundPlacement);\r\n }\r\n updatePrice = () => {\r\n let totalPrice = this.props.data.Items[0].Prix;\r\n if (this.props.data.Operations != null)\r\n this.props.data.Operations.map(function (operation, keyopp) {\r\n if (operation.isSelected)\r\n totalPrice += operation.Items[0].Prix;\r\n });\r\n\r\n this.setState({ TotalPrice: totalPrice });\r\n };\r\n componentDidMount() {\r\n let totalPrice = this.props.data.Items[0].Prix;\r\n if (this.props.data.Operations != null)\r\n this.props.data.Operations.map(function (operation, keyopp) {\r\n if (operation.isSelected)\r\n totalPrice += operation.Items[0].Prix;\r\n });\r\n\r\n this.setState({ TotalPrice: totalPrice });\r\n\r\n }\r\n\r\n render() {\r\n const forfait = this.props.data;\r\n const arrowObligatoryClasses = (this.state.showObligatoryMessage ? 'isOpen' : '');\r\n return (\r\n \r\n\r\n {this.state.selectedData.map(function (forfaitType, key) {\r\n let showGroupTitle = true;\r\n return forfaitType.SubFunctionList.length && forfaitType.SubFunctionList[0].ForfaitList.map(function (forfait, keyforfait) {\r\n return (\r\n this.selectThatForfait(isChecked, ref)} />\r\n {showGroupTitle = false}\r\n \r\n )\r\n\r\n }.bind(this))\r\n }.bind(this))}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n {(this.props.data.isSelected) && \r\n {\r\n this.updatePrice()\r\n this.setState({ selectedForfait: e.target.value });\r\n this.props.updateSelectedForfait(e.target.checked, forfait.Items[0].Ref);\r\n this.props.enableAddButton(e.target.checked);\r\n }\r\n }\r\n isChecked={this.props.data.isSelected}\r\n />\r\n {!!forfait.Comments.length && this.setState({ showComments: (this.state.showComments ? false : true) })}>}\r\n
\r\n {this.state.showComments && \r\n {typeof forfait.Comments == 'object' && forfait.Comments.length && forfait.Comments.map(function (item, key) {\r\n return {key + 1} - {item.Text}
;\r\n })}\r\n {typeof forfait.Comments == 'string' && forfait.Comments.length && {forfait.Comments}
}\r\n\r\n
}\r\n ;\r\n })}\r\n {typeof forfait.Comments == 'string' && forfait.Comments.length && {forfait.Comments}
}\r\n\r\n
\r\n\r\n
\r\n }\r\n\r\n - \r\n
- \r\n \r\n\r\n\r\n {CONSTANTS.LABELS.needs_basket_maintenance_label6}\r\n\r\n\r\n \r\n
- \r\n\r\n \r\n\r\n\r\n {forfait.Libelle}\r\n {!!forfait.Comments.length &&\r\n (this.state.showItemDetails != forfait.Items[0].Ref ? this.setState({ showItemDetails: forfait.Items[0].Ref }) : this.setState({ showItemDetails: false }))}>\r\n }\r\n\r\n\r\n\r\n\r\n \r\n {priceFormat(forfait.Items[0].Prix)}{` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n\r\n {\r\n this.state.showItemDetails && this.state.showItemDetails == forfait.Items[0].Ref &&\r\n\r\n {typeof forfait.Comments == 'object' && forfait.Comments.map(function (item, key) {\r\n return {key + 1} - {item.Text}\r\n }\r\n
;\r\n })}\r\n {typeof forfait.Comments == 'string' && {forfait.Comments}
}\r\n \r\n {forfait.Operations != null && - \r\n \r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n this.setState({ showObligatoryMessage: (this.state.showObligatoryMessage ? false : true) })}>\r\n\r\n {this.state.showObligatoryMessage && }\r\n\r\n\r\n }\r\n {forfait.Operations != null && forfait.Operations.map(function (operation, keyopp) {\r\n return (
- \r\n \r\n\r\n\r\n {`${priceFormat(operation.Items[0].Prix)} ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n\r\n\r\n {\r\n this.state.showItemDetails && this.state.showItemDetails == operation.Items[0].Ref &&\r\n\r\n {typeof operation.Comments == 'object' && operation.Comments.map(function (item, key) {\r\n return {key + 1} - {item.Text}\r\n }\r\n\r\n
;\r\n })}\r\n {typeof operation.Comments == 'string' && {operation.Comments}
}\r\n )\r\n\r\n }.bind(this))}\r\n\r\n\r\n
\r\n
\r\n \r\n {!!Number(this.props.store.booking.happy) && \r\n {priceFormat(this.state.TotalPrice)}{` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n }\r\n
\r\n \r\n
\r\n\r\n {!!Number(this.props.store.booking.happy) && {this.props.store.booking.happy}%\r\n }\r\n\r\n {CONSTANTS.LABELS.needs_basket_maintenance_label9}
\r\n\r\n {(!!Number(this.props.store.booking.happy) ? priceFormat(this.state.TotalPrice - (this.state.TotalPrice * 0.01 * this.props.store.booking.happy).toFixed(2)) : priceFormat(this.state.TotalPrice) )}{` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PopUp;\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux';\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager';\r\n\r\nimport { CheckBox, Button, Radio } from \"../../Forms/Forms\";\r\nimport ForfaitRevisionItem from './forfaitRevisionItem';\r\nimport CONSTANTS from '../../../constants';\r\nimport PopUp from '../../popup/popup';\r\nimport APwarningPicto from '../../../images/AP/ap-warning.svg';\r\nimport ACwarningPicto from '../../../images/AC/ac-warning.svg';\r\nimport DSwarningPicto from '../../../images/DS/ds-warning.svg';\r\nimport OVwarningPicto from '../../../images/OV/ov-warning.svg';\r\n\r\nconst mapStateToProps = state => state;\r\n\r\nclass BesoinsDetailsListRevision extends PureComponent {\r\n static defaultProps = {\r\n className: \"\",\r\n data: {},\r\n numberOfselected: \"\",\r\n };\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n blockEmpty: true,\r\n selectedData: this.props.data,\r\n showDetails: false,\r\n numberOfselected: 0,\r\n showOperations: false,\r\n selectedForfait: 0,\r\n showObligatoryOperationsPopup: false\r\n }\r\n this.selectThatForfait = this.selectThatForfait.bind(this);\r\n this.numberOfSelectedOperations = 0;\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ numberOfselected: this.props.numberOfselected })\r\n }\r\n selectThatForfait(isChecked, id, isOperation = false) {\r\n // this function add \"isSelected (bool)\" to selected forfaits and opearations(sous forfaits).\r\n let numberOfselected = this.state.numberOfselected;\r\n let data = JSON.parse(JSON.stringify(this.state.selectedData));\r\n const dataUpdatedWithSelectedForfaits = data.map(function (forfaitType, key) {\r\n forfaitType.SubFunctionList[0].ForfaitList = forfaitType.SubFunctionList[0].ForfaitList.map(function (forfait, keyforfait) {\r\n\r\n // Check Forfaits\r\n if (!isOperation) {\r\n if (forfait.Items[0].Ref == id) {\r\n forfait['isSelected'] = true;\r\n numberOfselected++;\r\n } else {\r\n forfait['isSelected'] = false;\r\n\r\n }\r\n }\r\n\r\n // Check Operations \r\n\r\n if (forfait.Operations != null) {\r\n\r\n forfait.Operations = forfait.Operations.map(function (Operation, opKey) {\r\n if (Operation.Items[0].Ref == id)\r\n if (isChecked) {\r\n Operation['isSelected'] = true;\r\n\r\n }\r\n else {\r\n Operation['isSelected'] = false;\r\n }\r\n return Operation;\r\n });\r\n }\r\n\r\n\r\n\r\n return forfait;\r\n });\r\n return forfaitType;\r\n });\r\n this.setState({ selectedData: dataUpdatedWithSelectedForfaits, numberOfselected: numberOfselected });\r\n }\r\n checkObligatoryOperations = () => {\r\n let selectedForfait = (this.state.selectedData[0].SubFunctionList[0].ForfaitList != null) && this.state.selectedData[0].SubFunctionList[0].ForfaitList.filter(forfait => forfait.isSelected)\r\n let operations = selectedForfait[0].Operations\r\n let selectedOperations = (operations != null) && operations.filter(operation => operation.isSelected)\r\n this.numberOfSelectedOperations = selectedOperations.length\r\n if (operations != null && !this.numberOfSelectedOperations) {\r\n this.setState({ showObligatoryOperationsPopup: true })\r\n }\r\n else {\r\n this.props.getSelectedForfait(this.state.selectedData);\r\n }\r\n }\r\n\r\n render() {\r\n let warningPicto = ''\r\n switch (CONSTANTS.SITE_CONFIG.currentBrand) {\r\n case 'P':\r\n warningPicto = APwarningPicto\r\n break;\r\n case 'C':\r\n warningPicto = ACwarningPicto\r\n break;\r\n case 'D':\r\n warningPicto = DSwarningPicto\r\n break;\r\n case 'V':\r\n warningPicto = OVwarningPicto\r\n break;\r\n default:\r\n warningPicto = APwarningPicto;\r\n }\r\n const popInObligatoryOperationsContent = <> \r\n \r\n {this.props.titlePicto.showTitlePicto && (\r\n
\r\n
\r\n \r\n {this.props.titlePicto.showTitlePicto && (\r\n
\r\n \r\n {this.props.content}\r\n
\r\n \r\n {this.props.primaryButtonLabel.length !== 0 && (\r\n \r\n )}\r\n {this.props.secondaryButtonLabel.length !== 0 && (\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n return (\r\n {CONSTANTS.LABELS.needs_basket_maintenance_alert_label1}
\r\n\r\n
\r\n {CONSTANTS.LABELS.needs_basket_maintenance_alert_label2}
\r\n{CONSTANTS.LABELS.needs_basket_maintenance_alert_label3}
\r\n\r\n this.setState({ showObligatoryOperationsPopup: false })}\r\n handleSecondaryButton={() => this.props.getSelectedForfait(this.state.selectedData)}\r\n />\r\n }\r\n
\r\n );\r\n }\r\n}\r\nexport default connect(mapStateToProps)(BesoinsDetailsListRevision);\r\n","\r\nimport React, { PureComponent } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport CONSTANTS from \"../../../constants\";\r\n\r\nimport { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setCodePasForAnnualService } from '../../../actions/action';\r\n\r\nimport { Input, Button, Select } from \"../../Forms/Forms\";\r\nimport fetchApiData from '../../apiHandlers/fetchApiData'\r\nimport vinImage from '../../../images/AP/vininfo-illustration.jpg';\r\nimport Icon from '../../buttons/Icon';\r\nimport \"./serieRevision.css\";\r\nimport PopUp from '../../popup/popup'\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setCodePasForAnnualService };\r\n\r\nclass SerieRevision extends PureComponent {\r\n static defaultProps = {\r\n prevData: [],\r\n };\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showPopup: false,\r\n showKilometrage: false,\r\n showVinField: true,\r\n loading: false,\r\n serieInput: this.props.store.car.SerialNumber || \"\",\r\n serieCodeError: false,\r\n contratSerivce: false,\r\n kilometrageData: [],\r\n kilometrageSelectedValue: 0,\r\n showInfosSerie: false,\r\n };\r\n this.isRecallCampagneActivate = !!Number(window.siteConfig.ActivateRecallCampaign);\r\n }\r\n componentDidMount() {\r\n this.setState({ serieInput: this.props.store.car.SerialNumber || '' })\r\n if (this.props.store.car.SerialNumber !== undefined && this.props.store.car.SerialNumber.length) {\r\n this.checkSerieCode();\r\n }\r\n }\r\n checkSerieCode = () => {\r\n const CarDetails = new fetchApiData();\r\n this.setState({ loading: true });\r\n\r\n CarDetails.getSerie(this.state.serieInput).then(\r\n data => {\r\n switch (data.d.ErrorCode) {\r\n case 0:\r\n if (this.isRecallCampagneActivate && this.props.store.car.SerialNumber !== undefined && !this.props.store.car.SerialNumber.length) this.checkCampRapEligibility(this.state.serieInput);\r\n this.props.setVeiculeInfos(data.d.VehicleInfo);\r\n this.setState({ loading: false, serieCodeError: '', showKilometrage: true, showVinField: false });\r\n this.loadPas();\r\n break;\r\n default:\r\n this.setState({ serieCodeError: data.d.ErrorMessage })\r\n this.setState({ loading: false });\r\n break;\r\n }\r\n })\r\n .catch(error => {\r\n console.log('fait: ', error)\r\n this.setState({ loading: false });\r\n\r\n });\r\n\r\n }\r\n checkCampRapEligibility = () => {\r\n const cpRappelData = new fetchApiData()\r\n cpRappelData.getCompagneRappelEligibility(this.state.serieInput).then(\r\n data => {\r\n if (data.d.Eligible) {\r\n this.setState({\r\n showPopup: true\r\n });\r\n }\r\n })\r\n .catch(error => {\r\n console.log('fait: ', error)\r\n });\r\n\r\n }\r\n closePopup() {\r\n this.setState({\r\n showPopup: false\r\n });\r\n }\r\n loadPas = () => {\r\n const pasForfaits = new fetchApiData();\r\n this.setState({ loading: true });\r\n\r\n pasForfaits.getPas({\r\n \"geoID\": this.props.store.dealer.geoID,\r\n \"mileage\": this.props.store.kilo.kilometrage,\r\n \"vin\": this.state.serieInput\r\n }).then(\r\n data => {\r\n let listPas = [];\r\n listPas[\"\"] = CONSTANTS.LABELS.needs_basket_maintenance_label5;\r\n data.d.map(function (value) {\r\n listPas[value.Value] = value.Text;\r\n });\r\n this.setState({ kilometrageData: listPas, loading: false });\r\n })\r\n .catch(error => {\r\n console.log('error getPas : ', error)\r\n\r\n });\r\n }\r\n\r\n render() {\r\n const isLoadingCssClass = (this.state.loading ? \" isLoading\" : \"\");\r\n const showInfosSerie = this.state.showInfosSerie;\r\n return (\r\n \r\n\r\n\r\n {this.state.selectedData.map(function (forfaitType) {\r\n return Object.values(forfaitType.SubFunctionList).length > 0 &&\r\n forfaitType.SubFunctionList[0].ForfaitList.map(function (forfait, keyforfait) {\r\n return ( \r\n this.props.getshowDetails(detailsComments)\r\n }*/\r\n key={forfait.Items[0].Ref}\r\n enableAddButton={(isChecked) => this.setState({ numberOfselected: 1 })}\r\n familyCode={forfaitType.SubFunctionList[0].Code}\r\n updateSelectedForfait={(isChecked, ref) => {\r\n this.setState({ selectedForfait: ref });\r\n this.selectThatForfait(isChecked, ref)\r\n }}\r\n updateSelectedOperation={(isChecked, ref) => {\r\n this.selectThatForfait(isChecked, ref, true);\r\n }\r\n }\r\n selectedForfait={this.state.selectedForfait}\r\n />)\r\n\r\n }.bind(this))\r\n }.bind(this))}\r\n
\r\n { // show popup if no obligatory operation is selected \r\n this.state.showObligatoryOperationsPopup &&\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n { this.closePopup() }} />}\r\n
\r\n );\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SerieRevision);\r\n","import React, { useState, useEffect } from \"react\";\r\nimport Radio from \"../../Forms/Radio\";\r\nimport CONSTANTS from \"../../../constants\";\r\nimport CheckBox from \"../../Forms/CheckBox\";\r\nimport { connect } from \"react-redux\";\r\n\r\nconst mapStateToProps = (state) => state;\r\n\r\nconst ForfaitRevisionItemFlex = (props) => {\r\n const [selectedForfait, setSelectedForfait] = useState(\"\");\r\n const [showItemDetails, setShowItemDetails] = useState(false);\r\n const [showComments, setShowComments] = useState(false);\r\n const currencyPlacement = !!Number(window.siteConfig.PoundPlacement);\r\n const forfait = props.data;\r\n\r\n const updatePrice = () => {\r\n let totalPrice = props.data.Items[0].Prix;\r\n if (props.data.Operations != null)\r\n props.data.Operations.map(function(operation) {\r\n if (operation.isSelected) totalPrice += operation.Items[0].Prix;\r\n });\r\n props.setTotalPrice(totalPrice);\r\n };\r\n\r\n useEffect(() => {\r\n let totalPrice = props.data.Items[0].Prix;\r\n if (props.data.Operations != null)\r\n props.data.Operations.map(function(operation) {\r\n if (operation.isSelected) totalPrice += operation.Items[0].Prix;\r\n });\r\n props.setTotalPrice(totalPrice);\r\n }, []);\r\n\r\n const getFinalPrice = (priceToDisplay) =>\r\n currencyPlacement ? (\r\n \r\n {CONSTANTS.LABELS.common_v2_currency +\r\n priceToDisplay +\r\n ` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n ) : (\r\n \r\n {priceToDisplay +\r\n ` ${CONSTANTS.LABELS.common_v2_currency}` +\r\n ` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n \r\n );\r\n\r\n return (\r\n \r\n
\r\n {this.state.showPopup && { e.key === 'Enter' && this.props.ClosePopin() }}\r\n onClick={this.props.ClosePopin}>\r\n
\r\n {!showInfosSerie && \r\n\r\n \r\n
}\r\n {showInfosSerie &&\r\n - \r\n
- \r\n\r\n \r\n \r\n
- \r\n
- \r\n
\r\n this.checkSerieCode()}\r\n Disabled={this.state.serieInput.length < 8}\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
}\r\n {this.state.showKilometrage && \r\n
}\r\n - \r\n
- \r\n\r\n \r\n \r\n
- \r\n
\r\n
\r\n }\r\n e.key === 'Enter' && (this.state.showInfosSerie ?\r\n this.setState({ showInfosSerie: false })\r\n :\r\n this.setState({ showInfosSerie: true }))\r\n }\r\n onClick={() => (this.state.showInfosSerie ?\r\n this.setState({ showInfosSerie: false })\r\n :\r\n this.setState({ showInfosSerie: true }))\r\n }>\r\n
\r\n \r\n
\r\n {CONSTANTS.LABELS.needs_basket_maintenance_help1}
\r\n\r\n
\r\n \r\n \r\n\r\n
\r\n
\r\n \r\n
\r\n {\r\n updatePrice();\r\n setSelectedForfait(e.target.value);\r\n props.updateSelectedForfait(\r\n e.target.checked,\r\n forfait.Items[0].Ref\r\n );\r\n props.enableAddButton(e.target.checked);\r\n }}\r\n isChecked={props.data.isSelected}\r\n customLabelStyle={{\r\n fontSize: window.isMobile() === \"desktop\" ? \"16px\" : \"14px\",\r\n color:\r\n props.data.isSelected && CONSTANTS.SITE_INFO.BRAND_CODE === \"C\"\r\n ? \"#57718a\"\r\n : CONSTANTS.SITE_INFO.BRAND_CODE === \"C\"\r\n ? \"#000000\"\r\n : undefined,\r\n marginLeft: window.isMobile() === \"desktop\" ? \"8px\" : \"0px\",\r\n }}\r\n />\r\n\r\n {!!forfait.Comments.length && (\r\n
\r\n\r\n {props.data.isSelected && (\r\n \r\n {\r\n setShowComments(!showComments);\r\n }}\r\n >\r\n {showComments && (\r\n
\r\n )}\r\n \r\n {typeof forfait.Comments === \"object\" &&\r\n forfait.Comments.length &&\r\n forfait.Comments.map(function(item, key) {\r\n return (\r\n \r\n {key + 1} - {item.Text}\r\n
\r\n \r\n );\r\n })}\r\n {typeof forfait.Comments === \"string\" &&\r\n forfait.Comments.length && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n {typeof forfait.Comments === \"string\" &&\r\n forfait.Comments.length && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n\r\n {forfait.Operations.map((operation, keyopp) => (\r\n \r\n {CONSTANTS.LABELS.needs_basket_maintenance_label6}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n\r\n {forfait.Operations !== null && (\r\n \r\n
\r\n\r\n {/* prix Socle de base */}\r\n {forfait.Libelle}
\r\n\r\n {!!forfait.Comments.length && (\r\n \r\n \r\n showItemDetails !== forfait.Items[0].Ref\r\n ? setShowItemDetails(forfait.Items[0].Ref)\r\n : setShowItemDetails(false)\r\n }\r\n >\r\n {showItemDetails &&\r\n showItemDetails === forfait.Items[0].Ref && (\r\n
\r\n )}\r\n \r\n {typeof forfait.Comments === \"object\" &&\r\n forfait.Comments.map(function(item, key) {\r\n return (\r\n \r\n {key + 1} - {item.Text}\r\n
\r\n \r\n );\r\n })}\r\n {typeof forfait.Comments === \"string\" && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n {typeof forfait.Comments === \"string\" && (\r\n \r\n {forfait.Comments}
\r\n \r\n )}\r\n
\r\n {props.store.booking.happy && (\r\n
\r\n \r\n {getFinalPrice(forfait.Items[0].Prix)}\r\n
\r\n )}\r\n\r\n \r\n {!!Number(props.store.booking.happy)\r\n ? getFinalPrice(\r\n (\r\n forfait.Items[0].Prix -\r\n forfait.Items[0].Prix *\r\n 0.01 *\r\n props.store.booking.happy\r\n ).toFixed(2)\r\n )\r\n : getFinalPrice(forfait.Items[0].Prix)}\r\n
\r\n\r\n {props.store.booking.happy && (\r\n {`${props.store.booking.happy}%`}
\r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n ))}\r\n \r\n {\r\n props.updateSelectedOperation(\r\n e.target.checked,\r\n operation.Items[0].Ref\r\n );\r\n if (e.target.checked) {\r\n props.setTotalPrice(\r\n props.TotalPrice + operation.Items[0].Prix\r\n );\r\n } else {\r\n props.setTotalPrice(\r\n props.TotalPrice - operation.Items[0].Prix\r\n );\r\n }\r\n }}\r\n />\r\n\r\n {!!forfait.Comments.length && (\r\n
\r\n\r\n \r\n \r\n showItemDetails !== operation.Items[0].Ref\r\n ? setShowItemDetails(operation.Items[0].Ref)\r\n : setShowItemDetails(false)\r\n }\r\n >\r\n {showItemDetails &&\r\n showItemDetails === operation.Items[0].Ref && (\r\n
\r\n )}\r\n \r\n {typeof operation.Comments === \"object\" &&\r\n operation.Comments.map(function(item, key) {\r\n return (\r\n \r\n {key + 1} - {item.Text}\r\n
\r\n \r\n );\r\n })}\r\n {typeof operation.Comments === \"string\" && (\r\n \r\n {operation.Comments}
\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n })}\r\n {typeof operation.Comments === \"string\" && (\r\n \r\n {operation.Comments}
\r\n \r\n )}\r\n
\r\n {props.store.booking.happy && (\r\n \r\n {props.store.booking.happy\r\n ? getFinalPrice(\r\n (\r\n operation.Items[0].Prix *\r\n 0.01 *\r\n (100 - props.store.booking.happy)\r\n ).toFixed(2)\r\n )\r\n : getFinalPrice(operation.Items[0].Prix)}\r\n
\r\n\r\n {props.store.booking.happy && (\r\n \r\n {getFinalPrice(operation.Items[0].Prix)}\r\n
\r\n )}\r\n {`${props.store.booking.happy}%`}
\r\n )}\r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.needs_basket_maintenance_alert_label1}\r\n
\r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.needs_basket_maintenance_alert_label2}\r\n
\r\n \r\n {CONSTANTS.LABELS.needs_basket_maintenance_alert_label3}\r\n
\r\n \r\n setShowObligatoryOperationsPopup(false)}\r\n handleSecondaryButton={() => props.getSelectedForfait(selectedData)}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default connect(mapStateToProps)(BesoinsDetailsListRevisionFlex);\r\n","import React from \"react\";\r\nimport \"./InputOutlined.scss\";\r\n\r\nconst InputOutlined = (props) => {\r\n const isInvalid =\r\n props.isInvalid && props.isInvalid.length ? props.isInvalid : undefined;\r\n\r\n const isValid = props.isValid ? \" isValid\" : \"\";\r\n\r\n return (\r\n \r\n {selectedData.map(\r\n (forfaitType) =>\r\n Object.values(forfaitType.SubFunctionList).length > 0 &&\r\n forfaitType.SubFunctionList[0].ForfaitList.map((forfait, index) => (\r\n setNumberOfselected(1)}\r\n familyCode={forfaitType.SubFunctionList[0].Code}\r\n updateSelectedForfait={(isChecked, ref) => {\r\n setSelectedForfait(ref);\r\n selectThatForfait(isChecked, ref);\r\n }}\r\n updateSelectedOperation={(isChecked, ref) => {\r\n selectThatForfait(isChecked, ref, true);\r\n }}\r\n selectedForfait={selectedForfait}\r\n TotalPrice={TotalPrice}\r\n setTotalPrice={setTotalPrice}\r\n index={index}\r\n />\r\n ))\r\n )}\r\n\r\n \r\n
\r\n\r\n {// show popup if no obligatory operation is selected\r\n showObligatoryOperationsPopup && (\r\n \r\n {\r\n checkObligatoryOperations();\r\n pushEventToGTM({\r\n pageName: \"services\",\r\n eventAction: \"Click::CTA\",\r\n eventLabel: \"operations_add_revision\",\r\n });\r\n }}\r\n Disabled={numberOfselected < 1}\r\n >\r\n {CONSTANTS.LABELS.common_v2_add}\r\n \r\n\r\n {!!selectedForfait && (\r\n \r\n \r\n )}\r\n
\r\n\r\n \r\n {!!Number(props.store.booking.happy) && (\r\n
\r\n \r\n {getFinalPrice(TotalPrice)}\r\n
\r\n )}\r\n\r\n \r\n
\r\n\r\n {props.store.booking.happy && (\r\n \r\n {CONSTANTS.LABELS.needs_basket_maintenance_label9}\r\n
\r\n \r\n {!!Number(props.store.booking.happy)\r\n ? getFinalPrice(\r\n (\r\n TotalPrice -\r\n TotalPrice * 0.01 * props.store.booking.happy\r\n ).toFixed(2)\r\n )\r\n : getFinalPrice(TotalPrice)}\r\n
\r\n {`${props.store.booking.happy}%`}
\r\n )}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n 
\r\n
\r\n )}\r\n \r\n \r\n {!showKilometrage && (\r\n \r\n {\r\n setSerieInput(\r\n e.target.value.trim().length ? e.target.value : \"\"\r\n );\r\n }}\r\n isDisabled={\r\n props.store.car.SerialNumber !== undefined &&\r\n props.store.car.SerialNumber.length\r\n ? true\r\n : false\r\n }\r\n isInvalid={serieCodeError}\r\n value={serieInput}\r\n />\r\n
\r\n\r\n \r\n \r\n e.key === \"Enter\" && setShowInfosSerie(!showInfosSerie)\r\n }\r\n onClick={(e) => setShowInfosSerie(!showInfosSerie)}\r\n >
\r\n {showInfosSerie && (\r\n \r\n
\r\n {CONSTANTS.LABELS.needs_basket_maintenance_help1}
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BesoinsItem);\r\n","\r\nimport React, { PureComponent } from 'react';\r\nimport BesoinsItem from \"./besoinsItem\";\r\nimport { connect } from 'react-redux';\r\nimport { selectedServices } from '../../../actions/action';\r\nimport CONSTANTS from '../../../constants';\r\nimport \"./besoinsDetails.css\";\r\nimport BasketImage from '../../../images/AP/basket-icon.png';\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { selectedServices };\r\n\r\nclass BesoinsDetails extends PureComponent {\r\n static defaultProps = {\r\n className: \"\",\r\n };\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isBlockfull: false,\r\n };\r\n }\r\n\r\n render() {\r\n const isBlockfull = this.props.store.SelectedServices.length;\r\n if (isBlockfull) {\r\n return (\r\n \r\n {/* show forfaits details on popin above forfait selected. */}\r\n {!!this.state.showDetails.length && \r\n CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&\r\n {\r\n this.setState({ showDetails: e });\r\n }}\r\n numberOfselected={this.state.selectedForfaitsNames.length}\r\n />\r\n }\r\n \r\n {\r\n this.state.showRevisionVin &&\r\n !this.state.isKilometrageSelected && \r\n CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&\r\n this.setState({ isKilometrageSelected: true })}\r\n fillPasSelect={(data) => { this.loadForfaitsEntretien(data.selected); this.setState({ kilometrageData: data.listPas }) }}\r\n ClosePopin={() => this.setState({ showRevisionVin: false })} />\r\n }\r\n
\r\n {\r\n var parentNodeItem = e.currentTarget.parentNode.parentNode;\r\n if (parentNodeItem.classList.contains('isOpenBlock')) {\r\n parentNodeItem.classList.remove('isOpenBlock');\r\n this.setState({ showDetails: {} })\r\n }\r\n }\r\n }>\r\n {typeof this.state.showDetails == 'object' && this.state.showDetails.length && this.state.showDetails.map(function (item, key) {\r\n return {key + 1} - {item.Text}
;\r\n })}\r\n {typeof this.state.showDetails == 'string' && this.state.showDetails.length && }\r\n\r\n
\r\n }\r\n\r\n ;\r\n })}\r\n {typeof this.state.showDetails == 'string' && this.state.showDetails.length && }\r\n\r\n
\r\n
\r\n\r\n {/* if this forfait is NOT a revision constructeur */}\r\n {!this.state.blockEmpty && !forfaits.forfaits[0].isConstructeur &&\r\n \r\n
\r\n \r\n
\r\n {/* if this forfait is NOT a revision constructeur */}\r\n {(ifForfaitPricesActivated && itHasNotaPrice && !forfaits.forfaits[0].isConstructeur) &&\r\n {label}
\r\n {ifForfaitPricesActivated && isNotyetSelected && \r\n\r\n {CONSTANTS.LABELS.needs_basket_noprice}\r\n
}\r\n\r\n {itHasSelectedServices && this.state.selectedForfaitsNames.map(function (title, key) {\r\n\r\n if (typeof title == 'object') {\r\n return{title.operation}
{title}
\r\n
\r\n }\r\n {/* if this forfait is a revision constructeur */}\r\n {(ifForfaitPricesActivated && itHasNotaPrice && forfaits.forfaits[0].isConstructeur) &&\r\n {\r\n if (e.key === 'Enter') {\r\n pushEventToGTM({\r\n pageName: 'services',\r\n eventAction: 'Click::CTA',\r\n eventLabel: 'operations_seeprices'\r\n })\r\n this.deselectOtherBlock(e)\r\n }\r\n\r\n }\r\n }\r\n onClick={(e) => {\r\n pushEventToGTM({\r\n pageName: 'services',\r\n eventAction: 'Click::CTA',\r\n eventLabel: 'operations_seeprices'\r\n });\r\n this.deselectOtherBlock(e);\r\n\r\n }}>\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && \r\n
\r\n \r\n {CONSTANTS.LABELS.needs_basket_choseprice}\r\n \r\n
}\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && \r\n\r\n {CONSTANTS.LABELS.needs_basket_choseprice}{\" \"}\r\n \r\n
}\r\n \r\n this.setState({ isKilometrageSelected: true })}\r\n fillPasSelect={(data) => { this.loadForfaitsEntretien(data.selected); this.setState({ kilometrageData: data.listPas }) }}\r\n ClosePopin={(e) => this.setState({ showRevisionVin: false })} />}\r\n
\r\n }\r\n {/* if this forfait is a revision constructeur && kilomettrage is not yet assigned */}\r\n {(ifForfaitPricesActivated && itHasNotaPrice && forfaits.forfaits[0].isConstructeur && this.state.isKilometrageSelected) &&\r\n {\r\n if (e.key === 'Enter') {\r\n pushEventToGTM({\r\n pageName: 'services',\r\n eventAction: 'Click::CTA',\r\n eventLabel: 'operations_seeprices_revision'\r\n })\r\n\r\n this.deselectOtherBlock(e, 'revision')\r\n }\r\n\r\n }\r\n }\r\n onClick={(e) => {\r\n\r\n (this.state.blockEmpty && this.state.isKilometrageSelected ? this.setState({ blockEmpty: false }) :\r\n this.setState({ blockEmpty: true }));\r\n pushEventToGTM({\r\n pageName: 'services',\r\n eventAction: 'Click::CTA',\r\n eventLabel: 'operations_seeprices_revision'\r\n });\r\n //this.setState({showRevisionVin: !this.state.showRevisionVin});\r\n this.deselectOtherBlock(e, 'revision');\r\n }\r\n }>\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && \r\n
\r\n {\r\n this.state.showRevisionVin &&\r\n !this.state.isKilometrageSelected && \r\n CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&\r\n \r\n {CONSTANTS.LABELS.needs_basket_choseprice}\r\n \r\n
}\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && \r\n\r\n {CONSTANTS.LABELS.needs_basket_choseprice}{\" \"}\r\n \r\n
}\r\n \r\n \r\n
\r\n }\r\n {(ifForfaitPricesActivated && !this.state.isAforfait) &&\r\n - \r\n
- {CONSTANTS.LABELS.account_km1} \r\n
- \r\n \r\n
\r\n
\r\n }\r\n {!!this.state.totalPrice && !!this.state.isAforfait &&\r\n \r\n e.key === 'Enter' && this.onInfoIconCliked(e)}\r\n Name=\"info-active\"\r\n onClick={this.onInfoIconCliked}\r\n />}\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && \r\n
\r\n \r\n\r\n
\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && \r\n\r\n e.key === 'Enter' && this.onInfoIconClikedCitroen(e)}\r\n name=\"info-active\"\r\n onClick={this.onInfoIconClikedCitroen}\r\n >\r\n \r\n {!!this.state.showDetails.length && \r\n
\r\n }\r\n\r\n {\r\n var parentNodeItem = e.currentTarget.parentNode.parentNode;\r\n if (parentNodeItem.classList.contains('isOpenBlock')) {\r\n parentNodeItem.classList.remove('isOpenBlock');\r\n this.setState({ showDetails: {} })\r\n }\r\n }\r\n }>\r\n {typeof this.state.showDetails == 'object' && this.state.showDetails.length && this.state.showDetails.map(function (item, key) {\r\n return {key + 1} - {item.Text}
;\r\n })}\r\n {typeof this.state.showDetails == 'string' && this.state.showDetails.length && }\r\n\r\n
\r\n }\r\n ;\r\n })}\r\n {typeof this.state.showDetails == 'string' && this.state.showDetails.length && }\r\n\r\n
\r\n
\r\n }\r\n { /*show \"Details\" button on mobile just after the forfait Name if there is selected services*/\r\n (window.isMobile() !== 'desktop' && (itHasSelectedServices && this.state.isKilometrageSelected || itHasSelectedServices)) &&\r\n { (this.state.blockEmpty ? this.setState({ blockEmpty: false }) : this.setState({ blockEmpty: true })) }}>\r\n {CONSTANTS.LABELS.common_v2_detail}\r\n \r\n }\r\n\r\n\r\n\r\n \r\n {/* Discount & Total Price message for Mobile*/}\r\n {\r\n (this.props.store.booking &&\r\n !!Number(this.props.store.booking.happy) &&\r\n window.isMobile() !== 'desktop'\r\n ) &&\r\n \r\n }\r\n {\r\n (this.props.store.booking &&\r\n !Number(this.props.store.booking.happy) &&\r\n window.isMobile() !== 'desktop'\r\n ) &&\r\n {CONSTANTS.LABELS.needs_basket_maintenance_label9}\r\n }\r\n {/* END - Discount & Total Price message for Mobile*/}\r\n\r\n {priceFormat(parseFloat(this.state.totalPrice).toFixed(2))}{` ${CONSTANTS.LABELS.needs_basket_label2}`}\r\n
\r\n {/* Discount message for Desktop*/}\r\n {\r\n (this.props.store.booking &&\r\n !!Number(this.props.store.booking.happy) &&\r\n window.isMobile() === 'desktop'\r\n ) &&\r\n {CONSTANTS.LABELS.needs_basket_discount_applied}\r\n }\r\n\r\n {/* END - Discount message for Desktop*/}\r\n\r\n this.removeFromSelected(id)}\r\n isTabIndexActivate={true}\r\n onKeyDown={(e) => e.key === 'Enter' && this.removeFromSelected(id)}\r\n />\r\n
\r\n \r\n
\r\n }\r\n\r\n {/* if this forfait is a revision constructeur and not for Citroen */}\r\n {(!this.state.blockEmpty && this.state.showForfaitsEntretien && this.state.isKilometrageSelected) &&\r\n CONSTANTS.SITE_INFO.BRAND_CODE !== 'C' &&\r\n \r\n
\r\n \r\n
}\r\n \r\n {/* if this forfait is a revision constructeur and for Citroen */}\r\n {(!this.state.blockEmpty && this.state.showForfaitsEntretien && this.state.isKilometrageSelected) &&\r\n CONSTANTS.SITE_INFO.BRAND_CODE === 'C' &&\r\n \r\n {\r\n this.setState({ showDetails: e });\r\n }\r\n }\r\n numberOfselected={this.state.selectedForfaitsNames.length} />\r\n
\r\n \r\n
\r\n );\r\n }\r\n else\r\n return (\r\n \r\n {this.props.store.SelectedServices.map(function (family, key) {\r\n return
\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BesoinsDetails);\r\n","\r\nimport React, { Component } from 'react';\r\n\r\nclass LayoutStandardWidth extends Component {\r\n static defaultProps = {\r\n classes: \"\",\r\n };\r\n render() {\r\n return (\r\n \r\n 
\r\n
\r\n {CONSTANTS.LABELS.needs_basket_empty}
\r\n\r\n {this.props.children}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default LayoutStandardWidth;\r\n","import React, { useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { setUploadFiles, setCustomerAttachmentId } from \"../../actions/action\";\r\nimport fetchApiData from \"../apiHandlers/fetchApiData\";\r\nimport Dropzone from \"react-dropzone\";\r\nimport CONSTANTS from \"../../constants\";\r\nimport acDocumentIcon from \"../../images/AC/ac_document_file.png\";\r\n\r\nconst mapStateToProps = (state) => state;\r\nconst mapDispatchToProps = { setUploadFiles, setCustomerAttachmentId };\r\n\r\nconst AttachmentsFlex = (props) => {\r\n const [showFormErrors, setShowFormErrors] = useState(false);\r\n const [ErrorMsg, setErrorMsg] = useState(\"\");\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const validateAttachmentFile = (file) => {\r\n let fileList = props.store.UploadFiles;\r\n let attachmentId = props.store.customerAttachmentId;\r\n const fileService = new fetchApiData();\r\n const formData = new FormData();\r\n\r\n formData.append(\"file\", file);\r\n fileService.postSendFile(formData).then(\r\n (res) => {\r\n console.log(\"validate file\", res)\r\n switch (res.errorCode) {\r\n case 0:\r\n file.attachmentUrl = res.encodedUrl;\r\n fileList.push(file);\r\n props.setUploadFiles(fileList);\r\n if (attachmentId === \"\") {\r\n props.setCustomerAttachmentId(res.customerAttachmentId);\r\n }\r\n setIsLoading(false);\r\n setShowFormErrors(false);\r\n break;\r\n\r\n default:\r\n setIsLoading(false);\r\n setShowFormErrors(true);\r\n setErrorMsg(res.message);\r\n break;\r\n }\r\n },\r\n (error) => {\r\n console.log(error);\r\n setIsLoading(false);\r\n setShowFormErrors(true);\r\n setErrorMsg(error.message);\r\n }\r\n );\r\n };\r\n\r\n const removeFile = (file) => {\r\n let fileList = props.store.UploadFiles;\r\n //New traitement for removing file just from front\r\n const newFiles = [...fileList]; // make a var for the new array\r\n newFiles.splice(newFiles.indexOf(file), 1); // remove the file from the array\r\n props.setUploadFiles(newFiles);\r\n /*const removeFileService = new fetchApiData();\r\n removeFileService.DeleteAttachment(file.attachmentUrl).then(\r\n (res) => {\r\n if (res.d.status === \"OK\") {\r\n const newFiles = [...fileList]; // make a var for the new array\r\n newFiles.splice(newFiles.indexOf(file), 1); // remove the file from the array\r\n props.setUploadFiles(newFiles);\r\n }\r\n },\r\n (error) => {\r\n setIsLoading(false);\r\n setShowFormErrors(true);\r\n setErrorMsg(error.message);\r\n }\r\n );*/\r\n };\r\n\r\n return (\r\n \r\n {\r\n if (acceptedFiles.length > 3) {\r\n setShowFormErrors(true);\r\n setErrorMsg(\"Un client ne peut uploader que 3 pièces jointes max.\");\r\n } else {\r\n acceptedFiles.forEach((file) => {\r\n setShowFormErrors(false);\r\n const reader = new FileReader();\r\n\r\n reader.onabort = () => {\r\n console.log(\"file reading was aborted\");\r\n };\r\n reader.onerror = () => {\r\n console.log(\"file reading has failed\");\r\n };\r\n reader.onload = () => {\r\n console.log(\"file loading ...\");\r\n setIsLoading(true);\r\n validateAttachmentFile(file);\r\n };\r\n reader.readAsArrayBuffer(file);\r\n });\r\n }\r\n }}\r\n >\r\n {({ getRootProps, getInputProps }) => (\r\n \r\n {window.siteConfig.currentBrand !== 'C' && \r\n \r\n {props.store.UploadFiles.length > 0 && (\r\n \r\n }\r\n \r\n {props.store.UploadFiles.length > 0 && (\r\n \r\n }\r\n \r\n \r\n )}\r\n \r\n
\r\n {showFormErrors && (\r\n \r\n {Object.values(props.store.UploadFiles).map((file, key) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n e.key === \"Enter\" && removeFile(file)\r\n }\r\n onClick={() => removeFile(file)}\r\n className=\"mark-icons delete-icon deleteFileIcon\"\r\n />\r\n
\r\n );\r\n })}\r\n \r\n 
\r\n
\r\n \r\n {file.path}\r\n
\r\n \r\n \r\n \r\n
\r\n {window.siteConfig.currentBrand === 'C' && \r\n \r\n {`${CONSTANTS.LABELS.needs_attachment_cta1} ${CONSTANTS.LABELS.needs_attachment_cta2}`}\r\n
\r\n \r\n {Object.values(props.store.UploadFiles).map((file, key) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n e.key === \"Enter\" && removeFile(file)\r\n }\r\n onClick={() => removeFile(file)}\r\n className=\"mark-icons delete-icon deleteFileIcon\"\r\n />\r\n
\r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n {file.path}\r\n
\r\n \r\n {ErrorMsg}\r\n
\r\n )}\r\n \r\n
\r\n }\r\n {/* For Mobile = > show the button to active/desactivate the services list */}\r\n {window.isMobile() != 'desktop' && !this.state.mobileShowServices &&\r\n\r\n \r\n \r\n {forfaitsFamilies && forfaitsFamilies.listeIntervention.map(function (item, key) {\r\n const isShowed = item.Booking ;\r\n const isSelected = this.CheckAlreadyAdded(item.interventionId);\r\n return isShowed ? this.showServices(Object.assign({}, item))} /> : ''\r\n }.bind(this))}\r\n \r\n {this.state.bannerShow && \r\n this.state.urlToSend ? \r\n 
\r\n :\r\n \r\n }\r\n
\r\n \r\n this.setState({ mobileShowServices: false })}\r\n >\r\n {window.isMobile() !== 'desktop' &&
\r\n }\r\n {ifForfaitPricesActivated && \r\n
\r\n\t)\r\n\trender() {\r\n\t\tconst SEO_TITLE = (this.props.isEditMode ? (window.siteConfig.v2modification != undefined ? window.siteConfig.v2modification.Title : '')\r\n\t\t\t: (window.siteConfig.v2recapitulatif != undefined ? window.siteConfig.v2recapitulatif.Title : ''));\r\n\t\tconst SEO_DESC = (this.props.isEditMode ? (window.siteConfig.v2modification != undefined ? window.siteConfig.v2modification.MetaDescription : '')\r\n\t\t\t: (window.siteConfig.v2recapitulatif != undefined ? window.siteConfig.v2recapitulatif.MetaDescription : ''));\r\n\t\tconst expiredDateStyle = {\r\n\t\t\ttextAlign: \"center\",\r\n\t\t\tcolor: \"red\",\r\n\t\t\tpaddingTop: \"20px\",\r\n\t\t\tfontSize: \"20px\"\r\n\t\t};\r\n\t\tif (!this.state.showPlaceHolder)\r\n\t\t\treturn (\r\n {CONSTANTS.LABELS.needs_comment_label1}\r\n {`(${this.state.serviceComment.length}/500 ${CONSTANTS.LABELS.summary_comment_label1})`} \r\n
\r\n \r\n\t\t\r\n \r\n \r\n {\r\n if (\r\n e.target.value.match(\r\n /[^\\p{L}\\p{N}\\p{M}\\p{Sc}\\s\\.\\?%!:,¿¡'\"-]/gu\r\n )\r\n ) {\r\n this.setState({ isErrorMessageArea: true });\r\n } else if (e.target.value.length <= 500) {\r\n this.setState({\r\n messageArea: e.target.value,\r\n isErrorMessageArea: false,\r\n });\r\n this.props.setCommentServices(e.target.value);\r\n }\r\n }}\r\n maxLength={500}\r\n value={this.state.messageArea}\r\n autoComplete={\"on\"}\r\n aria-label={CONSTANTS.LABELS.summary_comment}\r\n iserror={this.state.isErrorMessageArea}\r\n labelerror={\r\n CONSTANTS.LABELS.userinfos_error_name_special_char\r\n }\r\n cols=\"80\"\r\n >\r\n \r\n )}\r\n \r\n {!this.state.expiredDate && (\r\n
\r\n )}\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && (\r\n \r\n {CONSTANTS.LABELS.summary_title}\r\n {this.props.store.isEditMode && this.state.expiredDate && (\r\n
\r\n {CONSTANTS.LABELS.summary_warning_noedit}\r\n
\r\n )}\r\n \r\n\r\n \r\n {\r\n if (\r\n e.target.value.match(\r\n /[^\\p{L}\\p{N}\\p{M}\\p{Sc}\\s\\.\\?%!:,¿¡'\"-]/gu\r\n )\r\n ) {\r\n this.setState({ isErrorMessageArea: true });\r\n } else {\r\n this.setState({\r\n messageArea: e.target.value,\r\n isErrorMessageArea: false,\r\n });\r\n this.props.setCommentServices(e.target.value);\r\n }\r\n }}\r\n maxLength={500}\r\n value={this.state.messageArea}\r\n iserror={this.state.isErrorMessageArea}\r\n labelerror={\r\n CONSTANTS.LABELS.userinfos_error_name_special_char\r\n }\r\n cols=\"80\"\r\n >\r\n \r\n )}\r\n
\r\n \r\n
\r\n {window.isMobile() !== \"desktop\" && (\r\n \r\n \r\n {this.props.store.isEditMode && (\r\n {\r\n this.sendDataToServer();\r\n }}\r\n >\r\n {CONSTANTS.LABELS.summary_modifyrdv}\r\n \r\n )}\r\n\r\n {!this.props.store.isEditMode && (\r\n {\r\n this.sendDataToServer();\r\n }}\r\n >\r\n {CONSTANTS.LABELS.summary_confirmrdv}\r\n \r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n {CONSTANTS.LABELS.summary_title}\r\n
\r\n\r\n {this.props.store.isEditMode && this.state.expiredDate && (\r\n \r\n {CONSTANTS.LABELS.summary_warning_noedit}\r\n
\r\n )}\r\n\r\n \r\n
\r\n\r\n {!this.state.expiredDate && (\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.props.store.isEditMode ||\r\n !this.props.store.isEditMode) && (\r\n {\r\n this.sendDataToServer();\r\n }}\r\n >\r\n {this.props.store.isEditMode\r\n ? CONSTANTS.LABELS.summary_modifyrdv\r\n : CONSTANTS.LABELS.summary_confirmrdv}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\r\n\t\t\t\t{this.state.redirectToLocation &&
\r\n\t\t\t);\r\n\r\n\t}\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SummaryPage));\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nclass CarTab extends PureComponent {\r\n\r\n onClick = () => {\r\n const { label, order, onClick } = this.props;\r\n onClick(order);\r\n }\r\n\r\n render() {\r\n const {\r\n onClick,\r\n props: {\r\n activeTab,\r\n label,\r\n order\r\n },\r\n } = this;\r\n\r\n let className = 'tab-list-item';\r\n\r\n if (activeTab === order) {\r\n className += ' tab-list-active';\r\n }\r\n\r\n return (\r\n {label}
\r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CarTab;\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport CarTab from './CarTab';\r\n\r\n\r\nimport { connect } from 'react-redux';\r\nimport CONSTANTS from '../../constants';\r\n\r\nconst mapStateToProps = state => state;\r\n\r\nclass CarTabs extends PureComponent {\r\n\r\n constructor(props) {\r\n super(props);\r\n // tab value 0 means no Tab selected , so in Desktop \r\n // normaly tab number 2(Serie Tab) is selected by default \r\n // but in mobile default is 0 , so no tab selected and on click on tab\r\n // the selected tab get shown , another click on the same tab,\r\n // turning the tab to 0 \r\n\r\n //** UPDATE : By default select the tab that has the car info by default (à la modif du rdv) */\r\n //** By Default : Immat */\r\n\r\n const ActivateTabImmat = (!!Number(window.siteConfig.ActivateTabImmat))\r\n const ActivateTabNumSerie = (!!Number(window.siteConfig.ActivateTabNumSerie))\r\n const ActivateTabModele = (!!Number(window.siteConfig.ActivateTabModele))\r\n this.state = {\r\n activeTab: (Object.values(props.store.kilo).length ? this.props.store.kilo.carStep : (window.isMobile() == 'desktop' ? (ActivateTabImmat ? '1' : ActivateTabNumSerie ? '2' : '3') : '')),\r\n disabledTab: false\r\n };\r\n\r\n }\r\n\r\n componentDidMount() {\r\n let len = this.props.children.length;\r\n let count = 0;\r\n this.props.children.map((child) => {\r\n if (!child) {\r\n count++;\r\n return;\r\n }\r\n });\r\n const ActivateTabImmat = (!!Number(window.siteConfig.ActivateTabImmat))\r\n const ActivateTabNumSerie = (!!Number(window.siteConfig.ActivateTabNumSerie))\r\n const ActivateTabModele = (!!Number(window.siteConfig.ActivateTabModele))\r\n \r\n if ((len - 1) == count) {\r\n this.setState({ disabledTab: true });\r\n }\r\n \r\n //Modification\r\n if(this.props.store.car.Registration ){\r\n //* Afficher Tab de l'IMMAT\r\n this.setState({ activeTab: '1' });\r\n }\r\n else if (this.props.store.car.SerialNumber ) {\r\n //* Afficher Tab du VIN\r\n this.setState({ activeTab: '2' });\r\n }\r\n else if(this.props.store.car.EnergyLabel){\r\n //* Afficher Tab du Modele\r\n this.setState({ activeTab: '3' });\r\n }\r\n else{\r\n ///* Lors de la prise du premier RDV\r\n if(ActivateTabImmat){\r\n this.setState({ activeTab: '1' });\r\n }\r\n else if(ActivateTabNumSerie){\r\n this.setState({ activeTab: '2' });\r\n }\r\n else if(ActivateTabModele){\r\n this.setState({ activeTab: '3' });\r\n }\r\n else{\r\n this.setState({ activeTab: '2' });\r\n }\r\n // this.setState({ activeTab: '1' });\r\n }\r\n }\r\n\r\n onClickTabItem = (tab) => {\r\n if (tab != this.state.activeTab)\r\n this.setState({ activeTab: tab });\r\n else if (window.isMobile() != 'desktop')\r\n this.setState({ activeTab: 0 });\r\n }\r\n\r\n render() {\r\n const {\r\n onClickTabItem,\r\n props: {\r\n children,\r\n },\r\n state: {\r\n activeTab,\r\n }\r\n } = this;\r\n return (\r\n\r\n {window.isMobile() == 'desktop' && \r\n }\r\n {/* if Mobile put the content inside the tab to meet the requirement of XD Design*/}\r\n {window.isMobile() !== 'desktop' && \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(CarTabs);\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport EditButton from '../../buttons/EditButton';\r\n\r\nclass TabSection extends PureComponent {\r\n static defaultProps = {\r\n editMode: false,\r\n //order:1,\r\n title: \" \",\r\n //enabled:false,\r\n Loading: false,\r\n };\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n\r\n render() {\r\n //const isEditMode = (this.props.editMode ? \" edit-mode\" : \"\");\r\n const isLoading = (this.props.Loading ? \" isLoading\" : \"\");\r\n\r\n return (\r\n - \r\n\r\n {children.map((child) => {\r\n // this is made to skip false element , when step is disabled in BO.\r\n if (!child) {\r\n return;\r\n }\r\n\r\n const { label, order } = child.props;\r\n return (\r\n
\r\n {children.map((child) => {\r\n if (!child) {\r\n return;\r\n }\r\n if (child.props.order !== activeTab) return undefined;\r\n return child.props.children;\r\n })}\r\n
- \r\n\r\n {children.map((child) => {\r\n // this is made to skip false element , when step is disabled in BO.\r\n if (!child) {\r\n return;\r\n }\r\n\r\n const { label, order } = child.props;\r\n\r\n return (\r\n
\r\n {(child.props.order == activeTab) && children.map((child) => {\r\n if (!child) {\r\n return;\r\n }\r\n if (child.props.order !== activeTab) return undefined;\r\n return child.props.children;\r\n })}\r\n
\r\n \r\n );\r\n\r\n })}\r\n \r\n
\r\n );\r\n // if(this.props.enabled || this.props.editMode)\r\n // \treturn(\r\n // \t\t \t \r\n {this.props.children}\r\n
\r\n \r\n //
\r\n // \t\t);\r\n // else\r\n // return(\r\n // \r\n // {this.props.order} \r\n // {this.props.title} \r\n // { this.props.editMode &&
\r\n // \r\n // {this.props.children}\r\n //
\r\n // \r\n //
\r\n // );\r\n }\r\n}\r\nexport default TabSection;\r\n","\r\nimport React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager';\r\n\r\nimport Icon from '../../buttons/Icon';\r\n\r\n\r\nclass TabInfoSection extends PureComponent {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n 'showDetails': false,\r\n };\r\n }\r\n\r\n\r\n render() {\r\n const { title, children } = this.props;\r\n return (\r\n\r\n \r\n // {this.props.order} \r\n // {this.props.title} \r\n //
\r\n // {\r\n if (e.key === 'Enter') {\r\n this.setState({ showDetails: !this.state.showDetails });\r\n pushEventToGTM({\r\n pageName: 'car-details',\r\n eventAction: 'Display::Help',\r\n eventLabel: title\r\n });\r\n }\r\n }\r\n }\r\n onClick={() => {\r\n this.setState({ showDetails: !this.state.showDetails });\r\n pushEventToGTM({\r\n pageName: 'car-details',\r\n eventAction: 'Display::Help',\r\n eventLabel: title\r\n });\r\n }}>\r\n
\r\n\r\n );\r\n }\r\n}\r\nexport default TabInfoSection;\r\n","import React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { connect } from 'react-redux'\r\nimport CONSTANTS from '../../../constants'\r\nimport { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setFilterDealersBy } from '../../../actions/action'\r\nimport TabSection from './TabSection'\r\nimport TabInfoSection from './TabInfoSection'\r\nimport { Input, Button, Radio, Select } from '../../Forms/Forms'\r\nimport fetchApiData from '../../apiHandlers/fetchApiData'\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager'\r\nimport PopUp from '../../popup/popup'\r\nimport {\r\n Link\r\n} from 'react-router-dom'\r\nimport './Tabs.css'\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setFilterDealersBy }\r\n\r\nclass SerieTab extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n //validFirstSection: true,\r\n //validSecondeSection: false,\r\n showPopup: false,\r\n showFiltersPopup: false,\r\n step1Loading: false,\r\n step1ButtonDisabled: true,\r\n step2ButtonDisabled: (!Object.values(this.props.store.kilo).length),\r\n serieInput: this.props.store.car.SerialNumber || '',\r\n serieCodeError: false,\r\n KilometrageError: false,\r\n kilometrage: props.store.kilo.kilometrage || this.props.store.car.Mileage || '',\r\n contratSerivce: (!!(Object.values(props.store.kilo).length > 0 && props.store.kilo.contratService)),\r\n isVehiclePC: this.props.store.car.PC === undefined ? false : this.props.store.car.PC,\r\n isVehicleLCV: this.props.store.car.LCV === undefined ? false : this.props.store.car.LCV,\r\n }\r\n this.isRecallCampagneActivate = !!Number(window.siteConfig.ActivateRecallCampaign);\r\n\r\n }\r\n\r\n checkKilometreValidity = (km) => {\r\n if (km.toString().trim().length && ((Number(km)) > 999999 || km.toString().trim().length > 6)\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n })\r\n }\r\n else if (km.toString().trim().length < 1 ||\r\n Number(km) > 999999\r\n ) {\r\n this.setState({\r\n KilometrageError: false,\r\n step2ButtonDisabled: true\r\n })\r\n Number(km) > 999999 || km.toString().trim().length > 6 && this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n })\r\n } else if (\r\n km.toString().trim().length &&\r\n !(/^[0-9]*$/.test(km))\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n })\r\n }\r\n else if (km.toString().trim().length &&\r\n Number(km) === 0) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_zero\r\n })\r\n }\r\n else {\r\n this.setState({\r\n step2ButtonDisabled: false,\r\n KilometrageError: false\r\n })\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ serieInput: this.props.store.car.vin || this.props.prevData.serieInput })\r\n this.setState({\r\n step1ButtonDisabled: !(this.props.prevData.serieInput && this.props.prevData.serieInput.length > 2) && !(this.props.store.car.vin && this.props.store.car.vin.length > 2)\r\n })\r\n this.checkKilometreValidity(this.state.kilometrage)\r\n }\r\n\r\n checkSerieCode = () => {\r\n const CarDetails = new fetchApiData()\r\n this.setState({ step1Loading: true })\r\n\r\n CarDetails.getSerie(this.state.serieInput).then(\r\n data => {\r\n switch (data.d.ErrorCode) {\r\n case 0:\r\n if (this.props.store.listPremiumServices.some(item =>\r\n (item.codeIntern === 'PC' || item.codeIntern === 'LCV') && item.displayDL)) {\r\n if (!((data.d.VehicleInfo.LCV === this.props.store.dealer.LCV) || (data.d.VehicleInfo.PC === this.props.store.dealer.PC))) {\r\n this.setState({\r\n showFiltersPopup: true,\r\n isVehicleLCV: data.d.VehicleInfo.LCV,\r\n isVehiclePC: data.d.VehicleInfo.PC\r\n })\r\n document.body.classList.add('no-scroll')\r\n this.isfiltersPopinOpen = true\r\n }\r\n }\r\n\r\n this.props.setVeiculeInfos(data.d.VehicleInfo)\r\n this.setState({ /*validFirstSection: false,*/ step1Loading: false, serieCodeError: '' })\r\n this.props.setVeiculeKilo({ contratService: this.state.contratSerivce, kilometrage: this.state.kilometrage, carStep: '2' })\r\n this.props.updateServicesAfterDataChanged()\r\n this.isRecallCampagneActivate && this.checkCompagneRappelEligibility()\r\n !this.isRecallCampagneActivate && !this.isfiltersPopinOpen && this.props.CurrentStepSetAction(4)\r\n pushEventToGTM({\r\n pageName: 'car-details',\r\n eventAction: 'Redirection::Internal::Next_step',\r\n eventLabel: 'vin'\r\n })\r\n break\r\n default:\r\n this.setState({ serieCodeError: (data.d.ErrorMessage == 1 ? CONSTANTS.LABELS.vehicule_serial_step1_error_incorrect : CONSTANTS.LABELS.vehicule_serial_step1_error_unknown) })\r\n this.setState({ step1Loading: false })\r\n break\r\n }\r\n })\r\n .catch(error => {\r\n console.log('fait: ', Error)\r\n this.setState({ step1Loading: false })\r\n });\r\n }\r\n checkCompagneRappelEligibility = () => {\r\n const cpRappelData = new fetchApiData()\r\n cpRappelData.getCompagneRappelEligibility(this.state.serieInput).then(\r\n data => {\r\n if (data.d.Eligible) {\r\n this.setState({\r\n showPopup: true\r\n });\r\n document.body.classList.add('no-scroll')\r\n this.isRecallCompagnePopinOpen = true;\r\n }\r\n !this.isRecallCompagnePopinOpen && !this.isfiltersPopinOpen && this.props.CurrentStepSetAction(4)\r\n\r\n })\r\n .catch(error => {\r\n console.log('Error: ', error)\r\n !this.isRecallCompagnePopinOpen && !this.isfiltersPopinOpen && this.props.CurrentStepSetAction(4)\r\n });\r\n }\r\n\r\n continueToNextStep(popinName) {\r\n if (popinName === 'recallCompaingPopin') {\r\n this.setState({\r\n showPopup: false\r\n });\r\n document.body.classList.remove('no-scroll')\r\n this.isRecallCompagnePopinOpen = false;\r\n }\r\n if (popinName === 'filterPopin') {\r\n this.setState({\r\n showFiltersPopup: false\r\n });\r\n document.body.classList.remove('no-scroll')\r\n this.isfiltersPopinOpen = false\r\n }\r\n if (!this.isRecallCompagnePopinOpen && !this.isfiltersPopinOpen) this.props.CurrentStepSetAction(4)\r\n\r\n }\r\n goToDealersLocator = () => {\r\n this.props.store.listPremiumServices.forEach(item => {\r\n if (item.codeIntern === 'LCV' && this.state.isVehicleLCV) {\r\n if (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n this.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n }\r\n }\r\n if (item.codeIntern === 'PC' && this.state.isVehiclePC) {\r\n if (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n this.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n }\r\n }\r\n })\r\n // this.state.isVehicleLCV ? this.props.setFilterDealersBy('LCV') : (this.state.isVehiclePC ? this.props.setFilterDealersBy('PC') : this.props.setFilterDealersBy('ALL'))\r\n this.props.CurrentStepSetAction(1)\r\n }\r\n render() {\r\n const { ModelLabel, EnergyLabel, BrandLabel } = this.props.store.car\r\n const popInFilterContent = \r\n\r\n \r\n
\r\n {this.state.showDetails && \r\n
}\r\n {children}
\r\n\r\n
\r\n\r\n\r\n return (\r\n {CONSTANTS.LABELS.vehicule_filter_alert_main}
\r\n\r\n {CONSTANTS.LABELS.vehicule_filter_alert_warranty} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_maintenance} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_recall_campain} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_package} \r\n
\r\n {CONSTANTS.LABELS.vehicule_filter_alert_second}
\r\n\r\n\r\n\r\n \r\n\r\n this.setState({ validFirstSection: true })}\r\n Loading={this.state.step1Loading}\r\n >\r\n {/*this.state.validFirstSection && */<>\r\n { this.continueToNextStep('recallCompaingPopin') }} />\r\n }\r\n { // filter LCV/PC incompatibility between vehicle and dealer\r\n this.state.showFiltersPopup &&\r\n this.goToDealersLocator()}\r\n handleSecondaryButton={() => { this.continueToNextStep('filterPopin') }} />\r\n }\r\n {/** ************************** Ou se trouve le nemuro de serie ? [For Desktop] *************************/}\r\n\r\n {window.isMobile() == 'desktop' && \r\n\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SerieTab)\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport CONSTANTS from '../../../constants'\r\nimport { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setFilterDealersBy } from '../../../actions/action'\r\nimport TabSection from './TabSection'\r\nimport { Input, Button, Radio } from '../../Forms/Forms'\r\nimport fetchApiData from '../../apiHandlers/fetchApiData'\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager'\r\nimport PopUp from '../../popup/popup'\r\nimport './Tabs.css'\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setFilterDealersBy }\r\n\r\nclass MatriculTab extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n //validFirstSection: true,\r\n //validSecondeSection: false,\r\n showPopup: false,\r\n showFiltersPopup: false,\r\n step1Loading: false,\r\n step1ButtonDisabled: true,\r\n step2ButtonDisabled: (!Object.values(this.props.store.kilo).length),\r\n immaInput: '',\r\n matriculeCodeError: false,\r\n KilometrageError: false,\r\n kilometrage: props.store.kilo.kilometrage || \"\",\r\n contratSerivce: (!!(Object.values(props.store.kilo).length > 0 && props.store.kilo.contratService)),\r\n isVehiclePC: this.props.store.car.PC === undefined ? false : this.props.store.car.PC,\r\n isVehicleLCV: this.props.store.car.LCV === undefined ? false : this.props.store.car.LCV\r\n }\r\n this.isRecallCampagneActivate = !!Number(window.siteConfig.ActivateRecallCampaign);\r\n this.checkMatriculCode = this.checkMatriculCode.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n immaInput: this.props.prevData.immaInput,\r\n step1ButtonDisabled: (!(this.props.prevData.immaInput && this.props.prevData.immaInput.length > 2))\r\n })\r\n\r\n }\r\n\r\n checkMatriculCode() {\r\n const CarDetails = new fetchApiData()\r\n this.setState({ step1Loading: true })\r\n\r\n CarDetails.getImmatr(this.state.immaInput.toUpperCase()).then(\r\n data => {\r\n switch (data.d.ErrorCode) {\r\n case 0:\r\n if (this.props.store.listPremiumServices.some(item =>\r\n (item.codeIntern === 'PC' || item.codeIntern === 'LCV') && item.displayDL)) {\r\n if (!((data.d.VehicleInfo.LCV === this.props.store.dealer.LCV) || (data.d.VehicleInfo.PC === this.props.store.dealer.PC))) {\r\n this.setState({ showFiltersPopup: true })\r\n this.isfiltersPopinOpen = true\r\n document.body.classList.add('no-scroll')\r\n }\r\n }\r\n\r\n this.isRecallCampagneActivate && this.checkCampagneRappel(data.d.VehicleInfo.SerialNumber)\r\n\r\n this.props.setVeiculeInfos(data.d.VehicleInfo)\r\n this.setState({ /*validFirstSection: false, */step1Loading: false })\r\n this.props.updateServicesAfterDataChanged()\r\n !this.isRecallCampagneActivate && !this.isfiltersPopinOpen && this.props.CurrentStepSetAction(4)\r\n pushEventToGTM({\r\n pageName: 'car-details',\r\n eventAction: 'Redirection::Internal::Next_step',\r\n eventLabel: 'registration_plate'\r\n })\r\n\r\n\r\n break\r\n default:\r\n this.setState({ matriculeCodeError: (data.d.ErrorMessage == 1 ? CONSTANTS.LABELS.vehicule_plate_step1_error_incorrect : CONSTANTS.LABELS.vehicule_plate_step1_error_unknown) })\r\n this.setState({ step1Loading: false })\r\n break\r\n }\r\n })\r\n .catch(error => {\r\n console.log('fait: ', error)\r\n this.setState({ step1Loading: false })\r\n });\r\n this.props.setVeiculeKilo({ contratService: this.state.contratSerivce, kilometrage: this.state.kilometrage, carStep: '1' })\r\n }\r\n checkCampagneRappel = (serialNumber) => {\r\n const cpRappelData = new fetchApiData()\r\n cpRappelData.getCompagneRappelEligibility(serialNumber).then(\r\n data => {\r\n if (data.d.Eligible) {\r\n this.setState({\r\n showPopup: true\r\n });\r\n document.body.classList.add('no-scroll')\r\n this.isRecallCompagnePopinOpen = true;\r\n }\r\n !this.isRecallCompagnePopinOpen && !this.isfiltersPopinOpen && this.props.CurrentStepSetAction(4)\r\n\r\n })\r\n .catch(error => {\r\n console.log('fait: ', error)\r\n });\r\n\r\n }\r\n\r\n continueToNextStep(popinName) {\r\n if (popinName === 'recallCompaingPopin') {\r\n this.setState({\r\n showPopup: false\r\n });\r\n document.body.classList.remove('no-scroll')\r\n this.isRecallCompagnePopinOpen = false;\r\n }\r\n if (popinName === 'filterPopin') {\r\n this.setState({\r\n showFiltersPopup: false\r\n });\r\n document.body.classList.remove('no-scroll')\r\n this.isfiltersPopinOpen = false\r\n }\r\n if (!this.isRecallCompagnePopinOpen && !this.isfiltersPopinOpen) this.props.CurrentStepSetAction(4)\r\n\r\n }\r\n goToDealersLocator = () => {\r\n // this.state.isVehicleLCV ? this.props.setFilterDealersBy('LCV') : (this.state.isVehiclePC ? this.props.setFilterDealersBy('PC') : this.props.setFilterDealersBy('ALL'))\r\n this.props.store.listPremiumServices.forEach(item => {\r\n if (item.codeIntern === 'LCV' && this.state.isVehicleLCV) {\r\n if (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n this.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n }\r\n }\r\n if (item.codeIntern === 'PC' && this.state.isVehiclePC) {\r\n if (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n this.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n }\r\n }\r\n })\r\n this.props.CurrentStepSetAction(1)\r\n }\r\n render() {\r\n const { ModelLabel, EnergyLabel } = this.props.store.car\r\n const popInFilterContent = \r\n\r\n
\r\n\r\n }\r\n {/* {!this.state.validFirstSection && <>\r\n \r\n \r\n
\r\n \r\n {\r\n this.setState({ serieInput: e.target.value })\r\n this.props.dataFromChild({\r\n serieInput: e.target.value\r\n });\r\n (e.target.value.trim().length ? this.setState({ step1ButtonDisabled: false }) : this.setState({ step1ButtonDisabled: true }))\r\n }}\r\n isInvalid={this.state.serieCodeError}\r\n Value={this.state.serieInput}\r\n />\r\n {/** ************************** Ou se trouve le nemuro de serie ? [For Mobile] *************************/}\r\n {window.isMobile() != 'desktop' &&
\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n \r\n
}\r\n {/** ************************** END- Ou se trouve le nemuro de serie ? [For Mobile] *************************/}\r\n\r\n {/* \r\n
\r\n
\r\n this.checkSerieCode()}\r\n Disabled={this.state.step1ButtonDisabled}\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
*/}\r\n \r\n
\r\n } */}\r\n\r\n {CONSTANTS.LABELS.vehicule_step2_title}\r\n {CONSTANTS.SITE_INFO.BRAND_NAME} {ModelLabel} - {EnergyLabel}\r\n
\r\n\r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_km1}\r\n
\r\n\r\n \r\n {\r\n this.setState({ kilometrage: e.target.value })\r\n this.checkKilometreValidity(e.target.value)\r\n }}\r\n isInvalid={this.state.KilometrageError}\r\n >{CONSTANTS.LABELS.vehicule_step2_km2}\r\n \r\n
\r\n \r\n
\r\n {// Recall compagne Popup\r\n this.state.showPopup &&\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n
\r\n \r\n { this.setState({ contratSerivce: false }) }} />\r\n { this.setState({ contratSerivce: true }) }} />\r\n
\r\n\r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_serial_step1_help2}\r\n
\r\n
\r\n\r\n \r\n
}\r\n {/** ************************** END- Ou se trouve le nemuro de serie ? [For Desktop] *************************/}\r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n\r\n {/* \r\n {\r\n // this.checkData();\r\n this.checkSerieCode();\r\n }}\r\n Disabled={this.state.step2ButtonDisabled || this.state.step1ButtonDisabled}\r\n > {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_km1}\r\n
\r\n\r\n \r\n {\r\n this.setState({ kilometrage: e.target.value })\r\n\r\n if (e.target.value.trim().length &&\r\n Number(e.target.value) > 999999\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n })\r\n } else if (\r\n e.target.value.trim().length &&\r\n !(/^[0-9]*$/.test(e.target.value))\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n })\r\n } else {\r\n this.setState({ step2ButtonDisabled: false, KilometrageError: false })\r\n }\r\n }}\r\n isInvalid={this.state.KilometrageError}\r\n >{CONSTANTS.LABELS.vehicule_step2_km2}\r\n \r\n
\r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n
\r\n \r\n { this.setState({ contratSerivce: false }) }} />\r\n { this.setState({ contratSerivce: true }) }} />\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n */}\r\n\r\n \r\n
\r\n \r\n {\r\n \r\n }}\r\n Disabled={this.state.step2ButtonDisabled}\r\n >{CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n \r\n
\r\n return (\r\n {CONSTANTS.LABELS.vehicule_filter_alert_main}
\r\n\r\n {CONSTANTS.LABELS.vehicule_filter_alert_warranty} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_maintenance} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_recall_campain} \r\n {CONSTANTS.LABELS.vehicule_filter_alert_package} \r\n
\r\n {CONSTANTS.LABELS.vehicule_filter_alert_second}
\r\n\r\n\r\n \r\n this.setState({ validFirstSection: true })}\r\n Loading={this.state.step1Loading}\r\n >\r\n {/*this.state.validFirstSection && */<>\r\n { this.continueToNextStep('recallCompaingPopin') }} />\r\n }\r\n { // filter LCV/PC incompatibility between vehicle and dealer\r\n this.state.showFiltersPopup &&\r\n this.goToDealersLocator()}\r\n handleSecondaryButton={() => { this.continueToNextStep('filterPopin') }} />\r\n }\r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MatriculTab)\r\n","import React, { Component, PureComponent } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n\tsetVeiculeInfos,\r\n\tsetVeiculeKilo,\r\n\tCurrentStepSetAction,\r\n\tsetFilterDealersBy\r\n} from '../../../actions/action';\r\nimport CONSTANTS from \"../../../constants\";\r\nimport TabSection from \"./TabSection\";\r\nimport TabInfoSection from \"./TabInfoSection\";\r\nimport { Input, Button, Radio, Select } from \"../../Forms/Forms\";\r\nimport fetchApiData from '../../apiHandlers/fetchApiData'\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager';\r\nimport PopUp from '../../popup/popup'\r\nimport {\r\n\tLink,\r\n} from 'react-router-dom';\r\nimport \"./Tabs.css\";\r\n\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, setFilterDealersBy };\r\n\r\nclass ModelTab extends PureComponent {\r\n\t_isMounted = false;\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tshowFiltersPopup: false,\r\n\t\t\tallModels: [],\r\n\t\t\tallEnergydata: [],\r\n\t\t\tisActivateRecallCampaign: !!Number(CONSTANTS.SITE_CONFIG.ActivateRecallCampaign),\r\n\t\t\tMarkInput: CONSTANTS.SITE_INFO.BRAND_CODE,\r\n\t\t\tModelInput: '0',\r\n\t\t\tModelData: this.loadModels() || {},\r\n\t\t\tEnableEnergyInput: false,\r\n\t\t\tEnergyInput: '0',\r\n\t\t\tEnergyData: {},\r\n\t\t\t//validFirstSection:true,\r\n\t\t\t//validSecondeSection:false,\r\n\t\t\tstep1Loading: false,\r\n\t\t\t//step1ButtonDisabled:true,\r\n\t\t\tstep2ButtonDisabled: true,\r\n\t\t\timmaInput: \"\",\r\n\t\t\tmatriculeCodeError: false,\r\n\t\t\tKilometrageError: false,\r\n\t\t\tkilometrage: props.store.kilo.kilometrage ? props.store.kilo.kilometrage : \"\",\r\n\t\t\tcontratSerivce: (Object.values(props.store.kilo).length > 0 && props.store.kilo.contratService ? true : false),\r\n\t\t\tisVehiclePC: this.props.store.car.PC === undefined ? false : this.props.store.car.PC,\r\n\t\t\tisVehicleLCV: this.props.store.car.LCV === undefined ? false : this.props.store.car.LCV,\r\n\t\t\totherEnergyInput: \"\",\r\n\t\t\totherModelInput: \"\",\r\n\t\t\tdidChooseOtherModel: false\r\n\t\t};\r\n\t\tthis.isActivateFiltersVPVU = this.props.store.listPremiumServices.some(item =>\r\n\t\t\t(item.codeIntern === 'PC' || item.codeIntern === 'LCV') && item.displayDL);\r\n\t\tlet selectedModelOrMotor = {};\r\n\t\tthis.loadModels = this.loadModels.bind(this);\r\n\t\tthis.loadMotos = this.loadMotos.bind(this);\r\n\t\tthis.validStep = this.validStep.bind(this);\r\n\t}\r\n\tcomponentDidMount() {\r\n\t\tconsole.log(this.isActivateFiltersVPVU)\r\n\t\tthis._isMounted = true;\r\n\t\tthis.setState({\r\n\t\t\tModelInput: this.props.prevData.ModelInput,\r\n\t\t\tEnergyInput: this.props.prevData.EnergyInput,\r\n\t\t\tstep2ButtonDisabled: (Object.values(this.props.store.kilo).length ? false : true)\r\n\t\t});\r\n\t\tif (this.props.prevData.ModelInput !== undefined)\r\n\t\t\tthis.loadMotos(this.props.prevData.ModelInput);\r\n\r\n\r\n\t\t//Si le modèle est autre, préremplir les infos\r\n\t\tif (\r\n\t\t\t(this.props.store.car.BrandCode === \"O\" || !this.props.store.car.MotorCode)\r\n\t\t\t&& this.props.prevData.EnergyInput !== undefined\r\n\t\t\t&& this.props.prevData.ModelInput !== undefined) {\r\n\t\t\tthis.setState({ 'MarkInput': 'O' });\r\n\t\t\tthis.setState({ EnergyInput: this.props.store.car.EnergyLabel })\r\n\t\t\tthis.setState({ ModelInput: this.props.store.car.ModelLabel })\r\n\t\t\tthis.setState({ 'didChooseOtherModel': true });\r\n\t\t}\r\n\t\telse { //Si peugeot à Autre\r\n\t\t\tthis.setState({ EnergyInput: this.props.store.car.MotorCode })\r\n\t\t\tthis.setState({ ModelInput: this.props.store.car.ModelCode })\r\n\t\t}\r\n\t\tthis.setState({ 'step1Loading': true });\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis._isMounted = false;\r\n\r\n\t}\r\n\r\n\tloadModels() {\r\n\r\n\t\tconst ModelsDetails = new fetchApiData();\r\n\t\tModelsDetails.getModels().then(\r\n\t\t\tdata => {\r\n\t\t\t\tif (this._isMounted) {\r\n\t\t\t\t\tlet Data = [];\r\n\t\t\t\t\tData['0'] = '- ' + CONSTANTS.LABELS.vehicule_model_select_option;\r\n\r\n\t\t\t\t\tif (data.d.length) {\r\n\t\t\t\t\t\tthis.setState({ allModels: data.d })\r\n\t\t\t\t\t\tdata.d.map(function (item) {\r\n\t\t\t\t\t\t\tData[item.Value] = item.Text;\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.setState({ ModelData: Data, step1Loading: false });\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t.catch(error => {\r\n\t\t\t\tconsole.log('Error: ', error);\r\n\t\t\t\tthis.setState({ 'step1Loading': false });\r\n\t\t\t});\r\n\t}\r\n\t// this is for loading energie/Motos\r\n\tloadMotos(motoCode) {\r\n\t\tconst MotosDetails = new fetchApiData();\r\n\t\tthis.setState({ step1Loading: true });\r\n\t\tMotosDetails.getMotos(motoCode).then(\r\n\t\t\tdata => {\r\n\t\t\t\tlet Data = [];\r\n\t\t\t\tData[0] = '- ' + CONSTANTS.LABELS.vehicule_model_select_option;\r\n\t\t\t\tif (data.d.length) {\r\n\t\t\t\t\t//this.setState({validFirstSection:false,step1Loading:false}); \r\n\t\t\t\t\tthis.setState({ allEnergydata: data.d })\r\n\t\t\t\t\tdata.d.map(function (item) {\r\n\t\t\t\t\t\tData[item.Value] = item.Text;\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\tthis.setState({ step1Loading: false, EnergyData: Data });\r\n\t\t\t})\r\n\t\t\t.catch(error => {\r\n\t\t\t\tconsole.log('Error: ', error)\r\n\t\t\t\tthis.setState({ step1Loading: false });\r\n\t\t\t});\r\n\t}\r\n\tvalidStep() {\r\n\t\tif (this.isActivateFiltersVPVU && this.state.MarkInput != 'O') {\r\n\t\t\tif (CONSTANTS.SITE_INFO.BRAND_CODE !== 'V') {\r\n\t\t\t\tthis.selectedModelOrMotor = this.state.allModels.filter(model => model.Value === this.state.ModelInput);\r\n\t\t\t\tif (!((this.selectedModelOrMotor[0].PC === this.props.store.dealer.PC) || (this.selectedModelOrMotor[0].LCV === this.props.store.dealer.LCV))) {\r\n\t\t\t\t\tthis.setState({ showFiltersPopup: true })\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\tisVehicleLCV: this.selectedModelOrMotor[0].LCV,\r\n\t\t\t\t\t\tisVehiclePC: this.selectedModelOrMotor[0].PC\r\n\t\t\t\t\t})\r\n\t\t\t\t\tdocument.body.classList.add('no-scroll')\r\n\t\t\t\t} else this.props.CurrentStepSetAction(4);\r\n\t\t\t}\r\n\t\t\telse if (CONSTANTS.SITE_INFO.BRAND_CODE === 'V') {\r\n\t\t\t\tthis.selectedModelOrMotor = this.state.allEnergydata.filter(motorEnergy => motorEnergy.Value === this.state.EnergyInput);\r\n\t\t\t\tif (!((this.selectedModelOrMotor[0].PC === this.props.store.dealer.PC) || (this.selectedModelOrMotor[0].LCV === this.props.store.dealer.LCV))) {\r\n\t\t\t\t\tthis.setState({ showFiltersPopup: true })\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\tisVehicleLCV: this.selectedModelOrMotor[0].LCV,\r\n\t\t\t\t\t\tisVehiclePC: this.selectedModelOrMotor[0].PC\r\n\t\t\t\t\t})\r\n\t\t\t\t\tdocument.body.classList.add('no-scroll')\r\n\t\t\t\t} else this.props.CurrentStepSetAction(4);\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.props.CurrentStepSetAction(4);\r\n\t\t}\r\n\t\tthis.props.setVeiculeInfos({\r\n\t\t\t\"PC\": (this.isActivateFiltersVPVU && this.state.MarkInput != 'O') ? this.selectedModelOrMotor[0].PC : false,\r\n\t\t\t\"LCV\": (this.isActivateFiltersVPVU && this.state.MarkInput != 'O') ? this.selectedModelOrMotor[0].LCV : false,\r\n\t\t\t\"Mileage\": null,\r\n\t\t\t\"SerialNumber\": \"\",\r\n\t\t\t\"HasServiceContract\": null,\r\n\t\t\t\"BrandLabel\": window.siteConfig.brand,\r\n\t\t\t\"BrandCode\": this.state.MarkInput,\r\n\t\t\t\"ModelCode\": (this.state.MarkInput != 'O' ? this.state.ModelInput : ''),\r\n\t\t\t\"ModelLabel\": (this.state.MarkInput != 'O' ? this.state.ModelData[this.state.ModelInput] : this.state.ModelInput),\r\n\t\t\t\"EnergyLabel\": (this.state.MarkInput != 'O' ? this.state.EnergyData[this.state.EnergyInput] : this.state.EnergyInput),\r\n\t\t\t\"MotorCode\": (this.state.MarkInput != 'O' ? this.state.EnergyInput : ''),\r\n\t\t\t//\t\"MotorLabel\": (this.state.MarkInput != 'O' ? this.state.EnergyData[this.state.EnergyInput] : this.state.EnergyInput),\r\n\t\t\t\"Lcdv\": \"\",\r\n\t\t\t\"Registration\": \"\",\r\n\t\t});\r\n\t\t//this.setState({validFirstSection:false})\r\n\r\n\t}\r\n\tcontinueToNextStep() {\r\n\t\tthis.setState({\r\n\t\t\tshowFiltersPopup: false\r\n\t\t});\r\n\t\tdocument.body.classList.remove('no-scroll')\r\n\r\n\t\tthis.props.CurrentStepSetAction(4)\r\n\t\t// pushEventToGTM({\r\n\t\t// \tpageName: 'car-details',\r\n\t\t// \teventAction: 'Redirection::Internal::Next_step',\r\n\t\t// \teventLabel: 'model'\r\n\t\t// });\r\n\r\n\t}\r\n\tgoToDealersLocator = () => {\r\n\t\tthis.props.store.listPremiumServices.forEach(item => {\r\n\t\t\tif (item.codeIntern === 'LCV' && this.state.isVehicleLCV) {\r\n\t\t\t\tif (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n\t\t\t\t\tthis.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif (item.codeIntern === 'PC' && this.state.isVehiclePC) {\r\n\t\t\t\tif (this.props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n\t\t\t\t\tthis.props.setFilterDealersBy([...this.props.store.filterDealersBy, item.idServicePremium])\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t\tthis.props.CurrentStepSetAction(1)\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst { ModelLabel, EnergyLabel } = this.props.store.car;\r\n\t\tconst { brand, currentBrand } = window.siteConfig;\r\n\t\tconst brandChoices = { [currentBrand]: (brand.toLowerCase() === \"citroen\" ? \"Citroën\" : brand), 'O': CONSTANTS.LABELS.vehicule_model_select_other };\r\n\t\tconst popInFilterContent = \r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_plate_step1_licenseplate}\r\n
\r\n\r\n \r\n {\r\n this.setState({ immaInput: e.target.value })\r\n this.props.dataFromChild({\r\n immaInput: e.target.value\r\n });\r\n (e.target.value.trim().length ? this.setState({ step1ButtonDisabled: false }) : this.setState({ step1ButtonDisabled: true }))\r\n }}\r\n isInvalid={this.state.matriculeCodeError}\r\n Value={this.state.immaInput}\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_km1}\r\n
\r\n\r\n \r\n {\r\n this.setState({ kilometrage: e.target.value })\r\n\r\n if (e.target.value.trim().length &&\r\n (Number(e.target.value) > 999999 || e.target.value.trim().length > 6)\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n })\r\n } else if (\r\n e.target.value.trim().length &&\r\n !(/^[0-9]*$/.test(e.target.value))\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n })\r\n }\r\n else if (e.target.value.trim().length &&\r\n Number(e.target.value) === 0) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_zero\r\n })\r\n }\r\n else {\r\n this.setState({ step2ButtonDisabled: false, KilometrageError: false })\r\n }\r\n }}\r\n isInvalid={this.state.KilometrageError}\r\n >{CONSTANTS.LABELS.vehicule_step2_km2}\r\n \r\n
\r\n \r\n
\r\n {\r\n this.state.showPopup &&\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n
\r\n \r\n { this.setState({ contratSerivce: false }) }} />\r\n { this.setState({ contratSerivce: true }) }} />\r\n
\r\n \r\n \r\n
\r\n }\r\n {/* {!this.state.validFirstSection && <>\r\n \r\n\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n\r\n\r\n {/* this.checkMatriculCode()}\r\n Disabled={this.state.step1ButtonDisabled}\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n */}\r\n
\r\n {/** Infos Icon is deleted temporarly , leave it commented.\r\n \r\n
\r\n\r\n **/}\r\n \r\n
\r\n } */}\r\n \r\n\r\n {/* {CONSTANTS.LABELS.vehicule_step2_title}\r\n {CONSTANTS.SITE_INFO.BRAND_NAME} {ModelLabel} - {EnergyLabel}\r\n
\r\n\r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_km1}\r\n
\r\n\r\n \r\n {\r\n this.setState({ kilometrage: e.target.value })\r\n\r\n if (e.target.value.trim().length &&\r\n Number(e.target.value) > 999999\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n })\r\n } else if (\r\n e.target.value.trim().length &&\r\n !(/^[0-9]*$/.test(e.target.value))\r\n ) {\r\n this.setState({\r\n step2ButtonDisabled: true,\r\n KilometrageError: CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n })\r\n } else {\r\n this.setState({ step2ButtonDisabled: false, KilometrageError: false })\r\n }\r\n }}\r\n isInvalid={this.state.KilometrageError}\r\n >{CONSTANTS.LABELS.vehicule_step2_km2}\r\n \r\n
\r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n
\r\n \r\n { this.setState({ contratSerivce: false }) }} />\r\n { this.setState({ contratSerivce: true }) }} />\r\n
\r\n \r\n \r\n
\r\n\r\n */}\r\n \r\n
\r\n \r\n {\r\n this.props.CurrentStepSetAction(4)\r\n this.props.setVeiculeKilo({ contratService: this.state.contratSerivce, kilometrage: this.state.kilometrage, carStep: '1' })\r\n this.props.updateServicesAfterDataChanged()\r\n pushEventToGTM({\r\n pageName: 'car-details',\r\n eventAction: 'Redirection::Internal::Next_step',\r\n eventLabel: 'registration_plate'\r\n })\r\n }}\r\n Disabled={this.state.step2ButtonDisabled}\r\n >{CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n \r\n\t\t\t
\r\n\r\n\r\n\t\treturn ({CONSTANTS.LABELS.vehicule_filter_alert_main}
\r\n\t\t\t\r\n\t\t\t\t{CONSTANTS.LABELS.vehicule_filter_alert_warranty} \r\n\t\t\t\t{CONSTANTS.LABELS.vehicule_filter_alert_maintenance} \r\n\t\t\t\t{CONSTANTS.LABELS.vehicule_filter_alert_recall_campain} \r\n\t\t\t\t{CONSTANTS.LABELS.vehicule_filter_alert_package} \r\n\t\t\t
\r\n\t\t{CONSTANTS.LABELS.vehicule_filter_alert_second}
\r\n\t\t\t\t\r\n\t\t\t{this.state.isActivateRecallCampaign && }\r\n\r\n\t\t\t\r\n\r\n\t\t\tthis.setState({validFirstSection:true})}\r\n\t\t\t\tLoading={this.state.step1Loading}>\r\n\t\t\t\t{/*this.state.validFirstSection && */ \r\n\t\t\t\t\t this.goToDealersLocator()}\r\n\t\t\t\t\t\t\thandleSecondaryButton={() => { this.continueToNextStep('filterPopin') }} />\r\n\t\t\t\t\t}\r\n\r\n\r\n\t\t\t\t\t{/**\r\n\t\t\t\t\t\t\t\t }\r\n\t\t\t\t{/* {!this.state.validFirstSection && \r\n\t\t\t\t\t\t\t\t } */}\r\n\t\t\t\r\n\t\t\t{/* \r\n\t\t\t\t\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ModelTab);\r\n","import React from 'react';\r\nimport ContentLoader from 'react-content-loader'\r\n\r\n\r\n\r\n\r\nconst CarDetailsLoader = (props) => {\r\n\tif (window.isMobile() == 'desktop') {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_model_step1_label_brand}\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\tthis.setState({ MarkInput: e.target.value })\r\n\t\t\t\t\t\t\t\t\t//Si Peugeot à autre\r\n\t\t\t\t\t\t\t\t\tif (e.target.value === \"O\") {\r\n\t\t\t\t\t\t\t\t\t\t// Vérifier si la personne est passée par modèle initialement\r\n\t\t\t\t\t\t\t\t\t\tif (this.props.store.car.BrandLabel !== null && this.props.store.car.BrandLabel !== \"O\") {\r\n\t\t\t\t\t\t\t\t\t\t\t//Vérifier si Toujours Opel\r\n\t\t\t\t\t\t\t\t\t\t\tif (this.state.didChooseOtherModel === false) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t//Ne pas afficher les infos du modele dans autre\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: \"\" })\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: \"\" })\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\t\t//Si la personne a choisi un autre modele, afficher les infos\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: this.props.store.car.EnergyLabel })\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: this.props.store.car.ModelLabel })\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: this.props.store.car.EnergyLabel })\r\n\t\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: this.props.store.car.ModelLabel })\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\telse { //Si autre à peugeot\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: this.props.store.car.MotorCode })\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: this.props.store.car.ModelCode })\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_model_step1_label_model}\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t{(this.state.MarkInput != 'O' ?\r\n\t\t\t\t\t\t\t\t {\r\n\r\n\t\t\t\t\t\t\t\t\t\tif (e.target.value.trim() !== \"0\") {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.loadMotos(e.target.value);\r\n\t\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: e.target.value, EnergyInput: '0' });\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\t\tthis.props.dataFromChild({\r\n\t\t\t\t\t\t\t\t\t\t\tEnergyInput: false,\r\n\t\t\t\t\t\t\t\t\t\t\tModelInput: e.target.value,\r\n\t\t\t\t\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\tthis.props.dataFromChild({\r\n\t\t\t\t\t\t\t\t\t\t\tEnergyInput: false,\r\n\t\t\t\t\t\t\t\t\t\t\tModelInput: e.target.value,\r\n\t\t\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ ModelInput: e.target.value });\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tValue={this.state.ModelInput}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_model_step1_label_energy}\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t{(this.state.MarkInput != 'O' ?\r\n\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: e.currentTarget.value });\r\n\t\t\t\t\t\t\t\t\t\tthis.props.dataFromChild({\r\n\t\t\t\t\t\t\t\t\t\t\tEnergyInput: e.currentTarget.value,\r\n\t\t\t\t\t\t\t\t\t\t\tModelInput: this.state.ModelInput,\r\n\t\t\t\t\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ EnergyInput: e.target.value })\r\n\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tValue={this.state.EnergyInput}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_step2_km1}\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t {\r\n\r\n\t\t\t\t\t\t\t\t\tthis.setState({ kilometrage: e.target.value });\r\n\r\n\t\t\t\t\t\t\t\t\tif (e.target.value.trim().length\r\n\t\t\t\t\t\t\t\t\t\t&& (Number(e.target.value) > 999999 || e.target.value.trim().length > 6)\r\n\t\t\t\t\t\t\t\t\t) {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\t\t\t\tstep2ButtonDisabled: true,\r\n\t\t\t\t\t\t\t\t\t\t\tKilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t} else if (\r\n\t\t\t\t\t\t\t\t\t\te.target.value.trim().length\r\n\t\t\t\t\t\t\t\t\t\t&& !(/^[0-9]*$/.test(e.target.value))\r\n\t\t\t\t\t\t\t\t\t) {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\t\t\t\tstep2ButtonDisabled: true,\r\n\t\t\t\t\t\t\t\t\t\t\tKilometrageError: CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\telse if (e.target.value.trim().length &&\r\n\t\t\t\t\t\t\t\t\t\tNumber(e.target.value) === 0) {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\t\t\t\tstep2ButtonDisabled: true,\r\n\t\t\t\t\t\t\t\t\t\t\tKilometrageError: CONSTANTS.LABELS.vehicule_step2_error_zero\r\n\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\tthis.setState({ step2ButtonDisabled: false, KilometrageError: false })\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\r\n\r\n\t\t\t\t\t\t\t\t}}\r\n\r\n\t\t\t\t\t\t\t\tisInvalid={this.state.KilometrageError}>{CONSTANTS.LABELS.vehicule_step2_km2}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_step2_warranty}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t { this.setState({ contratSerivce: false }) }} />\r\n\t\t\t\t\t\t\t { this.setState({ contratSerivce: true }) }} />\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t{ // filter LCV/PC incompatibility between vehicle and dealer\r\n\t\t\t\t\t\tthis.state.showFiltersPopup &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t {\r\n\r\n\t\t\t\t\t\t\t\t\t\tthis.validStep();\r\n\t\t\t\t\t\t\t\t\t\tthis.props.setVeiculeKilo({ contratService: this.state.contratSerivce, kilometrage: this.state.kilometrage, carStep: '3' })\r\n\t\t\t\t\t\t\t\t\t\tthis.props.updateServicesAfterDataChanged();\r\n\t\t\t\t\t\t\t\t\t\tpushEventToGTM({\r\n\t\t\t\t\t\t\t\t\t\t\tpageName: 'car-details',\r\n\t\t\t\t\t\t\t\t\t\t\teventAction: 'Redirection::Internal::Next_step',\r\n\t\t\t\t\t\t\t\t\t\t\teventLabel: 'model'\r\n\t\t\t\t\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tDisabled={this.state.step2ButtonDisabled ||\r\n\t\t\t\t\t\t\t\t\t\tthis.state.kilometrage.length < 1 ||\r\n\t\t\t\t\t\t\t\t\t\tthis.state.EnergyInput == \"0\" ||\r\n\t\t\t\t\t\t\t\t\t\tthis.state.EnergyInput == \"\" ||\r\n\t\t\t\t\t\t\t\t\t\tthis.state.ModelInput == \"0\" ||\r\n\t\t\t\t\t\t\t\t\t\tthis.state.ModelInput == \"\"}\r\n\t\t\t\t\t\t\t\t>{CONSTANTS.LABELS.common_v2_nextstep}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t**/}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n \t\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_step2_title} \r\n \t\t\t{ this.state.MarkInput != 'O' && CONSTANTS.SITE_INFO.BRAND_NAME} {ModelLabel} - {MotorLabel}
\r\n \t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_step2_km1}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\r\n\t\t\t\t\t\t\t\t\t\t\tthis.setState({kilometrage:e.target.value});\r\n\r\n\t\t\t\t\t\t\t\t\t\t\tif(e.target.value.trim().length \r\n\t\t\t\t\t\t\t\t\t\t\t\t&& Number(e.target.value) > 999999\r\n\t\t\t\t\t\t\t\t\t\t\t ){\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ \r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep2ButtonDisabled: true, \r\n\t\t\t\t\t\t\t\t\t\t\t\t\tKilometrageError: CONSTANTS.LABELS.vehicule_step2_error_limitednumbers \r\n\t\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t\t}else if ( \r\n\t\t\t\t\t\t\t\t\t\t\t\te.target.value.trim().length \r\n\t\t\t\t\t\t\t\t\t\t\t\t&& !(/^[0-9]*$/.test(e.target.value))\r\n\t\t\t\t\t\t\t\t\t\t\t\t){\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep2ButtonDisabled:true,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tKilometrageError:CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n\t\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({step2ButtonDisabled:false,KilometrageError:false})\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t \r\n\r\n\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\tisInvalid={this.state.KilometrageError}>{CONSTANTS.LABELS.vehicule_step2_km2}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{CONSTANTS.LABELS.vehicule_step2_warranty}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.setState({contratSerivce:false})}} />\r\n\t\t\t\t\t\t\t\t\t\t{this.setState({contratSerivce:true})}} />\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t */}\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n \t\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t this.props.CurrentStepSetAction(4);\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.props.setVeiculeKilo({contratService: this.state.contratSerivce,kilometrage:this.state.kilometrage,carStep:'3'})\r\n\t\t\t\t\t\t\t\t\t\t\t\tthis.props.updateServicesAfterDataChanged();\r\n\t\t\t\t\t\t\t\t\t\t\t\tpushEventToGTM({pageName:'car-details',\r\n eventAction: 'Redirection::Internal::Next_step',\r\n eventLabel:'model'\r\n });\r\n\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\tDisabled={this.state.step2ButtonDisabled}\r\n\t\t\t\t\t\t\t\t\t\t\t>{CONSTANTS.LABELS.common_v2_nextstep}\r\n \t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n {this.props.children}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default LayoutTabs;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport CONSTANTS from \"../../../constants\";\r\nimport Button from \"../../Forms/Button\";\r\nimport InputOutlined from \"../../Forms/InputOutlined\";\r\nimport Radio from \"../../Forms/Radio\";\r\nimport \"./MatriculeTabFlex.scss\";\r\nimport {\r\n setVeiculeInfos,\r\n CurrentStepSetAction,\r\n setVeiculeKilo,\r\n setFilterDealersBy,\r\n} from \"./../../../actions/action\";\r\nimport { connect } from \"react-redux\";\r\nimport fetchApiData from \"../../apiHandlers/fetchApiData\";\r\nimport { pushEventToGTM } from \"../../../helpers/trackerManager\";\r\nimport PopUp from \"../../popup/popup\";\r\n\r\nconst mapStateToProps = (state) => state;\r\nconst mapDispatchToProps = {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n CurrentStepSetAction,\r\n setFilterDealersBy,\r\n};\r\n\r\nconst MatriculeTabFlex = (props) => {\r\n const [showPopup, setShowPopup] = useState(false);\r\n const [showFiltersPopup, setShowFiltersPopup] = useState(false);\r\n const [step1Loading, setStep1Loading] = useState(false);\r\n const [step1ButtonDisabled, setStep1ButtonDisabled] = useState(true);\r\n const [step2ButtonDisabled, setStep2ButtonDisabled] = useState(\r\n !Object.values(props.store.kilo).length\r\n );\r\n const [immaInput, setImmaInput] = useState(\"\");\r\n const [matriculeCodeError, setMatriculeCodeError] = useState(false);\r\n const [KilometrageError, setKilometrageError] = useState(false);\r\n const [kilometrage, setKilometrage] = useState(\r\n props.store.kilo.kilometrage || \"\"\r\n );\r\n const [contratSerivce, setContratSerivce] = useState(\r\n !!(\r\n Object.values(props.store.kilo).length > 0 &&\r\n props.store.kilo.contratService\r\n )\r\n );\r\n const [isVehiclePC, setIsVehiclePC] = useState(\r\n props.store.car.PC === undefined ? false : props.store.car.PC\r\n );\r\n const [isVehicleLCV, setIsVehicleLCV] = useState(\r\n props.store.car.LCV === undefined ? false : props.store.car.LCV\r\n );\r\n\r\n const isRecallCampagneActivate = !!Number(\r\n window.siteConfig.ActivateRecallCampaign\r\n );\r\n\r\n let isfiltersPopinOpen = undefined;\r\n let isRecallCompagnePopinOpen = undefined;\r\n\r\n useEffect(() => {\r\n setImmaInput(props.prevData.immaInput);\r\n setStep1ButtonDisabled(\r\n !(props.prevData.immaInput && props.prevData.immaInput.length > 2)\r\n );\r\n }, [setImmaInput, setStep1ButtonDisabled, props]);\r\n\r\n const checkMatriculCode = () => {\r\n const CarDetails = new fetchApiData();\r\n setStep1Loading(true);\r\n\r\n CarDetails.getImmatr(immaInput.toUpperCase())\r\n .then((data) => {\r\n switch (data.d.ErrorCode) {\r\n case 0:\r\n if (\r\n props.store.listPremiumServices.some(\r\n (item) =>\r\n (item.codeIntern === \"PC\" || item.codeIntern === \"LCV\") &&\r\n item.displayDL\r\n )\r\n ) {\r\n if (\r\n !(\r\n data.d.VehicleInfo.LCV === props.store.dealer.LCV ||\r\n data.d.VehicleInfo.PC === props.store.dealer.PC\r\n )\r\n ) {\r\n setShowFiltersPopup(true);\r\n isfiltersPopinOpen = true;\r\n document.body.classList.add(\"no-scroll\");\r\n }\r\n }\r\n\r\n isRecallCampagneActivate &&\r\n checkCampagneRappel(data.d.VehicleInfo.SerialNumber);\r\n\r\n props.setVeiculeInfos(data.d.VehicleInfo);\r\n setStep1Loading(false);\r\n props.updateServicesAfterDataChanged();\r\n !isRecallCampagneActivate &&\r\n !isfiltersPopinOpen &&\r\n props.CurrentStepSetAction(4);\r\n pushEventToGTM({\r\n pageName: \"car-details\",\r\n eventAction: \"Redirection::Internal::Next_step\",\r\n eventLabel: \"registration_plate\",\r\n });\r\n\r\n break;\r\n default:\r\n setMatriculeCodeError(\r\n data.d.ErrorMessage == 1\r\n ? CONSTANTS.LABELS.vehicule_plate_step1_error_incorrect\r\n : CONSTANTS.LABELS.vehicule_plate_step1_error_unknown\r\n );\r\n setStep1Loading(false);\r\n break;\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(\"fait: \", error);\r\n setStep1Loading(false);\r\n });\r\n props.setVeiculeKilo({\r\n contratService: contratSerivce,\r\n kilometrage: kilometrage,\r\n carStep: \"1\",\r\n });\r\n };\r\n\r\n const checkCampagneRappel = (serialNumber) => {\r\n const cpRappelData = new fetchApiData();\r\n cpRappelData\r\n .getCompagneRappelEligibility(serialNumber)\r\n .then((data) => {\r\n if (data.d.Eligible) {\r\n setShowPopup(true);\r\n document.body.classList.add(\"no-scroll\");\r\n isRecallCompagnePopinOpen = true;\r\n }\r\n !isRecallCompagnePopinOpen &&\r\n !isfiltersPopinOpen &&\r\n props.CurrentStepSetAction(4);\r\n })\r\n .catch((error) => {\r\n console.log(\"fait: \", error);\r\n });\r\n };\r\n\r\n const continueToNextStep = (popinName) => {\r\n if (popinName === \"recallCompaingPopin\") {\r\n setShowPopup(false);\r\n document.body.classList.remove(\"no-scroll\");\r\n isRecallCompagnePopinOpen = false;\r\n }\r\n if (popinName === \"filterPopin\") {\r\n setShowFiltersPopup(false);\r\n document.body.classList.remove(\"no-scroll\");\r\n isfiltersPopinOpen = false;\r\n }\r\n if (!isRecallCompagnePopinOpen && isfiltersPopinOpen)\r\n props.CurrentStepSetAction(4);\r\n };\r\n\r\n const goToDealersLocator = () => {\r\n props.store.listPremiumServices.forEach((item) => {\r\n if (item.codeIntern === \"LCV\" && isVehicleLCV) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n if (item.codeIntern === \"PC\" && isVehiclePC) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n });\r\n props.CurrentStepSetAction(1);\r\n };\r\n\r\n useEffect(() => {\r\n console.log(\"radio value : \", contratSerivce);\r\n }, [contratSerivce]);\r\n\r\n const popInFilterContent = (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_main}\r\n
\r\n\r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_warranty}{\" \"}\r\n {\" \"}\r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_maintenance}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_recall_campain}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_package}\r\n \r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_second}\r\n
\r\n\r\n \r\n\r\n {\r\n continueToNextStep(\"recallCompaingPopin\");\r\n }}\r\n />\r\n )}\r\n\r\n {// filter LCV/PC incompatibility between vehicle and dealer\r\n showFiltersPopup && (\r\n goToDealersLocator()}\r\n handleSecondaryButton={() => {\r\n continueToNextStep(\"filterPopin\");\r\n }}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MatriculeTabFlex);\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport \"./SerieTabFlex.scss\";\r\nimport {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n CurrentStepSetAction,\r\n setFilterDealersBy,\r\n} from \"./../../../actions/action\";\r\nimport CONSTANTS from \"../../../constants\";\r\nimport { pushEventToGTM } from \"../../../helpers/trackerManager\";\r\nimport fetchApiData from \"../../apiHandlers/fetchApiData\";\r\nimport InputOutlined from \"../../Forms/InputOutlined\";\r\nimport Radio from \"../../Forms/Radio\";\r\nimport Button from \"../../Forms/Button\";\r\nimport PopUp from \"../../popup/popup\";\r\nimport vinImage from \"../../../images/AP/vininfo-illustration.jpg\";\r\n\r\nconst mapStateToProps = (state) => state;\r\nconst mapDispatchToProps = {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n CurrentStepSetAction,\r\n setFilterDealersBy,\r\n};\r\n\r\nconst SerieTabFlex = (props) => {\r\n const [showPopup, setShowPopup] = useState(false);\r\n const [showFiltersPopup, setShowFiltersPopup] = useState(false);\r\n const [step1Loading, setStep1Loading] = useState(false);\r\n const [step1ButtonDisabled, setStep1ButtonDisabled] = useState(true);\r\n const [step2ButtonDisabled, setStep2ButtonDisabled] = useState(\r\n !Object.values(props.store.kilo).length\r\n );\r\n const [serieInput, setSerieInput] = useState(\r\n props.store.car.SerialNumber || \"\"\r\n );\r\n const [serieCodeError, setSerieCodeError] = useState(false);\r\n const [KilometrageError, setKilometrageError] = useState(false);\r\n const [kilometrage, setKilometrage] = useState(\r\n props.store.kilo.kilometrage || props.store.car.Mileage || \"\"\r\n );\r\n const [contratSerivce, setContratSerivce] = useState(\r\n !!(\r\n Object.values(props.store.kilo).length > 0 &&\r\n props.store.kilo.contratService\r\n )\r\n );\r\n const [isVehiclePC, setIsVehiclePC] = useState(\r\n props.store.car.PC === undefined ? false : props.store.car.PC\r\n );\r\n const [isVehicleLCV, setIsVehicleLCV] = useState(\r\n props.store.car.LCV === undefined ? false : props.store.car.LCV\r\n );\r\n\r\n const isRecallCampagneActivate = !!Number(\r\n window.siteConfig.ActivateRecallCampaign\r\n );\r\n\r\n let isfiltersPopinOpen = undefined;\r\n let isRecallCompagnePopinOpen = undefined;\r\n\r\n const [isOpenPopupVin, setIsOpenPopupVin] = useState(false);\r\n\r\n const checkKilometreValidity = (km) => {\r\n if (\r\n km.toString().trim().length &&\r\n (Number(km) > 999999 || km.toString().trim().length > 6)\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(CONSTANTS.LABELS.vehicule_step2_error_limitednumbers);\r\n } else if (km.toString().trim().length < 1 || Number(km) > 999999) {\r\n setKilometrageError(false);\r\n setStep2ButtonDisabled(true);\r\n Number(km) > 999999 ||\r\n (km.toString().trim().length > 6 &&\r\n setStep2ButtonDisabled(true) &&\r\n setKilometrageError(\r\n CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n ));\r\n } else if (km.toString().trim().length && !/^[0-9]*$/.test(km)) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(CONSTANTS.LABELS.vehicule_step2_error_numbersonly);\r\n } else if (km.toString().trim().length && Number(km) === 0) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(CONSTANTS.LABELS.vehicule_step2_error_zero);\r\n } else {\r\n setStep2ButtonDisabled(false);\r\n setKilometrageError(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setSerieInput(props.store.car.vin || props.prevData.serieInput);\r\n\r\n setStep1ButtonDisabled(\r\n !(props.prevData.serieInput && props.prevData.serieInput.length > 2) &&\r\n !(props.store.car.vin && props.store.car.vin.length > 2)\r\n );\r\n checkKilometreValidity(kilometrage);\r\n }, [\r\n setSerieInput,\r\n setStep1ButtonDisabled,\r\n checkKilometreValidity,\r\n props,\r\n kilometrage,\r\n ]);\r\n\r\n const checkSerieCode = () => {\r\n const CarDetails = new fetchApiData();\r\n\r\n setStep1Loading(true);\r\n\r\n CarDetails.getSerie(serieInput)\r\n .then((data) => {\r\n switch (data.d.ErrorCode) {\r\n case 0:\r\n if (\r\n props.store.listPremiumServices.some(\r\n (item) =>\r\n (item.codeIntern === \"PC\" || item.codeIntern === \"LCV\") &&\r\n item.displayDL\r\n )\r\n ) {\r\n if (\r\n !(\r\n data.d.VehicleInfo.LCV === props.store.dealer.LCV ||\r\n data.d.VehicleInfo.PC === props.store.dealer.PC\r\n )\r\n ) {\r\n setShowFiltersPopup(true);\r\n setIsVehicleLCV(data.d.VehicleInfo.LCV);\r\n setIsVehiclePC(data.d.VehicleInfo.PC);\r\n document.body.classList.add(\"no-scroll\");\r\n isfiltersPopinOpen = true;\r\n }\r\n }\r\n\r\n props.setVeiculeInfos(data.d.VehicleInfo);\r\n setStep1Loading(false);\r\n setSerieCodeError(\"\");\r\n props.setVeiculeKilo({\r\n contratService: contratSerivce,\r\n kilometrage: kilometrage,\r\n carStep: \"2\",\r\n });\r\n props.updateServicesAfterDataChanged();\r\n isRecallCampagneActivate && checkCompagneRappelEligibility();\r\n !isRecallCampagneActivate &&\r\n !isfiltersPopinOpen &&\r\n props.CurrentStepSetAction(4);\r\n pushEventToGTM({\r\n pageName: \"car-details\",\r\n eventAction: \"Redirection::Internal::Next_step\",\r\n eventLabel: \"vin\",\r\n });\r\n break;\r\n default:\r\n setSerieCodeError(\r\n data.d.ErrorMessage == 1\r\n ? CONSTANTS.LABELS.vehicule_serial_step1_error_incorrect\r\n : CONSTANTS.LABELS.vehicule_serial_step1_error_unknown\r\n );\r\n setStep1Loading(false);\r\n break;\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(\"fait: \", Error);\r\n setStep1Loading(false);\r\n });\r\n };\r\n\r\n const checkCompagneRappelEligibility = () => {\r\n const cpRappelData = new fetchApiData();\r\n cpRappelData\r\n .getCompagneRappelEligibility(serieInput)\r\n .then((data) => {\r\n if (data.d.Eligible) {\r\n setShowPopup(true);\r\n document.body.classList.add(\"no-scroll\");\r\n isRecallCompagnePopinOpen = true;\r\n }\r\n !isRecallCompagnePopinOpen &&\r\n !isfiltersPopinOpen &&\r\n props.CurrentStepSetAction(4);\r\n })\r\n .catch((error) => {\r\n console.log(\"Error: \", error);\r\n !isRecallCompagnePopinOpen &&\r\n !isfiltersPopinOpen &&\r\n props.CurrentStepSetAction(4);\r\n });\r\n };\r\n\r\n const continueToNextStep = (popinName) => {\r\n if (popinName === \"recallCompaingPopin\") {\r\n setShowPopup(false);\r\n document.body.classList.remove(\"no-scroll\");\r\n isRecallCompagnePopinOpen = false;\r\n }\r\n if (popinName === \"filterPopin\") {\r\n setShowFiltersPopup(false);\r\n document.body.classList.remove(\"no-scroll\");\r\n isfiltersPopinOpen = false;\r\n }\r\n if (!isRecallCompagnePopinOpen && !isfiltersPopinOpen)\r\n props.CurrentStepSetAction(4);\r\n };\r\n\r\n const goToDealersLocator = () => {\r\n props.store.listPremiumServices.forEach((item) => {\r\n if (item.codeIntern === \"LCV\" && isVehicleLCV) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n if (item.codeIntern === \"PC\" && isVehiclePC) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n });\r\n props.CurrentStepSetAction(1);\r\n };\r\n\r\n const popInFilterContent = (\r\n \r\n {\r\n setImmaInput(e.target.value);\r\n props.dataFromChild({\r\n immaInput: e.target.value,\r\n });\r\n e.target.value.trim().length\r\n ? setStep1ButtonDisabled(false)\r\n : setStep1ButtonDisabled(true);\r\n }}\r\n />\r\n
\r\n\r\n \r\n {\r\n setKilometrage(e.target.value);\r\n\r\n if (\r\n e.target.value.trim().length &&\r\n (Number(e.target.value) > 999999 ||\r\n e.target.value.trim().length > 6)\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(\r\n CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n );\r\n } else if (\r\n e.target.value.trim().length &&\r\n !/^[0-9]*$/.test(e.target.value)\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(\r\n CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n );\r\n } else if (\r\n e.target.value.trim().length &&\r\n Number(e.target.value) === 0\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(CONSTANTS.LABELS.vehicule_step2_error_zero);\r\n } else {\r\n setStep2ButtonDisabled(false);\r\n setKilometrageError(false);\r\n }\r\n }}\r\n />\r\n
\r\n\r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n \r\n\r\n
\r\n\r\n \r\n {\r\n setContratSerivce(true);\r\n }}\r\n />\r\n {\r\n setContratSerivce(false);\r\n }}\r\n />\r\n
\r\n \r\n \r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n\r\n {showPopup && (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_main}\r\n
\r\n\r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_warranty}{\" \"}\r\n {\" \"}\r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_maintenance}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_recall_campain}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_package}\r\n \r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_second}\r\n
\r\n\r\n \r\n\r\n {\r\n continueToNextStep(\"recallCompaingPopin\");\r\n }}\r\n />\r\n )}\r\n {// filter LCV/PC incompatibility between vehicle and dealer\r\n showFiltersPopup && (\r\n goToDealersLocator()}\r\n handleSecondaryButton={() => {\r\n continueToNextStep(\"filterPopin\");\r\n }}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SerieTabFlex);\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport CONSTANTS from \"../../../constants\";\r\nimport { pushEventToGTM } from \"../../../helpers/trackerManager\";\r\nimport fetchApiData from \"../../apiHandlers/fetchApiData\";\r\nimport Button from \"../../Forms/Button\";\r\nimport InputOutlined from \"../../Forms/InputOutlined\";\r\nimport Radio from \"../../Forms/Radio\";\r\nimport Select from \"../../Forms/Select\";\r\nimport PopUp from \"../../popup/popup\";\r\nimport {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n CurrentStepSetAction,\r\n setFilterDealersBy,\r\n} from \"./../../../actions/action\";\r\nimport \"./ModelTabFlex.scss\";\r\n\r\nconst mapStateToProps = (state) => state;\r\nconst mapDispatchToProps = {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n CurrentStepSetAction,\r\n setFilterDealersBy,\r\n};\r\n\r\nconst ModelTabFlex = (props) => {\r\n const loadModels = () => {\r\n const ModelsDetails = new fetchApiData();\r\n ModelsDetails.getModels()\r\n .then((data) => {\r\n if (_isMounted) {\r\n let Data = [];\r\n Data[\"0\"] = \"- \" + CONSTANTS.LABELS.vehicule_model_select_option;\r\n\r\n if (data.d.length) {\r\n setAllModels(data.d);\r\n data.d.map(function(item) {\r\n Data[item.Value] = item.Text;\r\n });\r\n }\r\n setModelData(Data);\r\n setStep1Loading(false);\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(\"Error: \", error);\r\n setStep1Loading(false);\r\n });\r\n };\r\n\r\n let _isMounted = false;\r\n const [showFiltersPopup, setShowFiltersPopup] = useState(false);\r\n const [allModels, setAllModels] = useState([]);\r\n const [allEnergydata, setAllEnergydata] = useState([]);\r\n const [isActivateRecallCampaign, setIsActivateRecallCampaign] = useState(\r\n !!Number(CONSTANTS.SITE_CONFIG.ActivateRecallCampaign)\r\n );\r\n const [MarkInput, setMarkInput] = useState(CONSTANTS.SITE_INFO.BRAND_CODE);\r\n const [ModelInput, setModelInput] = useState(\"0\");\r\n const [ModelData, setModelData] = useState(loadModels() || {});\r\n const [EnableEnergyInput, setEnableEnergyInput] = useState(false);\r\n const [EnergyInput, setEnergyInput] = useState(\"0\");\r\n const [EnergyData, setEnergyData] = useState({});\r\n const [step1Loading, setStep1Loading] = useState(false);\r\n const [step2ButtonDisabled, setStep2ButtonDisabled] = useState(true);\r\n const [immaInput, setImmaInput] = useState(\"\");\r\n const [matriculeCodeError, setMatriculeCodeError] = useState(false);\r\n const [KilometrageError, setKilometrageError] = useState(false);\r\n const [kilometrage, setKilometrage] = useState(\r\n props.store.kilo.kilometrage ? props.store.kilo.kilometrage : \"\"\r\n );\r\n const [contratSerivce, setContratSerivce] = useState(\r\n Object.values(props.store.kilo).length > 0 &&\r\n props.store.kilo.contratService\r\n ? true\r\n : false\r\n );\r\n const [isVehiclePC, setIsVehiclePC] = useState(\r\n props.store.car.PC === undefined ? false : props.store.car.PC\r\n );\r\n const [isVehicleLCV, setIsVehicleLCV] = useState(\r\n props.store.car.LCV === undefined ? false : props.store.car.LCV\r\n );\r\n const [otherEnergyInput, setOtherEnergyInput] = useState(\"\");\r\n const [otherModelInput, setOtherModelInput] = useState(\"\");\r\n const [didChooseOtherModel, setDidChooseOtherModel] = useState(false);\r\n\r\n let isActivateFiltersVPVU = props.store.listPremiumServices.some(\r\n (item) =>\r\n (item.codeIntern === \"PC\" || item.codeIntern === \"LCV\") && item.displayDL\r\n );\r\n\r\n let selectedModelOrMotor = {};\r\n\r\n useEffect(() => {\r\n _isMounted = true;\r\n\r\n setModelInput(props.prevData.ModelInput);\r\n setEnergyInput(props.prevData.EnergyInput);\r\n setStep2ButtonDisabled(\r\n Object.values(props.store.kilo).length ? false : true\r\n );\r\n if (props.prevData.ModelInput !== undefined)\r\n loadMotos(props.prevData.ModelInput);\r\n\r\n //Si le modèle est autre, préremplir les infos\r\n if (\r\n (props.store.car.BrandCode === \"O\" || !props.store.car.MotorCode) &&\r\n props.prevData.EnergyInput !== undefined &&\r\n props.prevData.ModelInput !== undefined\r\n ) {\r\n setMarkInput(\"O\");\r\n setEnergyInput(props.store.car.EnergyLabel);\r\n setModelInput(props.store.car.ModelLabel);\r\n setDidChooseOtherModel(true);\r\n } else {\r\n //Si peugeot à Autre\r\n setEnergyInput(props.store.car.MotorCode);\r\n setModelInput(props.store.car.ModelCode);\r\n }\r\n setStep1Loading(true);\r\n\r\n return () => {\r\n _isMounted = false;\r\n };\r\n }, []);\r\n\r\n const loadMotos = (motoCode) => {\r\n const MotosDetails = new fetchApiData();\r\n setStep1Loading(true);\r\n MotosDetails.getMotos(motoCode)\r\n .then((data) => {\r\n let Data = [];\r\n Data[0] = \"- \" + CONSTANTS.LABELS.vehicule_model_select_option;\r\n if (data.d.length) {\r\n setAllEnergydata(data.d);\r\n data.d.map(function(item) {\r\n Data[item.Value] = item.Text;\r\n });\r\n }\r\n setStep1Loading(false);\r\n setEnergyData(Data);\r\n })\r\n .catch((error) => {\r\n console.log(\"Error: \", error);\r\n setStep1Loading(false);\r\n });\r\n };\r\n\r\n const validStep = () => {\r\n if (isActivateFiltersVPVU && MarkInput != \"O\") {\r\n if (CONSTANTS.SITE_INFO.BRAND_CODE !== \"V\") {\r\n selectedModelOrMotor = allModels.filter(\r\n (model) => model.Value === ModelInput\r\n );\r\n if (\r\n !(\r\n selectedModelOrMotor[0].PC === props.store.dealer.PC ||\r\n selectedModelOrMotor[0].LCV === props.store.dealer.LCV\r\n )\r\n ) {\r\n setShowFiltersPopup(true);\r\n setIsVehicleLCV(selectedModelOrMotor[0].LCV);\r\n setIsVehiclePC(selectedModelOrMotor[0].PC);\r\n document.body.classList.add(\"no-scroll\");\r\n } else props.CurrentStepSetAction(4);\r\n } else if (CONSTANTS.SITE_INFO.BRAND_CODE === \"V\") {\r\n selectedModelOrMotor = allEnergydata.filter(\r\n (motorEnergy) => motorEnergy.Value === EnergyInput\r\n );\r\n if (\r\n !(\r\n selectedModelOrMotor[0].PC === props.store.dealer.PC ||\r\n selectedModelOrMotor[0].LCV === props.store.dealer.LCV\r\n )\r\n ) {\r\n setShowFiltersPopup(true);\r\n setIsVehicleLCV(selectedModelOrMotor[0].LCV);\r\n setIsVehiclePC(selectedModelOrMotor[0].PC);\r\n document.body.classList.add(\"no-scroll\");\r\n } else props.CurrentStepSetAction(4);\r\n }\r\n } else {\r\n props.CurrentStepSetAction(4);\r\n }\r\n props.setVeiculeInfos({\r\n PC:\r\n isActivateFiltersVPVU && MarkInput != \"O\"\r\n ? selectedModelOrMotor[0].PC\r\n : false,\r\n LCV:\r\n isActivateFiltersVPVU && MarkInput != \"O\"\r\n ? selectedModelOrMotor[0].LCV\r\n : false,\r\n Mileage: null,\r\n SerialNumber: \"\",\r\n HasServiceContract: null,\r\n BrandLabel: window.siteConfig.brand,\r\n BrandCode: MarkInput,\r\n ModelCode: MarkInput != \"O\" ? ModelInput : \"\",\r\n ModelLabel: MarkInput != \"O\" ? ModelData[ModelInput] : ModelInput,\r\n EnergyLabel: MarkInput != \"O\" ? EnergyData[EnergyInput] : EnergyInput,\r\n MotorCode: MarkInput != \"O\" ? EnergyInput : \"\",\r\n Lcdv: \"\",\r\n Registration: \"\",\r\n });\r\n };\r\n\r\n const continueToNextStep = () => {\r\n setShowFiltersPopup(false);\r\n document.body.classList.remove(\"no-scroll\");\r\n props.CurrentStepSetAction(4);\r\n };\r\n\r\n const goToDealersLocator = () => {\r\n props.store.listPremiumServices.forEach((item) => {\r\n if (item.codeIntern === \"LCV\" && isVehicleLCV) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n if (item.codeIntern === \"PC\" && isVehiclePC) {\r\n if (props.store.filterDealersBy.indexOf(item.idServicePremium) === -1) {\r\n props.setFilterDealersBy([\r\n ...props.store.filterDealersBy,\r\n item.idServicePremium,\r\n ]);\r\n }\r\n }\r\n });\r\n props.CurrentStepSetAction(1);\r\n };\r\n\r\n const { brand, currentBrand } = window.siteConfig;\r\n const brandChoices = {\r\n [currentBrand]: brand.toLowerCase() === \"citroen\" ? \"Citroën\" : brand,\r\n O: CONSTANTS.LABELS.vehicule_model_select_other,\r\n };\r\n const popInFilterContent = (\r\n \r\n {\r\n setSerieInput(e.target.value);\r\n props.dataFromChild({\r\n serieInput: e.target.value,\r\n });\r\n e.target.value.trim().length\r\n ? setStep1ButtonDisabled(false)\r\n : setStep1ButtonDisabled(true);\r\n }}\r\n />\r\n {(window.isMobile() == \"desktop\" || window.isMobile() == \"mobile\") && (\r\n
\r\n\r\n \r\n {CONSTANTS.LABELS.vehicule_serial_step1_help1}\r\n setIsOpenPopupVin(!isOpenPopupVin)}\r\n >\r\n {isOpenPopupVin && (\r\n
\r\n )}\r\n \r\n {CONSTANTS.LABELS.vehicule_serial_step1_help2}\r\n\r\n {process.env.NODE_ENV === \"production\" && (\r\n \r\n )}\r\n\r\n {process.env.NODE_ENV !== \"production\" && (\r\n \r\n )}\r\n
\r\n )}\r\n \r\n {\r\n setKilometrage(e.target.value);\r\n checkKilometreValidity(e.target.value);\r\n }}\r\n />\r\n
\r\n\r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n \r\n\r\n
\r\n\r\n \r\n {\r\n setContratSerivce(true);\r\n }}\r\n />\r\n {\r\n setContratSerivce(false);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n checkSerieCode();\r\n }}\r\n Disabled={step2ButtonDisabled || step1ButtonDisabled}\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n\r\n {// Recall compagne Popup\r\n showPopup && (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_main}\r\n
\r\n\r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_warranty}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_maintenance}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_recall_campain}\r\n \r\n \r\n \r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_package}\r\n \r\n \r\n
\r\n \r\n {CONSTANTS.LABELS.vehicule_filter_alert_second}\r\n
\r\n\r\n \r\n \r\n\r\n goToDealersLocator()}\r\n handleSecondaryButton={() => {\r\n continueToNextStep(\"filterPopin\");\r\n }}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ModelTabFlex);\r\n","\r\nimport React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport StepHeadline from '../Titles/StepHeadline'\r\nimport CarTabs from './CarTabs'\r\nimport SerieTab from './Tabs/SerieTab'\r\nimport MatriculTab from './Tabs/MatriculTab'\r\nimport ModelTab from './Tabs/ModelTab'\r\nimport CarDetailsLoader from './CarDetailsLoader'\r\nimport LayoutTabs from '../../layouts/LayoutTabs'\r\nimport CONSTANTS from '../../constants'\r\nimport { slugify, formattedAdress } from '../../helpers/functions'\r\nimport LayoutStandardWidth from '../../layouts/LayoutStandardWidth'\r\nimport { headTitleTag } from '../../helpers/functions'\r\nimport { pushToGTMTracker } from '../../helpers/trackerManager'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n selectedServices,\r\n CurrentStepSetAction\r\n} from '../../actions/action'\r\nimport './CarDetails.css'\r\nimport { withRouter } from \"react-router\";\r\nimport MatriculeTabFlex from './Tabs/MatriculeTabFlex'\r\nimport SerieTabFlex from './Tabs/SerieTabFlex'\r\nimport ModelTabFlex from './Tabs/ModelTabFlex'\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setVeiculeInfos, setVeiculeKilo, CurrentStepSetAction, selectedServices }\r\n\r\nclass CarDetails extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n modelPrevData: {\r\n EnergyInput: (Object.values(props.store.car).length\r\n ? props.store.car.MotorCode : '0'),\r\n ModelInput: (Object.values(props.store.car).length\r\n ? props.store.car.ModelCode : '0')\r\n },\r\n seriePrevData: {\r\n serieInput: props.store.car.SerialNumber || ''\r\n },\r\n immaPrevData: {\r\n immaInput: props.store.car.Registration\r\n },\r\n pageLoaded: false,\r\n oldSerialNumber: props.store.car.SerialNumber || '',\r\n oldImmaInput: props.store.car.Registration || '',\r\n oldEnergyInput: props.store.car.MotorCode || '',\r\n oldModelInput: props.store.car.ModelCode || ''\r\n }\r\n this.updateServicesAfterDataChanged = this.updateServicesAfterDataChanged.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n // scroll to the top on user arrive to page\r\n window.scrollTo(0, 0)\r\n if (this.props.store.dealer.city) {\r\n this.setState({\r\n selectedAdress: {\r\n adress: this.props.store.dealer.city.replace(/-/g, ' ')\r\n }\r\n })\r\n }\r\n\r\n\r\n // initialase the car in case the user decide to change the car.\r\n this.props.CurrentStepSetAction(3)\r\n console.log('Change step to 3 in CarDetails')\r\n window.setTimeout(function () {\r\n this.setState({ pageLoaded: true })\r\n }.bind(this), 3000)\r\n\r\n pushToGTMTracker('car-details-page', window.siteConfig.v2vehicule.Title.replace('[nom-marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()))\r\n }\r\n\r\n updateServicesAfterDataChanged() {\r\n if (\r\n (this.state.immaPrevData.immaInput !== this.state.oldImmaInput) ||\r\n (this.state.seriePrevData.serieInput !== this.state.oldSerialNumber) ||\r\n (this.state.modelPrevData.EnergyInput !== this.state.oldEnergyInput) ||\r\n (this.state.modelPrevData.ModelInput !== this.state.oldModelInput)\r\n\r\n ) {\r\n console.log(this.props.store.SelectedServices)\r\n const SelectedServices = Object.assign({}, this.props.store.SelectedServices)\r\n const dataUpdatedWithSelectedForfaits = Object.values(SelectedServices).map(function (forfaitFamily, key) {\r\n forfaitFamily.forfaits = []\r\n console.log(forfaitFamily)\r\n return forfaitFamily\r\n })\r\n\r\n console.log(dataUpdatedWithSelectedForfaits)\r\n this.props.selectedServices(dataUpdatedWithSelectedForfaits)\r\n\r\n }\r\n }\r\n\r\n render() {\r\n\r\n\r\n const SEO_TITLE = (window.siteConfig.v2vehicule != undefined ? window.siteConfig.v2vehicule.Title : '')\r\n const SEO_DESC = (window.siteConfig.v2vehicule != undefined ? window.siteConfig.v2vehicule.MetaDescription : '')\r\n\r\n const ActivateTabImmat = (!!Number(window.siteConfig.ActivateTabImmat))\r\n const ActivateTabNumSerie = (!!Number(window.siteConfig.ActivateTabNumSerie))\r\n const ActivateTabModele = (!!Number(window.siteConfig.ActivateTabModele))\r\n return (\r\n \r\n {\r\n setMarkInput(e.target.value);\r\n //Si Peugeot à autre\r\n if (e.target.value === \"O\") {\r\n // Vérifier si la personne est passée par modèle initialement\r\n if (\r\n props.store.car.BrandLabel !== null &&\r\n props.store.car.BrandLabel !== \"O\"\r\n ) {\r\n //Vérifier si Toujours Opel\r\n if (didChooseOtherModel === false) {\r\n //Ne pas afficher les infos du modele dans autre\r\n setEnergyInput(\"\");\r\n setModelInput(\"\");\r\n } else {\r\n //Si la personne a choisi un autre modele, afficher les infos\r\n setEnergyInput(props.store.car.EnergyLabel);\r\n setModelInput(props.store.car.ModelLabel);\r\n }\r\n } else {\r\n setEnergyInput(props.store.car.EnergyLabel);\r\n setModelInput(props.store.car.ModelLabel);\r\n }\r\n } else {\r\n //Si autre à peugeot\r\n setEnergyInput(props.store.car.MotorCode);\r\n setModelInput(props.store.car.ModelCode);\r\n }\r\n }}\r\n />\r\n \r\n {CONSTANTS.LABELS.vehicule_model_step1_label_brand}\r\n \r\n
\r\n\r\n {MarkInput != \"O\" ? (\r\n \r\n {\r\n if (e.target.value.trim() !== \"0\") {\r\n loadMotos(e.target.value);\r\n setModelInput(e.target.value);\r\n setEnergyInput(\"0\");\r\n }\r\n\r\n props.dataFromChild({\r\n EnergyInput: false,\r\n ModelInput: e.target.value,\r\n });\r\n }}\r\n />\r\n \r\n {CONSTANTS.LABELS.vehicule_model_step1_label_model}\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n props.dataFromChild({\r\n EnergyInput: false,\r\n ModelInput: e.target.value,\r\n });\r\n setModelInput(e.target.value);\r\n }}\r\n value={ModelInput}\r\n />\r\n
\r\n )}\r\n\r\n {MarkInput != \"O\" ? (\r\n \r\n {\r\n setEnergyInput(e.currentTarget.value);\r\n props.dataFromChild({\r\n EnergyInput: e.currentTarget.value,\r\n ModelInput: ModelInput,\r\n });\r\n }}\r\n />\r\n \r\n {CONSTANTS.LABELS.vehicule_model_step1_label_energy}\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n setEnergyInput(e.target.value);\r\n }}\r\n value={EnergyInput}\r\n />\r\n
\r\n )}\r\n\r\n \r\n {\r\n setKilometrage(e.target.value);\r\n\r\n if (\r\n e.target.value.trim().length &&\r\n (Number(e.target.value) > 999999 ||\r\n e.target.value.trim().length > 6)\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(\r\n CONSTANTS.LABELS.vehicule_step2_error_limitednumbers\r\n );\r\n } else if (\r\n e.target.value.trim().length &&\r\n !/^[0-9]*$/.test(e.target.value)\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(\r\n CONSTANTS.LABELS.vehicule_step2_error_numbersonly\r\n );\r\n } else if (\r\n e.target.value.trim().length &&\r\n Number(e.target.value) === 0\r\n ) {\r\n setStep2ButtonDisabled(true);\r\n setKilometrageError(CONSTANTS.LABELS.vehicule_step2_error_zero);\r\n } else {\r\n setStep2ButtonDisabled(false);\r\n setKilometrageError(false);\r\n }\r\n }}\r\n />\r\n
\r\n\r\n \r\n \r\n {CONSTANTS.LABELS.vehicule_step2_warranty}\r\n \r\n\r\n
\r\n\r\n \r\n {\r\n setContratSerivce(true);\r\n }}\r\n />\r\n {\r\n setContratSerivce(false);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n validStep();\r\n props.setVeiculeKilo({\r\n contratService: contratSerivce,\r\n kilometrage: kilometrage,\r\n carStep: \"3\",\r\n });\r\n props.updateServicesAfterDataChanged();\r\n pushEventToGTM({\r\n pageName: \"car-details\",\r\n eventAction: \"Redirection::Internal::Next_step\",\r\n eventLabel: \"model\",\r\n });\r\n }}\r\n Disabled={\r\n step2ButtonDisabled ||\r\n kilometrage.length < 1 ||\r\n EnergyInput == \"0\" ||\r\n EnergyInput == \"\" ||\r\n ModelInput == \"0\" ||\r\n ModelInput == \"\"\r\n }\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n\r\n {// filter LCV/PC incompatibility between vehicle and dealer\r\n showFiltersPopup && (\r\n \r\n \r\n this.setState({ immaPrevData: e })}\r\n prevData={this.state.immaPrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()}\r\n />\r\n \r\n
}\r\n\r\n {ActivateTabImmat && CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && \r\n \r\n this.setState({ immaPrevData: e })}\r\n prevData={this.state.immaPrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()} />\r\n
}\r\n\r\n {ActivateTabNumSerie && CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && \r\n \r\n this.setState({ seriePrevData: e })}\r\n prevData={this.state.seriePrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()}\r\n />\r\n \r\n
}\r\n\r\n {ActivateTabNumSerie && CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&\r\n \r\n this.setState({ seriePrevData: e })}\r\n prevData={this.state.seriePrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()}\r\n />\r\n
\r\n }\r\n\r\n {ActivateTabModele && CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&\r\n \r\n \r\n this.setState({ modelPrevData: e })}\r\n prevData={this.state.modelPrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()}\r\n />\r\n \r\n
}\r\n\r\n {ActivateTabModele && CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && \r\n \r\n this.setState({ modelPrevData: e })}\r\n prevData={this.state.modelPrevData}\r\n updateServicesAfterDataChanged={(e) => this.updateServicesAfterDataChanged()}\r\n />\r\n
}\r\n\r\n \r\n {\r\n headTitleTag(SEO_TITLE.replace('[nom-marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()),\r\n SEO_DESC.replace('[nom-marque]', CONSTANTS.SITE_INFO.BRAND_NAME.toUpperCase()))\r\n }\r\n 
}\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ConfirmationPage)\r\n","\r\nimport React, { useState, useEffect, useRef } from 'react'\r\nimport CONSTANTS from '../../../constants';\r\nimport { CheckBox, Button } from '../../Forms/Forms';\r\n\r\nconst ServicesFilter = (props) => {\r\n let checkedStyle = props.selectedPremiumServices.length > 0 ? 'filterChecked' : ''\r\n const [isFilterOpen, setIsFilterOpen] = useState('hidden')\r\n\r\n const myRef = useRef(null)\r\n\r\n const toggleClassOpen = (event) => {\r\n if (event instanceof KeyboardEvent && event.key !== 'Enter' && event.key !== ' ') {\r\n return;\r\n }\r\n let FilterClass = isFilterOpen === \"hidden\" ? \"open\" : \"hidden\";\r\n setIsFilterOpen(FilterClass);\r\n\r\n\r\n }\r\n const handleClickOutside = (e) => {\r\n if (!myRef.current.contains(e.target)) {\r\n setIsFilterOpen('hidden')\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n\r\n document.addEventListener('mousedown', handleClickOutside)\r\n return () => document.removeEventListener('mousedown', handleClickOutside);\r\n\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {this.state.email}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n { (this.validateFormInputs() ? this.setState({ goToNextStep: true }) : this.scrollToTop()) }}\r\n >\r\n {CONSTANTS.LABELS.common_v2_nextstep}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\nexport default ServicesFilter;","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n Redirect,\r\n Switch,\r\n withRouter\r\n} from 'react-router-dom'\r\nimport CONSTANTS from '../../constants'\r\nimport { slugify, formattedAdress } from '../../helpers/functions'\r\nimport './search-area.css'\r\nimport Autocomplete from 'react-google-autocomplete'\r\nimport {\r\n setSelectedLat,\r\n setSelectedLong,\r\n setFilterDealersBy,\r\n setFilterByChoice,\r\n setListPremiumServicesToStore\r\n} from '../../actions/action';\r\nimport ServicesFilter from './Services-filter/services-filter'\r\nimport fetchApiData from '../apiHandlers/fetchApiData'\r\nconst google = window.google\r\n\r\nconst mapStateToProps = state => state;\r\nconst mapDispatchToProps = {\r\n setSelectedLat,\r\n setSelectedLong,\r\n setFilterDealersBy,\r\n setFilterByChoice,\r\n setListPremiumServicesToStore\r\n};\r\n\r\n\r\n\r\nclass SearchArea extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.adressSearchInput = React.createRef()\r\n this.getGeoAdressFromSearchInput = this.getGeoAdressFromSearchInput.bind(this)\r\n this.state = {\r\n filterBy: this.props.store.filterDealersBy,\r\n listPremiumServices: props.store.listPremiumServices || [],\r\n showFilter: false,\r\n goToSelectDealer: false,\r\n selectedAdress: {\r\n adress: '',\r\n lat: null,\r\n lng: null\r\n },\r\n // isClassOpen: \"hidden\"\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.adressSearchInput.current.refs.input.setAttribute('autocomplete', 'on')\r\n if (this.props.match.params.adress) {\r\n this.setState({\r\n selectedAdress: {\r\n adress: this.props.match.params.adress.replace(/-/g, ' '),\r\n lat: null,\r\n lng: null\r\n }\r\n })\r\n }\r\n\r\n if (typeof this.state.listPremiumServices != undefined) {\r\n this.state.listPremiumServices.length < 1\r\n ? this.handleGetPremiumServices()\r\n : this.setState({ showFilter: this.state.listPremiumServices.some(service => service.displayDL) })\r\n }\r\n }\r\n\r\n getGeoAdressFromSearchInput(inputRef) {\r\n console.log(inputRef.current.refs.input.value)\r\n if (inputRef) {\r\n const geocoder = new google.maps.Geocoder()\r\n console.log(inputRef.current.refs.input.value)\r\n geocoder.geocode({\r\n address: inputRef.current.refs.input.value,\r\n componentRestrictions: {\r\n country: window.siteConfig.currentCountry\r\n }\r\n }, (results, status) => {\r\n if (status === 'OK') {\r\n console.log(results)\r\n\r\n if (results[0]) {\r\n console.log(results[0].formatted_address)\r\n this.setState(prevState => ({\r\n selectedAdress: {\r\n ...prevState.selectedAdress.adress,\r\n adress: results[0].formatted_address,\r\n lat: results[0].geometry.location.lat(),\r\n lng: results[0].geometry.location.lng()\r\n },\r\n goToSelectDealer: true\r\n }));\r\n\r\n this.props.setSelectedLat(results[0].geometry.location.lat());\r\n this.props.setSelectedLong(results[0].geometry.location.lng());\r\n } else {\r\n console.log('No results found')\r\n }\r\n } else {\r\n console.log('Geocoder failed due to: ' + status)\r\n }\r\n })\r\n\r\n // event label remonte les données renseignées lors de la recherche\r\n window.dataLayer.push({\r\n pageName: (this.props.store.step == 1 ? 'dealer locator' : 'multicréneaux'),\r\n event: 'uaevent',\r\n eventCategory: 'Dealerlocator',\r\n eventAction: (this.props.store.step == 1 ? 'Redirection::Search::Dealer' : 'Redirection::Search::NewDealer'),\r\n eventLabel: this.state.selectedAdress.adress\r\n })\r\n\r\n if (this.state.selectedAdress.lat != null) { this.setState({ goToSelectDealer: true }) }\r\n }\r\n }\r\n\r\n // to avoid redirection to the same route\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.goToSelectDealer) { this.setState({ goToSelectDealer: false }) }\r\n }\r\n\r\n handleGetPremiumServices = () => {\r\n const fetchApi = new fetchApiData()\r\n fetchApi.getServicePremium()\r\n .then(\r\n data => {\r\n this.setState({ showFilter: data.d.some(service => service.displayDL) })\r\n this.setState({ listPremiumServices: data.d })\r\n this.props.setListPremiumServicesToStore(data.d)\r\n })\r\n .catch(error => {\r\n console.error(error)\r\n })\r\n }\r\n // add or remove premium service from the filter \r\n handleAddOrRemoveToFilter = (premiumServiceId, isChecked) => {\r\n isChecked ? this.setState({ filterBy: [...this.state.filterBy, premiumServiceId] }) : this.setState({ filterBy: this.state.filterBy.filter(item => item !== premiumServiceId) })\r\n }\r\n\r\n // appliquer les filtres les services premium cocher \r\n handleApplyFilter = () => {\r\n this.props.setFilterDealersBy(this.state.filterBy)\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n
\r\n toggleClassOpen(event)} className={`custom-select__trigger ${checkedStyle}`}>\r\n {CONSTANTS.LABELS.dealer_locator_filter_main}\r\n \r\n
\r\n {isFilterOpen === 'open' && \r\n {\r\n props.listPremiumServices.map(premiumService => {\r\n return (\r\n premiumService.displayDL && {\r\n props.onAddOrRemoveToFilter(premiumService.idServicePremium, e.target.checked)\r\n }\r\n }\r\n label={premiumService.titre}\r\n isChecked={props.selectedPremiumServices.includes(premiumService.idServicePremium)}\r\n />\r\n )\r\n })\r\n }\r\n
}\r\n \r\n \r\n
\r\n \r\n {this.state.goToSelectDealer && \r\n }\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" && }\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchArea))\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport BodyClassName from 'react-body-classname'\r\nimport { Link } from 'react-router-dom'\r\n\r\nimport { withRouter } from 'react-router'\r\n\r\nimport CONSTANTS from '../../constants'\r\nimport SearchArea from '../search-area/search-area'\r\nimport './header.css'\r\nimport logoAP from '../../images/AP/ap-logo-large.svg'\r\nimport logoMobileAP from '../../images/AP/ap-logo-mobile.svg'\r\nimport logoAC from '../../images/AC/ac-logo.png'\r\nimport logoACMobile from '../../images/AC/ac-logo-mobile.svg'\r\nimport logoDS from '../../images/DS/ds-logo.png'\r\nimport logoOV from '../../images/OV/ov-logo.png'\r\n\r\nimport {\r\n CurrentStepSetAction,\r\n dealerSetAction,\r\n bookingSetAction,\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n setServices,\r\n setEditMode,\r\n selectedServices,\r\n setCommentServices,\r\n setPersonalInformations,\r\n setSelectedPremiumServicesToStore\r\n} from '../../actions/action'\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = {\r\n CurrentStepSetAction,\r\n dealerSetAction,\r\n bookingSetAction,\r\n setVeiculeInfos,\r\n setVeiculeKilo,\r\n setServices,\r\n setEditMode,\r\n selectedServices,\r\n setCommentServices,\r\n setPersonalInformations,\r\n setSelectedPremiumServicesToStore\r\n}\r\n\r\nclass PageHeader extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n stickyHeader: ''\r\n }\r\n this.headerDOM = null\r\n }\r\n\r\n componentDidMount() {\r\n window.scrollTo(0, 0)\r\n // if you arrive to car-details page then forget sticky header .\r\n this.headerDOM = React.createRef()\r\n\r\n window.addEventListener('scroll', (event) => {\r\n if (this.headerDOM.current != null) {\r\n if (CONSTANTS.SITE_INFO.BRAND_CODE !== 'C' && window.scrollY > this.headerDOM.current.offsetHeight && this.props.store.step < 3) {\r\n this.setState({ stickyHeader: 'sticky-scroll' })\r\n }\r\n else if (CONSTANTS.SITE_INFO.BRAND_CODE === 'C' && window.scrollY > this.headerDOM.current.offsetHeight+400 && this.props.store.step < 3) {\r\n this.setState({ stickyHeader: 'sticky-scroll' })\r\n }\r\n else if (CONSTANTS.SITE_INFO.BRAND_CODE === 'C' && window.scrollY < this.headerDOM.current.offsetHeight+400 && this.props.store.step < 3) {\r\n this.setState({ stickyHeader: 'no-scroll' })\r\n }\r\n if (window.scrollY == 0) { this.setState({ stickyHeader: 'no-scroll' }) }\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n function isHomePageWitoutMap() {\r\n return (window.siteConfig.ActivateHomepageMap == 0)\r\n }\r\n\r\n function refreshStore() {\r\n this.props.dealerSetAction({})\r\n this.props.bookingSetAction({})\r\n this.props.setVeiculeInfos({})\r\n this.props.setVeiculeKilo({})\r\n this.props.setServices([])\r\n this.props.selectedServices([])\r\n this.props.setCommentServices(\"\");\r\n this.props.setSelectedPremiumServicesToStore([])\r\n this.props.setListPremiumServicesToStore([])\r\n this.props.setPersonalInformations({})\r\n this.props.CurrentStepSetAction(1);\r\n this.props.setEditMode(false)\r\n }\r\n\r\n function detectmob() {\r\n if (window.innerWidth <= 800) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n }\r\n const bgPicture = (detectmob() ? window.siteConfig.MobileBackgroundImage : window.siteConfig.DesktopBackgroundImage)\r\n const logo = (window.siteConfig.currentBrand == 'P' ? logoAP : (window.siteConfig.currentBrand == 'C' ? logoAC : (window.siteConfig.currentBrand == 'D' ? logoDS : logoOV)))\r\n const logoMobile = (window.siteConfig.currentBrand == 'P' ? logoMobileAP : (window.siteConfig.currentBrand == 'C' ? logoACMobile : (window.siteConfig.currentBrand == 'D' ? logoDS : logoOV)))\r\n const containerClass = (window.siteConfig.currentBrand == 'V' || window.siteConfig.currentBrand == 'D') ? \"container-full-width\" : \"container-medium-content\";\r\n return (\r\n <>\r\n {this.props.store.step > 2 && \r\n\r\n
\r\n {window.isMobile() === 'mobile' && this.state.showFilter &&\r\n \r\n {window.isMobile() === 'desktop' && this.state.showFilter &&\r\n this.getGeoAdressFromSearchInput(this.adressSearchInput)\r\n }\r\n >\r\n \r\n \r\n {CONSTANTS.LABELS.dealer_locator_searchcta}\r\n \r\n \r\n
\r\n \r\n {/* */}\r\n {/* {CONSTANTS.SITE_INFO.BRAND_CODE == 'C' && } */}\r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageHeader))\r\n","import React from 'react'\r\nimport CONSTANTS from '../../constants'\r\n\r\nimport './footer.css'\r\n\r\nconst PageFooter = ({props}) => {\r\n const { step } = props.store || ''\r\n const path = window.location.pathname\r\n // Initializing Layer\r\n const _LabelByStep = () => {\r\n switch(step){\r\n case 1 :\r\n return \r\n case 2 :\r\n return \r\n case 3 :\r\n return \r\n case 4 :\r\n return \r\n case 5 :\r\n return \r\n case 6 :\r\n return path !== CONSTANTS.SITE_ROUTS.CONFIRMATION ? : \r\n default :\r\n return path == CONSTANTS.SITE_ROUTS.CONFIRMATION ? : ''\r\n }\r\n }\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default PageFooter\r\n","import React from 'react';\r\nimport CONSTANTS from '../../constants';\r\nimport { Button } from \"../Forms/Forms\";\r\n\r\n\r\nconst ConfirmationDialog = (props) => {\r\n\treturn (\r\n\t\t\r\n
\r\n \r\n refreshStore()}>\r\n {detectmob()\r\n ? 
\r\n : 
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE === 'C' && Citroën {CONSTANTS.LABELS.common_v2_logo_aconly}}\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== 'C' && \r\n \r\n }\r\n
\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\t)\r\n}\r\n\r\n\r\nexport default ConfirmationDialog;\r\n","\r\nimport React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport * as moment from 'moment'\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\nimport { setDialogConfirmationStepChange } from '../../actions/action'\r\nimport ConfirmationDialog from './ConfirmationDialog'\r\nimport { isExistPrestationWithForfait } from '../../helpers/functions'\r\nimport { pushEventToGTM } from '../../helpers/trackerManager'\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setDialogConfirmationStepChange }\r\n\r\nclass Breadcrumb extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n redirectToLocation: false,\r\n expiredDate: false\r\n }\r\n this.confirmAndRedirect = this.confirmAndRedirect.bind(this);\r\n this.verifyRDVdateLimit = this.verifyRDVdateLimit.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n verifyRDVdateLimit() {\r\n var dateLimit = this.props.store.dateLimitModif;\r\n if (this.props.store.isEditMode) {\r\n var limit = moment(dateLimit).format('YYYY/MM/DD');\r\n var now = moment().format('YYYY/MM/DD');\r\n if (now < limit) {\r\n this.setState({ expiredDate: false });\r\n } else {\r\n this.setState({ expiredDate: true });\r\n }\r\n }\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.redirectToLocation) { this.setState({ redirectToLocation: false }) }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setState((state, props) => { return { showDialog: (props.stepDialogVisible == props.stepNumber) } });\r\n\r\n }\r\n\r\n breadcrumbItemContent(isdisactived) {\r\n return <>\r\n this.props.stepNumber) ? \" checkmark-done\" : \"\") } step={`${this.props.stepNumber}`} onClick={(e) => {\r\n if(this.props.brand === \"C\" && window.isMobile() === \"mobile\"){\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Crumbtrail',\r\n eventLabel: this.props.eventLabel\r\n })\r\n if (isExistPrestationWithForfait(this.props.store.SelectedServices) && this.props.stepNumber <= 3) { this.props.setDialogConfirmationStepChange(this.props.stepNumber) } else if (this.props.currentStep > this.props.stepNumber && !this.state.expiredDate) {\r\n this.setState({ redirectToLocation: true })\r\n this.props.onClick()\r\n }\r\n }\r\n }} />\r\n \r\n {this.breadcrumbItemContent(this.props.currentStep < this.props.stepNumber || this.state.expiredDate)}\r\n
\r\n \r\n {this.props.brand === \"C\" && \r\n this.props.stepNumber < this.props.totalSteps && \r\n }\r\n \r\n {this.props.BreadcrumbIsEnabled && ActivatePaP && \r\n )}\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" && (\r\n \r\n )}\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&\r\n this.props.store.step === 1 && (\r\n \r\n )}\r\n\r\n {(window.siteConfig.currentBrand == \"D\" ||\r\n window.siteConfig.currentBrand == \"C\") &&\r\n !this.props.store.isEditMode &&
\r\n \r\n {\r\n\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Modify',\r\n eventLabel: 'header_modify_dealer'\r\n })\r\n if (this.props.isExistPrestationWithForfait) { this.props.setDialogConfirmationStepChange('dealerChange') }\r\n else {\r\n this.setState({ redirectToLocation: true })\r\n this.props.CurrentStepSetAction(2);\r\n }\r\n }}\r\n />}\r\n {this.props.store.visibaleDialogId == 'dealerChange' &&\r\n {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n\r\n {this.state.redirectToLocation &&\r\n !!Object.values(this.props.store.dealer).length &&\r\n \r\n }\r\n\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DealerSummary)\r\n","\r\nimport React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport CONSTANTS from '../../constants'\r\nimport ConfirmationDialog from '../Breadcrumb/ConfirmationDialog'\r\nimport { pushEventToGTM } from '../../helpers/trackerManager'\r\nimport { slugify } from '../../helpers/functions'\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { setDialogConfirmationStepChange, CurrentStepSetAction } from '../../actions/action'\r\n\r\nimport Icon from '../buttons/Icon'\r\nimport EditButton from '../buttons/EditButton'\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setDialogConfirmationStepChange, CurrentStepSetAction }\r\n\r\nclass TimeSummary extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n showDialog: false,\r\n redirectToLocation: false\r\n }\r\n this.confirmAndRedirect = this.confirmAndRedirect.bind(this)\r\n }\r\n\r\n confirmAndRedirect(isRedirect) {\r\n if (isRedirect) {\r\n this.setState({ redirectToLocation: true })\r\n // this.props.CurrentStepSetAction(2);\r\n }\r\n // Reset id of visible dialog step change.\r\n this.props.setDialogConfirmationStepChange('')\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.redirectToLocation) { this.setState({ redirectToLocation: false }) }\r\n }\r\n\r\n render() {\r\n const { geoID } = this.props.store.dealer\r\n return (\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE == \"D\" && {CONSTANTS.LABELS.header_modification_dealer}}\r\n
\r\n {this.props.name}
\r\n\r\n\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&
\r\n\r\n {!this.props.store.isEditMode &&\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n {\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Modify',\r\n eventLabel: 'header_modify_timeslot'\r\n })\r\n if (this.props.isExistPrestationWithForfait) { this.props.setDialogConfirmationStepChange('TimeChange') } else {\r\n this.setState({ redirectToLocation: true })\r\n // this.props.CurrentStepSetAction(2);\r\n }\r\n }}\r\n /> */}\r\n {this.props.store.visibaleDialogId == 'TimeChange' && {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n {this.state.redirectToLocation && \r\n }\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TimeSummary)\r\n","import React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport EditButton from '../buttons/EditButton'\r\nimport ConfirmationDialog from '../Breadcrumb/ConfirmationDialog'\r\nimport CONSTANTS from '../../constants'\r\nimport { pushEventToGTM } from '../../helpers/trackerManager'\r\n\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { CurrentStepSetAction, setDialogConfirmationStepChange } from '../../actions/action'\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { CurrentStepSetAction, setDialogConfirmationStepChange }\r\n\r\nclass CarSummary extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n redirectToLocation: false\r\n }\r\n this.confirmAndRedirect = this.confirmAndRedirect.bind(this)\r\n }\r\n\r\n confirmAndRedirect(isRedirect) {\r\n if (isRedirect) {\r\n this.props.CurrentStepSetAction(3)\r\n this.setState({ redirectToLocation: true })\r\n }\r\n // Reset id of visible dialog step change.\r\n this.props.setDialogConfirmationStepChange('')\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.redirectToLocation) { this.setState({ redirectToLocation: false }) }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&
\r\n\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n {CONSTANTS.SITE_INFO.BRAND_CODE === \"C\" &&
\r\n\r\n {/* \r\n {CONSTANTS.SITE_INFO.BRAND_CODE !== \"C\" &&
\r\n {\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Modify',\r\n eventLabel: 'header_modify_vehicule'\r\n })\r\n if (this.props.isExistPrestationWithForfait) { this.props.setDialogConfirmationStepChange('CarChange') } else {\r\n this.setState({ redirectToLocation: true })\r\n this.props.CurrentStepSetAction(3)\r\n }\r\n }}\r\n />}\r\n {this.props.store.visibaleDialogId == 'CarChange' && {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n {this.state.redirectToLocation &&\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CarSummary)\r\n","\r\nimport React, { PureComponent } from 'react'\r\n\r\nimport { connect } from 'react-redux'\r\n\r\nimport DealerSummary from './DealerSummary'\r\nimport TimeSummary from './TimeSummary'\r\nimport CarSummary from './CarSummary'\r\n\r\nimport './SummaryBlock.css'\r\nconst mapStateToProps = state => state\r\n\r\nclass SummaryBlock extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isExistPrestationWithForfait: false\r\n }\r\n this.isExistPrestationWithForfait = this.isExistPrestationWithForfait.bind(this)\r\n }\r\n\r\n isExistPrestationWithForfait() {\r\n let price = 0\r\n this.props.store.SelectedServices.forEach((fforfait, ffkey) => {\r\n fforfait.forfaits != null && !!Object.values(fforfait.forfaits) &&\r\n Object.values(fforfait.forfaits).forEach((forfait, fkey) => {\r\n !!Object.values(forfait.SubFunctionList).length &&\r\n forfait.SubFunctionList[0].ForfaitList.forEach((forfaitItem, fikey) => {\r\n if (forfaitItem.isSelected) {\r\n price += forfaitItem.Items[0].Prix\r\n }\r\n forfaitItem.Operations && forfaitItem.Operations.forEach((operation, OpKey) => {\r\n if (operation.isSelected) {\r\n price += operation.Items[0].Prix\r\n }\r\n })\r\n })\r\n\r\n })\r\n })\r\n return (price > 0)\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n this.setState({ isExistPrestationWithForfait: this.isExistPrestationWithForfait() })\r\n }\r\n\r\n render() {\r\n const { dealer, booking, car, kilo } = this.props.store\r\n //Render Model Label without BrandLetter first\r\n const carName = `${car.ModelLabel} - ${car.EnergyLabel}`\r\n return (\r\n \r\n {CONSTANTS.SITE_INFO.BRAND_CODE === 'C' && }\r\n {CONSTANTS.LABELS.header_modification_vehicule}\r\n
\r\n\r\n {this.props.store.step > 3 && {CONSTANTS.SITE_INFO.BRAND_CODE !== 'C' && }\r\n
{(this.props.Name ? this.props.Name : '-')}
\r\n \r\n\r\n\r\n {this.props.Kilometrage &&
\r\n {CONSTANTS.LABELS.header_modification_km} : {this.props.Kilometrage} {CONSTANTS.LABELS.vehicule_step2_km2}
}\r\n {this.props.Vin && {CONSTANTS.LABELS.header_modification_vin} : {this.props.Vin}
}\r\n {this.props.Imat && {CONSTANTS.LABELS.header_modification_immat} : {this.props.Imat}
}\r\n \r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps)(SummaryBlock)\r\n","\r\nimport React, { Component } from 'react';\r\n\r\nclass LayoutFullWidth extends Component {\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default LayoutFullWidth;\r\n","import React from 'react';\r\nimport ContentLoader from 'react-content-loader'\r\n\r\n\r\n\r\n\r\nconst SummaryBlockLoader = (props) => {\r\n\r\n\treturn (\r\n\t\t\r\n {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n\r\n {this.state.redirectToLocation &&\r\n !!Object.values(this.props.store.dealer).length &&\r\n \r\n }\r\n\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DealerMobile)\r\n","\r\nimport React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport CONSTANTS from '../../../constants'\r\nimport ConfirmationDialog from '../../Breadcrumb/ConfirmationDialog'\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager'\r\nimport { slugify } from '../../../helpers/functions'\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { setDialogConfirmationStepChange, CurrentStepSetAction } from '../../../actions/action'\r\n\r\nimport Icon from '../../buttons/Icon'\r\nimport EditButton from '../../buttons/EditButton'\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { setDialogConfirmationStepChange, CurrentStepSetAction }\r\n\r\nclass TimeSummary extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n showDialog: false,\r\n redirectToLocation: false\r\n }\r\n this.confirmAndRedirect = this.confirmAndRedirect.bind(this)\r\n }\r\n\r\n confirmAndRedirect(isRedirect) {\r\n if (isRedirect) {\r\n this.setState({ redirectToLocation: true })\r\n // this.props.CurrentStepSetAction(2);\r\n }\r\n // Reset id of visible dialog step change.\r\n this.props.setDialogConfirmationStepChange('')\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.redirectToLocation) { this.setState({ redirectToLocation: false }) }\r\n }\r\n\r\n render() {\r\n const { geoID } = this.props.store.dealer\r\n return (\r\n \r\n {\r\n\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Modify',\r\n eventLabel: 'header_modify_dealer'\r\n })\r\n if (this.props.isExistPrestationWithForfait) { this.props.setDialogConfirmationStepChange('dealerChange') }\r\n else {\r\n this.setState({ redirectToLocation: true })\r\n this.props.CurrentStepSetAction(2);\r\n }\r\n }}\r\n />}\r\n
\r\n {this.props.name ? this.props.name : undefined}
\r\n {!this.props.store.isEditMode &&\r\n \r\n
\r\n \r\n\r\n \r\n {this.props.store.visibaleDialogId == 'dealerChange' &&\r\n \r\n {\" \"}\r\n {CONSTANTS.LABELS.header_modification_address}\r\n
\r\n \r\n {this.props.adress}\r\n
\r\n \r\n\r\n {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n {this.state.redirectToLocation && \r\n }\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TimeSummary)\r\n","import React, { Component, PureComponent } from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport EditButton from '../../buttons/EditButton'\r\nimport ConfirmationDialog from '../../Breadcrumb/ConfirmationDialog'\r\nimport CONSTANTS from '../../../constants'\r\nimport { pushEventToGTM } from '../../../helpers/trackerManager'\r\n\r\nimport {\r\n Redirect,\r\n Switch\r\n} from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { CurrentStepSetAction, setDialogConfirmationStepChange } from '../../../actions/action'\r\n\r\nconst mapStateToProps = state => state\r\nconst mapDispatchToProps = { CurrentStepSetAction, setDialogConfirmationStepChange }\r\n\r\nclass CarSummary extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n redirectToLocation: false\r\n }\r\n this.confirmAndRedirect = this.confirmAndRedirect.bind(this)\r\n }\r\n\r\n confirmAndRedirect(isRedirect) {\r\n if (isRedirect) {\r\n this.props.CurrentStepSetAction(3)\r\n this.setState({ redirectToLocation: true })\r\n }\r\n // Reset id of visible dialog step change.\r\n this.props.setDialogConfirmationStepChange('')\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if (nextState.redirectToLocation) { this.setState({ redirectToLocation: false }) }\r\n }\r\n\r\n render() {\r\n return (\r\n\r\n\r\n\r\n
\r\n\r\n \r\n {this.props.store.visibaleDialogId == 'TimeChange' && \r\n
\r\n \r\n {\" \"}\r\n {CONSTANTS.LABELS.header_modification_date}\r\n
\r\n {this.props.date ? this.props.date : undefined}
\r\n \r\n
\r\n \r\n {\" \"}\r\n {CONSTANTS.LABELS.header_modification_time}\r\n
\r\n {this.props.time ? this.props.time : undefined}
\r\n \r\n {\r\n pushEventToGTM({\r\n pageName: 'all',\r\n eventAction: 'Redirection::Internal::Modify',\r\n eventLabel: 'header_modify_vehicule'\r\n })\r\n if (this.props.isExistPrestationWithForfait) { this.props.setDialogConfirmationStepChange('CarChange') } else {\r\n this.setState({ redirectToLocation: true })\r\n this.props.CurrentStepSetAction(3)\r\n }\r\n }}\r\n />}\r\n {this.props.store.visibaleDialogId == 'CarChange' && {\r\n this.confirmAndRedirect(e)\r\n }}\r\n />}\r\n\r\n \r\n {this.state.redirectToLocation &&\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CarSummary)\r\n","\r\nimport React, { PureComponent } from 'react'\r\n\r\nimport { connect } from 'react-redux'\r\n\r\nimport DealerSummary from './DelearMobile'\r\nimport TimeSummary from './TimeMobile'\r\nimport CarSummary from './CarMobile'\r\n\r\nimport '../SummaryBlockMobile.css'\r\nconst mapStateToProps = state => state\r\n\r\nclass SummaryBlockMobile2 extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isExistPrestationWithForfait: false\r\n }\r\n this.isExistPrestationWithForfait = this.isExistPrestationWithForfait.bind(this)\r\n }\r\n\r\n isExistPrestationWithForfait() {\r\n let price = 0\r\n this.props.store.SelectedServices.forEach((fforfait, ffkey) => {\r\n fforfait.forfaits != null && !!Object.values(fforfait.forfaits) &&\r\n Object.values(fforfait.forfaits).forEach((forfait, fkey) => {\r\n !!Object.values(forfait.SubFunctionList).length &&\r\n forfait.SubFunctionList[0].ForfaitList.forEach((forfaitItem, fikey) => {\r\n if (forfaitItem.isSelected) {\r\n price += forfaitItem.Items[0].Prix\r\n }\r\n forfaitItem.Operations && forfaitItem.Operations.forEach((operation, OpKey) => {\r\n if (operation.isSelected) {\r\n price += operation.Items[0].Prix\r\n }\r\n })\r\n })\r\n\r\n })\r\n })\r\n return (price > 0)\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n this.setState({ isExistPrestationWithForfait: this.isExistPrestationWithForfait() })\r\n }\r\n\r\n render() {\r\n const { dealer, booking, car, kilo } = this.props.store\r\n //Render Model Label without BrandLetter first\r\n const carName = `${car.ModelLabel} - ${car.EnergyLabel}`\r\n return (\r\n \r\n {\" \"}\r\n {CONSTANTS.LABELS.header_modification_vehicule}\r\n
\r\n {this.props.Name? (\r\n \r\n {this.props.Name ? this.props.Name : undefined}\r\n
\r\n Kilométrage :{\" \"}\r\n {`${this.props.Kilometrage ? this.props.Kilometrage : \"-\"} ${\r\n CONSTANTS.LABELS.vehicule_step2_km2\r\n }`}\r\n \r\n
\r\n ) : (\r\n \"-\"\r\n )}\r\n {/*this.props.store.step > 3 && (\r\n \r\n )*/}\r\n\r\n{this.props.store.step > 3 && \r\n Kilométrage :{\" \"}\r\n {`${this.props.Kilometrage ? this.props.Kilometrage : \"-\"} ${\r\n CONSTANTS.LABELS.vehicule_step2_km2\r\n }`}\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\nexport default connect(mapStateToProps)(SummaryBlockMobile2)\r\n","\r\nimport React, { Component } from 'react';\r\nimport BodyClassName from 'react-body-classname';\r\nimport SummaryBlock from '../components/SummaryBlock/SummaryBlock';\r\nimport LayoutFullWidth from './LayoutFullWidth';\r\nimport LayoutStandardWidth from './LayoutStandardWidth';\r\nimport SummaryBlockLoader from '../components/SummaryBlock/SummaryBlockLoader';\r\nimport CONSTANTS from '../constants';\r\n//import SummaryBlockMobile from '../components/SummaryBlock/SummaryBlockMobile';\r\nimport SummaryBlockMobile2 from '../components/SummaryBlock/mobile/SummaryBlockMobile2';\r\n\r\nclass LayoutWithRecap extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\t'pageLoaded': false,\r\n\t\t};\r\n\t}\r\n\tcomponentDidMount() {\r\n\t\twindow.setTimeout(function () { this.setState({ pageLoaded: true }) }.bind(this), 2000);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t