wickes-css2 2.109.0-develop.3 → 2.109.0-gift-cards.1

package/src/page_product-details-mfe-calculator.html

@@ -3,14 +3,13 @@ isDiscount=true
 isSQM=true
 isDescription=false
 isCashback=false
-isSize=false
+isSize=true
 isGuide=true
-isQuantity=true
 hourly-delivery=true
 badge-text='15% off'
 badge-color='yellow'
 badge-text-color='gray'
-currentlyInStock=false
+currentlyInStock=true
 pagePdp=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
@@ -82,10 +81,6 @@ pagePdp=true
                 more-stores-present=true
                 mfeProductCalculator=true
                 default-store=true
-                isExcludingDelivery=true
-                notifyMe=true
-                klarna-placement=true
-                clearpay-placement=true
                 }}
                 {{> fulfilment-accordions }}
             </div>
@@ -126,8 +121,7 @@ pagePdp=true
 <script type="text/html" id="mini-basket-popup">
     {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
 </script>
-{{> modals/notify-me-modal mod="modal-notify-me"}}
-<script defer src="./js/pdp.bundle.min.js"></script>
+<script defer src="./js/page/pdp.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
 {{> click-and-collect-modal pdp=pdp}}
 {{> wisdom-modal-mcfc }}

package/src/scss/common/_CTAs.scss

@@ -11,7 +11,7 @@
 .btn {
   position: relative;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all .2s ease;
 
   &_full {
     @include button-full;
@@ -34,7 +34,7 @@
     :focus > &,
     :active > & {
       color: $white;
-      opacity: 0.6;
+      opacity: .6;
       bottom: auto; //IE fix
     }
   }
@@ -55,10 +55,6 @@
   @include button-primary;
 }
 
-.btn-outline-primary {
-  @include button-outline-primary;
-}
-
 .btn-secondary {
   @include button-secondary;
 }
@@ -89,7 +85,7 @@
 }
 
 .btn-pending {
-  @include button-pending;
+  @include button-pending
 }
 
 .btn--icon {

package/src/scss/components/_custom-slider.scss

@@ -501,24 +501,6 @@
               }
             }
           }
-
-          &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
-            padding-bottom: 0;
-          }
-
-          &-delivery-cost-message {
-            margin-top: 4px !important;
-            padding-top: 0;
-            justify-content: flex-end;
-
-            #order-delivery-cost-message {
-              @include font-size(10);
-              @include line-height(12);
-
-              font-weight: 700;
-              color: $squant;
-            }
-          }
         }
 
         &__details-discount {

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -248,50 +248,16 @@
       height: auto;
     }
   }
-
-  .rapid-info-icon {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: bottom;
-    pointer-events: auto;
-    margin-left: 4px;
-    cursor: pointer;
-    color: $white;
-    font-size: 1rem;
-
-    [data-prefix='fas'],
-    [data-prefix='far'] {
-      color: $white;
-    }
-
-    &:hover {
-      opacity: 0.8;
-
-      [data-prefix='far'] {
-        color: $white;
-      }
-    }
-  }
-
-  &__image {
-    position: absolute;
-    right: 12px;
-  }
 }
 
 .delivery-container {
   .btn.btn_full {
     display: flex;
-    padding: 16px 12px;
+    padding: 16px 20px;
     align-items: center;
     justify-content: center;
     border: 0;
     border-radius: 0;
-    position: relative;
-
-    &:has(.delivery-btn__image:not(.d-none)) {
-      padding: 16px 64px 16px 12px;
-    }
   }
 }
 
@@ -305,14 +271,6 @@
   }
 }
 
