wickes-css2 2.113.0 → 2.116.0

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>

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

@@ -1,222 +1,312 @@
 <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}}
-            <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 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>
-                <div class="pdp-price__terms">
-                  <a href="#">
-                    Cashback Terms and Conditions
-                  </a>
+
+                <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>
-              {{else}}
-                <div class="pdp-price__description">
-                  Offer price equivalent to &pound;24 per item
+            {{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}}
                 </div>
-              {{/if}}
             {{/if}}
 
-          {{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}}
-            <div class="pdp-price__remainder">You save &pound;39</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.
+            {{#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>
-                <div class="pdp-price__terms">
-                  <a href="#">
-                    Cashback Terms and Conditions
-                  </a>
+            {{/ifCond}}
+
+            {{#if currentlyInStock}}
+                {{#if noDelivery}}
+                    <div class="pdp-price__oos">
+                        <strong>Not available for delivery</strong>
+                        <p>Sorry, this product is not available for delivery</p>
+                    </div>
+                {{else}}
+                    {{#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>
+                        </div>
+                    {{/unless}}
+                {{/if}}
+            {{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__description">
-                  Offer price equivalent to &pound;23 per item
+            {{else}}
+                <div class="pdp-price__oos">
+                    <strong>Out of Stock</strong>
+                    <p>Sorry, this product is out of stock</p>
                 </div>
-              {{/if}}
-            {{/if}}
-
-                    {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
-                    {{/if}}
+                <div class="pdp-price__in-store-only">
+                    <p>In Store Only</p>
                 </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 similarProductsMockDataKey}}
+                {{> bloomreach/why-not-add context=similarProductsMockDataKey similarProducts=true}}
             {{/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>
+
+            {{#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>
-              {{else}}
-                <div class="pdp-price__description">
-                  Long offer message Lorem ipsum dolor sit amet,
-                  consectetur adipiscing elit.
-                  Aenean euismod bibendum laoreet
+            {{/if}}
+            {{#if billie-placement}}
+                <div class="pdp-price__billie-payment">
+                    {{> billie-online-messaging}}
                 </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"}}
+            {{#if clearpay-placement}}
+                {{> clearpay}}
+            {{/if}}
         </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 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}}
+
+            <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" 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>
-          {{/unless}}
-        </div>
-      {{/if}}
 
-      {{> bloomreach/why-not-add context=mockDataKey}}
+            {{#unless similarProductsMockDataKey}}
+                {{#if isWhyNotAdd}}
+                    {{> bloomreach/why-not-add context=mockDataKey}}
+                {{/if}}
+            {{/unless}}
 
-      {{#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}}
+            {{#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>
-      {{/if}}
     </div>
-  </div>
 </div>

package/src/components/product-main-info-v2.hbs

@@ -49,6 +49,7 @@
             <script id="isitetv_media_loader" src="./js/components/pdp-video.js"></script>
         </div>
     {{/if}}
+    {{#unless hideShareButton}}
     <div class="product-main-info__share">
         <a href="#">
             <button class="btn btn-primary share-button">
@@ -57,6 +58,7 @@
             <span>Share product</span>
         </a>
     </div>
+    {{/unless}}
     {{#unless manualShareTooltip}}
       <div class="a2a_kit a2a_kit_size_32 a2a_default_style product-main-info__share-buttons share-buttons">
         <ul class="share-buttons__list">

package/src/components/suite-includes.hbs

@@ -0,0 +1,66 @@
+<div class="suite-includes">
+    <h4 class="suite-includes__header">This suite includes:</h4>
+    <div>
+        {{#extend "image-accordion" images=products hidden="hidden-state" collapsed="image-accordion--collapsed"}}
+            {{#content "content"}}
+                {{> suite-product-card  cards=products}}
+            {{/content}}
+        {{/extend}}
+
+        <div class="suite-includes__products">
+            {{> suite-product-card  cards=products}}
+        </div>
+
+        <div class="suite-includes__info">
+            <div>
+                <h6 class="suite-includes__total">Total:</h6>
+                <div class="suite-includes__price-container">
+                    {{#if switch-vat}}
+                        {{#ifCond was_price '&&' was_price-vat}}
+                            <div class="suite-includes__old-price including-vat">
+                                <s>&pound;{{was_price-vat}}</s>
+                            </div>
+                            <div class="suite-includes__old-price excluding-vat d-none">
+                                <s>&pound;{{was_price}}</s>
+                            </div>
+                        {{/ifCond}}
+                        <div class="suite-includes__price{{#if was_price}} suite-includes__price--offer{{/if}}">
+                            <div class="suite-includes__vat including-vat">
+                                <span>&pound;{{price-vat}}</span>
+                                <span class="suite-includes__vat-text">Inc.VAT</span>
+                            </div>
+                            <div class="suite-includes__vat excluding-vat d-none">
+                                <span>&pound;{{price}}</span>
+                                <span class="suite-includes__vat-text">Exc.VAT</span>
+                            </div>
+                        </div>
+                    {{else}}
+                        {{#if was_price}}
+                            <div class="suite-includes__old-price">
+                                <s>&pound;{{was_price}}</s>
+                            </div>
+                        {{/if}}
+                        <div class="suite-includes__price {{#if was_price}} suite-includes__price--offer{{/if}}">
+                            &pound;{{price}}
+                        </div>
+                    {{/if}}
+                    <a class="suite-includes__delivery" href="#">Excluding delivery</a>
+                </div>
+            </div>
+            <div class="suite-includes__button">
+                {{#if postcodeChecker}}
+                    {{> postcode-checker modifyClass="postcode-checker--mobile-only"}}
+                {{else}}
+                    {{> button
+                        text="Add to basket"
+                        full=true
+                        action=true
+                        type="button"
+                        showLoader=true
+                        modification="package-bulk-add"
+                    }}
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</div>