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

package/build/js/emulation.min.js

@@ -6192,32 +6192,20 @@ $(document).ready(function () {
   initMyOrdersEvent();
 });
 
-const paymentLoader= '.payment-loader';
-const paymentLoaderHideClass= 'payment-loader--hidden';
-const paymentLoaderModal = '.payment-loader__modal'
-const paymentTypeSelectors = {
-  apple: '.apple__button',
-  google: '.google__button',
-  clearpay: '#checkout-payment-details-clearpay',
-  billie: '#checkout-payment-details-billie, .billie__button',
-  paypal: '#checkout-payment-details-paypal'
-};
+const paymentLoader = '.payment-loader';
+const paymentLoaderHideClass = 'payment-loader--hidden';
+const applePayButton = '.apple__button';
+const googlePayButton = '.google__button';
+const clearPayRadioButton = '#checkout-payment-details-clearpay';
 
-function showPaymentLoader(paymentType) {
-  $(paymentLoader).find(`${paymentLoaderModal} > div`).hide();
-  $(`.${paymentType}-checkout-logo`).show();
-  $(`${paymentLoader} .spinner`).show();
+const showPaymentLoader = () => {
   $(paymentLoader).removeClass(paymentLoaderHideClass);
+  setTimeout(() => $(paymentLoader).addClass(paymentLoaderHideClass), 1000);
+};
 
-  setTimeout(() => {
-    $(paymentLoader).addClass(paymentLoaderHideClass);
-  }, 1000);
-}
-
-Object.entries(paymentTypeSelectors).forEach(([type, triggerSelector]) => {
-  $(document).on('click', triggerSelector, () => showPaymentLoader(type));
-});
-
+$(document).on('click', applePayButton, showPaymentLoader);
+$(document).on('click', googlePayButton, showPaymentLoader);
+$(document).on('click', clearPayRadioButton, showPaymentLoader);
 var Wick = Wick || {};
 
 Wick.pdfFileLoader = {

package/build/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/build/js/page/checkout-payment-details.js

@@ -62,14 +62,6 @@ Wick.CheckoutPaymentDetails = (function() {
       case 'klarna':
         hideBillingAddres();
         break;
-      case 'billie':
-        detailsLabel = {
-          ...detailsLabel,
-          labelText: 'Name on Billie account',
-          buttonText: 'Pay with Billie'
-        }
-        changeLabelText(detailsLabel);
-        break;
       case 'clearpay':
         detailsLabel = {
           ...detailsLabel,

package/build/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.98.0-billie.2",
+  "version": "2.98.0-develop.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/billie",
+        "name": "custom-tag/RG-1311-prototype-charity-reg-no-for-calm-basket",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/address-postcode-look-up.hbs

@@ -3,9 +3,9 @@
         {{> form-row id="first-line-address" label="Type first line of the address" required="true"}}
     </div>
     <div>
-        {{> form-row id="address-line-1" label="Address line 1" required="true" info="Eg house number/name, street name"}}
+        {{> form-row id="address-line-1" label="Address line 1" required="true"}}
         {{> form-row id="address-line-2" label="Address line 2"}}
-        {{> form-row id="town-city" label="Town/City" required="true"}}
+        {{> form-row id="town-city" label="Town / City" required="true"}}
         {{> form-row id="postcode_additional" label="Postcode" required="true"}}
     </div>
 {{else}}

package/src/components/basket-charity-donations-new.hbs

@@ -0,0 +1,40 @@
+{{#if title}}
+  {{> checkout-section-title}}
+{{/if}}
+<div class="charity-new charity-donation-new">
+  {{#with checkoutOrder.charity}}
+
+    <div class="charity-donation-new__wrapper">
+      <div class="charity-donation-new__top">
+        <div class="charity-donation-new__header">
+          <div class="charity-donation-new__title">{{title}}</div>
+          <div class="charity-donation-new__right">
+            <img
+                class="charity-donation-new__image"
+                src="{{img}}"
+                alt="{{title}}"
+                title="{{title}}"
+            />
+          </div>
+        </div>
+
+        <div class="charity-donation-new__description">
+          {{descr}}
+          <span class="charity-donation-new__message">
+              {{message}}
+            <a
+                class="charity-donation-new__subtitle-link"
+                href="{{subLink}}"
+            >
+              click here</a>.
+            </span>
+        </div>
+      </div>
+
+      <div class="charity-donation-new__body">
+        {{> donation-cart-new}}
+      </div>
+    </div>
+
+  {{/with}}
+</div>

package/src/components/checkout-edit-billing-address.hbs

@@ -1,32 +1,18 @@
 <div class="checkout-payment-details__row" {{attr}}>
   <div class="checkout-payment-details__descr{{descrModifier}}">
     <h3 class="checkout-payment-details__title">Billing address</h3>
-    {{#if billie-form}}
-      <div class="checkout-payment-details__populated-address">
-        <span>
-          <span class="checkout-payment-details__populated-text">Populated from your business address in your TradePro account.</span>
-          {{> info-icon title="If the pre-populated address is incorrect, please amend it before proceeding. To update it permanently, review and amend your Business Address in My TradePro (or Installer) Account > Address Book." data-placement="top" }}
-        </span>
-      </div>
-    {{/if}}
     <div class="warning-required">Required fields</div>
-    {{#unless billie-form}}
-      <div class="form-row">
-        <div class="form-row__field">
-          {{> checkbox id="chb-payment-details-card" label="Use my delivery address"}}
-        </div>
+    <div class="form-row">
+      <div class="form-row__field">
+        {{> checkbox id="chb-payment-details-card" label="Use my delivery address" }}
       </div>
-    {{/unless}}
+    </div>
     {{#unless edit-bill-mod}}
       {{> form-row id="card-name" label="Name on card" required="true"}}
     {{/unless}}
 
-    <div class="address-postcode">
-      {{> address-postcode-look-up}}
-      {{#if billie-form}}
-        {{> address-billie}}
-      {{/if}}
-    </div>
+     {{> address-postcode-look-up}}
+
 
     {{#unless no-set-card}}
       <div class="form-row">

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

@@ -4,48 +4,23 @@
       <div class="checkout-payment-details__row">
         <div class="checkout-payment-details__descr">
           <h3 class="checkout-payment-details__title">Payment method</h3>
-          {{#if billie}}
-            <div class="form-row">
-              <div class="form-row__field form-row__field-billie">
-                <label
-                    class="rbn rbn_align billie-label__rbn"
-                    for="checkout-payment-details-billie"
-                >
-                  <input
-                      type="radio"
-                      id="checkout-payment-details-billie"
-                      name="payment-method"
-                      value="billie"
-                  >
-                  <ins></ins>
-                  <div class="billie-badge-container">
-                    <img
-                        src="./img/payment/footer/billie.svg"
-                        alt="Billie Pay Later"
-                    >
-                  </div>
-                </label>
-              </div>
-            </div>
-          {{else if klarna-method}}
+          {{#if klarna-method}}
             <div class="form-row">
               <div class="form-row__field form-row__field-klarna">
                 <label
-                    class="rbn rbn_align klarna-label__rbn"
-                    for="checkout-payment-details-klarna"
-                >
+                  class="rbn rbn_align klarna-label__rbn"
+                  for="checkout-payment-details-klarna">
                   <input
-                      type="radio"
-                      id="checkout-payment-details-klarna"
-                      name="payment-method"
-                      value="klarna"
-                  >
+                    type="radio"
+                    id="checkout-payment-details-klarna"
+                    name="payment-method"
+                    value="klarna">
                   <ins></ins>
                   <div class="klarna-logo-img">
-                    <klarna-placement
-                        data-key="sidebar-promotion-auto-size"
-                        data-locale="en-GB"
-                    ></klarna-placement>
+                      <klarna-placement
+                          data-key="sidebar-promotion-auto-size"
+                          data-locale="en-GB"
+                      ></klarna-placement>
                   </div>
                 </label>
               </div>
@@ -158,63 +133,50 @@
         </div>
       </div>
 
-      {{> checkout-payment-info-block
-          dataAttr="data-klarna"
-          blockClass="checkout-payment-details__klarna"
-          infoClass="klarna-info"
-
-          heading="Choose your way to pay"
-          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."
-          listItem3="Buyer protection included"
-
-          learnMoreHtml="<img class='klarna-info__learn-more_icon' src='img/icon_info.png' width='20' height='20' alt='info'>
-                 <klarna-placement
-                   data-key='top-strip-promotion-auto-size'
-                   data-locale='en-GB'
-                 ></klarna-placement>"
-
-          acceptInfo="By continuing, I accept the terms of the
-              <a href='#' class='klarna-info__link'>Klarna Shopping Service</a>
-              and confirm that I have read the
-              <a href='#' class='klarna-info__link'>Privacy Notice</a> and
-              <a href='#' class='klarna-info__link'>Cookie Notice</a>"
-
-          ctaButtonLabel="Pay with Klarna"
-          ctaButtonClass="klarna__button"
-          ctaFooterHtml="By placing your order, you accept our
-                <a href='#' class='link-secondary' data-toggle='modal' data-target='#modal-terms-and-conditions'>
-                  Terms &amp; Conditions of Sale
-                </a>"
-      }}
-
-      {{> checkout-payment-info-block
-          dataAttr="data-billie"
-          blockClass="checkout-payment-details__billie"
-          infoClass="billie-info"
-
-          heading="Get first. Pay later <br> Pay 30 days after shipment"
-          brandLogoHtml="<img
-            src='https://static.billie.io/badges/Billie_Checkout_Default.svg'
-            alt='Billie Pay Later'
-            width='70'
-            height='35'>"
-
-
-          listItem1="Billie charges no fee"
-          listItem2="No sign up required"
-          listItem3="Europes go-to B2B payment service"
+      <div data-klarna class="checkout-payment-details__klarna" style="display: none;">
+        <div class="klarna-info">
+          <div class="klarna-info__header">
+            <h4 class="klarna-info__header_title">Choose your way to pay</h4>
+            <div class="klarna-logo-img-big">
+                <klarna-placement
+                    data-key="sidebar-promotion-auto-size"
+                    data-locale="en-GB"
+                ></klarna-placement>
+            </div>
+          </div>
+          <ul class="klarna-info__list">
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay in 3. Interest-free.</li>
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Pay now or Pay in 30 days.</li>
+            <li class="klarna-info__list_item"><i class="fa fa-check"></i>Buyer protection included.</li>
+          </ul>
+          <div class="klarna-info__learn-more">
+            <img class="klarna-info__learn-more_icon" src="img/icon_info.png" width="20" height="20" alt="info">
+            <klarna-placement
+              data-key="top-strip-promotion-auto-size"
+              data-locale="en-GB"
+            ></klarna-placement>
+          </div>
+          <div class="klarna-info__accept-info">
+            By continuing, I accept the terms of the <a href="#" class="klarna-info__link">Klarna Shopping Service</a> and confirm that I have read the <a href="#" class="klarna-info__link">Privacy Notice</a> and <a href="#" class="klarna-info__link">Cookie Notice</a>
+          </div>
+        </div>
 
-          acceptInfo="By continuing, I accept the
-              <a href='#' class='billie-info__link'>Merchant T&Cs of Billie x Klarna Services</a>,
-              and confirm that I have read the
-              <a href='#' class='billie-info__link'>Billie and Billie Partner Privacy Policies. Imprint</a>"
-      }}
+        <div class="form-row form-row__action form-row__action_custom">
+          <div class="form-row__col-btn">
+            <button class="btn btn-primary btn_full btn-enter-details">
+              <span class="btn__text">Pay with Klarna</span>
+            </button>
+          </div>
+          <div class="form-row__col-terms">
+            <p>
+              By placing your order, you accept our
+              <a href="#" class="link-secondary" data-toggle="modal" data-target="#modal-terms-and-conditions">
+                Terms & Conditions of Sale
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
 
       <div data-clearpay class="checkout-payment-details__clearpay" style="display: none;">
         <div class="clearpay-widget">
@@ -222,9 +184,8 @@
         </div>
       </div>
 
-
       <div class="billing-address">
-        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true" billie-form=billie-form}}
+        {{> checkout-edit-billing-address actionBlock="true" no-set-card="true"}}
       </div>
       <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;">

package/src/components/checkout_payment-new.hbs

@@ -24,15 +24,6 @@
             ></klarna-placement>
         </div>
     </div>
-    {{else if billie}}
-      <div class="checkout-widget__details checkout-payment__billie">
-        <div class="checkout-widget__details__item">
-          <div>Payment method:</div>
-        </div>
-        <div class="billie-logo-img">
-          <img src="./img/billie-logo.svg" alt="billie">
-        </div>
-      </div>
     {{else if apple}}
         <div class="checkout-widget__details checkout-payment__apple">
           <div class="checkout-widget__details__item">
@@ -79,7 +70,7 @@
         </ul>
     {{/if}}
 
-    {{#unless (anyOf klarna clearpay billie)}}
+    {{#unless (or klarna clearpay)}}
     <div class="checkout-widget__details__address">
         <div class="heading">Billing address</div>
         <div class="address">

package/src/components/donation-cart-new.hbs

@@ -0,0 +1,38 @@
+<div class="donation-cart-new">
+  <div class="donation-cart-new__details">
+    <div class="donation-cart-new__options">
+      <p class="donation-cart-new__description">
+        Select the amount you would like to donate:
+      </p>
+      <div class="donation-cart-new__holder">
+        {{#each options}}
+          <button
+              class="btn
+                   {{#if active}}btn-selected {{else}} btn-secondary{{/if}}
+                   donation-cart-new__btn"
+              data-value="{{value}}"
+          >
+            <span class="btn__text">{{title}}</span>
+          </button>
+        {{/each}}
+      </div>
+      <div class="donation-cart-new__cost donation-cart-new__cost-hide">
+        <div class="donation-cart-new__price">
+          <span class="donation-cart-new__currency">£</span>
+          <span class="donation-cart-new__value"></span>
+          donation has been added to your basket.
+        </div>
+        <button class="btn order-item__remove" data-action="remove">
+          <span class="btn__text">
+            <i class="fas fa-trash"></i>
+          </span>
+        </button>
+      </div>
+
+      <hr class="donation-cart-new__divider" />
+      <p class="donation-cart-new__charity-info">
+        Charity Reg No: 1110621 & Scot SC044347
+      </p>
+    </div>
+  </div>
+</div>