@nakedwines/naked-components 0.0.3

package/src/globals/products.js

@@ -0,0 +1,251 @@
+/* eslint-disable no-prototype-builtins */
+
+import { csrf } from './csrf';
+import { Assortments } from './assortments';
+import { Logger } from './functions';
+import { styleNamesIds, styleColours } from './variables';
+import 'whatwg-fetch';
+
+export const Products = {
+
+	/**
+	 * Fetches a list of products
+	 * @param {Array} productIds the list of product IDs
+	 * @returns {Array} returns an array of products
+	 */
+	getProductsById({ productIds }) {
+		return new Promise((resolve, reject) => {
+			if (!productIds) {
+				reject({ error: 'productId is required' });
+				return;
+			}
+
+			fetch(`/products?productIds=${productIds}`, {
+				'method': 'GET'
+			}).then(response => {
+				return resolve(response.json());
+			}).catch(error => reject({ error: error }));
+		});
+	},
+
+	/**
+	 * Adds a product to basket
+	 * @param {Array} productId the product ID to add to basket
+	 * @param {Number} quantity quantity to add to basket
+	 * @returns {Object} returns a success/error response
+	 */
+	addToBasket({ productId, quantity = 1 }) {
+		return new Promise((resolve, reject) => {
+			if (!productId) {
+				reject({ error: 'productId is required' });
+				return;
+			}
+
+			const headers = new Headers(csrf.header);
+			const formData = new FormData();
+			formData.append('productId', productId.toString());
+			formData.append('quantity', quantity.toString());
+
+			fetch('/customer/add-to-cart.json', {
+				'method': 'POST',
+				'headers': headers,
+				'body': formData
+			}).then(response => {
+				return resolve(response.json());
+			}).catch(error => reject({ error: error }));
+		});
+	},
+
+	/**
+	 * Displays an add to basket notification in the header
+	 * @param {String} productName the product name to display
+	 */
+	showATBConfirmation(productName) {
+		if (window && window.Notify && window.Notify.CoinPurse) {
+			const config = {
+				settings: { purseType: 'product-added' },
+				productName: productName,
+				autoDismiss: true,
+				timeout: 4000
+			};
+
+			window.Notify.CoinPurse.show(config.settings, config.productName, config.autoDismiss, config.timeout);
+			
+			if (window.nkd && window.nkd.headerCart) {
+				window.nkd.headerCart.reload();
+			}
+		}
+	},
+
+	_parseProduct(data) {
+        let model = null;
+        let type;
+        let imageAssortmentKey;
+        let imageMediumCutout = 'mediumCutout';
+
+        // skip item if it's not in the right format
+        if (!data || !data.object) { Logger.log('_parseProduct skipping item', "'object' property not found"); return null; }
+
+        // wrap in try catch so we can skip an item if the data is inconsistent
+        try {
+            // use different keys if it's a case rather than a single product
+            if (data && data.object && data.object.productTypeDesc && data.object.productTypeDesc == 'Case') {
+                type = 'case-product';
+                imageAssortmentKey = 'headline';
+            } else {
+                type = 'single-product';
+                imageAssortmentKey = 'background';
+            }
+
+            model = {
+                id: data.object.id,
+                type: type,
+                data: {
+                    id: data.object.id,
+                    heading: data.object.productName,
+                    subHeading: null,
+                    thumbnail: '/merchandising/content/wines/default-content/background.jpg',
+                    button: null,
+                    pricesCurrent: {
+                        prices: {}
+                    },
+                    positiveRatingPercentage: null,
+                    numberOfRatings: null,
+                    angelOnly: data.object.angelOnly,
+                    tickpoints: null,
+                    tickpointsCase: null,
+                    taste: null,
+                    originForSpiritsOrBeer: data.object.originForSpiritsOrBeer,
+                    style: {},
+                    percentageMatch: null,
+                    likeThis: null,
+                    producer: {},
+                    url: null,
+                    productTypeDesc: null,
+                    productQuantity: null,
+                    scheme: {},
+                    assortmentObjects: {},
+                    origin: '',
+                    wineGrape: '',
+                    hideFromView: false,
+                    hideRatings: false,
+                    specialDelivery: false,
+                    freeShipping: false,
+                    bia: {},
+                    vegan: false,
+                    vegetarian: false,
+                    alcoholStrength: null,
+                    bottleSizeDesc: '',
+                    promotionalPrice: null,
+                    angelPrices: false
+                }
+            };
+            // attach ratings
+            if (data.object.hasOwnProperty('ratingData')) {
+                model.data.positiveRatingPercentage = data.object.ratingData.positiveRatingPercentage;
+                model.data.numberOfRatings = data.object.ratingData.numberOfRatings;
+                model.data.hideRatings = data.object.ratingData.hideRatings;
+            }
+            // attach pricing
+            if (data.object.pricesCurrent && data.object.pricesCurrent.prices) {
+                model.data.pricesCurrent.prices = data.object.pricesCurrent.prices;
+                // attach ATB button (customer price)
+                if (data.object.pricesCurrent.prices.customerPrice) { model.data.button = data.object.pricesCurrent.prices.customerPrice; }
+            }
+            if (data.object.assortmentObjects) {
+                // attach thumbnail image
+                let thumbnail = Assortments._getAssortmentObject(data.object.assortmentObjects, imageAssortmentKey);
+                if (thumbnail) model.data.thumbnail = thumbnail;
+                // attach bottleImage
+                let bottleImage = Assortments._getAssortmentObject(data.object.assortmentObjects, imageMediumCutout);
+                if (bottleImage) model.data.bottleImage = bottleImage;
+                // attach tickpoints
+                let tickpoints = Assortments._getAssortmentObject(data.object.assortmentObjects, 'whatWeThink');
+                if (tickpoints) model.data.tickpoints = tickpoints;
+                let tickpointsCase = Assortments._getAssortmentObject(data.object.assortmentObjects, 'whatWeSay');
+                if (tickpointsCase) model.data.tickpointsCase = tickpointsCase;
+            }
+            // attach style data
+            if (data.object.taste) {
+                model.data.style = this._getWineStyleByName(data.object.taste);
+                // attach sub style data (modern/classic)
+                if (data.object.productSubStyle) { model.data.style.subStyle = data.object.productSubStyle.toLowerCase(); }
+            }
+            // attach producer data
+            if (data.object.producer) {
+                model.data.producer.firstName = data.object.producer.firstName;
+                model.data.producer.lastName = data.object.producer.lastName;
+                model.data.producer.url = data.object.producer.url;
+                model.data.producer.urlString = data.object.producer.urlString;
+            }
+            // attach url
+            if (data.object.url) { model.data.url = data.object.url;  }
+            // attach percentage match and like this
+            if (data.object.customerProductLikeThis) {
+                let likeData = data.object.customerProductLikeThis;
+
+                if (likeData.hasOwnProperty('likeThis')) { model.data.likeThis = likeData.likeThis; }
+
+                if (likeData.custProdRecommendation && likeData.custProdRecommendation.hasOwnProperty('score')) {
+                    model.data.percentageMatch = likeData.custProdRecommendation.score;
+					const percVal = likeData.custProdRecommendation.score;
+					let formatted = (typeof percVal !== 'number') ? percVal : `${(percVal * 100).toFixed(0)}%`;
+                    model.data.percentageMatchFormatted = formatted;
+                    model.data.subHeading = formatted + ' Match';
+                }
+            }
+            // attach type description
+            if (data.object.productTypeDesc) { model.data.productTypeDesc = data.object.productTypeDesc; }
+            // attach product quantity
+            if (data.object.productQuantity) { model.data.productQuantity = data.object.productQuantity; }
+            // attached bottle quantity
+            if(data.object.quantity) { model.data.quantity = data.object.quantity; }
+            // attach scheme
+            if (data.object.scheme && data.object.scheme.id) { model.data.scheme = data.object.scheme; }
+            // attach assortment objects
+            if (data.object.assortmentObjects && data.object.assortmentObjects.objects && data.object.assortmentObjects.objects.length > 0) {
+                data.object.assortmentObjects.objects.forEach(ao => {
+                    model.data.assortmentObjects[ao.name] = ao;
+                });
+            }
+            // attach shipping data
+            if (data.object.hasOwnProperty('shipAsCase')) { model.data.shipAsCase = data.object.shipAsCase; }
+            if (data.object.hasOwnProperty('packingSlots')) { model.data.packingSlots = data.object.packingSlots; }
+            // attach more info
+            if (data.object.hasOwnProperty('origin')) { model.data.origin = data.object.origin; }
+            if (data.object.hasOwnProperty('taste')) { model.data.taste = data.object.taste; }
+            if (data.object.hasOwnProperty('wineGrape')) { model.data.wineGrape = data.object.wineGrape; }
+            if (data.object.hasOwnProperty('hideFromView')) { model.data.hideFromView = data.object.hideFromView; }
+            if (data.object.hasOwnProperty('specialDelivery')) { model.data.specialDelivery = data.object.specialDelivery; }
+            if (data.object.hasOwnProperty('freeShipping')) { model.data.freeShipping = data.object.freeShipping; }
+            if (data.object.productRatingBreakdownList && data.object.productRatingBreakdownList.length > 0) { model.data.bia = data.object.productRatingBreakdownList[0]; }
+            if (data.object.hasOwnProperty('vegan')) { model.data.vegan = data.object.vegan; }
+            if (data.object.hasOwnProperty('vegetarian')) { model.data.vegetarian = data.object.vegetarian; }
+            if (data.object.hasOwnProperty('alcoholStrength')) { model.data.alcoholStrength = data.object.alcoholStrength; }
+            if (data.object.hasOwnProperty('bottleSizeDesc')) { model.data.bottleSizeDesc = data.object.bottleSizeDesc; }
+            if (data.object.hasOwnProperty('averageRating')) { model.data.averageRating = data.object.averageRating; }
+            if (data.object.hasOwnProperty('region')) { model.data.region = data.object.region; }
+            // for free bottles
+            if(data.promotionalPrice !== null && data.promotionalPrice === 0) { model.data.promotionalPrice = data.promotionalPrice; }
+            if(data.angelPrices !== null) { model.data.angelPrices = data.angelPrices; }
+        }
+        catch(error) { console.error('_parseProduct skipping item', error); return null;  }
+        return model;
+    },
+
+	// get the wine style from data prop
+	_getWineStyleByName(styleName) {
+		let result = {};
+		if (!styleName) return result;
+		if (styleNamesIds[styleName]) {
+			let styleId = styleNamesIds[styleName];
+			let colours = styleColours[styleId];
+			result = {
+				name: styleName,
+				id: styleId,
+				colours: colours
+			};
+		}
+		return result;
+	},
+};

