\n
\n );\n }\n}\nexport default BottonPusheSalonFinder;\n","import React, { Component } from 'react';\nimport BottonPusheSalonFinder from './BottonPusheSalonFinder';\nimport PushInstagram from '../Shared/PushInstagram';\nimport Push from 'Shared/Push';\n\nclass BottonPushes extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const {salonCountries,\n countryCode,\n bottonPushes,\n instagram,\n buttonPusheClass,\n salonFinder\n } = this.props;\n const noSF = salonCountries && salonFinder.SalonFinderTile.length ? \"\" : \"no-SF\";\n return (\n \n
\n {this.props.salonFinderTile.Title.Value}
\n \n\n \n \n
\n \n \n \n
\n \n {this.props.salonFinderTile.ButtonText.Value}\n \n
\n \n {this.props.salonCountries && this.props.salonFinder.SalonFinderTile.length && this.props.countryCode !== \"ru-RU\" ? (\n
\n );\n }\n}\nBottonPushes.defaultProps = {\n countryCode: 'en-EN'\n};\nexport default BottonPushes;\n","import React, { Component } from 'react';\nimport Picture from '../Shared/Picture';\nimport ShareSocialBox from '../Shared/ShareSocialBox';\n\nclass BuyNowProductPopUp extends Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n \n
\n );\n }\n}\nexport default BuyNowProductPopUp;\n","import React, { useRef, useEffect, useState } from 'react';\nimport Picture from '../Shared/Picture';\nimport options from '../ShopifyButtonOptions';\nimport {storefrontAccessToken} from '../ShopifyButtonOptions';\n\n\nconst BuyUsPopup = ({ productPopup, productHidePopUp, Product }) => {\n\n const [isShopify, setIsShopify] = useState(false);\n\n const closeOnOutsideClick = (ref) => {\n useEffect(() => {\n const handleClickOutside = (e) => {\n if (ref.current && !ref.current.contains(e.target)) {\n productHidePopUp(e, \"product\");\n }\n }\n document.addEventListener(\"click\", handleClickOutside);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside);\n };\n }, [ref]);\n }\n\n const contentRef = useRef(null);\n\n closeOnOutsideClick(contentRef);\n\n const handleShopifyID = () => {\n const shopifyID = Product.BuyCAUId && Product.BuyCAUId.Value !==\"\" ? Product.BuyCAUId.Value : null;\n return shopifyID;\n }\n const handleShopifyComponentID = () => {\n const shopifyComponentID = Product.BuyCADivProductComponentId && Product.BuyCADivProductComponentId.Value !==\"\" ? Product.BuyCADivProductComponentId.Value : null;\n return shopifyComponentID;\n }\n\n const handleShopifyClick = () => {\n setIsShopify(!isShopify);\n };\n\n const handleShopifyButton = () => {\n if(window.ShopifyBuy) {\n const client = ShopifyBuy.buildClient({\n domain: 'wella-buy-button.myshopify.com',\n storefrontAccessToken,\n });\n ShopifyBuy.UI.onReady(client).then((ui) => {\n if(document.getElementById(`product-component-${handleShopifyComponentID()}`)){\n ui.createComponent('product', {\n id: `${handleShopifyID()}`,\n node: document.getElementById(`product-component-${handleShopifyComponentID()}`),\n moneyFormat: '%24%7B%7Bamount%7D%7D',\n options: options\n });\n }\n })\n }\n }\n\n useEffect(() => {\n handleShopifyButton()\n }, []);\n\n return (\n \n
\n \n
\n \n
\n \n \n \n {this.props.isDesktop && (\n \n
\n \n
\n
\n )}\n \n
\n
\n {this.props.Product.ShareText.Value}
\n\n this.props.productHidePopUp(e, \"product\")}>![](\"\\i\\x_delete_close_denied_cross-512.png\")
\n
\n
\n \n \n
\n \n
\n {this.props.Product.Title.Value}
\n \n\n
\n \n
\n
\n \n
\n {this.props.Product.BuyOnlineText.Value}
\n- \n {this.props.Product.BuyOnlineItems.map((item, index) => {\n return
- {item.BuyOnlineItemText.Value} \n })}\n
\n
\n {this.props.Product.ProfessionalsBuyOnlineText.Value}
\n- \n {this.props.Product.ProfessionalsBuyOnlineItems.map((item, index) => {\n return
- {item.BuyOnlineItemText.Value} \n })}\n
\n
\n );\n}\n\nexport default BuyUsPopup;\n","import React from 'react';\nimport { LazyLoadComponent } from 'react-lazy-load-image-component';\nimport useMatchMedia from \"hooks/useMatchMedia\";\n\nconst Picture = (props) => {\n const {\n src,\n className,\n alt,\n visibleByDefault,\n mobileWidth,\n mobileHeight\n } = props;\n\n const getImageType = (image) => {\n if (/(\\.|\\,)png(--resize\\,\\d{2,}\\,\\d{2,})*$/i.test(image)) {\n return \"image/png\";\n }\n if (/(\\.|\\,)gif(--resize\\,\\d{2,}\\,\\d{2,})*$/i.test(image)) {\n return \"image/gif\";\n }\n if (/(\\.|\\,)jpg(--resize\\,\\d{2,}\\,\\d{2,})*$/i.test(image)) {\n return \"image/jpeg\";\n }\n if (/(\\.|\\,)webp(--resize\\,\\d{2,}\\,\\d{2,})*$/i.test(image)) {\n return \"image/webp\";\n }\n return \"\";\n }\n const isMobile = useMatchMedia('(max-width: 768px)');\n\n if (src.length > 0) {\n const mobileImage = src[1].Url;\n const tabletImage = src[2].Url;\n const desktopImage = src[0].Url;\n const mobileWebpImage = src[1].WebpUrl;\n const tabletWebpImage = src[2].WebpUrl;\n const desktopWebpImage = src[0].WebpUrl;\n\n return (\n \n
\n \n
\n \n
\n \n \n \n productHidePopUp(e, \"product\")}>\n \n ![](\"\\i\\x_delete_close_denied_cross-512.png\"/)
\n \n \n \n
\n \n \n \n \n
\n \n
\n \n
\n \n
\n {Product.Title.Value}
\n \n\n
\n \n \n
\n {\n Product.BuyCAText.Value && Product.BuyCAText.Value !=null ?\n for home use
\n{Product.BuyOnlineText.Value}
\n- \n {Product.BuyOnlineItems.map((item, index) =>\n
- \n {item.BuyOnlineItemText.Value}\n \n )}\n
\n
:\n \n }\n {Product.ProfessionalsBuyOnlineText.Value !== \"\" &&\n \n {Product.BuyCAText.Value && Product.BuyCAText.Value !=null ? Product.BuyCAText.Value : null}\n
\nhandleShopifyClick()}>Shop Now
\n \n\n
\n }\n {Product.BuyInternationalText.Value !== \"\" &&\n for professional use
\n{Product.ProfessionalsBuyOnlineText.Value}
\n- \n {Product.ProfessionalsBuyOnlineItems.map((item, index) =>\n
- \n {item.BuyOnlineItemText.Value}\n \n )}\n
\n
\n }\n {Product.BuyInternationalText.Value}
\n- \n
- \n wellastore.com\n \n
- \n
- \n
- \n
- \n
\n
\n );\n }\n}\nexport default PopupNioxin;\n","import React, {Component} from 'react';\nimport NowellonEditableField from \"../NowellonEditableField\";\nimport Picture from './Picture';\n\nclass Push extends Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n \n
\n \n \n
\n \n \n \n
\n {this.props.pushesPopup.isPopupMenu == true ? this.props.pushesPopup.TitlePopup : this.props.pushesPopup[0].Title.Value}
\n\n {this.props.pushesPopup.isPopupMenu == true ? (\n this.props.pushesPopup.Arritems.map((push) => (\n
\n \n \n \n \n \n
\n ))\n ) : (\n this.props.pushesPopup[0].Pushes.map((push) => (\n \n
\n ))\n )}\n \n {push.Title.Value}\n \n
\n {push.ButtonText.Value !== \"\" && (\n {push.ButtonText.Value}\n )}\n\n
\n )\n }\n}\n\nexport default Push;\n","import React, {Component} from 'react';\n\nclass PushInstagram extends Component {\n constructor(props) {\n super(props);\n this.state = {\n instagramImages: this.props.instagram,\n instagramLength: this.props.instagram.length,\n instagramId: this.props.instagram[(this.props.instagram.length - 1)].Id,\n instagramNextId: this.props.instagram[(this.props.instagram.length - 2)].Id,\n pos : 1,\n intervalId: null,\n instagramCurrent: this.props.instagram.length - 1,\n instagramNext: this.props.instagram.length - 2\n };\n }\n componentDidMount() {\n var iCurrent = document.getElementById(this.props.instagram[(this.props.instagram.length - 1)].Id);\n iCurrent.className += \" active\";\n this.start();\n }\n start() {\n setTimeout(() => this.startInterval(), 10000);\n }\n nextImage() {\n this.setState({\n instagramNext: this.state.instagramNext - 1,\n instagramCurrent: this.state.instagramCurrent - 1,\n }, () => this.changeElem(this.state.instagramNext))\n setTimeout(() => this.startInterval(), 5000);\n }\n changeElem(elemid) {\n clearInterval(this.state.intervalId);\n }\n chengeOpacity(instagramCurrent, instagramNext) {\n var iCurrent = document.getElementById(instagramCurrent);\n var iNext = document.getElementById(instagramNext);\n if(iCurrent.style.opacity < 0){\n clearInterval(this.state.intervalId);\n }else{\n iCurrent.className = \"push-instagram-item\";\n iNext.className += \" active\";\n // iCurrent.style.opacity = 0;\n // iNext.className = 1;\n this.nextImage();\n }\n }\n startInterval = () => {\n if(this.state.instagramNext >= 0) {\n var instagramCurrent = this.props.instagram[this.state.instagramCurrent].Id;\n var instagramNext = this.props.instagram[this.state.instagramNext].Id;\n var intervalId = setInterval(() => {\n this.chengeOpacity(instagramCurrent, instagramNext);\n }, 1000);\n this.setState({ // eslint-disable-line\n intervalId: intervalId,\n });\n }else{\n clearInterval(this.state.intervalId);\n }\n }\n\n componentWillUnmount() {\n // use intervalId from the state to clear the interval\n clearInterval(this.state.intervalId);\n }\n render() {\n return (\n \n {this.props.tile.Title.Value !== \"\" ?\n
\n {this.props.tile.Image.Value !== \"\" ? (\n {this.props.tile.Title.Value}
\n :null}\n {this.props.tile.Subtitle.Value !== \"\" ?\n \n :null}\n {this.props.tile.ButtonUrl.Value !== \"\" ?\n {this.props.tile.ButtonText.Value}\n :null}\n\n
\n )\n }\n}\n\nexport default PushInstagram;\n","/**\n * @license Copyright (c) 2015, Hypermedia\n * For licensing, see LICENSE\n */\n\n\"use strict\";\n\nimport React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport NowellonEditableFieldPropType from \"../NowellonEditableField\";\n\nclass ShareSocialBox extends Component {\n getDefaultProps() {\n return {\n \"className\": \"socialBox blueSocial\",\n \"ShareLocation\": window.location.href,\n \"ShareDomain\": window.location.origin,\n \"FacebookShareOn\": \"SHARE ON\"\n };\n }\n getFacebookShareLink() {\n var facebookText;\n var facebookShareURL;\n if (this.props.SocialShareCopyTextFacbook && this.props.SocialShareCopyTextFacbook.Value !== \"\") {\n facebookText = this.props.SocialShareCopyTextFacbook.Value;\n facebookShareURL = \"https://www.facebook.com/sharer.php?u=\" + encodeURIComponent(this.props.FacebookLink.Value) + \"&t=\" + encodeURI(this.stripHTMLTags(facebookText));\n }\n return facebookShareURL;\n }\n getTwitterShareLink() {\n var twitterText;\n var twitterShareURL;\n if (this.props.SocialShareCopyTextTwitter && this.props.SocialShareCopyTextTwitter.Value !== \"\") {\n twitterText = this.props.SocialShareCopyTextTwitter.Value;\n twitterShareURL = \"http://twitter.com/intent/tweet?text=\" + encodeURI(this.stripHTMLTags(twitterText));\n }\n return twitterShareURL;\n }\n getPinterestShareLink() {\n var pinterestText;\n var pinterestShareURL;\n if (this.props.SocialShareCopyTextPinttrest && this.props.SocialShareCopyTextPinttrest.Value !== \"\") {\n pinterestText = this.props.SocialShareCopyTextPinttrest.Value;\n pinterestShareURL = \"http://pinterest.com/pin/create/button/?url=\" + encodeURIComponent(this.props.PinterestLink) + \"&description=\" + encodeURI(this.stripHTMLTags(pinterestText)) + \"&media=\" + encodeURIComponent(this.props.ShareDomain);\n }\n return pinterestShareURL;\n }\n stripHTMLTags(value) {\n return value.replace(/(<([^>]+)>)/ig, \"\");\n }\n propTypes = {\n \"className\": PropTypes.string,\n \"Image\": NowellonEditableFieldPropType.isRequired,\n \"ShareLocation\": PropTypes.string,\n \"FacebookShareOn\": PropTypes.string\n }\n render() {\n return \n ![\"nioxin\"](\"/m/homepage/nioxin-logo.png\")
\n
\n \n - \n {this.state.instagramImages.map((insta) => {\n return
- \n \n
\n
{insta.Likes}
\n \n \n })}\n
\n
;\n }\n};\nexport default ShareSocialBox;\n\n","import React, {Component} from 'react';\nimport PlayerYoutube from './PlayerYoutube';\nimport NowellonEditableField from \"../NowellonEditableField\";\nimport Picture from './Picture';\n\nclass Teaser extends Component {\n constructor(props) {\n super(props);\n this.showHide = this.showHide.bind(this);\n this.state = {\n teaserId: null\n }\n }\n showHide(event, teaserID) {\n event.preventDefault();\n if(this.state.teaserId === teaserID) {\n this.setState({\n teaserId: ''\n })\n } else {\n this.setState({\n teaserId: teaserID\n })\n }\n }\n\n componentDidMount() {\n if (this.props.teaserClass === \"teaser-product\") {\n this.setState({\n teaserId: this.props.teaser[0].Id\n })\n }\n }\n getSocialMediaShareUrl = (type, url = \"\") => {\n if (type === \"Facebook\") {\n return `https://www.facebook.com/sharer.php?u=${url}`;\n } else if (type === \"Twitter\") {\n return `http://twitter.com/intent/tweet?url=${url}`;\n }\n };\n render() {\n return (\n \n )\n }\n}\n\nexport default Teaser;\n","export const storefrontAccessToken = '6800bb56c49553d4330477abc16618f5';\nconst options = {\n \"product\": {\n \"styles\": {\n \"product\": {\n \"@media (min-width: 601px)\": {\n \"max-width\": \"calc(25% - 20px)\",\n \"margin-left\": \"20px\",\n \"margin-bottom\": \"50px\"\n }\n },\n \"button\": {\n \":hover\": {\n \"background-color\": \"#4e9bac\"\n },\n \"background-color\": \"#4e9bac\",\n \":focus\": {\n \"background-color\": \"#4e9bac\"\n }\n }\n },\n \"contents\": {\n \"img\": false,\n \"button\": false,\n \"buttonWithQuantity\": true,\n \"title\": false,\n \"price\": true\n },\n \"text\": {\n \"button\": \"Add to cart\"\n }\n },\n \"productSet\": {\n \"styles\": {\n \"products\": {\n \"@media (min-width: 601px)\": {\n \"margin-left\": \"-20px\"\n }\n }\n }\n },\n \"modalProduct\": {\n \"contents\": {\n \"img\": false,\n \"imgWithCarousel\": true,\n \"button\": false,\n \"buttonWithQuantity\": true\n },\n \"styles\": {\n \"product\": {\n \"@media (min-width: 601px)\": {\n \"max-width\": \"100%\",\n \"margin-left\": \"0px\",\n \"margin-bottom\": \"0px\"\n }\n },\n \"button\": {\n \":hover\": {\n \"background-color\": \"#4e9bac\"\n },\n \"background-color\": \"#4e9bac\",\n \":focus\": {\n \"background-color\": \"#4e9bac\"\n }\n }\n },\n \"text\": {\n \"button\": \"Add to cart\"\n }\n },\n \"option\": {\n \"styles\": {\n \"label\": {\n \"font-family\": \"Arial, sans-serif\"\n },\n \"select\": {\n \"font-family\": \"Arial, sans-serif\"\n }\n }\n },\n \"cart\": {\n \"styles\": {\n \"button\": {\n \":hover\": {\n \"background-color\": \"#4e9bac\"\n },\n \"background-color\": \"#4e9bac\",\n \":focus\": {\n \"background-color\": \"#4e9bac\"\n }\n }\n },\n \"text\": {\n \"total\": \"Subtotal (CAD)\",\n \"notice\": \"Shipping is FREE for orders valued $75 or more. Taxes calculated at checkout.\",\n \"button\": \"Checkout\"\n }\n },\n \"toggle\": {\n \"styles\": {\n \"toggle\": {\n \"background-color\": \"#4e9bac\",\n \":hover\": {\n \"background-color\": \"#4e9bac\"\n },\n \":focus\": {\n \"background-color\": \"#4e9bac\"\n }\n }\n }\n }\n}\nexport default options\n","const bindEvents = () => {\n console.log(\"nioxin analytics events bindEvents\");\n window.addEventListener(\"DOMContentLoaded\", () => {\n let body = document.getElementsByTagName(\"body\")[0];\n body.addEventListener(\"MediaPlay\", () => {});\n body.addEventListener(\"Media25\", () => {});\n body.addEventListener(\"Media50\", () => {});\n body.addEventListener(\"Media75\", () => {});\n body.addEventListener(\"MediaComplete\", () => {});\n });\n};\n\nconst mediaCustomEvent = (eventName, videoName, videoLength, videoURL, videotimePlayed) => {\n let body = document.getElementsByTagName(\"body\")[0];\n console.log(\"event Name\", eventName);\n let videoMilestone = 0;\n let eventAction = \"Video Media Play\";\n switch (eventName) {\n case \"MediaPlay\":\n videoMilestone = 0;\n break;\n case \"Media25\":\n videoMilestone = 25;\n break;\n case \"Media50\":\n videoMilestone = 50;\n break;\n case \"Media75\":\n videoMilestone = 75;\n break;\n case \"MediaComplete\":\n videoMilestone = 100;\n eventAction = \"Video Media Complete\";\n break;\n }\n let event = new CustomEvent(eventName, {\n detail: {\n eventInfo: {\n eventAction: eventAction,\n eventName: eventName,\n eventType: \"userEvent\",\n video: {\n videoName: videoName,\n videoType: \"youtube\",\n videoLength: videoLength,\n videoURL: videoURL,\n videotimePlayed: videotimePlayed,\n videoMilestone: videoMilestone\n }\n }\n }\n });\n body.dispatchEvent(event);\n};\n\nexport {\n bindEvents,\n mediaCustomEvent\n};\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport CollectionPage from 'Collection/CollectionPage';\n\nconst collectionJson = JSON.parse(document.getElementById(\"collectionPageJson\").textContent); // eslint-disable-next-line\nconst salonCountries = JSON.parse(document.getElementById(\"salonCountries\").textContent); // eslint-disable-next-line\nconst breadcrumbs = JSON.parse(document.getElementById(\"breadcrumbJson\").textContent); // eslint-disable-next-line\nReactDOM.render(- \n
- \n Like\n \n
- \n Tweet\n \n
- \n \n Pin It\n \n \n