wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/page_tradePro-checkout-summary.html

@@ -54,237 +54,7 @@
       <div class="signup-tradepro__attach checkout-tradepro__attach_id">
         {{> attach-make make-attachment=true}}
         {{> modal id="attac"}}
-        {{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type"}}
-        {{#content "sections"}}
-
-        {{#extend "modal-body-section" customSectionClass="id-type-signup"}}
-        {{#content "body"}}
-        {{> notifications notification-page.warning withCloseBtn="true"
-        text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
-        <div class="signup-tradepro__modal-info">
-          Select two forms of ID.
-          <div class="tradepro-id-counter_wrap">
-            <span>1</span>
-            of
-            <span>2</span>
-          </div>
-          ID's chosen
-        </div>
-        <div class="signup-tradepro__modal-fields">
-          <div class="tradepro-field">
-                      <span class="icon icon__link inactive-el">
-                        <i class="far fa-link"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-            <span class="icon icon__pencil">
-                        <i class="far fa-pencil"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
-            <span class="icon icon__notification">
-                        <span class="fas fa-check-circle"></span>
-                      </span>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__link">
-                        <i class="far fa-link"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-            {{> attach-make make-capture=true}}
-            <input class="tradepro-attachment" type="file" accept="image/*" capture>
-          </div>
-          <div class="tradepro-field">
-            <img src="img/placeholders/thumbnail-sm.png"/>
-                      <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-            <span class="icon icon__camera">
-                        <i class="far fa-camera"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
-            <input class="tradepro-attachment" type="file" accept="image/*" capture>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__paperclip">
-                        <i class="far fa-paperclip"></i>
-                      </span>
-            <span class="icon icon__camera">
-                        <i class="far fa-camera"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
-            <input class="tradepro-attachment" type="file" accept="image/*" capture>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__edit">
-                        <i class="fas fa-edit"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="tradepro-field">
-                      <span class="icon icon__edit">
-                        <i class="fas fa-edit"></i>
-                      </span>
-            <a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
-            <div class="signup-tradepro__modal-action">
-              <div class="form-row" data-row-required="">
-                <label class="form-row__label"></label>
-                <div class="form-row__field">
-                  {{> input need-pattern=true}}
-                  <div class="form-row__error">{{error}}</div>
-                </div>
-              </div>
-              <div class="signup-tradepro__modal-buttons">
-                <div class="row">
-                  <div class="button-done">
-                    <button class="btn btn-primary">
-                      Done
-                    </button>
-                  </div>
-                  <div class="button-cancel">
-                    <button class="btn btn-secondary">
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        {{/content}}
-        {{/extend}}
-
-        {{/content}}
-        {{/extend}}
+        {{> modal-id-type }}
       </div>
       <div class="chosen-form-container">
         <div class="chosen-form-wrap">
@@ -335,8 +105,11 @@
 </div>
 {{/content}}
 {{#content "foot" mode="append"}}
+<script src="./js/pdf-preview.min.js"></script>
 <!--<script defer src="js/page/checkout-confirmation.js"></script>-->
 {{/content}}
 {{/extend}}
 
 {{> modal-capture }}
+{{> modal-pdf-preview }}
+{{> loader hidden=true modifier="basket-loader tradepro-id-loader"}}

package/src/page_tradePro-signup.html

@@ -44,6 +44,11 @@ text="Sorry, your TradePro application has already been submitted with this info
   </div>
 </div>
 {{/content}}
+{{#content "foot" mode="prepend"}}
+<script src="./js/pdf-preview.min.js"></script>
+{{/content}}
 {{/extend}}
 
 {{> modal-capture }}
+{{> modal-pdf-preview }}
+{{> loader hidden=true modifier="basket-loader tradepro-id-loader"}}

package/src/scss/common/_loading-button.scss

@@ -14,7 +14,9 @@
     background-color: $green;
     border: 1px solid $green;
 
-    &:focus {
+    &:hover,
+    &:focus,
+    &:active {
       background-color: $green;
     }
 

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

@@ -1,8 +1,20 @@
 .date-selection {
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  };
+
   &-hidden {
     display: none;
   }
 
+  .delivery-time {
+    &__rapid-hint {
+      border-top: 0;
+    }
+  }
+
   &__info-block {
     &-error {
       display: flex;
@@ -25,8 +37,7 @@
   }
 
   .calendar {
-    background: $white;
-    border: 0;
+    padding: 16px;
 
     &__head {
       margin-bottom: 20px;
@@ -189,8 +200,8 @@
     border: 0;
 
     .delivery-types {
-      padding: 0 0 10px;
       margin: 0;
+      padding: 0;
       background: initial;
 
       &__inner {
@@ -199,6 +210,10 @@
         }
       }
     }
+
+    .calendar {
+      border: 1px solid $gray;
+    }
   }
 }
 
@@ -286,6 +301,35 @@
       }
     }
   }
+
+  .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 {
@@ -324,12 +368,18 @@
 
 @include media-breakpoint-up(md) {
   .date-selection {
+    &__inner {
+      flex-direction: row;
+    };
+
     .delivery-date,
     .delivery-time {
       height: auto;
     }
 
     .calendar {
+      padding: 24px;
+
       &__message {
         padding: 50px 40px 70px;
       }

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

@@ -149,7 +149,7 @@
 
 .giftcard-applied {
   width: 100%;
-  border: 1px solid $gray-light;
+  border: 1px solid $gray;
   border-radius: 4px;
   background: $white;
   padding: 15px 16px;

package/src/scss/components/_id-type-modal.scss

@@ -71,6 +71,25 @@
             vertical-align: middle;
           }
         }
+
+        &__lock,
+        &__info {
+          font-size: 0.75rem;
+          color: $gray;
+          margin-right: 5px;
+          width: auto;
+        }
+      }
+
+      &__hint {
+        margin-top: 5px;
+        padding-left: 34px;
+        font-size: 0.75rem;
+        color: $gray-dark;
+
+        & + & {
+          margin-top: 10px;
+        }
       }
 
       .tradepro-attachment {
@@ -80,6 +99,20 @@
         cursor: pointer;
       }
 
+      &[data-pdf-preview-field] {
+        .tradepro-attachment {
+          top: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &--has-pdf {
+        .tradepro-attachment {
+          pointer-events: none;
+        }
+      }
+
       img {
         margin-right: 10px;
         width: 30px;
@@ -193,3 +226,9 @@
 .id-capture {
   padding-bottom: 30px;
 }
+
+// Full-page loader shown while an ID file uploads. The "Choose Type of ID"
+// modal is open at that point, so it has to sit above the modal.
+.tradepro-id-loader {
+  z-index: $zindex-modal + 10;
+}

package/src/scss/components/_image-accordion.scss

@@ -0,0 +1,54 @@
+.image-accordion {
+  padding-bottom: 8px;
+  border-bottom: 1px solid $gray;
+
+  &__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    & img {
+      flex-basis: calc((100% - 40px) / 6);
+      min-width: 45px;
+    }
+  }
+
+  &__content {
+    margin-bottom: 8px;
+  }
+
+  &__header {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 32px;
+    color: $blue;
+    cursor: pointer;
+
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 18px;
+  }
+
+  &:not(.image-accordion--collapsed) {
+    .image-accordion__preview {
+      display: none;
+    }
+  }
+
+  &--collapsed {
+    & .image-accordion__header {
+      & > .image-accordion__icon {
+        & > .fa-angle-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_kitchen-card.scss

@@ -49,6 +49,7 @@
 
   &__title {
     margin-bottom: 0;
+    user-select: none;
   }
 
   &__parameters {

package/src/scss/components/_map.scss

@@ -160,3 +160,41 @@
 .map-container img {
   max-width: none;
 }
+
+// Google Maps InfoWindow overrides
+.gm {
+  &-style-iw {
+    &-chr {
+      height: 10px;
+      min-height: 0 !important;
+    }
+
+    &-d {
+      max-height: 130px !important;
+      min-height: 0 !important;
+      margin-right: 30px;
+
+      div div:nth-of-type(2) {
+        min-height: 0 !important;
+      }
+    }
+
+    &.gm-style-iw-c {
+      min-height: 0 !important;
+    }
+  }
+
+  &-ui-hover-effect {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus-visible {
+      outline: 5px auto #005fcc !important;
+    }
+  }
+}

package/src/scss/components/_package-card.scss

@@ -0,0 +1,65 @@
+.package-card {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 5;
+  gap: 0;
+
+  border: 1px solid $gray;
+  border-radius: 4px;
+
+  &.has-stickers-row {
+    grid-row: span 6;
+
+    .package-card__content {
+      grid-row: span 5;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: contain;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 4;
+    row-gap: 12px;
+    padding: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &__usp {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: baseline;
+      column-gap: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__price,
+  &__button {
+    align-self: end;
+  }
+
+  &__stickers {
+    min-width: 0;
+  }
+}

package/src/scss/components/_package-plp.scss

@@ -0,0 +1,88 @@
+.package-plp {
+  margin-bottom: 24px;
+
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    margin-top: 16px;
+    margin-bottom: 32px;
+
+    .card-product-banner,
+    .card-sponsor-banner,
+    .card-bloomreach-media-banner {
+      flex: unset;
+      max-width: initial;
+      width: 100%;
+      margin-bottom: 0;
+      padding: 0;
+      grid-row: span 5;
+      align-self: start;
+
+      &.has-stickers-row {
+        grid-row: span 6;
+      }
+
+      &__link {
+        padding: 0;
+        display: block;
+        height: max-content;
+      }
+
+      &__picture {
+        display: block;
+      }
+
+      &__image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    &__container {
+      display: flex;
+      column-gap: 32px;
+    }
+
+    &__search-filter {
+      min-width: 210px;
+    }
+
+    &__content {
+      flex-basis: 100%;
+    }
+
+    &__cards {
+      row-gap: 24px;
+      margin-top: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    margin-bottom: 40px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .package-plp {
+    &__cards {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .package-plp {
+    &__cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}