wickes-css2 2.96.0-develop.1 → 2.96.0-develop.2

package/src/page_tradePro_rewards_home_single.html

@@ -0,0 +1,44 @@
+{{#extend "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true tradepro-nav=true
+  pageMyAcc=true myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsHomePage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="TradePro Rewards"
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_card}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_instore.html

@@ -0,0 +1,67 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.instore}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher
+          mod="mb-1"
+        }}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+  <script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_instoreAndOnline.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.instoreAndOnline}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_noInstoreAndOnline.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.noInstoreAndOnline}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_noOptional.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.noOptional}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradePro_rewards_online.html

@@ -0,0 +1,65 @@
+{{#extend
+  "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsDetailsPage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container top-indent">
+  <div class="row">
+    <div class="col-12">
+      {{#with page_tradePro_vouchers.online}}
+        <h1 class="text-start">{{title}}</h1>
+        {{> voucher}}
+      {{/with}}
+      {{#extend "accordion" header=page_tradePro_vouchers.terms.title collapsed="accordion_collapsed voucher--terms" hidden="hidden-state"}}
+        {{#content "content"}}{{page_tradePro_vouchers.terms.text}}{{/content}}
+      {{/extend}}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="Other TradePro Rewards"
+  secondary=true
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/tradePro-rewards.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/scss/components/_accordion.scss

@@ -142,3 +142,7 @@
     }
   }
 }
+
+.hidden-state {
+  display: none;
+}

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

@@ -0,0 +1,88 @@
+.cards-slider-boundary {
+  overflow: hidden;
+  background-color: $ma-white;
+  padding: 24px 0 32px;
+
+  &--secondary {
+    background-color: transparent;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding: 40px 0;
+  }
+}
+
+.cards-slider {
+  width: 100%;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__controls {
+    display: none;
+    justify-content: space-between;
+    align-items: flex-start;
+    user-select: none;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+
+  &__btn {
+    font-size: 1.625rem;
+    margin-top: 2px;
+    color: $blue;
+    cursor: pointer;
+
+    &.swiper-button-disabled {
+      cursor: auto;
+      display: block !important;
+      color: $gray;
+    }
+  }
+
+  &__prev-btn {
+    margin-right: 20px;
+  }
+
+  &__title {
+    text-align: left;
+  }
+
+  .swiper-container {
+    user-select: none;
+    overflow: visible;
+  }
+
+  .swiper-wrapper {
+    align-items: stretch;
+  }
+
+  .swiper-pagination-bullet {
+    border-radius: 5px;
+    background-color: $gray;
+    height: 6px;
+    width: 6px;
+    transition: width .3s ease-in, background-color .3s ease-in;
+
+    &-active {
+      background-color: $blue;
+      width: 24px;
+    }
+  }
+
+  .swiper-pagination {
+    position: static;
+    margin-top: 24px;
+  }
+
+  &--fits {
+    .swiper-pagination,
+    .cards-slider__controls {
+      display: none;
+    }
+  }
+}

package/src/scss/components/_rewards.scss

@@ -0,0 +1,74 @@
+.top-indent {
+  margin-top: 16px;
+}
+
+.reward-card {
+  border-radius: 4px;
+  height: auto;
+  width: 248px;
+  display: flex;
+  flex-direction: column;
+  background-color: $white;
+  overflow: hidden;
+
+  &__content {
+    padding: 16px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .btn {
+      margin-top: auto;
+    }
+  }
+
+  &__img {
+    width: 100%;
+  }
+
+  &__description {
+    font-size:  .875rem;
+    margin-bottom: 12px;
+  }
+
+  &__title {
+    font-size: 1.125rem;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .top-indent {
+    margin-top: 24px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .top-indent {
+    margin-top: 40px;
+  }
+
+  .reward-card {
+    width: 260px;
+
+    &__content {
+      padding: 24px;
+    }
+
+    &__title {
+      font-weight: 700;
+    }
+
+    &__description {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .reward-card {
+    width: 333px;
+  }
+}

package/src/scss/components/my-account/_mobile-nav.scss

@@ -61,21 +61,6 @@
       text-decoration: none;
     }
 
-    .rewards {
-      width: 20px;
-      height: 20px;
-      border-radius: 50px;
-      background: $blue-dark;
-      color: $white;
-      margin-left: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: .75rem;
-      font-weight: 500;
-      line-height: 1rem;
-    }
-
     &.active {
       background: $ma-white;
 
@@ -86,6 +71,21 @@
     }
   }
 
+  .rewards {
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    background: $blue-dark;
+    color: $white;
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1rem;
+  }
+
   .accordion {
     &__header {
       padding: 8px 8px 8px 16px;

package/src/scss/main.scss

@@ -86,6 +86,7 @@
 @import 'components/clearpay';
 @import 'components/clamp-content';
 @import 'components/error-frame';
+@import 'components/cards-slider';
 @import 'components/sticky-element-appearance';
 
 // Pages

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

@@ -27,6 +27,8 @@
 @import 'components/clamp';//deep
 @import 'components/payment-transactions';
 @import 'components/_load-more.scss';
+@import 'components/rewards';
+@import 'components/cards-slider';
 
 // Pages
 @import 'pages/my-account-v2';