wickes-css2 2.98.0-billie.1 → 2.98.0-develop.2

package/src/components/payments.hbs

@@ -1,20 +1,14 @@
 <div class="payways">
   <p class="payways__title">Ways to Pay</p>
   <ul class="payways__list">
-    {{#if billieIcon}}
-      <li class="payways__item">
-        <img class="payways__image" src="./img/payment/footer/billie.svg" alt="Billie">
-      </li>
-    {{else}}
-      <li class="payways__item">
+    <li class="payways__item">
       <span class="payways-klarna">
           <klarna-placement
-              data-key="sidebar-promotion-auto-size"
-              data-locale="en-GB"
+            data-key="sidebar-promotion-auto-size"
+            data-locale="en-GB"
           ></klarna-placement>
       </span>
-      </li>
-    {{/if}}
+    </li>
     {{#each payments-list}}
       <li class="payways__item">
         <img class="payways__image" src="{{src}}" alt="{{payment}}">

package/src/data/data_shopping-cart-v2.json

@@ -1145,6 +1145,57 @@
         }
       }
     },
+    "charityDonationNew": {
+      "title": "Charity Donation",
+      "checkoutOrder": {
+        "charity": {
+          "title": "Would you like to make a donation to our chosen charity, Campaign Against Living Miserably (CALM)?",
+          "descr": "All charity donations are non-refundable.",
+          "message": "For more information about our charity partner",
+          "subLink": "https://www.wickes.co.uk/the-brain-tumour-charity",
+          "total": "Total",
+          "img": "img/calm-primary-logo.png",
+          "price": "£1",
+          "options": [
+            {
+              "title": "£1",
+              "value": "1",
+              "active": false
+            },
+            {
+              "title": "£3",
+              "value": "3",
+              "active": false
+            },
+            {
+              "title": "£5",
+              "value": "5",
+              "active": true
+            },
+            {
+              "title": "£10",
+              "value": "10",
+              "active": false
+            },
+            {
+              "title": "£15",
+              "value": "15",
+              "active": false
+            },
+            {
+              "title": "£50",
+              "value": "50",
+              "active": false
+            },
+            {
+              "title": "£100",
+              "value": "100",
+              "active": false
+            }
+          ]
+        }
+      }
+    },
     "charityDonationMultiple": {
       "title": "Charity Donation",
       "img": "img/young-minds-long.png",

package/src/js/emulation/paymentLoader.js

@@ -3,8 +3,6 @@ const paymentLoaderHideClass = 'payment-loader--hidden';
 const applePayButton = '.apple__button';
 const googlePayButton = '.google__button';
 const clearPayRadioButton = '#checkout-payment-details-clearpay';
-const billiePayRadioButton = '#checkout-payment-details-billie';
-const billiePayButton = '.billie__button';
 
 const showPaymentLoader = () => {
   $(paymentLoader).removeClass(paymentLoaderHideClass);
@@ -13,6 +11,4 @@ const showPaymentLoader = () => {
 
 $(document).on('click', applePayButton, showPaymentLoader);
 $(document).on('click', googlePayButton, showPaymentLoader);
-$(document).on('click', clearPayRadioButton, showPaymentLoader);
-$(document).on('click', billiePayRadioButton, showPaymentLoader);
-$(document).on('click', billiePayButton, showPaymentLoader);
+$(document).on('click', clearPayRadioButton, showPaymentLoader);

package/src/js/page/basket-v2.js

@@ -16,8 +16,8 @@ import {checkPayPalAvailability} from './basket/paypal';
 import {
     updateCharity,
     changeCharityPrice,
-    toggleCharityElements,
-    setDefaultCharityValue
+    setDefaultCharityValue,
+    initCharityInteractions,
 } from './components/charity';
 import {callAction} from './utils/http-action';
 import {ROUTES} from './utils/routes';
@@ -29,8 +29,8 @@ import {
 } from './basket/session-sync'
 import {displayEnergyEfficiency} from "./basket/display-energy-efficiency";
 import {appendLoader, hideLoader, showLoader} from "./utils/loader";
-import { initStickyObserver } from './components/sticky-order-observer';
 import {addClassToSummaryAside} from "./basket/summary-mobile";
+import { initStickyObserver } from './components/sticky-order-observer';
 
 var Wick = window.Wick || {};
 Wick.BasketPage = {
@@ -80,7 +80,7 @@ Wick.BasketPage = {
         orderItemInfoOffers: 'order-item__info-offers',
         charityInput: '#donation',
         charityItem: '.charity-new',
-        donationCartBtn: '.donation-cart__btn',
+        donationCartBtn: '.donation-cart__btn, .donation-cart-new__btn',
         checkoutWidgetDetails: '.checkout-widget__details',
         checkoutWidgetDetailsFlex: 'checkout-widget__details-flex',
         subtotal: '.checkout-widget__item-bold',
@@ -311,7 +311,6 @@ Wick.BasketPage = {
         } else {
             if (charity) {
                 Wick.BasketPage.updateCart();
-                quantityToUpdate === 0 && toggleCharityElements();
             } else {
                 if (maxValue > 1 || minValue > 1) {
                     if (quantityToUpdate > maxValue || quantityToUpdate < minValue) {
@@ -1282,8 +1281,16 @@ $(document).ready(function () {
         $(Wick.BasketPage.el.content).on('focusout', Wick.BasketPage.el.quantityValue, Wick.BasketPage.changeOnBlur);
         $(Wick.BasketPage.el.content).on('click', Wick.BasketPage.el.deliveryButtonInCC, Wick.BasketPage.changeMethodToDelivery);
         $(Wick.BasketPage.el.content).on('click', Wick.BasketPage.el.updateStoreButton, Wick.BasketPage.changeMethodToCC);
-        $(Wick.BasketPage.el.charityInput).on('click', updateCharity);
-        $(Wick.BasketPage.el.donationCartBtn).on('click', changeCharityPrice);
+        $(Wick.BasketPage.el.donationCartBtn).on('click', function(e) {
+            e.preventDefault();
+            const context = $(this).closest(Wick.BasketPage.el.charityItem);
+            if (!context.hasClass('charity-added')) {
+                updateCharity(this);
+                context.addClass('charity-added');
+            } else {
+                changeCharityPrice.call(this);
+            }
+        });
         $(Wick.BasketPage.el.charityItem).on('click', Wick.BasketPage.el.removeButton, updateCharity);
         $(Wick.BasketPage.el.orderSummary).on('click', Wick.BasketPage.el.voucherRemove, voucherRemove);
         $(Wick.BasketPage.el.promoWrapper).on('click', Wick.BasketPage.el.promoClose, Wick.BasketPage.removePromotion);
@@ -1305,8 +1312,8 @@ $(document).ready(function () {
             '.summary__aside.collapse.show'
         );
         Wick.BasketPage.updateCart(...Array(3), true);
-
         setDefaultCharityValue();
+        initCharityInteractions();
         if (!$(Wick.BasketPage.el.loader).length) {
             appendLoader(Wick.BasketPage.loaderPayload);
         }

package/src/js/page/checkout-payment-details.js

@@ -62,9 +62,6 @@ Wick.CheckoutPaymentDetails = (function() {
       case 'klarna':
         hideBillingAddres();
         break;
-      case 'billie':
-        hideBillingAddres();
-        break;
       case 'clearpay':
         detailsLabel = {
           ...detailsLabel,

package/src/js/page/components/charity.js

@@ -8,34 +8,47 @@ const charityEl = {
   charityInput: '#donation',
   charityTitleWrap: '.title-wrap',
   donationCart: '.donation-cart',
-  donationCartBtn: '.donation-cart__btn',
-  donationCartHolder: '.donation-cart__holder',
   donationCartHide: 'donation-cart__hide',
-  donationCartValue: '.donation-cart__value',
+  donationCartBtn: '.donation-cart__btn, .donation-cart-new__btn',
+  donationCartBtnSelected: '.donation-cart-new__btn.btn-selected',
+  donationCartHolder: '.donation-cart__holder, .donation-cart-new__holder',
+  donationCartValue: '.donation-cart__value, .donation-cart-new__value',
   charityAdded: 'charity-added',
+  donationCartCostBlock: '.donation-cart-new__cost',
+  donationCartCostBlockHide: 'donation-cart-new__cost-hide',
+  donationCartRemove: '.donation-cart-new__cost .order-item__remove',
 }
 
-export function updateCharity() {
-  //checkbox action
+export function updateCharity(button) {
   if ($('#donation').attr('disabled') === 'disabled') {
-    $('#donation').removeAttr('disabled')
+    $('#donation').removeAttr('disabled');
   } else {
     $('#donation').prop('disabled', (_, value) => !value);
   }
 
-  const context = getCurrentCharityItem(this);
+  const context = getCurrentCharityItem(button);
   const productCode = getCurrentProductCode(context);
+  const quantity = getSelectedCharityAmount(button);
 
   showLoader('.basket-loader');
 
   if (context.hasClass(charityEl.charityAdded)) {
-    $(this).removeAttr('checked');
+    $(button).removeAttr('checked');
   } else {
-    $(this).attr('checked', 'checked');
-    charityActionForAdd(productCode);
+    $(button).attr('checked', 'checked');
+    repaintCharityButton(button);
+    context
+      .find(charityEl.donationCartValue)
+      .text(quantity);
+    showDonationCostBlock(context);
+    charityActionForAdd(productCode, quantity);
   }
 }
 
+function getSelectedCharityAmount(context) {
+  return $(context).data('value');
+}
+
 function getCurrentCharityItem(context) {
   return $(context).closest(charityEl.charityItem);
 }
@@ -44,13 +57,13 @@ function getCurrentProductCode(context) {
   return context.find('input[name="productCode"]').val();
 }
 
-export function charityActionForAdd(value) {
+export function charityActionForAdd(value, quantity) {
   if (!Wick.checkLocalEnv) {
     const payload = {
       url: ROUTES.CHARITY_ADD,
       queries: {
         productCodePost: value,
-        qty: getDefaultCharityAmount(),
+        qty: quantity,
       },
       type: 'POST',
     };
@@ -61,19 +74,10 @@ export function charityActionForAdd(value) {
 
     callAction(payload, executeCharityAction, productInfo);
   } else {
-    toggleCharityElements();
     Wick.BasketPage.updateCart(...Array(2), true);
   }
 }
 
-export function toggleCharityElements() {
-  if ($(charityEl.charityItem).hasClass(charityEl.charityAdded)) {
-    $(charityEl.charityInput).prop('checked', false);
-  }
-  $(charityEl.charityItem).toggleClass(charityEl.charityAdded);
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && toggleMultipleCharityChoose($(charityEl.charityItem));
-}
-
 function executeCharityAction(response, productInfo) {
   if (response.addedProducts && response.addedProducts[0]) {
     productInfo.quantity = response.addedProducts[0].qty;
@@ -81,7 +85,6 @@ function executeCharityAction(response, productInfo) {
   }
 
   Wick.BasketPage.updateCart(...Array(2), true);
-  toggleCharityElements();
 }
 
 export function changeCharityPrice() {
@@ -95,6 +98,7 @@ export function changeCharityPrice() {
 
   repaintCharityButton(this);
   $(charityEl.donationCartValue).text(charityValue);
+  showDonationCostBlock(context);
   charityActionForChangePrice(this);
 }
 
@@ -119,35 +123,46 @@ function repaintCharityButton(context) {
   $(context).removeClass(btnSecondary).addClass(btnSelected);
 }
 
-function resetCharityButton(context) {
-  const donationButtons = $(context).find(charityEl.donationCartBtn);
-  const btnSelected = 'btn-selected';
-  const btnSecondary = 'btn-secondary';
-  const defaultAmount = getDefaultCharityAmount();
-
-  donationButtons.each((i, btn) => {
-    $(btn).attr('data-value') === defaultAmount
-      ? $(btn).removeClass(btnSecondary).addClass(btnSelected)
-      : $(btn).removeClass(btnSelected).addClass(btnSecondary);
-  })
-}
-
 function getDefaultCharityAmount() {
   const donationButtons = $(charityEl.charityItem).find(charityEl.donationCartBtn);
   return donationButtons.first().attr('data-value');
 }
 
+export function setDefaultCharityValue() {
+  $(charityEl.donationCartBtnSelected).each(function() {
+    const $btn   = $(this);
+    const $item  = $btn.closest(charityEl.charityItem);
+    const value  = $btn.data('value');
+
+    $item.find(charityEl.donationCartValue).text(value);
+    $item.find(charityEl.donationCartCostBlock)
+      .removeClass(charityEl.donationCartCostBlockHide);
+  });
+}
+
+function showDonationCostBlock($charity) {
+  $charity.find(charityEl.donationCartCostBlock)
+    .removeClass(charityEl.donationCartCostBlockHide);
+}
+
 function resetCharityValue() {
   const defaultValue = getDefaultCharityAmount();
   $(charityEl.donationCartValue).text(defaultValue);
 }
 
-export function toggleMultipleCharityChoose(context) {
-  context.find(charityEl.donationCart).toggleClass(charityEl.donationCartHide);
-  resetCharityButton(context);
-  resetCharityValue();
-}
-
-export function setDefaultCharityValue() {
-  $(charityEl.charityItem).hasClass(charityEl.charityMultiple) && resetCharityValue();
+export function initCharityInteractions() {
+  $(document).on('click', charityEl.donationCartRemove, function(e) {
+    e.preventDefault();
+
+    const $item = $(this).closest(charityEl.charityItem);
+    $item.removeClass(charityEl.charityAdded);
+    $item
+      .find(charityEl.donationCartCostBlock)
+      .addClass(charityEl.donationCartCostBlockHide);
+    $item
+      .find(charityEl.donationCartBtn)
+      .removeClass('btn-selected')
+      .addClass('btn-secondary');
+    resetCharityValue();
+  });
 }

package/src/page_checkout_delivery-address-customer-journey.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true" billieIcon=true}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery address Customer Journey" isAsideSticky="true"}}
 {{#content "steps"}}
 {{> steps active-step-index="1" }}
 {{/content}}
@@ -9,7 +9,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true billieIcon=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
   {{/content}}
 
 

package/src/page_my-account.html

@@ -26,7 +26,6 @@
           title=my_account.diy.activeOrders.sectionTitle
           linkText='View all orders'
           orders=my_account.diy.activeOrders.orderList
-          billieText="Payment due 30 days from Dispatch or Collection Date"
       }}
     </div>
    </div>

package/src/page_shopping-cart-v2.html

@@ -1,4 +1,4 @@
-{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=true}}
+{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket"}}
   {{#content "head" mode="append"}}
     <link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
     <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
@@ -23,11 +23,10 @@
   id=1
   title="Order Summary"
   basket=true
-  billie=true
   }}
   {{> checkout-action  mod="mounted"}}
   {{> checkout-action  mod="mounted" view="mobile"}}
-  {{> summary-payment paymentsCheckoutV2=true billieIcon=true}}
+  {{> summary-payment paymentsCheckoutV2=true}}
 {{/content}}
 {{#content "main"}}
   <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
@@ -41,7 +40,7 @@
       {{/each}}
     </section>
   {{/each}}
-{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
+{{> basket-charity-donations-new   shopping-cart-v2.charityDonationNew }}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>