wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/components/bloomreach/complete-card.hbs

@@ -0,0 +1,138 @@
+<div class="card complete-card {{modification}}" data-product-code="{{code}}">
+  {{#if badge}}
+    <div
+        class="complete-card__badge"
+        style="background-color: {{badge.color}}; color: {{badge.textColor}};"
+    >
+      {{badge.text}}
+    </div>
+  {{/if}}
+
+  <div class="complete-card__inner">
+    <div class="complete-card__select">
+      {{> checkbox id=checkboxId action="true" checked=checked name=name}}
+    </div>
+
+    <div class="complete-card__img-wrap">
+      {{#if image.url}}
+        <img class="complete-card__img" src="{{image.url}}" alt="{{image.altText}}">
+      {{/if}}
+    </div>
+
+    <div class="complete-card__content">
+      <div class="complete-card__header">
+        <a href="{{url}}" target="_blank" class="complete-card__title">
+          {{name}}
+        </a>
+
+        <div class="complete-card__reviews">
+          <div class="rating-bg">
+            <i class="fa fa-star star-in" aria-hidden="true"></i>
+            <i class="fa fa-star star-in" aria-hidden="true"></i>
+            <i class="fa fa-star star-in" aria-hidden="true"></i>
+            <i class="fa fa-star star-in" aria-hidden="true"></i>
+            <i class="fa fa-star star-in" aria-hidden="true"></i>
+
+            <div class="rating-overlay"
+                 data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}">
+                                <span class="star-overlay">
+                                    <i class="fa fa-star" aria-hidden="true"></i>
+                                </span>
+              <span class="star-overlay">
+                                    <i class="fa fa-star" aria-hidden="true"></i>
+                                </span>
+              <span class="star-overlay">
+                                    <i class="fa fa-star" aria-hidden="true"></i>
+                                </span>
+              <span class="star-overlay">
+                                    <i class="fa fa-star" aria-hidden="true"></i>
+                                </span>
+              <span class="star-overlay">
+                                    <i class="fa fa-star" aria-hidden="true"></i>
+                                </span>
+            </div>
+
+            <span class="complete-card__reviews-count">
+                (<span class="complete-card__reviews-count-value">{{externalReviewCount}}</span>)
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="complete-card__options">
+        {{#if dropdownOptions.length}}
+          {{> bloomreach/complete-card-dropdown
+              id=checkboxId
+              placeholder="Select option"
+              options=dropdownOptions
+              selectedValue=selectedDropdownValue
+              selectedLabel=selectedDropdownLabel
+              error=dropdownError
+          }}
+        {{/if}}
+      </div>
+
+      <div class="complete-card__count-stepper count-stepper">
+        <label for="card-count-{{checkboxId}}" class="quantity-label">
+          Quantity:
+        </label>
+
+        <input
+            type="text"
+            inputmode="numeric"
+            required=""
+            pattern="[0-9]*\d"
+            id="card-count-{{checkboxId}}"
+            class="tbx tbx_quantity"
+            value="1"
+            readonly
+        >
+      </div>
+
+      <div class="complete-card__bottom">
+        <div class="complete-card__price {{#if wasPriceFormatted}}complete-card__price_sale{{/if}}">
+          {{#if showFromPrice}}
+            <div class="complete-card__price_from">From</div>
+          {{/if}}
+
+          {{#if wasPriceFormatted}}
+            <div class="complete-card__price-value">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
+                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
+              {{else}}
+                {{wasPriceFormatted}}
+              {{/if}}
+            </div>
+
+            <div class="complete-card__price__sale-price">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
+                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
+              {{else}}
+                {{{price.formattedValue}}}
+              {{/if}}
+            </div>
+          {{else}}
+            <div class="complete-card__price-value">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
+                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
+              {{else}}
+                {{{price.formattedValue}}}
+              {{/if}}
+            </div>
+          {{/if}}
+
+          {{#if switch-vat}}
+            <span class="complete-card__vat-label">
+              <span class="including-vat-inherit">Inc. VAT</span>
+              <span class="excluding-vat-inherit">Exc. VAT</span>
+            </span>
+          {{/if}}
+        </div>
+
+        <p class="complete-card__delivery">Excluding delivery</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/bloomreach/complete-divider.hbs

@@ -0,0 +1,3 @@
+<div class="complete-widget__divider">
+  <i class="fal fa-plus"></i>
+</div>

package/src/components/bloomreach/complete-summary-skeleton.hbs

@@ -0,0 +1,12 @@
+<div class="complete-widget__summary complete-widget__summary--skeleton ssc">
+    <div class="complete-widget__summary-wrapper">
+        <div class="complete-widget__total">
+            <div class="ssc-line complete-widget__skeleton-label"></div>
+            <div class="ssc-line complete-widget__skeleton-price"></div>
+        </div>
+        <div class="complete-widget__cta">
+            <div class="ssc-square complete-widget__skeleton-cta"></div>
+        </div>
+    </div>
+    <div class="ssc-line complete-widget__skeleton-offer"></div>
+</div>

package/src/components/bloomreach/complete-summary.hbs

@@ -0,0 +1,43 @@
+<div class="complete-widget__summary">
+  <div class="complete-widget__summary-wrapper">
+    <div class="complete-widget__total">
+      <div class="complete-widget__label">Total price:</div>
+
+      <div class="complete-widget__price">
+        <div class="complete-widget__price-value">
+          {{#if switch-vat}}
+            <span class="including-vat-inherit">£0.00</span>
+            <span class="excluding-vat-inherit">£0.00</span>
+          {{else}}
+            £0.00
+          {{/if}}
+        </div>
+        <div class="complete-widget__sale-price" style="display: none;">
+          {{#if switch-vat}}
+            <span class="including-vat-inherit"></span>
+            <span class="excluding-vat-inherit"></span>
+          {{/if}}
+        </div>
+        {{#if switch-vat}}
+          <span class="complete-widget__vat-label including-vat-inherit">Inc. VAT</span>
+          <span class="complete-widget__vat-label excluding-vat-inherit">Exc. VAT</span>
+        {{/if}}
+      </div>
+    </div>
+
+    <div class="complete-widget__cta">
+      {{> button
+          text="Add selected 1 product to basket"
+          full=true
+          action=true
+          type="button"
+          showLoader=true
+          loaderModifier="complete-widget__button-loader"
+      }}
+    </div>
+  </div>
+
+  <p class="complete-widget__offer">
+    *Any offers/discounts will be applied in basket
+  </p>
+</div>

package/src/components/bloomreach/complete-wrapper.hbs

@@ -0,0 +1 @@
+<div class="complete-widget__wrapper" data-complete-widget-wrapper></div>

package/src/components/bloomreach/complete-your-project.hbs

@@ -0,0 +1,21 @@
+<div class="complete-widget">
+  <h3 class="complete-widget__title text-center">
+    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
+  </h3>
+
+  <div class="complete-widget__content" data-complete-widget-content>
+    <div class="complete-widget__wrapper">
+      {{> bloomreach/complete-card-skeleton}}
+
+      <div class="complete-widget__divider">
+        <i class="fal fa-plus"></i>
+      </div>
+
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+    </div>
+
+    {{> bloomreach/complete-summary-skeleton}}
+  </div>
+</div>

package/src/components/card-store-locator.hbs

@@ -1,48 +1,90 @@
 <div class="card-store">
   <div class="card-store__info">
-    <div class="card-store__title-main">truro</div>
-    {{#if distance}}
-      <div class="card-store__distance">3,474.4 Miles</div>
+    {{#if titleName}}
+      <div class="card-store__title-main">{{titleName}}</div>
     {{/if}}
-    {{#if address}}
-      <div class="card-store__title">Address</div>
+
+    {{#if distance}}
+      <div class="card-store__distance">{{distance}}</div>
     {{/if}}
+
     <div class="card-store__address">
-      <div class="card-store__name">Wickes Threemilstone retails park,</div>
-      <div class="card-store__location">GR, Chacewater</div>
-      <div class="card-store__city">Truro</div>
-      <div class="card-store__postcode">TR4 8GA</div>
+      {{#if storeName}}
+        <div class="card-store__name">{{storeName}}</div>
+      {{/if}}
+      {{#if storeLocation}}
+        <div class="card-store__location">{{storeLocation}}</div>
+      {{/if}}
+      {{#if storeCity}}
+        <div class="card-store__city">{{storeCity}}</div>
+      {{/if}}
+      {{#if storePostcode}}
+        <div class="card-store__postcode">{{storePostcode}}</div>
+      {{/if}}
     </div>
   </div>
 
-  <div>
+  <div class="card-store__body">
     <div class="card-store__navigation">
-      <a href="#" class="btn btn-primary">
-        <span class="btn__text">Navigate To</span>
+      <a href="page_store-locator-details.html" class="btn btn-primary btn-store-details">
+        <span class="btn__text">View store details</span>
       </a>
     </div>
-    <div class="card-store__schedule">
-      {{#if opening-times}}
-        <div class="card-store__title {{#if schedule-title}}schedule-title{{/if}}">Standard opening times</div>
-        {{>schedule}}
-      {{/if}}
 
-      {{#unless locator-list}}
-        <div class="card-store__special-time">
-          <div class="card-store__title {{#if schedule-title}}schedule-title{{/if}}">Special opening times</div>
-          {{>special-opening-schedule}}
+    {{#if opening-times}}
+      <div class="card-store__schedule">
+        <div class="accordion opening-times-accordion accordion_collapsed">
+          <h5 class="accordion__header opening-times-accordion__header">
+            <span class="accordion__header-text opening-times-accordion__title">
+              Opening times
+            </span>
+            <span class="icon accordion__header-icon opening-times-accordion__icon">
+              <i class="fas fa-angle-up"></i>
+            </span>
+          </h5>
+
+          <div class="accordion__content opening-times-accordion__content" style="display: none;">
+            <div class="accordion__content-inner">
+              <div class="card-store__title schedule-title">Standard opening times</div>
+              {{> schedule}}
+
+              {{#if special-opening-schedule}}
+                <div class="card-store__special-time">
+                  <div class="card-store__title schedule-title">Special opening times</div>
+                  {{> special-opening-schedule}}
+                </div>
+              {{/if}}
+
+              <button
+                  type="button"
+                  class="opening-times-accordion__close"
+                  aria-label="Collapse opening times"
+              >
+                <span class="icon opening-times-accordion__close-icon">
+                  <i class="fas fa-angle-up"></i>
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
-      {{/unless}}
-    </div>
+      </div>
+    {{/if}}
 
     <div class="card-store__contacts">
-      <span class="card-store__tel"><strong>Tel:</strong>
+      <span class="card-store__tel">
+        <strong>Tel:</strong>
         <a href="tel:018726511101" class="tel-uri">01872 6511 101</a>
       </span>
-      {{#if fax}}
-        <span class="card-store__fax"><strong>Fax:</strong> 01872 6511 101</span>
-      {{/if}}
     </div>
+
+    <div class="card-store__actions">
+      <a href="https://maps.google.com/maps?saddr=My+Location&daddr=50.263957,-5.123544"
+         target="_blank"
+         rel="noopener noreferrer">
+        Navigate to
+      </a>
+    </div>
+
     {{#if features}}
       <div class="card-store__features">
         <div class="card-store__title">Features</div>
@@ -52,10 +94,5 @@
         <div class="card-store__feature">displays with in-store design service</div>
       </div>
     {{/if}}
-    {{#if view-map}}
-      <div class="card-store__actions">
-        <a href="page_store-locator-details.html">View map</a>
-      </div>
-    {{/if}}
   </div>
-</div>
+</div>

package/src/components/card_bloomreach_media_banner.hbs

@@ -0,0 +1,10 @@
+<div
+    class="card-bloomreach-media-banner product-card"
+    data-slots="{{slots}}"
+    data-dimension="{{dimension}}"
+    data-type="bmb"
+>
+  {{#if htmlContent}}
+    {{{htmlContent}}}
+  {{/if}}
+</div>

package/src/components/card_product_banner_v2.hbs

@@ -5,6 +5,9 @@
      {{#if required-amount-desktop}}data-required-amount-desktop="{{required-amount-desktop}}"{{/if}}
 >
     <a class="card-product-banner__link" href="{{href}}">
-        <img class="card-product-banner__image" src="{{src}}" alt="banner">
+        <picture class="card-product-banner__picture">
+            <source class="card-product-banner__image" srcset="{{#if mobile-src}}{{mobile-src}}{{else}}{{src}}{{/if}}" media="(max-width: 768px)">
+            <img class="card-product-banner__image" src="{{src}}" alt="banner">
+        </picture>
     </a>
 </div>

package/src/components/card_sponsor_banner.hbs

@@ -3,6 +3,9 @@
   {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
 >
   <a class="card-sponsor-banner__link" href="{{href}}">
-    <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
+    <picture class="card-sponsor-banner__picture">
+      <source srcset="{{#if mobile-src}}{{mobile-src}}{{else}}{{src}}{{/if}}" media="(max-width: 768px)">
+      <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
+    </picture>
   </a>
 </div>

package/src/components/cart-voucher.hbs

@@ -1,5 +1,14 @@
 <li>
-  {{{text}}}
+  {{#ifCond switch-vat '&&' textExcVat}}
+    <span class="including-vat">
+      {{{text}}}
+    </span>
+    <span class="excluding-vat d-none">
+      {{{textExcVat}}}
+    </span>
+  {{else}}
+    {{{text}}}
+  {{/ifCond}}
   {{#if isDeletable}}
     <span class="icon checkout-widget__voucher-remove">
       <span class="fas fa-times"></span>

package/src/components/checkout_order-summary-new.hbs

@@ -1,4 +1,4 @@
-<div class="checkout-widget checkout-widget_order-summary {{#if mod}}checkout-widget-{{mod}}{{/if}}">
+<div class="checkout-widget checkout-widget_order-summary {{#if mod}}checkout-widget-{{mod}}{{/if}}"{{#if hideDeliveryCostMessage}} data-hide-delivery-cost-message="true"{{/if}}>
     {{#unless head}}
         <h3 class="heading-3 checkout-widget__header">Order Summary</h3>
     {{/unless}}
@@ -16,6 +16,15 @@
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
+                {{#ifCond (lookup this "mod") "==" "delivery"}}
+                {{#unless ../hideDeliveryCostMessage}}
+                <li class="checkout-widget__item checkout-widget__item-delivery-cost-message">
+                    <span class="checkout-widget__item-value" id="order-delivery-cost-message">
+                        Final delivery cost confirmed at checkout
+                    </span>
+                </li>
+                {{/unless}}
+                {{/ifCond}}
             {{/each}}
         {{/if}}
         {{#unless hideApplyVoucher}}
@@ -34,7 +43,7 @@
               </span>
               <ul class="checkout-widget__details-hidden collapse" id="acheckout-widget-accordion-{{id}}">
                   {{#each discounts}}
-                      {{> cart-voucher}}
+                      {{> cart-voucher switch-vat=../switch-vat}}
                   {{/each}}
               </ul>
               <span class="checkout-widget__detail-value">£0.00</span>

package/src/components/click-and-collect-modal.hbs

@@ -10,20 +10,6 @@
                     <div class="click-and-collect__locator">
                         <form action="#" class="click-and-collect__locator-form">
 
-                            <!--
-                            <div class="form-row" data-row-required>
-                                <div class="click-and-collect__locator-town form-row__field">
-                                    <input class="tbx" placeholder="Enter a town/city or postcode"
-                                           id="click-and-collect-town" type="text"
-                                           aria-label="Enter a town/city or postcode">
-                                </div>
-                                <div class="click-and-collect__locator-btn">
-                                    <button class="btn btn_full btn-primary" id="click-and-collect-submit">
-                                        <span class="btn__text">Find store</span>
-                                    </button>
-                                </div>
-                            </div>-->
-
                             <div class="form-row" data-row-required>
                                 <div class="click-and-collect__locator-town form-row__field">
                                         <div class="input-group">

package/src/components/date-selection.hbs

@@ -69,7 +69,7 @@
               <i class="fas fa-shipping-fast icon"></i>
             </span>
           <p class="description">
-            Select todays’ day on the calendar to get Wickes Rapid delivery
+            Select todays’ day on the calendar to get Rapid delivery.
           </p>
         </div>
           {{> delivery-types

package/src/components/delivery-types.hbs

@@ -3,9 +3,17 @@
     <button class="btn btn_full delivery-btn">
       {{#if title}}
         <span class="delivery-btn__content">
-              <span class="title">{{title}}</span>
-              <span class="subtitle">{{subtitle}}</span>
-            </span>
+          <span class="title">{{title}}</span>
+          <span class="subtitle">
+            {{subtitle}}
+            {{> info-icon
+                modification="rapid-info-icon d-none"
+                title="This is an estimated time provided by our third party courier and is subject to change"
+                data-placement="bottom"
+                data-container="body"
+            }}
+          </span>
+        </span>
         {{#if classImg}}
           <span class="delivery-btn__image">
             <i class="{{classImg}}"></i>

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/gift-cards.hbs

@@ -67,7 +67,7 @@
             }}
 
             <div class="giftcard__actions">
-              {{> button text="Add" modification="giftcard__btn" }}
+              {{> button text="Add" primary="true" modification="giftcard__btn" }}
             </div>
           </div>
         </form>

package/src/components/injected-content.hbs

@@ -2,7 +2,12 @@
     {{#each srp_injected_content.items}}
         {{#if banner}}
             <div class="srp-injected__image">
-                {{{banner.htmlText}}}
+                <a class="srp-injected__link" href="{{banner.href}}">
+                    <picture class="srp-injected__picture">
+                        <source class="srp-injected__img" srcset="{{#if banner.mobile-src}}{{banner.mobile-src}}{{else}}{{banner.src}}{{/if}}" media="(max-width: 768px)">
+                        <img class="srp-injected__img" src="{{banner.src}}" alt="{{banner.alt}}">
+                    </picture>
+                </a>
             </div>
         {{else}}
             <div class="srp-injected__content">

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/modal.hbs

@@ -1,6 +1,6 @@
 <!-- Bootstrap 4 modal dialog markup https://getbootstrap.com/docs/4.1/components/modal/ -->
 
-<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
+<div class="modal  modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}} {{classMod}}"
      id="{{id}}" role="dialog" tabindex="-1" data-backdrop="{{backdrop}}" data-keyboard={{#if keyboard}}{{keyboard}}{{else}}false{{/if}}
 >
   <div class="modal-dialog modal-box__container {{#if centered}}modal-dialog-centered{{/if}}" role="document">