Work in Progress

todo.md

Add the grayscale css

Find the most basic lower limit rectify

work.css

.op_header-usp {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-size: 1.3rem;
}
.op_header-usp li {
  min-height: 30px;
  padding-left: 45px;
}
.op_header-usp li.usp-nextday a {
  display: inline-block;
  font-size: smaller;
}
.op_header-usp span.delivery-day {
  display: inline-block;
  font-size: larger;
}
.op_header-usp .op_deliveryPrice {
  font-weight: bold;
}
.op_header-usp .op_collectUnavailable,
.op_header-usp .usp-free {
  display: flex;
  align-items: center;
}

work.js

const opDeliveryDetails = `
<ul class="op_header-usp">
  <li class="usp-free">Standard delivery ${parseFloat(document.querySelector('span[itemprop="price"]').innerText) > 49.99 ? '- <span class="op_deliveryPrice">Free</span>' : ''}</li>
  <li class="usp-nextday">Next Day Delivery</li>
  ${document.querySelector('div.js-collect-plus-non-eligible')
      ? '<li class="usp-collect-plus op_collectUnavailable">Click & Collect Unavailable</li>'
      : '<li class="usp-collect-plus op_collectAvailable">Order up to 11pm for next day delivery**</li>'
    }
</ul>`

window.jQuery('p.in-stock').after(opDeliveryDetails)
const deliveryCutOff = document.querySelector('p.js-delivery-cut-off a')

window.jQuery('ul.op_header-usp li.usp-nextday')
  .append(window.jQuery('p.delivery-cut-off a').remove())

document.querySelector('div.collect-plus-holder').setAttribute('style', 'display: none;')
// The lower element of the right-side bar can be either the Collect Plus or the Finance Block.
// Check that the lower limit is not collpasing with the new elements.
const collectPlus = document.querySelector('ul.op_header-usp li.usp-collect-plus')
if (collectPlus) {
  const collectPlusBottom = collectPlus.getBoundingClientRect().bottom
  const financeBlock = document.querySelector('a.finance-block')
  if (financeBlock) {
    const financeBlockTop = financeBlock.getBoundingClientRect().top
    if (collectPlusBottom > financeBlockTop) {
      document.querySelector('div.js-purchase-info').setAttribute('style', 'border: 0.8px solid #e5e5e5;')
      document.querySelector('div.purchase-info').setAttribute('style', 'border-width: 0px;')
      const overlap = collectPlusBottom - financeBlockTop
      financeBlock.setAttribute('style', `margin-top: ${overlap}px; border-width: 0px;`)
    }
  } else {
    const purchaseInfo = document.querySelector('div.purchase-info')
    const purchaseInfoBottom = purchaseInfo.getBoundingClientRect().bottom
    if (collectPlusBottom > purchaseInfoBottom) {
      document.querySelector('div.js-purchase-info').setAttribute('style', 'border: 0.8px solid #e5e5e5;')
      purchaseInfo.setAttribute('style', 'border-width: 0px;')
    }
  }
}

// alternative
const lowerBottom = [...purchaseInfo.children].filter(elt => !/display: none/.test(elt.getAttribute('style'))).pop().getBoundingClientRect().bottom