wickes-css2 2.105.0-develop.7 → 2.105.0-develop.9

package/src/page_tradepro-discount-double.html

@@ -0,0 +1,109 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account discount double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary  discount-offer__body--double">
+        {{> my-account/discount
+            secondary=true
+            mod="discount-offer--background-secondary"
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id discount-offer--background-secondary"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+            discountText=my_account.tradepro.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -2,7 +2,7 @@
   "my-account-v2"
   dataBreadcrumbs=discount.tradePro.breadcrumbs
   pageClass="page_my-account_new"
-  title="My Account DIY"
+  title="My Account discount"
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
@@ -24,6 +24,40 @@
   </div>
 </div>
 
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary">
+        {{> my-account/discount
+            secondary=true
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=my_account.tradepro2.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-12 discount-offer__wrap">
@@ -32,7 +66,7 @@
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-            discountSrc=my_account.tradepro.discount
+            discountText=my_account.tradepro.discountText
             title="In-store discount"
             code=my_account.discount
         }}

package/src/scss/components/my-account/_barcode.scss

@@ -5,7 +5,7 @@
   border-radius: 4px;
   color: $gray-dark;
   position: relative;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1rem;
 
   &__discount {
@@ -13,6 +13,14 @@
     top: -8px;
     right: -8px;
 
+    &--text {
+      background: $red;
+      border-radius: 10px;
+      padding: 2px 8px;
+      color: $white;
+      font-weight: 700;
+    }
+
     img {
       border-radius: 40px;
       width: 100%;

package/src/scss/components/my-account/_cards-swap.scss

@@ -0,0 +1,60 @@
+.cards-swap {
+  position: relative;
+  width: 100%;
+  margin-bottom: 40px;
+
+  &__card {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translate(0, -16px) scale(0.9);
+    transform-origin: top;
+    height: inherit;
+    overflow: hidden;
+    filter: contrast(0.6) brightness(1.2);
+    z-index: 1;
+    transition-property: transform, filter;
+    transition-duration: 0.7s, 0.7s;
+    transition-timing-function: cubic-bezier(0.46, -0.59, 0.4, 0.89), linear;
+
+    &.active {
+      transform: translate(0, 0) scale(1);
+      filter: contrast(1) brightness(1);
+      z-index: 2;
+      height: auto;
+      overflow: visible;
+    }
+
+    &.static {
+      position: relative;
+    }
+  }
+
+  &__toggle {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 23px;
+    height: 23px;
+    background: $white;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 700;
+    color: $blue-dark;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.2;
+    cursor: pointer;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .cards-swap {
+    &__card {
+      transform: translate(0, 16px) scale(0.9);
+      transform-origin: bottom;
+    }
+  }
+}

package/src/scss/components/my-account/_clipboard-code.scss

@@ -1,5 +1,5 @@
 .clipboard-code {
-  background: rgba(255, 255, 255, .08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 16px;
 
@@ -21,7 +21,7 @@
   .subtitle {
     display: inline-block;
     font-weight: 400;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1.375rem;
   }
 
@@ -61,7 +61,7 @@
 
   &__description {
     margin-top: 16px;
-    color: rgba(255, 255, 255, .8);
+    color: rgba(255, 255, 255, 0.8);
 
     p {
       font-size: 14px;
@@ -74,4 +74,12 @@
       color: inherit;
     }
   }
+
+  &--secondary {
+    background: $black-transparent40;
+
+    .icon {
+      color: $gray;
+    }
+  }
 }

package/src/scss/components/my-account/_discount.scss

@@ -1,5 +1,5 @@
 .discount {
-  background: rgba(255, 255, 255, .08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 16px;
 
@@ -21,7 +21,7 @@
   .subtitle {
     display: inline-block;
     font-weight: 400;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1.375rem;
   }
 
@@ -48,4 +48,14 @@
   &__code {
     margin-left: 8px;
   }
+
+  &--secondary {
+    background: $black-transparent40;
+
+    .discount__content {
+      .icon {
+        color: $gray;
+      }
+    }
+  }
 }

package/src/scss/pages/my-account-v2.scss

@@ -9,6 +9,7 @@
 @import '../components/my-account/barcode';
 @import '../components/my-account/discount';
 @import '../components/my-account/clipboard-code';
+@import '../components/my-account/cards-swap';
 @import '../components/my-account/payment-status';
 @import '../libs/font-awesome-icons';
 @import '../components/my-account/payment-status';
@@ -50,7 +51,7 @@
       background: $virid-darker;
       color: $white;
       padding: 4px 5px;
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -79,10 +80,10 @@
       color: $blue;
       display: flex;
       align-items: center;
-      transition: all .3s;
+      transition: all 0.3s;
 
       &:hover {
-        opacity: .7;
+        opacity: 0.7;
         text-decoration: underline;
       }
 
@@ -108,6 +109,10 @@
       color: $white;
       padding: 16px;
       width: 100%;
+
+      &--secondary {
+        background: $gray-wait;
+      }
     }
   }
 
@@ -124,6 +129,10 @@
   .greetings {
     word-break: break-all;
 
+    &--secondary {
+      color: $black;
+    }
+
     .title {
       font-weight: 500;
       font-size: 1.625rem;
@@ -161,7 +170,7 @@
 }
 
 .tooltip {
-  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.12));
   position: absolute;
 
   .tooltip-inner {
@@ -170,7 +179,7 @@
     padding: 8px 16px !important;
     border-radius: 4px;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
   }
 
@@ -180,6 +189,10 @@
 }
 
 @include media-breakpoint-up(sm) {
+  .d-sm-grid {
+    display: grid !important;
+  }
+
   .my-account {
     .account-actions {
       padding-top: 32px;
@@ -233,6 +246,12 @@
         .clipboard-code {
           align-items: center;
         }
+
+        &--double {
+          .discount {
+            grid-row: auto;
+          }
+        }
       }
     }
 
@@ -240,6 +259,16 @@
       padding-top: 24px;
     }
   }
+
+  .my-account {
+    .cards-swap {
+      .account-summary {
+        &__wrapper {
+          grid-template-rows: auto;
+        }
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(md) {
@@ -270,6 +299,10 @@
       &__wrapper {
         grid-template-columns: minmax(auto, 502px) repeat(2, minmax(auto, 223px));
 
+        &--double {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
         .clipboard-code,
         .discount {
           padding-top: 20px;
@@ -325,6 +358,10 @@
       &__wrapper {
         grid-template-columns: minmax(auto, 502px) 1fr 1fr;
 
+        &--double {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
         .icon-wrap {
           width: 48px;
           height: 48px;

package/src/scss/pages/page_discount.scss

@@ -47,6 +47,10 @@
         margin-bottom: 8px;
       }
     }
+
+    &--secondary {
+      background: $gray-wait;
+    }
   }
 
   .app-info {
@@ -106,10 +110,6 @@
 
 @include media-breakpoint-up(md) {
   .discount-offer {
-    &__wrap {
-      padding-bottom: 72px;
-    }
-
     &__header {
       padding-top: 40px;
 
@@ -183,6 +183,10 @@
     &__body {
       grid-template-columns: repeat(3, 1fr);
 
+      &--double {
+        grid-template-columns: 1fr 2fr;
+      }
+
       .clipboard-code.discount-code {
         grid-column: auto;
       }

package/src/sitemap.html

@@ -528,6 +528,8 @@
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>
                         <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
@@ -543,6 +545,7 @@
                         <li><a href="page_my-account_address-book_tradePro.html" target="_blank">Address Book Trade Pro</a></li>
                         <li><a href="page_my-account_address-book-form.html" target="_blank">Address Book Form</a></li>
                         <li><a href="page_tradepro-discount.html" target="_blank">Trade Pro Discount</a></li>
+                        <li><a href="page_tradepro-discount-double.html" target="_blank">Trade Pro Discount (Double)</a></li>
                         <li><a href="page_tradepro-discount-app.html" target="_blank">Trade Pro Discount App</a></li>
                     </ul>
                     <h3>Project list</h3>