wickes-css2 2.101.0-develop.4 → 2.101.0-develop.6

package/build/img/mastercard.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="23" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.2207 0.339844C32.369 0.339844 37.3535 5.26471 37.3535 11.3398C37.3535 17.415 32.369 22.3398 26.2207 22.3398C23.4644 22.3397 20.9441 21.3475 19 19.708C17.0558 21.3475 14.5356 22.3398 11.7793 22.3398C5.631 22.3398 0.646484 17.415 0.646484 11.3398C0.646484 5.26471 5.631 0.339844 11.7793 0.339844C14.5353 0.339925 17.0559 1.33143 19 2.9707C20.9441 1.33142 23.4647 0.339941 26.2207 0.339844Z" fill="#ED0006"/>
+<path d="M26.2207 0.339844C32.369 0.339844 37.3535 5.26471 37.3535 11.3398C37.3535 17.415 32.369 22.3398 26.2207 22.3398C23.4644 22.3398 20.9442 21.3475 19 19.708C21.3925 17.6904 22.9111 14.6914 22.9111 11.3398C22.9111 7.9881 21.3927 4.9883 19 2.9707C20.9441 1.33143 23.4647 0.339924 26.2207 0.339844Z" fill="#F9A000"/>
+<path d="M19 2.9707C21.3928 4.98828 22.9111 7.98807 22.9111 11.3398C22.9111 14.6914 21.3925 17.6904 19 19.708C16.6077 17.6904 15.0889 14.6913 15.0889 11.3398C15.0889 7.98819 16.6073 4.98827 19 2.9707Z" fill="#FF5E00"/>
+</svg>

package/build/img/visa-logo.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="14" viewBox="0 0 40 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0004 13.8081H6.53867L3.94278 3.61338C3.81957 3.14442 3.55796 2.72983 3.17313 2.53443C2.21275 2.04339 1.15448 1.65259 0 1.45549V1.06299H5.57661C6.34626 1.06299 6.9235 1.65259 7.0197 2.33734L8.3666 9.69115L11.8267 1.06299H15.1922L10.0004 13.8081ZM17.1164 13.8081H13.847L16.5391 1.06299H19.8085L17.1164 13.8081ZM24.0381 4.59377C24.1344 3.90733 24.7116 3.51483 25.385 3.51483C26.4433 3.41628 27.5961 3.61338 28.5582 4.10272L29.1354 1.35864C28.1733 0.966141 27.1151 0.769043 26.1547 0.769043C22.9816 0.769043 20.6726 2.53443 20.6726 4.98457C20.6726 6.84851 22.3081 7.8272 23.4626 8.4168C24.7116 9.0047 25.1926 9.3972 25.0964 9.98509C25.0964 10.8669 24.1344 11.2594 23.174 11.2594C22.0195 11.2594 20.865 10.9655 19.8084 10.4744L19.2312 13.2202C20.3857 13.7096 21.6347 13.9067 22.7892 13.9067C26.3471 14.0035 28.5582 12.2398 28.5582 9.5926C28.5582 6.25891 24.0381 6.06351 24.0381 4.59377ZM40 13.8081L37.4041 1.06299H34.6158C34.0386 1.06299 33.4613 1.45549 33.2689 2.04339L28.462 13.8081H31.8275L32.4993 11.9459H36.6345L37.0193 13.8081H40ZM35.0968 4.49522L36.0572 9.29865H33.3651L35.0968 4.49522Z" fill="#172B85"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.101.0-develop.4",
+  "version": "2.101.0-develop.6",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

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

@@ -4,6 +4,17 @@
       <div class="checkout-payment-details__row">
         <div class="checkout-payment-details__descr">
           <h3 class="checkout-payment-details__title">Payment method</h3>