package/src/globals/responsive.js

@@ -0,0 +1,53 @@
+/**
+ * Method used for creating the computed breakpoint objects
+ * for use. 
+ * @param {[Object, Number]} propToUse - the prop to use for creating the object
+ * @param {Object} defaults - default settings to use
+ * @return {Object} - containing breakpoints and values
+ */
+ export function getResponsiveOption(propToUse, defaults) {
+	if (propToUse && typeof propToUse === 'object') {
+		let obj = {};
+		for (let index = 0; index < Object.keys(defaults).length; index++) {
+			const breakpointProp = Object.keys(defaults)[index];
+			const breakpointPropValue = propToUse[breakpointProp];
+			// if propToUse declares a breakpoint, apply to this breakpoint and up
+			if (breakpointPropValue || (typeof breakpointPropValue === 'number' && breakpointPropValue === 0)) {
+				for (let remaining = index; remaining < Object.keys(defaults).length; remaining++) {
+					obj[Object.keys(defaults)[remaining]] = breakpointPropValue;
+				}
+			}
+			// fallback if not created yet, uses defaults equivalent value
+			else if (!obj[breakpointProp]) {
+				obj[breakpointProp] = defaults[breakpointProp];
+			}
+		}
+		return obj;
+	} 
+	else if (propToUse && typeof propToUse === 'number') {
+		// Number defined, apply to all breakpoints
+		let obj = {};
+		for (let index = 0; index < Object.keys(defaults).length; index++) {
+			const breakpointProp = Object.keys(defaults)[index];
+			obj[breakpointProp] = propToUse;
+		}
+		return obj;
+	}
+	else {
+		// if responsive prop not defined, just use defaults
+		return defaults;
+	}
+}
+
+import { breakpoints } from './variables.js';
+export function getCurrentBreakpoint() {
+	let ret;
+	for (let index = 0; index < Object.keys(breakpoints).length; index++) {
+		const breakProp = Object.keys(breakpoints)[index];
+		if (window.innerWidth < breakpoints[breakProp]) {
+			ret = (index === 0) ? 'xs' : Object.keys(breakpoints)[index-1];
+			break;
+		}
+	}
+	return ret ? ret : 'xl';
+}