-@include media-breakpoint-only(sm) {
-  .delivery-types .delivery-container {
-    .subtitle br {
-      display: none;
-    }
-  }
-}
-
 @include media-breakpoint-up(md) {
   .date-selection {
     .delivery-date,

package/src/scss/components/_gift-cards.scss

@@ -5,7 +5,7 @@
 }
 
 .giftcard {
-  border: 1px solid $gray;
+  border: 1px solid $gray-light;
   border-radius: 4px;
   background: $white;
   padding: 12px 16px;
@@ -18,6 +18,17 @@
       margin-bottom: 0;
     }
   }
+
+  &--disabled {
+    .giftcard-inline__title {
+      color: $blue-disabled;
+    }
+
+    .giftcard-add,
+    .giftcard-add__text {
+      color: $blue-disabled;
+    }
+  }
 }
 
 .giftcard-add {
@@ -28,9 +39,27 @@
   text-decoration: none;
   cursor: pointer;
 
+  &__icon-wrap {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 24px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &__icon {
-    width: 16px;
-    height: 16px;
+    display: block;
+    line-height: 1;
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+
+  &__icon.svg-inline--fa {
+    width: 14px;
+    height: 14px;
   }
 
   &__text {

package/src/scss/components/_order-summary.scss

@@ -1,6 +1,6 @@
 @import '../helpers/helpers';
 
-$android-offset: 60px !default;
+$android-offset:   60px !default;
 $ios-notch-offset: 80px !default;
 
 .summary {
@@ -9,7 +9,7 @@ $ios-notch-offset: 80px !default;
     background: $gray-bg;
     margin: 0 auto;
     z-index: $summary-aside;
-    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
+    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
 
     & .form-row__col-btn {
       padding-right: 0;
@@ -55,7 +55,7 @@ $ios-notch-offset: 80px !default;
 
     &-message {
       padding-bottom: 20px;
-      font-size: 0.75rem;
+      font-size: .75rem;
     }
 
     &-main {
@@ -93,7 +93,7 @@ $ios-notch-offset: 80px !default;
     align-items: center;
     width: 24px;
     height: 24px;
-    transition: transform 0.3s ease;
+    transition: transform .3s ease;
     transform: rotate(180deg);
 
     &-up,
@@ -149,7 +149,7 @@ $ios-notch-offset: 80px !default;
   }
 
   .checkout-widget__item-vat {
-    font-size: 0.875rem;
+    font-size: .875rem;
     margin: 0;
     padding: 0;
   }
@@ -158,25 +158,11 @@ $ios-notch-offset: 80px !default;
     text-align: right;
   }
 
-  .checkout-widget__item-cc,
-  .checkout-widget__item-delivery {
+  .checkout-widget__item-cc, .checkout-widget__item-delivery {
     font-size: 1rem;
     margin-top: 5px;
   }
 
-  .checkout-widget__item-delivery-cost-message {
-    margin-top: 4px;
-    justify-content: flex-end;
-
-    #order-delivery-cost-message {
-      @include font-size(10);
-      @include line-height(12);
-
-      font-weight: 700;
-      color: $squant;
-    }
-  }
-
   .checkout-widget__total {
     display: flex;
     justify-content: space-between;
@@ -197,7 +183,7 @@ $ios-notch-offset: 80px !default;
     right: 0;
     overflow: hidden;
     display: block !important;
-    transition: height 0.3s ease-in-out;
+    transition: height .3s ease-in-out;
     max-height: calc(100vh - 177px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -232,12 +218,12 @@ $ios-notch-offset: 80px !default;
   .collapsing {
     height: 0;
     overflow: hidden;
-    transition: height 0.3s ease-in-out;
+    transition: height .3s ease-in-out;
   }
 
   .collapse.show {
     height: auto;
-    transition: height 0.3s ease-in-out;
+    transition: height .3s ease-in-out;
   }
 }
 
@@ -247,7 +233,7 @@ $ios-notch-offset: 80px !default;
   left: 0;
   right: 0;
   z-index: $summary-mobile-bar;
-  transition: transform 0.3s ease;
+  transition: transform .3s ease;
 }
 
 .summary__mobile-order {
@@ -259,7 +245,7 @@ $ios-notch-offset: 80px !default;
   height: 44px;
   cursor: pointer;
   color: $white;
-  transition: transform 0.3s ease;
+  transition: transform .3s ease;
 }
 
 .summary:not(.summary--mobile) {
@@ -330,6 +316,7 @@ $ios-notch-offset: 80px !default;
           display: none;
         }
       }
+
     }
 
     .checkout-widget.checkout-widget_order-summary {

package/src/scss/components/_payments-checkout.scss

@@ -54,7 +54,7 @@
 
       &--small {
         flex-wrap: wrap;
-        padding: 0 25px;
+        padding: 0 40px;
       }
     }
 
@@ -79,7 +79,7 @@
 .basket {
   .summary__payment.footer-checkout {
     .payments-checkout__list--small {
-      padding: 0 45px;
+      padding: 0 60px;
     }
   }
 }

package/src/scss/components/_payments-v2.scss

@@ -5,7 +5,7 @@
   margin: 0 auto;
   width: 100%;
   padding-bottom: 24px;
-  max-width: 256px;
+  max-width: 301px;
 
   &__title {
     font-weight: 500;

package/src/scss/components/_price-block-critical.scss

@@ -21,13 +21,13 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 12px 0;
+    padding: 10px 0;
 
     p {
       margin-bottom: 0;

package/src/scss/components/_price-block.scss

@@ -15,7 +15,7 @@
   }
 
   .pdp-price__from {
-    font-size: 0.6em;
+    font-size: .6em;
     margin-right: 4px;
   }
 
@@ -32,29 +32,18 @@
 
   .pdp-price__oos {
     border-top: 1px solid $gray;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
 
     & + .pdp-price__controls,
     &:last-child {
       margin-bottom: 0;
     }
-
-    .btn--notify-open {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 12px;
-
-      .fa-bell {
-        @include font-size(18);
-      }
-    }
   }
 
   .pdp-price__value_extended,
   .pdp-price__oos,
   .pdp-price__in-store-only {
-    padding: 12px 0;
+    padding: 10px 0;
 
     p {
       margin-bottom: 0;
@@ -261,6 +250,7 @@
           border-bottom-color: $red;
         }
       }
+
     }
   }
 

package/src/scss/components/card-product-banner.scss

@@ -36,10 +36,6 @@
     }
   }
 
