wickes-css2 2.113.0-develop.11 → 2.113.0-develop.13

package/build/js/page/ripple/thumb-gallery.js

@@ -1,9 +1,6 @@
 var Wick = window.Wick || {};
 
 Wick.ThumbGallery = (function () {
-    const BASE_URL = 'https://media.wickes.co.uk/image/upload/';
-    const productName = window.pdpProduct && window.pdpProduct.name ? window.pdpProduct.name : '';
-
     const IMG_BREAKPOINTS = [
         { media: '(max-width: 576px)', w: 576, h: 324 },
         { media: '(max-width: 768px)', w: 510, h: 287 },
@@ -13,40 +10,75 @@ Wick.ThumbGallery = (function () {
     const MAIN_DEFAULT = { w: 710, h: 399 };
     const THUMB = { w: 100, h: 56 };
 
-    function buildCloudinaryUrl(publicId, w, h) {
+    function getMediaDomain() {
+        return (typeof window !== 'undefined' && window.mediaDomain) || 'media.wickes.co.uk';
+    }
+
+    function getProductName() {
+        return (typeof window !== 'undefined' && window.pdpProduct && window.pdpProduct.name) || '';
+    }
+
+    function getBaseUrl(customDomain) {
+        const domain = customDomain || getMediaDomain();
+        const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+        return `https://${cleanDomain}/image/upload/`;
+    }
+
+    function buildCloudinaryUrl(publicId, w, h, baseUrl) {
+        const base = baseUrl || getBaseUrl();
+        const cleanId = String(publicId).replace(/^\/+/, '');
         const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
-        return `${BASE_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}`;
     }
 
     function parseIdentifiers(hybrisString) {
-        return hybrisString
-            .trim()
-            .slice(1, hybrisString.length - 1)
+        if (Array.isArray(hybrisString)) {
+            return hybrisString.filter(Boolean);
+        }
+        if (!hybrisString || typeof hybrisString !== 'string') {
+            return [];
+        }
+        const trimmed = hybrisString.trim();
+        const content = trimmed.startsWith('[') && trimmed.endsWith(']')
+            ? trimmed.slice(1, -1)
+            : trimmed;
+
+        return content
             .split(',')
             .map((s) => s.trim())
             .filter(Boolean);
     }
 
-    function generateMainSlideHtml(publicId) {
-        const sources = IMG_BREAKPOINTS.map(
-            (bp) =>
-                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
-        ).join('\n            ');
-
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
           <picture>
-            ${sources}
-            <img class="swiper-slide-main" src="${buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h)}" alt="${productName}">
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
           </picture>
         </div>`;
     }
 
-    function generateThumbSlideHtml(publicId) {
+    function renderThumbSlide(src) {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
+          <img class="swiper-slide-thumbs" src="${src}" alt="${productName}">
         </div>`;
     }
 
+    function generateCloudinaryMainSlide(publicId, baseUrl) {
+        const sourcesHtml = IMG_BREAKPOINTS.map(
+            (bp) => `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
+        ).join('\n            ');
+        const fallbackSrc = buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h, baseUrl);
+        return renderMainSlide(fallbackSrc, sourcesHtml);
+    }
+
+    function generateCloudinaryThumbSlide(publicId, baseUrl) {
+        const src = buildCloudinaryUrl(publicId, THUMB.w, THUMB.h, baseUrl);
+        return renderThumbSlide(src);
+    }
+
     const SELECTORS = {
         galleryCarousel: '.thumb-gallery',
         swiperContainerMain: '.swiper-container-main',
@@ -89,7 +121,11 @@ Wick.ThumbGallery = (function () {
     function handleThumbClick(swiper) {
         return function () {
             const clickedIndex = $(this).index();
-            swiper.slideToLoop(clickedIndex);
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(clickedIndex);
+            }
         };
     }
 
@@ -110,9 +146,11 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange) {
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange, count) {
         return {
             ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
             navigation: {
                 nextEl: $nextBtn[0],
                 prevEl: $prevBtn[0],
@@ -122,17 +160,44 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function initializeCarousel($slider, ids) {
-        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
-        $slider
-            .find(SELECTORS.swiperThumbsWrapper)
-            .html(ids.map(generateThumbSlideHtml).join('\n'));
+    function initializeCarousel($slider, ids, baseUrl, missingImage) {
+        const isMissing = ids.length === 0 && Boolean(missingImage);
+        if (ids.length === 0 && !missingImage) {
+            return;
+        }
 
         const $container = $slider.find(SELECTORS.swiperContainerMain);
+        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
+        if (!$container.length || !$thumbContainer.length) {
+            return;
+        }
+
+        if ($container[0].swiper) {
+            $container[0].swiper.destroy(true, true);
+        }
+        if ($thumbContainer[0].swiper) {
+            $thumbContainer[0].swiper.destroy(true, true);
+        }
+
+        const total = isMissing ? 1 : ids.length;
+        $slider.attr('data-length', total);
+
+        if (isMissing) {
+            $slider.addClass('thumb-gallery--missing-image');
+            $slider.find(SELECTORS.swiperMainWrapper).html(renderMainSlide(missingImage));
+            $slider.find(SELECTORS.swiperThumbsWrapper).html(renderThumbSlide(missingImage));
+        } else {
+            $slider.removeClass('thumb-gallery--missing-image');
+            $slider
+                .find(SELECTORS.swiperMainWrapper)
+                .html(ids.map((id) => generateCloudinaryMainSlide(id, baseUrl)).join('\n'));
+            $slider
+                .find(SELECTORS.swiperThumbsWrapper)
+                .html(ids.map((id) => generateCloudinaryThumbSlide(id, baseUrl)).join('\n'));
+        }
+
         const $nextBtn = $slider.find(SELECTORS.nextBtn);
         const $prevBtn = $slider.find(SELECTORS.prevBtn);
-
-        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
         const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
         const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
 
@@ -145,22 +210,25 @@ Wick.ThumbGallery = (function () {
             $container[0],
             getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
                 updateActiveThumbnail(swiper, thumbsSwiper);
-            })
+            }, total)
         );
 
-        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
         updateActiveThumbnail(swiper, thumbsSwiper);
     }
 
-    function init(hybrisString) {
+    function init(hybrisString, options = {}) {
         const ids = parseIdentifiers(hybrisString);
 
-        if (ids.length < 2) {
-            return;
-        }
+        const opts = typeof options === 'string' ? { mediaDomain: options } : (options || {});
+        const baseUrl = getBaseUrl(opts.mediaDomain);
+        const missingImage = opts.missingImage || '';
 
         $(SELECTORS.galleryCarousel).each(function (_, slider) {
-            initializeCarousel($(slider), ids);
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
         });
     }
 

package/package.json

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

package/src/components/suite-product-card.hbs

@@ -16,12 +16,12 @@
                 <div class="suite-product-card__price-qty">
                     <div class="suite-product-card__vat including-vat">
                         <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price-vat}}</span>
-                        <span class="suite-product-card__vat-text">Inc. VAT</span>
+                        <span class="suite-product-card__vat-text">Inc.VAT</span>
                     </div>
 
                     <div class="suite-product-card__vat excluding-vat d-none">
                         <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price}}</span>
-                        <span class="suite-product-card__vat-text">Exc. VAT</span>
+                        <span class="suite-product-card__vat-text">Exc.VAT</span>
                     </div>
 
                     <span class="suite-product-card__quantity">

package/src/js/page/ripple/thumb-gallery.js

@@ -1,9 +1,6 @@
 var Wick = window.Wick || {};
 
 Wick.ThumbGallery = (function () {
-    const BASE_URL = 'https://media.wickes.co.uk/image/upload/';
-    const productName = window.pdpProduct && window.pdpProduct.name ? window.pdpProduct.name : '';
-
     const IMG_BREAKPOINTS = [
         { media: '(max-width: 576px)', w: 576, h: 324 },
         { media: '(max-width: 768px)', w: 510, h: 287 },
@@ -13,40 +10,75 @@ Wick.ThumbGallery = (function () {
     const MAIN_DEFAULT = { w: 710, h: 399 };
     const THUMB = { w: 100, h: 56 };
 
-    function buildCloudinaryUrl(publicId, w, h) {
+    function getMediaDomain() {
+        return (typeof window !== 'undefined' && window.mediaDomain) || 'media.wickes.co.uk';
+    }
+
+    function getProductName() {
+        return (typeof window !== 'undefined' && window.pdpProduct && window.pdpProduct.name) || '';
+    }
+
+    function getBaseUrl(customDomain) {
+        const domain = customDomain || getMediaDomain();
+        const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+        return `https://${cleanDomain}/image/upload/`;
+    }
+
+    function buildCloudinaryUrl(publicId, w, h, baseUrl) {
+        const base = baseUrl || getBaseUrl();
+        const cleanId = String(publicId).replace(/^\/+/, '');
         const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
-        return `${BASE_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}`;
     }
 
     function parseIdentifiers(hybrisString) {
-        return hybrisString
-            .trim()
-            .slice(1, hybrisString.length - 1)
+        if (Array.isArray(hybrisString)) {
+            return hybrisString.filter(Boolean);
+        }
+        if (!hybrisString || typeof hybrisString !== 'string') {
+            return [];
+        }
+        const trimmed = hybrisString.trim();
+        const content = trimmed.startsWith('[') && trimmed.endsWith(']')
+            ? trimmed.slice(1, -1)
+            : trimmed;
+
+        return content
             .split(',')
             .map((s) => s.trim())
             .filter(Boolean);
     }
 
-    function generateMainSlideHtml(publicId) {
-        const sources = IMG_BREAKPOINTS.map(
-            (bp) =>
-                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
-        ).join('\n            ');
-
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
           <picture>
-            ${sources}
-            <img class="swiper-slide-main" src="${buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h)}" alt="${productName}">
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
           </picture>
         </div>`;
     }
 
-    function generateThumbSlideHtml(publicId) {
+    function renderThumbSlide(src) {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
+          <img class="swiper-slide-thumbs" src="${src}" alt="${productName}">
         </div>`;
     }
 
+    function generateCloudinaryMainSlide(publicId, baseUrl) {
+        const sourcesHtml = IMG_BREAKPOINTS.map(
+            (bp) => `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
+        ).join('\n            ');
+        const fallbackSrc = buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h, baseUrl);
+        return renderMainSlide(fallbackSrc, sourcesHtml);
+    }
+
+    function generateCloudinaryThumbSlide(publicId, baseUrl) {
+        const src = buildCloudinaryUrl(publicId, THUMB.w, THUMB.h, baseUrl);
+        return renderThumbSlide(src);
+    }
+
     const SELECTORS = {
         galleryCarousel: '.thumb-gallery',
         swiperContainerMain: '.swiper-container-main',
@@ -89,7 +121,11 @@ Wick.ThumbGallery = (function () {
     function handleThumbClick(swiper) {
         return function () {
             const clickedIndex = $(this).index();
-            swiper.slideToLoop(clickedIndex);
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(clickedIndex);
+            }
         };
     }
 
@@ -110,9 +146,11 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange) {
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange, count) {
         return {
             ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
             navigation: {
                 nextEl: $nextBtn[0],
                 prevEl: $prevBtn[0],
@@ -122,17 +160,44 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function initializeCarousel($slider, ids) {
-        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
-        $slider
-            .find(SELECTORS.swiperThumbsWrapper)
-            .html(ids.map(generateThumbSlideHtml).join('\n'));
+    function initializeCarousel($slider, ids, baseUrl, missingImage) {
+        const isMissing = ids.length === 0 && Boolean(missingImage);
+        if (ids.length === 0 && !missingImage) {
+            return;
+        }
 
         const $container = $slider.find(SELECTORS.swiperContainerMain);
+        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
+        if (!$container.length || !$thumbContainer.length) {
+            return;
+        }
+
+        if ($container[0].swiper) {
+            $container[0].swiper.destroy(true, true);
+        }
+        if ($thumbContainer[0].swiper) {
+            $thumbContainer[0].swiper.destroy(true, true);
+        }
+
+        const total = isMissing ? 1 : ids.length;
+        $slider.attr('data-length', total);
+
+        if (isMissing) {
+            $slider.addClass('thumb-gallery--missing-image');
+            $slider.find(SELECTORS.swiperMainWrapper).html(renderMainSlide(missingImage));
+            $slider.find(SELECTORS.swiperThumbsWrapper).html(renderThumbSlide(missingImage));
+        } else {
+            $slider.removeClass('thumb-gallery--missing-image');
+            $slider
+                .find(SELECTORS.swiperMainWrapper)
+                .html(ids.map((id) => generateCloudinaryMainSlide(id, baseUrl)).join('\n'));
+            $slider
+                .find(SELECTORS.swiperThumbsWrapper)
+                .html(ids.map((id) => generateCloudinaryThumbSlide(id, baseUrl)).join('\n'));
+        }
+
         const $nextBtn = $slider.find(SELECTORS.nextBtn);
         const $prevBtn = $slider.find(SELECTORS.prevBtn);
-
-        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
         const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
         const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
 
@@ -145,22 +210,25 @@ Wick.ThumbGallery = (function () {
             $container[0],
             getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
                 updateActiveThumbnail(swiper, thumbsSwiper);
-            })
+            }, total)
         );
 
-        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
         updateActiveThumbnail(swiper, thumbsSwiper);
     }
 
-    function init(hybrisString) {
+    function init(hybrisString, options = {}) {
         const ids = parseIdentifiers(hybrisString);
 
-        if (ids.length < 2) {
-            return;
-        }
+        const opts = typeof options === 'string' ? { mediaDomain: options } : (options || {});
+        const baseUrl = getBaseUrl(opts.mediaDomain);
+        const missingImage = opts.missingImage || '';
 
         $(SELECTORS.galleryCarousel).each(function (_, slider) {
-            initializeCarousel($(slider), ids);
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
         });
     }
 

package/src/page_bathroom-plp-vat.html

@@ -19,7 +19,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <div class="package-plp__content products-list-v2">
                         <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
                             <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
                                 {{> kitchen/mobile-nav-item

package/src/page_bathroom-plp-without-load-more.html

@@ -26,7 +26,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <div class="package-plp__content products-list-v2">
                         <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
                             <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
                                 {{> kitchen/mobile-nav-item

package/src/page_bathroom-plp.html

@@ -26,7 +26,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <div class="package-plp__content products-list-v2">
                         <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
                             <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
                                 {{> kitchen/mobile-nav-item

package/src/page_checkout_delivery-details-v2-calendar-not-loaded.html

@@ -0,0 +1,167 @@
+{{#extend "checkout-new" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Delivery details calendar not loaded" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="1"}}
+{{/content}}
+
+  {{#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">
+  {{/content}}
+
+  {{#content "aside"}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+  {{/content}}
+
+
+{{#content "main"}}
+    <div class="delivery-block">
+        <h3 class="delivery-block__heading">Delivery Information</h3>
+        <div class="delivery-block__wrapper">
+
+            <div class="date-selection__wrapper">
+                <h3 class="date-selection__header">Select delivery date</h3>
+                <p class="date-selection__info-block">
+                    Please choose a date for delivery from the calendar below
+                </p>
+            </div>
+
+            <div class="component component-date-selection">
+                <div class="delivery-details-product-oos">
+                    <div class="product-oos-inner">
+                    <div class="row">
+                        <div class="content">
+                            <h5>
+                                We will pick the next available slot for you
+                            </h5>
+                            <p>The delivery calendar is not available at the moment but don't worry, we will pick the next available delivery slot for you. We will be in touch via email to confirm your delivery date.</p>
+                            <p>Please press the Payment details button to continue.</p>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+
+
+            {{#with checkoutOrder.deliveryDeliveryDetails.[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__head-info">
+            <p>Simply enter or correct the contact information required below and continue to the next step of the checkout.</p>
+            <div class="head-info__wrapper">
+                <div class="head-info__wrapper-exclamation">
+                    <i class="far fa-exclamation-circle"></i>
+                    <span>Your order will be held for up to 24 hours</span>
+                </div>
+                <div class="head-info__wrapper-text">
+                    <p>You will receive a text when your order is ready to collect (usually within 1 trading hour of receiving your order confirmation email).</p>
+                    <p>Please wait for confirmation before travelling to your chosen store.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="click-collect-block__wrapper">
+
+          {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+            <div class="checkout-order">
+                {{> checkout-order-block}}
+            </div>
+          {{/with}}
+
+          <div class="add-contact-details">
+              <h3 class="add-contact-details__heading">Add contact details</h3>
+              <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
+
+              <div class="add-contact-details__form">
+                {{> form-row type="tel" id="mobile" label="Mobile number" required="true"}}
+                {{> form-row type="tel" id="home-phone" label="Home phone"}}
+              </div>
+          </div>
+        </div>
+    </div>
+
+    <div class="simplify-collection">
+        <h3 class="simplify-collection__heading">Simplify your collection</h3>
+        <p class="simplify-collection__info">All the Click & Collect items in your order are currently available at the following stores. Select
+            one of the store to collect all your items from the same location.</p>
+
+        <div class="simplify-collection__wrapper">
+            <div class="your-contact-details__checkbox">
+                {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
+                {{#content "html"}}
+                <span class="distance">6.2 Miles</span>
+                <div class="store-address">
+                    <div class="store-address__street">Wickes Larch Street,</div>
+                    <div class="store-address__town">Oldham</div>
+                    <div class="store-address__city">Greater Manchester,</div>
+                    <div class="store-address__postcode">OL8 1TA</div>
+                    <div class="store-address__country">United Kingdom</div>
+                </div>
+                {{/content}}
+                {{/extend}}
+            </div>
+            <div class="your-contact-details__checkbox">
+                {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
+                {{#content "html"}}
+                <span class="distance">4.9 Miles</span>
+                <div class="store-address">
+                    <div class="store-address__street">Wickes Wynne Avenue,</div>
+                    <div class="store-address__town"> Clifton, Swinton</div>
+                    <div class="store-address__city">Greater Manchester,</div>
+                    <div class="store-address__postcode">M27 8FU</div>
+                    <div class="store-address__country">United Kingdom</div>
+                </div>
+                {{/content}}
+                {{/extend}}
+            </div>
+        </div>
+
+        <p class="simplify-collection__info">I would like to update my order to collect all my items from one store.</p>
+
+        <button class="btn btn-primary simplify-collection__btn">
+            <span class="btn__text">Simplify collection</span>
+        </button>
+    </div>
+
+  <div class="continue-btn">
+      <button class="btn btn-action">Continue to Payment Details</button>
+  </div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+{{> checkout-voucher-remove-modal
+    shopping-cart-v2.checkout.voucher-remove-popup
+    id="voucher-remove-popup"
+}}
+    <script defer src="./js/page/checkout-confirmation-new.js"></script>
+    <script defer src="./js/page/select-address.js"></script>
+
+    {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
+        {{#content "body"}}
+            <div class="edit-address-modal-block">
+                <div class="delivery-block__wrapper customer-journey-block">
+                    {{> notifications notification-page.error-deliver-area}}
+                    <div class="delivery-block__wrapper customer-journey-block">
+                        {{> user-address-delivery radioName="checkout-address-radio" modal="modalDeliveryEdit" selectedAddress=true simpleAddress=true isDeleted=true}}
+                    </div>
+                </div>
+
+                <button class="btn btn-action btn_full">
+                    <span class="btn__text">Continue to delivery details</span>
+                </button>
+            </div>
+        {{/content}}
+    {{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/page_checkout_payment-details-v2-asm.html

@@ -1,4 +1,4 @@
-{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true"}}
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true" checkout=true}}
 {{#content "steps"}}
 {{> steps active-step-index="3" }}
 {{/content}}
@@ -11,7 +11,7 @@
   {{/content}}
 
   {{#content "aside"}}
-    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true hideDeliveryCostMessage=true}}
+    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true email=true hideDeliveryCostMessage=true checkout=true}}
   {{/content}}
 
 
@@ -39,7 +39,6 @@
     </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 }}
         </div>