\n
\n ) : null}\n {YoutubeUrl.Value !== \"\" ? (\n \n
\n );\n}\nexport default DiscoverMoreTreatments;\n","import React from 'react';\nimport Slider from \"react-slick\";\nimport { LazyLoadComponent } from 'react-lazy-load-image-component';\nimport Picture from 'Shared/Picture';\n\nconst RelatedContent = (props) => {\n const settings = {\n infinite: true,\n slidesToShow: 1,\n variableWidth: true\n };\n const renderProduct = (product) => {\n return (\n \n );\n };\n return (\n {Title.Value}
\n\n \n {Products.map((product) => {\n return (\n \n \n \n );\n })}\n \n
\n {product.Title.Value}
\n \n\n
\n );\n}\nexport default RelatedContent;\n","import React, { Component } from 'react';\n\nclass BottonPusheSalonFinder extends Component {\n constructor(props) {\n super(props);\n const lang = document.getElementById(\"divlang\").getAttribute(\"data-id\");\n\n this.state = {\n selectCountryCode: null,\n nioxinoldUrl: window.location.origin + \"/\" + lang + \"/salon-finder?\",\n zipcode: null\n };\n this.selectCountry = this.selectCountry.bind(this);\n this.findSalon = this.findSalon.bind(this);\n this.getZipCode = this.getZipCode.bind(this);\n this._handleKeyPress = this._handleKeyPress.bind(this);\n }\n selectCountry(event) {\n this.setState({\n selectCountryCode: event.target.value\n });\n }\n findSalon(event) {\n event.preventDefault();\n let sfCountryCode = \"sfCountryCode\";\n let sfSearchPhrase = \"sfSearchPhrase\"\n let url = this.state.nioxinoldUrl + sfCountryCode + \"=\" + this.state.selectCountryCode + \"&\" + sfSearchPhrase + \"=\" + this.state.zipcode;\n window.open(url, this.props.salonFinderTile.ButtonTarget && this.props.salonFinderTile.ButtonTarget.Value !== \"\" ? this.props.salonFinderTile.ButtonTarget.Value : \"_self\");\n }\n _handleKeyPress(event) {\n if (event.key === 'Enter') {\n this.findSalon(event);\n }\n }\n getZipCode(event) {\n event.preventDefault();\n this.setState({\n zipcode: event.target.value\n })\n }\n render() {\n return (\n {props.Title.Value}
\n\n {!props.isMobile ? (\n \n {props.Products.map((product) => (\n \n ) : (\n props.Products.map((product) => (\n renderProduct(product)\n ))\n )}\n
\n \n {renderProduct(product)}\n
\n ))}\n \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","const detectBots = () => {\n return /bot|google|baidu|bing|msn|duckduckbot|teoma|slurp|yandex/i.test(navigator.userAgent);\n}\n\nexport default detectBots;\n","import React, { Component } from \"react\";\nimport Picture from \"../Shared/Picture\";\nimport Breadcrumbs from \"Header/Breadcrumbs\";\nimport isBreadcrumb from \"Shared/isBreadcrumb\";\n\nclass Header extends Component {\n onHeaderClick = () => {\n let isProductPage =\n window.location.href.indexOf(\"hair-loss-products\") > 0;\n // let productHeader = document.getElementsByClassName(\"main-visual\");\n if (isProductPage) {\n let url = this.props.topHeader.SliderButtons[0].ButtonTarget.Value;\n window.location.href = url;\n }\n };\n\n render() {\n let isProductPage = window.location.href.indexOf(\"hair-loss-products\") > 0;\n\n const {\n SliderImage,\n SliderImageAlt,\n Title,\n Subtitle,\n SliderButtons,\n VisualHeader,\n VisualParagraph,\n } = this.props.topHeader;\n\n return VisualHeader.Value !== \"\" ? (\n \n \n \n {VisualParagraph.Value !== \"\" ? (\n \n ) : null}\n
\n ) : null}\n \n ) : (\n \n {SliderImage.Value[0] != null ? (\n
\n {VisualHeader.Value !== \"\" ? (\n \n \n \n \n {Title.Value}\n \n {Subtitle.Value != \"\" && (\n
\n {SliderButtons.length > 0 ? (\n \n {SliderButtons[0].ButtonText.Value}\n \n ) : null}\n \n
\n ) : null}\n \n \n {Title.Value}\n \n {Subtitle.Value != \"\" && (\n \n )}\n
\n {SliderButtons.length > 0 ? (\n \n \n \n
\n {SliderButtons.length > 0 ? (\n \n {SliderButtons[0].ButtonText.Value}\n \n ) : null}\n \n
\n )}\n \n );\n }\n}\nexport default Header;\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 {SliderButtons.length > 0 ? (\n - \n
- \n
- \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","import React from 'react';\nimport { EmailShareButton, FacebookShareButton, TwitterShareButton } from 'react-share';\n\nconst ShareBox = (props) => {\n let share = 'Share';\n let displayFacebook = true;\n if (props.lang == 'ru-RU') {\n share = 'Поделиться';\n displayFacebook = false\n }\n\n return (\n \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 {share}:\n {displayFacebook ?
\n );\n}\nexport default ShareBox;\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","const isBreadcrumb = breadcrumbs => {\n if (breadcrumbs === undefined) {\n return undefined;\n }\n else {\n return breadcrumbs.Breadcrumb;\n }\n}\n\nexport default isBreadcrumb;\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 { useEffect, useState } from \"react\";\n\nconst useMatchMedia = (query) => {\n const [matches, setMatches] = useState(window.matchMedia(query).matches);\n\n useEffect(() => {\n const media = window.matchMedia(query);\n\n if (media.matches !== matches) {\n setMatches(media.matches);\n }\n const listener = () => setMatches(media.matches);\n media.addListener(listener);\n\n return () => media.removeListener(listener);\n }, [query]);\n\n return matches;\n};\n\nexport default useMatchMedia;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport InformationalPageContent from \"./InformationalPageContent\";\n\nvar salonCountries = JSON.parse(document.getElementById(\"salonCountries\").textContent); // eslint-disable-next-line\n\nif (document.getElementById(\"breadcrumbJson\") !== null) {\n var breadcrumbs = JSON.parse(document.getElementById(\"breadcrumbJson\").textContent); // eslint-disable-next-line\n}\n\nif (document.getElementById(\"instagram\")) {\n var instagram = JSON.parse(document.getElementById(\"instagram\").textContent); // eslint-disable-next-line\n}\n\nif (document.getElementById(\"articleJson\") && document.getElementById(\"ArticlePage\")) {\n var aboutHairLoss = JSON.parse(document.getElementById(\"articleJson\").textContent); // eslint-disable-next-line\n var language = document.getElementById('divlang').getAttribute('data-id'); // eslint-disable-next-line\n ReactDOM.render(