package/src/globals/validation.js

@@ -0,0 +1,8 @@
+export function getValidationMessage(element, options) {
+  const defaults = {
+    fallback: 'Input not valid, please try something else'
+  };
+  const opt = Object.assign({}, defaults, options);
+
+  return element.validationMessage != null ? element.validationMessage : opt.fallback;
+}

package/src/globals/variables.js

@@ -0,0 +1,48 @@
+import sassBreakpoints from '../styles/js-modules/breakpoints.scss';
+
+export const breakpoints = {
+  xs: parseInt(sassBreakpoints.breakpointXs),   // mobile min (iphone 5/se)
+  sm: parseInt(sassBreakpoints.breakpointSm),   // large mobile
+  md: parseInt(sassBreakpoints.breakpointMd),   // tablet
+  lg: parseInt(sassBreakpoints.breakpointLg),   // desktop
+  xl: parseInt(sassBreakpoints.breakpointXl),   // wide
+};
+
+export const styleNamesIds = {
+  'Crisp White': 'WHITE_CRISP',
+  'Fruity White': 'WHITE_FRUITY',
+  'Rich White': 'WHITE_RICH',
+  'Sweet White': 'WHITE_SWEET',
+  'Fruity Red': 'RED_FRUITY',
+  'Smooth Red': 'RED_SMOOTH',
+  'Big Red': 'RED_BIG',
+  'Rose': 'ROSE',
+  'Sparkling': 'SPARKLING',
+  'Dessert & Fortified': 'DESSERT_FORTIFIED'
+};
+
+export const styleIdsNames = {
+  WHITE_CRISP: 'Crisp White',
+  WHITE_FRUITY: 'Fruity White',
+  WHITE_RICH: 'Rich White',
+  WHITE_SWEET: 'Sweet White',
+  RED_FRUITY: 'Fruity Red',
+  RED_SMOOTH: 'Smooth Red',
+  RED_BIG: 'Big Red',
+  ROSE: 'Rosé',
+  SPARKLING: 'Sparkling',
+  DESSERT_FORTIFIED: 'Dessert & Fortified'
+};
+
+export const styleColours = {
+  WHITE_CRISP:        { primary: '#CCD402', secondary: '#BAC106' },
+  WHITE_FRUITY:       { primary: '#5A8C24', secondary: '#4F7A17' },
+  WHITE_RICH:         { primary: '#E8BC02', secondary: '#D4AC04' },
+  WHITE_SWEET:        { primary: '#01A6B4', secondary: '#068F9A' },
+  RED_FRUITY:         { primary: '#AC0F63', secondary: '#8E0C51' },
+  RED_SMOOTH:         { primary: '#E4481D', secondary: '#CF3D15' },
+  RED_BIG:            { primary: '#552681', secondary: '#451B6D' },
+  ROSE:               { primary: '#E86D83', secondary: '#DC6378' },
+  SPARKLING:          { primary: '#AC8A4D', secondary: '#9C7C43' },
+  DESSERT_FORTIFIED:  { primary: '#151432', secondary: '#06061C' },
+};

