1/* eslint-disable */ 2 3const waitGoogle = () => { 4 return new Promise(resolve => { 5 const check = () => { 6 if (window.google && window.google.maps && window.markerClusterer) { 7 resolve(); 8 } else { 9 setTimeout(check, 100); 10 } 11 }; 12 check(); 13 }); 14} 15 16document.addEventListener('alpine:init', () => { 17 18 Alpine.data('pdpPickup', ( _shippingAddress ) => ({ 19 20 selectPickup: null, 21 openPanelId : 0, 22 shippingAddress: _shippingAddress, 23 currentAddressDisplayText: "", 24 loading: false, 25 firstLoad: false, 26 locationData: [], 27 map: {}, 28 editMobile: true, 29 isRelayDelivery: (_shippingAddress.isRelayDelivery || null), 30 // phoneNumberParttern: "(?:\+33|0033|\(\+33\)|0)(?:-| |)([6-7]{1})(?:-| |)([0-9]{2})(?:-| |)([0-9]{2})(?:-| |)([0-9]{2})(?:-| |)([0-9]{2})", 31 32 showPickUpPoint(_location) { 33 this.openPanelId = _location.PUDO_ID; 34 this.autoScrollList(); 35 const position = { lat: +_location.LATITUDE.replace(',','.') , lng: +_location.LONGITUDE.replace(',','.') }; 36 this.map.panTo(position); 37 this.map.setZoom(13); 38 }, 39 40 getSearchUrl() { 41 const baseUrl = '/pickup-address/dpd-poi'; 42 const params = new URLSearchParams({ 43 orderId: this.shippingAddress.orderId, 44 street: this.shippingAddress.street, 45 zipCode: this.shippingAddress.postcode, 46 city: this.shippingAddress.city, 47 countryCode: 'FR' 48 }); 49 return `${baseUrl}?${params.toString()}`; 50 }, 51 52 async getSearchUrlByAddressString() { 53 const baseUrl = '/pickup-address/dpd-poi'; 54 const userLocation = await this.getCurrentAddressLocation(); 55 56 const getComponent = (type) => 57 userLocation[0].address_components.find(comp => comp.types.includes(type))?.long_name; 58 59 const neighborhood = getComponent("neighborhood"); // "Bel Souleil" 60 const city = getComponent("locality"); // "Montrabé" 61 const postalCode = getComponent("postal_code"); // "31850" 62 63 const params = new URLSearchParams({ 64 street: neighborhood, 65 zipCode: postalCode, 66 city: city, 67 countryCode: 'FR' 68 }); 69 return `${baseUrl}?${params.toString()}`; 70 }, 71 72 async getLocationData() { 73 return new Promise((resolve) => { 74 jQuery.ajax({ 75 url: this.getSearchUrl(), 76 method: "GET", 77 contentType: "text/html; charset=utf-8", 78 success: function(res){ 79 resolve(res); 80 } 81 }) 82 }); 83 }, 84 85 async getLocationDataByAddress() {
86 const urlReq = await this.getSearchUrlByAddressString(); 87 return new Promise((resolve) => { 88 jQuery.ajax({ 89 url: urlReq, 90 method: "GET", 91 contentType: "text/html; charset=utf-8", 92 success: function(res){ 93 resolve(res); 94 } 95 }) 96 }); 97 }, 98 99 async searchPickLocation() { 100 this.loading = true; 101 const result = await this.getLocationDataByAddress(); 102 $('#pdp-result-panel').html(result.html); 103 this.locationData = result.data; 104 this.loading = false; 105 this.firstLoad = true; 106 this.initMap(); 107 }, 108 109 async searchPickLocationFirstTime() { 110 if ( this.selectPickup || this.firstLoad ) return; 111 this.loading = true; 112 const result = await this.getLocationData(); 113 $('#pdp-result-panel').html(result.html); 114 this.locationData = result.data; 115 this.loading = false; 116 this.firstLoad = true; 117 this.initMap(); 118 119 }, 120 121 async nextStep() { 122 123 if( !this.selectPickup) { 124 alert( 125 $('#dpdPickupNextStep').attr('select-warn') 126 ); 127 return; 128 } 129 document.querySelector(".fullpage-loading").classList.add('active'); 130 jQuery.ajax({ 131 url: `/pickup-address/shipping-address/${this.shippingAddress.orderId}/update?type=5`, 132 method: "POST", 133 dataType: "json", 134 contentType: "application/json; charset=utf-8", 135 data: JSON.stringify({ 136 "identifiant": this.selectPickup.PUDO_ID, 137 "address": this.selectPickup.ADDRESS1, 138 "codePostal": this.selectPickup.ZIPCODE, 139 "city": this.selectPickup.CITY, 140 "name": this.selectPickup.NAME, 141 "phoneNumber" : this.shippingAddress.phonenum 142 }), 143 success: function(){ 144 document.querySelector('#submitShipment').click() 145 } 146 147 }) 148 }, 149 150 async initMap() { 151 152 const locations = this.locationData.PUDO_ITEMS.PUDO_ITEM; 153 if( locations.length < 1 ) return; 154 const firstLocation = locations[0] 155 const center = { lat: +firstLocation.LATITUDE.replace(',','.') , lng: +firstLocation.LONGITUDE.replace(',','.') }; 156 const dpdPointsMap = document.getElementById("dpdPointsMap"); 157 const pickupLocationPoint = []; 158 159 locations.forEach(location => { 160 pickupLocationPoint.push({ 161 lat: +location.LATITUDE.replace(',','.') , 162 lng: +location.LONGITUDE.replace(',','.') , NAME: location.NAME , 163 id: location.PUDO_ID 164 }); 165 }); 166 167 this.map = new google.maps.Map( dpdPointsMap , { 168 zoom: 10, 169 center: center, 170 styles: mapStyle 171 }); 172 173 // user address location 174 const userLocation = await this.getCurrentAddressLocation(); 175 const userLatLng = userLocation[0].geometry.location; 176 177 new google.maps.Marker({ 178 position: userLatLng, 179 map: this.map, 180 181 icon: { 182 url: '/assets/shop/img/shipping/user-marker.png', 183 scaledSize: new google.maps.Size(32, 32), 184 anchor: new google.maps.Point(16, 40) 185 } 186 187 }); 188 189 const markers = pickupLocationPoint.map((location) => { 190 191 const marker = new google.maps.Marker({ 192 position: location, 193 map: this.map, 194 195 icon: { 196 url: '/assets/shop/img/shipping/dpdRelais-marker.png', 197 scaledSize: new google.maps.Size(35, 38),
198 anchor: new google.maps.Point(16, 40) 199 } 200 201 }); 202 203 const infoWindow = new google.maps.InfoWindow({ 204 content: ` 205 <div style="text-align: center;"> 206 <div style="font-weight: bold;">${location['NAME']}</div> 207 </div> 208 `, 209 }); 210 211 let isInfoOpen = false; 212 213 marker.addListener('click' , () => { 214 215 if( !isInfoOpen) { 216 infoWindow.open({ 217 anchor: marker, 218 map: this.map, 219 shouldFocus: false 220 }); 221 } 222 223 if( isInfoOpen) { 224 infoWindow.close(); 225 } 226 227 isInfoOpen = !isInfoOpen; 228 229 this.handleMarkerClick(location); 230 }) 231 232 return marker; 233 234 }); 235 236 const clusterRenderer = { 237 render: ({ count, position }) => { 238 const marker = new google.maps.Marker({ 239 position, 240 icon: { 241 url: "/assets/shop/img/shipping/dpdRelais_m1.png", // Replace with your image path 242 scaledSize: new google.maps.Size(48, 48), 243 labelOrigin: new google.maps.Point(24, 24) 244 }, 245 label: { 246 text: String(count), 247 color: "white", 248 fontSize: "11px", 249 fontWeight: "bold" 250 }, 251 zIndex: 1000 252 }); 253 254 return marker; 255 256 } 257 }; 258 259 new markerClusterer.MarkerClusterer({ map: this.map, markers , renderer: clusterRenderer}); 260 261 this.$nextTick(() => { 262 this.openPanelId = locations[0] ? locations[0].PUDO_ID : null; 263 }); 264 265 }, 266 267 autoScrollList() { 268 this.$nextTick(() => { 269 const itemHeight = 67; 270 const selectedIndex = $('.points-list li.selected').attr('index'); 271 const scrollTopPosition = itemHeight * (+selectedIndex - 1); 272 $('#pointsListInner').scrollTop(scrollTopPosition) 273 }); 274 }, 275 276 handleMarkerClick(location) { 277 this.openPanelId = location.id; 278 this.autoScrollList(); 279 }, 280 281 selectPickUpPoint(location){ 282 this.isRelayDelivery = true; 283 this.selectPickup = location; 284 285 }, 286 287 getCurrentAddressDisplayText() { 288 return `${this.shippingAddress.street} ${this.shippingAddress.postcode} ${this.shippingAddress.city} ${this.shippingAddress.countryCode}`; 289 }, 290 291 async getCurrentAddressLocation() { 292 return new Promise(( resolve , reject ) => { 293 const address = this.currentAddressDisplayText; 294 const geocoder = new google.maps.Geocoder(); 295 geocoder.geocode({ address: address }, (results, status) => { 296 if (status === "OK" && results[0]) { 297 const location = results; 298 resolve(location); 299 } else { 300 reject(status); 301 } 302 }); 303 }); 304 }, 305 306 async init() { 307 await waitGoogle(); 308 this.currentAddressDisplayText = this.getCurrentAddressDisplayText(); 309 this.searchPickLocationFirstTime(); 310 311 } 312 313 })); 314 315 Alpine.data('drive' , (_driveAddress , _orderId) => ({ 316 317 driveAddress : _driveAddress, 318 orderId: _orderId, 319 showMap: false, 320 locationExtracted: {}, 321 map : {}, 322 323 async init() { 324 await waitGoogle(); 325 this.locationExtracted = await this.getExtractAddressString(); 326 await this.initMap(); 327 }, 328 329 async getCurrentAddressLocation() { 330 return new Promise(( resolve , reject ) => { 331 const address = this.driveAddress; 332 const geocoder = new google.maps.Geocoder(); 333 geocoder.geocode({ address: address }, (results, status) => { 334 if (status === "OK" && results[0]) { 335 const location = results; 336 resolve(location); 337 } else { 338 reject(status); 339 } 340 }); 341 }); 342 }, 343 344 async getExtractAddressString() { 345 346 const driveLocation = await this.getCurrentAddressLocation(); 347 const getComponent = (type) => 348 driveLocation[0].address_components.find(comp => comp.types.includes(type))?.long_name; 349 const street = getComponent("street_number") + " " + getComponent("route"); 350 const city = getComponent("locality"); 351 const postalCode = getComponent("postal_code"); 352 353 return { 354 street: street, 355 zipCode: postalCode, 356 city: city, 357 countryCode: 'FR', 358 latLng: driveLocation[0].geometry.location 359 }; 360 361 }, 362 363 async initMap() { 364 // for some reason can't get latlng form geo directly 365 const center = {lat: 46.266975583079734 , lng: -0.004114510212251109}; 366 const driveMapDOM = document.getElementById("drive-map"); 367 this.map = new google.maps.Map( driveMapDOM , { 368 zoom: 14, 369 center: center, 370 styles: mapStyle 371 }); 372 373 new google.maps.Marker({ 374 position: center, 375 map: this.map, 376 label: { 377 text: "Drive", 378 color: "#000", 379 fontWeight: "bold", 380 fontSize: "14px" 381 }, 382 icon: { 383 url: '/assets/shop/img/shipping/drive-marker.png', 384 scaledSize: new google.maps.Size(32, 32), 385 labelOrigin: new google.maps.Point(16, 40), 386 anchor: new google.maps.Point(16, 40) 387 } 388 389 }); 390 }, 391 392 nextStep() { 393 document.querySelector(".fullpage-loading").classList.add('active'); 394 jQuery.ajax({ 395 url: `/pickup-address/shipping-address/${this.orderId}/update?type=10`, 396 method: "POST", 397 dataType: "json", 398 contentType: "application/json; charset=utf-8", 399 data: JSON.stringify({ 400 "identifiant": null, 401 "address": this.locationExtracted.street || '5 rue du Moulin Cuit', 402 "codePostal": this.locationExtracted.zipCode || '79120', 403 "city": this.locationExtracted.city || 'LEZAY', 404 "name": 'Retrait au Dépôt', 405 }), 406 success: function(){ 407 document.querySelector('#submitShipment').click() 408 } 409 410 }) 411 } 412 413 414 })); 415 416});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.