wickes-css2 2.113.0-develop.1 → 2.113.0-develop.10

package/src/components/date-selection.hbs

@@ -28,12 +28,12 @@
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}
-                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if ../premium}}{{#if (eq day '1')}} calendar__cell_inactive{{/if}}{{#unless isInactive}}{{#if (eq day '2')}} calendar__cell_highlight calendar-premium-day{{/if}}{{/unless}}{{else}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_highlight calendar-rapid-day{{/unless}}{{/if}}{{/if}}">
+                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if ../premium}}{{#if (eq day '1')}} calendar__cell_inactive{{/if}}{{#unless isInactive}}{{#if (eq day '2')}} calendar__cell_highlight calendar-premium-day{{/if}}{{/unless}}{{else}}{{#unless ../noRapid}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_highlight calendar-rapid-day{{/unless}}{{/if}}{{/unless}}{{/if}}">
                       {{#if ../premium}}
                         {{#if (eq day '2')}}
                           {{#unless isInactive}}
                             {{day}}
-                            <span class="calendar-cell-label">Premium</span>
+                            <span class="calendar-cell-label">AM</span>
                           {{else}}
                             {{day}}
                           {{/unless}}
@@ -41,7 +41,7 @@
                           {{day}}
                         {{/if}}
                       {{else}}
-                        {{#if (eq day '1')}}
+                        {{#if (and (eq day '1') (not ../noRapid))}}
                           {{#unless isInactive}}
                             {{day}}
                             <span class="calendar-cell-label">Rapid</span>
@@ -77,22 +77,31 @@
             </div>
         </div>
         <div class="delivery-time">
-          <div class="{{#if premium}}delivery-time__premium-hint{{else}}delivery-time__rapid-hint{{/if}}">
+          {{#if premium}}
+          <div class="delivery-time__premium-hint">
             <span class="icon-wrap icon-wrap--large">
-              {{#if premium}}
                 <img src="./img/premium-delivery.svg" class="icon" alt="Premium delivery">
-              {{else}}
-                <i class="fas fa-shipping-fast icon"></i>
-              {{/if}}
             </span>
           <p class="description">
             {{#if premium}}
-              Select tomorrow’s day on the calendar to get Premium delivery.
+              Select tomorrow’s day on the calendar to get Next Day AM delivery
             {{else}}
               Select todays’ day on the calendar to get Rapid delivery.
             {{/if}}
           </p>
-        </div>
+          </div>
+          {{else}}
+            {{#unless noRapid}}
+            <div class="delivery-time__rapid-hint">
+              <span class="icon-wrap icon-wrap--large">
+                  <i class="fas fa-shipping-fast icon"></i>
+              </span>
+            <p class="description">
+                Select todays’ day on the calendar to get Rapid delivery.
+            </p>
+            </div>
+            {{/unless}}
+          {{/if}}
           {{> delivery-types
               title=titleDelivery
               subtitle=subtitleDelivery

package/src/components/fulfilment-accordions.hbs

@@ -1,7 +1,7 @@
 <div class="pdp__fulfilment">
   {{#extend
     "accordion"
-    header="Click&Collectfromstorewithin30minutesFREE(Dropdown)"
+    header="Standard Delivery - From £4"
     mod="accordion--fulfilment"
     collapsed="accordion_collapsed"
     hidden="hidden-state"

package/src/components/heavy-banners-wrapper.hbs

@@ -0,0 +1,21 @@
+<div class="delivery-block__heavy-banners-wrapper">
+  <div class="delivery-block__heavy-banners-header">
+    <h4 class="delivery-block__heavy-banners-title">Big &amp; Bulky delivery information</h4>
+    <a href="https://www.wickes.co.uk/termsAndConditions" class="delivery-block__heavy-banners-terms delivery-block__heavy-banners-terms--desktop">Terms &amp; Conditions</a>
+  </div>
+  <p class="delivery-block__heavy-banners-description">
+    We will not be able to deliver your order if any of the below apply to your delivery address:
+  </p>
+  <div class="delivery-block__heavy-banners">
+    {{#each @root.heavyBannerImages}}
+    <img loading="lazy" title="{{this.title}}" src="{{this.src}}" alt="{{this.alt}}">
+    {{/each}}
+  </div>
+  <div class="delivery-block__heavy-banners-contact">
+    <span class="delivery-block__heavy-banners-contact-icon">
+      <i class="far fa-info-circle"></i>
+    </span>
+    <span>If you have any questions, please contact us on <a href="tel:03301234123">0330 123 4123</a></span>
+  </div>
+  <a href="https://www.wickes.co.uk/termsAndConditions" class="delivery-block__heavy-banners-terms delivery-block__heavy-banners-terms--mobile">Terms &amp; Conditions</a>
+</div>

package/src/components/image-accordion.hbs

@@ -0,0 +1,18 @@
+<div class="image-accordion {{collapsed}}">
+  <div class="image-accordion__preview">
+    {{#each images}}
+      <img src="{{image.url}}" alt="{{image.altText}}">
+    {{/each}}
+  </div>
+  <div class="image-accordion__content {{hidden}}">
+    {{#block "content"}}{{/block}}
+  </div>
+  <h5 class="image-accordion__header">
+    <span class="icon image-accordion__icon">
+      <i class="far fa-angle-up"></i>
+    </span>
+    <span class="image-accordion__header-text">
+      See details
+    </span>
+  </h5>
+</div>

package/src/components/kitchen/price.hbs

@@ -1,34 +1,54 @@
 {{#with price}}
-<div class="price {{#if price_offer}}price--offer{{/if}} {{#if ../small}}price--small{{/if}}">
-  {{#if was_price}}
-    <div class="price__was-block">£{{formatPrice was_price}}</div> 
-  {{/if}}
-  <div class="price__main">
-    {{#if price}}
-      <span class="price__item">£{{formatPrice price}}</span>
+  <div class="price {{#if price_offer}}price--offer{{/if}} {{#if ../small}}price--small{{/if}}">
+    {{#if ../switch-vat}}
+      {{#ifCond was_price '&&' was_price-vat}}
+        <div class="price__was-block including-vat">£{{formatPrice was_price-vat}}</div>
+        <div class="price__was-block excluding-vat d-none">£{{formatPrice was_price}}</div>
+      {{/ifCond}}
+    {{else}}
+      {{#if was_price}}
+        <div class="price__was-block">£{{formatPrice was_price}}</div>
+      {{/if}}
     {{/if}}
-    {{#if finance_price}}
-      <span class="price__text">or</span>
-      <span class="price__monthly">
-        <span class="price__item">£{{formatPrice finance_price}}*</span>
-        <span class="price__text">/month</span>
-      </span>
-    {{/if}}
-    {{#if tooltip_text}}
-      {{> info-icon 
-        modification="price__tooltip" 
-        title=tooltip_text 
-        markdown="true" 
-        data-placement="top"
-        data-offset="0,4"
-        data-html="true"
-      }}
+    <div class="price__main">
+      {{#if ../switch-vat}}
+        {{#ifCond price '&&' price-vat}}
+          <div class="price__vat including-vat">
+            <span class="price__item">£{{formatPrice price-vat}}</span>
+            <span class="price-vat">Inc.VAT</span>
+          </div>
+          <div class="price__vat excluding-vat d-none">
+            <span class="price__item">£{{formatPrice price}}</span>
+            <span class="price-vat">Exc.VAT</span>
+          </div>
+        {{/ifCond}}
+      {{else}}
+        {{#if price}}
+          <span class="price__item">£{{formatPrice price}}</span>
+        {{/if}}
+      {{/if}}
+      {{#if finance_price}}
+        <span class="price__text">or</span>
+        <span class="price__monthly">
+          <span class="price__item">£{{formatPrice finance_price}}*</span>
+          <span class="price__text">/month</span>
+        </span>
+      {{/if}}
+      {{#if tooltip_text}}
+        {{> info-icon
+          modification="price__tooltip"
+          title=tooltip_text
+          markdown="true"
+          data-placement="top"
+          data-offset="0,4"
+          data-html="true"
+        }}
+      {{/if}}
+    </div>
+    {{#if additional_text}}
+      <div class="price__additional-text">
+        {{additional_text}}
+      </div>
     {{/if}}
   </div>
-  {{#if additional_text}}
-    <div class="price__additional-text">
-      {{additional_text}}
-    </div>
-  {{/if}}
-</div>
 {{/with}}

package/src/components/kitchen/strip-stickers.hbs

@@ -1,9 +1,15 @@
 {{#if strip_stickers.length}}
   <div class="strip-stickers">
     {{#each strip_stickers}}
-      <div class="strip-sticker" style="background-color: {{background}}; color: {{text_colour}}">
-        {{text}}
-      </div>
+      {{#if (startsWith this.background '#')}}
+          <div class="strip-sticker" style="background-color: {{this.background}}; color: {{this.text_colour}};">
+            {{text}}
+          </div>
+        {{else}}
+          <div class="strip-sticker strip-sticker--{{this.background}} strip-sticker--text-{{this.text_colour}}">
+            {{text}}
+          </div>
+        {{/if}}
     {{/each}}
   </div>
 {{/if}}

package/src/components/package-card.hbs

@@ -0,0 +1,30 @@
+{{#each cards}}
+    <div class="package-card">
+        <a href="#">
+            <img class="package-card__image" src="{{image.url}}" alt="{{image.altText}}">
+        </a>
+
+        <div class="package-card__content">
+            <h4 class="package-card__title">{{title}}</h4>
+            <ul class="package-card__usp">
+                {{#each usp}}
+                    <li class="package-card__usp-item">
+                        <span class="package-card__icon icon">
+                            <span class="fas fa-check"></span>
+                        </span>
+                        <span>{{this}}</span>
+                    </li>
+                {{/each}}
+            </ul>
+            <div class="package-card__price">
+                {{> kitchen/price price=priceData small=true switch-vat=../switch-vat}}
+            </div>
+            <div class="package-card__stickers">
+                {{#if strip_stickers}}
+                    {{> kitchen/strip-stickers strip-stickers=strip_stickers}}
+                {{/if}}
+            </div>
+            <a href="#" class="package-card__button btn btn-primary btn_full">View Suite</a>
+        </div>
+    </div>
+{{/each}}

package/src/components/pdp-price-actions.hbs

@@ -84,3 +84,20 @@
   </button>
 </div>
 {{/if}}
+{{#if package}}
+  {{#if postcodeChecker}}
+    {{> postcode-checker modifyClass="postcode-checker--desktop-only"}}
+  {{else}}
+  <div class="pdp-price__bulk-add">
+    {{> button
+      text="Add to basket"
+      full=true
+      action=true
+      type="button"
+      showLoader=true
+      modification="package-bulk-add d-none d-md-block"
+      loaderModifier="postcode-checker__button-loader"
+    }}
+  </div>
+  {{/if}}
+{{/if}}

package/src/components/postcode-checker.hbs

@@ -0,0 +1,24 @@
+<div class="postcode-checker {{modifyClass}}">
+  <p class="postcode-checker__title">Enter your postcode to check delivery stock in your area & add to basket</p>
+  <div class="postcode-checker__field">
+    <input
+      class="tbx postcode-checker__input"
+      type="text"
+      placeholder=""
+      id="postcode-checker" 
+      name="postcode-checker"
+    />
+  </div>
+  <p class="postcode-checker__error">Please enter a valid postcode</p>
+  <div class="postcode-checker__action">
+      {{> button
+          text="Add to basket"
+          full=true
+          action=true
+          type="button"
+          showLoader=true
+          modification="postcode-checker__button"
+          loaderModifier="postcode-checker__button-loader"
+      }}
+  </div>
+</div>

package/src/components/price-badges.hbs

@@ -1,12 +1,14 @@
 <div class="pdp__badges-wrapper">
-    <div class="pdp__badges pdp-price-container__badges price__badges-v2 price__badges-v2-{{badge-color}}
-        {{#if badge-text-color}}price__badges-v2-text-{{badge-text-color}}{{/if}}
-        {{#if badge-wide}}price__badges-v2-wide{{/if}}">
-        {{#ifCond switch-vat '&&' badge-text-exc}}
-            <div class="pdp__badge including-vat">{{badge-text}}</div>
-            <div class="pdp__badge excluding-vat d-none">{{badge-text-exc}}</div>
-        {{else}}
-            <div class="pdp__badge">{{badge-text}}</div>
-        {{/ifCond}}
-    </div>
+    {{#each badges}}
+        <div class="pdp__badges {{#if ../isStaticBadges}}pdp__badges--static{{/if}} pdp-price-container__badges price__badges-v2 price__badges-v2-{{bgcolor}}
+            {{#if text-color}}price__badges-v2-text-{{text-color}}{{/if}}
+            {{#if badge-wide}}price__badges-v2-wide{{/if}}">
+            {{#ifCond ../switch-vat '&&' text-exc}}
+                <div class="pdp__badge including-vat">{{text}}</div>
+                <div class="pdp__badge excluding-vat d-none">{{text-exc}}</div>
+            {{else}}
+                <div class="pdp__badge">{{text}}</div>
+            {{/ifCond}}
+        </div>
+    {{/each}}
 </div>