-  &__picture {
-    display: flex;
-  }
-
   &__image {
     display: inline-block;
     width: 100%;
@@ -61,10 +57,6 @@
       padding: 0 15px;
     }
 
-    &__picture {
-      display: flex;
-    }
-
     &__image {
       display: inline-block;
       width: 100%;

package/src/scss/helpers/_CTAs.scss

@@ -47,16 +47,6 @@
   }
 }
 
-@mixin button-outline-primary {
-  &:active,
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $white;
-    background-color: $blue-darker;
-    border-color: $blue-darker;
-  }
-}
-
 @mixin button-secondary {
   background-color: $white;
   border-color: $blue;
@@ -227,7 +217,7 @@
     bottom: 0;
     border-radius: 34px;
     background-color: $gray;
-    transition: 0.4s;
+    transition: .4s;
 
     &:before {
       position: absolute;
@@ -238,7 +228,7 @@
       bottom: 4px;
       border-radius: 50%;
       background-color: $white;
-      transition: 0.4s;
+      transition: .4s;
     }
   }
 
@@ -391,7 +381,7 @@
   width: 100%;
   max-width: 110px;
   height: 110px;
-  transition: all 0.3s;
+  transition: all .3s;
   padding: 10px;
 
   svg {
@@ -406,7 +396,7 @@
     color: $blue-dark;
     margin-bottom: 0;
     font-weight: 400;
-    font-size: 0.75rem;
+    font-size: .75rem;
     line-height: 1rem;
     margin-top: 10px;
   }
