From bc6355fcbd2e454639479caaf0e2a79ec6e2f717 Mon Sep 17 00:00:00 2001
From: TheCoreDev <laurent@thecoredev.fr>
Date: Sat, 26 Nov 2022 15:39:04 +0100
Subject: [PATCH] =?UTF-8?q?[26/11/2022]=20On=20essaie=20d'aligner=20les=20?=
 =?UTF-8?q?ic=C3=B4nes=20dans=20la=20liste=20des=20modes=20de=20livraison?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order-delivery-extra-BACKUP.html          | 351 ++++++++++++++++++
 .../mondialrelay/order-delivery-extra.html    | 110 ++----
 2 files changed, 374 insertions(+), 87 deletions(-)
 create mode 100644 local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra-BACKUP.html

diff --git a/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra-BACKUP.html b/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra-BACKUP.html
new file mode 100644
index 00000000..3c8edb29
--- /dev/null
+++ b/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra-BACKUP.html
@@ -0,0 +1,351 @@
+<script type="text/html" id="mondialrelay_ui">
+    <td colspan="3">
+        <input type="hidden" name="mondial-relay-selected-delivery-mode" value="none">
+
+        {loop type="delivery" name="delivery-mondialrelay" code="MondialRelay"}
+            {assign var="complementTexte" value=$POSTSCRIPTUM}
+        {/loop}
+
+        {$withHome = false}
+        {loop type="mondialrelay.delivery-price" name="home-prices" mode="home" country_id=$country state_id=$state}
+            {$withHome = true}
+
+            <div class="row">
+                <div class="col-sm-6">
+                    <label for="mondialrelay_home">
+                        {form name="thelia.order.delivery"}
+                            {form_field field='delivery-module'}
+                            <label for="delivery-method_{$module_id}_home">
+                                <input type="radio" data-mondial-relay-delivery-mode="home" name="{$name}" id="delivery-method_{$module_id}_home" value="{$module_id}">
+                                <strong>{intl d="mondialrelay.fo.default" l="Mondial Relay home delivery"}</strong>
+                                <span class="texte-complementaire-module">{$POSTSCRIPTUM}</span>
+                                <br>
+                                <span class="help-block">
+                                    {intl l="Expected delivery date: %delivery_date" delivery_date={format_date date=$DELIVERY_DATE output="date"} d="mondialrelay.fo.default" }
+                                </span>
+                            </label>
+                            {/form_field}
+                        {/form}
+                    </label>
+                </div>
+                <div class="col-sm-2 hidden-xs text-center">
+                    {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
+                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
+                    {/loop}
+                </div>
+                <div class="col-sm-4">
+                    <div class="price text-right">
+                        {format_money number=$PRICE symbol={currency attr='symbol'}}
+                    </div>
+                </div>
+            </div>
+        {/loop}
+    
+        {$withRelay = false}
+        {loop type="mondialrelay.delivery-price" name="relay-prices" mode="relay" country_id=$country state_id=$state}
+            <div {if $withHome}class="pickup-home-separator"{/if}></div>
+            
+            {$withRelay = true}
+            <div class="row">
+                <div class="col-sm-4">
+                    <label for="mondialrelay_pickup">
+                        {form name="thelia.order.delivery"}
+                            {form_field field='delivery-module'}
+                            <label for="delivery-method_{$module_id}_pickup">
+                                <input type="radio" data-mondial-relay-delivery-mode="pickup" name="{$name}" id="delivery-method_{$module_id}_pickup" value="{$module_id}">
+                                <strong>{intl d="mondialrelay.fo.default" l="Mondial Relay pickup location"}</strong>
+                                <span class="texte-complementaire-module">(France/Europe)</span>
+                                <br>
+                                <span class="help-block">
+                                    {intl l="Expected delivery date: %delivery_date" delivery_date={format_date date=$DELIVERY_DATE output="date"} d="mondialrelay.fo.default" }
+                                </span>
+                            </label>
+                            {/form_field}
+                        {/form}
+                    </label>
+                </div>
+    
+                <div class="col-sm-4 hidden-xs text-center">
+                    {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
+                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
+                    {/loop}
+                </div>
+    
+                <div class="col-sm-4">
+                    <div class="price text-right">
+                        {format_money number=$PRICE symbol={currency attr='symbol'}}
+                    </div>
+                </div>
+            </div>
+
+            <div id="mondial-relay-pickup">
+                <div class="row">
+                    <div class="location-form clearfix">
+                        <div class="col-md-12">
+                            <h4>{intl d="mondialrelay.fo.default" l="Find a pickup location around you"}</h4>
+                        </div>
+
+                        {loop type="address" name="adr" id=$address_id}
+                            <div class="col-sm-2">
+                                <input type="text" required class="form-control" id="mondial_relay_zipcode" name="mondial_relay_zipcode" placeholder="{intl l="Zip code" d="mondialrelay.fo.default"}" value="{$ZIPCODE}">
+                            </div>
+                        4558
+                            <div class="col-sm-4">
+                                <input type="text" class="form-control" id="mondial_relay_city" name="mondial_relay_city" placeholder="{intl l="City" d="mondialrelay.fo.default"}" value="{$CITY}">
+                            </div>
+                        
+                            <div class="col-sm-3">
+                                <select class="form-control" id="mondial_relay_country_id" name="mondial_relay_country_id">
+                                    {loop type="country" name="cntry"}
+                                        <option value="{$ID}"{if $COUNTRY == $ID} selected{/if}>{$TITLE}</option>
+                                    {/loop}
+                                </select>
+                            </div>
+                        
+                            <div class="col-sm-2">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" id="mondial_relay_radius" name="mondial_relay_radius" placeholder="{intl l="Search radius" d="mondialrelay.fo.default"}" value="10">
+                                    <span class="input-group-addon">{intl d="mondialrelay.fo.default" l="km"}</span>
+                                </div>
+                            </div>
+                        
+                            <div class="col-sm-1">
+                                <button id="search-mr-relay" class="form-submit-button btn btn-block btn-default" type="button">{intl d="mondialrelay.fo.default" l="Find"}</button>
+                            </div>
+                        {/loop}
+                    </div>
+                </div>
+            
+                <div class="row">
+                    <div class="col-md-5">
+                        <div id="relay_info">
+                            <p>{intl d="mondialrelay.fo.default" l="Loading..."}</p>
+                        </div>
+                    </div>
+                    
+                    <div class="col-md-7">
+                        <div id="mondialrelay_map" style="width: 100%; height: 450px;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {/loop}
+    </td>
+</script>
+
+<script>
+    $("#delivery-module-{$module_id}").html($('#mondialrelay_ui').html());
+
+    jQuery.fn.scrollTo = function(elem, speed) {
+        $(this).animate({
+            scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
+        }, speed === undefined ? 1000 : speed);
+        return this;
+    };
+    
+{if $withRelay}
+    var MRData = {
+        markers: [],
+        map: null,
+        geocoder: null,
+        bounds: null,
+        pinImages: [
+            {for $idx = 1 to 30}
+            "{image file="mondialrelay/assets/img/pins/pointsrelais_pin_{$idx}.png" source="MondialRelay"}"{if $idx < 30},{/if}
+            {/for}
+        ]
+    };
+
+    function loadScript() {
+        var script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = 'https://maps.googleapis.com/maps/api/js'
+            + '?callback=mondialRelaySetup'
+            + '&key={module_config module="MondialRelay" key="google_maps_api_key" locale="en_US"}';
+        document.body.appendChild(script);
+    }
+    
+    function loadRelayMap() {
+        var $relayInfo = $('#relay_info');
+        
+        MRData.bounds = new google.maps.LatLngBounds();
+
+        for(var idx = 0; idx < MRData.markers.length; idx++) {
+            MRData.markers[idx].setMap(null);
+        }
+        
+        MRData.markers.length = 0;
+    
+        $relayInfo.html('');
+    
+        $.ajax({
+            url: "{url path="MondialRelay/relay-map"}",
+            data : {
+                country_id: $('#mondial_relay_country_id').val(),
+                city: $('#mondial_relay_city').val(),
+                zipcode: $('#mondial_relay_zipcode').val(),
+                radius: $('#mondial_relay_radius').val()
+            },
+            success: function(data) {
+                var html, item, opening, marker;
+    
+                if (data.error !== '') {
+                    var errMsg = "{intl d="mondialrelay.fo.default" l="Sorry, we failed to get pickup locations. Error is : __ERR__." js=1}";
+                    alert(errMsg.replace('__ERR__', data.error));
+                } else if (data.points.length === 0) {
+                    html = '<div class="alert alert-danger">{intl d="mondialrelay.fo.default" l="No pickup locations were found for this address." js=1}</div>';
+                } else {
+                    html = '<table class="pickup-points">';
+    
+                    // Build point data and map points from json data
+                    for (var idx = 0; idx < data.points.length; idx++) {
+                        item = data.points[idx];
+        
+                        marker = new google.maps.Marker({
+                            map: MRData.map,
+                            position: new google.maps.LatLng(item.latitude, item.longitude),
+                            title: (idx + 1) + ' : ' + item.name,
+                            icon: MRData.pinImages[idx],
+                            relay_id: item.id
+                        });
+        
+                        google.maps.event.addListener(marker, 'click', function () {
+                            $relayInfo.scrollTo("#pickup-point-" + this.relay_id);
+                        });
+        
+                        MRData.bounds.extend(marker.getPosition());
+                        MRData.markers.push(marker);
+        
+                        html +=
+                            '<tr class="pickup-point" data-pickup-id="' + item.id + '" id="pickup-point-' + item.id + '">'
+                            + '<td>'
+                            + '    <label for="" class="name">'
+                            + '         <span class="numero">' + (idx + 1) + '</span> ' + item.name + ' (' + item.distance_km + ' km)'
+                            + '    </label>'
+                            + '    <div class="address">' + item.address + '</div>'
+                            + '    <div class="zipcode">' + item.zipcode + ' ' + item.city + '</div>'
+                        ;
+        
+                        if (item.openings.length > 0) {
+                            html += '<table class="opening-hours">';
+            
+                            for (var jdx = 0; jdx < item.openings.length; jdx++) {
+                                opening = item.openings[jdx];
+                
+                                html += '<tr>';
+                
+                                html += '<td class="day">' + opening.day + '</td> ';
+                
+                                if (opening.opening_time_1 !== undefined) {
+                                    html += '<td>' + opening.opening_time_1 + ' - ' + opening.closing_time_1 + '</td>';
+                                }
+                
+                                if (opening.opening_time_2 !== undefined) {
+                                    html += '<td>' + opening.opening_time_2 + ' - ' + opening.closing_time_2 + '</td>';
+                                }
+                
+                                html += '</tr>';
+                            }
+            
+                            html += '</table>';
+                        }
+        
+                        html += '</td>';
+        
+                        html += '<td><input type="radio" name="mondialrelay_relay" value="' + item.id + '"></td>';
+        
+                        html += '</tr>';
+                    }
+    
+                    html += '</table>';
+                }
+                
+                $relayInfo.html(html);
+    
+                // View all markers
+                MRData.map.fitBounds(MRData.bounds);
+            },
+            error: function() {
+                alert("{intl d="mondialrelay.fo.default" l="Oops, something goes wrong, please try again." js=1}")
+            }
+        });
+    }
+
+
+    if (typeof(google) === 'undefined') {
+        loadScript();
+    } else {
+        mondialRelaySetup();
+    }
+
+    function mondialRelaySetup() {
+        // Google Map
+        var MRData_mapOptions = {
+            zoom: 13,
+                mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+    
+        MRData.map = new google.maps.Map(document.getElementById('mondialrelay_map'), MRData_mapOptions);
+        MRData.geocoder = new google.maps.Geocoder();
+        
+        // Center map on the current customer address
+        {loop type="address" name="adr" id=$address_id}
+            var MRDataAddress = [];
+            MRDataAddress['address'] = "{$ADDRESS1|replace:'"':'\\"'}, {$ZIPCODE} {$CITY|replace:'"':'\\"'}";
+        
+            MRData.geocoder.geocode(MRDataAddress, function (results, status) {
+                if (status === google.maps.GeocoderStatus.OK) {
+                    MRData.map.setCenter(results[0].geometry.location);
+                    marker = new google.maps.Marker({
+                        position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
+                        map: MRData.map,
+                        icon: "{image file='mondialrelay/assets/img/maison.png' source='MondialRelay'}"
+                    });
+                } else {
+                    // Sinon on met le centre de la map sur Clermont-Ferrand ;)
+                    alert("{intl d="mondialrelay.fo.default" l="Current address can't be geolocated" js=1}");
+                    
+                    var myLatLng = new google.maps.LatLng(45.7789, 3.0782);
+                    MRData.map.setCenter(myLatLng);
+                    MRData.map.setZoom(3);
+                }
+            });
+        {/loop}
+        
+        loadRelayMap();
+    
+        $(document).on('click', '.pickup-point', function(ev) {
+            var pointId = $(this).data('pickup-id');
+            $('input[value='+pointId+']').prop("checked", true)
+        });
+    
+        $('#search-mr-relay').off().click(function(ev) {
+            loadRelayMap();
+        });
+    
+        $("#form-cart-delivery").off('submit').submit(function(ev) {
+            if ($('[data-mondial-relay-delivery-mode=pickup]').is(':checked')
+                &&
+                $('input[name=mondialrelay_relay]:checked').length === 0) {
+                alert("{intl d="mondialrelay.fo.default" l="Please select a pickup location." js=1}");
+                ev.preventDefault();
+            }
+        });
+    }
+{/if}
+    
+    $('[data-mondial-relay-delivery-mode]').change(function() {
+        $('input[name=mondial-relay-selected-delivery-mode]').val($(this).data('mondial-relay-delivery-mode'));
+    });
+    
+    // Hide / Show pickeup selection UI
+    $('input[type=radio]').click(function() {
+        if ($('[data-mondial-relay-delivery-mode=pickup]').is(':checked')) {
+            $('#mondial-relay-pickup').slideDown('fast');
+            // Show a descent map
+            MRData.map.fitBounds(MRData.bounds);
+        } else {
+            $('#mondial-relay-pickup').slideUp('fast');
+        }
+    });
+</script>
diff --git a/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra.html b/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra.html
index b13ffae9..d98ea12a 100644
--- a/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra.html
+++ b/local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra.html
@@ -1,16 +1,17 @@
 <script type="text/html" id="mondialrelay_ui">
+
+    {loop type="delivery" name="delivery-mondialrelay" code="MondialRelay"}
+        {assign var="complementTexte" value=$POSTSCRIPTUM}
+    {/loop}
+
     <td colspan="3">
+
         <input type="hidden" name="mondial-relay-selected-delivery-mode" value="none">
+        <table>
 
-        {loop type="delivery" name="delivery-mondialrelay" code="MondialRelay"}
-            {assign var="complementTexte" value=$POSTSCRIPTUM}
-        {/loop}
-
-        {$withHome = false}
-        {loop type="mondialrelay.delivery-price" name="home-prices" mode="home" country_id=$country state_id=$state}
-            {$withHome = true}
-
-            <table class="table table-condensed table-delivery">
+            {$withHome = false}
+            {loop type="mondialrelay.delivery-price" name="home-prices" mode="home" country_id=$country state_id=$state}
+                {$withHome = true}
                 <tr>
                     <td class="module-mondialrelay">
                         <label for="mondialrelay_home">
@@ -40,46 +41,11 @@
                         </div>
                     </td>
                 </tr>
-            </table>
-<!--
-            <div class="row">
-                <div class="col-sm-6">
-                    <label for="mondialrelay_home">
-                        {form name="thelia.order.delivery"}
-                            {form_field field='delivery-module'}
-                            <label for="delivery-method_{$module_id}_home">
-                                <input type="radio" data-mondial-relay-delivery-mode="home" name="{$name}" id="delivery-method_{$module_id}_home" value="{$module_id}">
-                                <strong>{intl d="mondialrelay.fo.default" l="Mondial Relay home delivery"}</strong>
-                                <span class="texte-complementaire-module">{$POSTSCRIPTUM}</span>
-                                <br>
-                                <span class="help-block">
-                                    {intl l="Expected delivery date: %delivery_date" delivery_date={format_date date=$DELIVERY_DATE output="date"} d="mondialrelay.fo.default" }
-                                </span>
-                            </label>
-                            {/form_field}
-                        {/form}
-                    </label>
-                </div>
-                <div class="col-sm-2 hidden-xs text-center">
-                    {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
-                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
-                    {/loop}
-                </div>
-                <div class="col-sm-4">
-                    <div class="price text-right">
-                        {format_money number=$PRICE symbol={currency attr='symbol'}}
-                    </div>
-                </div>
-            </div>
- //-->
-        {/loop}
-    
-        {$withRelay = false}
-        {loop type="mondialrelay.delivery-price" name="relay-prices" mode="relay" country_id=$country state_id=$state}
- <!--           <div {if $withHome}class="pickup-home-separator"{/if}></div>    //-->
-            
-            {$withRelay = true}
-            <table class="table table-condensed table-delivery">
+            {/loop}
+
+            {$withRelay = false}
+            {loop type="mondialrelay.delivery-price" name="relay-prices" mode="relay" country_id=$country state_id=$state}
+                {$withRelay = true}
                 <tr>
                     <td class="module-mondialrelay">
                         <label for="mondialrelay_pickup">
@@ -110,39 +76,7 @@
                     </td>
                 </tr>
             </table>
-<!--
-            <div class="row">
-                <div class="col-sm-4">
-                    <label for="mondialrelay_pickup">
-                        {form name="thelia.order.delivery"}
-                            {form_field field='delivery-module'}
-                            <label for="delivery-method_{$module_id}_pickup">
-                                <input type="radio" data-mondial-relay-delivery-mode="pickup" name="{$name}" id="delivery-method_{$module_id}_pickup" value="{$module_id}">
-                                <strong>{intl d="mondialrelay.fo.default" l="Mondial Relay pickup location"}</strong>
-                                <span class="texte-complementaire-module">(France/Europe)</span>
-                                <br>
-                                <span class="help-block">
-                                    {intl l="Expected delivery date: %delivery_date" delivery_date={format_date date=$DELIVERY_DATE output="date"} d="mondialrelay.fo.default" }
-                                </span>
-                            </label>
-                            {/form_field}
-                        {/form}
-                    </label>
-                </div>
-    
-                <div class="col-sm-4 hidden-xs text-center">
-                    {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
-                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
-                    {/loop}
-                </div>
-    
-                <div class="col-sm-4">
-                    <div class="price text-right">
-                        {format_money number=$PRICE symbol={currency attr='symbol'}}
-                    </div>
-                </div>
-            </div>
-//-->
+
             <div id="mondial-relay-pickup">
                 <div class="row">
                     <div class="location-form clearfix">
@@ -158,7 +92,7 @@
                             <div class="col-sm-4">
                                 <input type="text" class="form-control" id="mondial_relay_city" name="mondial_relay_city" placeholder="{intl l="City" d="mondialrelay.fo.default"}" value="{$CITY}">
                             </div>
-                        
+
                             <div class="col-sm-3">
                                 <select class="form-control" id="mondial_relay_country_id" name="mondial_relay_country_id">
                                     {loop type="country" name="cntry"}
@@ -166,28 +100,28 @@
                                     {/loop}
                                 </select>
                             </div>
-                        
+
                             <div class="col-sm-2">
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="mondial_relay_radius" name="mondial_relay_radius" placeholder="{intl l="Search radius" d="mondialrelay.fo.default"}" value="10">
                                     <span class="input-group-addon">{intl d="mondialrelay.fo.default" l="km"}</span>
                                 </div>
                             </div>
-                        
+
                             <div class="col-sm-1">
                                 <button id="search-mr-relay" class="form-submit-button btn btn-block btn-default" type="button">{intl d="mondialrelay.fo.default" l="Find"}</button>
                             </div>
                         {/loop}
                     </div>
                 </div>
-            
+
                 <div class="row">
                     <div class="col-md-5">
                         <div id="relay_info">
                             <p>{intl d="mondialrelay.fo.default" l="Loading..."}</p>
                         </div>
                     </div>
-                    
+
                     <div class="col-md-7">
                         <div id="mondialrelay_map" style="width: 100%; height: 450px;">
                         </div>
@@ -195,7 +129,9 @@
                 </div>
             </div>
         {/loop}
+
     </td>
+
 </script>
 
 <script>