Merge pull request #134 from Invertus/opc-styling-layout

styling and layout for checkout

dpdbaltics.php

@@ -214,6 +214,12 @@ public function hookActionFrontControllerSetMedia()
                     'priority' => 130
                 ]
             );
+
+            Media::addJsDef([
+                'dpdbaltics' => [
+                    'isOnePageCheckout' => $opcModuleCompatibilityValidator->isOpcModuleInUse()
+                ]
+            ]);
         }
 
         /** @var \Invertus\dpdBaltics\Provider\CurrentCountryProvider $currentCountryProvider */
@@ -272,7 +278,7 @@ public function hookActionFrontControllerSetMedia()
                 'dpdLockerMarkerPath' => $this->getPathUri() . 'views/img/locker.png',
                 'dpdHookAjaxUrl' => $this->context->link->getModuleLink($this->name, 'Ajax'),
                 'pudoSelectSuccess' => $this->l('Pick-up point selected'),
-                'dpd_carrier_ids' => $carrierIds
+                'dpd_carrier_ids' => $carrierIds,
             ]);
 
             $this->context->controller->registerStylesheet(

src/Validate/Compatibility/index.php

@@ -1,4 +1,23 @@
 <?php
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+
 
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");

views/css/front/onepagecheckout.css

@@ -37,4 +37,33 @@
 
 .dpd-services-block .list-inline-item {
     min-width: 370px;
+}
+
+.carrier-extra-content {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 5px;
+}
+
+.dpd-phone-block {
+    padding-bottom: 0;
+}
+
+.chosen-container {
+    width: 100% !important;
+    max-width: 290px;
+}
+
+.carrier-extra-content .chosen-select {
+    min-height: 49px;
+    height: 100%;
+}
+
+.dpd-checkout-delivery-time--container {
+    width: 100%;
+}
+
+.search-block-container {
+    padding-left: 15px;
+    padding-right: 15px;
 }

views/css/front/order-input.css

@@ -19,7 +19,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: 100% !important;
+  width: 100%;
   max-width: 100%;
 }
 
@@ -84,7 +84,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   margin: 1px 0;
   padding: 4px 20px 4px 5px;
   width: 100%;
-  height: auto;
+  height: 49px;
   outline: 0;
   border: 1px solid #aaa;
   background: url("../../img/dpd-chosen-front.png") no-repeat 100% -20px;
@@ -178,11 +178,12 @@ This file is generated by `grunt build`, do not edit it by hand.
   margin-right: 20px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 13px 0;
