wickes-css2 2.94.0-order-summary.3 → 2.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-order-summary.3",
+  "version": "2.94.0",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/checkout-action.hbs

@@ -1,15 +1,14 @@
-<div class="checkout-action__wrapper {{lookup . "mod"}} {{view}}">
+<div class="checkout-action__wrapper {{mod}}">
     {{#if head}}
         {{> checkout-section-title title=head}}
     {{/if}}
-    <div class="checkout-action {{#if container}}container{{/if}}">
+    <div class="checkout-action">
         <div class="checkout-action__section">
             <a href="#" class="btn btn_full btn-action btn-checkout">
-              <span class="btn-wickes-checkout__label checkout-text--mixed">Checkout</span>
-              <span class="btn-wickes-checkout__label checkout-text--collect">Wickes Checkout</span>
-              <span class="icon">
-                <i class="fas fa-arrow-right"></i>
-              </span>
+                Checkout
+                <span class="icon">
+                  <i class="fas fa-arrow-right"></i>
+                </span>
             </a>
         </div>
         <div class="checkout-action__section checkout-widget__basket-block">
@@ -24,15 +23,13 @@
                         </div>
                     </div>
                 </a>
-              {{#unless hidePaypalEmail}}
                 <div class="pay-pal_container-email">
-                  <div class="pay-pal_email-heading">Your PayPal email: </div>
-                  <div class="pay-pal_email-value">John.doe@gmail.com</div>
-                  <div class="pay-pal_email-link">
-                    <a href="#" title="" target="_blank">Don't use this email</a>
-                  </div>
+                    <div class="pay-pal_email-heading">Your PayPal email: </div>
+                    <div class="pay-pal_email-value">John.doe@gmail.com</div>
+                    <div class="pay-pal_email-link">
+                        <a href="#" title="" target="_blank">Don't use this email</a>
+                    </div>
                 </div>
-              {{/unless}}
             </div>
         </div>
     </div>

package/src/components/checkout_order-summary-new.hbs

@@ -12,13 +12,12 @@
             {{/each}}
         {{else}}
             {{#each info}}
-                <li class="checkout-widget__item {{#if (lookup this "mod")}}checkout-widget__item-{{lookup this "mod"}}{{/if}}">
+                <li class="checkout-widget__item {{#if mod}}checkout-widget__item-{{mod}}{{/if}}">
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
             {{/each}}
         {{/if}}
-        {{> checkout-voucher-accordion id=id}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
             <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
@@ -36,7 +35,6 @@
             </li>
         {{/if}}
     </ul>
-  {{#unless mobile}}
     <div class="checkout-widget__total">
         {{#if confirmationSummary}}
             <div> {{ confirmation-summary.total.title }}</div>
@@ -46,5 +44,5 @@
             <div class="checkout-widget__total-value">{{ total.value }}</div>
         {{/if}}
     </div>
-  {{/unless}}
+
 </div>

package/src/components/checkout_voucher_large.hbs

@@ -1,23 +1,19 @@
 <div class="voucher">
-  {{#if title}}
-    {{> checkout-section-title}}
-  {{/if}}
-  <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
-    <form id="form-checkout-voucher{{id}}">
-      {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code" info=""}}
-      <button class="voucher__btn btn btn-primary">
-        <span class="btn__text">Apply</span>
-      </button>
-    </form>
-  </div>
-  {{#unless voucherApplied}}
-    <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
-      <div class="voucher-applied__inner">
-      <span class="icon icon__check">
-        <i class="fas fa-check-circle"></i>
-      </span>
-        <h5 class="heading-5 text-center">Voucher has been applied</h5>
-      </div>
+    {{#if title}}
+        {{> checkout-section-title}}
+    {{/if}}
+    <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
+        <form id="form-checkout-voucher{{id}}">
+            {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code"}}
+            <button class="voucher__btn btn btn-secondary btn_full">
+                <span class="btn__text">Apply</span>
+            </button>
+        </form>
     </div>
-  {{/unless}}
+    {{#unless voucherApplied}}
+        <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
+            <i class="fas fa-check-circle"></i>
+            <h3 class="heading-3 text-center">Voucher has been applied</h3>
+        </div>
+    {{/unless}}
 </div>

package/src/components/order-summary.hbs

@@ -1,101 +1,66 @@
-{{#if basket}}
-<div class="summary summary--mobile d-lg-none" id="summary-mobile-{{id}}">
-  {{> summary-mobile-bar}}
-  <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}">
-
-    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
-    {{#unless basket}}
-      <div class="summary__payment footer-checkout">
-        {{#unless merged}}
-          {{#if paymentsCheckoutV2}}
-            <div class="footer-checkout-holder footer-checkout-holder--payways">
-              {{> payments-checkout-v2}}
-            </div>
-          {{else}}
-            <div class="footer-checkout-holder">
-              {{> payments-checkout clearPayIcon="true"}}
-              <span class="footer-checkout__copyright">
-                        Copyright ©
-                        <span class="current-year"></span> Wickes.co.uk
-                      </span>
-            </div>
-          {{/if}}
-        {{else}}
-          <div class="summary__payment-message">
-            <p class="summary__payment-main">{{vat-message.main}}</p>
-            <p class="summary__payment-additional">{{vat-message.additional}}</p>
-          </div>
-        {{/unless}}
-      </div>
-    {{/unless}}
-  </div>
-</div>
-{{/if}}
-
-
 <div class="summary {{#if mod}}summary-large{{/if}} {{#if paymentsCheckoutV2 }}summary--payways{{/if}}">
-  {{> checkout-section-title}}
-  {{#if mod}}
-    <div class="summary__accordion collapsed"
-         data-toggle="collapse"
-         data-target="#checkout-details-accordion-{{id}}"
-    >
-      <span class="summary__accordion-text">Show full summary</span>
-      <span class="icon summary-icon-small">
+    {{> checkout-section-title}}
+    {{#if mod}}
+        <div class="summary__accordion collapsed"
+              data-toggle="collapse"
+              data-target="#checkout-details-accordion-{{id}}"
+        >
+            <span class="summary__accordion-text">Show full summary</span>
+            <span class="icon summary-icon-small">
                 <i class="fas fa-angle-up"></i>
             </span>
-    </div>
-  {{/if}}
-  <div class="summary__aside">
-    {{> checkout_order-summary-new head=title mod=mod id=id}}
-
-    {{#if klarna-placement}}
-      <div class="summary__klarna">
-        <klarna-placement
-            data-key="credit-promotion-badge"
-            data-locale="en-GB"
-            data-purchase-amount="12000"
-        ></klarna-placement>
-      </div>
+        </div>
     {{/if}}
-    {{#if clearpay-placement}}
-      {{> clearpay applyMargin=true hasKlarna=true}}
-    {{/if}}
-    {{#unless basket}}
-      <div class="summary__payment footer-checkout">
-        {{#unless merged}}
-          {{#if paymentsCheckoutV2 }}
-            <div class="footer-checkout-holder footer-checkout-holder--payways">
-              {{> payments-checkout-v2 }}
+    <div class="summary__aside">
+        {{> checkout_order-summary-new head=title mod=mod id=id}}
+
+        {{#if klarna-placement}}
+            <div class="summary__klarna">
+                <klarna-placement
+                    data-key="credit-promotion-badge"
+                    data-locale="en-GB"
+                    data-purchase-amount="12000"
+                ></klarna-placement>
             </div>
-          {{else}}
-            <div class="footer-checkout-holder">
-              {{> payments-checkout clearPayIcon="true" }}
-              <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
+        {{/if}}
+        {{#if clearpay-placement}}
+            {{> clearpay applyMargin=true hasKlarna=true}}
+        {{/if}}
+        {{#unless basket}}
+            <div class="summary__payment footer-checkout">
+                {{#unless merged}}
+                  {{#if paymentsCheckoutV2 }}
+                    <div class="footer-checkout-holder footer-checkout-holder--payways">
+                      {{> payments-checkout-v2 }}
+                    </div>
+                  {{else}}
+                    <div class="footer-checkout-holder">
+                      {{> payments-checkout clearPayIcon="true" }}
+                      <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
+                    </div>
+                  {{/if}}
+                {{else}}
+                    <div class="summary__payment-message">
+                        <p class="summary__payment-main">{{vat-message.main}}</p>
+                        <p class="summary__payment-additional">{{vat-message.additional}}</p>
+                    </div>
+                {{/unless}}
             </div>
-          {{/if}}
-        {{else}}
-          <div class="summary__payment-message">
-            <p class="summary__payment-main">{{vat-message.main}}</p>
-            <p class="summary__payment-additional">{{vat-message.additional}}</p>
-          </div>
         {{/unless}}
-      </div>
-    {{/unless}}
-  </div>
-
-  {{#if basket-id}}
-    <div class="summary__basked-id">
-      Basket ID: <span class="id-number">136589003</span>
     </div>
-  {{/if}}
 
-  {{#if email}}
-    <div class="summary__email">
-      <h3 class="heading-3">Email</h3>
-      <div class="summary__email-info">
-        Examplemail@wickes.co.uk
-      </div>
-    </div>
-  {{/if}}
+    {{#if basket-id}}
+        <div class="summary__basked-id">
+            Basket ID: <span class="id-number">136589003</span>
+        </div>
+    {{/if}}
+
+    {{#if email}}
+        <div class="summary__email">
+            <h3 class="heading-3">Email</h3>
+            <div class="summary__email-info">
+                Examplemail@wickes.co.uk
+            </div>
+        </div>
+    {{/if}}
 </div>

package/src/js/components/general/switchVat.js

@@ -54,8 +54,7 @@ Wick.VatToggle = {
   },
 
   isToggleVatAvailable: function() {
-    //TODO: remove true
-    return true;
+    return window.ACC.app.isVatToggleAvailable;
   },
 
   isOn: function () {

package/src/js/emulation/basket-data.js

@@ -43,7 +43,7 @@ Wick.BasketData = (function () {
       "status": 400,
       "responseJSON": {
         "globalMessage": {
-          "message": "Delivery is already free.\nCoupon can’t be applied."
+          "message": "Delivery is already free. Coupon can’t be applied",
         }
       }
     },
@@ -443,8 +443,8 @@ Wick.BasketData = (function () {
       "appliedProductPromotions": [],
       "appliedOrderPromotions": [],
       "promotionsInfo": null,
-      "clickAndCollectOnly": false,
-      "deliveryItemsQuantity": 1,
+      "clickAndCollectOnly": true,
+      "deliveryItemsQuantity": 0,
       "pickupItemsQuantity": 2,
       "freeDelivery": false,
       "subtotalWithoutCharity": {"value": 19.0, "formattedValue": "£19.00", "currencyIso": "GBP", "formattedPriceWithoutCurrencySymbol": "19.00"},

package/src/js/page/basket-v2.js

@@ -29,7 +29,6 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
-import {addClassToSummaryAside} from "./basket/summary-mobile";
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -1293,7 +1292,6 @@ $(document).ready(function () {
         $(Wick.BasketPage.el.voucherRemove).unbind('click');
         Wick.BasketPage.paintActionButton();
         Wick.BasketPage.updateCart(...Array(3), true);
-        addClassToSummaryAside(Wick.BasketData.updateCart);
         setDefaultCharityValue();
         if (!$(Wick.BasketPage.el.loader).length) {
             appendLoader(Wick.BasketPage.loaderPayload);

package/src/js/page/components/order-summary.js

@@ -1,5 +1,4 @@
 import {updateDiscount} from "./discounts";
-import {addClassToSummaryAside} from "../basket/summary-mobile";
 
 const osEl = {
     $summarySection: $('.summary'),
@@ -10,9 +9,9 @@ const osEl = {
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
     summaryDelivery: '.checkout-widget__item-delivery',
-    summaryMobileTotal: '.summary__mobile-bar-total',
 }
 
+
 export function updateOrderSummary(data, equalMap, isVoucher) {
     equalMap.forEach((obj) => {
         if ($(obj.item).length) {
@@ -33,13 +32,9 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
         }
     })
 
-    const value = data.totalPrice?.formattedValue || data.total;
-
     updateDiscount(data, isVoucher);
     hideUnusedDeliveryTypeCost(data, isVoucher);
     calculateFreeDelivery(data);
-    updateSummaryMobileBarTotal(value);
-    addClassToSummaryAside(data);
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -102,6 +97,3 @@ function calculateFreeDelivery(data) {
     })
 }
 
-function updateSummaryMobileBarTotal(formattedValue) {
-    $(osEl.summaryMobileTotal).text(formattedValue);
-}

package/src/js/page/components/voucher.js

@@ -15,7 +15,7 @@ const voucherEl = {
     formInvalid: 'form_invalid',
     fieldRow: '.form-row[data-row-required]',
     rowValidationError: 'form-row_validation-error',
-    voucherHide: 'checkout-voucher-hide',
+    voucherHide: '.checkout-voucher-hide',
     fieldError: '.form-row__error',
     subtotal: '.checkout-widget__item-bold',
     vat: '.checkout-widget__item-vat',

package/src/layouts/basket-new.hbs

@@ -38,7 +38,7 @@
       {{#block "prefooter"}}{{/block}}
     </main>
     {{#block "footer"}}
-      {{> footer-checkout-v2}}
+      {{> footer-checkout-v2 }}
     {{/block}}
     {{#block "foot"}}
       {{> scripts }}

package/src/page_shopping-cart-v2.html

@@ -19,14 +19,15 @@
   {{/content}}
 {{#content "aside"}}
   {{> order-summary
-  shopping-cart-v2.checkout
-  id=1
-  title="Order Summary"
-  basket=true
+    shopping-cart-v2.checkout
+    id=1
+    title="Order Summary"
+    basket=true
   }}
   {{> checkout-action  mod="mounted"}}
-  {{> checkout-action  mod="mounted" view="mobile"}}
   {{> summary-payment paymentsCheckoutV2=true}}
+  {{> checkout_voucher_large  title="Voucher Code" id="1"}}
+  {{> checkout-action  mod="large checkout-action-payways"}}
 {{/content}}
 {{#content "main"}}
   <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
@@ -40,7 +41,16 @@
       {{/each}}
     </section>
   {{/each}}
-{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
+  {{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
+  {{> checkout_voucher_large  title="Voucher Code" id="2"}}
+  {{> order-summary
+    shopping-cart-v2.checkout
+    title="Order Summary"
+    id=2
+    mod="large"
+    basket=true
+  }}
+  {{> checkout-action mod="checkout-action-payways"}}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>

package/src/scss/components/_checkout-action.scss

@@ -1,45 +1,16 @@
 @import '../helpers/helpers';
 
 .checkout-action {
-  padding: 15px 15px 24px;
-
-  .btn-checkout {
-    .checkout-text--mixed {
-      display: none;
-    }
-
-    .checkout-text--collect {
-      display: inline;
-    }
-  }
-
-  &:not(:has(.checkout-widget__basket-block)) {
-    .btn-checkout {
-      .checkout-text--mixed {
-        display: inline;
-      }
-
-      .checkout-text--collect {
-        display: none;
-      }
-    }
-  }
-
-  &:not(:has(.checkout-widget__basket-block)) {
-    .btn-checkout {
-      margin-bottom: 0;
-    }
-  }
+  margin-top: 5px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid $gray;
 
   & .btn-checkout {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 42px;
-    margin-bottom: 10px;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 1.5rem;
+    height: 40px;
+    margin-bottom: 20px;
 
     .icon {
       padding-left: 5px;
@@ -56,21 +27,18 @@
 
       & .paypal-button {
         padding-top: 0;
-        height: 42px;
       }
 
       & .paypal-button-text {
         padding-left: 3px;
-        font-size: 1rem;
+        font-size: .875rem;
         font-weight: 500;
-        line-height: 1rem;
       }
     }
   }
 
   &__wrapper {
     order: -2;
-    background-color: $white;
 
     &.large {
       order: inherit;
@@ -83,30 +51,6 @@
     &.mounted {
       display: none;
     }
-
-    &.mobile {
-      display: block;
-      position: static;
-      order: 1;
-
-      .checkout-action {
-        margin-top: 20px;
-        padding: 0;
-        padding-bottom: 20px;
-
-        .btn-checkout {
-          margin-bottom: 20px;
-        }
-
-        &:not(:has(.checkout-widget__basket-block)) {
-          padding-bottom: 0;
-
-          .btn-checkout {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
   }
 
   &__large {
@@ -149,66 +93,6 @@
   }
 }
 
-@include media-breakpoint-up(sm) {
-
-  .checkout-action {
-    margin-top: 0;
-    padding: 0;
-    border-bottom: 0;
-
-    &__wrapper {
-      padding: 20px 0 24px;
-      background-color: $white;
-      order: -2;
-
-      &.large {
-        order: inherit;
-
-        .checkout-action {
-          margin-top: 20px;
-        }
-      }
-
-      &.mounted {
-        display: none;
-      }
-
-      &.mobile {
-        display: block;
-        position: static;
-        order: 1;
-        padding: 0;
-
-        .checkout-action {
-          margin-top: 20px;
-          padding: 0;
-          padding-bottom: 20px;
-
-          .btn-checkout {
-            margin-bottom: 20px;
-          }
-
-          &:not(:has(.checkout-widget__basket-block)) {
-            padding-bottom: 0;
-
-            .btn-checkout {
-              margin-bottom: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .checkout-action .btn-checkout {
-    margin-bottom: 10px;
-  }
-
-  .checkout-action--single .btn-checkout {
-    margin-bottom: 0;
-  }
-}
-
 @include media-breakpoint-up(md) {
   .checkout-action {
     .pay-pal_wrap {
@@ -221,13 +105,8 @@
 
 @include media-breakpoint-up(lg) {
   .checkout-action {
-    margin-top: 5px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid $gray;
-
     &__wrapper {
       order: inherit;
-      position: static;
 
       &.large {
         order: -2;
@@ -236,7 +115,6 @@
 
       &.mounted {
         display: block;
-        padding: 0;
         padding-top: 15px;
         background: $white;
 
@@ -244,10 +122,6 @@
           border-bottom: 0;
         }
       }
-
-      &.mobile {
-        display: none;
-      }
     }
 
     &__large {