wickes-css2 2.112.0-develop.4 → 2.112.0-develop.7

package/src/js/emulation/mock.js

@@ -9,6 +9,315 @@ Wick.FEMock = {
         );
     },
     dataBloomreach: {
+        whyNotAddRecommendationsSingle: {
+            recommendedProducts: [
+                {
+                    baseProduct: {
+                        code: '153731',
+                        name: 'Wickes Trade Paint Roller Set - 9in',
+                        url: '/Wickes-Trade-Paint-Roller-Set---9in/p/153731',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=roller',
+                                altText: 'Wickes Trade Paint Roller Set - 9in',
+                            },
+                        ],
+                        externalAverageRating: 5,
+                        externalReviewCount: 100,
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 9999,
+                            priceType: 'BUY',
+                            formattedValue: '£9,999.00',
+                            formattedPriceWithoutCurrencySymbol: '16',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 999900,
+                            wasPrice: 30,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 9998,
+                            priceType: 'BUY',
+                            formattedValue: '£9,998.00',
+                            formattedPriceWithoutCurrencySymbol: '13.33',
+                            currencySymbol: '£',
+                            valueInPence: 999800,
+                            wasPrice: 25,
+                        },
+                    },
+                },
+            ],
+        },
+        whyNotAddRecommendations: {
+            recommendedProducts: [
+                {
+                    baseProduct: {
+                        code: '153731',
+                        name: 'Wickes Trade Paint Roller Set - 9in',
+                        url: '/Wickes-Trade-Paint-Roller-Set---9in/p/153731',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=roller',
+                                altText: 'Wickes Trade Paint Roller Set - 9in',
+                            },
+                        ],
+                        externalAverageRating: 5,
+                        externalReviewCount: 100,
+
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 9999,
+                            priceType: 'BUY',
+                            formattedValue: '£9,999.00',
+                            formattedPriceWithoutCurrencySymbol: '16',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 999900,
+                            wasPrice: 3000,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 9998,
+                            priceType: 'BUY',
+                            formattedValue: '£9,998.00',
+                            formattedPriceWithoutCurrencySymbol: '13.33',
+                            currencySymbol: '£',
+                            valueInPence: 999800,
+                            wasPrice: 2500,
+                        },
+                    },
+                },
+                {
+                    baseProduct: {
+                        code: '349137',
+                        name: 'Wickes Microfibre Paint Roller Sleeve - 9in',
+                        url: '/Wickes-Microfibre-Paint-Roller-Sleeve---9in/p/349137',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=sleeve',
+                                altText: 'Wickes Microfibre Paint Roller Sleeve - 9in',
+                            },
+                        ],
+                        externalAverageRating: 4.2,
+                        externalReviewCount: 48,
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 9999,
+                            priceType: 'BUY',
+                            formattedValue: '£7.5220',
+                            formattedPriceWithoutCurrencySymbol: '7.50',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 999900,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 9998,
+                            priceType: 'BUY',
+                            formattedValue: '£6.25',
+                            formattedPriceWithoutCurrencySymbol: '6.25',
+                            currencySymbol: '£',
+                            valueInPence: 999800,
+                        },
+                    },
+                },
+                {
+                    baseProduct: {
+                        code: '221048',
+                        name: 'Wickes Paint Tray - 9in',
+                        url: '/Wickes-Paint-Tray---9in/p/221048',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=tray',
+                                altText: 'Wickes Paint Tray - 9in',
+                            },
+                        ],
+                        externalAverageRating: 3.8,
+                        externalReviewCount: 19,
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 4,
+                            priceType: 'BUY',
+                            formattedValue: '£4',
+                            formattedPriceWithoutCurrencySymbol: '4',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 400,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 3.33,
+                            priceType: 'BUY',
+                            formattedValue: '£3.33',
+                            formattedPriceWithoutCurrencySymbol: '3.33',
+                            currencySymbol: '£',
+                            valueInPence: 333,
+                        },
+                    },
+                },
+                {
+                    baseProduct: {
+                        code: '654221',
+                        name: 'Wickes Professional Masking Tape - 48mm x 50m',
+                        url: '/Wickes-Professional-Masking-Tape---48mm-x-50m/p/654221',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=tape',
+                                altText: 'Wickes Professional Masking Tape - 48mm x 50m',
+                            },
+                        ],
+                        externalAverageRating: 4.6,
+                        externalReviewCount: 72,
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 5.5,
+                            priceType: 'BUY',
+                            formattedValue: '£5.50',
+                            formattedPriceWithoutCurrencySymbol: '5.50',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 550,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 4.58,
+                            priceType: 'BUY',
+                            formattedValue: '£4.58',
+                            formattedPriceWithoutCurrencySymbol: '4.58',
+                            currencySymbol: '£',
+                            valueInPence: 458,
+                        },
+                    },
+                },
+                {
+                    baseProduct: {
+                        code: '782913',
+                        name: 'Wickes Dust Sheet Cotton Twill - 3.6m x 2.7m Extra Long Product Name For Two Line Truncation Test',
+                        url: '/Wickes-Dust-Sheet-Cotton-Twill---3-6m-x-2-7m/p/782913',
+                        purchasable: true,
+                        productType: 'ProductModel',
+                        isBaseProduct: false,
+                        availabilityRestriction: 'NO_RESTRICTIONS',
+                        fulfilmentType: 'STANDARD',
+                        stock: {
+                            stockLevelStatus: {
+                                code: 'inStock',
+                            },
+                        },
+                        fulfillmentAttributes: {
+                            type: 'STANDARD',
+                        },
+                        images: [
+                            {
+                                imageType: 'PRIMARY',
+                                format: 'product',
+                                url: 'https://placehold.co/68x68?text=sheet',
+                                altText: 'Wickes Dust Sheet Cotton Twill - 3.6m x 2.7m',
+                            },
+                        ],
+                        externalAverageRating: 4.1,
+                        externalReviewCount: 34,
+                        displayPrice: {
+                            currencyIso: 'GBP',
+                            value: 12,
+                            priceType: 'BUY',
+                            formattedValue: '£12',
+                            formattedPriceWithoutCurrencySymbol: '12',
+                            currencySymbol: '£',
+                            vatRatePercentage: 20,
+                            valueInPence: 1200,
+                            wasPrice: 18,
+                        },
+                        displayPriceExclusiveVat: {
+                            currencyIso: 'GBP',
+                            value: 10,
+                            priceType: 'BUY',
+                            formattedValue: '£10',
+                            formattedPriceWithoutCurrencySymbol: '10',
+                            currencySymbol: '£',
+                            valueInPence: 1000,
+                            wasPrice: 15,
+                        },
+                    },
+                },
+            ],
+        },
         completeYourProject3Recomendations: [
             {
                 baseProduct: {

package/src/js/emulation/shopping-list.js

@@ -1,11 +1,13 @@
 var Wick = Wick || {};
 
 Wick.ShoppingList = {
-    bindAll : function () {
+    invalidEmailMessage: 'Please enter a valid email address',
+
+    bindAll: function () {
         Wick.ShoppingList.bindButtons();
     },
 
-    bindButtons : function () {
+    bindButtons: function () {
         $('.btn-share-confirmation .btn-primary').on('click', function (e) {
             e.preventDefault();
             $('#share-via-email').prop('required', false);
@@ -13,7 +15,7 @@ Wick.ShoppingList = {
         });
     },
 
-    submitSharingShoppingList : function () {
+    submitSharingShoppingList: function () {
         var forms = Wick.ShoppingList.getRecipientEmailsForms();
 
         if (Wick.ShoppingList.isFormsValid(forms)) {
@@ -21,82 +23,71 @@ Wick.ShoppingList = {
         }
     },
 
-    onSuccessSharingShoppingList : function () {
+    onSuccessSharingShoppingList: function () {
         Wick.ShoppingList.resetFormErrors();
     },
 
-    getRecipientEmailsForms : function () {
+    getRecipientEmailsForms: function () {
         var forms = new Array();
 
         forms.push($('#share-via-email'));
         $('.share-via-email-box').each(function () {
-            forms.push($(this).find('[type="email"]'));
+            forms.push($(this).find('[name="share-list-modal"]'));
         });
 
         return forms;
     },
 
-    isFormsValid : function (forms) {
-        var oneFieldFilledIn = false;
+    clearValidationErrors: function (forms) {
+        forms.forEach(function (form) {
+            window.Wick.Validation.removeValidationError(form);
+        });
+    },
 
-        forms.forEach(function(form) {
-            if ($(form).val() !== '') {
-                oneFieldFilledIn = true;
-            }
+    isFormsValid: function (forms) {
+        Wick.ShoppingList.clearValidationErrors(forms);
+
+        var oneFieldFilledIn = forms.some(function (form) {
+            return $(form).val() !== '';
         });
 
         if (!oneFieldFilledIn) {
-            Wick.ShoppingList.showEmptyFormsWarning(forms[0]);
+            window.Wick.Validation.displayValidationError(
+                forms[0],
+                Wick.ShoppingList.invalidEmailMessage
+            );
             return false;
         }
 
         var isFormsValid = true;
 
-        forms.forEach(function(form) {
-            console.log(form[0]);
-            if (!form[0].checkValidity()) {
-                Wick.ShoppingList.showInvalidEmailWarning(form);
-                isFormsValid = false;
-            }
-        });
+        forms
+            .filter(function (form) {
+                return $(form).val() !== '';
+            })
+            .forEach(function (form) {
+                if (window.Wick.Validation.isValidEmail($(form).val())) {
+                    window.Wick.Validation.removeValidationError(form);
+                } else {
+                    window.Wick.Validation.displayValidationError(
+                        form,
+                        Wick.ShoppingList.invalidEmailMessage
+                    );
+                    isFormsValid = false;
+                }
+            });
 
         return isFormsValid;
     },
 
-    showEmptyFormsWarning : function (form) {
-        form.prop('required', true);
-
-        try {
-            form.get(0).reportValidity();
-        } catch (e) {
-            Wick.ShoppingList.resetFormErrors();
-
-            form.closest('.form-row').addClass('form-row_validation-error');
-            form.closest('.form-row__field').append('<div class="form-row__error">Please fill in the field</div>');
-        }
-    },
-
-    showInvalidEmailWarning : function (form) {
-        try {
-            form.get(0).reportValidity();
-        } catch (e) {
-            Wick.ShoppingList.resetFormErrors();
-
-            form.closest('.form-row').addClass('form-row_validation-error');
-            form.closest('.form-row__field').append('<div class="form-row__error">Please fill in the field</div>');
-        }
-    },
-
     resetFormErrors: function () {
-        $('#share-list-form .form-row').each(function() {
+        $('#share-list-form .form-row').each(function () {
             $(this).removeClass('form-row_validation-error');
             $(this).find('.form-row__error').remove();
         });
-    }
+    },
 };
 
-
-
-$(document).ready(function() {
+$(document).ready(function () {
     Wick.ShoppingList.bindAll();
 });

package/src/js/emulation/why-not-add-loading.js

@@ -0,0 +1,11 @@
+var Wick = window.Wick || {};
+
+$(document).ready(function () {
+    window.setTimeout(function () {
+        const $container = $('[data-why-not-add-widget]');
+        const mockDataKey = $container.data('mock-key');
+        const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
+
+        Wick.BloomreachWidget.init('whyNotAdd', payloadData);
+    }, 3000);
+});

package/src/js/emulation/why-not-add.js

@@ -0,0 +1,28 @@
+var Wick = window.Wick || {};
+
+function simulateHybrisSendingHtml() {
+    const htmlFromHybris = Wick.FEMock.cartPDP;
+
+    window.dispatchEvent(
+        new CustomEvent('productAddedToCart', {
+            detail: {
+                html: htmlFromHybris,
+            },
+        })
+    );
+}
+
+function bindWhyNotAddToCartEvent() {
+    $(window)
+        .off('addToCart.whyNotAddEmulation')
+        .on('addToCart.whyNotAddEmulation', function ({ detail: { resolve } }) {
+            setTimeout(function () {
+                resolve();
+                simulateHybrisSendingHtml();
+            }, 3000);
+        });
+}
+
+$(document).ready(function () {
+    bindWhyNotAddToCartEvent();
+});

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

@@ -277,13 +277,14 @@ Wick.BasketPage = {
             if (isSwitchVat) {
                 const itemTotalIncVat = context.find(Wick.BasketPage.el.itemTotalIncVat);
                 const itemTotalExcVat = context.find(Wick.BasketPage.el.itemTotalExcVat);
-                const totalPrice = data.entry.itemTotalWithoutDiscount.formattedValue;
-                const totalPriceExcVat = data.entry.itemTotalWithoutDiscountExcVat.formattedValue;
+                const totalPrice = data.entry.displayItemTotalWithoutDiscount.formattedValue;
+                const totalPriceExcVat =
+                    data.entry.displayItemTotalWithoutDiscountExclusiveVat.formattedValue;
                 itemTotalIncVat.text(totalPrice);
                 itemTotalExcVat.text(totalPriceExcVat);
             } else {
                 const totalValue = context.find(Wick.BasketPage.el.itemTotal);
-                const totalPrice = data.entry.itemTotalWithoutDiscount.formattedValue;
+                const totalPrice = data.entry.displayItemTotalWithoutDiscount.formattedValue;
                 totalValue.text(totalPrice);
             }
         }
@@ -798,20 +799,20 @@ Wick.BasketPage = {
                             <div class="order-item__price-title">Item price:</div>
                             <div class="order-item__price-value">
                             ${
-                                currentItem.basePrice.value === 0
+                                currentItem.displayBasePrice.value === 0
                                     ? '<span class="order-item__value">FREE</span>'
                                     : Wick.VatToggle.isToggleVatAvailable()
                                       ? `
                                             <div class="including-vat"><!--
-                                                --><span class="order-item__value">${currentItem.basePrice.formattedValue}</span><!--
+                                                --><span class="order-item__value">${currentItem.displayBasePrice.formattedValue}</span><!--
                                                 --><div class="price-vat">Inc.VAT</div>
                                             </div>
                                             <div class="excluding-vat"><!--
-                                                --><span class="order-item__value">${currentItem.basePriceExcVat.formattedValue}</span><!--
+                                                --><span class="order-item__value">${currentItem.displayBasePriceExclusiveVat.formattedValue}</span><!--
                                                 --><div class="price-vat">Exc.VAT</div>
                                             </div>
                                           `
-                                      : `<span class="order-item__value">${currentItem.basePrice.formattedValue}</span>`
+                                      : `<span class="order-item__value">${currentItem.displayBasePrice.formattedValue}</span>`
                             }
                             </div>
                         </div>
@@ -820,20 +821,20 @@ Wick.BasketPage = {
                             <div class="order-item__total-title">Item total:</div>
                             <div class="order-item__total-value">
                                 ${
-                                    currentItem.itemTotalWithoutDiscount.value === 0
+                                    currentItem.displayItemTotalWithoutDiscount.value === 0
                                         ? '<span class="order-item__value">FREE</span>'
                                         : Wick.VatToggle.isToggleVatAvailable()
                                           ? `
                                                 <div class="including-vat"><!--
-                                                    --><span class="order-item__value">${currentItem.itemTotalWithoutDiscount.formattedValue}</span><!--
+                                                    --><span class="order-item__value">${currentItem.displayItemTotalWithoutDiscount.formattedValue}</span><!--
                                                     --><div class="price-vat">Inc.VAT</div><!--
                                                 --></div>
                                                 <div class="excluding-vat"><!--
-                                                    --><span class="order-item__value">${currentItem.itemTotalWithoutDiscountExcVat.formattedValue}</span><!--
+                                                    --><span class="order-item__value">${currentItem.displayItemTotalWithoutDiscountExclusiveVat.formattedValue}</span><!--
                                                     --><div class="price-vat">Exc.VAT</div>
                                                 </div>
                                             `
-                                          : `<span class="order-item__value">${currentItem.itemTotalWithoutDiscount.formattedValue}</span>`
+                                          : `<span class="order-item__value">${currentItem.displayItemTotalWithoutDiscount.formattedValue}</span>`
                                 }
                             </div>
                         </div>
@@ -929,7 +930,7 @@ Wick.BasketPage = {
         data.appliedProductPromotions &&
             data.appliedProductPromotions.forEach((entry) => {
                 entry.consumedEntries.forEach((promo) => {
-                    if (promo.orderEntryNumber === item.entryNumber && entry.description) {
+                    if (promo.orderEntryNumber === item.entryNumber && entry.displayDescription) {
                         if (arr.length) {
                             let duplicate = arr.every((el) => {
                                 return el !== Wick.BasketPage.buildPromotion(entry);
@@ -1115,15 +1116,19 @@ Wick.BasketPage = {
         const arr = [];
         if (data.potentialOrderPromotions && data.potentialOrderPromotions.length) {
             data.potentialOrderPromotions.forEach((promo) => {
-                !promo.description ||
+                !promo.displayDescription ||
                     arr.push(`
                     <div class="p-promotion">
                         <div class="p-promotion__icon">
                             <i class="icon fas fa-gift"></i>
                         </div>
-                        <div class="p-promotion__description">
-                            ${promo.description}
-                        </div>
+                        ${
+                            Wick.VatToggle.isToggleVatAvailable() &&
+                            promo.displayDescriptionExclusiveVat
+                                ? `<div class="p-promotion__description including-vat">${promo.displayDescription}</div>
+                               <div class="p-promotion__description excluding-vat d-none">${promo.displayDescriptionExclusiveVat}</div>`
+                                : `<div class="p-promotion__description">${promo.displayDescription}</div>`
+                        }
                         <div class="p-promotion__close">
                             <i class="icon fas fa-times"></i>
                         </div>
@@ -1134,15 +1139,19 @@ Wick.BasketPage = {
 
         if (data.appliedOrderPromotions && data.appliedOrderPromotions.length) {
             data.appliedOrderPromotions.forEach((promo) => {
-                !promo.description ||
+                !promo.displayDescription ||
                     arr.push(`
                     <div class="p-promotion">
                         <div class="p-promotion__icon">
                             <i class="icon fas fa-gift"></i>
                         </div>
-                        <div class="p-promotion__description">
-                            ${promo.description}
-                        </div>
+                        ${
+                            Wick.VatToggle.isToggleVatAvailable() &&
+                            promo.displayDescriptionExclusiveVat
+                                ? `<div class="p-promotion__description including-vat">${promo.displayDescription}</div>
+                               <div class="p-promotion__description excluding-vat d-none">${promo.displayDescriptionExclusiveVat}</div>`
+                                : `<div class="p-promotion__description">${promo.displayDescription}</div>`
+                        }
                         <div class="p-promotion__close">
                             <i class="icon fas fa-times"></i>
                         </div>