+  padding: 16px 0;
 }
 
 .chosen-container-single a.chosen-single {
-  height: auto;
+  min-height: 49px;
+  height: 100%;
 }
 
 .chosen-container-single .chosen-single div {
@@ -203,7 +204,7 @@ div.form-control-chosen:focus-within {
 .css-dpd-phone-prefix .chosen-single:before {
   content: '+';
   position: absolute;
-  transform: translate(-12px, 12px);
+  transform: translate(-12px, 16px);
 }
 
 .dpd-input-wrapper .form-control,

views/css/front/pudo-shipment.css

@@ -123,7 +123,7 @@
 .phone-block-hr,
 .delivery-time-hr
 {
-  padding-bottom: 2rem;
+  padding-bottom: 0;
 }
 
 
@@ -244,3 +244,7 @@ a.chosen-single:hover {
   width: 100%;
 }
 
+.dpd-delivery-time-block {
+  margin-top: 1rem;
+}
+

views/js/front/order-opc.js

@@ -17,6 +17,12 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
  */
 var isPudoPointSelected = false;
+var phoneQuerySelectors = [
+    '#checkout #delivery-address [name="phone"]',
+    '.address-fields input[name="phone"]',
+    '#checkout [name="delivery_phone_mobile"]'
+];
+
 $(document).ready(function (){
 
     $(document).on('change', '.dpd-phone-block', function() {
@@ -51,9 +57,19 @@ function handlePhoneNumber(selector)
     if (!$('.dpd-phone-block')) {
         return true;
     }
+
     var phone = selector.find('input[name="dpd-phone"]').val();
     var phoneArea = selector.find('select[name="dpd-phone-area"] option:selected').val();
 
+    // if empty then take it from opc phone field
+    if (phone === '') {
+        phoneQuerySelectors.forEach(function (phoneSelector) {
+            if ($(phoneSelector).val()) {
+                phone = $(phoneSelector).val();
+            }
+        });
+    }
+
     if (currentController === 'supercheckout') {
         saveSelectedPhoneNumberSuperCheckout(phone, phoneArea)
     } else {
@@ -95,8 +111,10 @@ function DPDdisplayMessageOpc(parent, template) {
 
 // Module "onepagecheckoutps" compatibility
 $(document).on('opc-load-review:completed', function() {
-    $('.delivery-option.selected .carrier-extra-content').show();
     handlePhoneNumber($('.dpd-phone-block'));
 });
 
-
+// Then address is being modified
+$(document).on('thecheckout_Address_Modified', function () {
+    handlePhoneNumber($('.dpd-phone-block'));
+});

views/js/front/pudo.js

@@ -108,7 +108,7 @@ $(document).ready(function () {
             }
 
             //Js to open extra content failed from theme, doing it manually.
-            if (params.deliveryOption.length > 0 && !$(params.deliveryOption).next('.carrier-extra-content').is(':visible')) {
+            if (params.deliveryOption.length > 0 && !$(params.deliveryOption).next('.carrier-extra-content').is(':visible') && !dpdbaltics.isOnePageCheckout) {
                 $('.carrier-extra-content').hide();
                 $(params.deliveryOption).next('.carrier-extra-content').slideDown();
             }

views/templates/hook/front/carrier-delivery-time.tpl

@@ -18,9 +18,9 @@
  *}
 <div class="container dpd-checkout-delivery-time--container dpd-delivery-time-block">
     <div class="row form-group">
-        <div class="col-lg-6 col-12 col-sm-9">
+        <div class="{if !($isOpcCheckout)}col-lg-6 col-12 col-sm-9{/if}">
             <p>{l s='Desirable delivery time' mod='dpdbaltics'}</p></div>
-        <div class="col-lg-4 col-sm-12 dpd-input-wrapper dpd-select-wrapper hasValue small-padding-sm-right">
+        <div class="{if !($isOpcCheckout)}col-lg-4 col-sm-12 {/if}dpd-input-wrapper dpd-select-wrapper hasValue small-padding-sm-right">
             <select
                     class="chosen-select form-control-chosen"
                     name="dpd-delivery-time"

views/templates/hook/front/carrier-phone-number.tpl

@@ -24,11 +24,11 @@
         {include file='module:dpdbaltics/views/templates/hook/front/partials/dpd-message.tpl' messageType='error'}
     {/if}
     <div id="phone-block-wrapper" class="row form-group">
-        <div class="{if !isOpcCheckout}col-lg-5 col-12{/if}">
-            <p class="form-control-label">{l s='This a phone number that will be used for deliveriessss' mod='dpdbaltics'}</p></div>
-        <div class="{if !isOpcCheckout}col-lg-3 col-4 col-sm-12{/if} dpd-input-wrapper dpd-select-wrapper hasValue small-padding-sm-right css-dpd-phone-prefix">
+        <div class="{if !($isOpcCheckout)}col-lg-5 col-12{/if}">
+            <p class="form-control-label">{l s='This a phone number that will be used for deliveries' mod='dpdbaltics'}</p></div>
+        <div class="{if !($isOpcCheckout)}col-lg-3 col-4 col-sm-12{/if} dpd-input-wrapper dpd-select-wrapper hasValue small-padding-sm-right css-dpd-phone-prefix">
             <select
-                    class="chosen-select form-control form-control-chosen"
+                    class="chosen-select form-control-chosen"
                     name="dpd-phone-area">
                     {html_options options=$dpdPhoneArea selected=$contextPrefix}
             </select>
@@ -37,7 +37,7 @@
             </div>
         </div>
 
-        <div class="{if !isOpcCheckout}col-lg-4 col-8 col-sm-12{/if} dpd-input-wrapper{if isset($dpdPhone) && $dpdPhone} hasValue{/if} small-padding-sm-left">
+        <div class="{if !($isOpcCheckout)}col-lg-4 col-8 col-sm-12{/if} dpd-input-wrapper{if isset($dpdPhone) && $dpdPhone} hasValue{/if} small-padding-sm-left">
             <input name="dpd-phone" id="dpd-carrier-{$carrierReference}" type="text" class="form-control" {if isset($dpdPhone) && $dpdPhone}value="{$dpdPhone}"{/if}>
             <div id="phone-input-placeholder" class="dpd-input-placeholder" for="dpd-phone">{l s='Phone' mod='dpdbaltics'}</div>
         </div>

views/templates/hook/front/partials/pudo-search-block.tpl

@@ -19,10 +19,10 @@
 
 <div class="search-block-container">
         {if count($city_list) > 1}
-    <div class="col-xl-6 col-lg-6 col-sm-12 dpd-city-block dpd-select-wrapper dpd-input-wrapper">
+    <div class="{if !($isOpcCheckout)}col-xl-6 col-lg-6 col-sm-12 {/if}dpd-city-block dpd-select-wrapper dpd-input-wrapper">
     <select name="dpd-city" class="form-control-chosen chosen-select">
         {else}
-        <div class="col-xl-0 col-lg-0 col-sm-12 dpd-city-block dpd-select-wrapper">
+        <div class="{if !($isOpcCheckout)}col-xl-0 col-lg-0 col-sm-12 {/if}dpd-city-block dpd-select-wrapper">
         <select name="dpd-city" style="display: none">
         {/if}
             {if !empty($city_list)}
@@ -40,7 +40,7 @@
         </div>
     </div>
 
-    <div class="col-xl-6 col-lg-6 col-sm-12 dpd-city-block dpd-input-wrapper js-pudo-search-street">
+    <div class="{if !($isOpcCheckout)}col-xl-6 col-lg-6 col-sm-12 {/if}dpd-city-block dpd-input-wrapper js-pudo-search-street">
         {include file='module:dpdbaltics/views/templates/hook/front/partials/pudo-search-street.tpl'}
     </div>
 </div>