@@ -448,6 +438,6 @@
   &:disabled,
   &[disabled] {
     pointer-events: none;
-    opacity: 0.4;
+    opacity: .4;
   }
 }

package/src/scss/helpers/_variables.scss

@@ -33,6 +33,8 @@ $error-bg: #fcf2f3; // Error notification background colour
 $positive: #8dc63f; // Positive colour
 $negative: #ed1c24; // Negative colour
 $blue-badge: #019ee3;
+$blue-disabled: mix(#fff, $blue, 60%);  // Disabled overlay (white 60% over $blue)
+$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
 $pacific-depths: #004587;
 $line-through: #242424;

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -192,6 +192,44 @@
       background-color: initial;
       padding: 0;
       margin: 0;
+
+      .checkout-payment {
+        &__card {
+          &-label {
+            font-weight: 700;
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+
+          &-value {
+            font-weight: 400;
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+        }
+
+        &__giftcard {
+          margin-bottom: 32px;
+
+          &-header {
+            font-weight: 700;
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+
+          &-label {
+            font-weight: 700;
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+
+          &-value {
+            font-weight: 400;
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+        }
+      }
     }
 
     &_order-summary {
@@ -214,6 +252,13 @@
           }
         }
 
+        &__item.checkout-widget__gift-card {
+          font-weight: 700;
+          font-size: 0.875rem;
+          line-height: 1.375rem;
+          margin-top: 16px;
+        }
+
         &__total {
           display: flex;
           justify-content: space-between;
@@ -230,7 +275,13 @@
     &.checkout-payment {
       .checkout-widget {
         &__details {
-          margin-bottom: 50px;
+          margin-bottom: 32px;
+
+          &.checkout-payment__card-details {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
 
           &__item {
             display: flex;
@@ -332,6 +383,8 @@
       &.checkout-payment {
         .checkout-widget {
           &__details {
+            margin-bottom: 40px;
+
             &__item {
               justify-content: space-between;
               margin-bottom: 0;
@@ -359,7 +412,8 @@
           &__apple,
           &__google,
           &__clearpay,
-          &__billie {
+          &__billie,
+          &__giftcard {
             flex-direction: row;
             justify-content: space-between;
           }
@@ -373,6 +427,36 @@
           &__google {
             margin-bottom: 30px;
           }
+
+          &__giftcard {
+            margin-bottom: 40px;
+
+            &-list {
+              display: flex;
+              flex-direction: column;
+              gap: 12px;
+            }
+
+            &-header {
+              align-items: center;
+              margin-bottom: 12px;
+            }
+
+            &-logo {
+              flex: 0 0 auto;
+
+              img {
+                height: 30px;
+                width: 48px;
+                display: block;
+              }
+            }
+
+            &-value {
+              text-align: right;
+              white-space: nowrap;
+            }
+          }
         }
       }
     }

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -49,23 +49,6 @@
                   font-size: 0.75rem;
                   margin-top: -15px;
                 }
-
-                &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
-                  margin-bottom: 0;
-                }
-
-                &-delivery-cost-message {
-                  margin-top: 4px;
-                  justify-content: flex-end;
-
-                  #order-delivery-cost-message {
-                    @include font-size(10);
-                    @include line-height(12);
-
-                    font-weight: 700;
-                    color: $squant;
-                  }
-                }
               }
 
               &__details-discount {
@@ -491,25 +474,6 @@
   }
 }
 
-.tooltip {
-  filter: drop-shadow(0 0 8px $black-transparent12);
-  position: absolute;
-
-  .tooltip-inner {
-    background: $white;
-    color: $gray-dark;
-    padding: 8px 16px !important;
-    border-radius: 4px;
-    font-weight: 400;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .arrow:before {
-    border-bottom-color: $white;
-  }
-}
-
 @include media-breakpoint-up(sm) {
   .page_checkout-delivery-new {
     .add-contact-details {