+          <div class="form-row">
+            <div class="form-row__field">
+              {{> radiobutton
+                  labelIcons=(array "./img/visa-logo.svg" "./img/mastercard.svg")
+                  name="payment-method"
+                  id="checkout-payment-details-card"
+                  checked=true
+                  value="card"
+              }}
+            </div>
+          </div>
           {{#if billie}}
             <div class="form-row">
               <div class="form-row__field form-row__field-billie">
@@ -108,11 +119,6 @@
               </div>
             </div>
           {{/if}}
-          <div class="form-row">
-            <div class="form-row__field">
-              {{> radiobutton label="Credit/Debit card" name="payment-method" id="checkout-payment-details-card" checked=true value="card"}}
-            </div>
-          </div>
           <div class="form-row">
             <div class="form-row__field">
               <label class="rbn rbn_align" for="checkout-payment-details-paypal">
@@ -120,7 +126,6 @@
                 <ins></ins>
                 <img class="checkout-payment-details__icon" src="img/payments_paypal-large.png" width="90" height="24" alt="paypal">
               </label>
-              <p class="checkout-payment-details__paypal-email">contact@gmail.com <a href="#">Delete</a></p>
             </div>
           </div>
         </div>

package/src/components/order-summary.hbs

@@ -4,7 +4,7 @@
   <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}" data-sticky-element>
 
     {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
-    {{#unless basket}}
+    {{#unless (or basket checkout)}}
       <div class="summary__payment footer-checkout">
         {{#unless merged}}
           {{#if paymentsCheckoutV2}}
@@ -64,7 +64,7 @@
     {{#if clearpay-placement}}
       {{> clearpay applyMargin=true hasKlarna=true}}
     {{/if}}
-    {{#unless basket}}
+    {{#unless (or basket checkout)}}
       <div class="summary__payment footer-checkout">
         {{#unless merged}}
           {{#if paymentsCheckoutV2 }}

package/src/elements/radiobutton.hbs

@@ -11,7 +11,15 @@
     {{#if dataTarget}}data-target={{dataTarget}}{{/if}}
   >
   <ins></ins>
-  <span>{{label}}</span>
+  {{#if labelIcons}}
+    <span class="rbn__icons" aria-hidden="true">
+      {{#each labelIcons}}
+        <img src="{{this}}" alt="{{altFromSrc this}}" />
+      {{/each}}
+    </span>
+  {{else}}
+    <span>{{label}}</span>
+  {{/if}}
   {{#block "html"}}{{/block}}
   {{#if error}}
     <div class="form-row__error">{{error}}</div>

package/src/img/mastercard.svg

@@ -0,0 +1,5 @@
+<svg width="38" height="23" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.2207 0.339844C32.369 0.339844 37.3535 5.26471 37.3535 11.3398C37.3535 17.415 32.369 22.3398 26.2207 22.3398C23.4644 22.3397 20.9441 21.3475 19 19.708C17.0558 21.3475 14.5356 22.3398 11.7793 22.3398C5.631 22.3398 0.646484 17.415 0.646484 11.3398C0.646484 5.26471 5.631 0.339844 11.7793 0.339844C14.5353 0.339925 17.0559 1.33143 19 2.9707C20.9441 1.33142 23.4647 0.339941 26.2207 0.339844Z" fill="#ED0006"/>
+<path d="M26.2207 0.339844C32.369 0.339844 37.3535 5.26471 37.3535 11.3398C37.3535 17.415 32.369 22.3398 26.2207 22.3398C23.4644 22.3398 20.9442 21.3475 19 19.708C21.3925 17.6904 22.9111 14.6914 22.9111 11.3398C22.9111 7.9881 21.3927 4.9883 19 2.9707C20.9441 1.33143 23.4647 0.339924 26.2207 0.339844Z" fill="#F9A000"/>
+<path d="M19 2.9707C21.3928 4.98828 22.9111 7.98807 22.9111 11.3398C22.9111 14.6914 21.3925 17.6904 19 19.708C16.6077 17.6904 15.0889 14.6913 15.0889 11.3398C15.0889 7.98819 16.6073 4.98827 19 2.9707Z" fill="#FF5E00"/>
+</svg>

package/src/img/visa-logo.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="14" viewBox="0 0 40 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0004 13.8081H6.53867L3.94278 3.61338C3.81957 3.14442 3.55796 2.72983 3.17313 2.53443C2.21275 2.04339 1.15448 1.65259 0 1.45549V1.06299H5.57661C6.34626 1.06299 6.9235 1.65259 7.0197 2.33734L8.3666 9.69115L11.8267 1.06299H15.1922L10.0004 13.8081ZM17.1164 13.8081H13.847L16.5391 1.06299H19.8085L17.1164 13.8081ZM24.0381 4.59377C24.1344 3.90733 24.7116 3.51483 25.385 3.51483C26.4433 3.41628 27.5961 3.61338 28.5582 4.10272L29.1354 1.35864C28.1733 0.966141 27.1151 0.769043 26.1547 0.769043C22.9816 0.769043 20.6726 2.53443 20.6726 4.98457C20.6726 6.84851 22.3081 7.8272 23.4626 8.4168C24.7116 9.0047 25.1926 9.3972 25.0964 9.98509C25.0964 10.8669 24.1344 11.2594 23.174 11.2594C22.0195 11.2594 20.865 10.9655 19.8084 10.4744L19.2312 13.2202C20.3857 13.7096 21.6347 13.9067 22.7892 13.9067C26.3471 14.0035 28.5582 12.2398 28.5582 9.5926C28.5582 6.25891 24.0381 6.06351 24.0381 4.59377ZM40 13.8081L37.4041 1.06299H34.6158C34.0386 1.06299 33.4613 1.45549 33.2689 2.04339L28.462 13.8081H31.8275L32.4993 11.9459H36.6345L37.0193 13.8081H40ZM35.0968 4.49522L36.0572 9.29865H33.3651L35.0968 4.49522Z" fill="#172B85"/>
+</svg>

package/src/page_payment-details-with-gift-card.html

@@ -0,0 +1,67 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Gift Cards" isAsideSticky="true" clearPayIcon=true billieIcon=true checkout=true}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+
+<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
+{{/content}}
+{{#content "notification"}}
+{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
+{{/content}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="2"}}
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+  <h3 class="delivery-block__heading">Delivery Information</h3>
+  <div class="delivery-block__wrapper">
+    {{#with checkoutOrder.deliveryPayments.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="click-collect-block">
+  <h3 class="click-collect-block__heading">Click & Collect</h3>
+  <div class="click-collect-block__wrapper">
+    {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+    <div class="checkout-order">
+      {{> checkout-order-block}}
+    </div>
+    {{/with}}
+  </div>
+</div>
+
+<div class="billing-payment-block">
+  <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+  <div class="billing-payment-block__wrapper">
+    {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true billie=true}}
+  </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script
+    async
+    src="https://pay.google.com/gp/p/js/pay.js">
+</script>
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
+<script defer src="./js/page/billie-business-type.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{/content}}
+{{/extend}}

package/src/partials/footer-checkout-v2.hbs

@@ -1,7 +1,9 @@
 <footer class="checkout-footer">
-  <div class="footer-nav">
-    {{> payments }}
-  </div>
+  {{#unless checkout}}
+    <div class="footer-nav">
+      {{> payments }}
+    </div>
+  {{/unless}}
   <div class="footer-bottom">
     <div class="footer-bottom__wrapper container">
       {{> socials}}

package/src/scss/components/_billie-online-messaging.scss

@@ -28,6 +28,7 @@
     font-weight: 500;
     line-height: 1rem;
     color: $gray-dark;
+    white-space: normal;
   }
 
   &__link {
@@ -35,6 +36,7 @@
     text-decoration: underline;
     font-weight: 400;
     white-space: nowrap;
+    display: inline-block;
   }
 
   &__subtitle {

package/src/scss/components/_payments-checkout.scss

@@ -79,7 +79,7 @@
 .basket {
   .summary__payment.footer-checkout {
     .payments-checkout__list--small {
-      padding: 0 40px;
+      padding: 0 45px;
     }
   }
 }

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

@@ -80,7 +80,7 @@
       width: 100%;
       margin-left: 0;
       margin-right: 0;
-      margin-bottom: 16px;
+      margin-bottom: 24px;
 
       &__field-klarna {
         margin-bottom: -10px;

package/src/scss/pages/page_checkout-payment-details.scss

@@ -11,6 +11,22 @@
     line-height: 1.375em;
   }
 
+  .rbn__icons {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    vertical-align: top;
+
+    img {
+      border: 1px solid $gray;
+      background-color: $white;
+      border-radius: 3px;
+      width: 48px;
+      height: 30px;
+      padding: 4px;
+    }
+  }
+
   &__payment-method,
   &__card-details {
     &_hidden {

package/src/sitemap.html

@@ -950,8 +950,17 @@
                             </a>
                         </li>
                     </ul>
-
-
+                    <h3>
+                        Pages with Gift Cards
+                    </h3>
+                    <ul>
+                        <li>
+                            <span class="page-id">1</span>
+                            <a href="page_payment-details-with-gift-card.html" target="_blank">
+                                Page with Gift Cards
+                            </a>
+                        </li>
+                  </ul>
                 </div>
                 <div class="col">
                     <h3>Basket</h3>