\n )\n }\n else\n return (\n {controls}
\n )\n}\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function BlogPosts(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const posts = getPages(cmsUtils.payload(item, 'BlogPosts'));\n const numOfTileLines = parseInt(cmsUtils.payload(item, 'NumOfTileLines', '2'));\n //console.log(numOfPost, parseInt(numOfPost));\n //console.log(posts);\n const bp = utils.ui.getCurrentBreakpoint();\n const tilesPerLine = {xs:1, sm:1, md:2, lg:2, xl:3, xxl:4}\n const numOfPost = numOfTileLines * (tilesPerLine[bp] || 3);\n const step = numOfPost;\n console.log(bp, numOfTileLines, tilesPerLine, numOfPost)\n\n const [tilesToShow, setTilesToShow] = React.useState(numOfPost);\n\n const displayingPosts = posts.length > tilesToShow ? posts.slice(0, tilesToShow) : posts;\n const showMore = posts.length > displayingPosts.length;\n\n const pageTileElts = displayingPosts.map((page, index) =>\n \n {pageTileElts}\n
\n {showMore && (\n { setTilesToShow(tilesToShow + step) }}>LOAD MORE
)}\n \n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n return (\n \n
\n
\n \n
\n
\n {page.pageTitle}\n
\n
\n {page.tileDesc || page.description}\n
\n
READ MORE
\n
\n
\n
\n
\n {postDate}\n
\n
\n {title}\n \n
\n {subItemsElts}\n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { YoutubeEmbedPopup } from '../../../components';\n\nexport function VideoItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n console.log('item', item);\n\n const youtubeCode = cmsUtils.payload(item, 'YoutubeCode');\n const posterFrameUrl = cmsUtils.payload(item, 'PosterFrameUrl');\n const captionTitleYoutube = cmsUtils.payload(item, 'CaptionTitleYoutube');\n const shortDesc = cmsUtils.payload(item, 'ShortDesc');\n\n const cssClass = utils.classNames('cms_item', 'videoItem', item.cssClass || item.anchorName || '');\n\n return (\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 \n PhotoGallery\n
\n \n\n
\n {\n _thumbImages.map((item, index) =>\n
{\n e.preventDefault();\n e.stopPropagation();\n setToggler(!toggler);\n setPopupIndex(index);\n }}>\n
\n
\n )\n \n }\n
\n
\n
\n { title }\n \n
\n { rating }\n
\n {/* style={{ flexBasis: props.desH + \"px\" }} */}\n
\n { desc }\n
\n
\n { bottom }\n \n
\n \n { testimonialItems }\n \n
\n );\n}","import { css } from '@emotion/core'\n//import { mq } from '../../cssInJs'\nexport default{\n exTextItem : css({\n overflow:'hidden',\n maxHeight:'0',\n transition: 'all 0.8s',\n padding: '0px',\n '&.expand' : {\n maxHeight:'40000px',\n padding: '1rem 0'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n//import React from 'react';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport utils from '../../utils';\nimport style from './style';\nimport { Item } from '../../cms/items/item';\n\nexport function ExpandablePanel(props){\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n \n let bgUrl = null;\n\n if (imageUrl){\n bgUrl = utils.site.resourcePath(imageUrl);\n }\n else if (backgroundTile){\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n }\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'expandablePanel', cmsOption.isCmsEdit && 'expandablePanel_item_cms', item.cssClass || item.anchorName || '');\n const subItemsElts = subItems.map((subItem, index) =>\n \n
\n \n {subItemsElts}\n
\n \n )\n}","import { css } from '@emotion/core';\nimport { variables, mq } from '../../../cssInJs';\n\nconst numberOfTiles = [1, 2, 3, 4]\n//const marginLR = [14, 14, 14, 14]\nconst marginTB = [14, 14, 14, 14]\n\nconst widthPercent = (index) => 100 / numberOfTiles[index] + '%'\n\nconst linkText = {\n color: variables.fontColor,\n fontSize: '0.8rem',\n //padding: '0 20px',\n // '&:hover': {\n // color: variables.fontColor,\n // }\n}\n\nexport const tileListStyle = {\n tiles: 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 marginLeft: '-15px',\n marginRight: '-15px'\n //maxWidth:['960px'],\n //margin: 'auto'\n }),\n categoryList : mq({\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 //maxWidth:['960px'],\n //margin: 'auto',\n 'div.ff.form-group' : {\n maxWidth: '250px'\n }\n }),\n container : mq({\n maxWidth: '960px',\n margin: 'auto'\n })\n}\n\nexport const tileStyle = {\n tile: 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 paddingLeft : '15px',\n paddingRight : '15px',\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: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexBasis: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexGrow: 0,\n flexShrink: 0\n }),\n tileLink: {\n background: '#fff',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n //padding: 5,\n //border: '1px solid red',\n '&:hover': {\n textDecoration: 'none',\n //background: '#f3f3f3'\n '& .buyNowBtn' : {\n backgroundColor: variables.blueGray,\n color: 'white',\n fontWeight: 700\n },\n '& .bgImage' : {\n transform: 'scale(1.02)'\n }\n }\n },\n prdImage: {\n //padding: '0 5px',\n //maxWidth: '190px',\n //margin: 'auto',\n //width: '100%',\n //backgroundColor: 'grey',\n //overflow: 'hidden'\n },\n bg: {\n //height: 0,\n //paddingBottom: '100%',\n //paddingTop: '210px',\n paddingTop: '100%',\n //backgroundPosition: 'center top',\n backgroundPosition: 'center',\n //backgroundSize: 'cover',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n transition: 'all .2s ease-in-out'\n },\n shortDes : css({\n //textAlign:'center',\n //marginTop: '0.8rem',\n fontSize:'0.7rem',\n marginTop: '0.5rem',\n marginBottom : '0.5rem',\n color : variables.fontColor,\n lineHeight: '1'\n }),\n name: css(linkText, {\n //fontWeight: 'bold',\n fontFamily: variables.familyHeader,\n //textAlign:'center',\n lineHeight: '1',\n //marginTop: '0.5rem',\n //color:variables.primaryColor,\n color: variables.blueGray,\n fontSize:'1.25rem'\n }),\n price: css(linkText, {\n //marginTop: 'auto',\n //textAlign:'center',\n //marginBottom:'1rem',\n //fontWeight:'700',\n fontSize:'1rem',\n flex:'1 0 auto',\n color:variables.darkGray\n }),\n desContainer : {\n backgroundColor: '#f8f8f8',\n padding: '0.8rem',\n flexDirection: 'column',\n height: '100%',\n display: 'flex',\n marginTop: '0.5rem',\n textAlign:'center'\n },\n buyNowButton : {\n border: '1px solid ' + variables.blueGray,\n color:variables.blueGray,\n textAlign: 'center',\n marginTop: '0.5rem',\n paddingTop: '0.1rem',\n paddingBottom:'0.1rem',\n fontWeight: 700\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\nimport { tileStyle } from './productTileStyle';\n//import utils from '../../../utils';\n\nexport function ProductTile({ product }) {\n const s = tileStyle;\n const imageUrl = product.thumbnailUrl ? utils.site.resourcePath(product.thumbnailUrl) : '/assets/product-empty.png';\n //console.log(\"product : \", product)\n const productUrl = product.productUrl ? product.productUrl : `/shop/${product.productSlug}`;\n return (\n \n
\n \n \n \n \n \n
\n {product.productName}\n
\n \n
\n {/* {product.shortDesc} */}\n
\n \n
\n {\n product.productStatus !== 0 ? product.productStatusText :\n product.priceTextOveriding ? product.priceTextOveriding : 'AU' + utils.money.formatMoney(product.priceIncTax)\n }\n
\n\n {\n product.productStatus === 0 &&\n
\n BUY NOW\n
\n }\n\n
\n
No products
;\n}\n\nfunction Items({ items, categories, defaultCategories }) {\n const s = tileListStyle;\n const defaultCategoriesArray = (defaultCategories && defaultCategories !== '') ? defaultCategories.split(',') : [];\n\n const model = getCategoryListModel(categories, defaultCategoriesArray);\n const categoryListForm = useForm(model, { usePlaceholder: true, onControlChanged: orderItemChanged });\n\n const [showProducts, setShowProducts] = useState(() => {\n if (defaultCategoriesArray.length === 1) {\n let _items = [];\n let _items2 = JSON.parse(JSON.stringify(items));\n _items = _items2.filter(item => {\n for (let i in item.productCategories) {\n if (item.productCategories[i].categoryId === defaultCategoriesArray[0]) {\n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n return false;\n });\n\n sortProudcts(_items);\n return _items;\n }\n return items;\n });\n\n function orderItemChanged(e, control) {\n if (control && control.name === 'categoryList') {\n console.log('controll value', control.value);\n let _items = [];\n if (control.value && control.value !== '') {\n _items = items.filter(item => {\n if (control.value === '_favourites_') {\n if (localStorage.favorites !== \"\") {\n if (localStorage.favorites.includes(item.productId)) {\n return true;\n }\n }\n }\n else {\n for (let i in item.productCategories) {\n if (item.productCategories[i].categoryId === control.value) {\n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n }\n return false;\n });\n }\n else {\n _items = items;\n }\n //sort\n sortProudcts(_items);\n setShowProducts(_items);\n }\n }\n\n const render = (name) => categoryListForm.renderControl(name, null);\n return (\n \n \n {render('categoryList')}\n
\n \n {/* {items.map((item, index) =>
)} */}\n {\n showProducts.length > 0 ? showProducts.map((item, index) =>
)\n :
No product
\n }\n
\n )\n}\n\nfunction sortProudcts(items) {\n items.sort((a, b) => {\n return a.seqInCategory - b.seqInCategory;\n });\n}","import { fb } from '../../../lib/form';\nexport function getCategoryListModel(data, defaultCategories) {\n\n var options = []; //{name : 'Favourites', value : '_favourites_'}\n\n if (data.length > 0) {\n \n let _allCategory = null;\n data.forEach(el => {\n if (el.categoryName.toLowerCase() !== 'hair products' && el.categoryName.toLowerCase() !== 'all') {\n options.push({ name: el.categoryName, value: el.categoryId });\n }\n\n if(el.categoryName.toLowerCase() === 'all'){\n _allCategory = { name: el.categoryName, value: el.categoryId };\n }\n\n });\n\n if(_allCategory !== null){\n options.unshift(_allCategory);\n }\n\n }\n\n let categoryList = \"\";\n if (defaultCategories.length > 0) {\n categoryList = defaultCategories[0];\n }\n\n const model = fb.group({\n categoryList: [categoryList, [], {\n label: 'FILTER BY',\n type: 'select',\n options: options\n }]\n });\n return model;\n}","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nconst step = css(mq({\n flex: '0 0 100%',\n opacity: 0,\n padding: '2rem 1rem 2rem',\n // maxHeight: '300px',\n transition: 'all 0.3s',\n}))\n\nexport default {\n cart: css({\n position: 'relative',\n margin: 'auto',\n marginBottom: '3rem',\n textAlign: 'left'\n }),\n\n stepsWrapper: css({\n overflow: 'hidden',\n }),\n steps: css({\n display: 'flex',\n transition: 'all 1s cubic-bezier(0.22, 0.61, 0.36, 1)',\n '& h3, & h4': {\n textTransform: 'uppercase'\n }\n }),\n step,\n stepCurrent: css(step, {\n // maxHeight: '2000px',\n opacity: 1,\n background: 'rgba(255,255,255,0.5)',\n }),\n stepPrev: css(step, {}),\n stepNext: css(step, {}),\n stepLast: css({\n //maxHeight: '1000px',\n opacity: 1\n }),\n\n}\n","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nconst navs = {\n navs: css(mq({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderBottom: 'solid 1px #ccc',\n marginBottom: 8,\n background: 'rgba(255,255,255,0.9)',\n //background: 'linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(255,255,255,1) 100%)',\n })),\n nav: css(mq({\n //width: 20,\n //height: 30,\n padding: '0.9rem 1rem',\n fontSize: '1.1rem',\n position: 'relative',\n flex: '1 1 auto',\n textAlign: 'center',\n })),\n navArrow: {\n },\n navCurrent: css({\n //color: 'white',\n //backgroundColor: variables.primaryColor\n //background: 'linear-gradient(0deg, rgba(34,45,100,1) 0%, rgba(89,102,166,1) 100%)',\n //borderBottom: 'solid 2px ' + variables.primaryColor\n //background: '#ddd',\n fontWeight: 'bold',\n //background: 'linear-gradient(0deg, rgba(0,0,0,0.08) 0%, rgba(255,255,255,1) 100%)',\n backgroundColor:'#eee',\n color:'#3b3b3b'\n //borderBottom: 'solid 2px ' + variables.primaryColor\n }),\n navFilled: css({\n //backgroundColor: '#666'\n }),\n navClickable: css({\n cursor: 'pointer'\n })\n}\n\nexport default {\n\n arrow: css(mq({\n position: \"absolute\",\n cursor: 'pointer',\n color: '#aaa',\n transition: 'all 0.3s',\n zIndex: '1',\n // xs, sm(>=576), md(>=768), lg(>=992), xl(>=1200), xxl(>=1600)\n top: 0,\n // [mqMax.md]: {\n // width: 100\n // },\n width: [20, 25, 30, 40],\n '&:hover': {\n color: '#666'\n }\n })),\n arrowPrev: css(mq({\n left: [-15, 0]\n })),\n arrowNext: css(mq({\n right: [-15, 0]\n })),\n\n ...navs\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './stepStyle';\nimport React from 'react';\n\nimport { FaAngleRight } from 'react-icons/fa';\n\t\n\n\nexport function StepNav({ stepInfo }) {\n const { steps, currentStep, moveTo, canGo } = stepInfo;\n\n //if (currentStep === steps.length - 1) return null;\n return \n {steps.filter(x => x.id !== 'thanks').map((step, index) =>\n
\n moveTo(index)}\n >\n {step.title}\n\n \n {\n cart.shippingMethod === \"Standard\" &&\n
\n Shipping
\n AU {formatMoney(cart.shippingAmount)}
\n \n }\n
Total Amount
\n
AU {formatMoney(cart.totalAmount)}
\n {/*
\n
Total:
\n
AU {formatMoney(cart.itemAmount)}
\n
\n
\n
GST:
\n
AU {formatMoney(cart.taxAmount)}
\n
*/}\n {/*
\n
Shipping:
\n
\n Method not selected yet \n Pickup - FREE \n {{cart.shippingAmount > 0? 'AU ' + formatMoney(cart.shippingAmount) : 'FREE'}} \n
\n
\n
\n
\n
\n {{cart.shippingMethod == ''? 'Please select Shipping Option.': 'AU ' + formatMoney(cart.totalAmount)}} \n
\n
\n */}\n
{\n options\n .map(x => \n \n {x.Name}: \n {x.Value} \n \n )\n .reduce((acc, x) => acc === null ? x : {acc}, {x} , null)\n }
\n }\n\n const orderItems = cart.orderItems.filter(x => x.orderItemType === 0)\n const taxLines = cart.orderItems.filter(x => x.orderItemType === 1)\n\n return \n
\n
\n
\n
\n
\n Next \n
\n
\n
\n
\n \n {\n val.shippingMethod !== '' &&\n
\n \n Next \n \n
\n \n }\n\n
\n
\n
\n {render('firstName')}\n
\n
\n {render('surname')}\n
\n
\n
\n
\n {render('street1')}{render('street2')}\n
\n
\n
\n
\n {render('suburb')}\n
\n
\n {render('state')}\n
\n
\n {render('postcode')}\n
\n
\n
\n
\n {render('email')}\n
\n
\n {render('mobile')}\n
\n
\n
\n
\n
\n
Pay by Credit Card \n\n
\n
\n
\n Payment through encrypted gateway can be made by Visa, Mastercard or AMEX. Please enter your credit card details to complete your order. \n For alternative payment methods please contact us \n
\n
\n\n
\n\n
\n
\n
\n
\n Pay Now \n
\n
.\n card.mount('#card-element');\n\n // Handle real-time validation errors from the card Element.\n card.addEventListener('change', function (event) {\n if (event.error) {\n setError(event.error.message);\n } else {\n setError(null);\n }\n });\n\n return { stripe, card };\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './cartStyle';\nimport React from 'react';\n\n//import { SiteLink } from '../../../components';\n\nimport env from '../../../env';\nimport { useGet, usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Loading, ErrorPopup } from '../../../components';\n\nimport { useStep } from './useStep';\nimport { StepNav } from '../cartStep/stepNav';\n\nimport { OrderItems } from '../cartOrderItems/orderItems';\nimport { getOrderItemFormData } from '../cartOrderItems/orderItemFormData'\nimport { Shipping } from '../cartShipping/shipping'\nimport { getShippingFormData } from '../cartShipping/shippingFormData';\nimport { Pay } from '../cartPayment/pay';\nimport utils from '../../../utils';\n\nexport function Cart() {\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const [cart, setCart] = React.useState(null);\n\n const get = useGet();\n\n React.useEffect(() => {\n get.send(env.apiBase + '/api/cart/getCart/' + env.getDevCartId());\n setSendingStatus('pending')\n // eslint-disable-next-line\n }, []);\n\n if (get.loading()) {\n return
\n } else if (get.hasErrors()) {\n return
\n }\n\n if (sendingStatus === 'pending') {\n setCart(get.response)\n setSendingStatus(null)\n }\n\n if (!cart || cart.cartInfo.totalQuantity === 0){\n return
\n }\n return
\n}\n\nfunction CartView({ cart, setCart }) {\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const [goNext, setGoNext] = React.useState(false);\n const post = usePost();\n const stepInfo = useStep([\n { id: 'orderItems', title: 'Cart' },\n { id: 'shipping', title: 'Your Details' },\n { id: 'payment', title: 'Pay' }\n ])\n const { steps, currentStep, lastStep, moveNext, markAsFilled } = stepInfo;\n\n const orderItemForm = useForm(getOrderItemFormData(cart), { onControlChanged: orderItemChanged });\n const shippingForm = useForm(getShippingFormData(cart), { onControlChanged: orderItemChanged });\n\n function orderItemChanged(e, control) {\n if (control && control.name === 'quantity') {\n const index = orderItemForm.findControl('items').findIndexById(control.parent.id);\n const orderItem = cart.orderItems[index]\n const value = { qty: control.value, orderItemId: orderItem.orderItemId, cartId: env.getDevCartId() };\n post.send(env.apiBase + \"/api/cart/updateQty\", value);\n setSendingStatus('pending')\n setGoNext(false)\n }\n else if(control && (control.name === 'shippingMethod' || control.name === 'shippingCountry')){\n shippingForm.findControl(\"useSameAddress\").value = false;\n if(control.value === 'Standard'){\n shippingForm.findControl(\"useSameAddress\").value = true;\n }\n const value = { ...shippingForm.getValue(), cartId: env.getDevCartId() };\n post.send(env.apiBase + \"/api/cart/saveShippingInfo\", value);\n setSendingStatus('pending');\n setGoNext(false);\n }\n }\n\n function remove(e, index) {\n console.log(index)\n const orderItem = cart.orderItems[index]\n const value = { orderItemId: orderItem.orderItemId, cartId: env.getDevCartId() };\n post.send(env.apiBase + \"/api/cart/removeItem\", value);\n setSendingStatus('pending')\n setGoNext(false)\n }\n\n function saveShipping(e) {\n //const value = { ...shippingForm.getValue(), useSameAddress: true, cartId: env.getDevCartId() };\n const value = { ...shippingForm.getValue(), cartId: env.getDevCartId() };\n //console.log(\"valu\", value);\n post.send(env.apiBase + \"/api/cart/saveShippingInfo\", value);\n setSendingStatus('pending');\n setGoNext(true);\n }\n \n React.useEffect(() => { \n if (post.done() && sendingStatus === 'pending') {\n const cart = post.response.results.cartModel;\n setSendingStatus(null)\n setCart(cart);\n if (goNext) {\n markAsFilled(currentStep);\n moveNext();\n }\n }\n // eslint-disable-next-line\n }, [post, currentStep])\n\n const stepStyle = (index) => {\n const locStyle = index === currentStep ? style.stepCurrent : (\n index === currentStep - 1 ? style.stepPrev : (\n index === currentStep + 1 ? style.stepNext : style.step))\n const movingStyle = index === lastStep ? style.stepLast : null;\n return [locStyle, movingStyle];\n }\n\n\n const next = () => {\n markAsFilled(currentStep);\n moveNext();\n utils.ui.scrollTo('#ecmcart');\n }\n \n return
\n
\n
\n
\n {steps.map((step, index) => {\n let stepView = null\n switch (step.id) {\n case 'orderItems': stepView =
; break;\n case 'shipping': stepView =
; break;\n case 'payment': stepView =
; break;\n default: break;\n }\n return (\n
\n {stepView}\n
\n )\n })}\n
\n
\n
;\n}\n\nfunction EmptyCart() {\n return
\n
\n
Your cart is empty. \n \n
;\n}","import React from 'react';\n\nexport function useStep(initialSteps){\n const [steps, setSteps] = React.useState(initialSteps);\n const [currentStep, setCurrentStep] = React.useState(0);\n const [lastStep, setLastStep] = React.useState(0);\n\n const moveNext = () => {\n moveTo(currentStep < steps.length ? currentStep + 1 : currentStep)\n }\n\n const movePrev = () => {\n moveTo(currentStep > 0 ? currentStep - 1 : 0)\n }\n\n const moveTo = (index) => {\n if (!canGo(index)) return\n setLastStep(currentStep)\n setCurrentStep(index)\n // if (!utils.ui.isElementInViewport(navEl.current)) {\n // utils.ui.scrollTo(navEl.current)\n // }\n }\n\n const markAsFilled = (index) => {\n if (!steps[index]) return;\n steps[index].filled = true;\n setSteps(steps);\n }\n \n function canGo(index) {\n if (steps[index] && steps[index].filled) return true;\n const maxIndexFilled = Math.max(...steps.map((x, i) => x.filled ? i : -1));\n return index <= maxIndexFilled + 1\n }\n\n function canGoNext() {\n return currentStep < steps.length && canGo(currentStep + 1)\n }\n\n function canGoPrev() {\n return currentStep > 0 && canGo(currentStep - 1)\n }\n\n return { steps, setSteps, currentStep, lastStep, moveTo, moveNext, movePrev, markAsFilled, canGo, canGoNext, canGoPrev}\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { ProductItems } from '../../../site/ecm/productList/productItems';\nimport { Cart } from '../../../site/ecm/cart/cart';\n\nexport function EcmItems(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n console.log('item', item);\n\n const cssClass = utils.classNames('cms_item', 'ecm', item.cssClass || item.anchorName || '');\n\n return cmsOption.isCmsEdit ?
\n Type: {item?.itemTypeCode} \n :
\n
;\n}\n\nfunction ItemBranch({ item }) {\n const typeCode = item?.itemTypeCode;\n\n if (typeCode === 'Ecm-ShoppingCart') {\n return
\n }\n else if (typeCode === 'Ecm-ProductList') {\n const categories = cmsUtils.payload(item, 'SelectedCategories');\n return
\n }\n return
;\n}","import React from 'react';\nimport utils from '../../utils';\nimport { items } from '../../site/_cmsItems/items-generated';\nimport cmsUtils from '../utils/cmsUtils'\nimport { BannerPanel } from './bannerPanel/view';\nimport { BannerItem } from './bannerItem/view';\nimport { Panel } from './panel/view';\nimport { Html } from './html/view';\n// import { TestimonialPanel } from './testimonialPanel/view';\n// import { TestimonialItem } from './testimonialItem/view';\nimport { ImagePanel } from './imagePanel/view';\nimport { PageTiles } from './pageTiles/view';\nimport { PageTilesBsyc } from '../../components/tiles/bsyc/view';\nimport { SingleBanner } from './singleBanner/view';\nimport { ContactForm } from './contactForm/view';\nimport { VideoPanel } from './VideoPanel/view';\nimport { Code } from './code/view';\nimport { BlogPosts } from './blogPosts/view';\nimport { BlogPostTitle } from './blogPostTitle/view';\nimport { VideoHolder } from './videoHolder/view';\nimport { VideoItem } from './videoItem/view';\nimport { MultiColumnPanel } from './multiColumnPanel/view';\nimport { ExpandableHtml } from './expandableHtml/view';\nimport { PhotoGallery } from '../../components/photoGallery/view';\nimport { TestimonialPanel } from '../../components/testimonial/index';\nimport { ExpandablePanel } from '../../components/expandablePanel/view';\nimport { EcmItems } from './ecm/view';\n\n//import { PrintShare } from './printShare/view';\n\nexport function Item(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n let itemElt = null;\n\n const found = utils.array.find(items, (x) => x.match(item, cmsOption))\n //console.log(found)\n if (found) {\n return found.itemElt(item, cmsOption)\n }\n\n if (item.itemTypeCode === 'Panel') {\n itemElt = (
);\n } else if (item.itemTypeCode === 'Html') {\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 //Add noreferrer noopener when new window\n $(\"#cke_108_select\").change(function () {\n let _value = $(this).val();\n $(\"#cke_215_textInput\").val(\"\");\n if (_value === \"_blank\") {\n $(\"#cke_215_textInput\").val(\"noreferrer noopener\");\n }\n });\n\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 const $ = window['jQuery'];\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($item.hasClass(\"multiColumnPanelv2\")){\n //$(\".cms_item[data-cms-item-id='\" + itemid + \"']\")\n $item.find(\"div.new__multicolumn__panel__html\").each(function(index){\n $(this).addClass(\"cms_editing_item\");\n });\n }\n\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 //show_hovermenu($item);\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\n if (editor.hasClass(\"new__multicolumn__panel__html\")){\n //$item.attr(\"data-cms-item-id\")\n var dataCmsItemId2 = editor.attr(\"data-cms-item-id2\");\n $(\"div.cms_item[data-cms-item-id2='\" + dataCmsItemId2 + \"']\").attr(\"data-cms-item-id\", \"\");\n editor.attr(\"data-cms-item-id\", dataCmsItemId2);\n }\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 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 if ($item.hasClass(\"new__multicolumn__panel__html\")) { \n htmlChanges.push({\n ItemId: $item.data(\"cms-item-id\"),\n SectionId: \"Content\",\n SectionId2: \"Content2\",\n Content: $(\".cms_item.item__01[data-cms-item-id2='\" + $item.data(\"cms-item-id2\") + \"']\").html(),\n Content2: $(\".cms_item.item__02[data-cms-item-id2='\" + $item.data(\"cms-item-id2\") + \"']\").html()\n });\n }\n else {\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: \"Content\", Content: content });\n }\n }\n });\n return htmlChanges;\n }\n\n getHtml(itemid: any ) {\n const $ = window['jQuery'];\n this.htmlEditor.close();\n var self = this;\n\n var item = $(\".cms_item[data-cms-item-id='\" + itemid + \"']\");\n var formvals = { Content: this.cms_replace_item_html(item) };\n\n if (item.hasClass(\"new__multicolumn__panel__html\")){\n formvals = {\n Content: this.cms_replace_item_html($(\".cms_item.itme__01[data-cms-item-id='\" + itemid + \"']\")),\n Content2: this.cms_replace_item_html($(\".cms_item.itme__02[data-cms-item-id='\" + itemid + \"']\")),\n };\n }\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 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 \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);\n // setTimeout(() => slider.init(), 1000)\n // }, [])\n\n return (\n <>\n \n {/* */}\n {/*
*/}\n \n \n {/*
*/}\n \n );\n}\n","import React from 'react';\nimport { useStore } from '../../store';\nimport FsLightbox from 'fslightbox-react';\n\nexport function CommonVideoPopup(props) {\n const { state } = useStore();\n\n const [toggler, setToggler] = React.useState(false);\n const [sources, setSources] = React.useState([]);\n const [popupIndex, setPopupIndex] = React.useState(0);\n\n const popup = state.popup;\n //console.log(popup, JSON.stringify((popup && popup.sources) || []), JSON.stringify(sources), (popup && popup.popupIndex), popupIndex)\n if (JSON.stringify((popup && popup.sources) || []) !== JSON.stringify(sources) ||\n ((popup && popup.popupIndex) || 0) !== popupIndex) {\n setSources(popup.sources);\n setPopupIndex(popup.popupIndex);\n setTimeout(() => { setToggler(!toggler) }, 10)\n } else {\n\n }\n //console.log(toggler, popupIndex, sources)\n return (\n \n {\n }}\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';\nimport debounce from \"lodash/debounce\";\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 const scrolled = debounce((e) => saveScrollPosition(e, path), 100)\n\n \n history.push({ path: path })\n if (typeof window !== `undefined`) {\n parallax.reset();\n \n const pos = getPreviousPostition(path)\n // console.log('pos', pos)\n if (pos) {\n setTimeout(() => {\n window.scrollTo(pos.scrollLeft, pos.scrollTop)\n }, 500)\n } else {\n const hash = window.location.hash;\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\n }\n\n window.addEventListener('scroll', scrolled)\n return () => {\n window.removeEventListener('scroll', scrolled)\n }\n // eslint-disable-next-line\n }, [path]);\n\n return null;\n}\n\n//#region scroll position store\n\nfunction saveScrollPosition(e, path) {\n if (typeof window === `undefined`) return;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop\n // console.log('save position', path, scrollTop, scrollLeft)\n setPositionData(path, scrollLeft, scrollTop)\n}\n\nfunction getPreviousPostition(path) {\n const dataArr = getPositionData() || []\n // console.log(dataArr.length)\n const pos = getPreviousPostitionInArray(dataArr, path)\n return pos\n}\n\nfunction getPositionData() {\n const dataStr = localStorage.getItem('scrollPosRouter')\n // console.log(dataStr)\n if (dataStr) {\n let data\n try {\n data = JSON.parse(dataStr)\n } catch (e) { return null }\n return data\n }\n return null\n}\n\nfunction setPositionData(path, scrollLeft, scrollTop) {\n const dataArr = getPositionData() || []\n setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop)\n // console.log(dataArr)\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr))\n}\n\nconst MAX_SIZE = 5\nfunction setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop) {\n const same = dataArr.length > 0 && dataArr[dataArr.length - 1].path === path\n if (same) {\n const found = dataArr[dataArr.length - 1]\n found.scrollLeft = scrollLeft\n found.scrollTop = scrollTop\n found.ts = new Date()\n } else {\n if (dataArr.length >= MAX_SIZE) dataArr.shift()\n dataArr.push({\n path: path,\n scrollLeft: scrollLeft,\n scrollTop: scrollTop,\n ts: new Date()\n })\n }\n}\n\nfunction getPreviousPostitionInArray(dataArr, path) {\n const foundIndex = findIndexReverse(dataArr, x => x.path === path)\n // console.log(foundIndex, dataArr.length - 1)\n if (foundIndex >=0 && foundIndex >= dataArr.length - 2) {\n // remove after the index\n if (foundIndex < dataArr.length - 1) {\n dataArr.splice(foundIndex + 1)\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr))\n }\n return dataArr[foundIndex]\n }\n return null\n}\n\nfunction findIndexReverse(list, fn) {\n if (!list) return -1;\n for (let i = list.length - 1; i >= 0 ; i--) {\n if (fn(list[i])) {\n return i;\n }\n }\n return -1;\n}\n//#endregion","//import { css } from '@emotion/core';\nimport variables from '../../../cssInJs/variables';\nimport { mq } from '../../../cssInJs';\nexport default {\n desc: {\n 'p': {\n fontSize: '1rem !important',\n fontFamily: variables.familyBase + ' !important',\n marginBottom: '0.5rem !important',\n lineHeight: '1.1 !important'\n }\n },\n heroImageContainer : mq({\n //textAlign: 'center',\n height: ['320px', '480px'],\n position: 'relative',\n }),\n heroImage : mq({\n //maxWidth: '350px !important',\n //height: '100% !important'\n //maxHeight: ['180px', '340px'],\n height : '100%',\n width : '100%',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n }),\n productPageCol : mq({\n paddingLeft: '45px',\n paddingRight: '45px'\n }),\n productFavorite : {\n cursor: 'pointer',\n '&.checked' : {\n color: 'red'\n }\n },\n productBreadCrumbs : mq({\n padding: '0px',\n listStyle: 'none',\n marginBottom:'0.5rem',\n display: 'block',\n 'li' : mq({\n display:'inline-block',\n marginRight:'1.5rem',\n position: 'relative',\n fontSize:'0.7rem',\n '&:not(:last-child)::after, &.breadCrumb.last-item::after' : {\n content: '\">\"',\n position: 'absolute',\n right: '-1rem'\n },\n '&.breadCrumb::after' : {\n content: '\"|\"',\n position: 'absolute',\n right: '-1rem'\n }\n })\n }),\n productViewImageBg : mq({\n backgroundPosition: 'center',\n backgroundSize: 'contain',\n paddingTop: ['80px', '120px'],\n backgroundRepeat: 'no-repeat',\n marginLeft: '5px',\n marginRight: '5px' \n }),\n productViewImages : mq({\n marginTop: ['1rem', '2rem'],\n paddingBottom: ['1rem', '2rem'],\n marginLeft: '-5px',\n marginRight: '-5px',\n '.slick-prev, .slick-next' : {\n transform: 'none',\n top: '150px',\n '&:before' : {\n color: '#999999'\n }\n },\n '.slick-prev' : {\n left: '150px'\n },\n '.slick-next' : {\n right: '150px'\n }\n }),\n\n productViewImage : {\n //paddingLeft: '5px',\n //paddingRight: '5px'\n outline: 'none',\n cursor: 'pointer'\n },\n\n productViewShortDes : mq({\n fontSize:['1rem'],\n textAlign: 'center',\n }),\n\n productViewTitle : mq({\n fontSize:['1.3rem'],\n textAlign: 'left',\n marginTop:'0px',\n marginBottom:'1rem'\n }),\n\n addToCartBtn : {\n //width: '100%'\n 'button, .btn' : {\n width: '100%',\n fontWeight: 600\n //transform: 'skewX(-12deg)'\n },\n // 'button.gotocartbtn' : {\n // marginTop: '1rem'\n // }\n },\n priceText : {\n fontSize: '0.8rem'\n },\n socialMedia : {\n '.social-icon-text' : {\n fontSize: '0.8rem'\n }\n },\n attributesRow : {\n cursor: 'pointer',\n //marginTop: '0.5rem',\n //marginBottom: '0.5rem',\n paddingTop: '0.2rem',\n paddingBottom: '0.2rem',\n '&:hover' : {\n backgroundColor: '#999999',\n color: 'white'\n },\n '.svgContainer svg' : {\n transition: 'all 0.5s'\n },\n '.svgContainer.open svg' : {\n transform: 'rotate(180deg)'\n }\n },\n\n attrContainer : {\n maxHeight: '0px',\n transition: 'all 0.3s',\n overflow: 'hidden',\n '&.open' : {\n maxHeight: '1000px'\n }\n },\n\n desktopMobile : {\n '&.mobile' : mq({\n display: ['block', 'none']\n }),\n '&.desk__top' : mq({\n display: ['none', 'block']\n })\n },\n quoteContainer : {\n marginBottom: '1rem',\n '.quote__text' : {\n fontSize: '0.8rem',\n marginBottom: '1rem'\n },\n button : {\n //transform: 'skewX(-12deg)'\n }\n },\n enquiryFormContainer : {\n backgroundColor:'rgba(0,0,0,0.3)',\n position: 'fixed',\n top:'0px',\n left:'0px',\n width:'100%',\n height: '100%',\n zIndex:'9999',\n 'form.contactForm' : {\n position: 'absolute',\n width: '100%',\n maxWidth: '900px',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n backgroundColor: 'grey',\n //paddingTop: '2rem',\n paddingLeft: '1rem',\n paddingRight: '1rem',\n margin: '0px',\n '.closeButton' : {\n textAlign: 'right',\n //margin: '1rem 0px',\n cursor: 'pointer',\n color: 'white',\n marginTop: '0.5rem'\n },\n '.enquireNowText' : {\n marginBottom: '0.5rem',\n color: 'white'\n }\n }\n },\n\n ecm__button__container : {\n marginTop : '2rem'\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 Price: {product.priceText ? product.priceText : 'AU ' + utils.money.formatMoney(product.price)} \n
*/}\n\n {/*
*/}\n \n {\n attributes.controls.map(\n (item, index) =>\n {\n //console.log('item', item);\n return(\n
\n \n
\n
{\n setAttributesEx(pre => {\n let _new = {...pre};\n _new[index] = !_new[index];\n return _new;\n });\n }}>\n
\n {item.controls[0].value}\n
\n
\n {item.controls[1].value}\n
\n
\n
\n
\n
\n\n
\n {render(item.controls[0].value.toLowerCase(), item)}\n {/* {render('value', item)} */}\n
\n\n {/*
{render('value', item)}
*/}\n
\n )\n }\n )\n }\n\n
\n
No product found.
\n return (\n \n \n
\n \n );\n}\n\nfunction Product({ product }) {\n console.log(\"product\", product);\n //product.productImages = [];\n // const mainPhoto = product.productImages.length > 0 ? product.productImages[0] : { imageUrl: '/assets/product-empty.png', alt: product.productName };\n //const mainPhoto = {imageUrl: utils.site.resourcePath('/sites/beehive-react/media/products/coastal-flora-1k-hexjar.jpg'), alt: product.productName};\n\n const mainPhoto = product.productImages.length > 0 ?\n { imageUrl: product.productImages[0].imageUrl, alt: product.productImages[0].alt ? product.productImages[0].alt : product.productName } :\n { imageUrl: '/assets/logos/logo.png', alt: product.productName };\n\n const allPhotos = product.productImages || [];\n //console.log(\"aaa\", allPhotos);\n //const otherPhotos = product.productImages.length > 0 ? product.productImages.filter(x => !x.isPackage) : [];\n const popupImages = allPhotos.map(x => x.imageUrl);\n\n const [heroImage, setHeroImage] = React.useState(mainPhoto);\n const [openPopup, setOpenPopup] = useState(false);\n\n const [toggler, setToggler] = React.useState(false);\n //const [popupImages, setPopupImages] = React.useState();\n const [popupIndex, setPopupIndex] = React.useState(0);\n //const shareUrl = utils.site.resourcePath('/product/' + product.productSlug);\n //const heroImageUrl = utils.site.resourcePath(mainPhoto.imageUrl);\n\n const enquiryFormModel = getEnquiryFormModel({});\n const enquiryForm = useForm(enquiryFormModel, { usePlaceholder: true });\n\n const enquiryFormRender = (name) => enquiryForm.renderControl(name, null);\n const post = usePost();\n const [sendingStatus, setSendingStatus] = React.useState(null);\n\n // const [favorite, setFavorite] = React.useState(() => {\n // if (localStorage.favorites.includes(product.productId)) {\n // return true;\n // }\n // return false;\n // });\n\n const breadCrumbs = product.breadCrumbs;\n\n //console.log('favorite', favorite);\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 // return () => {\n // if (typeof window !== `undefined`) {\n // window.removeEventListener('resize', resized)\n // }\n // }\n\n // })\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 var settings = {\n dots: false,\n infinite: allPhotos.length > 2 ? true : false,\n speed: 1500,\n autoplaySpeed: 3000,\n //fade: true,\n autoplay: false,\n slidesToShow: allPhotos.length >= 3 ? 3 : allPhotos.length,\n slidesToScroll: 1\n };\n\n const slides = allPhotos.map((photo, index) => \n
\n setHeroImage(photo)}\n >\n
\n {/*
setHeroImage(photo)} /> */}\n
\n\n
\n {\n openPopup &&\n \n }\n \n\n
\n
\n\n
\n
\n
\n {/*
*/}\n
\n
\n
\n
\n
\n\n {product.description &&
}\n {/* {barcodeCleaned &&
} */}\n {heroImage && heroImage.imageUrl &&
}\n\n
\n\n
\n {/* {breadCrumbs.map((item, index) => {\n\n })} */}\n \n {/*
\n Home \n Shop \n {\n breadCrumbs.map((item, index) =>\n \n {item.categoryPageTitle} \n \n )\n }\n {product.productName} \n */}\n\n
\n\n
\n {/* {\n setFavorite(pre => {\n let _localStorageFavorites = localStorage.favorites.replace(product.productId + \"|\", \"\");\n let _new = !pre;\n if (_new === true) {\n _localStorageFavorites = _localStorageFavorites + product.productId + \"|\";\n }\n localStorage.setItem(\"favorites\", _localStorageFavorites);\n return _new;\n });\n }}> */}\n
\n\n
\n
\n
openPopupImage(heroImage.imageUrl)} />\n
\n\n {\n slides && slides.length > 1 &&\n
\n \n {slides}\n \n
\n }\n\n {/*
\n
\n
\n Like this product but doesn't match your specifications? Click for a custom quote.\n
\n
{\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }}> CUSTOM QUOTE \n
\n\n
\n
SHARE THIS PRODUCT:
\n
\n \n
\n \n
\n
*/}\n\n
\n
\n\n {/*
\n {product.shortDesc}\n
*/}\n\n
\n {product.productName} \n \n\n
\n\n {/*
*/}\n\n {/*
\n Product code: {product.productCode} \n
*/}\n\n {\n product.productStatus === 0 &&\n
\n }\n\n {\n product.productStatus === 100 &&\n
\n {\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }}> ENQUIRE NOW \n
\n }\n\n {\n product.productStatus === 1 &&\n
\n SOLD OUT \n
\n\n }\n\n {\n product.productStatus === 98 &&\n
\n NOT AVAILABLE \n
\n }\n\n {/*
\n
\n
\n Like this product but doesn't match your specifications? Click for a custom quote.\n
\n
{\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }}> CUSTOM QUOTE \n
\n\n
\n
SHARE THIS PRODUCT:
\n
\n \n
\n \n
\n
*/}\n\n
\n
\n
\n
\n
\n\n
\n
\n
RELATED PRODUCTS \n
\n {products.map((product, index) =>\n
\n \n )}\n
\n
\n\n
\n
\n
\n
Order Number: {order.orderNo}
\n
Total Amount: AU {utils.money.formatMoney(order.totalAmount)}
\n
Order Date: {utils.date.formatYYYYMMDD(order.orderDate)}
\n
\n
\n
\n\n
ITEMS \n
\n {orderItems.map((orderItem, i) =>
\n
\n
\n
Unit Price: {utils.money.formatMoney(itemAmount(orderItem))}
\n
\n
\n Qty: {orderItem.quantity}\n
\n
\n )}\n\n
\n
\n Shipping Fee: \n
\n
\n
\n {utils.money.formatMoney(order.shippingAmount)} \n
\n
\n
\n\n {taxLines.map((orderItem, index) => \n
\n
\n Tax: {orderItem.itemName}\n
\n
\n
\n {utils.money.formatMoney(orderItem.unitPrice)} \n
\n
\n
\n )}\n\n
\n
\n
\n Total: AU {utils.money.formatMoney(order.totalAmount)}\n {/*
Item Total: {utils.money.formatMoney(order.itemAmount)}\n + Shipping Fee: {order.shippingAmount > 0 ? 'AU ' + utils.money.formatMoney(order.shippingAmount) : 'FREE'} \n + GST: {utils.money.formatMoney(order.taxAmount)} \n \n
Grand Total (including GST): AU {utils.money.formatMoney(order.totalAmount)}\n
*/}\n
\n
\n
\n\n
\n\n
\n {/*
CONTACT */}\n
\n DELIVERY METHOD\n \n
\n {order.shippingMethod}\n
\n {\n (order.shippingAddress && order.shippingMethod === 'Standard') &&\n
\n }\n
\n
\n
\n
SHIPPING ADDRESS \n
First Name: {addr.firstName}
\n
Surame: {addr.surname}
\n
\n Address: \n {addr.street1} \n {addr.street2} \n
\n
Suburb: {addr.suburb}
\n
State: {addr.state}
\n
Postcode: {addr.postcode}
\n
Email Address: {addr.email}
\n
Mobile: {addr.mobile}
\n
\n
\n
BILLING ADDRESS \n {\n useSameAddress === true && \n
Use the same address
\n }\n {\n (billingAddr && useSameAddress === false) &&\n
\n First Name: {billingAddr.firstName}
\n Surame: {billingAddr.surname}
\n \n Address: \n {billingAddr.street1} \n {billingAddr.street2} \n
\n Suburb: {billingAddr.suburb}
\n State: {billingAddr.state}
\n Postcode: {billingAddr.postcode}
\n Email Address: {billingAddr.email}
\n Mobile: {billingAddr.mobile}
\n \n }\n
Delivery Method \n\n
\n
\n
Pickup
\n
\n
Selected Location \n
\n
{{order.pickupLocation.companyName}}
\n
{{order.pickupLocation.suburb}}, {{order.pickupLocation.state}}
\n
T: {{order.pickupLocation.phone}}
\n
\n
\n
\n
\n {{order.shippingMethod}}\n
\n\n
\n
Shipping/Billing Information \n\n\n
\n
\n
Shipping\n place \n
First Name: {{order.shippingAddress.firstName}}
\n
Surname: {{order.shippingAddress.surname}}
\n
Email: {{order.shippingAddress.email}}
\n
Phone: {{order.shippingAddress.phone}}
\n
Address: {{order.shippingAddress.addressLine}}
\n
Suburb: {{order.shippingAddress.suburb}}
\n
State: {{order.shippingAddress.state}}
\n
Postcode: {{order.shippingAddress.postcode}}
\n
\n
\n
Billing\n place \n
Use the same address
\n
\n
First Name: {{order.billingAddress.firstName}}
\n
Surname: {{order.billingAddress.surname}}
\n
Email: {{order.billingAddress.email}}
\n
Phone: {{order.billingAddress.phone}}
\n
Address: {{order.billingAddress.addressLine}}
\n
Suburb: {{order.billingAddress.suburb}}
\n
State: {{order.billingAddress.state}}
\n
Postcode: {{order.billingAddress.postcode}}
\n\n
\n
\n
\n
Special Request \n\n
\n
\n {{order.specialRequest? order.specialRequest : \"N/A\"}}\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 );\n}\n\nexport default App;","// 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 // onNewServiceWorker(registration, function () {\n // console.log('onNewServiceWorker', registration)\n // alert('New Update Available');\n \n // console.log('User okay to update', registration);\n // if (!registration.waiting) {\n // // Just to ensure registration.waiting is available before calling postMessage()\n // return;\n // }\n // registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n\n // console.log('show refresh')\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 navigator.serviceWorker.ready.then(function (registration) {\n console.log('Service Worker ready');\n });\n}\n\n\n// function onNewServiceWorker(registration, callback) {\n// if (registration.waiting) {\n// console.log('onNewServiceWorker-registration.waiting')\n// // SW is waiting to activate. Can occur if multiple clients open and one of the clients is refreshed.\n// return callback();\n// }\n\n// function listenInstalledStateChange() {\n// console.log('listenInstalledStateChange', registration.installing)\n// registration.installing.addEventListener('statechange', function (event) {\n// console.log('listenInstalledStateChange - statechange', event)\n// if (event.target.state === 'installed') {\n// // A new service worker is available, inform the user\n// callback();\n// }\n// });\n// };\n\n// if (registration.installing) {\n// console.log('onNewServiceWorker-registration.installing')\n// return listenInstalledStateChange();\n// }\n\n// // We are currently controlled so a new SW may be found...\n// // Add a listener in case a new SW is found,\n// registration.addEventListener('updatefound', listenInstalledStateChange);\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';\n\nReactDOM.render( ![\"logo\"](\"/assets/logos/logo.png?v=2\")
\n ![\"logo\"](\"/assets/logos/logo.png?v=1\"){kind=logo}
\n })
\r\n {item.type === 'video' &&