wickes-css2 2.94.0-develop.13 → 2.94.0-develop.14

package/src/page_checkout_delivery-details-v2-oos.html

@@ -144,8 +144,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -155,7 +153,6 @@
 {{#content "foot" mode="append"}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
-    <script src="./js/checkout.min.js"></script>
 
 
     {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}

package/src/page_checkout_delivery-details-v2-wisdom-not-available.html

@@ -126,9 +126,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -160,5 +157,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_delivery-details-v2-wisdom.html

@@ -123,9 +123,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -157,5 +154,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_delivery-details-with-loader-v2.html

@@ -119,8 +119,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -130,7 +128,6 @@
 {{#content "foot" mode="append"}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
-    <script src="./js/checkout.min.js"></script>
 
     {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
         {{#content "body"}}

package/src/page_checkout_delivery-details_guest-new.html

@@ -117,8 +117,6 @@
         </button>
     </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -127,7 +125,6 @@
 
 {{#content "foot" mode="append"}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
-    <script src="./js/checkout.min.js"></script>
 
   {{#extend "modal" classMod="edit-delivery-address" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
   {{#content "body"}}
@@ -147,5 +144,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_delivery_address-asm-new.html

@@ -24,8 +24,6 @@
     </div>
   </div>
 
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Delivery Details</button>
   </div>
@@ -35,7 +33,6 @@
 {{#content "foot" mode="append"}}
   <script defer src="./js/page/checkout-confirmation-new.js"></script>
   <script defer src="./js/page/select-address.js"></script>
-  <script src="./js/checkout.min.js"></script>
 
   {{#extend "modal" classMod="edit-delivery-address" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
     {{#content "body"}}
@@ -51,4 +48,3 @@
 
 {{/content}}
 {{/extend}}
-

package/src/page_checkout_next-day-delivery-details.html

@@ -126,9 +126,6 @@
   </button>
 </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
 <div class="continue-btn">
   <button class="btn btn-action">Continue to Payment Details</button>
 </div>
@@ -138,7 +135,6 @@
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/checkout-confirmation-new.js"></script>
 <script defer src="./js/page/select-address.js"></script>
-<script src="./js/checkout.min.js"></script>
 
 {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
 {{#content "body"}}
@@ -157,5 +153,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_checkout_payment-details-v2.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}

package/src/page_checkout_payment-details_guest-with-checkout-journey.html

@@ -61,8 +61,6 @@
         </div>
     </div>
 
-    {{> checkout_voucher_large  title="Voucher Code"}}
-
     <div class="continue-btn">
         <button class="btn btn-action">Continue to Payment Details</button>
     </div>

package/src/page_checkout_payment-details_login-with-checkout-journey.html

@@ -61,8 +61,6 @@
         </div>
     </div>
 
-    {{> checkout_voucher_large  title="Voucher Code"}}
-
     <div class="continue-btn">
         <button class="btn btn-action">Continue to Payment Details</button>
     </div>

package/src/page_checkout_rapid-delivery-details.html

@@ -128,9 +128,6 @@
         </button>
     </div>
 
-
-{{> checkout_voucher_large  title="Voucher Code"}}
-
   <div class="continue-btn">
       <button class="btn btn-action">Continue to Payment Details</button>
   </div>
@@ -140,7 +137,6 @@
 {{#content "foot" mode="append"}}
     <script defer src="./js/page/checkout-confirmation-new.js"></script>
     <script defer src="./js/page/select-address.js"></script>
-    <script src="./js/checkout.min.js"></script>
 
     {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
         {{#content "body"}}
@@ -159,5 +155,3 @@
 
 {{/content}}
 {{/extend}}
-
-

package/src/page_klarna_payment-details_with-klarna.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Klarna" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Klarna" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}
@@ -18,15 +18,12 @@
 
 
 {{#content "main"}}
-
-
-
     <div class="delivery-block">
         <h3 class="delivery-block__heading">Delivery Information</h3>
         <apple-pay-button buttonstyle="black" type="buy" locale="en-GB"></apple-pay-button>
         <div class="delivery-block__wrapper">
             {{#with checkoutOrder.deliveryPayments.[0]}}
-                <div class="checkout-order">        
+                <div class="checkout-order">
                     {{> checkout-order-block}}
                 </div>
             {{/with}}
@@ -37,7 +34,7 @@
         <h3 class="click-collect-block__heading">Click & Collect</h3>
         <div class="click-collect-block__wrapper">
           {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
-            <div class="checkout-order">        
+            <div class="checkout-order">
                 {{> checkout-order-block}}
             </div>
           {{/with}}

package/src/page_payment-details-with-clearpay.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
 
 {{#content "head" mode="append"}}
 <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">

package/src/page_payment-details_with_apple-pay.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new payment-details" title="Checkout - Payment details with Apple Pay" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new payment-details page_checkout" title="Checkout - Payment details with Apple Pay" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}

package/src/page_payment-details_with_google-pay.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}

package/src/page_shopping-cart-v2.html

@@ -19,15 +19,14 @@
   {{/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">
@@ -41,16 +40,7 @@
       {{/each}}
     </section>
   {{/each}}
-  {{> 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"}}
+{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>

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

@@ -1,16 +1,45 @@
 @import '../helpers/helpers';
 
 .checkout-action {
-  margin-top: 5px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid $gray;
+  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;
+    }
+  }
 
   & .btn-checkout {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 40px;
-    margin-bottom: 20px;
+    height: 42px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.5rem;
 
     .icon {
       padding-left: 5px;
@@ -27,18 +56,21 @@
 
       & .paypal-button {
         padding-top: 0;
+        height: 42px;
       }
 
       & .paypal-button-text {
         padding-left: 3px;
-        font-size: .875rem;
+        font-size: 1rem;
         font-weight: 500;
+        line-height: 1rem;
       }
     }
   }
 
   &__wrapper {
     order: -2;
+    background-color: $white;
 
     &.large {
       order: inherit;
@@ -51,6 +83,30 @@
     &.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 {
@@ -93,6 +149,66 @@
   }
 }
 
+@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 {
@@ -105,8 +221,13 @@
 
 @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;
@@ -115,6 +236,7 @@
 
       &.mounted {
         display: block;
+        padding: 0;
         padding-top: 15px;
         background: $white;
 
@@ -122,6 +244,10 @@
           border-bottom: 0;
         }
       }
+
+      &.mobile {
+        display: none;
+      }
     }
 
     &__large {