wickes-css2 2.97.0-IM-1593-code-width.1 → 2.97.0-develop.2

package/src/page_my-account_address-book-form.html

@@ -0,0 +1,94 @@
+{{#extend "my-account-v2"
+  title="Address Book"
+  dataBreadcrumbs=address_book.breadcrumbs
+  pageClass="page_my-account_new"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="address-book"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_address-book.css">
+{{/content}}
+{{#content "main"}}
+<div class="globalMessages">
+  <div class="container">
+    {{> notifications notification-page.error text="Please correct the errors below."}}
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      mod
+      menu=my_account.diy.menu
+      active-index=3
+      page-name="Address Book"
+      }}
+    </div>
+    <div class="col-12">
+      <div class="address-book__header">
+        <h1 class="title">Add Delivery Address</h1>
+      </div>
+    </div>
+    <div class="col-12 col-md-7 col-lg-6">
+      <form action="#" class="address-book__form">
+        <label class="form-row__label form-row__label_required form-row--required">Required Field</label>
+        {{#each address_book.addressFields}}
+          {{#if (eq id "address-lookup-query")}}
+            <div class="close-block">
+            <div data-finder>
+              {{> form-row
+              id="address-lookup-query"
+              label="Type first line of the address"
+              required="true"
+              }}
+            </div>
+
+            <div data-manually style="display: none;">
+              {{#each ../address_book.hideFields}}
+                {{> form-row
+                    id=this.id
+                    label=this.label
+                    value=this.value
+                    required=this.required
+                }}
+              {{/each}}
+            </div>
+          </div>
+          {{else}}
+            {{> form-row
+              row-mod=this.rowMod
+              type=this.type
+              id=this.id
+              label=this.label
+              value=this.value
+              placeholder=this.placeholder
+              input-mod=this.modificator
+              required=this.required
+              showContent=this.showPassword
+              }}
+          {{/if}}
+        {{/each}}
+        {{> checkbox id="defaultAddress" label="Make this my default address" }}
+        <div class="address-book__form-ctas">
+          <button class="btn btn-primary btn_full" id="saveUpdates" type="submit" data-action="save-form">
+            Save changes
+          </button>
+          <a href="/page_my-account_address-book.html" class="btn btn-secondary btn_full" data-action="cancel-form">
+            Cancel
+          </a>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+{{> my-account/leave-modal
+    address_book.leave-popup
+    id="leave-popup"
+}}
+<script defer src="./js/address-book.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-account_address-book.html

@@ -1,27 +1,50 @@
-{{#extend "my-account" pageClass="my-account_address-book" title="Address book" pageMyAcc=true}}
-  {{#content "heading"}}
-    {{> account-heading title="Address book" subtitle="Manage your address book" btnLink="page_my-account_address-details.html" btnTitle="Add new address"}}
-  {{/content}}
-  {{#content "aside"}}
-    {{> aside-nav2 my-account-menu active-index="4" page-name="Address book" mod="d-none d-lg-block"}}
-    {{> my-account/mobile-nav
-        mod="account-nav--old-pages"
-        menu=my_account.diy.menu
-        active-index=3
-        page-name="Address Book"
+{{#extend "my-account-v2"
+  title="Address Book"
+  dataBreadcrumbs=address_book.breadcrumbs
+  pageClass="page_my-account_new"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="address-book"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_address-book.css">
+{{/content}}
+{{#content "main"}}
+<div class="globalMessages">
+  <div class="container">
+    {{> notifications notification-page.success withCloseBtn="true" text="New delivery address was added."}}
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          mod
+          menu=my_account.diy.menu
+          active-index=3
+          page-name="Address Book"
         }}
-  {{/content}}
-  {{#content "main"}}
-
-    {{#with page_my-account-address-book}}
-      {{> user-address editUrl="page_my-account_address-details.html" radioName="my-account-address-radio" withRemoveBtn=true isOnAccount=true}}
-    {{/with}}
-    <div class="my-account__actions">
-      <button class="btn btn-primary">
-        <span class="btn__text">Save updates</span>
-      </button>
-      <a href="page_my-account.html" class="btn btn-secondary">Cancel</a>
     </div>
-
-  {{/content}}
+    <div class="col-12">
+      <div class="address-book__header">
+        <h1 class="title">Address Book</h1>
+        <button class="btn btn_full btn-primary btn--add-address">Add new delivery address</button>
+      </div>
+      <div class="address-book__items">
+        {{#each address_book.addresses}}
+          {{> address-card this}}
+        {{/each}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+{{> my-account/delete-address-modal
+    address_book.deleteAddressModal
+    id="delete-address"
+    }}
+<script defer src="./js/address-book.min.js"></script>
+{{/content}}
 {{/extend}}

package/src/page_my-account_address-book_tradePro.html

@@ -1,20 +1,47 @@
-{{#extend "my-account" pageClass="my-account_address-book" title="Address book" }}
-  {{#content "heading"}}
-    {{> account-heading title="Address book" subtitle="Manage your address book" btnLink="page_my-account_address-details.html" btnTitle="Add new address"}}
-  {{/content}}
-  {{#content "aside"}}
-    {{> aside-nav2 my-account-tradePro-menu-new active-index="2" page-name="Address book"}}
-  {{/content}}
-  {{#content "main"}}
-    {{#with page_my-account-address-book}}
-      {{> user-address editUrl="page_my-account_address-details.html" radioName="my-account-address-radio" withRemoveBtn=true isOnAccount=true}}
-    {{/with}}
-    <div class="my-account__actions">
-      <button class="btn btn-primary">
-        <span class="btn__text">Save updates</span>
-      </button>
-      <a href="page_my-account.html" class="btn btn-secondary">Cancel</a>
+{{#extend "my-account-v2"
+title="Address Book"
+dataBreadcrumbs=address_book.breadcrumbs
+pageClass="page_my-account_new"
+pageMyAcc=true
+myAccV2=true
+isLoggedIn=true
+mainClass="address-book"
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/page_address-book.css">
+{{/content}}
+{{#content "main"}}
+<div class="globalMessages">
+  <div class="container">
+    {{> notifications notification-page.success withCloseBtn="true" text="New delivery address was added."}}
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+      mod
+      menu=my_account.diy.menu
+      active-index=3
+      page-name="Address Book"
+      }}
     </div>
-
-  {{/content}}
+    <div class="col-12">
+      <div class="address-book__header">
+        <h1 class="title">Address Book</h1>
+      </div>
+      <div class="address-book__items">
+        <div class="address-card address-card--add">
+          <span class="icon-wrap">
+            <i class="fas fa-book"></i>
+          </span>
+          <p class="description">You have no saved delivery addresses</p>
+          <button class="btn btn-primary btn--add-address">Add new delivery address</button>
+        </div>
+        {{> address-card address_book.tradeProAddress}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
 {{/extend}}

package/src/page_my-account_change-password.html

@@ -1,33 +1,66 @@
-{{#extend "my-account" title="Change your password" pageMyAcc=true}}
-  {{#content "heading"}}
-    {{> account-heading title="Change Your Password"}}
-  {{/content}}
-    {{#content "aside"}}
-        {{> aside-nav2 my-account-menu active-index="2" page-name="Change Your Password"}}
-    {{/content}}
-  {{#content "main"}}
-    <form action="#" class="form-bg form-change-password">
-        <div class="form-change-password__row">
-            <div class="form-change-password__descr">
-                <h3>Please use this form to update your password</h3>
-                <div class="warning-required">Required fields</div>
-            </div>
+{{#extend "my-account-v2"
+    title="Change password"
+    dataBreadcrumbs=change_password.breadcrumbs
+    pageClass="page_my-account_new"
+    pageMyAcc=true
+    myAccV2=true
+    isLoggedIn=true
+    mainClass="change-password"
+}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/pages/page_change-password.css">
+{{/content}}
+{{#content "main"}}
+    <div class="globalMessages">
+        <div class="container">
+
         </div>
-        {{> form-row type="password" id="current-password" label="Current password" required="true"}}
-        {{> form-row type="password" id="new-password" label="New password" info="Minimum length is 6 characters" required="true"}}
-        {{> form-row type="password" id="confirm-password" label="Confirm new password" required="true"}}
-        <div class="form-row form-row__action form-row__action_custom">
-            <div class="form-row__col-btn">
-                <button class="btn btn-primary btn_full">
-                    <span class="btn__text">Save updates</span>
-                </button>
-            </div>
-            <div class="form-row__col-btn btn_full">
-                <button class="btn btn-secondary btn_full btn-cancel" type="reset">
-                    <span class="btn__text">Cancel</span>
-                </button>
+    </div>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                {{> my-account/mobile-nav
+                    mod
+                    menu=my_account.diy.menu
+                    active-index=2
+                    page-name="Personal Details"
+                }}
+                <form action="#" class="change-password__form">
+                    <div class="change-password__header">
+                        <h3 class="title">Change Password</h3>
+                        <div class="warning-required">Required Field</div>
+                    </div>
+                    {{#each change_password.fields}}
+                        {{> form-row
+                            type=this.type
+                            id=this.id
+                            label=this.label
+                            value=this.value
+                            placeholder=this.placeholder
+                            input-mod=this.modificator
+                            required=this.required
+                            showContent=this.showPassword
+                        }}
+                    {{/each}}
+                    <div class="change-password__ctas">
+                        <button class="btn btn-primary btn_full btn--save" type="submit" data-action="save-form">
+                            <span class="btn__text">Save changes</span>
+                        </button>
+                        <a href="page_my-account_change-password.html" class="btn btn-outline-primary btn_full btn--cancel" data-action="cancel-form">
+                            <span class="btn__text">Cancel</span>
+                        </a>
+                    </div>
+                </form>
             </div>
         </div>
-    </form>
+    </div>
+{{/content}}
+{{#content "foot" mode="append"}}
+    {{> leave-modal
+        change_password.leave-popup
+        id="leave-popup"
+    }}
+    <script src="./js/pstrength.min.js"></script>
+    <script src="./js/change-password.min.js"></script>
 {{/content}}
-{{/extend}}
+{{/extend}}

package/src/page_personal-details-installer.html

@@ -49,12 +49,14 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 {{> my-account/leave-modal
-personal_details.reset-popup
-id="leave-popup"
+    personal_details.reset-popup
+    mod="details-modal"
+    id="leave-popup"
 }}
 {{> my-account/leave-modal
-personal_details.leave-popup
-id="change-password-popup"
+    personal_details.leave-popup
+    mod="details-modal"
+    id="change-password-popup"
 }}
 <script defer src="./js/my-account.min.js"></script>
 <script defer src="./js/personal-details.min.js"></script>

package/src/page_personal-details.html

@@ -48,10 +48,12 @@
 {{#content "foot" mode="append"}}
 {{> my-account/leave-modal
     personal_details.reset-popup
+    mod="details-modal"
     id="leave-popup"
 }}
 {{> my-account/leave-modal
     personal_details.leave-popup
+    mod="details-modal"
     id="change-password-popup"
 }}
 <script defer src="./js/my-account.min.js"></script>

package/src/partials/header.hbs

@@ -97,7 +97,7 @@
               <span class="header-top-line__link-title">Project list</span>
             </a>
           {{else}}
-            <a href="{{#if switch-vat}}./page_project-list-vat.html{{else}}./page_my-shopping-list.html{{/if}}" class="header-top-line__link">
+            <a href="./page_my-shopping-list.html" class="header-top-line__link">
               <span class="btn__text">
                 <i class="fas fa-clipboard-list fa-lg"></i>
               </span>

package/src/scss/common/_common.scss

@@ -583,3 +583,11 @@ div .design-appointment {
 .overflow-hidden {
   overflow: hidden;
 }
+
+.icon-wrap {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -5,10 +5,6 @@
 
   &--secondary {
     background-color: transparent;
-
-    .swiper-slide {
-      border: 1px solid $gray;
-    }
   }
 
   @include media-breakpoint-up(md) {
@@ -89,26 +85,4 @@
       display: none;
     }
   }
-
-  h3 {
-    margin-bottom: 16px;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .cards-slider h3 {
-    margin-bottom: 24px;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .cards-slider-boundary {
-    padding: 40px 0;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .cards-slider__controls {
-    display: flex;
-  }
 }

package/src/scss/components/_leave-modal.scss

@@ -0,0 +1,75 @@
+.leave-modal {
+  .modal-dialog {
+    margin-top: 40px;
+  }
+
+  .modal-header {
+    padding: 16px;
+
+    .modal-box__inner-columns {
+      display: flex;
+      align-items: center;
+
+      .info-icon {
+        @include font-size(27);
+        color: $orange;
+      }
+    }
+
+    .close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      margin: 0;
+      padding: 0;
+
+      .icon svg {
+        @include font-size(16);
+      }
+    }
+
+    .modal-title {
+      @include font-size(18);
+      @include line-height(32);
+      margin-left: 15px;
+      font-weight: 500;
+    }
+  }
+
+  .modal-body {
+    padding: 16px;
+
+    .description {
+      @include font-size(16);
+      @include line-height(32);
+      margin-bottom: 0;
+      font-weight: 400;
+    }
+
+    .actions {
+      display: flex;
+      grid-gap: 16px;
+      margin-top: 32px;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .leave-modal {
+    .modal-header {
+      padding: 16px 24px;
+    }
+
+    .modal-body {
+      padding: 24px 24px 16px;
+
+      .actions {
+        margin-top: 40px;
+
+        .btn_full {
+          width: auto;
+        }
+      }
+    }
+  }
+}

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

@@ -14,14 +14,14 @@
     }
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
   }
 
   .pdp-price__value_extended,

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

@@ -25,14 +25,19 @@
     background: $gray-bg;
   }
 
-  .pdp-price__value,
   .pdp-price__oos,
   .pdp-price__in-store-only {
     border-bottom: 1px solid $gray;
   }
 
-  .pdp-price__value {
-    padding-bottom: 10px;
+  .pdp-price__oos {
+    border-top: 1px solid $gray;
+    margin-bottom: 8px;
+
+    & + .pdp-price__controls,
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .pdp-price__value_extended,

package/src/scss/components/_rewards.scss

@@ -11,14 +11,6 @@
   background-color: $white;
   overflow: hidden;
 
-  @include media-breakpoint-up(md) {
-    width: 260px;
-  }
-
-  @include media-breakpoint-up(lg) {
-    width: 333px;
-  }
-
   &__content {
     padding: 16px;
     flex: 1;
@@ -26,10 +18,6 @@
     flex-direction: column;
     align-items: flex-start;
 
-    @include media-breakpoint-up(md) {
-      padding: 24px;
-    }
-
     .btn {
       margin-top: auto;
     }
@@ -42,20 +30,12 @@
   &__description {
     font-size:  .875rem;
     margin-bottom: 12px;
-
-    @include media-breakpoint-up(md) {
-      margin-bottom: 16px;
-    }
   }
 
   &__title {
     font-size: 1.125rem;
     font-weight: 500;
     margin-bottom: 8px;
-
-    @include media-breakpoint-up(md) {
-      font-weight: 700;
-    }
   }
 }
 

package/src/scss/components/_ti-header.scss

@@ -0,0 +1,43 @@
+.ti__header {
+  @include make-col(12);
+  position: relative;
+  padding: 15px 0;
+  border-bottom: 1px solid $gray-light;
+
+  &-inactive .ti__header-number,
+  &-inactive .ti__header-title,
+  &-inactive .ti__header-hint {
+    opacity: .5;
+  }
+
+  & h3 {
+    margin-bottom: 0;
+  }
+
+  &-number {
+    display: block;
+    color: $pewter;
+  }
+
+  &-title {
+    display: block;
+    line-height: 1;
+    margin-top: -2px;
+  }
+
+  &-hint {
+    display: block;
+    color: $pewter;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 24px;
+
+    &.ti__header-hint {
+      margin-bottom: -8px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      font-weight: 700;
+    }
+  }
+}