templates/frontend/checkout.html.twig line 1

Open in your IDE?
  1.     {% extends 'admin/base.html.twig' %}
  2.     {% block title %}La livraison et coupon rabais
  3.     {% endblock %}
  5.     {% block _cart_checkout_newAddress_widget %}
  6.         <div class="row">
  7.             <div class="col-md-8">{{form_row(form.name)}}</div>
  8.             <div class="col-md-4">{{form_row(form.phone)}}</div>
  9.         </div>
  10.         <div class="row">
  11.             <div class="col-md-3">{{form_row(form.civicNumber)}}</div>
  12.             <div class="col-md-6">{{form_row(form.streetName)}}</div>
  13.             <div class="col-md-3">{{form_row(form.unit)}}</div>
  14.         </div>
  15.         <div class="row">
  16.             <div class="col-md-4">{{form_row(form.city)}}</div>
  17.             <div class="col-md-4">{{form_row(form.province)}}</div>
  18.             <div class="col-md-4">{{form_row(form.zipCode)}}</div>
  19.         </div>
  20.         {#
  21.         <div class="row">
  22.             <div class="col-md-12">{{form_row(form.note)}}</div>
  23.         </div>
  24.         #}
  25.     {% endblock %}
  26.     {% block CSS %}
  27.     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  28.     <link rel="stylesheet" href="/resources/demos/style.css">
  29.         <link rel="stylesheet" type="text/css" href="{{ asset('build/frontend/checkout.css') }}">
  31.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
  32.         <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
  33.     {% endblock %}
  34.     {% block JS %}
  35.         <script src="{{ asset('build/frontend/checkout.js') }}"></script>
  36.         <script src="/assets/frontend/js/jquery-3.1.1.min.js"></script>
  38.         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
  39.         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.min.js" integrity="sha512-RAt2+PIRwJiyjWpzvvhKAG2LEdPpQhTgWfbEkFDCo8wC4rFYh5GQzJBVIFDswwaEDEYX16GEE/4fpeDNr7OIZw==" crossorigin="anonymous"></script>
  41.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  43.         <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
  45.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
  46.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js" integrity="sha512-fx3aztaUjb4NyoD+Tso5g7R1l29bU3jnnTfNRKBiY9fdQOHzVhKJ10wEAgQ1zM/WXCzB9bnVryHD1M40775Tsw==" crossorigin="anonymous"></script>
  48.         {% if global.getCart.hasJIT %}
  49.         <script>
  50.         var cartHasJIT = true;
  51.         </script>
  52.         {% else %}
  53.         <script>
  54.         var cartHasJIT = false;
  55.         </script>
  56.         {% endif %}
  57.         <script type="text/javascript">
  59.     //$("#action_shipping").prop("checked", true);    
  60.         $('#checkPickUp').css("color", "gray");
  61.         var actionShipping = document.querySelector('#action_shipping');
  62.         {# console.log(actionShipping.checked); #}
  63.         if (actionShipping.checked == false){
  64.                 $("#choiceShippingDate").hide();
  65.             $("#blocPickUp").show();
  66.             $("#blocShipping").hide();
  67.             $('#checkPickUp').css("color", "black");
  68.             $('#checkShipping').css("color", "gray");
  69.         }else if(actionShipping.checked == true){
  70.             $("#blocPickUp").hide();
  71.             $("#blocShipping").show();
  72.             $("#choiceShippingDate").show();
  73.             $('#checkShipping').css("color", "black");
  74.             //$('#checkGift').css("color", "gray");
  75.             $('#checkPickUp').css("color", "gray");
  76.             $("#blocGift").show();
  77.         }
  78.         
  79.         //$('#checkGift').css("color", "gray");
  80.         $(document.body).on("click",'.choiceCustomShipping', function() {
  81.         var test = $(".choiceCustomShipping").not(this).prop('checked', false);
  82.         //console.log(test.val());
  83.     if (this.checked) {
  84.         this.setAttribute("checked", "checked");
  85.         var selectBox =  $(this).val();
  86.         //console.log(selectBox);
  87.         if (selectBox == "domicile"){
  88.             $("#blocPickUp").hide();
  89.             $("#blocShipping").show();
  90.             $("#choiceShippingDate").show();
  91.             $('#checkShipping').css("color", "black");
  92.             //$('#checkGift').css("color", "gray");
  93.             $('#checkPickUp').css("color", "gray");
  94.             $("#blocGift").show();    
  95.         }else if(selectBox == "cueillette") {
  96.             $("#DeliveryChoiceCheckbox").removeAttr('checked');
  97.             $("#pickupSchedule").attr("disabled", false);
  98.             $("#choiceShippingDate").hide();
  99.             $("#pickupAdressBlock").show();
  100.             $("#blocPickUp").show();
  101.             $("#blocShipping").hide();
  102.             $('#checkPickUp').css("color", "black");
  103.             $('#checkShipping').css("color", "gray");
  104.              $('#checkGift').removeAttr('checked');
  105.             $("#blocGift").hide();    
  106.         }
  107.         /*else{
  108.             $("#blocShipping").hide();
  109.             $("#choiceShippingDate").show();
  110.             // $('#checkGift').css("color", "black");
  111.             $('#checkShipping').css("color", "gray");
  112.             $('#checkPickUp').css("color", "gray");
  113.             // $("#blocGift").show();
  114.             $("#blocPickUp").hide();
  115.         }*/
  116.         
  117.     } 
  118.         test.removeAttr('checked');
  119.     
  120.     });
  122.             $(function () {
  124.                 $(document.body).on('change','#adresse_province', function(e) {
  125.                     if ($(this).val() == "QC") {
  126.                         $('#newAddress_cityQC').show();
  127.                         $('#newAddress_cityAny').hide();
  128.                         $('#newAddress_cityON').hide();
  130.                     }else if ($(this).val() == "ON") {
  131.                         $('#newAddress_cityQC').hide();
  132.                         $('#newAddress_cityAny').hide();
  133.                         $('#newAddress_cityON').show();
  135.                     } else {
  136.                         $('#newAddress_cityQC').hide();
  137.                         $('#newAddress_cityAny').show();
  138.                         $('#newAddress_cityON').hide();
  140.                     }
  141.                 });
  143.                 $(document.body).on('click','#proceedToPaymentSubmitBtn', function(e) {
  144.                     var formIsValid = true;
  145.                     var errorMsg = 'Veuillez remplir ce champ.';
  146.                     if ($('#checkoutAddressSelection').val() == "none") {
  147.                         var selectCheckbox = document.getElementById("pickupScheduleCheckbox");
  148.                         var selectCheckboxValue = selectCheckbox.checked;
  149.                         //console.log(selectCheckboxValue);
  150.                         if (selectCheckboxValue == false){
  151.                             //SaveMyAdresse();
  152.                         var selector = 'newAddress_name';
  153.                         if (!$('#'+selector).val()) {
  154.                             $('#'+selector).get(0).setCustomValidity(errorMsg);
  155.                             formIsValid = false;
  156.                         } else {
  157.                             $('#'+selector).get(0).setCustomValidity("");
  158.                         }
  160.                         {# var selector = 'street_number';
  161.                         if (!$('#'+selector).val()) {
  162.                             $('#'+selector).get(0).setCustomValidity(errorMsg);
  163.                             formIsValid = false;
  164.                         } else {
  165.                             $('#'+selector).get(0).setCustomValidity("");
  166.                         } #}
  170.                         var selector = 'postal_code';
  171.                         if (!$('#'+selector).val()) {
  172.                             $('#'+selector).get(0).setCustomValidity(errorMsg);
  173.                             formIsValid = false;
  174.                         } else {
  175.                             $('#'+selector).get(0).setCustomValidity("");
  176.                         }
  178.                         var selector = 'newAddress_phone';
  179.                         if (!$('#'+selector).val()) {
  180.                             $('#'+selector).get(0).setCustomValidity(errorMsg);
  181.                             formIsValid = false;
  182.                         } else {
  183.                             $('#'+selector).get(0).setCustomValidity("");
  184.                         }
  185.                         }
  186.                     }
  187.                     //console.log(selector);
  188.                     if (!formIsValid) {
  189.                         document.getElementById('se-pre-con').style.display='none';
  190.                     } else {
  191.                         
  192.                         $('#proceedToPaymentForm').submit();
  193.                         document.getElementById('se-pre-con').style.display='initial';
  194.                     }
  195.                 });
  197.                 $(document.body).on('change','#checkoutAddressSelection', function(e) {
  198.                     if ($(this).val() == "none") {
  199.                         $('#add_new_address').show();
  200.                         $('#proceedToPaymentSubmitBtn').html("Enregistrer et Passer au Paiement");
  201.                     } else {
  202.                         $('#proceedToPaymentSubmitBtn').html("Passer au paiement");
  203.                         $('#add_new_address').hide();
  204.                     }
  205.                     updateDeliveryDateEstimate();
  206.                 });
  208.                 $(document.body).on('change','#newAddress_citySelectQC', function(e) {
  209.                     updateDeliveryDateEstimate();
  210.                 });
  212.                 $(document.body).on('change','#newAddress_citySelectON', function(e) {
  213.                     updateDeliveryDateEstimate();
  214.                 });
  216.                 $(document.body).on('change','#newAddress_cityInputAny', function(e) {
  217.                     updateDeliveryDateEstimate();
  218.                 });
  220.                 var updateDeliveryDateEstimate = function() {
  221.                     //$('#deliveryEstimateCard').hide();
  222.                     //$('#deliveryEstimateSpinner').show();
  223.                     var shippingAddressId = $('#checkoutAddressSelection').val();
  224.                     
  225.                     var shippingAddressCity = false;
  226.                     var newAddressProvince = $('#newAddress_province').find(":selected").val();
  227.                     if (shippingAddressId == "none") {
  228.                         if (newAddressProvince == "QC") {
  229.                             shippingAddressCity = $('#newAddress_citySelectQC').val();
  230.                         } else if (newAddressProvince == "ON") {
  231.                             shippingAddressCity = $('#newAddress_citySelectON').val();
  232.                         } else {
  233.                             shippingAddressCity = $('#newAddress_cityInputAny').val();
  234.                         }
  235.                     }
  236.                     if (shippingAddressId == "none" && !shippingAddressCity) {
  237.                         return;
  238.                     }
  239.                     $.post( "/deliveryEstimateAjax", {
  240.                         shippingAddressId: shippingAddressId,
  241.                         shippingAddressCity: shippingAddressCity,
  242.                         newAddressProvince: newAddressProvince
  243.                     }).done(function( jsonData ) {
  244.                             var data = JSON.parse(jsonData);
  245.                     //console.log( data );
  246.                         
  247.                             var options = { weekday: 'long',year: 'numeric', month: 'long', day: 'numeric' };
  248.                             var daylivraison = new Date(data.route);
  249.                             var livraison = daylivraison.toLocaleDateString("fr-FR", options);
  250.                             var thisDay = new Date();
  251.                             var phraseDateChoice = null
  252.                             var spanEvolutiveDateDelivery = null;
  253.                             var phraseDateChoice = null;
  254.                             if (data.dow != false){
  255.                                 spanEvolutiveDateDelivery = document.getElementById('evolutiveDateDelivery');
  256.                                 phraseDateChoice = livraison;
  257.                             }else {
  258.                                 Date.prototype.addDays = function(days) {
  259.                                     var date = new Date(this.valueOf());
  260.                                     date.setDate(date.getDate() + days);
  261.                                     return date;
  262.                                 }
  263.                                 if (thisDay.getDay() == 1 || thisDay.getDay() == 2){
  264.                                     if (thisDay.getDay() == 2 && thisDay.getHours() < 12){
  265.                                     var Purolivraison = new Date(daylivraison.getTime() + 7 * 24 * 60 * 60 * 1000);
  266.                                     }
  267.                                     var Purolivraison = daylivraison;
  268.                                 }else{
  269.                                 var Purolivraison = daylivraison;
  270.                                 }
  271.                                 var PuroFormatLivraison = Purolivraison.toLocaleDateString("fr-FR", options);
  272.                                 var addTwoDaysToDate = Purolivraison.addDays(2);
  273.                                 var livraisonAdd48h = addTwoDaysToDate.toLocaleDateString("fr-FR", options);
  274.                                 spanEvolutiveDateDelivery = document.getElementById('evolutiveDateDelivery');
  275.                                 phraseDateChoice = ' entre le ' + PuroFormatLivraison + ' et le ' +  livraisonAdd48h;
  276.                             }
  277.                             //console.log(phraseDateChoice);
  279.                             if (phraseDateChoice){
  280.                             spanEvolutiveDateDelivery.innerHTML = phraseDateChoice;
  281.                             }
  283.                             var daysOfWeekDisabled = [0,1,2,3,4,5,6];
  284.                             if (data.dow) {
  285.                                 var index = daysOfWeekDisabled.indexOf(data.dow);
  286.                                 if (index !== -1) {
  287.                                     daysOfWeekDisabled.splice(index, 1);
  288.                                 }
  289.                             } else {
  290.                                 daysOfWeekDisabled = [0,1,5,6];
  291.                             }
  292.                             
  293.                             if (data.idRoute == "19") {
  294.                                 daysOfWeekDisabled = [0,1,5,6];
  295.                             } 
  296.                             if (data.idRoute == "18" || data.nameRoute == "Agglo Longueuil") {
  297.                                 daysOfWeekDisabled = [0,1,5,6];
  298.                             } 
  300.                             $( "#datepickerCustomDelivery" ).datepicker('destroy');
  301.                             var now = new Date();
  302.                             var startDate = new Date();
  303.                             if (cartHasJIT){
  304.                                     if (now.getDay() == 6 || now.getDay() == 0){
  305.                                         var numberOfDaysToAdd = 2;
  306.                                     }else if (now.getDay() >= 1 || now.getDay() <= 3){
  307.                                         var numberOfDaysToAdd = 5;
  308.                                     }else{
  309.                                         var numberOfDaysToAdd = 2;
  310.                                     }
  311.                             }else{
  312.                                 if (data.dow != false){
  313.                                     var numberOfDaysToAdd = 2;
  314.                                 }else{
  315.                                     var numberOfDaysToAdd = 5;
  316.                                 }
  317.                             }
  318.                             startDate.setDate(startDate.getDate() + numberOfDaysToAdd);
  320.                             $( "#datepickerCustomDelivery" ).datepicker({
  321.                                 daysOfWeekDisabled: daysOfWeekDisabled,
  322.                                 endDate: '+2m',
  323.                                 orientation: "bottom left", 
  324.                                 startDate: startDate,
  325.                                 format: 'DD d MM yyyy',
  326.                                 language: 'fr'
  327.                             });
  329.                             $('#deliveryEstimateSpinner').hide();
  330.                             $('#deliveryEstimateCard').show();
  331.                     });
  332.                 }
  334.             $(function() {
  336.                             $('#pickupScheduleCheckbox').click(function() {
  337.                                 $('#DeliveryChoiceCheckbox').prop( "checked", false );
  338.                             });
  340.                             $('#DeliveryChoiceCheckbox').change(function () {
  341.                         if ($(this).prop('checked')) {
  342.                                         $('#pickupAdressBlock').hide();
  343.                                         $('#pickupSchedule').attr("disabled", true);
  344.                                         $('#action_gift').attr("disabled", false);
  346.                                         $('#pickupScheduleCheckbox').prop( "checked", false );
  347.                                         $('#customDelivery').show();
  348.                                     } else {
  349.                                         $('#customDelivery').hide();
  350.                                     }
  351.                             });
  353.                 $("#datepickerCustomDelivery").on("change",function() {
  354.                     var selected = $(this).val();
  355.                                 //console.log(selected);
  356.                                 $("#datepickerCustomDelivery").datepicker('hide');
  357.                     spanEvolutiveDateDelivery = document.getElementById('evolutiveDateDelivery');
  359.                     if (selected){
  360.                         spanEvolutiveDateDelivery.innerHTML = selected;
  361.                     }
  362.                 });
  364.             });
  366.                 updateDeliveryDateEstimate();
  368.                 var now = new Date();
  369.                 now.setDate(now.getDate() + 1);
  370.                 var startDate = now;
  372.                 if (cartHasJIT) {
  373.                     console.log('+++with jit');
  374.                     var x = 2;
  375.                     var now = new Date();
  376.                     now.setDate(now.getDate() + (x+(7-now.getDay())) % 7);
  377.                     startDate = now;
  378.                 }
  380.                 /*console.log("----");
  381.                 console.log(moment(startDate).format("DD d MM yyyy"));
  382.                 console.log("----");*/
  384.             $('#pickupSchedule').datepicker({
  385.                     format: 'dd/mm/yyyy',
  386.                     startDate: moment(startDate).format("DD d MM yyyy"),
  387.                         autoclose: true,
  388.                         language: 'fr',
  389.                         // minDate: moment().add(12, "hours").format("DD/MM/YYYY"),
  390.                         endDate: moment().add(7, "days").format("DD d MM yyyy"),
  391.                 }).on('changeDate', function(e) {
  392.                     var date = e.date;
  393.                     var selected_date = moment(date).format("DD/MM/YYYY");
  394.                     var tomorrow_date = moment().add(1, "day").format("DD d MM yyyy");
  395.                     var is_tomorrow = false;
  396.                     if (selected_date == tomorrow_date) {
  397.                         is_tomorrow = true;
  398.                     }
  399.                     var dayOfWeek = date.getDay();
  400.                     generateDateTimePicker(dayOfWeek, is_tomorrow);
  401.                 });
  405.                     $(document.body).on('change','#cart_checkout_newAddress_province', function(e) {
  406.                         if ($(this).val()=="QC") {
  407.                             $('.citySearchClass').next(".select2-container").show();
  408.                             $('.citySearchClass').replaceWith('<select id="cart_checkout_newAddress_city" class="form-control citySearchClass" name="cart_checkout[newAddress][city]" style="display:none;"></select>');
  409.                         } else {
  410.                             $('.citySearchClass').next(".select2-container").hide();
  411.                             $('.citySearchClass').replaceWith('<input type="text" name="cart_checkout[newAddress][city]" required class="form-control citySearchClass">');
  412.                         }
  413.                         // $('#manualCityName').show();
  414.                     });
  416.                     $(document.body).on('click','#timepicker_hour', function(e) {
  417.                         $( ".timepicker-selected" ).each(function( index, element ) {
  418.                             $(element).removeClass("timepicker-selected");
  419.                         });
  421.                         $(this).find("div").addClass("timepicker-selected");
  422.                         var hour = $(this).attr("data-id");
  423.                         var pickupSchedule = $('#pickupSchedule').val() + ' ' + hour;
  424.                         $('#pickupScheduleHidden').val(pickupSchedule);
  425.                     });
  427.                     var generateDateTimePicker = function(dayOfWeek, is_tomorrow) {
  428.                         $('#pickupScheduleHidden').val('');
  429.                         var HTML = '';
  430.                         var schedule = JSON.parse(pickupSchedule);
  431.                         if (!schedule[String(dayOfWeek)]) {
  432.                             HTML += '<div class="col-12" > \
  433.                                 <div class="timepicker-hour-box timepicker-warning"> \
  434.                                     <strong>Aucune disponibilitée durant cette journée. Veuillez choisir une autre date.</strong> \
  435.                                 </div> \
  436.                             </div>';
  437.                         }
  439.                         var hours = schedule[String(dayOfWeek)];
  440.                         for(hour in hours) {
  441.                             var is_disabled = false;
  442.                             if (is_tomorrow) {
  443.                                 if (moment().format("HH\hmm") >="12h00" && hours[hour][0] <= "12h00") {
  444.                                         is_disabled = true;
  445.                                 }
  446.                             }
  447.                             if (cartHasJIT) {
  448.                                 //between tuesday 12 PM to friday 12PM for JIT
  449.                                 if (dayOfWeek == 2) {
  450.                                     if (hours[hour][0] < "12h00") {
  451.                                         is_disabled = true;
  452.                                     }
  453.                                 }
  454.                                 /*if (dayOfWeek == 5) {
  455.                                     if (hours[hour][0] > "12h00") {
  456.                                         is_disabled = true;
  457.                                     }
  458.                                 }*/
  459.                             }
  460.                             HTML += '<div class="col-3 mb-3" ';
  462.                             if (!is_disabled) {
  463.                                 HTML += ' id="timepicker_hour" ';
  464.                             }
  466.                             HTML += ' data-id="'+hours[hour][0]+'"> \
  467.                                 <div class="timepicker-hour-box';
  469.                             if (is_disabled) {
  470.                                 HTML += ' timepicker-hour-box-disabled ';
  471.                             }
  473.                             HTML += '"> \
  474.                                     <strong>'+hours[hour][0]+'</strong> \
  475.                                 </div> \
  476.                             </div>';
  477.                         }
  479.                         $('#dateTimePickerRow').html(HTML);
  481.                         $('#datetime_picker').show();
  482.                         $('#dateTimePickerRow').show();
  483.                     }
  485.                     var pickupLocationScheduleDisplay = function() {
  486.                         var HTML = '';
  487.                         var schedule = JSON.parse(pickupSchedule);
  488.                         for ( dayOfWeek in schedule) {
  489.                             var dayOfWeekString = '';
  490.                             if (dayOfWeek == 1) { dayOfWeekString = "Lundi"; }
  491.                             if (dayOfWeek == 2) { dayOfWeekString = "Mardi"; }
  492.                             if (dayOfWeek == 3) { dayOfWeekString = "Mercredi"; }
  493.                             if (dayOfWeek == 4) { dayOfWeekString = "Jeudi"; }
  494.                             if (dayOfWeek == 5) { dayOfWeekString = "Vendredi"; }
  495.                             if (dayOfWeek == 6) { dayOfWeekString = "Samedi"; }
  496.                             if (dayOfWeek == 7) { dayOfWeekString = "Dimanche"; }
  498.                             HTML += "&bull; " + dayOfWeekString + " : ";
  499.                             var hours = schedule[String(dayOfWeek)];
  500.                             var hours_start = hours.shift();
  501.                             var hours_end = hours[hours.length - 1];
  502.                             HTML += hours_start[0] + ' à ' + hours_end[1];
  504.                             HTML += "<br/>" ;
  505.                         }
  506.                         $('#pickupLocationScheduleDisplay').html(HTML);
  508.                     }
  510.                     pickupLocationScheduleDisplay();
  512.             $('#pickupLocations').change(function () {
  513.                         $('#datetimeSelectionRow').show();
  515.                         var newPickupLocation = $('#pickupLocations').val();
  516.                         $('#pickupLocation').val(newPickupLocation);
  517.                         var pickupSchedulesObject = JSON.parse(pickupSchedules);
  518.                         var newPickupSchedule = JSON.stringify(pickupSchedulesObject[newPickupLocation]);
  519.                         pickupSchedule = newPickupSchedule;
  520.                         var _daysOfWeekDisabled = [ 0, 1, 2, 3, 4, 5, 6 ];
  521.                         for ( var index in pickupSchedulesObject[newPickupLocation] ) {
  522.                             if (cartHasJIT && index == 1) {
  523.                                 continue;
  524.                             }
  525.                             delete _daysOfWeekDisabled[index];
  526.                         }
  527.                         var _daysOfWeekDisabled = _daysOfWeekDisabled.filter(function (el) {
  528.                         return el != null;
  529.                         });
  530.                         $('#pickupSchedule').datepicker('destroy');
  532.                         var now = new Date('monday');
  533.                         var _startDate ;
  534.                         if (now.getDay() >= 3 && cartHasJIT) {
  535.                             //if wednesday go to next week
  536.                             var startDate = 7-now.getDay() ;
  538.                             _startDate = moment().add(startDate, "days").format("DD/MM/YYYY");
  539.                             _endDate = moment(_startDate, 'DD/MM/YYYY').add(10, "days").format("DD/MM/YYYY");
  541.                         }else{
  542.                             _startDate = moment().add(1, "days").format("DD/MM/YYYY");
  543.                             _endDate = moment(_startDate, 'DD/MM/YYYY').add(10, "days").format("DD/MM/YYYY");
  544.                         }
  546.                         if (cartHasJIT) {
  547.                             console.log("cart has JIT");
  548.                             const dayINeed = 2; // for tuesday
  549.                             const today = moment().isoWeekday();
  551.                             // if we haven't yet passed the day of the week that I need:
  552.                             /*if (today <= dayINeed) {
  553.                                 _startDate= moment().isoWeekday(dayINeed).format("DD/MM/YYYY");
  554.                             } else {*/
  555.                                 _startDate = moment().add(1, 'weeks').isoWeekday(dayINeed).format("DD/MM/YYYY");
  556.                             //}
  557.                             //_startDate = moment().add(_startDate.getDay(), "days").format("DD/MM/YYYY");
  558.                             _endDate = moment(_startDate, 'DD/MM/YYYY').add(7, "days").format("DD/MM/YYYY");
  559.                             _currentDate = moment().format("DD/MM/YYYY");
  560.                         }
  562.                         console.log(_startDate);
  564.                         $('#pickupSchedule').datepicker({
  565.                             format: 'DD d MM yyyy',
  566.                             startDate: _startDate,
  567.                                 autoclose: true,
  568.                                 language: 'fr',
  569.                                 orientation: "left bottom",
  570.                                 daysOfWeekDisabled: _daysOfWeekDisabled,
  571.                                 endDate: _endDate,
  572.                         }).on('changeDate', function(e) {
  573.                             var date = e.date;
  574.                             var selected_date = moment(date).format("DD d MM yyyy");
  575.                             var today_date = moment().format("DD d MM yyyy");
  576.                             var tomorrow_date = moment().add(1, "day").format("DD d MM yyyy");
  577.                             var is_tomorrow = false;
  578.                             if (selected_date == tomorrow_date) {
  579.                                 is_tomorrow = true;
  580.                             }
  582.                             var dayOfWeek = date.getDay();
  583.                             generateDateTimePicker(dayOfWeek, is_tomorrow);
  584.                         });
  586.                         $('#pickupScheduleHidden').val('');
  587.                         $('#pickupSchedule').val('');
  588.                         $('#datetime_picker').hide();
  589.                         $('#dateTimePickerRow').hide();
  590.                         pickupLocationScheduleDisplay();
  592.                     });
  594.             /*$('#pickupScheduleCheckbox').change(function () {
  595.                 if ($(this).prop('checked')) {
  596.                                             $('#customDelivery').hide();
  597.                                             $('#pickupAdressBlock').show();
  598.                         $('#pickupSchedule').attr("disabled", false);
  599.                         $('#action_bulkshipping').attr("disabled", true);
  600.                     } else {
  601.                                             $('#pickupAdressBlock').hide();
  602.                         $('#pickupSchedule').attr("disabled", true);
  603.                         $('#action_bulkshipping').attr("disabled", false);
  604.                     }
  605.                 });
  607.     */
  608.             });
  609.             $(document).ready(function () {
  610.                 $('#newAddress_citySelectQC').select2({
  611.                 ajax: {
  612.                         delay: 250,
  613.                         url: '{{ path('cityAdressAJAXSearch',{ 'province': 'QC'}) }}',
  614.                         dataType: 'json'
  615.                     },
  616.                                     "language": {
  617.                                     "noResults": function(){
  618.                                         return "Veuillez entrer le nom d'une ville...";
  619.                                     }
  620.                                 },
  621.                 });
  622.             });
  623.             $(document).ready(function () {
  624.                 $('#newAddress_citySelectON').select2({
  625.                 ajax: {
  626.                         delay: 250,
  627.                         url: '{{ path('cityAdressAJAXSearch',{ 'province': 'ON'}) }}',
  628.                         dataType: 'json'
  629.                     },
  630.                                     "language": {
  631.                                     "noResults": function(){
  632.                                         return "Veuillez entrer le nom d'une ville d'ontario...";
  633.                                     }
  634.                                 },
  635.                 });
  636.             });
  637.         </script>
  639.     <script>
  641.         </script>
  642.         <!-- Include Google Maps JS API -->
  643.         <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBpav0kc3zAMAcy7DhIto2hDhPivUCr3vI&langues=fr"></script>
  644.         <script>
  646. // This sample uses the Places Autocomplete widget to:
  647. // 1. Help the user select a place
  648. // 2. Retrieve the address components associated with that place
  649. // 3. Populate the form fields with those address components.
  650. // This sample requires the Places library, Maps JavaScript API.
  651. // Include the libraries=places parameter when you first load the API.
  652. // For example: <script
  653. // src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
  654. let autocomplete;
  655. let address1Field;
  656. let address2Field;
  657. let postalField;
  659. function initAutocomplete() {
  660.   address1Field = document.querySelector("#newAddress_autocomplete");
  661.   address2Field = document.querySelector("#newAddress_unit");
  662.   postalField = document.querySelector("#postal_code");
  664.     const center = { lat: 45.5333387, lng: -73.4200318 };
  665.     // Create a bounding box with sides ~10km away from the center point
  666.     const defaultBounds = {
  667.     north: center.lat + 0.5,
  668.     south: center.lat - 0.5,
  669.     east: center.lng + 0.5,
  670.     west: center.lng - 0.5,
  671.     };
  674.   // Create the autocomplete object, restricting the search predictions to
  675.   // addresses in the Canada.
  676.   autocomplete = new google.maps.places.Autocomplete(address1Field, {
  677.     componentRestrictions: { country: ["ca"] },
  678.     bounds: defaultBounds,
  679.    // fields: ["address_components", "geometry"],
  680.     types: ["address"],
  681.   });
  682.   address1Field.focus();
  683.   // When the user selects an address from the drop-down, populate the
  684.   // address fields in the form.
  685.   autocomplete.addListener("place_changed", fillInAddress);
  686. }
  688. function fillInAddress() {
  689.   // Get the place details from the autocomplete object.
  690.   const place = autocomplete.getPlace();
  691.   let address1 = "";
  692.   let postcode = "";
  694.   // Get each component of the address from the place details,
  695.   // and then fill-in the corresponding field on the form.
  696.   // place.address_components are google.maps.GeocoderAddressComponent objects
  697.   // which are documented at http://goo.gle/3l5i5Mr
  698.   for (const component of place.address_components) {
  699.     // @ts-ignore remove once typings fixed
  700.     const componentType = component.types[0];
  702.     switch (componentType) {
  703.       case "street_number": {
  704.         address1 = `${component.long_name} ${address1}`;
  705.         break;
  706.       }
  708.       case "route": {
  709.         address1 += component.long_name;
  710.         break;
  711.       }
  713.       case "postal_code": {
  714.         postcode = `${component.long_name}${postcode}`;
  715.         break;
  716.       }
  718.       case "postal_code_suffix": {
  719.         postcode = `${postcode}-${component.long_name}`;
  720.         break;
  721.       }
  722.       case "locality":
  723.         document.querySelector("#adresse_city").value = component.long_name;
  724.         break;
  725.       case "administrative_area_level_1": {
  726.         document.querySelector("#adresse_province").value = component.short_name;
  727.         break;
  728.       }
  729.     }
  730.   }
  732.   address1Field.value = address1;
  733.   postalField.value = postcode;
  734.   // After filling the form with address components from the Autocomplete
  735.   // prediction, set cursor focus on the second address line to encourage
  736.   // entry of subpremise information such as apartment, unit, or floor number.
  737.   address2Field.focus();
  738. }
  740. window.initAutocomplete = initAutocomplete;
  742.         {# function initializeAutocomplete(id) {
  743.         var element = document.getElementById(id);
  744.         const options = {
  745.             componentRestrictions: { country: "ca" },
  746.             types: ['address']
  747.         };
  749.         if (element) {
  750.             var autocomplete = new google.maps.places.Autocomplete(element, options);
  751.             google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
  752.         }
  753.         } #}
  755.         function onPlaceChanged() {
  756.         var place = this.getPlace();
  758.         //console.log(place);  // Uncomment this line to view the full object returned by Google API.
  760.             for (var i in place.address_components) {
  761.                 var component = place.address_components[i];
  762.                 for (var j in component.types) {  // Some types are ["country", "political"]
  763.                 var type_element = document.getElementById(component.types[j]);
  764.                 if (type_element) {
  765.                     type_element.value = component.long_name;
  766.                 }
  767.                 }
  768.             }
  769.         }
  770.         function googleMapsCustomError(){
  771.             alert('Google Maps custom error triggered');
  772.         }
  774.         (function takeOverConsole() { // taken from http://tobyho.com/2012/07/27/taking-over-console-log/
  775.             var console = window.console
  776.             if (!console) return
  778.             function intercept(method) {
  779.                 var original = console[method]
  780.                 console[method] = function() {
  781.                 // check message
  782.                 if(arguments[0] && arguments[0].indexOf('OverQuotaMapError') !== -1) {
  783.                     googleMapsCustomError();
  784.                 }
  785.                 
  786.                     if (original.apply) {
  787.                         // Do this for normal browsers
  788.                         original.apply(console, arguments)
  789.                     } else {
  790.                         // Do this for IE
  791.                         var message = Array.prototype.slice.apply(arguments).join(' ')
  792.                         original(message)
  793.                     }
  794.                 }
  795.             }
  796.             var methods = ['error']; // only interested in the console.error method
  797.             for (var i = 0; i < methods.length; i++)
  798.                 intercept(methods[i])
  799.         }())
  801. window.gm_authFailure = function() {
  802.     // remove the map div or maybe call another API to load map
  803.    // maybe display a useful message to the user
  804.    document.getElementById('newAddress_autocomplete').id = 'newAddress';
  805.    var newInput = document.getElementById('newAddress');
  806.    newInput.name = 'newAddress';
  807.    newInput.classList.remove("pac-target-input");
  808.    newInput.classList.remove("gm-err-autocomplete");
  809.    newInput.style.removeProperty("background-image");
  810.    newInput.removeAttribute('disabled');
  812.    //alert('Google maps failed to load!');
  813. }
  814.         google.maps.event.addDomListener(window, 'load', function() {
  815.         initAutocomplete('newAddress_autocomplete');
  816.         });
  817.         {# google.maps.event.addDomListener(window, 'load', function() {
  818.         initializeAutocomplete('newAddressGift_autocomplete');
  819.         }); #}
  822.         function SaveMyAdresse(e) {
  823.             if ($('#newAddress_autocomplete').val()){
  824.                 var adresse_autocomplete = $('#newAddress_autocomplete').val(); 
  825.             }else{
  826.                 var adresse_autocomplete = $('#newAddress').val(); 
  827.             }
  828.                     
  829. //console.log(adresse_autocomplete);
  830.                     var adresse_phone = $('#newAddress_phone').val(); 
  831.                     var adresse_name = $('#newAddress_name').val();
  832.                     if ($('#newAddress_unit').val()){
  833.                         var adresse_unit = $('#newAddress_unit').val();
  834.                     }
  835.                     var adresse_zipcode = $('#postal_code').val(); 
  836.                     var adresse_city = $('#adresse_city').val();  
  837.                     var adresse_province = $('#adresse_province').val(); 
  838.                     //console.log(adresse_autocomplete);
  840.                 if (!adresse_name){ 
  841.                         document.getElementById("newAddress_name").style.border = "red solid 2px"
  842.                         event.preventDefault();
  843.                         event.stopImmediatePropagation();
  844.                         
  845.                         return window.location = "#proceedToPaymentForm";
  846.                 }    
  848.                 if (!adresse_phone){ 
  849.                         document.getElementById("newAddress_phone").style.border = "red solid 2px"
  850.                         event.preventDefault();
  851.                         event.stopImmediatePropagation();
  852.                         
  853.                         return window.location = "#proceedToPaymentForm";
  854.                 }
  855.                 if (!adresse_zipcode){ 
  856.                         document.getElementById("postal_code").style.border = "red solid 2px"
  857.                         event.preventDefault();
  858.                         event.stopImmediatePropagation();
  859.                         
  860.                         return window.location = "#proceedToPaymentForm";
  861.                 }
  862.                 if (!adresse_name){ 
  863.                         document.getElementById("newAddress_name").style.border = "red solid 2px"
  864.                         event.preventDefault();
  865.                         event.stopImmediatePropagation();
  866.                         
  867.                         return window.location = "#proceedToPaymentForm";
  868.                 }
  869.                 if (!adresse_city){ 
  870.                         document.getElementById("adresse_city").style.border = "red solid 2px"
  871.                         event.preventDefault();
  872.                         event.stopImmediatePropagation();
  873.                         
  874.                         return window.location = "#proceedToPaymentForm";
  875.                 }
  876.                 if (!adresse_province){ 
  877.                         document.getElementById("adresse_province").style.border = "red solid 2px"
  878.                         event.preventDefault();
  879.                         event.stopImmediatePropagation();
  880.                         
  881.                         return window.location = "#proceedToPaymentForm";
  882.                 }
  883.                 if (!adresse_autocomplete){ 
  884.                         document.getElementById("newAddress_autocomplete").style.border = "red solid 2px"
  885.                         event.preventDefault();
  886.                         event.stopImmediatePropagation();
  887.                         
  888.                         return  window.location = "#proceedToPaymentForm";
  889.                 }
  890.                     
  891.                     $.ajax({
  892.                         type: "POST",
  893.                         url: '{{ path('SaveNewAdress',{ 'adresse': 'adresse'})  }}',
  894.                         async: true,
  895.                         data: {
  896.                                 adresse_autocomplete: $('#newAddress_autocomplete').val(),
  897.                                 adresse_manuel: $('#newAddress').val(),
  898.                                 adresse_phone: $('#newAddress_phone').val(),
  899.                                 adresse_name: $('#newAddress_name').val(),
  900.                                 adresse_unit : $('#newAddress_unit').val(), 
  901.                                 adresse_zipcode : $('#postal_code').val(),
  902.                                 adresse_province : $('#adresse_province').val(), 
  903.                                 adresse_city : $('#adresse_city').val(), 
  904.                             },
  905.                         success: function () {
  906.                             console.log('success');
  907.                             location.reload(true)
  908.                         }
  909.                     });
  910.                      
  911.                 };
  913.         </script>
  914.         {% endblock %}
  915.         {% block content %}
  917.             <form method="post" id="proceedToPaymentForm">
  918.             <input type="hidden" name="action" value="proceed_to_payment">
  919.             <!-- Page-Title -->
  920.             <div class="row">
  921.                 <div class="col-lg-8 mx-auto">
  922.                     <div class="row">
  923.                         <div class="col-sm-12">
  924.                             <p class="product-subtitle-brand">
  925.                                 <ul class="breadcrumb breadcrump-cart pull-right" >
  926.                                     <li>
  927.                                         <a href="{{path('viewCart')}}" class="">Panier</a>
  928.                                     </li>
  929.                                     <li>
  930.                                         <a href="{{path('checkout')}}" class="">
  931.                                             <u>Livraison / Cueillette</u>
  932.                                         </a>
  933.                                     </li>
  934.                                     <li>
  935.                                         <a href="{{path('cartPayment')}}" class="">Paiement</a>
  936.                                     </li>
  937.                                     <li>
  938.                                         <a href="{{path('home')}}" class="">Retour au magasin</a>
  939.                                     </li>
  940.                                 </ul>
  941.                             </p>
  942.                         </div>
  943.                     </div>
  944.                     {# <h1 class="text-primary text-center">PAGE TEST</h1> #}
  945.                     <div class="card-box">
  946.                         <h4 class=" checkoutBlocTitle">
  947.                             Confirmez votre mode de livraison
  948.                         </h4>
  949.                         <div class="checkout-form d-flex">
  950.                         {% set isAPickUp = global.getCart.getIsPickupOmeloView  %}
  951.                                 <div id="checkShipping" class="py-3 pr-5" style="font-size: 18px;">
  952.                                 <input type="checkbox" value="domicile" class="choiceCustomShipping" {% if isAPickUp != 'Oui' %} checked="checked" {% endif %} name="action_shipping" id="action_shipping" />
  953.                                     <label for="action_shipping">Livraison à domicile</label>
  954.                                 </div>
  955.                                 <div id="checkPickUp" class="py-3 pr-5" style="font-size: 18px;">
  956.                                 <input type="checkbox" value="cueillette" class="choiceCustomShipping" {% if isAPickUp == 'Oui' %} checked="checked" {% endif %}  id="pickupScheduleCheckbox"  name="pickupScheduleCheckbox" />
  957.                                     <label for="pickupScheduleCheckbox">Point de cueillette</label>
  958.                                 </div>
  959.                                 {# <div id="checkGift" class="py-3" style="font-size: 18px;">
  960.                                 <input type="checkbox" value="cadeau" class="choiceCustomShipping" name="action_gift" id="action_gift" />
  961.                                     <label for="action_gift">Je veux faire un cadeau</label>
  962.                                 </div> #}
  963.                             </div>
  964.                             
  965.                     <!--end checkout-form-->
  967.                 <div id="blocShipping" style="{% if isAPickUp != 'Oui' %}display:none;{% endif %}">
  968.                 
  969.                             <h4 class="checkoutBlocTitle">
  970.                                 Entrez votre adresse :
  971.                             </h4>
  972.                         
  973.                         <div class="checkout-form">
  974.                         {% set lastShippingAddress = global.getLastUsedShippingAddress %}
  975.                         {% set lastShippingAddressId = 0 %}
  976.                         {% if lastShippingAddress %}
  977.                             {% set lastShippingAddressId = lastShippingAddress.id %}
  978.                         {% endif %}
  979.                         <select class="form-control {% if app.user.validShippingAddresses is empty %} d-none {% endif %}" id="checkoutAddressSelection" name="checkoutAddressSelection" style="font-size:15px">
  980.                             <option value="none">Choisir une adresse existante ou entrer une nouvelle adresse</option>
  981.                             {% for shippingAddress in app.user.validShippingAddresses %}
  982.                                 <option value="{{shippingAddress.id}}" {% if lastShippingAddressId == shippingAddress.id %} selected {% endif %}>{{shippingAddress}}</option>
  983.                             {% endfor %}
  984.                         </select>
  986.                         <div id="add_new_address" class="m-t-20" style="{% if app.user.validShippingAddresses is not empty %}display:none;{% endif %}">
  988.                             <h4 class="header-title mt-0 mb-3 {% if app.user.validShippingAddresses is empty %}d-none{% endif %}">
  989.                                 Nouvelle adresse
  990.                             </h4>
  991.                             <br/>
  992.                             <div class="row">
  993.                                 <div class="col-md-8">
  994.                                     <label>Nom</label>
  995.                                     <input type="text" class="form-control" id="newAddress_name" name="newAddress_name">
  996.                                 </div>
  997.                                 <div class="col-md-4">
  998.                                     <label>Téléphone</label>
  999.                                     <input type="text" class="form-control" placeholder="(999) 999-9999" id="newAddress_phone" name="newAddress_phone">
  1000.                                     {# <input type="tel" class="form-control" id="newAddress_phone" name="newAddress_phone" placeholder="9999999999" maxlength="15" required> #}
  1001.                                     <script>
  1002.                                         document.getElementById('newAddress_phone').addEventListener('input', function (e) {
  1003.                                         var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  1004.                                         e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
  1005.                                         });
  1006.                                     </script>
  1007.                                 </div>
  1008.                             </div>
  1010.                             <br/>
  1011.                             <div class="row">
  1012.                                 <div class="col-md-8 col-lg-8">
  1013.                                     <label>Veuillez entrer votre addresse</label>
  1014.                                     <input type="text" class="form-control" placeholder="ex : 36 Rue Sainte-Catherine Ouest" id="newAddress_autocomplete" name="newAddress_autocomplete" autocomplete="off">
  1015.                                 </div>
  1016.                                 <div class="col-md-4">
  1017.                                     <label>Unité</label>
  1018.                                     <input type="text" class="form-control" placeholder="ex : Appartement/Unité/Batiment" id="newAddress_unit" name="newAddress_unit" maxlength="5">
  1019.                                 </div>
  1020.                             </div>
  1021.                             <div class="row m-3">
  1022.                                 {# <div class="col-md-4">
  1023.                                     <label>province</label>
  1024.                                     <input type="text" class="form-control" placeholder="" id="adresse_province" name="adresse_province" >
  1025.                                 </div> #}
  1026.                                 <div class="col-md-4">
  1027.                                     <label>Province</label>
  1028.                                 <select class="form-control" id="adresse_province" name="adresse_province">
  1029.                                     <option value="QC">Québec</option>
  1030.                                     <option value="AB">Alberta</option>
  1031.                                     <option value="BC">Colombie-Britannique</option>
  1032.                                     <option value="PE">Île-du-Prince-Édouard</option>
  1033.                                     <option value="MB">Manitoba</option>
  1034.                                     <option value="NB">Nouveau-Brunswick</option>
  1035.                                     <option value="NS">Nouvelle-Écosse</option>
  1036.                                     <option value="NU">Nunavut</option>
  1037.                                     <option value="ON">Ontario</option>
  1038.                                     <option value="SK">Saskatchewan</option>
  1039.                                     <option value="NL">Terre-Neuve-et-Labrador</option>
  1040.                                     <option value="NT">Territoires du Nord-Ouest</option>
  1041.                                     <option value="YT">Yukon</option>
  1042.                                 </select>
  1043.                             </div>
  1044.                                 
  1045.                                 <div class="col-md-4">
  1046.                                     <label>ville</label>
  1047.                                     <input type="text" class="form-control" placeholder="" id="adresse_city" name="adresse_city">
  1048.                                 </div>
  1049.                             {# <div class="col-md-4">
  1050.                                 <label>Ville</label>
  1051.                                 <div id="newAddress_cityQC">
  1052.                                     <select class="form-control" id="newAddress_citySelectQC" name="newAddress_citySelectQC"></select>
  1053.                                 </div>
  1054.                                 <div id="newAddress_cityON" style="display:none;">
  1055.                                     <select class="form-control" id="newAddress_citySelectON" name="newAddress_citySelectON"></select>
  1056.                                 </div>
  1057.                                 <div id="newAddress_cityAny" style="display:none;">
  1058.                                     <input type="text" class="form-control" id="newAddress_cityInputAny" name="newAddress_cityInputAny">
  1059.                                 </div>
  1060.                             </div> #}
  1061.                                 <div class="col-md-4">
  1062.                                     <label class="control-label">Code postal</label>
  1063.                                     <input type="text" class="form-control" id="postal_code" name="newAddress_zipcode">
  1064.                                 </div>
  1065.                             </div>
  1066.                             <div class="row" style="justify-content:end;">
  1067.                                 <div class="col-md-3">
  1068.                                     <input type="bouton" id="SaveAdress" value="Enregistrer" onClick="SaveMyAdresse()" class="btn-primary btn py-2 px-4"></input>
  1069.                                 </div>
  1070.                             </div>
  1071.                         </div>
  1072.                         </div>
  1073.                     </div>
  1074.             
  1075.     <div id="blocPickUp" style="display:none;">
  1076.         {% if global.getAssociationUserIsBrowsing and
  1077.         global.getAssociationUserIsBrowsing.getVariableByCodeName('orders.canPickUp') %}
  1078.             <div class="checkout-form">
  1079.                 <div class=" mx-auto">
  1080.                         <h4 class="checkoutBlocTitle">
  1081.                             Cueillette au marche
  1082.                         </h4>
  1083.                         <div class="checkout-form">
  1085.                             <div class="row">
  1086.                                 <div class="col-12">
  1087.                                     <div class="form-group">
  1088.                                         <label for="exampleFormControlSelect2">Addresse</label>
  1089.                                         {% if global.getAssociationUserIsBrowsing.getVariableByCodeName('orders.pickUpAdress') %}
  1090.                                             <input readonly type="text" class="form-control" value="{{ global.getAssociationUserIsBrowsing.getVariableByCodeName('orders.pickUpAdress').value }}">
  1091.                                         {% else %}
  1092.                                             <input readonly type="text" class="form-control" value="{{ global.getAssociationUserIsBrowsing.urlName}}">
  1093.                                         {% endif %}
  1094.                                     </div>
  1095.                                 </div>
  1096.                             </div>
  1098.                             {# PICKUP SELECT : only avalaible for associations #}
  1099.                             <div class="row">
  1100.                                 <div class="col-12">
  1101.                                     {% set dayNameMap = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'] %}
  1102.                                     <div class="form-group col-4">
  1103.                                         {% if global.getAssociationUserIsBrowsing.getVariableByCodeName('orders.pickUpSchedule') %}
  1104.                                             <label for="pickupScheduleChoice">Horaire de cueillette</label>
  1106.                                             <select class="form-control" id="pickupScheduleChoice" name="pickupSchedule">
  1107.                                                 {% for schedule in global.pickupChoiceForCurrentAssociation %}
  1108.                                                     <option value="{{ schedule['day']|date("Y/m/d") }} de {{ schedule['start'] }} à {{ schedule['end'] }}">{{ dayNameMap[(schedule['day']|date("N"))-1] }}
  1109.                                                         {{
  1110.                                         schedule['day']|date("d/m") }}
  1111.                                                         : de
  1112.                                                         {{ schedule['start'] }}
  1113.                                                         à
  1114.                                                         {{ schedule['end'] }}
  1115.                                                     </option>
  1116.                                                 {% endfor %}
  1117.                                             </select>
  1118.                                         {% else %}
  1119.                                         <div class="col-4">
  1120.                                             <label for="pickupScheduleChoice">Dites-nous quand comptez-vous venir :</label>
  1121.                                             <input type="text" class="form-control col-4" name="pickupSchedule">
  1122.                                         </div>
  1123.                                         {% endif %}
  1124.                                     </div>
  1125.                                 </div>
  1126.                             </div>
  1128.                             {# PACKING SELECT : only avalaible for associations #}
  1129.                             {% if checkout.hasPickup %}
  1130.                                 <div class="row">
  1131.                                     <div class="col-12">
  1132.                                         <div class="form-group">
  1133.                                             <label for="withPackingChoice">Choix du type de ramassage</label>
  1134.                                             <select class="form-control" id="withPackingChoice" name="withPacking">
  1135.                                                 {% if global.canPackup(checkout) > 0 %}
  1136.                                                     <option value="true">
  1137.                                                         Cueillette unique
  1138.                                                         {% if checkout.getPackingCost(false) > 0 %}: frais applicables de
  1139.                                                             {{
  1140.                                         checkout.getPackingCost(false) }}$
  1141.                                                         {% endif %}
  1142.                                                     </option>
  1143.                                                 {% endif %}
  1144.                                                 {% if global.canPackup(checkout) != 1 %}
  1145.                                                     <option value="false">Cueillette aux kiosques</option>
  1146.                                                 {% endif %}
  1147.                                             </select>
  1148.                                             <br>
  1149.                                             <ul>
  1150.                                                 <li>
  1151.                                                     <strong>Cueillette unique :</strong>
  1152.                                                     Votre commande sera préparée par notre marché et prête pour le ramassage
  1153.                                                 </li>
  1155.                                                 <li>
  1156.                                                     <strong>Cueillette aux kiosques :</strong>
  1157.                                                     Visitez chacun des exposants pour récupérer en kiosque les items de votre commande :
  1158.                                                                                         sans frais
  1159.                                                 </li>
  1160.                                             </ul>
  1161.                                         </div>
  1162.                                     </div>
  1163.                                 </div>
  1164.                             {% endif %}
  1165.                         </div>
  1166.                         <!--end checkout-form-->
  1167.                 </div>
  1168.                 <!--end col-->
  1169.             </div>
  1170.             <!--end row-->
  1172.         {% else %}
  1174.             {% if global.hasGlobalPickUpEnabled %}
  1176.                 {% set pickupSchedule = global.getGlobalPickUpSchedule %}
  1177.                 {% set pickupSchedules = global.getGlobalPickUpSchedules %}
  1179.                 {% set pickupLocation = global.getGlobalPickUpLocation %}
  1180.                 {% set pickupLocations = global.getGlobalPickUpLocations %}
  1182.                 {% if pickupSchedule %}
  1183.                 <script>
  1184.                 var pickupSchedule = '{{pickupSchedule|raw}}';
  1185.                 var pickupSchedules = '{{pickupSchedules|json_encode()|raw}}';
  1186.                 var pickupLocations = '{{pickupLocations|json_encode()|raw}}';
  1187.                 </script>
  1188.                 {% endif %}
  1189.                 <div class="checkout-form">
  1190.                     <div class=" mx-auto">
  1191.                         <div id="pickupAdressBlock"  >
  1192.                             <h4 class="checkoutBlocTitle">
  1193.                                 Cueillette en personne
  1194.                             </h4>
  1195.                         {# {% if app.user.getIsBetaTester %} #}
  1196.                             <div class="row my-2">
  1197.                                 <div class="col-md-6">
  1198.                                     <label>Nom</label>
  1199.                                     <input type="text" class="form-control" id="pickup_name" required="" name="pickup_name" value="{{ app.user.firstname }}">
  1200.                                 </div>
  1201.                                 <div class="col-md-4">
  1202.                                     <label>Téléphone</label>
  1203.                                     <input type="text" class="form-control" placeholder="(999) 999-9999" required="" id="pickup_phone" name="pickup_phone" value="{{ app.user.phone }}">
  1204.                                     <script>
  1205.                                         document.getElementById('pickup_phone').addEventListener('input', function (e) {
  1206.                                         var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  1207.                                         e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
  1208.                                         });
  1209.                                     </script>
  1210.                                 </div>
  1211.                             </div>
  1212.                             {# {% endif %} #}
  1213.                             <div class="checkout-form">
  1214.                                     <div class="row">
  1215.                                         <div class="col-12">
  1216.                                             <div class="form-group">
  1217.                                                 <label for="pickupLocations">Lieu de la cueillette</label>
  1218.                                                 <input type="hidden" name="pickupLocation" value="{{pickupLocation}}" id="pickupLocation">
  1219.                                                 <select class="form-control" name="pickupLocations" id="pickupLocations" style="overflow: scroll;">
  1220.                                                     <option value="" disabled SELECTED>--- Veuillez choisir le lieu de la cueillette ---</Option>
  1221.                                                     {% for pickupLocation in pickupLocations %}
  1222.                                                         <option value="{{pickupLocation.value}}">{{pickupLocation.text}}</option>
  1223.                                                     {% endfor %}
  1224.                                                 </select>
  1225.                                             </div>
  1226.                                         </div>
  1227.                                     </div>
  1229.                                     {# <hr/> #}
  1231.                                     <div class="row" id="datetimeSelectionRow" style="display:none;">
  1232.                                         <div class="col-12">
  1233.                                             <div class="form-group">
  1234.                                                 <br/>
  1235.                                                 <label for="exampleFormControlSelect2">Horaire d'ouverture</label>
  1236.                                                 <div id="pickupLocationScheduleDisplay"></div>
  1237.                                                 <br/>
  1238.                                                 <div class="form-check">
  1239.                                                     <label for="pickupScheduleChoice">Dites-nous quand comptez-vous venir : <i class="fa fa-info-circle" ></i>
  1240.                                                         <div id="InfoPickUpChoice"><strong>Important :
  1241.                                                         </strong> Afin d'assurer la bonne préservation des aliments de votre boîte Maturin, 
  1242.                                                         il est important d'aller chercher votre commande au point de cueillette le jour de la livraison.
  1243.                                                         </div>    
  1244.                                                     </label>
  1245.                                                     
  1247.                                                     <input type="text"  readonly class="form-control" style="cursor:pointer;" placeholder="Cliquer ici pour choisir la date" id='pickupSchedule'>
  1248.                                                     <input type="hidden" id="pickupScheduleHidden" name="pickupSchedule">
  1249.                                                 </div>
  1250.                                                 <br/>
  1252.                                                 <div style="display:none;" id="datetime_picker">
  1253.                                                     <label for="pickupScheduleChoice">Dites-nous à quelle heure comptez-vous venir :</label>
  1254.                                                     <style>
  1256.                                                     .timepicker-hour-box {
  1257.                                                         border-radius:10px;
  1258.                                                         border:1px solid #ccc;
  1259.                                                         background-color: #eee;
  1260.                                                         padding: 10px;
  1261.                                                         cursor: pointer;
  1262.                                                     }
  1264.                                                     .timepicker-hour-box-disabled {
  1265.                                                         background-color: #666;
  1266.                                                         cursor: not-allowed;
  1267.                                                     }
  1269.                                                     .timepicker-selected {
  1270.                                                         background-color: green;
  1271.                                                     }
  1273.                                                     .timepicker-warning {
  1274.                                                         background-color: orange;
  1275.                                                     }
  1277.                                                     </style>
  1279.                                                 </div>
  1281.                                                 <div class="row" id="dateTimePickerRow">
  1282.                                                 </div>
  1284.                                             </div>
  1286.                                         </div>
  1287.                                     </div>
  1288.                                 </div>
  1290.                             </div>
  1291.                             <!--end checkout-form-->
  1292.                     
  1293.                     </div>
  1294.                     <!--end col-->
  1295.                 </div>
  1296.                 <!--end row-->
  1297.             {% endif %}
  1299.         {% endif %}
  1300.         </div>
  1301.         </div>    
  1302.         </div>
  1303.         </div>
  1304.     
  1305.                 <!--end card-box-->
  1306.             <!--end col-->
  1308.         <div  id="choiceShippingDate">
  1309.             <div class="row">
  1310.         {% set dateDelivery = global.getCart.getDeliveryChoiceDate  %}
  1311.                 <div class="col-lg-8 mx-auto">
  1312.                     <div class="text-center mb-3" id="deliveryEstimateSpinner">
  1313.                         <img src="/images/loading.gif" alt="Remplisser le formuliare avant de passer à la suite.">
  1314.                     </div>
  1315.                     <div class="card-box" id="deliveryEstimateCard">
  1316.                     <h4 class="checkoutBlocTitle">
  1317.                                 Choisissez une date de livraison
  1318.                             </h4>
  1319.                         <p id="pChoiceDate" style="font-size:18px">Votre commande sera livrée le 
  1321.                             <b id="defaultCustomDate" style="color:#53a321;">
  1322.                             {# {% if dateDelivery is null %} #}
  1323.                             <span id="evolutiveDateDelivery"> {{ dateDelivery| localizeddate('medium', 'none', null, '-7', 'l dd MMMM y') }}</span>
  1324.                                 {#{% set route = global.getEstimationShippingRouteForMaturinProducts(global.getCart)  %}
  1325.                                 {% if route['route'] is not null and not route['route'].isPuro %}
  1326.                                     
  1327.                                         {# {{route['date'] | localizeddate('medium', 'none', null, '-7', 'dd MMMM y')}} #}
  1328.                                 {# {% else %} #}
  1329.                                     {# entre {{route['date'] | localizeddate('medium', 'none', null, '-7', 'dd MMMM y')}}
  1330.                                     et {{global.add48hToDate(route['date']) | localizeddate('medium', 'none', null, '-7', 'dd MMMM y')}} #}
  1331.                                 {# {% endif %} #}
  1332.                                     {# {% else %} #}
  1333.                                     
  1334.                                 
  1336.                                 {# {% endif %} #}
  1337.                             entre 12h et 21h
  1338.                             </b>
  1340.                                 </p>
  1341.                         <div class="form-check">
  1342.                             <input class="" type="checkbox" value="on" name="DeliveryCheck" id="DeliveryChoiceCheckbox"
  1343.                             {% if global.getCart.preOrder %}
  1344.                                 checked
  1345.                             {% endif %}
  1346.                             >
  1347.                             <label class="form-check-label" for="flexCheckDefault" id="DateChoice" style="font-size:18px">
  1348.                                 Choisir une autre date <i class="fa fa-info-circle"></i>
  1349.                                 <div id="InfoDateChoice" class='m-2' style="font-size:18px">Vous pouvez choisir une date de livraison jusqu'à 8 semaines en avance</div>
  1350.                             </label>
  1351.                             <p/>
  1352.                             <div id="customDelivery" {% if dateDelivery is null %} style="display:none" {% endif %}>
  1354.                                 {# Choisissez votre date: #}
  1355.                                 <input type="text" class="form-control" placeholder="Cliquer ici pour choisir la date"  style="font-size:18px" readonly name="livraisonDate" id="datepickerCustomDelivery">
  1356.                         </div>
  1357.                     </div>
  1358.                     <!--end checkout-form-->
  1359.                 </div>
  1360.                 <!--end card-box-->
  1361.             </div>
  1362.         </div>
  1363.             <!--end col-->
  1364. </div>
  1366.         <div id="blocGift" style="display:none;">
  1367.             {#<div class="row">
  1368.                 <div class="col-lg-8 mx-auto">
  1369.                     <div class="card-box">
  1370.                         {{ block("content", "frontend/bulkshipModify.cart.html.twig") }}
  1371.                     </div>
  1372.                 </div>
  1373.             </div>#}
  1374.         
  1375.             <div class="row">
  1376.                     <div class="col-lg-8 mx-auto">
  1377.                         <div class="card-box">
  1378.                             <h4 class="checkoutBlocTitle">
  1379.                                 Commande contenant un cadeau
  1380.                             </h4>
  1381.                             {# {% set display_bulkshipping_checkbox = true %}
  1382.                                 {% if display_bulkshipping_checkbox %} #}
  1383.                                 <div class="form-group">
  1384.                                     <input type="checkbox" name="action_bulkshipping" id="action_bulkshipping">
  1385.                                         <label for="action_bulkshipping" style="font-size:18px">Je veux faire un cadeau</label>
  1386.                                 </div>
  1387.                                 {# {% endif %} #}
  1388.                         
  1389.                         <!--end checkout-form-->
  1390.                     </div>
  1391.                     <!--end card-box-->
  1392.                 </div>
  1393.                 <!--end col-->
  1394.             </div>
  1395.         </div> 
  1397.                     {% if contains_alcohol %}
  1398.             <div class="row">
  1399.                 <div class="col-lg-8 mx-auto">
  1400.                     <div class="card-box">
  1401.                         <h4 class="checkoutBlocTitle">
  1402.                             Âge requis pour acheter
  1403.                         </h4>
  1404.                         <div class="checkout-form">
  1406.                             <div class="row">
  1407.                                 <div class="col-12">
  1408.                                     <div class="form-group">
  1409.                                         <input type="checkbox" name="18YearsOld">
  1410.                                         <label for="exampleFormControlSelect2"> Je confirme avoir 18 ans et plus. </label>    
  1411.                                     </div>
  1412.                                 </div>
  1413.                             </div>
  1415.                             <hr/>
  1417.                             <div class="row">
  1418.                                 <div class="col-12">
  1419.                                     <div class="form-group">
  1420.                                         <p>L'alcool n’étant pas un produit comme les autres,
  1421.                                                                             nous nous devons de faire respecter la loi relative à
  1422.                                                                             la commercialisation de boissons alcooliques.</p>
  1424.                                         <p>Cela exige que nous mettions tout en œuvre pour
  1425.                                                                             nous assurer que nos produits sont vendus à des
  1426.                                                                             personnes âgées de 18 ans ou plus.</p>
  1427.                                     </div>
  1428.                                 </div>
  1429.                             </div>
  1430.                         </div>
  1431.                         <!--end checkout-form-->
  1432.                     </div>
  1433.                     <!--end card-box-->
  1434.                 </div>
  1435.                 <!--end col-->
  1436.             </div>
  1437.             <!--end row-->
  1438.         {% endif %}
  1440.         <div class="row" >
  1441.             <div class="col-lg-8 mx-auto">
  1442.                 <div class="card-box">
  1443.                     <h4 class="checkoutBlocTitle">
  1444.                         Coupon rabais
  1445.                     </h4>
  1446.                     <br/>
  1447.                         <div class="checkout-form">
  1448.                             {% if couponMarketing %}<p><a href="#" onclick="$('#coupon').val('{{coupon.code}}');">Coupon de <b>{{couponMarketing.amount }} $</b> ({{couponMarketing.code}})</a></p><br/>{% endif %}
  1449.                             {% for coupon in couponLists %}
  1450.                         {#    {{ dump(date()|date("Y-m-d"))}} <= {{ dump(coupon.dateTo|date("Y-m-d"))}} #}
  1451.                                 {% if date()|date("Y-m-d") <= coupon.dateTo|date("Y-m-d") %}
  1452.                                     {% if coupon.type == 0 %}<p><a href="#" onclick="$('#coupon').val('{{coupon.code}}');" style="color : #53a321;">Coupon de <b>{{coupon.amount }} %</b> ({{coupon.code}})</a></p><br/>{% endif %}
  1453.                                     {% if coupon.type == 2 %}<p><a href="#" onclick="$('#coupon').val('{{coupon.code}}');" style="color : #53a321;">Coupon de <b>{{coupon.amount }} $</b> ({{coupon.code}})</a></p><br/>{% endif %}
  1454.                                 {% else %}
  1455.                                     {% if coupon.type == 0 %}<p style="color : gray;">Coupon de <b>{{coupon.amount }} %</b> ({{coupon.code}}) (Expiré)</p><br/>{% endif %}
  1456.                                     {% if coupon.type == 2 %}<p style="color : gray;">Coupon de <b>{{coupon.amount }} $</b> ({{coupon.code}}) (Expiré)</p><br/>{% endif %}
  1457.                                 {% endif %}
  1458.                             {% endfor %}
  1459.                             {% set usedCouponCode = "" %}
  1460.                             {% if checkout.usedCoupon %}
  1461.                                 {% set usedCouponCode = checkout.usedCoupon.code %}
  1462.                             {% endif %}
  1463.                             
  1464.                             <input name="coupon" type="text" class="form-control" value="{{usedCouponCode}}" id="coupon" placeholder="Aucun coupon">
  1465.                         </div>
  1466.                 </div>
  1467.                 <!--end card-box-->
  1468.             </div>
  1469.             <!--end col-->
  1470.         </div>
  1471.         <!--end row-->
  1473.         <div class="row">
  1474.             <div class="col-lg-8 mx-auto">
  1476.                 {% if global.getAssociationUserIsBrowsing and
  1477.             global.getAssociationUserIsBrowsing.getVariableByCodeName('orders.canPickUp') %}
  1478.                     {% set display_bulkshipping_checkbox = false %}
  1479.                 {% endif %}
  1481.                 <div style="width: 100%; text-align: right;">
  1482.                  {% if app.user.validShippingAddresses is empty %}
  1483.                      <button class="btn-primary btn py-2 px-4" name="proceedToPaymentSubmitBtn" id="proceedToPaymentSubmitBtn">Enregistrer et passer au paiement</button>
  1484.                  {% else %}
  1485.                     <button class="btn-primary btn py-2 px-4" name="proceedToPaymentSubmitBtn" id="proceedToPaymentSubmitBtn">Passer au paiement</button>
  1486.                 {% endif %}
  1487.                 </div>
  1488.             </div>
  1489.             <!--end col-->
  1490.         </div>
  1491.         <!--end row-->
  1493.     </form>
  1495.     {% endblock %}