\n {postDate}
\n {title} \n \n );\n}\n","import { css } from '@emotion/core';\nimport { mq } from '../../../cssInJs';\n\nconst breakpoints = [2, 2, 3, 4]\nconst marginLR = [14, 14, 14, 14]\nconst marginTB = [14, 14, 14, 14]\n\nconst bpPer = (index) => 100/breakpoints[index] + '%'\n\nexport default {\n holder: css(mq({\n maxWidth: 1000,\n margin: 'auto',\n marginTop: [30, null, 40],\n marginBottom: [30, null, 40],\n })),\n tiles: css(mq({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n marginLeft: [-marginLR[0]/2, -marginLR[1]/2, -marginLR[2]/2, -marginLR[3]/2],\n marginRight: [-marginLR[0]/2, -marginLR[1]/2, -marginLR[2]/2, -marginLR[3]/2],\n marginTop: [marginTB[0]/2, marginTB[1]/2, marginTB[2]/2, marginTB[3]/2],\n marginBottom: [marginTB[0]/2, marginTB[1]/2, marginTB[2]/2, marginTB[3]/2],\n })),\n tile: css(mq({\n paddingLeft: [marginLR[0]/2, marginLR[1]/2, marginLR[2]/2, marginLR[3]/2],\n paddingRight: [marginLR[0]/2, marginLR[1]/2, marginLR[2]/2, marginLR[3]/2],\n paddingTop: [marginTB[0]/2, marginTB[1]/2, marginTB[2]/2, marginTB[3]/2],\n paddingBottom: [marginTB[0]/2, marginTB[1]/2, marginTB[2]/2, marginTB[3]/2],\n maxWidth: [bpPer(0), bpPer(1), bpPer(2), bpPer(3)],\n flexBasis: [bpPer(0), bpPer(1), bpPer(2), bpPer(3)],\n flexGrow: 0,\n flexShrink: 0,\n textAlign: 'left'\n })),\n title: css(mq({\n fontSize: '1.2rem',\n fontWeight: 'bold',\n margin: '0.5rem 0 0.1rem',\n })),\n desc: css(mq({\n fontSize: '0.8rem',\n }))\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './tileStyle';\n\nimport utils from '../../../utils';\nimport { Item } from '../../items/item';\n\nexport function VideoHolder(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n
\n {subItemsElts}\n
\n
\n VIDEO \n
\n //'https://www.youtube.com/watch?v=' + videoId\n ], popupIndex: popupIndex + 1\n }\n });\n }\n\n if (type === 'mp4' || type === 'm4v') {\n return (\n \n \n \n
\n )\n }\n\n return (\n \n
\n );\n}\n\n// poster=\"/sites/cuisinart/media/kick-start-landing-page/features-conveniencetwoinone.png\"\n// {/* \n
\n
\n
\n
\n {captionTitleYoutube}\n
\n
\n
\n
\n
\n } \n );\n return (\n \n \n
\n {subItemsElts}\n
\n
\n );\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { FaChevronDown } from \"react-icons/fa\";\nimport React, { useLayoutEffect, useRef } from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { useRouter } from '../../../components';\nimport { handleElementLink } from '../../../components';\nimport env from '../../../env';\n\nexport function ExpandableHtml(props) {\n const cmsOption = props.cmsOption || {};\n const [open, setOpen] = React.useState(cmsOption.isCmsEdit);\n const ver = env.ver;\n const item = props.item;\n //const subItems = item.items || [];\n const { history } = useRouter();\n //console.log('item', item, cmsOption);\n //console.log(open)\n let content = cmsOption.isCmsEdit? \n cmsUtils.payload(item, 'Content'): \n cmsUtils.payload(item, 'Content').replace(\"__version__\", \" PWA \"+ ver +\" \");\n\n const buttonTitle = cmsUtils.payload(item, 'ButtonTitle');\n\n\n const cssClass = utils.classNames('cms_item', 'htmlPanel exHtml', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n\n //let itemElt = (
);\n\n function handleClick(e) { \n \n let target = \"\";\n if(e.target.closest('a')){\n target = e.target.closest('a').getAttribute('target');\n }\n const processed = (target === \"_blank\" ? handleElementLink(e.target, null) : handleElementLink(e.target));\n //const link = utils.url.getLinkFromElement(e.target);\n //console.log('clicked', e, e.target, processed);\n \n if (processed.handled) {\n e.preventDefault();\n e.stopPropagation();\n } else if (processed.linkInfo && processed.linkInfo.type === 'internal') {\n e.preventDefault();\n e.stopPropagation();\n history.push(processed.linkInfo.url)\n } else {\n // e.preventDefault();\n // e.stopPropagation();\n // setPdfViewPath(utils.site.resourcePath(link))\n }\n }\n\n const htmlBlock = useRef(null);\n // function iframeSizer() {\n // //console.log('iframesizer')\n // let iframesContainer = htmlBlock.current.querySelectorAll('iframe.youtube, .ytvideo iframe');\n // //console.log('iframesizer', iframesContainer)\n // if (iframesContainer && iframesContainer.length) {\n // iframesContainer.forEach(element => {\n // let height = (element.parentElement.offsetWidth * 9) / 16\n // //console.log(height, element.parentElement.offsetWidth)\n // element.style.height = height + 'px';\n // });\n // }\n // }\n\n useLayoutEffect(() => {\n const buttons = htmlBlock.current.querySelectorAll('.button');\n for (let i = 0; buttons && i < buttons.length; i++) {\n restructureButton(buttons[i])\n }\n\n // const youtubes = htmlBlock.current.querySelectorAll('iframe[src*=\"youtube\"]');\n // console.log(youtubes)\n\n // iframeSizer();\n // window.addEventListener('resize', iframeSizer)\n // return (): void => {\n // window.removeEventListener('resize', iframeSizer)\n // }\n\n }, [])\n\n\n const style = {\n icon: {\n marginLeft: '0.5rem',\n width: 'auto !important',\n fontSize: '80%',\n transition: 'all 0.5s'\n },\n iconOpen: {\n transform: 'translateY(-0.1rem) rotate(-180deg)'\n },\n iconClosed: {\n transform: 'translateY(-0.1rem) rotate(0)'\n },\n panelCollapsed: {\n maxHeight: 0,\n transition: 'all 0.6s',\n opacity: 0,\n overflow: 'hidden'\n },\n panelOpen: {\n opacity: 1,\n maxHeight: '2000px',\n transition: 'all 1s'\n }\n }\n\n const toggleExPanel = (e) => {\n e.preventDefault()\n e.stopPropagation()\n setOpen(!open)\n }\n\n\n if (cmsOption.isCmsEdit)\n return (\n handleClick(e)}>\n
\n \n
\n
handleClick(e)}>\n
\n \n
\n
\n
\n \n {slides}\n \n
\n
\n {linkUrl ?
\n \n :
}\n
\n \n { window.print(); }} title=\"Print\"> \n \n \n \n \n
\n {bannerUrl && }\n ;\n}\n\nfunction getBanner(pageData) {\n const banner = cmsUtils.findItemByTypeCode(pageData, 'BannerItem')\n //console.log( banner)\n if (banner) {\n return cmsUtils.payload(banner, 'ImageUrl')\n }\n else{\n const singleBanner = cmsUtils.findItemByTypeCode(pageData, 'SingleBanner');\n if(singleBanner){\n return cmsUtils.payload(singleBanner, 'ImageUrl');\n }\n }\n return null;\n}","import { mq } from '../../../cssInJs';\n\nexport default{\n ksjb__page__menu__bar : mq({\n backgroundColor: 'white',\n marginTop: ['1rem',null,'3rem'],\n position:'sticky',\n top: ['44px',null,'56px'],\n zIndex: 999,\n // paddingTop: '0.3rem',\n // paddingBottom: '0.3rem'\n }),\n menu__bar : mq({\n display: 'flex',\n maxWidth: ['360px',null,'1000px'],\n marginLeft: 'auto',\n marginRight: 'auto'\n }),\n bar__item : {\n flex: '1 0 auto',\n textAlign: 'center',\n //backgroundColor: 'red'\n },\n bar__item__title : mq({\n //borderBottom: '3px solid red',\n paddingTop: '0.5rem',\n paddingBottom: '0.5rem',\n display:'inline-block',\n fontSize: ['15px',null,'20px'],\n fontWeight: 600,\n color: 'black',\n cursor: 'pointer',\n position: 'relative'\n\n // '&.selected' : {\n // borderBottom: '3px solid black',\n // }\n }),\n bar__item__line : {\n marginTop:'0px',\n marginBottom: '0px',\n position: 'absolute',\n width: '100%',\n bottom: '0px',\n borderTop: '3px solid black',\n display: 'none',\n '&.selected' : {\n display:'block'\n }\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\nimport utils from '../../../utils';\nimport { useState, useMemo, useEffect } from 'react';\n\nexport function KsjbPageMenuBar(props) {\n\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'ksjb__page__menu__bar', item.cssClass || item.anchorName || '');\n const [curruentPosition, setCurruentPosition] = useState(\"\");\n const curruentPositionMemo = useMemo(() => {\n return curruentPosition;\n }, [curruentPosition]);\n\n useEffect(() => {\n const handleScroll = event => {\n \n const videoPanel = document.getElementById(\"ksjb-page-video\");\n const rectVideoPanel = videoPanel.getBoundingClientRect();\n \n const aboutPanel = document.getElementById(\"about\");\n const rectAboutPanel = aboutPanel.getBoundingClientRect();\n \n const recipesPanel = document.getElementById(\"recipes\");\n const rectRecipesPanel = recipesPanel.getBoundingClientRect();\n\n const quizPanel = document.getElementById(\"quiz-panel\");\n const rectQuizPanel = quizPanel.getBoundingClientRect();\n\n //const retailersPanel = document.getElementById(\"retailers\");\n const retailersPanel = document.getElementById(\"retailers-text\");\n const rectRetailersPanel = retailersPanel.getBoundingClientRect();\n\n if (rectVideoPanel.top <= 200) {\n setCurruentPosition(\"\");\n }\n \n if (rectAboutPanel.top <= 200) {\n setCurruentPosition(\"About Kick Start\");\n }\n \n if (rectRecipesPanel.top <= 200) {\n setCurruentPosition(\"Recipes\");\n }\n \n if (rectQuizPanel.top <= 200) {\n setCurruentPosition(\"Quiz\");\n }\n \n if (rectRetailersPanel.top <= 500) {\n setCurruentPosition(\"Retailers\");\n }\n\n //console.log(\"rectAboutPanel.top\", rectAboutPanel.top);\n //console.log(\"rectAboutPanel.bottom\", rectAboutPanel.bottom);\n // console.log(\"aboutPanelfff\", window.pageYOffset);\n\n // if(rectAboutPanel.top >= 98 && rectAboutPanel.top <= 500){ \n // console.log(\"sdfsfsdfsdfsdf\");\n // setCurruentPosition(\"About Kick Start\");\n // }\n\n\n };\n\n window.addEventListener('scroll', handleScroll);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n
\n
\n {\n //setCurruentPosition(\"About Kick Start\");\n utils.ui.scrollTo(\"#about\");\n }}>About Kick Start\n \n
\n
\n {\n //setCurruentPosition(\"Recipes\");\n utils.ui.scrollTo(\"#recipes\");\n }}>Tips\n \n
\n
\n {\n //setCurruentPosition(\"Quiz\");\n utils.ui.scrollTo(\"#quiz-panel\");\n }}>Quiz\n \n
\n
\n {\n //setCurruentPosition(\"Retailers\");\n //utils.ui.scrollTo(\"#retailers\");\n utils.ui.scrollTo(\"#retailers-text\");\n }}>Retailers\n \n
\n
\n
\n
\n \n {captionTitle}\n
\n \n
\n \n
\n \n {carouselItems}\n \n
\n
\n
\n
\n
\n {carouselItems}\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n )\n}","import { mq } from \"../../../cssInJs\"\n\nexport default {\n ksjb__page__quiz__panel: {\n backgroundColor: '#ABC87A',\n //backgroundColor: 'red',\n position: 'relative'\n },\n quiz__panel__wave: mq({\n width: '100%',\n height: '25px',\n position: 'absolute',\n top: ['-24px', null, '-25px', '-27px'],\n 'svg': {\n width: '100%',\n height: '100%'\n }\n }),\n m_floating_carrot: mq({\n // position: absolute;\n // max-width: 78px;\n // bottom: -38%;\n // left: 72px;\n // z-index: -1;\n // transform: rotateZ(210deg);\n // display: none;\n position: 'absolute',\n maxWidth: '78px',\n left: ' 72px',\n transform: 'rotate(210deg)',\n top: '-26%',\n display: ['block', null, 'none'],\n 'img': {\n width: '100%'\n }\n }),\n floating_spinach_below: mq({\n position: 'absolute',\n maxWidth: '80px',\n left: '1%',\n top: '-30%',\n transform: 'rotate(-60deg)',\n display: ['block', null, 'none'],\n 'img': {\n width: '100%'\n }\n }),\n m_floating_strawberry: mq({\n position: 'absolute',\n maxWidth: '80px',\n left: '65%',\n top: '-12%',\n transform: 'rotate(-36deg)',\n display: ['block', null, 'none'],\n 'img': {\n width: '100%'\n }\n }),\n ksjb__page__quiz__inner__panel: mq({\n textAlign: 'center',\n overflow: 'hidden',\n paddingTop: ['1rem', null, '5rem'],\n paddingBottom: ['1rem', null, '4rem'],\n paddingLeft: ['0.5rem', null, '0.5rem'],\n paddingRight: ['0.5rem', null, '0.5rem']\n }),\n panel__container: {\n //maxWidth: '1600px',\n //margin: 'auto',\n display: 'flex',\n transition: 'all 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0s'\n },\n step__title__container: {\n flex: '0 0 100%',\n //border: '1px solid red'\n },\n row__style: {\n alignItems: 'center',\n alignContent: 'center',\n height: '100%',\n '&.quiz__panel__title__container': {\n //maxWidth: '1600px',\n maxWidth: '1000px',\n margin: 'auto',\n },\n '.col-md-6': {\n //border: '1px solid red'\n }\n },\n quiz__panel__title: {\n color: 'black',\n //border: '1px solid red',\n //maxWidth: '800px',\n //margin: 'auto',\n '.first__text': mq({\n fontSize: ['14px', null, '23px'],\n fontWeight: 700,\n textAlign: 'center',\n letterSpacing: '5px',\n paddingLeft: '5px'\n }),\n '.second__text': mq({\n fontSize: ['26px', null, '44px'],\n fontWeight: 700,\n textAlign: 'center',\n lineHeight: '1.1',\n marginTop: ['1rem', null, '1.5rem']\n }),\n '.third__text': mq({\n fontSize: ['21px', null, '21px'],\n textAlign: 'center',\n marginTop: ['1rem', null, '1.5rme'],\n lineHeight: '1.3',\n '&.desk__top': mq({\n display: ['none', null, 'block']\n }),\n '&.mobile': mq({\n display: ['block', null, 'none'],\n fontSize: '14px',\n maxWidth: '364px',\n marginLeft: 'auto',\n marginRight: 'auto'\n })\n }),\n '.button__text': mq({\n backgroundColor: 'black',\n color: 'white',\n display: ['none', null, 'inline-block'],\n marginTop: ['1rem', null, '1.5rem'],\n fontSize: ['21px', null, '26px'],\n fontWeight: 700,\n marginLeft: 'auto',\n marginRight: 'auto',\n //width: '65%',\n borderRadius: '10px',\n paddingTop: ['6.5px', null, '6.5px'],\n paddingBottom: ['6.5px', null, '6.5px'],\n paddingLeft: '60px',\n paddingRight: '60px',\n cursor: 'pointer',\n letterSpacing: 0,\n '&:hover': {\n backgroundColor: '#4d4d4d'\n },\n '&.mobile': {\n display: ['inline-block', null, 'none'],\n marginBottom: '1rem'\n }\n })\n },\n\n quiz__panel__img: {\n //border: '1px solid red',\n maxWidth: '530px',\n margin: 'auto',\n 'img': {\n width: '100%'\n }\n },\n\n quiz__detail__text1: mq({\n fontSize: ['21px', null, '23px'],\n fontWeight: 700,\n textAlign: 'center',\n color: 'black'\n }),\n\n quiz__detail__text2: mq({\n fontSize: ['26px', null, '48px'],\n fontWeight: 700,\n textAlign: 'center',\n lineHeight: '1.1',\n marginTop: ['0.8rem', null, '1.5rem'],\n marginBottom: ['0.8rem', null, '1.5rem'],\n color: 'black',\n }),\n quiz__detail__answers: {\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '970px',\n margin: 'auto'\n },\n quiz__detail__answer: mq({\n flex: ['1 0 50%', null, '1 0 33.3%'],\n maxWidth: ['50%', null, '33.3%'],\n padding: ['0.3rem', null, '1rem']\n }),\n quiz__detail__answer__des: mq({\n padding: ['0.5rem', null, '1rem'],\n border: '2px solid white',\n color: 'black',\n fontWeight: '500',\n borderRadius: '20px',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: ['110px', null, '144px'],\n cursor: 'pointer',\n '&.selected': {\n backgroundColor: 'white'\n }\n }),\n quiz__detail__arrow: {\n 'img': mq({\n width: ['40px', null, '60px'],\n marginLeft: '2rem',\n marginRight: '2rem',\n cursor: 'pointer',\n '&.none': {\n pointerEvents: 'none'\n }\n }),\n },\n submit__button: mq({\n backgroundColor: 'black',\n color: 'white',\n display: 'inline-block',\n marginTop: '1.5rem',\n fontSize: ['21px', null, '21px'],\n fontWeight: 700,\n marginLeft: 'auto',\n marginRight: 'auto',\n borderRadius: '10px',\n paddingTop: ['0.5rem', null, '1rem'],\n paddingBottom: ['0.5rem', null, '1rem'],\n paddingLeft: '5rem',\n paddingRight: '5rem',\n cursor: 'pointer',\n '&.none': {\n pointerEvents: 'none'\n }\n }),\n result__step: {\n flex: '0 0 100%'\n },\n result__step__detail: mq({\n backgroundColor: '#FFFBE3',\n maxWidth: '1056px',\n margin: 'auto',\n marginTop: ['3rem', null, '3rem'],\n display: 'flex',\n borderRadius: '30px',\n padding: '1rem',\n flexWrap: 'wrap',\n '.result__step__detail__p': mq({\n flex: ['1 0 100%', null, '1 0 50%'],\n maxWidth: ['100%', null, '50%'],\n padding: '1rem'\n }),\n '.result__step__detail__title': mq({\n textAlign: 'left',\n fontWeight: '700',\n color: 'black',\n fontSize: ['21px', null, '26px']\n\n }),\n '.result__step__detail__title2': {\n fontSize: '36px',\n textAlign: 'left',\n lineHeight: '1.3',\n marginTop: '0.5rem',\n fontWeight: 700,\n '&.a': {\n color: '#FF8181'\n },\n '&.b': {\n color: '#FF8181'\n },\n '&.c': {\n color: '#931C4F'\n },\n '&.d': {\n color: '#DD1034'\n },\n '&.e': {\n color: '#679914'\n },\n '&.f': {\n color: '#F8B301'\n }\n },\n '.result__step__detail__img__text': {\n marginTop: '1rem',\n 'img': {\n width: '100%'\n }\n },\n '.result__step__detail__img': {\n margin: 'auto',\n 'img': {\n width: '100%'\n }\n },\n '.result__step__detail__des': {\n textAlign: 'left',\n marginTop: '2rem',\n fontWeight: '500',\n color: 'black'\n }\n }),\n\n result__step__social__v2: {\n display: 'flex',\n justifyContent : 'center',\n alignItems : 'center'\n },\n\n result__step__social: mq({\n paddingLeft : ['4px',null,'8px'],\n paddingRight : ['4px',null,'8px'],\n '.result__step__social__container': mq({\n display: 'inline-block',\n maxWidth: ['45px', null, '60px'],\n 'img': {\n width: '100%'\n },\n }),\n 'button.react-share__ShareButton:focus': {\n outline: 'none !important'\n }\n }),\n\n result__step__bottom__text__v2: mq({\n paddingLeft : ['4px',null,'8px'],\n paddingRight : ['4px',null,'8px'],\n '.result__step__bottom__text__1, .result__step__bottom__text__2' : {\n fontWeight:700\n },\n }),\n\n result__step__bottom__text: mq({\n color: 'black',\n marginTop: '2rem',\n marginBottom: ['3rem', null, '0'],\n '.result__step__bottom__text__3': mq({\n marginTop : ['0.4rem',null,'0.8rem'],\n }),\n '.result__step__quiz__btn': {\n cursor: 'pointer',\n textDecoration: 'underline'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { useState, useMemo } from 'react';\nimport style from './style';\nimport utils from '../../../utils';\nimport { FacebookShareButton } from \"react-share\";\nimport env from '../../../env';\n//import { useRouter } from 'components';\n\nexport function QuizPanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'ksjb__page__quiz__panel', item.cssClass || item.anchorName || '');\n //const { query } = useRouter();\n const [curruentStep, setCurruentStep] = useState(0);\n const [answerResult, setAnswerResult] = useState({ step1: '', step2: '', step3: '', step4: '', step5: '', step6: '' });\n const baseShareUrl = env.baseOrigin + cmsOption.pageData.pageUrl;\n\n const curruentStepMemo = useMemo(() => {\n return curruentStep;\n }, [curruentStep]);\n\n const answerResultMemo = useMemo(() => {\n return answerResult;\n }, [answerResult]);\n\n const resetQuiz = (() => {\n setAnswerResult({ step1: '', step2: '', step3: '', step4: '', step5: '', step6: '' });\n setCurruentStep(1);\n });\n\n //id={item.anchorName}\n return (\n \n\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
QUIZ
\n
WHAT SIGNATURE
\n\n
\n Find out what drink best represents you.
\n\n
\n You may know what juice or smoothie you enjoy…\n but do you know what kind of a drink best embodies you?\n Answer the following quiz questions to peel away the layers and get to the very core of who you might be! Pardon the puns.\n Let's begin.\n
\n\n
{\n setCurruentStep(1);\n }}>\n TAKE THE QUIZ\n
\n
\n
\n
\n
\n
\n {/*
\n */}\n
\n
\n
{\n setCurruentStep(1);\n }}>\n TAKE THE QUIZ\n
\n
\n\n
\n
\n
\n
\n
\n\n
{text1}
\n
{text2}
\n\n
\n {\n answers.map((item, index) =>\n
{\n setAnswerResult((c) => { return { ...c, [stepId]: item.answerId } });\n }}>\n
\n
\n {item.quizDes}\n
\n
\n
\n )\n }\n
\n\n
\n\n {\n stepId !== 'step1' &&\n
{\n setCurruentStep((c) => c - 1);\n }} />\n }\n\n {\n stepId !== 'step6' &&\n
{\n setCurruentStep((c) => c + 1);\n }} />\n }\n
\n {\n stepId === 'step6' &&\n
{\n if (window.innerWidth <= 576) {\n utils.ui.scrollTo(\"#result__step__detail__item\");\n setTimeout(() => {\n //utils.ui.scrollTo(\"#result__step__detail__item\");\n setCurruentStep((c) => c + 1);\n }, 500);\n }\n else {\n setCurruentStep((c) => c + 1);\n }\n }}>\n SUBMIT\n
\n }\n\n
\n
\n
\n
\n
\n\n
\n\n
\n
{resultMemo.title}
\n {/*
\n {resultMemo.title2}\n
*/}\n
\n
\n
\n
\n {resultMemo.des}\n
\n
\n
\n
\n
\n
\n
\n
\n\n {/*
*/}\n\n
\n\n
\n
\n
\n
Describes you to a T?
\n
Share it on Facebook!
\n
\n
\n\n {/*
Describes you to a T?
\n
Share it on Facebook!
*/}\n\n\n
\n Doesn't sound like you? Take the {\n resetQuiz();\n if (window.innerWidth <= 576) {\n utils.ui.scrollTo(\"#step__title__container__step1\");\n }\n }}>quiz again!\n
\n
\n\n
\n
\n\n
\n
\n
\n {/* \n
\n Kick Start Personal
\n
\n
\n
\n
\n \n {product.productName}\n
\n
\n {product.priceText ? product.priceText : ''}\n
\n \n
No product
;\n } else if (post.loading()) {\n return \n No result found.\n
\n );\n }\n \n return (\n \n \n
\n {products.map((product, index) => (\n
\n
);\n } else if (item.itemTypeCode === 'BannerPanel') {\n itemElt = ({item.itemTypeCode}
);\n }\n\n // const subItemsElts = subItems.map((subItem, index) =>\n // \n {sectionItems}\n
\n \n );\n}\n\nfunction Section(props) {\n log('5. section rendering')\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n <\\/p>/g, '');\n //editor.insertHtml(evt.data.dataValue); return false;\n setTimeout(function () {\n CKEDITOR.instances.cmsCurrentEditor.setData(CKEDITOR.instances.cmsCurrentEditor.getData());\n }, 100);\n }, null, null, 9);\n }\n\n close($editor = null) {\n const CKEDITOR = window['CKEDITOR'] || {};\n //console.log('ckeditor close');\n if (typeof CKEDITOR.instances.cmsCurrentEditor != \"undefined\")\n CKEDITOR.instances.cmsCurrentEditor.destroy();\n\n //for (var instance in CKEDITOR.instances) {\n // CKEDITOR.instances[instance].destroy();\n //}\n\n }\n}\n","import { CmsRadioSender } from './cms-radio-sender'\nimport { CmsRadioReceiver } from './cms-radio-receiver'\nimport { CmsHtmlEditor } from './cms-html-editor'\nimport env from '../../env';\n\n// declare var CKEDITOR: any;\n// import * as $ from 'jquery';\n\n\nexport class CmsPageController {\n settings;//: any;\n sender;//: CmsRadioSender;\n receiver;//: CmsRadioReceiver;\n htmlEditor;//: CmsHtmlEditor;\n\n constructor() {\n this.settings = { root: \"body\", viewOnly: false };\n this.sender = new CmsRadioSender(this);\n this.receiver = new CmsRadioReceiver(this);\n this.htmlEditor = new CmsHtmlEditor(env.cmsEndpoint, this.sender);\n }\n init(options) {\n const $ = window['jQuery'];\n this.settings = Object.assign({}, /*default*/{ root: \"body\", viewOnly: false }, options);\n this.initGlobalVars();\n\n var self = this;\n $(\"[onclick]\").prop(\"onclick\", null);\n $(\"[dblclick]\").prop(\"dblclick\", null);\n $(self.settings.root).off(\"click dblclick\", \"*\");\n $(self.settings.root).on(\"click dblclick\", \"*\", function (e) {\n //$(\".cms_html_editor_img_selected\").removeClass(\"cms_html_editor_img_selected\");\n // console.log($(e.target).hasClass(\"allowClick\"));\n // console.log(e.target);\n\n if (!$(e.target).hasClass(\"allowClick\")) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n if ($(this).attr(\"contenteditable\") === \"true\" ||\n $(\"#cms_html_editor_source_id\").is(\":visible\")) {\n e.stopPropagation();\n return;\n }\n if (!self.settings.viewOnly)\n self.selectItem($(this), false, e.type === \"dblclick\");\n });\n\n if (self.settings.viewOnly) return; // stop the editing logic for viewonly mode.\n\n // ctrl + s for html block\n $(self.settings.root).on('keydown', \"#cmsCurrentEditor\", function (e) {\n if (e.ctrlKey && e.which === 83) {\n //var itemId = $(this).data(\"cms-item-id\");\n //if (!itemId)\n // itemId = $(this).closest(\"[data-cms-item-id]\").data(\"cms-item-id\");\n //window.parent.cms.site.saveHtml(itemId);\n //e.preventDefault();\n\n self.sender.saveAllDirtyHtml(self.getAllDirtyHtml());\n return false;\n }\n });\n }\n\n selectItemFromController(id) {\n const $ = window['jQuery'];\n var item = $(\".cms_item[data-cms-item-id='\" + id + \"']\");\n this.scrollTo(item);\n this.selectItem(item, true);\n }\n\n selectItem($item, fromController, doubleclicked = false) {\n //console.log(\"select item - \" + fromController + \" - \" + doubleclicked);\n //console.log($item);\n var editor = $item.closest(\"[contenteditable]\");\n if (editor.length > 0)\n return;\n var cke_top = $item.closest(\".cke_top\");\n if (cke_top.length > 0)\n return;\n\n this.closeEditingItem();\n //console.log($item);\n if (typeof $item === \"undefined\") return;\n if ($item.length === 0) return;\n this.findItem($item, fromController, 0, doubleclicked);\n }\n\n closeEditingItem() {\n const $ = window['jQuery'];\n //console.log(\"close editing item\");\n $(\"[contenteditable]\").removeAttr(\"contenteditable\");\n $(\"#cms_hovermenu\").remove();\n $(\".cms_editing_item\").removeClass(\"cms_editing_item\");\n\n }\n\n findItem($item, fromController, depth, doubleclicked) {\n if (depth > 100) return false;\n // console.log($item, fromController, depth, doubleclicked)\n if (typeof $item.attr(\"data-cms-html\") !== \"undefined\" && $item.attr(\"data-cms-html\") === \"true\") {\n $item.attr(\"contenteditable\", \"true\");\n this.showHtmlEditor($item);\n }\n if (typeof $item.attr(\"data-cms-item-id\") !== \"undefined\") {\n //$item.attr(\"contenteditable\", \"true\");\n $item.addClass(\"cms_editing_item\");\n if (!fromController) {\n //window.parent.cms.site.selectControllerItem($item.attr(\"data-cms-item-id\"),\n // typeof doubleclicked != \"undefined\" && doubleclicked == true\n //);\n this.sender.selectControllerItem({\n id: $item.attr(\"data-cms-item-id\"),\n openEdit: typeof doubleclicked !== \"undefined\" && doubleclicked === true\n });\n\n }\n\n //show_hovermenu($item);\n\n } else {\n var editableParent = $item.parents(\".cms_item[data-cms-item-id], [data-cms-html]\");\n if (editableParent.length > 0)\n this.findItem(editableParent.first(), fromController, depth + 1, doubleclicked);\n\n }\n }\n\n sameContent(a, b) {\n return a === b;\n }\n\n showHtmlEditor($item) {\n const $ = window['jQuery'];\n var editor = $item;\n //console.log(editor);\n //var $menu = $(\"#cms_html_editor_ctrl\");\n ////$menu.css(\"top\", $item.offset().top - 40);\n ////$menu.css(\"left\", $item.offset().left);\n //$menu.show();\n //initHtmlEditor($item);\n\n if (editor.attr(\"id\") === \"cmsCurrentEditor\") return;\n\n $(\"#cmsCurrentEditor\").attr(\"id\", \"\");\n this.htmlEditor.close(editor);\n\n editor.attr(\"id\", \"cmsCurrentEditor\");\n //editor.data(\"current-content\", editor.html());\n\n this.htmlEditor.show(editor);\n //setHandlers($item);\n\n }\n\n\n initGlobalVars() {\n const $ = window['jQuery'];\n window[\"cmsPage\"] = $.extend({}, window[\"cmsPage\"] || {}, {\n htmleditor: {\n // cmsPage.htmleditor.getAnchors();\n getAnchors: function (opt) {\n //var options = $.extend({}, opt);\n //console.log(options);\n var anchors = [];\n\n $(\"a[name]\").each(function (inx, obj) {\n anchors.push({ id: $(obj).attr(\"id\"), name: $(obj).attr(\"name\") });\n });\n\n $(\"[data-cms-item-name],[data-cms-anchor]\").each(function (inx, obj) {\n if (typeof $(obj).attr(\"data-cms-anchor\") !== \"undefined\" && $(obj).attr(\"data-cms-anchor\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-anchor\") });\n } else if ($(obj).attr(\"data-cms-item-name\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-item-name\") });\n }\n });\n\n return anchors;\n }\n }\n });\n }\n\n scrollTo(target) {\n const $ = window['jQuery'];\n if (typeof target === \"undefined\") return;\n if ($(target).length === 0) return;\n var htmlbody = $('html,body');\n var top = 0;\n if ($(target).height() > $(window).height())\n top = $(target).offset().top;\n else {\n top = $(target).offset().top - Math.floor(($(window).height() - $(target).height()) / 2);\n }\n //console.log(top);\n //htmlbody.animate({ scrollTop: top }, 500, 'easeInOutQuint');\n htmlbody.animate({ scrollTop: top }, 500);\n }\n\n getCurrentHtml() {\n const CKEDITOR = window['CKEDITOR'] || {};\n try {\n return CKEDITOR.instances.cmsCurrentEditor.getData();\n } catch (e) { return \"\"; }\n }\n\n getAllDirtyHtml() {\n const $ = window['jQuery'];\n var self = this;\n var htmlChanges = [];\n $(\".dirtyHtml\").each(function (inx, obj) {\n var $section = $(obj);\n var content = $section.is(\"#cmsCurrentEditor\") ? // if the html editor is active, it needs to get the html from the editor.\n self.getCurrentHtml() : $section.html();\n if ($section.is(\"[data-cms-section-id]\")) {\n // section level?\n let $item = $section.closest(\"[data-cms-item-id]\");\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: $section.data(\"cms-section-id\"), Content: content });\n } else if ($section.is(\"[data-cms-item-id]\")) {\n // section level?\n let $item = $section;\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: \"Content\", Content: content });\n }\n });\n return htmlChanges;\n }\n\n getHtml(itemid: any) {\n const $ = window['jQuery'];\n this.htmlEditor.close();\n var self = this;\n var item = $(\".cms_item[data-cms-item-id='\" + itemid + \"']\");\n\n var formvals = { Content: this.cms_replace_item_html(item) };\n\n //cms_msg_progressing(\"#save_message\", \"Saving...\");\n if ($(\"[data-cms-section-id]\", item).length > 0) {\n $(\"[data-cms-section-id]\", item).each(function (inx, section) {\n var closestItemId = $(section).closest(\".cms_item\").data(\"cms-item-id\");\n if (closestItemId === itemid) {\n var id = $(section).attr(\"data-cms-section-id\");\n formvals[id] = self.cms_replace_item_html($(section)); //.find(\">:first-child\")().html();\n\n }\n });\n }\n return formvals;\n }\n\n cms_replace_item_html(item) {\n return item.html();\n // var $tmp = $(\"
\").html(item.html());\n // if ($tmp.find('.cms-skeleton').length > 0)\n // return $tmp.find('.cms-skeleton').html();\n // else\n // return item.html();\n //tmp.find(\".cms_ctrl_in_editor\").each(function (inx, obj) {\n // var ctrlid = $(obj).attr(\"data-cms-ctrl-id\");\n // $(obj).replaceWith(\"__cms__ctrl:\" + ctrlid + \"__\");\n //});\n //return tmp.html();\n }\n\n}\n","import React, { useEffect } from 'react';\nimport { useRouter } from '../../../components';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport env from '../../../env';\nimport { loadJs } from '../../../lib/net-loader';\nimport { CmsPageController } from '../../services/cms-page-controller';\nimport { ErrorPopup, Loading } from '../../../components';\n\n// function useQuery() {\n// return new URLSearchParams(useLocation().search);\n// }\n\nexport function EditPage(props) {\n //const [page, setPage] = useState(null);\n\n //const pageId = props.pageId;\n const { query } = useRouter();\n const { cmsViewMode = 'edit', id, publishVer, editVer } = query;\n const pageId = id;\n\n //console.log(pageId, cmsViewMode, env.apiBase, env)\n\n const get = useGet();\n useEffect(() => {\n get.send(env.apiBase + '/api/cms/GetPage/' + pageId + '?cmsViewMode=' + cmsViewMode\n + (publishVer ? '&publishVer=' + publishVer : '')\n + (editVer ? '&editVer=' + editVer : '')\n );\n // eslint-disable-next-line\n }, [pageId]);\n\n if (get.loading()) {\n return \n {sectionItems}\n
\n );\n}\n\n\nfunction Section(props) {\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n ));\n return (\n \n );\n}\n\nfunction MenuItem(props) {\n const [subMenuOpened, setSubMenuOpened] = useState(false);\n const item = props.item;\n const subItems = item.items || [];\n const currentLocation = props.currentLocation;\n\n const subItemsElts =\n subItems.length > 0\n ? subItems.map((subItem, index) => (\n \n closeMenu()}\n >\n {item.title} \n {subItemsElts && (\n toggleSubmenu(e)}>\n {subMenuOpened ? \n )}\n \n {subItemsElts && }\n \n );\n}\n\nfunction SubMenuItem(props) {\n const item = props.item;\n function closeMenu() {\n props.onCloseMenu();\n }\n\n return (\n \n closeMenu()}\n >\n {item.title} \n \n \n );\n}\n","import { css } from '@emotion/core';\nimport { variables, mq } from '../../cssInJs';\nexport default {\n button: css(mq({\n fontFamily: variables.familyHeader,\n position: 'absolute',\n left: '1rem',\n lineHeight: '1.6rem',\n color: '#ddd',\n fontSize: ['0.8rem', null, '0.9rem']\n })),\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { SiteLink } from '../../components';\nimport { FaAngleLeft } from 'react-icons/fa';\nimport { useHistoryStore } from '../../components';\nimport style from './backButtonStyle';\n\nexport function BackButton(props) {\n\n const history = useHistoryStore();\n\n function goBack(e) {\n history.pop();\n }\n\n if (history.last()) {\n return (\n )\n } else {\n return null;\n }\n}","import { css } from '@emotion/core';\nimport { mq } from '../../cssInJs';\n\nconst rs = [\n { w: 44, h: 44, barW: 28, barH: 3, space: 8 },\n { w: 56, h: 56, barW: 44, barH: 3, space: 10 }\n]\n\nconst line = css(mq({\n width: [rs[0].barW, null, rs[1].barW],\n height: [rs[0].barH, null, rs[1].barH],\n borderRadius: '4px',\n position: 'absolute',\n transitionProperty: 'transform',\n backgroundColor: '#fff',\n display: 'block',\n transitionDuration: '0.15s',\n transitionDelay: '0.15s',\n transitionTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n}))\n\nexport default {\n button: css(mq({\n cursor: 'pointer',\n zIndex: '1000',\n position: 'fixed',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'all 0.3s ease-in-out',\n padding: '0',\n top: [0],\n width: [rs[0].w, null, rs[1].w],\n height: [rs[0].h, null, rs[1].h],\n right: [0, null, 20],\n background: 'black', //variables.primaryColor,\n border: 'none',\n outline: 'none',\n font: 'inherit',\n color: 'inherit',\n textTransform: 'none',\n '&:focus': {\n outline: 'none',\n },\n \n '@media(min-width: 1366px)': {\n top: 12,\n width: rs[1].w,\n height: rs[1].h,\n right: 20,\n }\n })),\n\n buttonScrolled: css(mq({\n top: [0, null, 0]\n })),\n\n hamburger: css(mq({\n width: [rs[0].barW, null, rs[1].barW],\n height: [rs[0].barH + rs[0].space * 2, null, rs[1].barH + rs[1].space * 2],\n position: 'relative',\n display: 'block',\n })),\n\n line1: css(mq(line, {\n top: 0,\n transition: 'top 0.3s 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s 0.1s linear',\n })),\n line2: css(mq(line, {\n transition: 'top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n top: [rs[0].space, null, rs[1].space],\n })),\n line3: css(mq(line, {\n top: [rs[0].space * 2, null, rs[1].space * 2],\n })),\n\n lineActive1: css({\n opacity: '0',\n top: 18,\n transition: 'top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.2s linear',\n }),\n lineActive2: css({\n transform: 'rotate(-135deg)',\n transition: 'top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1)',\n }),\n lineActive3: css(mq({\n transform: [`translate3d(0, -${rs[0].space}px, 0) rotate(-45deg)`, null, `translate3d(0, -${rs[1].space}px, 0) rotate(-45deg)`],\n transitionDelay: '0.32s',\n transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n }))\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './hamburgerStyle';\n\nexport function Hamburger({ opened, toggleMenu, scrolled }) {\n\n return \n \n \n \n}","import { css } from \"@emotion/core\";\nimport { mq } from \"../../cssInJs\";\n\nexport default {\n top: css(\n mq({\n height: [44, null, 56],\n background: \"black\",\n position: \"fixed\",\n width: \"100%\",\n zIndex: \"999\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n transition: \"all 0.3s\",\n \"@media(min-width: 1366px)\": {\n height: 80,\n },\n })\n ),\n topScrolled: css(\n mq({\n height: [44],\n \"@media(min-width: 1366px)\": {\n height: 56,\n },\n })\n ),\n logo: css(mq({})),\n logoImg: css(\n mq({\n display: \"block\",\n transition: \"all 0.3s\",\n marginTop: [-0.365],\n height: [18.44],\n \"@media(min-width: 1366px)\": {\n marginTop: -0.66 /*2/101 * h*/,\n height: 33.527 /*80 / (241/101)*/,\n },\n })\n ),\n logoImgScrolled: css(\n mq({\n \"@media(min-width: 1366px)\": {\n marginTop: -0.467 /*2/101 * h*/,\n height: 23.469 /*56 / (241/101)*/,\n },\n })\n ),\n\n buyNow: mq({\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n backgroundColor: \"#97c424\",\n lineHeight: 1,\n padding: ['17px 0.5rem',null,'20px 1rem'] ,\n transition: \"all 0.2s ease-in-out\",\n fontSize: [\"10px\", null, \"1rem\"],\n right: ['45px', '60px', '100px'],\n \"@media(min-width: 1366px)\": {\n padding: \"32px 1rem\",\n right: '100px',\n },\n\n a: {\n color: \"white\",\n fontWeight: 600,\n \"&:hover\": {\n textDecoration: \"none\",\n },\n },\n }),\n\n buyNowScrolled: mq({\n padding: [\"17px 0.5rem\"],\n \"@media(min-width: 1366px)\" : {\n padding : '20px 1rem'\n }\n }),\n};\n","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\n\nimport { useState, Fragment } from \"react\";\nimport { SiteLink, useRouter } from \"../../components\";\nimport { useScrollPosition } from \"@n8tb1t/use-scroll-position\";\nimport { NavBar } from \"./navBar\";\nimport { BackButton } from \"../backButton/backButton\";\nimport { Hamburger } from \"../hamburger/hamburger\";\nimport style from \"./topHeaderStyle\";\n\nexport function TopHeader(props) {\n const [menuOpened, setMenuOpened] = useState(false);\n const [scrolled, setScrolled] = useState(false);\n const { path } = useRouter();\n\n console.log(\"path\", path);\n\n useScrollPosition(\n ({ prevPos, currPos }) => {\n //console.log(currPos.x)\n //console.log(currPos.y);\n if (currPos.y > 90) {\n setScrolled(true);\n } else {\n setScrolled(false);\n }\n //setScrolled(currPos.y > 90)\n },\n [],\n null,\n true\n );\n\n function toggleMenu(e) {\n setMenuOpened(!menuOpened);\n }\n\n function onCloseMenu() {\n setMenuOpened(false);\n }\n\n return (\n \n \n \n \n\n \n BUY NOW \n
\n )}\n \n \n );\n}\n\n///\n","import { variables, mq } from '../../cssInJs';\n\nexport default {\n footerWrapper: {\n background: 'black',\n padding: '2rem 1rem 9rem'\n },\n footer: {\n maxWidth: 960,\n margin: 'auto',\n fontFamily: variables.familyHeader,\n },\n logo: {\n borderBottom: 'solid 2px #555',\n paddingBottom: '1rem',\n },\n logoImg: mq({\n maxHeight: [20, null, 22],\n //marginLeft: [10]\n }),\n socialAndLinks: mq({\n paddingTop: [10, null, 15]\n }),\n social: {\n marginLeft: '-10px',\n },\n socialIcon: {\n width: '30px',\n height: '30px',\n marginLeft: '10px',\n marginRight: '10px',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n transition: '.3s',\n display: 'inline-block',\n },\n\n links: mq({\n textAlign: ['left', null, 'right'],\n marginTop: [15, null, 5],\n fontSize: '0.75rem',\n color: '#ebebeb;',\n\n 'a': {\n color: '#ebebeb;',\n fontSize: '0.75rem',\n },\n 'a:hover, a:focus': {\n color: '#fff'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './footerStyle';\nimport { SiteLink } from '../../components';\n\nexport function Footer(props) {\n const year = (new Date()).getFullYear();\n //const ver = env.ver;\n\n return (\n \n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n ©{year} Cuisinart - Conair Australia \n All rights reserved \n Privacy Policy Disclaimer \n
\n
\n
\n\n {/*
\n
\n \n
*/}\n
\n
\n \n \n
\n
\n
{link.title}
\n \n \n );\n\n const bottomMenu = useRef(null);\n useLayoutEffect(() => {\n //console.log('useLayoutEffect');\n const slider = new BottomDrawer(bottomMenu.current, { status: isMin.md() ? 'collapsed' : 'expanded' });\n setTimeout(() => slider.init(), 1000)\n }, [])\n\n return (\n <>\n \n \n {/*
*/}\n \n \n
\n \n );\n}\n","import { mq } from '../../cssInJs';\n\nexport default {\n instagrams: {\n marginLeft: '-10px',\n marginRight: '-10px',\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n },\t\n topPadding: mq({\n height: [24, null, 30],\n backgroundColor: 'white',\n '@media(min-width: 1366px)': {\n height: 50\n }\n }),\n\n qa: {\n marginBottom: '1rem',\n borderBottom: 'solid 1px #ccc',\n },\n qaQuestion: {\n fontWeight: 'bold',\n marginBottom: '0.3rem',\n },\n qaAnswer: {\n\n }\n}","import React from 'react';\nimport { SiteLink } from '../../components';\n\nexport function Breadcrumb({ breadcrumb }) {\n\n return (\n \n {breadcrumb.items.map((item, index) => Item(item, index))}\n \n );\n}\n\nfunction Item(item, index) {\n if (item.link) {\n return (\n {item.title} {item.title} \n )\n }\n}","import React, { useState, useEffect } from 'react';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport { NotFound } from '../../../components';\nimport env from '../../../env';\nimport { useStore } from '../../../store';\nimport { ErrorPopup, Loading } from '../../../components';\n\nconst log = (...args) => {\n //console.log(args);\n}\nconst areEqual = (prevProps, nextProps) => {\n return (prevProps.pageData === nextProps.pageData)\n};\nconst PageMemo = React.memo(Page, areEqual)\n\nexport function ViewPartial({pageOptions = null}) {\n const { dispatch } = useStore();\n const [pageLoaded, setPageLoaded] = useState(false);\n const [data, setData] = useState(null);\n //const path = usePath();\n //log('view page', path);\n const pathname = '/partials/common-footer';\n\n const get = useGet();\n log('0. viewpage ready');\n\n useEffect(() => {\n log('*. start loading')\n setPageLoaded(false);\n get.send(env.apiBase + \"/api/cms/GetPublishedPage?path=\" + pathname);\n // eslint-disable-next-line\n }, [pathname]);\n\n useEffect(() => {\n if (data){\n dispatch({ type: 'SET_PAGE', payload: data.data })\n dispatch({ type: 'SET_MENU', payload: data.menu })\n }\n // eslint-disable-next-line\n }, [data]);\n\n if (get.loading()) {\n return \n
\n \n {products.map((product, index) =>\n \n
\n
\n
\n \n \n {product.productName}\n {/*
*/}\n
\n {product.priceText ? product.priceText : ''}\n
\n\n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport { useState, useEffect, Fragment } from \"react\";\nimport { Loading } from \"../../components\";\nimport { createPortal } from \"react-dom\";\nimport { MdClose } from \"react-icons/md\";\n\nfunction Portal({ children }) {\n const [el] = useState(document.createElement(\"div\"));\n useEffect(() => {\n let mount = document.getElementById(\"portal-root\");\n mount.appendChild(el);\n return () => mount.removeChild(el);\n }, [el]);\n return createPortal(children, el);\n}\n\nexport function TiktokEmbedByLink({ className, url }) {\n const [code, setCode] = useState();\n const [openPopup, setOpenPopup] = useState(false);\n\n const s = getStyle();\n\n useEffect(() => {\n const abortController = new AbortController();\n const signal = abortController.signal;\n\n fetch(`https://www.tiktok.com/oembed?url=${url}`, { signal: signal })\n .then((res) => res.json())\n .then((res) => {\n setCode(res);\n })\n .catch((error) => {\n setCode({ error: \"Load error\" });\n });\n\n return function cleanup() {\n abortController.abort();\n };\n\n // eslint-disable-next-line\n }, []);\n\n function close() {\n setOpenPopup(false);\n document.body.style.overflow = \"unset\";\n }\n\n function open() {\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }\n\n if (!code) {\n return (\n \n
\n );\n }\n \n return (\n \n {openPopup && (\n \n \n \n\n \n
\n \n )}\n\n {code.error ? (\n \n
\n Load Error\n {url}
\n \n \n \n
\n
\n Watch on Tiktok\n \n \n \n )}\n \n //
\n );\n}\n\nfunction TiktokItem({ styleItem, html }) {\n \n const template = html;\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n const existingScript = document.getElementById(\"tiktokEmbedScript\");\n if (existingScript) {\n document.body.removeChild(existingScript);\n }\n\n const script = document.createElement(\"script\");\n script.type = `text/javascript`;\n script.id = \"tiktokEmbedScript\";\n script.async = true;\n script.src = \"https://www.tiktok.com/embed.js\";\n\n document.body.appendChild(script);\n\n let vvv = null;\n const abc = setInterval(() => {\n console.log(\"check inverval tiktokEmbedScript\");\n if (document.getElementById(\"tiktokEmbedScript\")) {\n vvv = setTimeout(() => {\n setShow(true);\n }, 2000);\n clearInterval(abc);\n }\n }, 100);\n\n return function cleanup() {\n document.body.removeChild(script);\n clearInterval(abc);\n if (vvv) {\n clearTimeout(vvv);\n }\n };\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {!show && \n \n );\n}\n\nfunction getStyle() {\n const style = {\n titok__embed__container: {\n maxWidth: \"324px\",\n position: \"relative\",\n cursor: \"pointer\",\n \"&:after\": {\n content: '\"\"',\n width: \"100%\",\n height: \"100%\",\n top: \"0\",\n left: \"0\",\n //zIndex: 2,\n backgroundColor: \"rgba(0,0,0,0.5)\",\n position: \"absolute\",\n },\n },\n\n titok__embed__container__error: {\n width: \"324px\",\n position: \"relative\",\n cursor: \"pointer\",\n height: \"300px\",\n backgroundColor: \"grey\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n\n titok__embed__watch__icon: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n zIndex: 2,\n },\n titok__embed__watch__icon__text: {\n fontSize: \"14px\",\n marginTop: \"-1.5rem\",\n fontWeight: 500,\n textAlign: \"center\",\n color: \"white\",\n },\n\n titok__embed__watch__icon__text__error: {\n fontSize: \"14px\",\n fontWeight: 500,\n textAlign: \"center\",\n color: \"white\",\n },\n\n portal__background: {\n backgroundColor: \"rgba(0,0,0,0.8)\",\n position: \"fixed\",\n top: \"0px\",\n left: \"0px\",\n width: \"100%\",\n height: \"100%\",\n zIndex: \"9998\",\n },\n\n portal__close__btn: {\n position: \"fixed\",\n zIndex: \"9999\",\n right: 0,\n top: 0,\n margin: \"1rem\",\n cursor: \"pointer\",\n svg: {\n width: \"30px\",\n height: \"30px\",\n color: \"white\",\n },\n },\n\n portal__contents: {\n position: \"fixed\",\n left: \"50%\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n zIndex: 9999,\n //width: \"100%\",\n },\n\n tiktok__item__show: {\n maxHeight: \"0px\",\n overflow: \"hidden\",\n \"&.show\": {\n maxHeight: \"1000px\",\n backgroundColor: \"white\",\n },\n },\n };\n return style;\n}\n","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport style from \"./productViewStyle\";\nimport React from \"react\";\nimport env from \"../../env\";\nimport { SiteLink, NotFound } from \"../../components\";\nimport { useGet } from \"../../components\";\nimport { useRouter } from \"../../components\";\nimport utils from \"../../utils\";\nimport { ErrorPopup, Loading } from \"../../components\";\nimport { Breadcrumb } from \"../../components/breadcrumb/breadcrumb\";\nimport { ViewPartial } from \"../../cms/pages/partials/viewPartial\";\n//import { CommonProductBottom } from '../../cms/pages/partials/commonProductBottom';\n//import { Tile } from './productTile';\nimport { YoutubeEmbed } from \"../../components\";\nimport { useInstagram } from \"../../components\";\nimport { useBV } from \"../bazzarVoice/useBV\";\n//import { ImagePopup } from 'modules/imagePopup/imagePopup';\n// import InstagramEmbed from \"react-instagram-embed\";\nimport Slider from \"react-slick\";\nimport FsLightbox from \"fslightbox-react\";\nimport { MetaTag } from \"../../components\";\nimport { FaRegFilePdf } from \"react-icons/fa\";\nimport { FaRegPlayCircle } from \"react-icons/fa\";\nimport { debounce } from \"../../lib/utils-core/debounce\";\nimport { gtm } from \"../../lib/tracking\";\nimport { ProductTiles } from \"../productTile--slider/productTiles\";\nimport { IoMdOpen } from \"react-icons/io\";\nimport { InstaEmbedByLink } from \"../embed/instagram\";\nimport { TiktokEmbedByLink } from \"../embed/tiktok\";\n\nexport function ProductView(props) {\n const { query } = useRouter();\n const [loaded, setLoaded] = React.useState(false);\n const get = useGet();\n useInstagram();\n\n const productCode = query.id || \"\";\n const category = query.category || \"\";\n const slug = query.slug || \"\";\n //console.log(category, slug, productCode)\n\n React.useEffect(() => {\n const url = productCode\n ? `/api/product/getProduct/${productCode}`\n : `/api/product/getProductByUrl?category=${category}&slug=${slug}`;\n get.send(env.apiBase + url);\n setLoaded(false);\n // eslint-disable-next-line\n }, [productCode, slug]);\n\n if (get.loading()) {\n return No product found.
;\n return (\n \n {/* \n
*/}\n
\n \n );\n}\n\nfunction Product({ product }) {\n const mainPhoto =\n product.productImages.length > 0\n ? product.productImages[0]\n : { imageUrl: \"/assets/product-empty.png\", alt: product.productName };\n const allPhotos = product.productImages || [];\n //const otherPhotos = product.productImages.length > 0 ? product.productImages.filter(x => !x.isPackage) : [];\n const packagePhotos =\n product.productImages.length > 0\n ? product.productImages.filter((x) => x.isPackage)\n : [];\n\n const popupImages = allPhotos.map((x) => x.imageUrl);\n\n const [currentTab, setCurrentTab] = React.useState(\"wheretobuy\");\n const [heroImage, setHeroImage] = React.useState(mainPhoto);\n\n // const youtubeSection = [];\n // if(product.youtubeSection && product.youtubeSection.length > 0){\n // product.youtubeSection.forEach(el => {\n // const video = JSON.parse(el.itemValue);\n // const videoId = utils.url.getYoutubeId(video.video);\n // const posterImage = video.posterImage || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;\n // youtubeSection.push({\n // alt : null,\n // imageUrl : posterImage,\n // isPackage : false, type : 'youtube',\n // video : video.video\n // });\n // });\n // }\n\n const [toggler, setToggler] = React.useState(false);\n //const [popupImages, setPopupImages] = React.useState();\n const [popupIndex, setPopupIndex] = React.useState(0);\n\n const [isMobile, setIsMobile] = React.useState(utils.site.isMobile());\n\n React.useEffect(() => {\n const resized = debounce(() => {\n setIsMobile(utils.site.isMobile());\n }, 1000);\n if (typeof window !== `undefined`) {\n window.addEventListener(\"resize\", resized);\n }\n\n return () => {\n if (typeof window !== `undefined`) {\n window.removeEventListener(\"resize\", resized);\n }\n };\n }, []);\n\n React.useLayoutEffect(() => {\n if (!utils.site.isNZ) {\n setTimeout(() => {\n bv.sendEvent(\n \"WhereToBuy\",\n \"WhereToBuyTab_ProductPage\",\n product.productCode\n );\n }, 1500);\n }\n\n // eslint-disable-next-line\n }, []);\n\n // BV\n const onShowReview = React.useCallback((e) => {\n //e.stopPropagation();\n showTab(\"reviews\", true);\n // eslint-disable-next-line\n }, []);\n\n const bv = useBV(product, {\n showReview: onShowReview,\n });\n\n function openPopupImage(imageUrl) {\n const inx = utils.array.findIndex(popupImages, (x) => x === imageUrl);\n setPopupIndex(inx >= 0 ? inx : 0);\n setToggler(!toggler);\n }\n\n function showTab(tab, forceToScroll = false) {\n if (tab === \"wheretobuy\" && !utils.site.isNZ) {\n console.log(\"__wheretobuy\");\n bv.sendEvent(\n \"WhereToBuy\",\n \"WhereToBuyTab_ProductPage\",\n product.productCode\n );\n }\n setCurrentTab(tab);\n scrollTo(\"tab-\" + tab, forceToScroll);\n }\n\n function scrollTo(selector, forceToScroll = false) {\n if (!forceToScroll && !isMobile) return;\n setTimeout(() => {\n const anchor = utils.ui.findElement(selector);\n if (anchor) utils.ui.scrollTo(anchor, 300);\n }, 200);\n }\n\n const slides = allPhotos.map((photo, index) =>\n photo.youtubeCheck ? (\n setHeroImage(photo)}\n >\n \n \n
\n \n ) : (\n \n setHeroImage(photo)}\n >\n {/* showTab('details')}>\n // Details\n //
,\n // showTab('seemore')}>\n // {' '}\n // Recipes{' '}\n //
,\n // showTab('faqs')}>\n // FAQs\n //
,\n // showTab('reviews')}>\n // Reviews\n //
,\n // showTab('wheretobuy')}>\n // Where to buy\n //
,\n // ];\n\n // const tabContents = [\n // \n //
,\n // \n //
,\n // \n //
,\n // ,\n // \n // {product.whereToBuys && product.whereToBuys.length > 0 ?
:
No Store
}\n //
showTab(\"wheretobuy\")}\n >\n Where to buy\n ,\n\n showTab(\"reviews\")}\n >\n Reviews\n ,\n\n showTab(\"details\")}\n >\n Details\n ,\n\n showTab(\"seemore\")}\n >\n {\" \"}\n Recipes{\" \"}\n ,\n showTab(\"faqs\")}\n >\n FAQs\n ,\n ];\n\n const tabContents = [\n \n {product.whereToBuys && product.whereToBuys.length > 0 ? (\n
\n ) : (\n
No Store
\n )}\n
\n
,\n\n \n
,\n\n \n
,\n ];\n\n const tabPanels = isMobile ? (\n \n {displayTabs[0] && (\n
\n {tabs[0]} {tabContents[0]}\n
\n )}\n {displayTabs[1] && (\n
\n {tabs[1]} {tabContents[1]}\n
\n )}\n {displayTabs[2] && (\n
\n {tabs[2]} {tabContents[2]}\n
\n )}\n {displayTabs[3] && (\n
\n {tabs[3]} {tabContents[3]}\n
\n )}\n {displayTabs[4] && (\n
\n {tabs[4]} {tabContents[4]}\n
\n )}\n
\n
\n {displayTabs[0] && tabs[0]}\n {displayTabs[1] && tabs[1]}\n {displayTabs[2] && tabs[2]}\n {displayTabs[3] && tabs[3]}\n {displayTabs[4] && tabs[4]}\n
\n\n
\n {displayTabs[0] && tabContents[0]}\n {displayTabs[1] && tabContents[1]}\n {displayTabs[2] && tabContents[2]}\n {displayTabs[3] && tabContents[3]}\n {displayTabs[4] && tabContents[4]}\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n {product.intro && (\n
\n )}\n {barcodeCleaned &&
}\n {barcodeCleaned && (\n
\n )}\n\n {heroImage && heroImage.imageUrl && (\n
\n )}\n\n
\n
\n\n
\n
\n {/*
*/}\n\n {heroImage.youtubeCheck && heroImage.youtubeCheck === true ? (\n
\n
\n
\n {heroImage.youtubeUrl &&\n heroImage.youtubeUrl.toLowerCase().includes(\".m4v\") ? (\n \n
\n
\n
\n ) : (\n //
\n //
:\n
openPopupImage(heroImage.imageUrl)}\n />\n )}\n\n {allPhotos.length > 1 && (\n \n
\n {slides}\n {/* {\n youtubeSection.map((item, index) =>\n setHeroImage(item)}>\n
\n
\n
\n
\n
\n
\n
\n {product.productName.indexOf(\"i-\") === 0 ? (\n
\n \n {product.productName.toUpperCase().replace(\"I-\", \"i-\")}\n \n \n ) : (\n
\n {product.productName} \n \n )}\n \n {product.priceText ? product.priceText : \"\"}\n
\n \n Product code: {product.productCode} \n
\n \n \n {product.productStatus === 98 /*Discontinued*/ && (\n
\n This product is now discontinued.\n
\n )}\n
{product.intro}
\n {discoverMoreLinks && (\n
\n {discoverMoreLinks.map((link, index) => (\n
\n \n {link.title} \n \n
\n ))}\n
\n )}\n\n
\n
\n {packagePhotos.map((photo, index) => (\n
\n
openPopupImage(photo.imageUrl)}\n />\n \n ))}\n
\n\n {product.recipeBookletLink && (\n
\n )}\n
\n
\n
\n\n {tabPanels}\n\n
\n
\n
\n
\n
Other products you might like \n
\n
\n {stores.map((store) => (\n \n \n {store.storeName} \n {store.buyOnline && (\n \n Buy online \n \n ))}\n \n );\n}\n\n// function HowtoTab({ product }) {\n// const section = product.howToSection || [];\n// return \n \n
TECH SPECS \n \n
SPARE PARTS \n
\n Spare Parts are available -{\" \"}\n \n Contact us\n {\" \"}\n for more information\n
\n
\n
WARRANTY \n
\n {utils.text.isNumeric(product.warranty)\n ? `Backed by a ${product.warranty} year warranty`\n : product.warranty.toLowerCase().indexOf(\"backed\") >= 0\n ? product.warranty\n : `Backed by a ${product.warranty.toLowerCase()} warranty`}\n
\n
\n
BARCODE \n
{product.barcode}
\n
\n );\n}\n\n// function TechSpecTab({ product }) {\n// const section = product.specSection || [];\n// return (\n// \n// \n// );\n// }\n\nfunction Booklet({ bookletLink }) {\n //const bookletTitle = utils.url.getFilename(bookletLink);\n return (\n \n );\n}\n\nfunction RecipeBooklet({ recipeBookletLink }) {\n //const bookletTitle = utils.url.getFilename(recipeBookletLink);\n return (\n \n );\n}\n// function TechSpecs(items) {\n// console.log(items)\n// const specs = items.filter(x => x.itemTypeCode === \"spec\").map(x => JSON.parse(x.itemValue));\n// console.log(specs)\n// const left = specs.filter(x => x.category !== 'R')\n// const right = specs.filter(x => x.category === 'R')\n// if (right.length === 0) {\n// // render all - men\n// const splitLefts = [], splitRights = []\n// left.forEach((x, index) => index % 2 === 0? splitLefts.push(x) : splitRights.push(x) )\n// return (\n// \n//
\n// {splitLefts.map((x, index) => (
{x.label} : {x.text}
))}\n//
\n//
\n// {splitRights.map((x, index) => (
{x.label} : {x.text}
))}\n//
\n//
\n//
\n// {left.map((x, index) => (
{x.label} : {x.text}
))}\n//
\n//
\n// {right.map((x, index) => (
{x.label} : {x.text}
))}\n//
\n//
\n // \n //
\n // \n //
\n // \n //
\n // \n //
\n // \n // );\n const section = product.seeMoreSection || [];\n const blogs = [],\n instagrams = [];\n const pre = [],\n post = [],\n tiktoks = [];\n const empty = [0, 1, 2, 3, 4];\n\n let hasInstaOrBlog = false;\n section.forEach((item) => {\n let processed = false;\n if (item.itemTypeCode === \"link\") {\n const link = JSON.parse(item.itemValue);\n if (link.url && link.url.indexOf(\"instagram.com\") >= 0) {\n hasInstaOrBlog = true;\n processed = true;\n instagrams.push(item);\n } else if (\n link.linkType === \"blog\" ||\n link.linkType === \"page\" ||\n link.linkType === \"web\"\n ) {\n hasInstaOrBlog = true;\n processed = true;\n if (link.title !== \"\") {\n blogs.push(item);\n }\n } else if (link.linkType === \"tiktok\") {\n hasInstaOrBlog = true;\n processed = true;\n tiktoks.push(item);\n }\n }\n if (!processed) {\n if (hasInstaOrBlog) {\n post.push(item);\n } else {\n pre.push(item);\n }\n }\n });\n return (\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n}\n\n// function ReviewTab({ product }) {\n// return Coming...
\n// }\n\nfunction ItemList({ section }) {\n //console.log(section)\n return (\n \n {section.map((item, index) => (\n \n );\n}\n\nfunction ItemView({ item }) {\n //console.log(item, item.itemTypeCode, item.itemTypeCode === 'html')\n if (item.itemTypeCode === \"html\") {\n return
;\n }\n if (item.itemTypeCode === \"video\") {\n const video = JSON.parse(item.itemValue);\n\n if (video.video) {\n return (\n \n );\n } else {\n return (\n \n );\n }\n }\n if (item.itemTypeCode === \"link\") {\n // let link = JSON.parse(item.itemValue);\n // let title = link.title;\n // if (!link.title) {\n // title = (link.url || \"\").split(\"/\").pop();\n // }\n // if (link.url && link.url.indexOf(\"instagram.com\") >= 0) {\n // return (\n // \n //
\n // );\n // }\n // if (link.linkType === \"blog\" || link.linkType === \"page\") {\n // return \n // \n // {title}\n // \n //
\n // );\n // }\n // return (\n // \n //
\n // {title}\n // \n // \n {env.instagramUseFirst === \"embed\" && link.instagramEmbed ? (\n
\n
\n );\n }\n if (link.linkType === \"blog\" || link.linkType === \"page\") {\n return \n \n {title}\n \n
\n );\n }\n if (link.url && link.url.indexOf(\"http\") >= 0 && link.imageUrl) {\n return (\n \n {spec.label} : {spec.text}\n
\n );\n }\n return
;\n}\n\nfunction Empty() {\n return (\n \n );\n}\n\nfunction PageTile({ page }) {\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n return (\n \n \n
\n
{page.title}
\n
{page.tileDesc}
\n
VIEW RECIPE
\n
\n
\n \n // \n // ]}\n key={popupIndex}\n onOpen={(e) => {\n }}\n />\n
\n );\n}","import React from 'react';\nimport { useRouter } from './components';\nimport { useHistoryStore } from './components';\nimport { useParallax } from './components';\nimport utils from './utils';\n\nexport function AppRouteChanged() {\n const { path } = useRouter();\n const parallax = useParallax();\n const history = useHistoryStore();\n \n React.useLayoutEffect(() => {\n console.log('route changed', path)\n if (typeof window !== `undefined`) {\n parallax.reset();\n const hash = window.location.hash;\n history.push({path: path})\n \n if (hash) { \n setTimeout(() => {\n const anchor = utils.ui.findElement(hash);\n if (anchor)\n utils.ui.scrollTo(anchor, 500);\n }, 500)\n } else {\n window.scrollTo(0, 0);\n }\n }\n // eslint-disable-next-line\n }, [path]);\n\n return null;\n}\n","import React, { lazy, Suspense } from 'react';\nimport { Loading } from \"../../components\";\nconst GourmetPro = lazy(() => import('./gourmetPro'));\n\nexport function GourmetProLoading(props) {\n return (\n \n
\n );\n}","import React from 'react';\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useRouter } from './components';\nimport { StoreProvider } from './store';\nimport { ViewPage } from './cms/pages/viewPage/viewPage';\nimport { EditPage } from './cms/pages/editPage/editPage';\nimport { TopHeader } from './layout/topHeader/topHeader';\nimport { Footer } from './layout/footer/footer';\nimport { BottomDock } from './layout/bottomDock/bottomDock';\nimport { ProductView } from './site/product/productView';\n// import { BlogView } from './site/blog/blogView';\nimport { AppVersionPage } from './components';\nimport { MediaQueryStatus } from './components';\nimport { CommonVideoPopup } from \"./layout/popup/commonVideoPopup\";\nimport { HelmetProvider } from 'react-helmet-async';\n//import { useScrollPosition } from '@n8tb1t/use-scroll-position';\nimport { AppRouteChanged } from './AppRouteChanged';\nimport { checkUpdate } from './lib/service-worker/swHelper';\nimport { GourmetProLoading } from \"./site/gourmetPro/gourmetProLoading\";\n\nfunction AppLayout(props) {\n const { pathname } = useRouter();\n\n React.useEffect(() => {\n const fetchData = async () => {\n await checkUpdate(); \n }\n fetchData();\n }, [pathname]);\n\n //const [scrolled, setScrolled] = useState(false)\n //const path = usePath();\n //const routeResult = useRoutes(routes);\n\n // const parallax = useParallax();\n // //console.log(path, routeResult);\n // const routeChanged = (path) => {\n // //console.log(path);\n // parallax.reset();\n // }\n\n // useScrollPosition(({ prevPos, currPos }) => {\n // //console.log(currPos.x)\n // //console.log(currPos.y);\n // if (currPos.y > 90) {\n // document.querySelector('body').classList.add('scrolled')\n // } else {\n // document.querySelector('body').classList.remove('scrolled')\n // }\n // //setScrolled(currPos.y > 90)\n // }, [], null, true)\n\n //const pageChanged = useCallback(path => routeChanged(path), [])\n //useLocationChange((path) => { routeChanged(path, history)})\n //useLocationChange(path => routeChanged(path))\n \n //const pathFiltered = (pathname || '').toLocaleLowerCase();\n let specialClassName = '';\n// if (pathFiltered.indexOf('/digital-sensor') >= 0) specialClassName = 'digital-sensor-page';\n// else if (pathFiltered === '/brilliance') specialClassName = 'brilliance-page';\n\n return (\n \n
\n
\n
\n
\n \n \n \n \n \n \n
\n {/*
*/}\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nlet serviceUpdateCheckerInterval = null;\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl, {updateViaCache: 'none'})\n .then(async registration => {\n // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration\n console.log('Service Worker registration successful with scope: ', registration.scope);\n if (registration && registration.waiting) {\n registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n }\n \n // Regular checking service worker\n if (serviceUpdateCheckerInterval) { try { clearInterval(serviceUpdateCheckerInterval) } catch (e) { } }\n serviceUpdateCheckerInterval = setInterval(() => {\n console.log('Checking SW updates...')\n registration.update();\n }, 1/*hour(s)*/ * 10/*minutes*/ * 60 * 1000);\n\n window.updateSW = function() {\n console.log('Checking SW updates... (force)')\n return registration.update();\n }\n \n // When the user asks to refresh the UI, we'll need to reload the window\n var preventDevToolsReloadLoop = false;\n \n const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state;\n console.log(oldSw, registration)\n navigator.serviceWorker.addEventListener('controllerchange', async function (ev) {\n const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state;\n console.log('Service Worker controller change', ev)\n console.log(oldSw, newSw)\n // Ensure refresh is only called once.\n // This works around a bug in \"force update on reload\".\n if (preventDevToolsReloadLoop) return;\n \n\n if(oldSw === 'activated' && newSw === 'activating') {\n preventDevToolsReloadLoop = true;\n console.log('Reloading...')\n window.location.reload();\n }\n\n //window.location.reload();\n });\n\n registration.onupdatefound = () => {\n console.log('registration.onupdatefound', registration.installing)\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n console.log('Reloading... No SW found')\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\nimport './polyfill';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './_scss/index.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\nimport { forceUpdateFlagged, markUpdate } from './lib/service-worker/swHelper';\n\nReactDOM.render(\n
\n \n \n {product.productName}\n {/*
*/}\n
\n {product.priceText ? product.priceText : ''}\n
\n\n \n
*/}\n 
\n })
\r\n {item.type === 'video' && 
\n 
\n 
\n ![\"\"](\"/assets/social/instagram.png\")
![\"\"](\"/assets/social/youtube.png\")
\n 
\n 
\n {/* */}\n 
{\n setCurruentStep((c) => c - 1);\n }} />\n }\n\n {\n stepId !== 'step6' &&\n 
{\n setCurruentStep((c) => c + 1);\n }} />\n }\n 
![\"logo\"](\"/assets/logos/logo.png\"){kind=logo}
\n 
\n ![\"watch](\"/assets/watch.png\")
\n 
\n