wickes-css2 2.113.0-ripple.7 → 2.113.0

package/src/components/kitchen/price.hbs

@@ -1,54 +1,34 @@
 {{#with price}}
-  <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}}
+<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>
     {{/if}}
-    <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 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>
 {{/with}}

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

@@ -1,15 +1,9 @@
 {{#if strip_stickers.length}}
   <div class="strip-stickers">
     {{#each strip_stickers}}
-      {{#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}}
+      <div class="strip-sticker" style="background-color: {{background}}; color: {{text_colour}}">
+        {{text}}
+      </div>
     {{/each}}
   </div>
 {{/if}}

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

@@ -84,20 +84,3 @@
   </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/price-badges.hbs

@@ -1,14 +1,12 @@
 <div class="pdp__badges-wrapper">
-    {{#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 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>
 </div>

package/src/components/price-block-v2.hbs

@@ -1,292 +1,222 @@
 <div class="pdp-price-container">
-    <div class="pdp-price">
-        {{#if isDiscount}}
-            {{> price-badges}}
-        {{/if}}
-        <div class="pdp-price__value">
-            {{#if switch-vat}}
-                <div class="pdp-price-sale__value including-vat">
-                    {{#if isDiscount}}
-                        {{#ifCond price-vat '&&' was_price-vat}}
-                            <div class="pdp-price__old-price"><s>&pound;{{was_price-vat}}</s></div>
-                            <div class="main-price">
-                            <div class="main-price__value pdp-price__new-price">&pound;{{price-vat}}</div>
-                            <div class="main-price__vat">Inc.VAT</div>
-                        </div>
-                        {{else}}
-                            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
-                            <div class="main-price">
-                                <div class="main-price__value pdp-price__new-price">&pound;79.99</div>
-                                <div class="main-price__vat">Inc.VAT</div>
-                            </div>
-                        {{/ifCond}}
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;40 per SQM</div>
-                        {{/if}}
-                        {{#unless package}}
-                            <div class="pdp-price__remainder">You save &pound;40</div>
-                        {{/unless}}
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Offer price equivalent to &pound;24 per item
-                                </div>
-                            {{/if}}
-                        {{/if}}
-
-                    {{else}}
-                        {{#if price}}
-                            <div class="pdp-price__price">&pound;{{price}}</div>
-                        {{else}}
-                            <div class="pdp-price__price">&pound;79.99</div>
-                        {{/if}}
-                        {{#ifCond isExcludingDelivery '&&' package}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/ifCond}}
-                    {{/if}}
+  <div class="pdp-price">
+    {{#if isDiscount}}
+        {{> price-badges}}
+    {{/if}}
+    <div class="pdp-price__value">
+      {{#if switch-vat}}
+        <div class="pdp-price-sale__value including-vat">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
+            <div class="main-price">
+              <div class="main-price__value pdp-price__new-price">&pound;79.99</div>
+              <div class="main-price__vat">Inc.VAT</div>
+            </div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;40 per SQM</div>
+            {{/if}}
+            <div class="pdp-price__remainder">You save &pound;40</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+            {{/if}}
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
                 </div>
-                <div class="pdp-price-sale__value excluding-vat d-none">
-                    {{#if isDiscount}}
-                        {{#ifCond price '&&' was_price}}
-                            <div class="pdp-price__old-price"><s>&pound;{{was_price}}</s></div>
-                            <div class="main-price">
-                            <div class="main-price__value pdp-price__new-price">&pound;{{price}}</div>
-                            <div class="main-price__vat">Exc.VAT</div>
-                        </div>
-                        {{else}}
-                            <div class="pdp-price__old-price"><s>&pound;118.99</s></div>
-                            <div class="main-price">
-                                <div class="main-price__value pdp-price__new-price">&pound;78.99</div>
-                                <div class="main-price__vat">Exc.VAT</div>
-                            </div>
-                        {{/ifCond}}
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;39 per SQM</div>
-                        {{/if}}
-                        {{#unless package}}
-                            <div class="pdp-price__remainder">You save &pound;39</div>
-                        {{/unless}}
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Offer price equivalent to &pound;23 per item
-                                </div>
-                            {{/if}}
-                        {{/if}}
-
-                    {{else}}
-                        {{#if price}}
-                            <div class="pdp-price__price">&pound;{{price}}</div>
-                        {{else}}
-                            <div class="pdp-price__price">&pound;79.99</div>
-                        {{/if}}
-                        {{#ifCond isExcludingDelivery '&&' package}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/ifCond}}
-                    {{/if}}
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
                 </div>
-            {{else}}
-                <div class="pdp-price-sale__value">
-                    {{#if isDiscount}}
-                        {{#ifCond price '&&' was_price}}
-                            <div class="pdp-price__old-price"><s>&pound;{{was_price}}</s></div>
-                            <div class="pdp-price__new-price">&pound;{{price}}</div>
-                        {{else}}
-                            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
-                            <div class="pdp-price__new-price">&pound;79.99</div>
-                        {{/ifCond}}
-
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;40 per SQM</div>
-                        {{/if}}
-
-                        {{#unless package}}
-                            <div class="pdp-price__remainder">You save &pound;40</div>
-                        {{/unless}}
-
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Long offer message Lorem ipsum dolor sit amet,
-                                    consectetur adipiscing elit.
-                                    Aenean euismod bibendum laoreet
-                                </div>
-                            {{/if}}
-                        {{/if}}
-                    {{else}}
-                        {{#if price}}
-                            <div class="pdp-price__price">&pound;{{price}}</div>
-                        {{else}}
-                            <div class="pdp-price__price">&pound;79.99</div>
-                        {{/if}}
-                        {{#ifCond isExcludingDelivery '&&' package}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/ifCond}}
-                    {{/if}}
+              {{else}}
+                <div class="pdp-price__description">
+                  Offer price equivalent to &pound;24 per item
                 </div>
+              {{/if}}
             {{/if}}
 
-            {{#ifCond package '&&' currentlyInStock}}
-                <div class="pdp-price__message-wrapper">
-                    <div>
-                        <span class="pdp-price__delivery-message">Delivery:</span>
-                        <span>Delivery options shown at checkout. Items may be delivered separately. Minimum £4 delivery charge applies.</span>
-                    </div>
-
-                    <div>
-                        <span class="pdp-price__delivery-message">Click & Collect:</span>
-                        <span>Availability shown at checkout.</span>
-                    </div>
-                </div>
-            {{/ifCond}}
-
-            {{#if klarna-placement}}
-              <div class="pdp-price__klarna-payment">
-                <klarna-placement
-                    data-key="credit-promotion-badge"
-                    data-locale="en-GB"
-                    data-purchase-amount="12000"
-                    {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
-                ></klarna-placement>
-              </div>
-            {{/if}}
-            {{#if billie-placement}}
-            <div class="pdp-price__billie-payment">
-              {{> billie-online-messaging}}
+          {{else}}
+            <div class="pdp-price__price">&pound;79.99</div>
+          {{/if}}
+        </div>
+        <div class="pdp-price-sale__value excluding-vat d-none">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;118.99</s></div>
+            <div class="main-price">
+              <div class="main-price__value pdp-price__new-price">&pound;78.99</div>
+              <div class="main-price__vat">Exc.VAT</div>
             </div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;39 per SQM</div>
             {{/if}}
-            {{#if clearpay-placement}}
-              {{> clearpay}}
+            <div class="pdp-price__remainder">You save &pound;39</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
             {{/if}}
-        </div>
-        {{#if currentlyInStock}}
-            {{#unless package}}
-                <div class="pdp-price__value pdp-price__value_extended">
-                    <div class="pdp-price__delivery">
-                        <span class="delivery-link">Delivery</span>
-                        <span class="delivery-info">Available to certain postcodes</span>
-                    </div>
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
                 </div>
-            {{/unless}}
-        {{else if notifyMe}}
-            <div class="pdp-price__oos">
-                <a href="#" class="btn btn-action btn_full">
-                    <span class="btn__text">Notify Me</span>
-                </a>
-                <p>Currently out of stock, use our Notify Me button to receive an email when this item is available</p>
-            </div>
-        {{else}}
-            <div class="pdp-price__oos">
-                <strong>Out of Stock</strong>
-                <p>Sorry, this product is out of stock</p>
-            </div>
-            <div class="pdp-price__in-store-only">
-                <p>In Store Only</p>
-            </div>
-        {{/if}}
-        <div class="pdp-price__controls">
-            {{#if isSize}}
-                <div class="pdp-price__size">
-                    {{> form-row row-mod="sort-order-by" dropdown="true" id="d1" placeholder="Please select a size"}}
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
                 </div>
+              {{else}}
+                <div class="pdp-price__description">
+                  Offer price equivalent to &pound;23 per item
+                </div>
+              {{/if}}
             {{/if}}
-            <div class="
-                pdp-price__control-holder
-                {{#unless wisdom}}
-                    {{#if big-wins}}
-                        control-holder__big-wins
+
+                    {{else}}
+                        <div class="pdp-price__price">&pound;79.99</div>
                     {{/if}}
-                {{/unless}}
-            ">
-                {{#unless isQuantity}}
-                    <label for="quantity-field" class="quantity-label">Quantity: </label>
-                    <input type="text" inputmode="numeric" required="" pattern="[0-9]*\d" id="quantity-field"
-                           class="tbx tbx_quantity"
-                           value="1">
-                {{/unless}}
-                {{#unless default-store}}
-                    <div class="pdp-price__calculator-wrapper">
-                        <a href="#">
-                        <span class="icon">
-                        <i class="far fa-calculator"></i>
-                        </span>
-                            Calculator
-                        </a>
-                    </div>
-                {{/unless}}
-            </div>
-            {{> bloomreach/why-not-add context=mockDataKey}}
-            {{#if mfeProductCalculator}}
-                <div class="pdp-price__quantity-calculator">MFE Calculator Placeholder</div>
+                </div>
+      {{else}}
+        <div class="pdp-price-sale__value">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
+            <div class="pdp-price__new-price">&pound;79.99</div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;40 per SQM</div>
+            {{/if}}
+            <div class="pdp-price__remainder">You save &pound;40</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
             {{/if}}
-            {{#if currentlyInStock}}
-                {{> pdp-price-actions
-                        installation=install
-                        order-sample=sample
-                        c-and-c=cc
-                        delivery=delivery
-                        big-wins=big-wins
-                        wisdom=wisdom
-                        mcfc=mcfc
-                        available=available
-                        stock-accordion="stock-accordion"
-                        isUserNonRegistered=isUserNonRegistered
-                        nearest-purchase=nearest-purchase
-                        unhappy=unhappy
-                        nearestAmount=nearestAmount
-                        nearestName=nearestName
-                }}
-                <div class="pdp-price__call-to-actions">
-                    {{#unless default-store}}
-                        <div class="pdp-price__control-holder pdp-price__actions">
-                            <a href="#" class="link-secondary">Check stock in your local store</a>
-                        </div>
-                    {{/unless}}
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
                 </div>
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
+                </div>
+              {{else}}
+                <div class="pdp-price__description">
+                  Long offer message Lorem ipsum dolor sit amet,
+                  consectetur adipiscing elit.
+                  Aenean euismod bibendum laoreet
+                </div>
+              {{/if}}
             {{/if}}
+          {{else}}
+            <div class="pdp-price__price">&pound;79.99</div>
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if currentlyInStock}}
+        <div class="pdp-price__value pdp-price__value_extended">
+          <div class="pdp-price__delivery">
+            <span class="delivery-link">Delivery</span>
+            <span class="delivery-info">Available to certain postcodes</span>
+          </div>
+        </div>
+      {{else if notifyMe}}
+        <div class="pdp-price__oos">
+          <a href="#" class="btn btn-primary btn_full btn--notify-open" data-target="#modal-notify-me">
+            <i class="fas fa-bell"></i>
+            <span class="btn__text">Notify Me</span>
+          </a>
+          <p>Currently out of stock, use our Notify Me button to receive an email when this product is available</p>
+        </div>
+      {{else}}
+        <div class="pdp-price__oos">
+          <strong>Out of Stock</strong>
+          <p>Sorry, this product is out of stock</p>
+        </div>
+        <div class="pdp-price__in-store-only">
+          <p>In Store Only</p>
+        </div>
+      {{/if}}
+      {{#if klarna-placement}}
+        <div class="pdp-price__klarna-payment">
+          <klarna-placement
+          data-key="credit-promotion-badge"
+          data-locale="en-GB"
+          data-purchase-amount="12000"
+          {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
+          ></klarna-placement>
+        </div>
+      {{/if}}
+      {{#if billie-placement}}
+        <div class="pdp-price__billie-payment">
+          {{> billie-online-messaging}}
+        </div>
+      {{/if}}
+      {{#if clearpay-placement}}
+        {{> clearpay}}
+      {{/if}}
+    </div>
+    <div class="pdp-price__controls">
+      {{#if isSize}}
+        <div class="pdp-price__size">
+          {{> form-row row-mod="sort-order-by" dropdown="true" id="d1" placeholder="Please select a size"}}
+        </div>
+      {{/if}}
+
+      {{#if (or (not isQuantity) (not default-store))}}
+        <div class="pdp-price__control-holder {{#unless wisdom}}{{#if big-wins}}control-holder__big-wins{{/if}}{{/unless}}">
+          {{#unless isQuantity}}
+            <label for="quantity-field" class="quantity-label">Quantity: </label>
+            <input type="text" inputmode="numeric" pattern="[0-9]*" id="quantity-field"
+                   class="tbx tbx_quantity"
+                   value="1">
+          {{/unless}}
+          {{#unless default-store}}
+            <div class="pdp-price__calculator-wrapper">
+              <a href="#">
+              <span class="icon">
+                <i class="far fa-calculator"></i>
+              </span>
+                Calculator
+              </a>
+            </div>
+          {{/unless}}
+        </div>
+      {{/if}}
+
+      {{> bloomreach/why-not-add context=mockDataKey}}
+
+      {{#if mfeProductCalculator}}
+        <div class="pdp-price__quantity-calculator">MFE Calculator Placeholder</div>
+      {{/if}}
+      {{#if currentlyInStock}}
+        {{> pdp-price-actions
+        installation=install
+        order-sample=sample
+        c-and-c=cc
+        delivery=delivery
+        big-wins=big-wins
+        wisdom=wisdom
+        mcfc=mcfc
+        available=available
+        stock-accordion="stock-accordion"
+        isUserNonRegistered=isUserNonRegistered
+        nearest-purchase=nearest-purchase
+        unhappy=unhappy
+        nearestAmount=nearestAmount
+        nearestName=nearestName
+        }}
+        <div class="pdp-price__call-to-actions">
+          {{#unless default-store}}
+            <div class="pdp-price__control-holder pdp-price__actions">
+              <a href="#" class="link-secondary">Check stock in your local store</a>
+            </div>
+          {{/unless}}
         </div>
+      {{/if}}
     </div>
+  </div>
 </div>