wickes-css2 2.103.0-RG-1587-replace-klarna-logo-with-svg-image.1 → 2.103.0-RG-1742-billie-30-60-90-days.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.103.0-RG-1587-replace-klarna-logo-with-svg-image.1",
+  "version": "2.103.0-RG-1742-billie-30-60-90-days.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -108,7 +108,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "custom-tag/RG-1587-replace-klarna-logo-with-svg-image",
+        "name": "custom-tag/RG-1742-billie-30-60-90-days",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/card_product_v2.hbs

@@ -19,11 +19,11 @@
                     <div class="product-card__reviews product-card__reviews-v2">
                         <div class="product-rating product-rating-v2">
                             <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>
+                                    <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 review-rating}}{{review-rating}}{{else}}0{{/if}}">
                                     <span class="star-overlay">
@@ -48,11 +48,6 @@
                     </div>
                 {{/if}}
             </div>
-            {{#if isSponsor}}
-              <div class="product-card__sponsored">Sponsored</div>
-            {{else}}
-              <div class="product-card__sponsored product-card__sponsored--empty">&nbsp;</div>
-            {{/if}}
             {{#if switch-vat}}
                 <div class="including-vat product-card__price {{#if sale}} product-card__price_sale {{/if}} {{#if
                         recommended}}product-card__min-height{{/if}}">

package/src/components/checkout-payment-details-v2.hbs

@@ -52,12 +52,11 @@
                       value="klarna"
                   >
                   <ins></ins>
-                  <div class="klarna-logo">
-                    <img
-                        src="./img/payment/checkout/klarna.svg"
-                        class="payments-checkout__image"
-                        alt="klarna"
-                    >
+                  <div class="klarna-logo-img">
+                    <klarna-placement
+                        data-key="sidebar-promotion-auto-size"
+                        data-locale="en-GB"
+                    ></klarna-placement>
                   </div>
                 </label>
               </div>
@@ -67,13 +66,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-clearpay">
                 <label
-                  class="rbn rbn_align clearpay-label__rbn"
-                  for="checkout-payment-details-clearpay">
+                    class="rbn rbn_align clearpay-label__rbn"
+                    for="checkout-payment-details-clearpay">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-clearpay"
-                    name="payment-method"
-                    value="clearpay">
+                      type="radio"
+                      id="checkout-payment-details-clearpay"
+                      name="payment-method"
+                      value="clearpay">
                   <ins></ins>
                   <div class="clearpay-logo">
                     <img class="payments-checkout__image" src="./img/payment/checkout/clearpay.svg" alt="clearpay">
@@ -86,13 +85,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-apple">
                 <label
-                  class="rbn rbn_align apple-label__rbn"
-                  for="checkout-payment-details-apple">
+                    class="rbn rbn_align apple-label__rbn"
+                    for="checkout-payment-details-apple">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-apple"
-                    name="payment-method"
-                    value="apple">
+                      type="radio"
+                      id="checkout-payment-details-apple"
+                      name="payment-method"
+                      value="apple">
                   <ins></ins>
                   <div class="apple-logo">
                     <img src="img/apple-pay.svg" alt="apple pay">
@@ -105,13 +104,13 @@
             <div class="form-row">
               <div class="form-row__field form-row__field-google">
                 <label
-                  class="rbn rbn_align google-label__rbn"
-                  for="checkout-payment-details-google">
+                    class="rbn rbn_align google-label__rbn"
+                    for="checkout-payment-details-google">
                   <input
-                    type="radio"
-                    id="checkout-payment-details-google"
-                    name="payment-method"
-                    value="google">
+                      type="radio"
+                      id="checkout-payment-details-google"
+                      name="payment-method"
+                      value="google">
                   <ins></ins>
                   <div class="google-logo">
                     <img src="img/google-pay-mark.png" alt="google pay">
@@ -125,7 +124,8 @@
               <label class="rbn rbn_align" for="checkout-payment-details-paypal">
                 <input type="radio" id="checkout-payment-details-paypal" name="payment-method" value="paypal">
                 <ins></ins>
-                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24" alt="paypal">
+                <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24"
+                     alt="paypal">
               </label>
             </div>
           </div>
@@ -164,13 +164,31 @@
         </div>
       </div>
 
+      <div class="form-row js-billie-repayment-terms" style="display: none" data-billie data-row-required data-message="Please select repayment terms">
+        <div class="form-row__field">
+          {{> checkout-payment-repayment-terms
+              name="repaymentTerms"
+              title="Select repayment terms"
+              repaymentTerms=(array
+                  (hash id="repay-30" value="30" top="30" bottom="days")
+                  (hash id="repay-60" value="60" top="60" bottom="days")
+                  (hash id="repay-90" value="90" top="90" bottom="days")
+              )
+          }}
+        </div>
+      </div>
+
       {{> checkout-payment-info-block
+          showRepaymentTerms=false
           dataAttr="data-klarna"
           blockClass="checkout-payment-details__klarna"
           infoClass="klarna-info"
 
           heading="Choose your way to pay"
-          brandLogoHtml="<img src='./img/klarna.svg' alt='klarna'>"
+          brandLogoHtml="<klarna-placement
+                   data-key='sidebar-promotion-auto-size'
+                   data-locale='en-GB'
+                 ></klarna-placement>"
 
           listItem1="Pay in 3. Interest-free."
           listItem2="Pay now or Pay in 30 days."
@@ -198,10 +216,11 @@
 
       {{> checkout-payment-info-block
           dataAttr="data-billie"
+          showRepaymentTerms=true
           blockClass="checkout-payment-details__billie"
           infoClass="billie-info"
 
-          heading="Get first. Pay later <br> Pay 30 days after shipment"
+          heading="Get first. Pay later <br> Pay <span class='term'>30</span> days after shipment"
           brandLogoHtml="<img
             src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
             alt='Billie Pay Later'
@@ -224,12 +243,11 @@
           <img class="clearpay-widget__image" src="./img/payment/checkout/clearpay-widget.png" alt="clearpay widget">
         </div>
       </div>
-
-
       <div class="billing-address">
         {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
       </div>
-      <div data-existing-card class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
+      <div data-existing-card
+           class="form-row form-row__action form-row__action_custom checkout-payment-details__place-order paypal__row">
         <div class="form-row__col-btn" data-paypal style="display: none;">
           <a class="pay-pal_wrap" href="./page_checkout_confirmation-new.html">
             <div class="buttons-container">

package/src/components/checkout-payment-repayment-terms.hbs

@@ -0,0 +1,25 @@
+<div class="repayment-terms">
+  <div class="repayment-terms__title">
+    <span class="repayment-terms__asterisk">*</span>
+    <span>Select repayment terms</span>
+  </div>
+
+  <div class="repayment-terms__chips" role="radiogroup">
+    {{#each repaymentTerms}}
+      <div class="repayment-terms__chip">
+        <input
+                class="repayment-terms__input"
+                type="radio"
+                name="repaymentTerms"
+                id="{{id}}"
+                value="{{value}}"
+        />
+
+        <label class="repayment-terms__label" for="{{id}}">
+          <span class="repayment-terms__label-top">{{top}}</span>
+          <span class="repayment-terms__label-bottom">{{bottom}}</span>
+        </label>
+      </div>
+    {{/each}}
+  </div>
+</div>

package/src/components/checkout_payment-new.hbs

@@ -18,7 +18,10 @@
             <div>Payment method:</div>
         </div>
         <div class="klarna-logo-img">
-            <img src="./img/klarna.svg" alt="klarna">
+            <klarna-placement
+                data-key="sidebar-promotion-auto-size"
+                data-locale="en-GB"
+            ></klarna-placement>
         </div>
     </div>
     {{else if billie}}

package/src/components/checkout_payment-other-methods.hbs

@@ -2,7 +2,10 @@
   <h3 class="heading-3">Payment</h3>
   {{#if klarna}}
     <div class="mb-3 klarna-logo-img">
-        <img src="./img/klarna.svg" alt="klarna">
+      <klarna-placement
+        data-key="sidebar-promotion-auto-size"
+        data-locale="en-GB"
+      ></klarna-placement>
     </div>
   {{else}}
     <img class="mb-3" src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png">

package/src/components/injected-content.hbs

@@ -10,4 +10,4 @@
             </div>
         {{/if}}
     {{/each}}
-</div>
+</div>

package/src/components/payments-checkout-v2.hbs

@@ -3,11 +3,16 @@
   <ul class="payments-checkout__list">
     {{#if billieIcon}}
       <li class="payments-checkout__item">
-        <img class="payments-checkout__image" src="./img/payment/checkout/billie.svg" alt="billie">
+        <img class="payments-checkout__image" src="./img/payment/footer/billie.svg" alt="Billie">
       </li>
     {{else}}
       <li class="payments-checkout__item">
-         <img class="payments-checkout__image" src="./img/payment/checkout/klarna.svg" alt="klarna">
+        <span class="payments-checkout-klarna">
+          <klarna-placement
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
+          ></klarna-placement>
+        </span>
       </li>
     {{/if}}
     {{#each payments-checkout-list}}

package/src/components/payments-checkout.hbs

@@ -6,7 +6,12 @@
         </li>
       {{else}}
         <li class="payments-checkout__item">
-            <img class="payments-checkout__image" src="./img/payment/checkout/klarna.svg" alt="klarna">
+            <span class="payments-checkout-klarna">
+                <klarna-placement
+                    data-key="sidebar-promotion-auto-size"
+                    data-locale="en-GB"
+                ></klarna-placement>
+            </span>
         </li>
       {{/if}}
         {{#if clearPayIcon}}

package/src/components/payments.hbs

@@ -7,7 +7,11 @@
       </li>
     {{else}}
       <li class="payways__item">
-        <img class="payways__image" src="./img/payment/footer/klarna.svg" alt="klarna">
+      <span class="payways-klarna">
+          <klarna-placement
+              data-key="sidebar-promotion-auto-size"
+              data-locale="en-GB"
+          ></klarna-placement>
       </span>
       </li>
     {{/if}}

package/src/components/table_order-details-klarna.hbs

@@ -66,7 +66,7 @@
 {{#with paymentInfo}}
     {{> order-details-section
             col-1-title="Payment details"
-            col-1="<div class='klarna-logo-img'><img src='./img/klarna.svg' alt='klarna'></div>"
+            col-1="<div class='klarna-logo-img'><klarna-placement data-key='sidebar-promotion-auto-size' data-locale='en-GB'></klarna-placement></div>"
             col-2-title="Voucher"
             col-2=voucher
     }}

package/src/components/table_payment.hbs

@@ -18,7 +18,10 @@
                     <div class="table__content-heading">Payment details</div>
                     <div class="pt-4">
                         <div class="klarna-logo-img">
-                            <img src="./img/klarna.svg" alt="klarna">
+                            <klarna-placement
+                                data-key="sidebar-promotion-auto-size"
+                                data-locale="en-GB"
+                            ></klarna-placement>
                         </div>
                     </div>
                 {{/if}}

package/src/data/data_search-results_v2.json

@@ -4,70 +4,25 @@
       {
         "src": "https://eu-images.contentstack.com/v3/assets/blt066259863543a0d2/bltf2fa907eeef56dc5/62161f9af3bcce42fe002786/PLP-DecoratingTools-230222.jpg",
         "href": "/sitemap.html",
-        "desktop-position": 8,
-        "mobile-position": 7,
+        "desktop-position": 3,
+        "mobile-position": 2,
         "show": false
-      }
-    ],
-    "sponsor-product": [
-      {
-        "isSponsor": true,
-        "desktop-position": 4,
-        "mobile-position": 3,
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
-        "code": "492747",
-        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
-        "descr": "Offer is valid for the same product and size in a single purchase",
-        "reviews": "0",
-        "review-rating": "4.3",
-        "price": "<span class='product-card__price-value-text'>From</span> £99,009.00",
-        "perSQM": "£1,444.00",
-        "recommended": false,
-        "badge-text": "new",
-        "badge-color": "green",
-        "badge-text-color": "gray"
       },
       {
-        "isSponsor": true,
-        "desktop-position": 5,
-        "mobile-position": 4,
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
-        "code": "492747",
-        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
-        "descr": "Offer is valid for the same product and size in a single purchase",
-        "reviews": "0",
-        "review-rating": "4.3",
-        "price": "<span class='product-card__price-value-text'>From</span> £99,009.00",
-        "perSQM": "£1,444.00",
-        "recommended": false,
-        "badge-text": "new",
-        "badge-color": "green",
-        "badge-text-color": "gray"
-      },
-      {
-        "isSponsor": true,
+        "src": "https://eu-images.contentstack.com/v3/assets/blt066259863543a0d2/bltf2fa907eeef56dc5/62161f9af3bcce42fe002786/PLP-DecoratingTools-230222.jpg",
+        "href": "/sitemap.html",
         "desktop-position": 7,
         "mobile-position": 5,
-        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
-        "code": "721657",
-        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
-        "descr": "Offer is valid for the same product and size in a single purchase",
-        "reviews": "21",
-        "review-rating": "4.4",
-        "price": "£2,009.00",
-        "SQM": "£1,555.00",
-        "click-collect-only": true,
-        "badge-text": "Clearance",
-        "badge-color": "yellow",
-        "badge-text-color": "white"
-      }
-    ],
-    "sponsor-banner": [
+        "required-amount-desktop": 6,
+        "required-amount-mobile": 4,
+        "show": false
+      },
       {
         "src": "https://eu-images.contentstack.com/v3/assets/blt066259863543a0d2/bltf2fa907eeef56dc5/62161f9af3bcce42fe002786/PLP-DecoratingTools-230222.jpg",
         "href": "/sitemap.html",
-        "desktop-position": 6,
-        "mobile-position": 8
+        "required-amount-desktop": 11,
+        "required-amount-mobile": 9,
+        "show": false
       }
     ],
     "products": [
@@ -241,6 +196,136 @@
         "recommended": false,
         "new": true,
         "new-range": true
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "737934",
+        "src": "./img/placeholders/map-2.png",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "price": "£2,009.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker - Black with Chrome Trim ",
+        "code": "247767",
+        "src": "./img/placeholders/map-2.png",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "price": "£2,009.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "978004",
+        "src": "./img/placeholders/map-2.png",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "price": "£2,009.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "523586",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "perSQM": "£1,444.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "729112",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "price": "£2,315.00",
+        "recommended": false
+      },
+      {
+        "sale": {
+          "discount": "15% off",
+          "price": "£2,315.00"
+        },
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "279966",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "813053",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "SQM": "£1,555.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "655972",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "757775",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "276523",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "334333",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "597258",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Alder-Trainer-7~GPID_1100568095_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "806538",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+        "perSQM": "£1,444.00",
+        "recommended": false
+      },
+      {
+        "title": "Rangemaster Classic Deluxe 90 Ceramic Range Cooker",
+        "code": "276521",
+        "src": "https://media.wickes.co.uk/is/image/wickes/normal/Footwear-Tough-Grit-Oak-Boot-7~GPID_1100568107_00",
+        "descr": "Offer is valid for the same product and size in a single purchase",
+        "reviews": "0",
+
+        "recommended": false
       }
     ]
   }

package/src/data/data_wismo.json

@@ -64,7 +64,7 @@
       },
       {
         "name": "Payment details:",
-        "value": "<div class='klarna-logo-img mt-1'><img src='./img/klarna.svg' alt='klarna'></div>"
+        "value": "<div class='klarna-logo-img mt-1'><klarna-placement data-key='sidebar-promotion-auto-size' data-locale='en-GB'></klarna-placement></div>"
       },
       {
         "name": "Voucher:",