package/src/mixins/productCard.js

@@ -0,0 +1,151 @@
+import { convertStyleCodeToClassName } from '../globals/functions';
+import { Products } from '../globals/products.js';
+const bottleShotPlaceHolderPath = '/merchandising/content/placeholders/wine-bottle-placeholder.png';
+
+const productCard = {
+    props: {
+        product: {
+            type: Object,
+            required: false
+        },
+        recommendationType: {
+            type: String,
+            required: false,
+            default: 'bia'
+        },
+        styleBar: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        type: { 
+            type: String, 
+            required: false
+        }
+    },
+
+    computed: {
+        productData() {
+            let product = this.product;
+
+            if(product && product.data) {
+                return product.data
+            } else {
+                return null;
+            }
+        },
+
+        typeBia() {
+            return this.recommendationType === 'bia' && 
+                this.productData.bia && 
+                this.productData.bia.positiveRatingPercentage;
+        },
+
+        typePercentagematch() {
+            return this.recommendationType === 'percentageMatch' && 
+                this.productData.percentageMatchFormatted;
+        },
+
+        percentageMatchNumber() {
+            let score = null,
+                productData = this.productData;
+
+            if(
+                productData.customerProductLikeThis && 
+                productData.customerProductLikeThis.custProdRecommendation && 
+                productData.customerProductLikeThis.custProdRecommendation.score
+            ) {
+                score = productData.customerProductLikeThis.custProdRecommendation.score;
+                score * 100;
+            }
+
+            return score;
+        },
+
+        itemPriceString() { return `${this.currencySymbol == '$' ? '$' : '£'}${this.productData.pricesCurrent.prices.customerPrice.toFixed(2)}` },
+
+        productImage() {
+            if (this.productData.bottleImage) { return window.staticImageUrl + this.productData.bottleImage; } 
+            else {
+                let find = false;
+
+                if (this.productData.assortmentObjects.objects) { 
+                  find = this.productData.assortmentObjects.objects.findIndex(item => item.name == "mediumCutout");
+                }
+
+                if(find) {
+                    return window.staticImageUrl + this.productData.assortmentObjects.objects[find].contentPath;
+                } else {
+                    return window.staticImageUrl + bottleShotPlaceHolderPath;
+                }
+            }
+        },
+
+        caseImage() {
+            // TODO: Tidy up - maybe include default placeholder image here if not available?
+            if (this.productData.bottleImage) { return window.staticImageUrl + this.productData.bottleImage; } 
+            else { return window.staticImageUrl + this.productData.assortmentObjects.headline.contentPath; }
+        },
+
+        hasActionSlot() {
+            return !!this.$slots.action
+        }
+    },
+
+    methods: {
+        styleCodeClassName(product) {
+            if(product && product.style && product.style.id) {
+                return convertStyleCodeToClassName(product.style.id)
+            } else {
+                return null;
+            }
+        },
+
+        bottleShot(product) {
+            if (product.bottleImage) {
+                return window.staticImageUrl + product.bottleImage;
+            } else {
+                let find = false;
+                
+                if (product.assortmentObjects.objects) {
+                    find = product.assortmentObjects.objects.findIndex(item => item.name == "mediumCutout");
+                }
+
+                if(find) {
+                    return window.staticImageUrl + product.assortmentObjects.objects[find].contentPath;
+                } else {
+                    return window.staticImageUrl + bottleShotPlaceHolderPath;
+                }
+            }
+        },
+
+        parentElement() {
+            return this.$el.parentElement;
+        },
+
+        atb: function() {
+            if (!this.productData.id) { return false; }
+            Products.addToBasket({ productId: this.productData.id, quantity: 1 })
+            .then(() => {
+                if (window.nkd && window.nkd.headerCart) { window.nkd.headerCart.reload(); }
+                window.notificationCentre.notify({
+                    title: `1x ${this.productData.heading} added to your basket.`,
+                    text: 'To checkout, please go to the basket page.',
+                    group: 'header',
+                    duration: 8000
+                });
+            });
+        },
+        goToUrl: function() { window.location = this.productData.url; }
+    },
+
+    filters: {
+        nameChopper: function(val) {
+            if (!val) { return false; }
+            const maxCharactersTitle = 42;
+            return val.length >= maxCharactersTitle ? `${val.substring(0, maxCharactersTitle)} ...` : val;
+        },
+    }
+};
+
+export default productCard;

package/src/styles/js-modules/breakpoints.scss

@@ -0,0 +1,2 @@
+// extracted by mini-css-extract-plugin
+module.exports = {"breakpointXs":"320","breakpointSm":"426","breakpointMd":"768","breakpointLg":"993","breakpointXl":"993"};