\r\n
\r\n}","export function isExternalLink(link){\r\n return link && (link.indexOf('https://') === 0 || link.indexOf('http://') === 0 || link.indexOf('://') === 0);\r\n}\r\n\r\nexport function getLinkFromElement(el){\r\n if (!el) return null;\r\n const linkEl = el.closest('a');\r\n //console.log(el, linkEl);\r\n if (linkEl){\r\n return linkEl.getAttribute('href');\r\n }\r\n return null;\r\n}\r\n\r\n\r\n// router utils\r\nexport function getLinkInfo(link) {\r\n if (!link) return null;\r\n\r\n const origin = typeof window !== `undefined` && window.location && window.location.origin;\r\n const currentPath = typeof window !== `undefined` && window.location && window.location.pathname;\r\n let linkFiltered = link.replace(origin, '').replace(currentPath + '#', '#');\r\n let linkLower = link.toLowerCase();\r\n\r\n //if (isStaticFile(linkLower)) return null;\r\n const isExternal = isExternalLink(linkFiltered);\r\n const isHash = linkFiltered.indexOf('#') === 0;\r\n const isTel = linkFiltered.indexOf('tel:') === 0;\r\n const isMailTo = linkFiltered.indexOf('mailto:') === 0;\r\n const type = (isHash && 'hash') || (isTel && 'tel') || (isMailTo && 'mailto') || \r\n (isStaticFile(linkLower) && 'static') || (isExternal && 'external') || 'internal';\r\n\r\n return { url: linkFiltered, type: type, ext: getExtension(link) };\r\n}\r\n\r\nvar exts = ['.pdf', '.jpg', '.png', '.gif', '.docx', '.doc']\r\nfunction isStaticFile(path) {\r\n for(let i = 0; i < exts.length; i++) {\r\n if (path.indexOf(exts[i]) >= 0) return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function getExtension(filename) {\r\n if (!filename || filename.indexOf('.') < 0) return null;\r\n return filename.split('.').pop().toLowerCase();\r\n}\r\n\r\nexport function getFilename(url) {\r\n return url.split('/').pop().split('?')[0];\r\n}\r\n\r\nexport function getFolderPath(url, parentDepth = -1) {\r\n return url.split('/').slice(0, parentDepth).join('/');\r\n}\r\n\r\n//\r\nexport function toQueryString(params) {\r\n var queryString = Object.keys(params).map((key) => {\r\n return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])\r\n }).join('&');\r\n return queryString;\r\n}\r\n\r\nexport function getYoutubeId(url){\r\n url = url.split(/(vi\\/|v=|\\/v\\/|youtu\\.be\\/|\\/embed\\/)/);\r\n return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_-]/i)[0] : url[0];\r\n}\r\n\r\nexport function getSlug(text){\r\n return text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\\w-]+/g,'');\r\n}\r\n\r\nexport function getWebUrl(url, schema = 'https://'){\r\n if (!url) return null;\r\n if (url.indexOf('https:') >= 0 || url.indexOf('http:') >= 0 || url.indexOf(':') >= 0) {\r\n return url;\r\n }\r\n return schema + url;\r\n}","//#region error json parsing\r\nexport const getErrors = (result) => {\r\n let errors = [];\r\n if (result && result.errors && result.errors.length > 0) {\r\n result.errors.forEach(err => {\r\n errors.push(err.errorMessage);\r\n });\r\n }\r\n return errors;\r\n}\r\n\r\nexport const getErrorMessage = (result) => {\r\n let errors = getErrors(result);\r\n return errors.join(\" \");\r\n}\r\n//#endregion","//#region conversion between array and object\r\nexport const convertToObject = (array, key) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item,\r\n };\r\n }, initialValue);\r\n};\r\n\r\nexport const convertToKeyValues = (array, key, value) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item[value],\r\n };\r\n }, initialValue);\r\n};\r\n//#endregion\r\n\r\n//#region array helper functions\r\nexport const moveItem = (list, fromIndex, toIndex) => {\r\n //const list = Array.from(array);\r\n const [removed] = list.splice(fromIndex, 1);\r\n list.splice(toIndex, 0, removed);\r\n\r\n return list;\r\n};\r\n\r\nexport const removeItem = (list, index) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 1);\r\n\r\n return list;\r\n};\r\n\r\nexport const insertItem = (list, index, item) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 0, item);\r\n\r\n return list;\r\n};\r\n\r\n\r\nexport const find = (list, fn) => {\r\n if (!list) return null;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return list[i];\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nexport const findIndex = (list, fn) => {\r\n if (!list) return -1;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return i;\r\n }\r\n }\r\n return -1;\r\n};\r\n\r\nexport const contains = (list, fn) => {\r\n return findIndex(list, fn) >= 0;\r\n}\r\n\r\n// utils.array.distinct(images, (x, y) => x.imageUrl === y.imageUrl)\r\nexport const distinct = (list, comparer) => {\r\n const filtered = []\r\n for (let i = 0; i < list.length; i++) {\r\n if (!contains(filtered, (x) => comparer(x, list[i]))) {\r\n filtered.push(list[i])\r\n }\r\n }\r\n return filtered;\r\n}\r\n\r\nexport const sum = (list, fn) => {\r\n if (!list) return 0;\r\n let total = 0;\r\n for (let i = 0; i < list.length; i++) {\r\n total += fn(list[i]) || 0\r\n }\r\n return total\r\n}\r\n\r\nexport const equal = (list1, list2, fn) => {\r\n if (!list1 && !list2) return true;\r\n if (!list1 || !list2) return false;\r\n if (list1.length !== list2.length) return false;\r\n for (let i = 0; i < list1.length; i++) {\r\n let found = false;\r\n for (let j = 0; j < list2.length; j++) {\r\n if(fn(list1[i], list2[i])) {\r\n found = true;\r\n break;\r\n }\r\n }\r\n if (!found) return false;\r\n }\r\n return true;\r\n}\r\n//#endregion\r\n\r\n//#region sorting helpers\r\nexport const caseInsensitiveCompare = function (a, b) {\r\n return a.toLowerCase().localeCompare(b.toLowerCase());\r\n}\r\n\r\n// put the null items at the end.\r\nexport const compareIgnoreEmpty = function (asc) {\r\n return asc ?\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || +(a > b) || -(a < b);\r\n }\r\n :\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || -(a > b) || +(a < b);\r\n }\r\n}\r\n//#endregion","import parse from 'date-fns/parse';\r\nimport parseISO from 'date-fns/parseISO';\r\n\r\n//#region manipulation\r\nexport const addDays = (date, days) => {\r\n var result = new Date(date)\r\n result.setDate(result.getDate() + days)\r\n return result\r\n}\r\n//#endregion\r\n\r\n//#region format\r\nexport function formatYYYYMMDD(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n } \r\n return (`${yyyy}-${mm}-${dd}`)\r\n}\r\n\r\nexport function formatDDMMYYYY(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n }\r\n return (`${dd}-${mm}-${yyyy}`)\r\n}\r\n//#endregion\r\n\r\n//#region parse\r\nexport function toDate(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, 'yyyy-MM-dd') ||\r\n parseDate(dateObj, 'yyyy-M-d') ||\r\n parseDate(dateObj, 'dd/MM/yyyy') ||\r\n parseDate(dateObj, 'd/M/yyyy') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function toDateTime(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\") ||\r\n parseDate(dateObj, 'yyyy-MM-dd HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'yyyy-M-d HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'dd/MM/yyyy HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'd/M/yyyy HH:mm:ss.SSSxxx') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function parseDate(dateStr, format) {\r\n const date = parse(dateStr, format, new Date());\r\n return date && isValidDate(date)? date : null;\r\n}\r\n\r\nexport function isValidDate(d) {\r\n return d instanceof Date && !isNaN(d);\r\n}\r\n//#endregion","//#region background images\r\nexport const bgUrl = (imageUrl) => {\r\n return `background-image:url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n\r\nexport const bgUrlStyle = (imageUrl) => {\r\n return `url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n//#endregion\r\n\r\n//#region screen/element size\r\nexport const screenWidth = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerWidth ||\r\n document.documentElement.clientWidth ||\r\n document.body.clientWidth\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const screenHeight = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerHeight ||\r\n document.documentElement.clientHeight ||\r\n document.body.clientHeight\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const outerWidth = el => el.offsetWidth\r\nexport const outerHeight = el => el.offsetHeight\r\n//#endregion\r\n\r\n//#region css class\r\n/**\r\n * Check if element has the css class on it.\r\n */\r\nexport const hasClass = (el, className) => {\r\n if (el.classList) {\r\n return el.classList.contains(className)\r\n }\r\n\r\n return !!el.className.match(new RegExp(`(\\\\s|^)${className}(\\\\s|$)`))\r\n}\r\n\r\n/**\r\n * Adds the provided css className to the element.\r\n */\r\nexport const addClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.add(className)\r\n return\r\n }\r\n\r\n if (!hasClass(el, className)) {\r\n el.className += ` ${className}`\r\n }\r\n}\r\n\r\n/**\r\n * Remove the provided css className from the element.\r\n */\r\nexport const removeClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.remove(className)\r\n return\r\n }\r\n\r\n if (hasClass(el, className)) {\r\n const reg = new RegExp(`(\\\\s|^)${className}(\\\\s|$)`)\r\n el.className = el.className.replace(reg, ' ')\r\n }\r\n}\r\n\r\n/**\r\n * Adds or removes a class name on the input depending on the status flag.\r\n */\r\nexport const toggleClass = (el, className, status) => {\r\n if (!el || !className) return\r\n\r\n if (status) {\r\n return addClass(el, className)\r\n }\r\n\r\n removeClass(el, className)\r\n}\r\n//#endregion","import { gsap } from 'gsap';\r\nimport { ScrollToPlugin } from 'gsap/ScrollToPlugin';\r\n\r\ngsap.registerPlugin(ScrollToPlugin);\r\n\r\nexport function scrollTo(selector, duration = 750, delay = 0) {\r\n const el = findElement(selector);\r\n if (el) {\r\n setTimeout(() => {\r\n //console.log(element);\r\n const offset = elementOffset(el);\r\n //console.log(offset)\r\n //window.scrollTo(0, offset.top - 300);\r\n\r\n gsap.to(window, {duration: (duration/1000), scrollTo: offset.top - 100, ease: 'power1'});\r\n\r\n }, delay);\r\n //el.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' }); }, timeout);\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function findElement(selector) {\r\n if (typeof selector !== 'string') return selector;\r\n\r\n let found = querySelectorOrNull(selector)\r\n || querySelectorOrNull('#' + selector)\r\n || querySelectorOrNull('.' + selector)\r\n \r\n return found;\r\n}\r\n\r\nexport function querySelectorOrNull(selector) {\r\n try {\r\n return document.querySelector(selector);\r\n } catch(e){\r\n return null;\r\n };\r\n}\r\n\r\nexport function elementOffset(el) {\r\n var rect = el.getBoundingClientRect(),\r\n scrollLeft = typeof window !== `undefined` ? (window.pageXOffset || document.documentElement.scrollLeft) : 0,\r\n scrollTop = typeof window !== `undefined` ? (window.pageYOffset || document.documentElement.scrollTop) : 0;\r\n\r\n return { top: rect.top + scrollTop, left: rect.left + scrollLeft, width: el.offsetWidth, height: el.offsetHeight }\r\n}\r\n\r\nexport function isElementInViewport (el) {\r\n if (typeof window !== `undefined`) {\r\n var rect = el.getBoundingClientRect();\r\n\r\n return (\r\n rect.top >= 0 &&\r\n rect.left >= 0 &&\r\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */\r\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */\r\n );\r\n } else {\r\n return true;\r\n }\r\n}\r\n\r\nexport function getCurrentBreakpoint() {\r\n if (typeof window === `undefined`) return null;\r\n \r\n const bpHolder = document.querySelector('.devMediaQueryStatus__current');\r\n if (!bpHolder) return null;\r\n return window.getComputedStyle(bpHolder, ':before').getPropertyValue('content').replace(/[\"']/g, '');\r\n}\r\n\r\n","export function formatMoney(number, fraction = 0) {\r\n var formatter = new Intl.NumberFormat('en-AU', {\r\n style: 'currency',\r\n currency: 'AUD',\r\n minimumFractionDigits: fraction,\r\n });\r\n\r\n return formatter.format(number);\r\n}\r\n\r\nexport function toMonthlyCost(amount, frequency) {\r\n if (!amount) return 0;\r\n if (frequency === 'Week') {\r\n return amount * 52.1429 / 12.0;\r\n } else if (frequency === 'Fortnight') {\r\n return amount * 52.1429 / 2.0 / 12.0;\r\n } else if (frequency === 'Month') {\r\n return amount;\r\n } else if (frequency === 'Quarter') {\r\n return amount * 4.0 / 12.0;\r\n } else if (frequency === 'Year') {\r\n return amount / 12.0;\r\n } else {\r\n return amount;\r\n }\r\n}\r\n","export function isBlank(str) {\r\n return (!str || /^\\s*$/.test(str))\r\n}\r\n\r\nexport function isEmpty(str) {\r\n return (!str || str.length === 0)\r\n}\r\n\r\nexport function isNumeric(num){\r\n return !isNaN(num)\r\n}\r\n\r\nexport function capitalize(expression) {\r\n return expression.charAt(0).toUpperCase() + expression.slice(1);\r\n}\r\n\r\nexport function toFieldName(str) {\r\n if (!str) return null;\r\n return capitalize((str.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1')).trim());\r\n}\r\n\r\nexport function toHtml(str) {\r\n if (!str) return null;\r\n return str.replace(/[\\n\\r]/g, '\r\n
\r\n ')\r\n}\r\n\r\n// Shorten a string to less than maxLen characters without truncating words.\r\nexport function truncateWords(str, maxLen, separator = ' ', ellipsis = '...') {\r\n if (str.length <= maxLen) return str\r\n var pos = str.lastIndexOf(separator, maxLen)\r\n return str.substr(0, pos) + ellipsis\r\n}\r\n\r\nexport function numberWithCommas(x) {\r\n var parts = x.toString().split(\".\");\r\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n return parts.join(\".\");\r\n}\r\n\r\nexport const formatNumber = (value) => {\r\n if (value === 0) return '0';\r\n if (!value) return '';\r\n return Math.round(value * 100) / 100\r\n}\r\n\r\nexport const toTelephoneNumber = (str) => {\r\n return (str || []).replace(/[^+\\d]+/g, \"\");\r\n\r\n}\r\n\r\n// utils.text.like('text here', '%keyword%')\r\nexport const like = (str, search) => {\r\n if (typeof search !== 'string' || str === null) { return false; }\r\n // Remove special chars\r\n search = search.replace(new RegExp(\"([\\\\.\\\\\\\\\\\\+\\\\*\\\\?\\\\[\\\\^\\\\]\\\\$\\\\(\\\\)\\\\{\\\\}\\\\=\\\\!\\\\<\\\\>\\\\|\\\\:\\\\-])\", \"g\"), \"\\\\$1\");\r\n // Replace % and _ with equivalent regex\r\n search = search.replace(/%/g, '.*').replace(/_/g, '.');\r\n // Check matches\r\n return RegExp('^' + search + '$', 'gi').test(str);\r\n\r\n}","import shortid from 'shortid';\r\nimport uuid from 'uuid/v4';\r\n\r\nexport function shortId() {\r\n return shortid();\r\n}\r\n\r\nexport function guid() {\r\n return uuid();\r\n}","export function toCamel(o) {\r\n var newO, origKey, newKey, value\r\n if (o instanceof Array) {\r\n return o.map(function(value) {\r\n if (typeof value === \"object\") {\r\n value = toCamel(value)\r\n }\r\n return value\r\n })\r\n } else {\r\n newO = {}\r\n for (origKey in o) {\r\n if (o.hasOwnProperty(origKey)) {\r\n newKey = (origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey).toString()\r\n value = o[origKey]\r\n if (value instanceof Array || (value !== null && value.constructor === Object)) {\r\n value = toCamel(value)\r\n }\r\n newO[newKey] = value\r\n }\r\n }\r\n }\r\n return newO\r\n}","import { getFilename } from './url';\r\nimport { contains } from './array';\r\nexport function getImageSetPath(url, setId) {\r\n const info = getPathDetails(url)\r\n if (!info) return url;\r\n //console.log(url, info);\r\n return info.baseFolder + \"/@\" + setId + '/' + info.filename\r\n}\r\n\r\nexport function getPathDetails(url, setIds) {\r\n if (!url) return null;\r\n const parts = url.split('/').slice(0, -1);\r\n if (parts.length <= 1) return { baseFolder: '/', setId: null, filename: getFilename(url) };\r\n\r\n const lastFolder = parts[parts.length - 1];\r\n const hasSet = setIds && setIds.length > 0 ? contains(setIds, x => x === lastFolder) : lastFolder.indexOf('@') === 0;\r\n\r\n return hasSet ?\r\n { baseFolder: parts.slice(0, -1).join('/'), setId: lastFolder, filename: getFilename(url) } :\r\n { baseFolder: parts.join('/'), setId: null, filename: getFilename(url) }\r\n}","import classNames from 'classnames';\r\nimport * as url from './url';\r\nimport * as form from './form';\r\nimport * as array from './array';\r\nimport * as date from './date';\r\nimport * as css from './css';\r\nimport * as ui from './ui';\r\nimport * as money from './money';\r\nimport * as text from './text';\r\nimport * as random from './random';\r\nimport * as object from './object';\r\nimport * as media from './media';\r\n\r\nexport default { classNames, url, form, array, date, css, ui, money, text, random, object, media};","import facepaint from 'facepaint'\r\nimport siteConfig from '../../config';\r\n\r\nconst config = siteConfig.cssEmotion\r\nconst breakpointNames = (config && config.breakpointNames) || ['sm', 'md', 'lg', 'xl', 'xxl']\r\nconst breakpoints = (config && config.breakpoints) || [576, 768, 992, 1200, 1600]\r\n\r\nconst mq = facepaint(\r\n breakpoints.map(bp => `@media (min-width: ${bp}px)`)\r\n)\r\n\r\nconst mqMin = {};\r\nbreakpointNames.forEach((bp, index) => mqMin[bp] = `@media (min-width: ${breakpoints[index]}px)`)\r\n\r\nconst mqMax = {};\r\nbreakpointNames.forEach((bp, index) => mqMax[bp] = `@media (max-width: ${breakpoints[index] - 1}px)`)\r\n//console.log(mqMin, mqMax)\r\n\r\nconst matches = (mediaQuery) => !!window.matchMedia(mediaQuery).matches\r\nconst isMin = {};\r\nbreakpointNames.forEach((bp, index) => isMin[bp] = () => matches(`(min-width: ${breakpoints[index]}px)`))\r\n\r\nconst isMax = {};\r\nbreakpointNames.forEach((bp, index) => isMax[bp] = () => matches(`(max-width: ${breakpoints[index] - 1}px)`))\r\n\r\nexport { mq, mqMin, mqMax, isMin, isMax }","export function overlay() {\r\n return {\r\n content: `''`,\r\n position: 'absolute',\r\n top:0,\r\n bottom:0,\r\n left: 0,\r\n right: 0,\r\n transition: 'all 0.5s'\r\n }\r\n}","import utils from '../utils';\nimport env from '../env';\nimport { isMin } from '../lib/css-emotion';\n\nexport const isMobile = () => {\n // isMin.md() ==> min-width: 768px\n return !isMin.md();\n};\n\nexport function resourcePath(url) {\n if (!url) return null;\n if (url && url.indexOf('/assets/') === 0) return url;\n return utils.url.isExternalLink(url) ? url : env.resourceBase + url;\n}\n\nexport function fullUrl(url) {\n return utils.url.isExternalLink(url) ? url : env.baseOrigin + url;\n}\n\nexport const isNZ = env.locale === 'nz';\n\nexport function getCategoryShopUrl(pageUrl) {\n return (pageUrl || '').toLowerCase().replace('/categories/', '/categories-shop/');\n}\n\nexport function isCategoryShopUrl(pageUrl) {\n return (pageUrl || '').toLowerCase().indexOf('/categories-shop/') >= 0;\n}\n\nexport function toHoursText(mins) {\n const h = Math.floor(mins / 60);\n const m = mins % 60;\n\n if (mins === 1) return mins + ' min';\n if (mins < 60) return mins + ' mins';\n\n const hText = h === 1 ? '1 hr' : `${h} hrs`;\n const mText = m === 0 ? '' : m === 1 ? '1 min' : `${m} mins`;\n return mText ? hText + ' ' + mText : hText;\n}\n","import coreUtils from '../lib/utils-core';\nimport * as site from '../site/siteUtils';\n\nexport default { ...coreUtils, site };","import { useState, useEffect } from 'react';\r\nimport utils from '../../utils';\r\nimport siteConfig from '../../config';\r\n\r\nexport function useApi(fn) {\r\n //console.log('useApi')\r\n const [response, setResponse] = useState({});\r\n const [errors, setErrors] = useState([]);\r\n const [status, setStatus] = useState('ready');\r\n const [request, setRequest] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!request) return;\r\n\r\n //console.log('fetch now')\r\n setResponse(null);\r\n setErrors([]);\r\n setStatus('ready');\r\n\r\n const fetchData = async () => {\r\n setStatus('pending');\r\n try {\r\n //console.log(request);\r\n const options = request.options || {}\r\n siteConfig.apiNetJwt && await siteConfig.apiNetJwt(options);\r\n\r\n const res = await fetch(request.url, options);\r\n //console.log(res);\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n setErrors([json.message]);\r\n setStatus('error')\r\n return;\r\n }\r\n } catch (e) { }\r\n\r\n const statusText = res.status === 401 ? 'Permission denied. Please login first.' : res.statusText\r\n setErrors(['Error - [' + res.status + ']' + (statusText && (' - ' + statusText))]);\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n setErrors(utils.form.getErrors(json));\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n setResponse(json);\r\n setStatus('done')\r\n } catch (err) {\r\n //console.log(error, error.toString(), typeof error, JSON.stringify(error))\r\n setErrors([err.toString()]);\r\n setStatus('error')\r\n }\r\n };\r\n fetchData();\r\n }, [request]);\r\n\r\n const containsErrorMessage = (msg) => {\r\n const finding = (msg || '').toLowerCase()\r\n return errors.some(x => (x || '').toLowerCase().indexOf(finding) >= 0)\r\n }\r\n\r\n //return [ response, error, status, (...args) => setRequest(fn(...args)) ];\r\n return {\r\n request: request,\r\n response: response,\r\n errors: errors,\r\n status: status,\r\n hasErrors: () => status === 'error',\r\n containsErrorMessage: containsErrorMessage,\r\n addErrors: (errs) => {\r\n setErrors(...errors, ...errs)\r\n setStatus('error')\r\n },\r\n done: () => status === 'done',\r\n send: (...args) => { setStatus('ready'); setRequest(fn(...args)) },\r\n sendRaw: (httpOptionFn, ...args) => { setStatus('ready'); setRequest(httpOptionFn(...args)) },\r\n setResult: (json) => { setResponse(json); setStatus('done') },\r\n reset: () => {\r\n setStatus('ready');\r\n setErrors([]);\r\n }\r\n };\r\n}\r\n\r\nexport function usePost() {\r\n const formDataFn = (url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n body: data // FormData\r\n }\r\n });\r\n const post = useApi((url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data)\r\n }\r\n })\r\n );\r\n return {\r\n ...post,\r\n loading: () => post.status === 'ready' || post.status === 'pending',\r\n sending: () => post.status === 'pending',\r\n sendFormData: (...args) => post.sendRaw(formDataFn, ...args)\r\n }\r\n}\r\n\r\nexport function useGet() {\r\n const get = useApi((url, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'GET'\r\n }\r\n })\r\n );\r\n return {\r\n ...get,\r\n loading: () => get.status === 'ready' || get.status === 'pending'\r\n }\r\n}\r\n\r\n//https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c","import React from 'react';\r\nimport env from '../../env';\r\n\r\nexport function MediaQueryStatus(props) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Helmet } from 'react-helmet-async';\r\n\r\nexport function MetaTag({ data: seoData }) {\r\n //console.log(seoData)\r\n const data = Object.assign({}, {\r\n title: ''\r\n }, seoData)\r\n\r\n return (<>\r\n \r\n {displayingPosts.map((item, index) =>\r\n
\r\n )\r\n}\r\n\r\nfunction Feed({item}) {\r\n return (\r\n \r\n {/* {item.link} */}\r\n \r\n })
\r\n {item.type === 'video' &&
\r\n )\r\n}","// https://www.pluralsight.com/guides/re-render-react-component-on-window-resize\r\nexport function debounce(fn, ms) {\r\n let timer\r\n return _ => {\r\n clearTimeout(timer)\r\n timer = setTimeout(_ => {\r\n timer = null\r\n fn.apply(this, arguments)\r\n }, ms)\r\n };\r\n}","import utils from '../../utils';\r\n\r\nexport function loadApi(onApiReady) {\r\n if (typeof window !== `undefined` && !window.YT) { // If not, load the script asynchronously\r\n const tag = document.createElement('script');\r\n tag.src = 'https://www.youtube.com/iframe_api';\r\n\r\n // onYouTubeIframeAPIReady will load the video after the script is loaded\r\n window.onYouTubeIframeAPIReady = () => onApiReady(true);\r\n\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n } else { // If script is already there, load the video directly\r\n onApiReady(false);\r\n }\r\n}\r\n\r\n// export function player(playerId, videoId, playerVars = {}, events = {}) {\r\n// //let player = null;\r\n// const defaultPlayerVars = {\r\n// 'autoplay': 1,\r\n// 'controls': 0,\r\n// 'loop': 1,\r\n// 'showinfo': 0,\r\n// 'rel': 0,\r\n// 'modestbranding': 1,\r\n// 'origin': window.location.origin,\r\n// 'allowfullscreen': true,\r\n// 'wmode': 'transparent'\r\n// }\r\n// const defaultEvents = {\r\n// 'onStateChange': (e) => { },\r\n// 'onReady': (e) => { console.log('onReady'); player.mute() },\r\n// 'onError': (e) => { console.log(e) }\r\n// }\r\n\r\n// const player = new window.YT.Player(playerId, {\r\n// videoId: videoId,\r\n// playerVars: Object.assign({}, defaultPlayerVars, playerVars),\r\n// events: Object.assign({}, defaultEvents, events),\r\n// });\r\n// return player;\r\n// }\r\n\r\nexport function thumbnailMax(videoId){\r\n return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\r\n}\r\n\r\n// onPlayerStateChange(event){\r\n// switch (event.data){\r\n// case window['YT'].PlayerState.PLAYING:\r\n// //console.log('Playing');\r\n// //this.player.mute();\r\n// break;\r\n// case window['YT'].PlayerState.PAUSED:\r\n// //console.log('Pafdsu');\r\n// break;\r\n// case window['YT'].PlayerState.ENDED:\r\n// //console.log('ended ');\r\n// //this.player.playVideo();\r\n// this.player.stopVideo();\r\n// break;\r\n// }\r\n// }\r\n\r\n// toggleBannerYoutueInCMS(toggleItem:string){ \r\n// if(toggleItem == 'youtube'){\r\n// //location.reload();\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.playVideo();\r\n// this.init();\r\n// }\r\n// else{\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.stopVideo();\r\n// }\r\n// }\r\n\r\n\r\nexport function getYoutubeCode(src) {\r\n // if (src.indexOf('http') >= 0) {\r\n // if (src.indexOf('v=') >= 0) {\r\n // return src.split('v=')[1];\r\n // }\r\n // }\r\n // return src;\r\n return utils.url.getYoutubeId(src);\r\n}","import React from 'react';\r\nimport utils from '../../utils';\r\nimport * as yt from './iframeApi';\r\nimport { FaRegPlayCircle } from 'react-icons/fa';\r\nimport { useStore } from '../../store';\r\n\r\nexport function YoutubeEmbedPopup({ url, title, posterUrl }) {\r\n const { dispatch } = useStore();\r\n\r\n const videoId = yt.getYoutubeCode(url);\r\n const posterImageUrl = utils.site.resourcePath(posterUrl || yt.thumbnailMax(videoId));\r\n const [popupIndex, setPopupIndex] = React.useState(0);\r\n\r\n function openVideo() {\r\n setPopupIndex(popupIndex + 1);\r\n dispatch({ type: 'SET_POPUP', payload: { sources: [\r\n // \r\n 'https://www.youtube.com/watch?v=' + videoId\r\n ], popupIndex: popupIndex + 1} });\r\n }\r\n return (\r\n \r\n {item.type === 'video' && \r\n
\r\n );\r\n}\r\n","import * as firebase from \"firebase/app\";\nimport \"firebase/auth\";\n\n/**\n * Returns a promise that resolves with an ID token if available.\n * @return {!Promise} The promise that resolves with an ID token if\n * available. Otherwise, the promise resolves with null.\n */\nconst getIdToken = () => {\n return new Promise((resolve, reject) => {\n const unsubscribe = firebase.auth().onAuthStateChanged((user) => {\n unsubscribe();\n if (user) {\n user.getIdToken().then((idToken) => {\n resolve(idToken);\n }, (error) => {\n resolve(null);\n });\n } else {\n resolve(null);\n }\n });\n });\n};\n\nconst getFirebaseUser = () => {\n return new Promise((resolve, reject) => {\n const unsubscribe = firebase.auth().onAuthStateChanged((user) => {\n unsubscribe();\n resolve(user);\n });\n });\n};\n\nexport { getIdToken, getFirebaseUser }","import utils from '../../utils';\r\n//import siteConfig from '../../config';\r\n\r\nexport async function fetchGet(url, signal, apiNetJwt) {\r\n //console.log(url, options);\r\n const options = {}\r\n apiNetJwt && await apiNetJwt(options);\r\n\r\n const res = await fetch(url, { \r\n method: 'GET', \r\n signal,\r\n ...options\r\n });\r\n //console.log(res);\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n throw new Error(json.message)\r\n }\r\n } catch (e) {\r\n throw e;\r\n }\r\n const statusText = res.status === 401 ? 'Permission denied. Please login first.' : res.statusText\r\n throw new Error('Error - [' + res.status + ']' + res.status + (statusText && (' - ' + statusText)))\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n const errMessages = utils.form.getErrors(json);\r\n throw new Error(errMessages.join(', '))\r\n }\r\n return json;\r\n}\r\n\r\n\r\nexport async function fetchPost(url, data, signal, apiNetJwt) {\r\n //console.log(url, options);\r\n const options = { headers: { 'Content-Type': 'application/json' } }\r\n apiNetJwt && await apiNetJwt(options);\r\n\r\n const res = await fetch(url, {\r\n method: 'POST',\r\n body: JSON.stringify(data),\r\n signal,\r\n ...options\r\n });\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n throw new Error(json.message)\r\n }\r\n } catch (e) { }\r\n throw new Error('Error - ' + res.status + (res.statusText && (' - ' + res.statusText)))\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n const errMessages = utils.form.getErrors(json);\r\n throw new Error(errMessages.join(', '))\r\n }\r\n return json;\r\n}","import React, { useContext, createContext } from 'react';\nimport * as firebase from 'firebase/app';\nimport 'firebase/auth';\nimport config from 'config';\nimport env from 'env';\nimport { getFirebaseUser } from './authHelper';\nimport { fetchPost } from '@lib/net-api/fetch';\n\nfirebase.initializeApp(config.firebaseSettings);\n\nconst authContext = createContext();\n\n// Provider component that wraps your app and makes auth object available to any child component that calls useAuth().\nexport function ProvideAuth({ children }) {\n //console.log('ProvideAuth')\n const auth = useProvideAuth();\n return \n
\n );\n}\n","import { useState, useEffect } from 'react';\nimport { useGet } from 'components';\nimport env from 'env';\nimport { useStore } from 'store';\n\nexport function MenuLoader() {\n const { state, dispatch } = useStore();\n const [loadingStatus, setLoadingStatus] = useState('ready');\n const [data, setData] = useState(null);\n\n const get = useGet();\n\n useEffect(() => {\n if (loadingStatus !== 'ready') return;\n if (state && !state.menu) {\n setLoadingStatus('loading');\n get.send(env.apiBase + \"/api/cms/GetMenu\");\n }\n // eslint-disable-next-line\n }, [state]);\n\n useEffect(() => {\n // console.log(data)\n if (data) {\n dispatch({ type: 'SET_MENU', payload: data.menu })\n }\n // eslint-disable-next-line\n }, [data]);\n\n if (loadingStatus !== 'done' && get.done()) {\n setLoadingStatus('done');\n setData(get.response);\n }\n return null;\n}\n\n","import React from 'react';\nimport { Route } from 'react-router-dom';\n\nimport { Loading } from 'components';\nimport { useRouter } from '../components';\nimport { useAuth } from 'auth';\nimport { MenuLoader } from './menuLoader';\n\nconst DashboardLayout = ({ children, ...rest }) => {\n const isCancelled = React.useRef(false);\n const [sessionChecked, setSessionChecked] = React.useState(false);\n const { navigate } = useRouter();\n const auth = useAuth();\n\n React.useEffect(() => {\n const checkAuth = async () => {\n if (!isCancelled.current) {\n const loggedIn = await auth.loggedIn();\n // console.log({ loggedIn })\n if (!loggedIn) {\n navigate('/member/login');\n } else {\n setSessionChecked(true);\n }\n }\n };\n checkAuth();\n return () => {\n isCancelled.current = true;\n };\n }, [auth, navigate]);\n\n if (!sessionChecked) {\n return (\n Log In
\n\n {/*
\n \n \n\n {/*
\n \n Or Log in with \n
\n */}\n {/* \n \n
\n \n Don't have an account? Sign Up \n
*/}\n \n Forgot Password? \n
\n \n
\n );\n } else {\n return {children}
;\n }\n};\n\nconst DashboardLayoutRoute = ({ component: RenderComponent, ...rest }) => {\n return (\n {children}
;\n};\n\nconst DashboardNoAuthLayoutRoute = ({\n component: RenderComponent,\n ...rest\n}) => {\n return (\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction RadioListInput({ control, handleChange, formOption }) {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n {prependText &&
\r\n {helpText && }\r\n \r\n
\r\n }\r\n\r\n handleChange(e, control)} \r\n // onBlur={(e) => handleChange(e, control, true)}\r\n onChange={changed}\r\n onKeyDown={keyDown}\r\n onBlur={blur}\r\n autoComplete=\"new-password\"\r\n //onFocus={focus}\r\n //autoFocus={autoFocus}\r\n placeholder={placeHolder}\r\n className={\"form-control\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs} />\r\n {prependText}
\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(value, optionValue) {\r\n if (optionValue === null || typeof optionValue === 'undefined') return false;\r\n return value === optionValue;\r\n}\r\n\r\nexport default RadioListInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxListInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n const values = value ? [...value] : [];\r\n return (\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs} />\r\n \r\n
)}\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(values, value) {\r\n if (value === null || typeof value === 'undefined') return false;\r\n return values.includes(value);\r\n}\r\n\r\nexport default CheckboxListInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction DateSeparateInput({ control, handleChange, formOption }) {\r\n //const { name, label, value, errors, style } = control;\r\n const { name, label, errors, style, helpText, attrs } = control;\r\n const thisYear = (new Date()).getFullYear();\r\n //console.log(name, value)\r\n const [year, setYear] = React.useState('')\r\n const [month, setMonth] = React.useState('')\r\n const [day, setDay] = React.useState('')\r\n\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, name + '|'+ fieldLabel)\r\n //const placeHolder = usePlaceholder ? fieldLabel : null;\r\n // let valueStr = value === 0 ? 0 : (value || \"\");\r\n // if (type === 'date' && value) {\r\n // valueStr = utils.date.formatYYYYMMDD(value);\r\n // }\r\n\r\n function handleChangeDay(e) {\r\n setDay(e.target.value)\r\n handleChangeInner(year, month, e.target.value)\r\n }\r\n\r\n function handleChangeMonth(e) {\r\n setMonth(e.target.value)\r\n handleChangeInner(year, e.target.value, day)\r\n }\r\n\r\n function handleChangeYear(e) {\r\n setYear(e.target.value)\r\n handleChangeInner(e.target.value, month, day)\r\n }\r\n\r\n function handleChangeInner(yyyy, mm, dd) {\r\n control.incomplete = !(yyyy !== '' && mm !== '' && dd !== '')\r\n const newVal = yyyy + '-' + mm + '-' + dd;\r\n //console.log(newVal)\r\n //mimic event\r\n handleChange({\r\n persist: () => { },\r\n target: { name: name, value: newVal, checked: false }\r\n }, control)\r\n }\r\n\r\n //const monthsFull = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']\r\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n const selectStyle = { width: 'auto', display: 'inline-block', marginRight: '0.5em' };\r\n\r\n const fromYear = style && style.recentYear ? thisYear : thisYear - 10;\r\n const recentYear = style && style.recentYear ? style.recentYear : 100;\r\n return (\r\n \r\n
\r\n {helpText && }\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs}/>\r\n \r\n
)}\r\n\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default DateSeparateInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction FileInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, control)\r\n const placeHolder = usePlaceholder ? fieldLabel : null;\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n if (type === 'date' && value) {\r\n valueStr = utils.date.formatYYYYMMDD(value);\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n\r\n )\r\n}\r\n\r\nexport default FileInput;","import TextInput from './TextInput';\r\nimport RadioListInput from './RadioListInput';\r\nimport TextareaInput from './TextareaInput';\r\nimport CheckboxInput from './CheckboxInput';\r\nimport CheckboxListInput from './CheckboxListInput';\r\nimport SelectInput from './SelectInput';\r\nimport HiddenInput from './HiddenInput';\r\n//import HtmlInput from './HtmlInput';\r\nimport DateSeparateInput from './DateSeparateInput';\r\nimport FileInput from './FileInput';\r\n\r\nconst Components = { TextInput, RadioListInput, TextareaInput, CheckboxInput, CheckboxListInput, SelectInput, HiddenInput, DateSeparateInput, FileInput };\r\n\r\nconst capitalize = expression => expression.charAt(0).toUpperCase() + expression.slice(1);\r\n\r\nexport function getControl(control, formOption) {\r\n let Component = null;\r\n if (control.type === 'number' || control.type === 'email' || control.type === 'date' || control.type === 'password' || control.type === 'tel')\r\n Component = TextInput;\r\n else if (control.type === \"dob\")\r\n Component = DateSeparateInput;\r\n else\r\n Component = Components[capitalize(control.type || '') + 'Input'];\r\n\r\n return Component;\r\n}\r\n\r\n","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel, getLabelAsString } from '../formRenderHelper';\r\n\r\nfunction TextareaInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const { usePlaceholder = false } = formOption;\r\n const placeHolder = usePlaceholder ? getLabelAsString(control, formOption) : null;\r\n const valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n const textAreaRef = React.useRef(null);\r\n const [textAreaHeight, setTextAreaHeight] = React.useState(\"auto\");\r\n const [parentHeight, setParentHeight] = React.useState(\"auto\");\r\n\r\n React.useEffect(() => {\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n setTextAreaHeight(`${h}px`);\r\n }\r\n }, [valueStr]);\r\n\r\n function onChangeInternal(e) {\r\n setTextAreaHeight(\"auto\");\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n }\r\n handleChange(e, control);\r\n }\r\n\r\n return (\r\n \r\n handleChange(e, control)} onBlur={(e) => handleChange(e, control)}\r\n placeholder={placeHolder}\r\n className={\"form-control-file\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs}/>\r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextareaInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)} \r\n className={\"form-check-input\"} {...attrs}/>\r\n \r\n {helpText && }\r\n
\r\n )\r\n}\r\n\r\nexport default CheckboxInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction SelectInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(value, typeof value)\r\n return (\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default SelectInput;\r\n\r\n","import * as React from 'react';\r\nimport utils from '../../../utils';\r\n\r\nfunction TextInput({ control, handleChange, formOption }) {\r\n const { name, value } = control;\r\n const fieldId = utils.random.shortId();\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport * as formModelHelper from './formModelHelper';\r\nimport { getControl } from './controls';\r\nimport { getSiteControl } from '../../form';\r\n\r\nexport function renderControlDirect(control, handleChange, formOption) {\r\n if (control === null) return null;\r\n let Component = getSiteControl(control, formOption) || getControl(control, formOption);\r\n if (!Component) return control.value;\r\n return \r\n \r\n
\r\n {helpText && }\r\n \n
\n );\n}\n\nfunction SessionEditForm({ profile }) {\n const [sendingStatus, setSendingStatus] = React.useState(null);\n\n const post = usePost();\n const model = getFormData(profile);\n const form = useForm(model, {});\n\n function save(e) {\n e.preventDefault();\n form.validateForm(\n e,\n () => {\n const value = { ...form.getValue() };\n\n post.send(env.apiBase + '/api/member/UpdatePassword', value);\n setSendingStatus('pending');\n },\n (errors) => {}\n );\n }\n\n if (post.done() && sendingStatus === 'pending') {\n form.reset(getFormData({}));\n setSendingStatus(null);\n }\n\n const render = (name) => form.renderControl(name, null);\n\n return (\n Change Password
\n\n < Return to dashboard \n
\n \n \n
\n );\n}\n\nexport function getFormData(data) {\n const model = fb.group({\n // currentPassword: [data.currentPassword || '', [validators.Required()], { label: 'Current Password', type: 'password' }],\n password: [\n data.password || '',\n [validators.Required(), validators.Length('Min 7 characters', { min: 7 })],\n { label: 'New Password', type: 'password' },\n ],\n confirmPassword: [\n data.confirmPassword || '',\n [validators.Required()],\n { label: 'Confirm Password', type: 'password' },\n ],\n });\n\n return model;\n}\n","// import { variables } from 'cssInJs'\n\nexport function getEditorStyle() {\n return {\n formBlock: {\n maxWidth: '1600px',\n margin: '1.5rem 0',\n '& label': {\n fontWeight: 'bold'\n },\n '& p': {\n marginBottom: '0.2rem'\n }\n },\n returnLink: {\n fontSize: '0.8rem'\n },\n actions: {\n margin: '2rem 0',\n display: 'flex',\n 'button, a': {\n marginRight: '0.5rem'\n }\n },\n labelHelp: {\n fontSize: '90%'\n }\n }\n}\n","import React from 'react';\nimport env from 'env';\nimport { usePost } from 'components';\nimport { Button, ErrorMessage } from 'components';\nimport { SiteLink } from 'components';\nimport { IoReturnUpBack } from 'react-icons/io5';\n\nexport function ForgotPassword() {\n const [username, setUsername] = React.useState(\"\");\n\n const post = usePost();\n\n function onSubmit(e) {\n post.send(env.apiBase + \"/api/profile/SendPasswordResetEmail\", { email: username });\n }\n return (\n \n
)\n}","import React from 'react';\nimport env from 'env';\nimport { usePost } from 'components';\nimport { SiteLink } from 'components';\nimport { useRouter } from 'components';\nimport { ErrorPopup } from 'components';\nimport { Button, ErrorMessage } from 'components';\nimport { IoReturnUpBack } from 'react-icons/io5';\n\nexport function ResetPassword() {\n const [password, setPassword] = React.useState(\"\");\n const { query } = useRouter();\n const token = (query && query.u) || '';\n const post = usePost();\n\n if (!token) {\n return Forgot Password
\n\n
\n \n \n
\n \n LOG IN \n
\n \n
)\n}","import { mq } from \"cssInJs\";\n\nexport default {\n pay: {\n 'h3': {\n marginTop: 0\n }\n },\n stripeWrapper: {\n margin: '1rem 0 1rem',\n maxWidth: 500,\n padding: '1rem',\n backgroundColor: '#fff5e4'\n },\n formActions: {\n marginTop: '2rem'\n },\n paymentInfoText : mq({\n fontSize: ['0.6rem', '0.5rem'],\n marginTop: '1rem',\n '.contact-link' : {\n color: 'white'\n }\n })\n}","export const priceData = {\n standard: {\n id: 'standard',\n name: 'Standard',\n monthly: 7.99,\n yearly: 56.99\n },\n pro: {\n id: 'pro',\n name: 'Professional',\n monthly: 18.99,\n yearly: 134.99\n }\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n// import React from 'react';\nimport { getMonthlyOrYearlyStyle } from './monthlyOrYearlyStyle';\nimport { FaCheckCircle } from 'react-icons/fa'\nimport { priceData } from './_priceData'\n\nexport function MonthlyOrYearly({ subsType, per, setPer }) {\n\n const s = getMonthlyOrYearlyStyle()\n\n return Reset Password
\n\n
\n \n \n \n
\n \n LOG IN \n
\n \n
\n}","// import { css } from '@emotion/core'\nimport { variables, mq } from 'cssInJs'\nimport { rgba } from 'polished'\n\nexport function getMonthlyOrYearlyStyle() {\n return {\n container: mq({\n maxWidth: 800,\n display: 'flex',\n marginLeft: -20,\n marginRight: -20,\n }),\n option: mq({\n position: 'relative',\n margin: 20,\n paddingLeft: 40,\n paddingRight: 40,\n paddingTop: 20,\n paddingBottom: 20,\n flex: '0 0 50%',\n background: '#f3f3f3',\n transition: 'all 0.3s',\n border: '3px solid transparent',\n '&:hover, &:active': {\n //color: 'white',\n background: rgba(variables.primaryColor, 0.1),\n border: `3px solid ${variables.primaryColor}`\n },\n 'ul': {\n margin: '1rem 0',\n paddingLeft: 20\n }\n }),\n optionSelected: mq({\n border: `3px solid ${variables.primaryColor}`\n }),\n icon: mq({\n position: 'absolute',\n top: 5,\n right: 5,\n fontSize: '2rem',\n color: variables.primaryColor,\n }),\n header: mq({\n textAlign: 'center',\n }),\n priceBlock: mq({\n marginTop: 10,\n marginBottom: 10\n }),\n price: mq({\n fontSize: '1.6rem',\n fontWeight: 'bold',\n color: variables.primaryColor\n }),\n per: mq({\n fontSize: '0.875rem',\n color: '#999',\n marginLeft: '1rem'\n }),\n }\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './payStyle';\nimport React from 'react';\n\nimport { usePost } from 'components';\nimport { Button, ErrorMessage } from 'components';\nimport env from 'env';\nimport { useRouter } from 'components';\nimport { initStripe } from './payStripe';\n\nimport { priceData } from '../_priceData'\nimport { MonthlyOrYearly } from '../monthlyOrYearly'\n\nexport function Pay({ payVM, getSelection }) {\n\n const [per, setPer] = React.useState('monthly');\n const [stripe, setStripe] = React.useState(null);\n const [card, setCard] = React.useState(null);\n const [error, setError] = React.useState(null);\n\n const post = usePost();\n const { Redirect } = useRouter()\n\n React.useEffect(() => {\n const { stripe, card } = initStripe(setError)\n setStripe(stripe);\n setCard(card);\n }, [])\n\n function payNow() {\n if (error) return;\n stripe.createToken(card).then(function (result) {\n if (result.error) {\n setError(result.error.message);\n } else {\n setError(null);\n // Send the token to your server.\n onSubmit(result.token.id);\n }\n });\n }\n\n function onSubmit(tokenId) {\n const data = payVM; //getSelection();\n\n console.log(tokenId, data)\n post.send(env.apiBase + \"/api/subscription/payStripe\", { ...data, per, tokenId: tokenId, cartId: env.getDevCartId() });\n }\n\n if (post.done()) {\n env.setDevCartId(null);\n return \n
\n setPer('monthly')}>\n {per === 'monthly' &&
\n Monthly
\n\n AUD {subsType.id === 'standard' ? priceData.standard.monthly : priceData.pro.monthly}\n per month\n
\n setPer('yearly')}>\n {per === 'yearly' &&
\n Yearly
\n\n AUD {subsType.id === 'standard' ? priceData.standard.yearly : priceData.pro.yearly}\n per month\n
\n \n
\n}\n","import env from 'env';\n\nexport function initStripe(setError) {\n // Create a Stripe client.\n const stripe = window.Stripe(env.stripeKey);\n\n\n // Create an instance of Elements.\n const elements = stripe.elements();\n\n // Custom styling can be passed to options when creating an Element.\n // (Note that this demo uses a wider set of styles than the guide below.)\n const elStyle = {\n base: {\n color: '#32325d',\n fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n fontSmoothing: 'antialiased',\n fontSize: '18px',\n '::placeholder': {\n //color: '#aab7c4'\n color: '#000000'\n }\n },\n invalid: {\n color: '#fa755a',\n iconColor: '#fa755a'\n }\n };\n\n // Create an instance of the card Element.\n const card = elements.create('card', { style: elStyle });\n\n // Add an instance of the card Element into the `card-element` \n
\n \n {subsType ?
\n\n \n
: You have selected '{subsType.name}'. Please choose your payment frequency.
\nNo subscription selected. Please go back to the previouse steps.
}\n\n\n \n
\n\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 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}","import React from 'react';\nimport env from 'env';\nimport { Loading, ErrorPopup } from 'components';\nimport { useRouter } from 'components';\n\nimport { usePost } from 'components';\nimport { Pay } from '../signupSteps/cartPayment/pay';\n\nexport function VerifyEmail() {\n const { query } = useRouter();\n const token = query.u || '';\n\n const post = usePost();\n\n React.useEffect(() => {\n post.send(env.apiBase + \"/api/subscription/VerifyEmail\", { token: token });\n // eslint-disable-next-line\n }, []);\n\n if (post.loading()) {\n return \n \n );\n } else if (post.hasErrors()) {\n return (\n \n \n LOG IN\n \n \n );\n }\n\n const data = post.response?.results || {};\n return \n \n \n \n}\n","import { mq } from 'cssInJs';\nimport { rgba } from 'polished';\n\nexport function getPopupStyle() {\n return {\n overlay: mq({\n position: 'fixed',\n top:0,\n bottom:0,\n left: 0,\n right: 0,\n transition: 'all 0.5s',\n // pointerEvents: 'none',\n background: rgba('#000', 0.8),\n zIndex: -1,\n opacity: 0,\n visibility: 'hidden',\n }),\n show: mq({\n opacity: 1,\n visibility: 'visible',\n zIndex: 3000\n }),\n popup: mq({\n width: '90%',\n height: '85vh',\n maxWidth: 1000,\n background: '#fff',\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n }),\n sizemedium: mq({\n width: '90%',\n height: '85vh',\n maxWidth: 1000,\n }),\n sizesmall: mq({\n width: '90%',\n height: '85vh',\n maxWidth: 800,\n maxHeight: 400\n }),\n content: mq({\n padding: 20,\n height: '100%',\n overflowY: 'auto'\n }),\n close: mq({\n position: 'absolute',\n right: 15,\n top: 5,\n zIndex: 3001,\n cursor: 'pointer',\n })\n }\n}\n\n","import React from 'react';\n\nexport function FieldError({ error }) {\n const errorMessage = error?.message || error;\n return errorMessage ? \n \n );\n}\n","import React from 'react';\nimport { SiteLink } from 'components';\nimport { getAESTDate, getTimeTextForTimeZone, getCurrentTimeZone } from 'site/_helpers/dateTime';\nimport utils from 'utils';\nimport { RegisterPopup } from './register/registerPopup';\nimport { MenuLoader } from 'layout/menuLoader';\n\nexport function EventDetails({ event }) {\n const timeZones = React.useMemo(() => getTimeZones(event), [event]);\n console.log(\n event,\n timeZones,\n utils.date.toDateTime(event.startDateTime),\n (utils.date.toDateTime(event.startDateTime) - new Date()) / (1000 * 60 * 60)\n );\n // const tileLink = `/event/${event.eventSlug}`;\n // const title = event.eventTitle;\n const date = getAESTDate(event.startDateTime, 'MMMM d');\n const duration = event.duration;\n const isPast = utils.date.toDateTime(event.startDateTime) - new Date() < 0;\n const fullyBooked = event.numOfPlaces && (event.usedNumOfPlaces || 0) >= event.numOfPlaces;\n\n return (\n } tiles React elements, required\n * @param {Object} style Style object, required\n * @param {string} cssClass\n * @param {string} useSlider Use SlickSlider, default: false\n * @param {Object} settings Tile Settings, required\n * @param {...Object} attrs Other attributes in the list level\n */\nexport function TileList({tiles, style, overridingStyle, cssClass, useSlider = false, settings = defaultSettings, ...attrs}) {\n const s = style || {};\n const ss = overridingStyle || {};\n const slickSettings = settings.slickSettings;\n\n useSlider = useSlider && tiles.length > 1\n slickSettings.infinite = tiles.length > 2\n\n if (useSlider) {\n return (\n \n \n \n )\n}","import { variables, mq } from 'cssInJs';\nimport { settings as defaultSettings } from 'site/tileList/config';\n\n//import { rgba } from 'polished';\n\nexport function getTileStyle(settings = defaultSettings) {\n const numOfTilesPerBreakpoints = settings.numOfTilesPerBreakpoints\n const marginLR = settings.marginLR\n const marginTB = settings.marginTB\n\n return {\n tile: mq({\n paddingLeft: marginLR.map(x => x === null ? null : x / 2),\n paddingRight: marginLR.map(x => x === null ? null : x / 2),\n paddingTop: marginTB.map(x => x === null ? null : x / 2),\n paddingBottom: marginTB.map(x => x === null ? null : x / 2),\n maxWidth: numOfTilesPerBreakpoints.map(x => x === null ? null : 100 / x + '%'),\n flexBasis: numOfTilesPerBreakpoints.map(x => x === null ? null : 100 / x + '%'),\n flexGrow: 0,\n flexShrink: 0,\n textAlign: 'left',\n display: 'flex',\n flexDirection: 'column',\n color: 'inherit',\n ':hover': {\n textDecoration: 'none',\n color: 'inherit',\n '.tileBg': {\n transform: 'scale(1.02)',\n transition: 'all .2s ease-in-out'\n },\n '.tileContent': {\n backgroundColor: variables.greenColor\n }\n }\n }),\n tileSlider: mq({\n maxWidth: '100% !important'\n }),\n tileBg: mq({\n backgroundColor: 'white',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n height: 0,\n paddingBottom: '56.25%',\n }),\n tileContent: mq({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n lineHeight: 1.3,\n //boxShadow: '4px 4px 14px 4px rgba(190,190,190,0.5)',\n backgroundColor: variables.blueColor,\n marginTop: [10],\n padding: [20],\n transition: 'all .2s ease-in-out',\n color:'white'\n }),\n title: mq({\n //fontFamily: variables.familyHeader,\n fontSize: '1.3rem',\n textTransform: 'uppercase',\n lineHeight: 1.3,\n //fontWeight: 900,\n //textAlign: 'center',\n fontWeight:700\n }),\n desc: mq({\n marginTop: 5,\n fontSize: '0.9rem',\n display: '-webkit-box',\n WebkitLineClamp: '9',\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n fontWeight:400\n }),\n }\n}\n\nexport function getTileListOverridingStyle() {\n return {\n tiles: mq({\n alignItems: 'flex-start',\n })\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\nimport { TileList } from 'site/tileList/tileList';\nimport { getTileListStyle } from 'site/tileList/tileListStyle';\n\nimport { PageTile } from 'site/_cmsItems/pageTiles/view/pageTile/pageTile';\n\nexport function CategoryTiles({ categories }) {\n const pages = React.useMemo(() => getPages(categories), [categories]);\n\n if (categories.length === 0) return \n {fullyBooked && (\n \n );\n}\n","import { variables, mq } from 'cssInJs';\nimport { settings as defaultSettings } from 'site/tileList/config';\n\n//import { rgba } from 'polished';\n\nexport function getTileStyle(settings = defaultSettings) {\n const numOfTilesPerBreakpoints = settings.numOfTilesPerBreakpoints;\n const marginLR = settings.marginLR;\n const marginTB = settings.marginTB;\n\n return {\n tile: mq({\n paddingLeft: marginLR.map((x) => (x === null ? null : x / 2)),\n paddingRight: marginLR.map((x) => (x === null ? null : x / 2)),\n paddingTop: marginTB.map((x) => (x === null ? null : x / 2)),\n paddingBottom: marginTB.map((x) => (x === null ? null : x / 2)),\n maxWidth: numOfTilesPerBreakpoints.map((x) => (x === null ? null : 100 / x + '%')),\n flexBasis: numOfTilesPerBreakpoints.map((x) => (x === null ? null : 100 / x + '%')),\n flexGrow: 0,\n flexShrink: 0,\n textAlign: 'left',\n display: 'flex',\n flexDirection: 'column',\n color: 'inherit',\n ':hover': {\n textDecoration: 'none',\n color: 'inherit',\n '.tileBg': {\n transform: 'scale(1.02)',\n transition: 'all .2s ease-in-out',\n },\n '.tileContent': {\n backgroundColor: variables.greenColor,\n },\n },\n }),\n tileSlider: mq({\n maxWidth: '100% !important',\n }),\n tileBg: mq({\n backgroundColor: 'white',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n height: 0,\n paddingBottom: '56.25%',\n }),\n tileContent: mq({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n lineHeight: 1.3,\n //boxShadow: '4px 4px 14px 4px rgba(190,190,190,0.5)',\n backgroundColor: variables.blueColor,\n // marginTop: [10],\n padding: [20],\n minHeight: ['10rem'],\n transition: 'all .2s ease-in-out',\n color: 'white',\n }),\n datetime: mq({\n marginBottom: '0.5rem',\n }),\n duration: mq({\n fontSize: '0.8rem',\n }),\n title: mq({\n //fontFamily: variables.familyHeader,\n fontSize: '1.1rem',\n textTransform: 'uppercase',\n lineHeight: 1.3,\n //fontWeight: 900,\n //textAlign: 'center',\n fontWeight: 700,\n }),\n desc: mq({\n marginTop: 5,\n fontSize: '0.9rem',\n display: '-webkit-box',\n WebkitLineClamp: '9',\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n // fontWeight: 400,\n }),\n };\n}\n\nexport function getTileListOverridingStyle() {\n return {\n tiles: mq({\n alignItems: 'flex-start',\n }),\n };\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { mq } from 'cssInJs';\nimport React from 'react';\nimport { TileList } from 'site/tileList/tileList';\nimport { getTileListStyle } from 'site/tileList/tileListStyle';\n\nimport { EventTile } from './tile/eventTile';\nimport { getAESTMonth } from 'site/_helpers/dateTime';\n\nexport function EventTiles({ events }) {\n const months = React.useMemo(() => getMonths(events), [events]);\n\n if (months.length === 0) return ![]()
;\n }\n return null;\n}\n\nfunction replaceButton(node) {\n if (node.children && node.children.some((x) => x.name === 'span')) return null;\n const props = attributesToProps(node.attribs);\n return React.createElement(node.name, props, {domToReact(node.children, options)});\n}\n\nfunction replaceEmbedCode(node) {\n const id = node.attribs['data-embed-jaba'];\n const found = utils.array.find(_embedDataList, (x) => x.id === id);\n if (found) {\n //console.log(found)\n return \n \n {\n e.stopPropagation();\n setShowPopup(false);\n }}\n addToCart={addToCart}\n product={product}\n />\n \n );\n}\n\nfunction ProductPopup({ showPopup, onClosed, product, addToCart }) {\n const title = product.guideTitle || product.tileTitle;\n const image = product.tileImageUrl && utils.site.resourcePath(product.tileImageUrl);\n const desc = product.ecmDescription || product.tileDesc;\n const price = utils.money.formatMoney(product.price);\n\n const guide = {\n lineHeight: '1.3',\n textAlign: 'center',\n };\n return (\n \n
\n \n );\n}\n","import { variables, mq } from 'cssInJs';\nimport { settings as defaultSettings } from 'site/tileList/config';\n\nimport { darken } from 'polished';\n\nexport function getTileStyle(settings = defaultSettings) {\n const numOfTilesPerBreakpoints = settings.numOfTilesPerBreakpoints;\n const marginLR = settings.marginLR;\n const marginTB = settings.marginTB;\n\n return {\n tile: mq({\n paddingLeft: marginLR.map((x) => (x === null ? null : x / 2)),\n paddingRight: marginLR.map((x) => (x === null ? null : x / 2)),\n paddingTop: marginTB.map((x) => (x === null ? null : x / 2)),\n paddingBottom: marginTB.map((x) => (x === null ? null : x / 2)),\n maxWidth: numOfTilesPerBreakpoints.map((x) => (x === null ? null : 100 / x + '%')),\n flexBasis: numOfTilesPerBreakpoints.map((x) => (x === null ? null : 100 / x + '%')),\n flexGrow: 0,\n flexShrink: 0,\n textAlign: 'left',\n display: 'flex',\n flexDirection: 'column',\n color: 'inherit',\n ':hover': {\n textDecoration: 'none',\n color: 'inherit',\n '.tileBg': {\n transform: 'scale(1.02)',\n transition: 'all .2s ease-in-out',\n },\n '.tileContent': {\n backgroundColor: variables.greenColor,\n },\n '.tileEcm': {\n backgroundColor: darken(0.1, variables.greenColor),\n },\n },\n }),\n tileSlider: mq({\n maxWidth: '100% !important',\n }),\n tileBg: mq({\n backgroundColor: 'white',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n height: 0,\n paddingBottom: '56.25%',\n }),\n tileContent: mq({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n lineHeight: 1.3,\n //boxShadow: '4px 4px 14px 4px rgba(190,190,190,0.5)',\n backgroundColor: variables.blueColor,\n marginTop: [10],\n padding: [20],\n transition: 'all .2s ease-in-out',\n color: 'white',\n }),\n tileEcm: mq({\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 0,\n lineHeight: 1.3,\n //boxShadow: '4px 4px 14px 4px rgba(190,190,190,0.5)',\n backgroundColor: darken(0.1, variables.blueColor),\n marginTop: [0],\n padding: [20],\n transition: 'all .2s ease-in-out',\n color: 'white',\n }),\n title: mq({\n //fontFamily: variables.familyHeader,\n fontSize: '1.3rem',\n textTransform: 'uppercase',\n lineHeight: 1.3,\n //fontWeight: 900,\n //textAlign: 'center',\n fontWeight: 700,\n }),\n desc: mq({\n marginTop: 5,\n fontSize: '0.9rem',\n display: '-webkit-box',\n WebkitLineClamp: '9',\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n fontWeight: 400,\n }),\n };\n}\n\nexport function getTileListOverridingStyle() {\n return {\n tiles: mq({\n alignItems: 'flex-start',\n }),\n };\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\nimport { TileList } from 'site/tileList/tileList';\nimport { getTileListStyle } from 'site/tileList/tileListStyle';\n\nimport { ProductTile } from './productTile/productTile';\n\nexport function GuideTiles({ guides, categories }) {\n const products = React.useMemo(() => getProducts(guides, categories), [guides, categories]);\n const tiles = products.map((product, index) => (\n Verifying your email...
\n
\n}\n","import React from 'react';\nimport env from 'env';\nimport { usePost } from 'components';\nimport { SiteLink } from 'components';\nimport { useRouter } from 'components';\nimport { Loading, ErrorPopup } from 'components';\nimport { Button, ErrorMessage } from 'components';\nimport { IoReturnUpBack } from 'react-icons/io5';\n\nexport function CreateAccountLoading() {\n const { query } = useRouter();\n const token = (query && query.u) || '';\n const post = usePost();\n\n React.useEffect(() => {\n post.send(env.apiBase + '/api/profile/validateToken', { token: token });\n // eslint-disable-next-line\n }, []);\n\n if (post.loading()) {\n return (\n Your email is successfully verified.
\nPayment
\n\nValidating Request...
\n Invalid link - no corporate linked.
;\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport { Route, Redirect } from 'react-router-dom';\n\nimport DashboardLayoutRoute from 'layout/dashboardLayout';\nimport DashboardNoAuthLayoutRoute from 'layout/dashboardNoAuthLayout';\n\nimport { Login } from 'auth';\nimport { ChangePassword } from 'site/members/profile/changePassword';\nimport { ForgotPassword } from 'auth/controls/forgotPassword/forgotPassword';\nimport { ResetPassword } from 'auth/controls/resetPassword/resetPassword';\nimport { VerifyEmail } from 'auth/controls/verifyEmail/verifyEmail';\nimport { CreateAccountLoading } from 'auth/controls/createAccount/createAccount';\nimport { MenuLoader } from './menuLoader';\n\n// import { Dashboard } from 'site/members/dashboard/dashboard';\n\nconst MemberLayout = ({ children }) => (\n Create an account
\n\n
\n\n \n
\n \n Email: {data.email}\n
\n \n \n \n LOG IN\n \n
\n \n \n \n
\n);\nexport default MemberLayout;\n","import React from 'react';\nimport { useAuth } from 'auth';\nimport { SiteLink } from 'components';\n\nexport function NoPermission(props) {\n const auth = useAuth();\n const debugInfo = props.debugInfo;\n\n function goBack(e) {\n e.preventDefault();\n if (typeof window !== `undefined`) {\n window.history.back();\n }\n }\n\n const loggedIn = !!auth.user;\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport env from 'env';\nimport { useGet } from 'components';\nimport { Loading } from 'components';\nimport { useRouter } from '../components';\nimport { useAuth } from 'auth';\nimport { NoPermission } from 'components/notFound/noPermission';\n\nconst PermissionCheckFirst = ({ children, ...rest }) => {\n const isCancelled = React.useRef(false);\n const [sessionChecked, setSessionChecked] = React.useState(false);\n const { pathname, navigate, Redirect } = useRouter();\n const auth = useAuth();\n const get = useGet();\n\n React.useEffect(() => {\n const checkAuth = async () => {\n if (!isCancelled.current) {\n const loggedIn = await auth.loggedIn();\n // console.log({ loggedIn })\n if (!loggedIn) {\n navigate('/member/login');\n } else {\n setSessionChecked(true);\n if (get.status === 'ready')\n get.send(env.apiBase + '/api/member/canAccess?url=' + encodeURIComponent(pathname));\n }\n }\n };\n checkAuth();\n return () => {\n isCancelled.current = true;\n };\n // eslint-disable-next-line\n }, [auth, navigate]);\n\n if (!sessionChecked || !get.done()) {\n return (\n \n
\n No Permission
\n {!loggedIn && (\n\n
\n )}\n\n {loggedIn && (\n \n To access this page, please
\n
\n )}\n\n Sorry, you don't have a permission to this page.
\n\n \n
\n\n {debugInfo && (\n \n Error message: {debugInfo.pageUrl} - {debugInfo.loadFrom}{' '}\n \n )}\n \n
\n );\n } else {\n console.log(get.response);\n if (get.response.redirectUrl) {\n return {children}
;\n }\n }\n};\n\nexport default PermissionCheckFirst;","import facepaint from 'facepaint'\n// 'sm', 'md', 'lg', 'xl', 'xxl'\nconst breakpoints = [576, 768, 992, 1200, 1600, 1900, 2200] \n\nexport const mqBanner = facepaint(\n breakpoints.map(bp => `@media (min-width: ${bp}px)`)\n)\n\n// 576, 768, 992, 1200, 1600, 1900, 2200\nexport const bannerThin = [180, 190, 200, 220, 250, 270, 290, 300]\nexport const bannerStandard = [350, 350, 400, 450, 500, 550, 600, 700]\n\nexport const getBannerSize = (setName) => {\n if (setName === 'standard')\n return bannerStandard\n else if (setName === 'thin')\n return bannerThin\n else\n return bannerStandard\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport utils from 'utils';\nimport { SiteLink } from 'components';\nimport { getImageBannerStyle } from './singlePanelStyle';\n\nexport function SingleBannerPanel({ bgUrl, heightSet, photoCredit, photoCreditUrl }) {\n const cssClass = utils.classNames(`single-banner`, `banner-item`);\n const s = getImageBannerStyle(heightSet);\n\n return (\n \n {(photoCredit && !photoCreditUrl) && {photoCredit} }\n
\n );\n}\n","import { mqBanner, getBannerSize } from 'site/bannerSize/bannerSize';\n\nexport function getImageBannerStyle(heightSet) {\n const bannerSize = getBannerSize(heightSet);\n\n return {\n bannerHeight: mqBanner({\n height: bannerSize\n }),\n photoCredit: mqBanner({\n color: 'white',\n fontSize: '0.8rem',\n transform: 'rotate(-90deg) translate(-50%, 10px)',\n position: 'absolute',\n top: '50%',\n left: '0',\n textAlign: 'center',\n transformOrigin: 'left top',\n maxWidth: bannerSize.map(x => x * 0.9),\n '&:hover, &:active': {\n color: 'white'\n }\n })\n }\n}","import utils from 'utils';\nimport { utcToZonedTime, format } from 'date-fns-tz';\nimport Timespan from 'readable-timespan';\n\nexport const baseTimeZone = 'Australia/Sydney';\nexport function getAESTMonth(date) {\n const zonedTime = utcToZonedTime(date, baseTimeZone);\n return {\n title: format(zonedTime, 'MMMM yyyy', { timeZone: baseTimeZone }),\n id: format(zonedTime, 'yyyy-MM', { timeZone: baseTimeZone }),\n };\n}\n\nexport function getAESTDate(date, formatStr) {\n return getZonedTimeFormat(date, baseTimeZone, formatStr);\n}\n\nexport function getZonedTimeFormat(date, timeZone, formatStr = 'yyyy-MM-dd HH:mm:ss zzz') {\n if (!date) return null;\n const zonedTime = utcToZonedTime(date, timeZone);\n return format(zonedTime, formatStr, { timeZone });\n}\n\nexport function getTimeTextForTimeZone(fromDate, toDate, timeZone) {\n const formatFn = (date) => (getZonedTimeFormat(date, timeZone, 'h:mmaaa') || '').replace(':00', '');\n if (!fromDate) return '';\n if (!toDate || toDate <= fromDate) return formatFn(fromDate);\n return `${formatFn(fromDate)} to ${formatFn(toDate)}`;\n}\n\nexport function getCurrentTimeZone() {\n try {\n return Intl.DateTimeFormat().resolvedOptions().timeZone;\n } catch (e) {}\n return null;\n}\n\nexport function timeLeft(date) {\n const timespan = new Timespan();\n return timespan.parse(date - new Date());\n}\n\n// https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\n// timeTest('2021-10-30T13:00:00+11:00');\nexport function timeTest(dateObj) {\n const date = utils.date.toDate(dateObj);\n console.log(dateObj);\n console.log('Local', date);\n console.log('Adelaide', getZonedTimeFormat(date, 'Australia/Adelaide'));\n console.log('Sydney', getZonedTimeFormat(date, 'Australia/Sydney'));\n console.log('Brisbane', getZonedTimeFormat(date, 'Australia/Brisbane'));\n console.log('Darwin', getZonedTimeFormat(date, 'Australia/Darwin'));\n console.log('Perth', getZonedTimeFormat(date, 'Australia/Perth'));\n}\n","import React from 'react';\nimport { createPortal } from \"react-dom\";\n\nexport function Portal({children}){\n const [el] = React.useState(document.createElement('div'));\n React.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}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport React from 'react';\nimport { Portal } from \"site/portal/portal\";\nimport { getPopupStyle } from './popupStyle';\nimport { IoMdCloseCircleOutline } from 'react-icons/io'\n\nexport function Popup({ children, showPopup, onClosed, ...attrs }) {\n const options = { ...{ popupSize: 'medium' }, ...attrs }\n const s = getPopupStyle()\n return {photoCredit}
}\n {(photoCredit && photoCreditUrl) && \n
\n \n
\n {showPopup && children}
\n {errorMessage}
: null;\n}\n\nexport function ServerErrors({ errors }) {\n const errorMessage = errors?.message || errors;\n // console.log(errorMessage, errors);\n return errorMessage ? {errorMessage}
: null;\n}\n","import { useEffect, useState } from 'react';\nconst useIsMounted = () => {\n const [isMounted, setIsMouted] = useState(false);\n useEffect(() => {\n setIsMouted(true);\n return () => setIsMouted(false);\n }, []);\n return isMounted;\n};\nexport { useIsMounted };\n","import React from 'react';\n\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\nimport { FieldError, ServerErrors } from '@site/_helpers';\n\nimport env from 'env';\nimport { ErrorMessage } from 'components';\nimport { usePost } from 'components';\nimport { useStore } from 'store';\nimport { useRouter } from 'components';\n\nconst schema = yup.object().shape({\n email: yup.string().nullable().required('Email is required.'),\n firstName: yup.string().nullable().required('First Name is required.'),\n surname: yup.string().nullable().required('Surname is required.'),\n phone: yup.string().nullable(),\n numberOfTickets: yup\n .number()\n .nullable()\n .typeError('Number of Tickets must be a number')\n .required('Please provide Number of Tickets.')\n .min(1, 'Number of Tickets must be more than 1.'),\n});\n\nexport function RegisterForm({ event, onClosed }) {\n const post = usePost();\n const { dispatch } = useStore();\n const { push } = useRouter();\n const [registered, setRegistered] = React.useState(false);\n const [currentCartItems, setCurrentCartItems] = React.useState(0);\n const defaultValues = event.register || {};\n\n const useAddToCart = event.eventType === 0 /*PurchaseTicket*/ && event.price;\n\n const {\n formState: { isSubmitting, errors },\n register,\n handleSubmit,\n reset,\n } = useForm({ defaultValues, resolver: yupResolver(schema) });\n const [serverErrors, setServerErrors] = React.useState([]);\n\n async function onSubmit(model) {\n try {\n if (useAddToCart) {\n post.send(env.apiBase + '/api/event/addToCart', {\n eventId: event.eventId,\n register: model,\n cartId: env.getDevCartId(),\n });\n } else {\n post.send(env.apiBase + '/api/event/register', { eventId: event.eventId, register: model });\n }\n } catch (e) {\n reset(model);\n setServerErrors(e);\n }\n }\n\n React.useEffect(() => {\n if (post.done()) {\n post.reset();\n reset({ numberOfTickets: 1 });\n\n const useAddToCart = event.eventType === 0 /*PurchaseTicket*/ && event.price;\n if (useAddToCart) {\n const cartInfo = post.response.results.cartInfo;\n console.log(cartInfo);\n env.setDevCartId(cartInfo.cartId);\n dispatch({\n type: 'SET_CART',\n payload: cartInfo,\n });\n\n setRegistered(true);\n setCurrentCartItems(cartInfo.numberOfItems);\n } else {\n setRegistered(true);\n }\n }\n }, [dispatch, post, reset, post.status, event]);\n\n // console.log(isValid, dirtyFields, isSubmitting, errors);\n return (\n \n \n
\n );\n}\n","import React from 'react';\nimport utils from 'utils';\nimport { Popup } from 'site/_popup/popup';\nimport { RegisterForm } from './registerForm';\n\nexport function RegisterPopup({ showPopup, onClosed, event }) {\n const title = event.eventTitle;\n\n return (\n \n
\n \n {title}\n {event.price != null && (\n - {(event.price || 0) === 0 ? 'FREE' : utils.money.formatMoney(event.price)}\n )}\n
\nPlease fill out the following registration form.
\n\n\n
\n \n
\n\n \n\n
\n\n {isPast || fullyBooked ? (\n
\n );\n}\n\nfunction Book({ event }) {\n const [showPopup, setShowPopup] = React.useState(false);\n\n let priceEl = null;\n if (event.eventType === 0 /*PurchaseTicket*/) {\n priceEl = (\n \n < Return to Events \n
\n {event.eventTitle}
\n\n
\n\n \n {date} @\n
\n \n \n {timeZones.current.map((x) => (\n \n {x.timeText} {x.area}\n \n ))}\n \n ({utils.site.toHoursText(duration)})\n
\n \n {timeZones.others.map((x, inx) => (\n \n {inx > 0 && | }\n {x.timeText} {x.area}\n \n ))}\n
\n \n\n \n\n
\n\n {isPast || fullyBooked ? (\n
\n \n
\n ) : (\n \n
\n );\n }\n\n return (\n \n {(event.price || 0) === 0 ? 'FREE' : utils.money.formatMoney(event.price)}\n
\n \n {\n e.stopPropagation();\n setShowPopup(false);\n }}\n event={event}\n />\n
\n );\n}\n\nfunction getTimeZones(event) {\n const tz = getCurrentTimeZone() || 'Australia/Sydney';\n const timeZones = [\n { timeZone: 'Australia/Adelaide', area: 'SA' },\n { timeZone: 'Australia/Sydney', area: 'NSW/VIC/TAS' },\n { timeZone: 'Australia/Brisbane', area: 'QLD' },\n { timeZone: 'Australia/Darwin', area: 'NT' },\n { timeZone: 'Australia/Perth', area: 'WA' },\n ];\n\n timeZones.forEach((x) => (x.timeText = getTimeTextForTimeZone(event.startDateTime, event.endDateTime, x.timeZone)));\n\n return { current: timeZones.filter((x) => tz === x.timeZone), others: timeZones.filter((x) => tz !== x.timeZone) };\n}\n","import React from 'react';\nimport env from 'env';\nimport utils from 'utils';\nimport { useGet } from 'components';\n// import { SiteLink } from 'components';\nimport { Loading, ErrorPopup } from 'components';\nimport { useRouter } from 'components';\nimport { SingleBannerPanel } from 'site/singleBanner/singlePanel';\nimport { EventDetails } from './eventDetails';\n\nconst r = utils.site.resourcePath;\nconst bannerImage = '/sites/preventingharm/media/bwbanners/adobestock_392700489.jpg';\n\nexport function EventView() {\n const { query } = useRouter();\n const get = useGet();\n\n const slug = query.slug || '';\n\n React.useEffect(() => {\n console.log('getting...');\n get.send(env.apiBase + `/api/event/getEvent/${slug}`);\n // eslint-disable-next-line\n }, [slug]);\n\n if (get.loading()) {\n return \n {priceEl}\n
\n \n \n
\n \n
\n \n );\n}\n","function payload(item, key, defaultVal = '') {\n const found = item.payloads.find(x => x.key === key);\n return found ? found.value : defaultVal;\n}\n\nfunction getCodeJson(item) {\n const code = payload(item, 'Code');\n const codeType = payload(item, 'CodeType');\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n return codeJson\n }\n return null\n}\n\n\nfunction hasItemInPageDataByItemTypeCode(pageData, itemTypeCode) {\n return hasItemInPageData(pageData, item => item.itemTypeCode === itemTypeCode);\n}\n\n// hasItemInPageData(cmsOption.pageData, '')\n// matchFn = (item) => item.itemTypeCode === itemTypeCode\nfunction hasItemInPageData(pageData, matchFn) {\n if (!pageData) return false;\n for (let i = 0; i < pageData.sections.length; i++) {\n if (hasItemInItems(pageData.sections[i].items, matchFn)) return true;\n }\n return false;\n}\n\nfunction hasItemInItems(items, matchFn) {\n if (!items) return false;\n for (let i = 0; i < items.length; i++) {\n if (matchFn(items[i])) return true;\n if (hasItemInItems(items[i].items, matchFn)) return true;\n }\n return false;\n}\n\nexport default { payload, getCodeJson, hasItemInPageData, hasItemInItems, hasItemInPageDataByItemTypeCode };","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport Slider from \"react-slick\";\nimport { settings as defaultSettings} from './config';\n\n/**\n * Tile List\n * @param {Array\n
\n );\n } else {\n return (\n \n \n {tiles}\n \n
\n \n
\n );\n }\n\n}","import { variables, mq } from '../../cssInJs';\nimport { settings as defaultSettings} from './config';\n/**\n * Tile List Style. This is only for list wrapper, not tile itself\n * @param {Object} settings Tile Settings, required\n */\nexport function getTileListStyle(settings = defaultSettings) {\n const marginLR = settings.marginLR;\n const marginTB = settings.marginTB;\n return {\n holder: mq({\n //maxWidth: 1000,\n margin: 'auto',\n marginTop: [30, null, 40],\n marginBottom: [30, null, 40],\n '.slick-prev, .slick-next': {\n top: [100],\n transform: 'translate(0, 0)',\n },\n '.slick-prev': {\n left: [10, null, -20]\n },\n '.slick-next': {\n right: [10, null, -20]\n },\n '.slick-prev:before, .slick-next:before': {\n color: variables.fontColor\n }\n }),\n tiles: mq({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexWrap: 'wrap',\n marginLeft: marginLR.map(x => x === null? null : -x / 2),\n marginRight: marginLR.map(x => x === null? null : -x / 2),\n marginTop: marginTB.map(x => x === null? null : x / 2),\n marginBottom: marginTB.map(x => x === null? null : x / 2),\n }),\n tilesSlider: mq({\n display: 'block',\n marginLeft: [15, null, 15],\n marginRight: [15, null, 15],\n })\n }\n}\n\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport utils from 'utils';\nimport { SiteLink } from 'components';\nimport { getTileStyle } from './pageTileStyle';\n\nexport function PageTile({ page, useSlider, disableLink }) {\n const tileLink = page.pageUrl;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const title = page.pageTitle;\n const desc = page.tileDesc || page.description;\n const s = getTileStyle();\n\n return (\n \n {tiles}\n
\n \n
\n {title}
\n {desc}
\n No available guides.
;\n\n const tiles = pages.map((page, index) => No available guides.
;\n\n const tiles = pages.map((page, index) => \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport cmsUtils from '../../cmsUtils';\nimport utils from 'utils';\nimport { CategoryTilesLoading } from 'site/ecm/category/categoryTilesLoading';\n\nexport function CategoryList(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n // console.log(cmsOption.pageData.pageUrl, cmsOption);\n const isCmsEdit = !!cmsOption.isCmsEdit;\n const pageUrl = cmsOption.pageData.pageUrl;\n const type = cmsUtils.payload(item, 'Type') || 'all';\n // console.log('item', item, isCmsEdit);\n\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\n\n return isCmsEdit ? (\n \n
\n ) : (\n \n Category/Guide List (This will list category tiles automatically)\n
\n \n
\n );\n}\n","import React from 'react';\nimport { CategoryList } from './view/categoryList';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'GuideProductList',\n itemElt: (item, cmsOption) => FULLY BOOKED
\n )}\n \n
\n \n {date} ({utils.site.toHoursText(duration)})\n
\n {title}
\n {desc}
\n No events.
;\n return (\n \n {months.map((month) => (\n
\n );\n}\n\nfunction MonthEventTiles({ events }) {\n if (events.length === 0) return \n
\n ))}\n {month.title}
\nNo events.
;\n\n const overridingStyle = {\n holder: mq({\n marginTop: [5, null, 5],\n }),\n };\n\n const tiles = events.map((event, index) => (\n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n// import cmsUtils from '../../cmsUtils';\nimport utils from 'utils';\nimport { EventTilesLoading } from '@site/event/eventList/eventTilesLoading';\n\nexport function EventList(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n // console.log(cmsOption.pageData.pageUrl, cmsOption);\n const isCmsEdit = !!cmsOption.isCmsEdit;\n // const pageUrl = cmsOption.pageData.pageUrl;\n // console.log('item', item, isCmsEdit);\n\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\n\n return isCmsEdit ? (\n \n
\n ) : (\n Event List (This will list event tiles automatically)
\n \n
\n );\n}\n","import React from 'react';\nimport { EventList } from './view/eventList';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'EventList',\n itemElt: (item, cmsOption) => No available guides.
;\n\n const tiles = pages.map((page, index) => \n No Guides\n
\n )\n }\n\n return (\n \n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\nimport env from 'env';\nimport { Button, ErrorMessage } from 'components';\nimport { usePost } from 'components';\nimport { useStore } from 'store';\nimport { useRouter } from 'components';\n\nexport function AddToCart({ product, useSlider, disableLink }) {\n const post = usePost();\n const { state, dispatch } = useStore();\n const { push } = useRouter();\n\n const exists = React.useMemo(() => checkExists(state, product), [state, product]);\n\n function addToCart(e) {\n e.preventDefault();\n e.stopPropagation();\n post.send(env.apiBase + '/api/guide/addToCart', { guideId: product.guideId });\n }\n\n function removeFromCart(e) {\n e.preventDefault();\n e.stopPropagation();\n post.send(env.apiBase + '/api/guide/removeFromCart', { guideId: product.guideId });\n }\n\n React.useEffect(() => {\n if (post.done()) {\n post.reset();\n const cartInfo = post.response.results.cartInfo;\n console.log(cartInfo);\n env.setDevCartId(cartInfo.cartId);\n dispatch({\n type: 'SET_CART',\n payload: cartInfo,\n });\n }\n }, [dispatch, post, post.status]);\n\n return (\n \n {exists && (\n \n )}\n {!exists && (\n \n )}\n {exists && (\n \n )}\n\n
\n );\n}\n\nfunction checkExists(state, product) {\n const orderItems = state?.cartInfo?.orderItems || [];\n const exists = orderItems.some((x) => x?.ext?.itemId === product.guideId);\n\n //console.log('checkExists', product.guideId, state, exists);\n return exists;\n}\n","import React from 'react';\nimport parse, { domToReact, attributesToProps } from 'html-react-parser';\nimport utils from '../../../../utils';\nimport env from '../../../../env';\n\n//https://github.com/remarkablemark/html-react-parser\n\nconst options = {\n replace,\n};\nlet _embedDataList = [];\nlet _cmsOption = {};\n\nexport function renderHtml(html) {\n return parse(html || '', options);\n}\n\nfunction replace(node) {\n //console.log(node)\n if (!env.isProd && node.type === 'tag' && node.name === 'img') {\n return replaceImg(node);\n } else if (node.type === 'tag' && node.attribs.class === 'button') {\n return replaceButton(node);\n } else if (node.type === 'tag' && node.attribs['data-embed-jaba']) {\n return replaceEmbedCode(node);\n }\n}\n\nfunction replaceImg(node) {\n if (node.attribs && node.attribs.src) {\n const props = attributesToProps(node.attribs);\n props.src = utils.site.resourcePath(node.attribs.src);\n // eslint-disable-next-line\n return {renderHtml(found.code, _cmsOption)}
;\n } else return null;\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\nimport utils from 'utils';\nimport { SiteLink } from 'components';\nimport { getTileStyle } from './pageTileStyle';\nimport { Popup } from 'site/_popup/popup';\n// import { ErrorPopup } from 'components';\nimport { AddToCart } from './addToCart';\nimport { renderHtml } from './renderHtml';\n\nexport function ProductTile({ product, useSlider }) {\n const [showPopup, setShowPopup] = React.useState(false);\n // console.log(product);\n const tileLink = '/products' + product.pageUrl;\n const imageUrl = utils.site.resourcePath(product.tileImageUrl);\n const title = product.guideTitle || product.tileTitle;\n const desc = product.tileDesc;\n const price = utils.money.formatMoney(product.price);\n\n function addToCart(e) {\n e.preventDefault();\n e.stopPropagation();\n console.log('addToCart');\n }\n\n function viewDetails(e) {\n e.preventDefault();\n e.stopPropagation();\n setShowPopup(true);\n }\n const s = getTileStyle();\n return (\n \n
\n {title}
\n {desc}
\n \n
\n\n \n {price}\n
\n \n
\n\n {title}
\n\n\n {image && (\n \n
\n )}\n \n
\n {renderHtml(desc)}
\n \n
\n {price}
\n\n \n No Guides\n
\n )\n }\n\n return (\n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n// import cmsUtils from '../../cmsUtils';\nimport utils from 'utils';\nimport { GuideTilesLoading } from 'site/members/guide/guideTilesLoading';\nimport { GuideTilesLoading as EcmGuideTilesLoading } from 'site/ecm/guide/guideTilesLoading';\n\nexport function GuideList(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n // console.log(cmsOption.pageData.pageUrl, cmsOption);\n const isCmsEdit = !!cmsOption.isCmsEdit;\n const pageUrl = cmsOption.requestPath || cmsOption.pageData.pageUrl;\n // console.log('item', item, isCmsEdit);\n\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\n const isCategoryShopUrl = utils.site.isCategoryShopUrl(pageUrl);\n // console.log(isCategoryShopUrl, pageUrl);\n\n return isCmsEdit ? (\n \n
\n ) : (\n Guide List (This will list guide tiles automatically)
\n \n {isCategoryShopUrl ?
\n );\n}\n","import React from 'react';\nimport { GuideList } from './view/guideList';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'GuideList',\n itemElt: (item, cmsOption) => {renderHtml(found.code, _cmsOption)}
;\n } else return null;\n}\n","import React, { useRef } from 'react';\nimport cmsUtils from '../../cmsUtils';\nimport utils from '../../../../utils';\n\nimport { useRouter } from '../../../../components';\n\nimport { handleElementLink } from '../../../../components';\nimport env from '../../../../env';\nimport { renderHtml } from './renderHtml';\n\n//import { Document, Page } from 'react-pdf'\n//import { Document, Page } from 'react-pdf/dist/entry.webpack';\n\nexport function Html(props) {\n const ver = env.ver;\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n const { history } = useRouter();\n //const [ pdfViewPath, setPdfViewPath ] = React.useState(null)\n //console.log('item', item, cmsOption);\n\n const year = new Date().getFullYear();\n let content = cmsOption.isCmsEdit\n ? cmsUtils.payload(item, 'Content')\n : cmsUtils\n .payload(item, 'Content')\n .replace(/__year__/g, year)\n .replace('__version__', \" PWA \" + ver + '');\n\n const cssClass = utils.classNames(\n 'cms_item',\n 'htmlPanel',\n cmsOption.isCmsEdit && 'html',\n item.cssClass || item.anchorName || ''\n );\n\n //let itemElt = ();\n\n function handleClick(e) {\n let target = '';\n if (e.target.closest('a')) {\n target = e.target.closest('a').getAttribute('target');\n }\n\n let href = '';\n if (e.target.closest('a')) {\n href = e.target.closest('a').getAttribute('href');\n }\n\n console.log(href);\n if ((href || '').toLowerCase().indexOf('/api/downloadfile') >= 0) {\n return;\n }\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 if (e.target.closest('a')) {\n let href = e.target.closest('a').getAttribute('href') + '';\n if (href.indexOf('#') !== -1) {\n let _href = href.split('#');\n console.log('_href', _href);\n let el = document.querySelector('section[data-cms-item-anchor=\"' + _href[1] + '\"]');\n if (el) {\n let anchorStatus = el.getAttribute('data-anchor-status');\n if (anchorStatus === 'collapse') {\n el.setAttribute('data-anchor-status', 'expand');\n el.classList.add('expand');\n } else {\n el.setAttribute('data-anchor-status', 'collapse');\n el.classList.remove('expand');\n }\n }\n e.preventDefault();\n e.stopPropagation();\n }\n }\n }\n }\n\n const htmlBlock = useRef(null);\n return (\n <>\n \n {photoCredit} }\n
\n );\n}\n","import { mqBanner, getBannerSize } from 'site/bannerSize/bannerSize';\n\nexport function getImageBannerStyle(heightSet) {\n const bannerSize = getBannerSize(heightSet);\n\n return {\n bannerHeight: mqBanner({\n height: bannerSize,\n backgroundPositionX: 'center'\n }),\n photoCredit: mqBanner({\n color: 'white',\n fontSize: '0.8rem',\n transform: 'rotate(-90deg) translate(-50%, 10px)',\n position: 'absolute',\n top: '50%',\n left: '0',\n textAlign: 'center',\n transformOrigin: 'left top',\n maxWidth: bannerSize.map(x => x * 0.9),\n '&:hover, &:active': {\n color: 'white'\n }\n })\n }\n}","import React from 'react';\nimport { ImagePanel } from './view/imagePanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'ImagePanel', \n itemElt: (item, cmsOption) => \n
\n \n {(photoCredit && !photoCreditUrl) && {photoCredit}
}\n {(photoCredit && photoCreditUrl) && \n
\n ) : (\n \n Member Dashboard (This will list cateogry/guide tiles automatically)\n
\n \n
\n );\n}\n","import React from 'react';\nimport { MemberDashboard } from './view/memberDashboard';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'MemberDashboard',\n itemElt: (item, cmsOption) => \n
\n ) : (\n \n Member Dashboard (This will list cateogry/guide tiles automatically)\n
\n \n
\n );\n}\n","import React from 'react';\nimport { MemberDashboardV2 } from './view/memberDashboardV2';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'MemberDashboardV2',\n itemElt: (item, cmsOption) => \n No Guides\n
\n )\n }\n\n return (\n \n
\n );\n}\n","/** @jsx jsx */\r\nimport { jsx } from '@emotion/core';\r\nimport utils from 'utils';\r\nimport { GuideTilesLoadingV2 } from 'site/members/guide/guideTilesLoadingV2';\r\n\r\nexport function NewCategoryList(props) {\r\n const item = props.item;\r\n const cmsOption = props.cmsOption || {};\r\n // console.log(cmsOption.pageData.pageUrl, cmsOption);\r\n const isCmsEdit = !!cmsOption.isCmsEdit;\r\n const pageUrl = cmsOption.requestPath || cmsOption.pageData.pageUrl;\r\n // console.log('item', item, isCmsEdit);\r\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\r\n\r\n return isCmsEdit ? (\r\n \r\n
\r\n ) : (\r\n New category List (This will list category tiles automatically)
\r\n \r\n
\r\n );\r\n}","import React from 'react';\nimport { NewCategoryList } from './view/newCategoryList';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'NewCategoryList',\n itemElt: (item, cmsOption) => {subItemsElts}
\n \n {topLabel && \n \n \n {/* \n \n \n */}\n {/* \n \n \n */}\n \n \n \n \n \n \n \n \n
\n}\n","//import { mq } from '../../cssInJs';\n\nexport function getShareButtonStyle() {\n return {\n shareButtons: {\n marginTop: '1.5rem',\n },\n shareButtonTitle: {\n fontSize: '0.8rem',\n marginLeft: '0.5rem',\n marginBottom: '0.3rem'\n },\n shareButton: {\n margin: 5\n },\n }\n} \n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n// import cmsUtils from '../../cmsUtils';\nimport utils from 'utils'\nimport { ShareButtons } from 'site/shareButtons/shareButtons'\n\nexport function SharingIcons(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(cmsOption)\n //console.log('item', item);\n\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\n const shareUrl = utils.site.fullUrl(window.location.pathname + window.location.search)\n\n return {topLabel}
}\n \n \n
\n}\n","import React from 'react';\nimport { SharingIcons } from './view/sharingIcons';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'SharingIcons', \n itemElt: (item, cmsOption) => \n
\n \n \n )\n\n}","import { fb, validators } from '../../../../lib/form';\n\nexport function getSignupFormModel(data) {\n \n let stateList = [\n {name: 'State', value: ''},\n {name: 'Australian Capital Territory', value: 'ACT'},\n {name: 'New South Wales', value: 'New South Wales'},\n {name: 'Victoria', value: 'Victoria'},\n {name: 'South Australia', value: 'South Australia'},\n {name: 'Queensland', value: 'Queensland'},\n {name: 'Western Australia', value: 'Western Australia'},\n {name: 'Northern Territory', value: 'Northern Territory'},\n {name: 'Tasmania', value: 'Tasmania'}\n ]\n \n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n //enquiry: [data.enquiry || '', [validators.Required()], { label: 'Your Message', type: 'textarea' }],\n attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }],\n state : [data.state || '', [], { label: null, type: 'select', options: stateList }],\n }); \n return model;\n}","import React from 'react';\nimport { SignupForm } from './view/signupForm';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'SignupForm', \n itemElt: (item, cmsOption) => \n \n
\n \r\n \r\n \r\n {canPlay && playerSize && }\r\n {canPlay && playerStatus === 'loaded' &&
\r\n \r\n {muted?
}\r\n\r\n {!canPlay && !mobileImageUrl && \r\n
}\r\n \n {/* {canPlayVideo() ?
\n );\n}\n","import React from 'react';\nimport { VideoPanel } from './view/videoPanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'VideoPanel', \n itemElt: (item, cmsOption) => \n \n {slides}\n \n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function BannerItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const captionButton = cmsUtils.payload(item, 'CaptionButton') && cmsUtils.payload(item, 'CaptionButton') !== \"\" ? cmsUtils.payload(item, 'CaptionButton') : \"READ MORE\";\n \n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n const titlePanel = captionTitle ? (\n linkUrl ? (\n \n { captionButton } \n
\n ) : ()\n ) : null;\n\n const linkOverlay = linkUrl && !captionTitle ? (\n \n {titlePanel &&
\n );\n\n\n}\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function Panel(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 bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n //console.log(bgTheme)\n\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || '');\n\n const subItemsElts = subItems.map((subItem, index) =>\n {titlePanel}
}\n {linkOverlay && linkOverlay}\n \n {subItemsElts}\n
\n handleClick(e)}>
\n {pdfView}\n \n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}\n\n\nfunction replaceEmbedCodes(block, cmsOption) {\n const embedDataList = cmsOption?.pageData?.embedDataList;\n const embedCodes = block.querySelectorAll('[data-embed-jaba]')\n embedCodes.forEach(embed => {\n const id = embed.getAttribute(\"data-embed-jaba\");\n const found = utils.array.find(embedDataList, x => x.id === id);\n if (found){\n //console.log(found)\n ReactDOM.render(, embed);\n }\n })\n //console.log(embedCodes, embedDataList)\n}\n\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function ImagePanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(cmsOption)\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n \n const cssClass = utils.classNames('cms_item', 'imagePanel', 'parallax', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n \n const bgUrl = cmsOption.pageOptions && cmsOption.pageOptions.imagePath ?\n utils.site.resourcePath(cmsOption.pageOptions.imagePath):\n utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const htmlBlock = React.useRef(null);\n const cssClass2 = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n const content = cmsUtils.payload(item, 'Content');\n\n return (\n \n
\n );\n}","//import { css, keyframes } from '@emotion/core'\n//import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq, variables } from '../../../cssInJs'\n\nexport default {\n pageTiles : css({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n overflow:'hidden'\n }),\n pageTile__tile : css(mq({\n flex: '0 0 100%',\n maxWidth: '100%',\n padding: '10px',\n zIndex:1,\n '&:nth-of-type(even)' : {\n '.pageTile__bsyc__bg' : mq({\n order: ['0',null,'2'],\n }),\n '.pageTile__bsyc__content__details' : mq({\n order: '1'\n })\n }\n })),\n\n tile__content : css({\n // display: 'flex',\n // flexDirection: 'row',\n // justifyContent: 'space-between',\n // width: '100%',\n // height: '100%',\n // cursor: 'pointer',\n // position: 'relative',\n // flexWrap: 'wrap',\n '&:hover' : {\n textDecoration: 'none',\n '& .pageTile__bsyc__content__details' : {\n color: 'white',\n backgroundColor: variables.greenColor\n // '&.default' : css({\n // backgroundColor: 'rgba(0,113,188,1)'\n // }),\n // '&.red' : css({\n // backgroundColor: 'rgba(211,61,2,1)'\n // }),\n // '&.green' : css({\n // backgroundColor: 'rgba(0, 146, 69,1)'\n // })\n },\n '& .pageTile__bsyc__bg2' : {\n //transform: scale(1.05)\n transform : 'scale(1.05)'\n }\n }\n }),\n\n tile__flip__wrapper : css({\n zIndex:'-1', \n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n width: '100%',\n height: '100%',\n cursor: 'pointer',\n position: 'relative',\n flexWrap: 'wrap'\n }),\n\n// tile__bg : css(mq({\n// height: '0',\n// //paddingTop: '30%',\n// paddingTop: ['50%','35%','30%'],\n// backgroundPosition: '50%',\n// backgroundRepeat: 'no-repeat',\n// backgroundSize: 'cover',\n// flex: '1 1 300px'\n// })),\n\ntile__bg : css(mq({\n height: '0',\n paddingTop: ['50%','35%','30%'],\n //height: ['50%','35%','30%'],\n flex: '1 1 300px',\n overflow:'hidden',\n position:'relative'\n})),\n\ntile__bg2 : css(mq({\n height: '100%',\n backgroundPosition: '50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n //overflow:'hidden',\n transition:'all .2s',\n position:'absolute',\n top:'0px',\n width:'100%'\n})),\n\n tile__details : css({\n overflow: 'hidden',\n flexGrow: '1',\n textAlign: 'center',\n width: '100%',\n bottom: '0',\n backgroundColor: variables.blueColor,\n // '&.default' : css({\n // backgroundColor: 'rgba(0, 113, 188,.5)'\n // }),\n // '&.red' : css({\n // backgroundColor: 'rgba(211, 61, 2,.5)'\n // }),\n // '&.green' : css({\n // backgroundColor: 'rgba(0, 146, 69,.5)'\n // }),\n //backgroundColor : '#77cf22',\n flex: '1 1 300px',\n transition: 'all .2s ease-in-out',\n color: '#ebebeb',\n position:'relative',\n '& .pageTile__bsyc__container' : mq({\n //position: 'absolute',\n position: ['static,',null,'absolute'],\n top: '50%',\n left:'50%',\n transform: ['none',null,'translate(-50%, -50%)'],\n width:['100%',null,'90%'],\n padding:['1rem',null,'0px'],\n '& .pageTile__bsyc__title' : {\n //fontFamily: 'proxima-soft, sans-serif',\n fontSize: '2rem',\n //textTransform: 'uppercase',\n fontWeight: '700',\n lineHeight: '1',\n margin: '0',\n paddingTop: '.5rem',\n paddingBottom: '.5rem',\n color:'inherit'\n },\n '& .pageTile__bsyc__desc' : {\n lineHeight: '1.3',\n fontSize: '.9rem',\n //color: '#3d3d3d',\n minHeight: '70px',\n color:'inherit',\n fontWeight:'400'\n }\n })\n })\n}","//import React from 'react';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function PageTilesBsyc(props) {\n const item = props.item;\n //const detailHoverBgColor = props.detailHoverBgColor ? props.detailHoverBgColor : \"black\";\n const cmsOption = props.cmsOption || {};\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'))\n const pageTileElts = pages.map((page, index) =>\n \n
\n \n {pageTileElts}\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 const colorTheme = page.colorTheme;\n const index = props.idx;\n return (\n \n \n \n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function SingleBanner(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const alignV = cmsUtils.payload(item, 'AlignV') || '50%';\n\n const cssClass = utils.classNames('cms_item', 'single-banner', 'banner-item', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n const titlePanel = captionTitle ? (\n linkUrl ? (\n\n
\n \n \n
\n \n \n
\n \n \n {\n (page.pageTitle && page.pageTitle !== '') &&\n
\n \n {page.pageTitle}\n
\n }\n\n \n {page.tileDesc || page.description}\n
\n \n {titlePanel &&
\n );\n\n\n}\n","import React, { useRef } from 'react';\nimport env from '../../../env';\nimport { usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Button, ErrorMessage } from '../../../components';\nimport { getContactModel } from './contactFormModel';\nimport { gtm } from '../../../lib/tracking';\nimport ReCAPTCHA from \"react-google-recaptcha\";\n\nexport function Contact(props) {\n const emailReceiver = props.emailReceiver;\n const fileAttachment = props.fileAttachment || 'false';\n \n const model = getContactModel({});\n const form = useForm(model, { usePlaceholder: true });\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const post = usePost();\n const recaptchaRef = useRef(null);\n\n function onSubmit(e) {\n form.validateForm(e, () => {\n const recaptchaValue = recaptchaRef.current.getValue();\n const value = { ...form.getValue(), emailReceiver: emailReceiver, recaptchaValue : recaptchaValue }; \n var files = form.getFiles();\n var formData = new FormData();\n formData.append('jsonData', JSON.stringify(value))\n files.forEach(file => {\n (file.files || []).forEach(uploadFile => {\n formData.append(file.name, uploadFile)\n })\n });\n //post.send(env.apiBase + \"/api/contact/send\", value);\n post.sendFormData(env.apiBase + \"/api/contact/send\", formData);\n setSendingStatus('pending')\n })\n\n console.log('submitting')\n }\n\n // if (status === 'done') {\n // //navigate(`/task/view/${taskId}`)\n // window.location.reload();\n // }\n\n if (post.done() && sendingStatus === 'pending') {\n var value = form.getValue();\n gtm.sendEvent('contactFormSubmitted', {contactEmail: value.email} )\n form.reset(model);\n recaptchaRef.current.reset();\n setSendingStatus(null)\n }\n\n const render = (name) => form.renderControl(name, null);\n\n return (\n \n );\n}","import { fb, validators } from '../../../lib/form';\n\nexport function getContactModel(data) {\n \n let stateList = [\n {name: 'State', value: ''},\n {name: 'Australian Capital Territory', value: 'ACT'},\n {name: 'New South Wales', value: 'New South Wales'},\n {name: 'Victoria', value: 'Victoria'},\n {name: 'South Australia', value: 'South Australia'},\n {name: 'Queensland', value: 'Queensland'},\n {name: 'Western Australia', value: 'Western Australia'},\n {name: 'Northern Territory', value: 'Northern Territory'},\n {name: 'Tasmania', value: 'Tasmania'}\n ]\n \n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [validators.Required()], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n enquiry: [data.enquiry || '', [validators.Required()], { label: 'Your Message', type: 'textarea' }],\n attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }],\n state : [data.state || '', [validators.Required()], { label: null, type: 'select', options: stateList }],\n }); \n return model;\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { Contact } from './contactForm';\n\nexport function ContactForm(props) {\n const item = props.item;\n console.log('item', item);\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const emailReceiver = cmsUtils.payload(item, 'EmailReceiver');\n const fileAttachment = cmsUtils.payload(item, 'FileAttachment') || \"false\";\n\n const cssClass = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n\n //let itemElt = ();\n\n return (\n {titlePanel}
}\n \n\n
\n )\n}","import React from 'react';\n// import { Item } from '../../items/item';\n// import { SiteLink } from 'shared/link/siteLink';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { YoutubeBannerMobilePopup } from '../../../lib/youtube/youtubeBanner--mobilePopup';\n//import env from '../../../env';\n//import Slider from 'modules/slider/slider';\n//import {BannerPanel} from '../bannerPanel/view';\n\nexport function VideoPanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const videoCode = cmsUtils.payload(item, 'YoutubeCode');\n const playerId = 'ytBanner-' + (item.itemId).substr(0, 8);\n\n const video = {\n heightSet: heightSet,\n videoLinkOrId: videoCode,\n playerId: playerId\n }\n\n //const enableYoutube = env.isProd;\n const canPlayVideo = () => utils.css.screenWidth() >= 1200\n\n const cssClass = utils.classNames('cms_item', 'youtubePanel', item.cssClass || item.anchorName || '');\n\n //console.log(window.innerWidth, canPlayVideo())\n\n return (\n \n
\n\n \n {/* {canPlayVideo() ?
\n );\n}\n\n// function MobileSlider(props) {\n// const item = props.item;\n// const subItems = item.items || [];\n \n// const slides = subItems.map((subItem, index) =>\n// \n// {slides}\n//
\n// );\n// }\n\n// function SlideItem(props){\n// const item = props.item;\n// const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n// return (\n// \n// 
\n//
\n// );\n\n// }","import React from 'react';\nimport env from '../../env';\nimport { SiteLink} from '../../components';\nimport { usePost } from '../../components';\nimport { ErrorPopup, Loading } from '../../components';\nimport { useRouter } from '../../components';\n\nexport function SearchResult(props) {\n const { query } = useRouter();\n const post = usePost();\n const keyword = query.q;\n //console.log(keyword);\n\n React.useEffect(() => {\n post.send(env.apiBase + '/api/search/search', { keyword: keyword });\n // eslint-disable-next-line\n }, [keyword]);\n\n if (post.loading()) {\n return \n No result found.\n
\n )\n return (\n <>\n {pages.length > 0 && \n
}\n \n );\n}\n\nfunction PageList({pages}) {\n return (\n Pages
\n\n {pages.map((page, index) =>\n
\n );\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport { useEffect } from 'react';\n//import style from './style';\n\nexport function TextWithJavScript(props){\n \n const item = props.item;\n const cssClass = props.cssClass;\n const code = cmsUtils.payload(item, 'Code') || '';\n\n const javaScriptCode = code.substring(code.indexOf(\"\n
\n )}\n \n {page.pageTitle} \n \n
\n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SearchResult } from '../../../site/searchResult/searchResult';\nimport { InstagramFeed } from '../../../components';\nimport { AppVersion } from '../../../components';\nimport { TextWithJavScript } from '../../../components/TextWithJavaScript/view';\n\nexport function Code(props) {\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const code = cmsUtils.payload(item, 'Code');\n const codeType = cmsUtils.payload(item, 'CodeType');\n let controls = null;\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n if (codeJson.control === 'search-results') {\n controls = \n
\n )\n else if (codeType === 'Text')\n return (\n \n )\n else if(codeType === 'TestWithJs'){\n return(\n \n Code Type: {codeType}\n {code}\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}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function BlogPostTitle(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const title = cmsUtils.payload(item, 'PageTitle');\n const postDate = cmsUtils.payload(item, 'PostDate');\n\n const cssClass = utils.classNames('blogView__titleContainer', 'cms_item', item.cssClass || item.anchorName || '');\n\n return (\n \n
\n \n
\n \n {page.pageTitle}\n
\n \n {page.tileDesc || page.description}\n
\n READ MORE
\n \n
\n );\n}\n","import React from 'react';\n//import cmsUtils from '../../utils/cmsUtils';\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 {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}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function MultiColumnPanel(props){\n const item = props.item;\n const mobileReverse = cmsUtils.payload(item, 'MobileReverse', 'no');\n //const subItems = item.items || [];\n const subItems = (mobileReverse === \"yes\" && utils.css.screenWidth() <= 550) ? item.items.reverse() || [] : item.items || [];\n const cmsOption = props.cmsOption || {};\n const columnWidths = cmsUtils.payload(item, 'ColumnWidths').split(\",\");\n const mobileColumnWidths = cmsUtils.payload(item, 'MobileColumnWidths').split(\",\");\n const countItem = {countD : 0, countM : 0, col : \"\"};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n \n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'multiColumnPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || ''); \n\n function setupClass(index){ \n countItem.col = \"\";\n if(columnWidths.length === countItem.countD){\n countItem.countD = 0;\n }\n\n if(mobileColumnWidths.length === countItem.countM){\n countItem.countM = 0;\n }\n \n countItem.col = \"col-sm\" + (columnWidths[countItem.countD] === \"13\" ? \"\" : \"-\" + columnWidths[countItem.countD]) + \" col-\" + mobileColumnWidths[countItem.countM];\n countItem.countD ++;\n countItem.countM ++;\n };\n\n const subItemsElts = subItems.map((subItem, index) => {\n setupClass();\n return \n
\n \n
\n \n
\n {captionTitleYoutube}
\n \n\n
\n } \n );\n return (\n \n
\n \n {subItemsElts}\n
\n handleClick(e)}>\n
\n )\n\n return (\n \n {e.preventDefault(); e.stopPropagation();}}>{buttonTitle}
\n \n \n To edit the button title, please double click or open item editor
\n handleClick(e)}>\n
\n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}","// //import { css, keyframes } from '@emotion/core'\n// //import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq } from '../../cssInJs'\n\nexport default {\n photoGallery : css({\n maxWidth : '960px',\n margin: 'auto'\n }),\n thumbnails : css({\n display:'flex',\n flexWrap:'wrap',\n marginLeft:'-5px',\n marginRight:'-5px'\n }),\n thumbnail : css(mq({\n //flexBasis: ['50%','25%','33.33%'],\n flexBasis: ['50%','25%','16.66%'],\n //padding: ['5px']\n padding:'5px',\n cursor: 'pointer'\n })),\n bg : {\n paddingBottom: '100%',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\nimport { useState, useEffect } from 'react';\n\nimport utils from '../../utils';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport FsLightbox from 'fslightbox-react';\nimport { createPortal } from \"react-dom\";\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 PhotoGallery(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'photoGallery', item.cssClass || item.anchorName || '');\n const _images = cmsUtils.payload(item, 'ImageUrl') ? cmsUtils.payload(item, 'ImageUrl').split(\"|\") : [];\n const _thumbImages = [];\n\n // _images.forEach(el => {\n // let a = el.split(\"/\");\n // console.log('e',e);\n // });\n\n //let a = _images[0].split(\"/\");\n \n if(_images.length > 0){\n _images.forEach(el => {\n let _texts = el.split('/');\n let _text = el.replace(_texts[_texts.length-1], \"@thumb/\" + _texts[_texts.length-1]);\n _thumbImages.push(_text);\n });\n //console.log('222', _images2);\n }\n\n //const _images = ['https://jaba.com.au/sites/jaba/media/images/multicolour-services-min.jpg'];\n const [toggler, setToggler] = useState(false);\n const [popupIndex, setPopupIndex] = useState(0);\n \n return(\n \n {buttonTitle}
\n \n \n \n {/* \n \n\n
\n ); \n}","import { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\nexport default{\n testimonialPanel : css({\n marginTop: '20px',\n marginBottom: '20px',\n backgroundColor: 'transparent',\n '& .slick-prev:before, .slick-next:before' : {\n color : 'black'\n },\n '& .slick-next' : {\n right : '-2%'\n },\n '& .slick-prev' : {\n left : '-2%'\n }\n })\n}","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nexport default{\n testimonialItem : css(mq({\n maxWidth : '300px',\n backgroundColor: '#f8f8ff',\n opacity: '.9',\n textAlign: 'center',\n color: '#000',\n padding: '10px',\n //height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n height: ['400px', '430px']\n })),\n\n\n testimonialItem_title : css(mq({\n marginBottom: '0px',\n fontSize: ['2rem', '1.72rem']\n })),\n\n testimonialItem_desc :css(mq({\n flex: '1 1 auto',\n fontSize: ['1.2rem', '1rem'] \n //flexGrow: '1',\n //flexShrink: '1'\n })),\n\n testimonialItem_bottom : css(mq({\n fontSize : ['1rem', '0.86rem']\n }))\n}","import utils from '../../../utils';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport { IoIosStar } from \"react-icons/io\";\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function TestimonialItem(props){\n\n const item = props.item;\n //const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialItem', item.cssClass || item.anchorName || '');\n \n const startRatingColor = (props.startRatingColor && props.startRatingColor !== \"\") ? props.startRatingColor : \"black\";\n \n const title = cmsUtils.payload(item, 'Title');\n const desc = cmsUtils.payload(item, 'Desc');\n const bottom = cmsUtils.payload(item, 'BottomText');\n const ratingValue = parseInt(cmsUtils.payload(item, 'RatingStar'));\n \n var rating = [];\n\n for(var i = 0; i < ratingValue; i++ ){\n rating.push(\n \n PhotoGallery\n
\n \n {\n _thumbImages.map((item, index) =>\n
\n {\n e.preventDefault();\n e.stopPropagation();\n setToggler(!toggler);\n setPopupIndex(index);\n }}>\n \n
\n )\n \n }\n \n
\n );\n}","//import { Item } from 'cms/items/item';\nimport Slider from \"react-slick\";\nimport utils from '../../../utils';\n//import cmsUtils from 'cms/utils/cmsUtils';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\n//import { useState, useEffect } from 'react';\n\nimport { TestimonialItem } from '../testimonialItem/view';\n\nexport function TestimonialPanel(props){\n const item = props.item;\n //const defaultDesH = 220;\n const startRatingColor = props.startRatingColor;\n const subItems = item.items || [];\n //console.log(subItems.length);\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialPanel', item.cssClass || item.anchorName || '');\n \n //const [desH, setDesH] = useState(defaultDesH);\n\n //var maxDesTextLength = 0;\n const testimonialItems = subItems.map((subItem, index) => {\n // let subItemDes = cmsUtils.payload(subItem, \"Desc\");\n // if(maxDesTextLength < subItemDes.length){\n // maxDesTextLength = subItemDes.length\n // }\n //return \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 {subItemsElts}\n
\n \n \n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React, { Fragment, useState } from 'react';\nimport env from '../../../env';\nimport { Loading, ErrorPopup, usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { ProductTile } from './productTile';\nimport { tileListStyle } from './productTileStyle';\nimport { getCategoryListModel } from './categoryListModel';\n\nexport function ProductItems({ categories }) {\n const post = usePost();\n React.useEffect(() => {\n post.send(env.apiBase + '/api/product/getProducts', { categories: categories });\n // eslint-disable-next-line\n }, [categories]);\n\n // React.useEffect(() => {\n // if (post.done()) {\n // setProduct(post.response);\n // }\n // }, [post])\n\n if (post.loading()) {\n return \n \n
\n {product.productName}
\n \n {product.shortDesc}\n {/*
\n\n \n \n
*/}\n \n {product.productStatus !== 0\n ? product.productStatusText\n : product.priceTextOveriding\n ? product.priceTextOveriding\n : 'AU' + utils.money.formatMoney(product.priceIncTax)}\n
\n No products
\n );\n}\n\nfunction Items({ items, categories }) {\n const s = tileListStyle;\n const model = getCategoryListModel(categories);\n const categoryListForm = useForm(model, { usePlaceholder: true, onControlChanged: orderItemChanged });\n\n //const [showProducts, setShowProducts] = useState(items);\n const [showProducts, setShowProducts] = useState(() => {\n if (categories.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 === categories[0].categoryId) {\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 } 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 } 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 {render('categoryList')}\n
\n \n {/* {items.map((item, index) =>
\n No product
\n )}\n \n Promo {order.promoInfo.promoCode}({order.promoInfo.promoDesc}) has been applied.\n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './orderDetailsStyle';\nimport React from 'react';\n\nimport env from '../../../env';\nimport { useGet } from '../../../components';\nimport { Loading, ErrorPopup } from '../../../components';\nimport { useRouter } from '../../../components';\nimport utils from '../../../utils';\n\nimport { sendPurchaseEvent } from '../gtm';\nimport { PromoApplied } from './promoApplied';\n\nexport function OrderDetails() {\n const get = useGet();\n // const { pathname, query } = useRouter();\n const { query } = useRouter();\n const [pageLoaded, setPageLoaded] = React.useState(false);\n const o = query.o || '';\n\n React.useEffect(() => {\n get.send(env.apiBase + '/api/order/getPaidOrder/' + o);\n // eslint-disable-next-line\n }, []);\n\n if (get.loading()) {\n return ;\n}\n\nfunction Details({ order }) {\n console.log('order', order);\n const orderItems = order.orderItems.filter((x) => x.orderItemType === 0);\n const taxLines = order.orderItems.filter((x) => x.orderItemType === 1);\n\n function itemAmount(orderItem) {\n return (\n (orderItem.unitPrice * 100 +\n (orderItem.addedUnitPrice ? orderItem.addedUnitPrice * 100 : 0) -\n (orderItem.discountUnitPrice ? orderItem.discountUnitPrice * 100 : 0)) /\n 100\n );\n }\n // function itemTotalAmount(orderItem) {\n // return (orderItem.quantity * (orderItem.unitPrice * 100 + orderItem.addedUnitPrice * 100 - orderItem.discountUnitPrice * 100)) / 100;\n // }\n\n function DiscountAmountDisplay(amount, discountedAmount) {\n return (\n
\n
\n );\n }\n\n function sum(array) {\n if (array.length === 0) return 0;\n return array.reduce((p, c) => p + c);\n }\n function DiscountedAmount(type, orderItemId, unitPrice, qty = 1) {\n if (order.promoInfo && order.promoInfo.promoCode) {\n if (type === 'gst') {\n const totalGst = sum(order.promoInfo.promoItems.map((x) => x.discountTaxAmount));\n if (totalGst) {\n return DiscountAmountDisplay(unitPrice, unitPrice - totalGst);\n }\n } else {\n const found = order.promoInfo.promoItems.find((x) => x.orderItemId === orderItemId);\n if (found) {\n return DiscountAmountDisplay(unitPrice, (unitPrice * qty - found.discountItemAmount) / qty);\n }\n }\n }\n return {utils.money.formatMoney(unitPrice)};\n }\n\n const billingAddr = order.billingAddress;\n return (\n \n {utils.money.formatMoney(discountedAmount)}\n
\n {amount !== discountedAmount && (\n \n {utils.money.formatMoney(amount)}\n
\n )}\n \n {!hasGuideInOrder(order) && }\n {!hasBookingInOrder(order) && (\n \n )}\n
\n
\n\n
\n\n {/*
\n );\n}\n\nfunction hasGuideInOrder(order) {\n return order.orderItems.some((x) => x.ext?.itemType === 'guide');\n}\n\nfunction hasBookingInOrder(order) {\n return order.orderItems.some((x) => x.ext?.itemType === 'event');\n}\n\nfunction ItemExt({ orderItem }) {\n // console.log(orderItem.ext);\n const ext = orderItem?.ext;\n if (!ext) return '';\n const desc = ext.itemName;\n if (ext.itemType === 'guide')\n return ;\n else if (ext.itemType === 'event')\n return orderItem.bookingView ? (\n \n
\n
\n \n
\n \n {order.orderNo}{' '}\n
\n \n {' '}\n \n AU {utils.money.formatMoney(order.totalAmount, 2)}\n {' '}\n
\n \n {' '}\n {utils.date.formatYYYYMMDD(order.orderDate)}{' '}\n
\n \n\n
ITEMS
\n\n {orderItems.map((orderItem, i) => (\n
\n\n \n
\n ))}\n\n {/* \n \n \n
\n \n Unit Price: {DiscountedAmount('sku', orderItem.orderItemId, itemAmount(orderItem), orderItem.quantity)}\n
\n Qty: {orderItem.quantity}
\n \n
*/}\n\n {taxLines.map((orderItem, index) => (\n Shipping Fee:
\n \n {DiscountedAmount('sku', orderItem.orderItemId, itemAmount(items[index], orderItem))}\n
\n \n
\n ))}\n\n Tax: {orderItem.itemName}
\n \n {DiscountedAmount(orderItem.itemName === 'GST' ? 'gst' : '', orderItem.orderItemId, orderItem.unitPrice)}\n
\n \n
\n \n
\n \n Total: AU {utils.money.formatMoney(order.totalAmount, 2)}\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
\n Grand Total (including GST): AU {utils.money.formatMoney(order.totalAmount)}\n
*/}\n \n\n {/*
\n DELIVERY METHOD\n
\n\n {order.shippingMethod}\n
\n {\n (order.shippingAddress && order.shippingMethod === 'Standard') &&\n \n }\n BILLING ADDRESS
\n\n {billingAddr.firstName}{' '}\n
\n \n {billingAddr.surname}{' '}\n
\n \n {billingAddr.email}{' '}\n
\n \n {billingAddr.phone}{' '}\n
\n \n {/*
\n );\n}\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(\n mq({\n marginTop: [5, 10, 20],\n marginBottom: 15,\n display: 'flex',\n justifyContent: 'center',\n borderBottom: 'solid 10px #eee',\n })\n ),\n nav: css(\n mq({\n // width: 20,\n // height: 30,\n background: '#ccc',\n margin: 5,\n padding: '0.5rem 1rem',\n transform: 'skewX(-12deg)',\n })\n ),\n navCurrent: css({\n backgroundColor: 'orange',\n color: 'white',\n fontWeight: 'bold',\n }),\n navFilled: css({\n backgroundColor: '#666',\n color: '#ccc',\n }),\n navClickable: css({\n cursor: 'pointer',\n }),\n};\n\nexport default {\n arrow: css(\n 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 ),\n arrowPrev: css(\n mq({\n left: [-15, 0],\n })\n ),\n arrowNext: css(\n mq({\n right: [-15, 0],\n })\n ),\n\n ...navs,\n};\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './stepStyle';\nimport React from 'react';\n\n// import { FaAngleRight } from 'react-icons/fa';\n\nexport function StepNav({ stepInfo }) {\n const { steps, currentStep, moveTo, canGo } = stepInfo;\n\n //if (currentStep === steps.length - 1) return null;\n return (\n [{booking.startDateTimeText}]
*/}\n {/* {booking.eventTitle}
*/}\n \n Booking ID: {booking.bookingCode}
\n \n {steps\n .filter((x) => x.id !== 'thanks')\n .map((step, index) => (\n \n moveTo(index)}\n >\n {step.title}\n
\n {/* {index < steps.length - 1 && \n {/* {\n cart.shippingMethod === \"Standard\" &&\n \n
\n \n } */}\n
\n );\n}\n","export const promoStyle = {\n promoSection: {\n margin: '1rem 0',\n padding: '0.5rem 1rem',\n background: '#fff5e2',\n },\n promoCode: {\n input: {\n textTransform: 'uppercase',\n },\n '.form-group': {\n margin: 0,\n },\n },\n};\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\n\nimport env from 'env';\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\nimport { FieldError, ServerErrors } from '@site/_helpers';\nimport { promoStyle } from './promoStyle';\nimport { fetchPost } from '@lib/net-api/fetch';\n\nconst schema = yup.object().shape({\n promoCode: yup.string().required('Promo Code is required.'),\n});\n\nexport function PromoForm({ cart, applyPromoCode }) {\n const defaultValues = { promoCode: '' };\n\n const {\n formState: { isSubmitting, errors },\n register,\n handleSubmit,\n reset,\n } = useForm({ defaultValues, resolver: yupResolver(schema) });\n const [serverErrors, setServerErrors] = React.useState([]);\n\n async function onSubmit(model) {\n try {\n const value = { ...model, cartId: env.getDevCartId() };\n const res = await fetchPost(env.apiBase + '/api/cart/applyPromoCode', value);\n\n const cart = res.results.cartModel;\n // console.log(cart);\n reset(defaultValues);\n applyPromoCode(cart);\n } catch (e) {\n reset(model);\n setServerErrors(e);\n }\n }\n\n if (cart.promoInfo && cart.promoInfo.promoCode) return null;\n // console.log(isValid, dirtyFields, isSubmitting, errors);\n return (\n Shipping
\n AU {formatMoney(cart.shippingAmount)}
\n \n
Total Amount
\n AU {formatMoney(cart.totalAmount, 2)}
\n {cart.promoInfo && cart.promoInfo.promoCode && (\n \n \n -{utils.money.formatMoney(cart.promoInfo.totalItemDiscount + cart.promoInfo.totalTaxDiscount)}\n {' '}\n saved\n \n )}\n {/* \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 \n {{cart.shippingMethod == ''? 'Please select Shipping Option.': 'AU ' + formatMoney(cart.totalAmount)}}\n
\n \n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React from 'react';\n\nimport env from 'env';\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\nimport { ServerErrors } from '@site/_helpers';\nimport { promoStyle } from './promoStyle';\nimport { fetchPost } from '@lib/net-api/fetch';\n\nconst schema = yup.object().shape({});\n\nexport function PromoApplied({ cart, applyPromoCode }) {\n const defaultValues = {};\n\n const {\n formState: { isSubmitting },\n handleSubmit,\n reset,\n } = useForm({ defaultValues, resolver: yupResolver(schema) });\n const [serverErrors, setServerErrors] = React.useState([]);\n\n async function onSubmit(model) {\n try {\n const value = { ...model, cartId: env.getDevCartId() };\n const res = await fetchPost(env.apiBase + '/api/cart/removePromoCode', value);\n\n const cart = res.results.cartModel;\n // console.log(cart);\n reset(defaultValues);\n applyPromoCode(cart);\n } catch (e) {\n reset(model);\n setServerErrors(e);\n }\n }\n\n if (!(cart.promoInfo && cart.promoInfo.promoCode)) return null;\n\n // console.log(isValid, dirtyFields, isSubmitting, errors);\n return (\n \n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './orderItemStyle';\nimport React from 'react';\n\nimport { Button, ErrorMessage } from '../../../components';\nimport utils from '../../../utils';\n\nimport { CartSummary } from '../cartSummary/summary';\nimport { PromoForm } from './promoCodeForm';\nimport { PromoApplied } from './promoApplied';\n\nexport function OrderItems({ cart, form, moveNext, post, remove, applyPromoCode }) {\n //const model = form.model;\n const items = form.findControl('items').controls;\n // const render = (name, parent = null) => form.renderControl(name, parent);\n\n function itemAmount(item, orderItem) {\n const val = item.getValue();\n return (val.quantity * (orderItem.unitPrice * 100)) / 100;\n }\n\n const next = (e) => {\n form.validateForm(e, () => {\n moveNext();\n });\n };\n\n function ItemVariantSummary({ orderItem }) {\n if (!orderItem.variantOptionsSerialised) return null;\n const options = JSON.parse(orderItem.variantOptionsSerialised);\n return (\n \n {options\n .map((x) => (\n \n {x.Name}:\n {x.Value}\n \n ))\n .reduce(\n (acc, x) =>\n acc === null ? (\n x\n ) : (\n \n {acc}, {x}\n \n ),\n null\n )}\n
\n );\n }\n\n function sum(array) {\n if (array.length === 0) return 0;\n return array.reduce((p, c) => p + c);\n }\n\n function DiscountAmountDisplay(amount, discountedAmount) {\n return (\n \n
\n );\n }\n function DiscountedAmount(type, orderItemId, amount) {\n if (cart.promoInfo && cart.promoInfo.promoCode) {\n if (type === 'gst') {\n const totalGst = sum(cart.promoInfo.promoItems.map((x) => x.discountTaxAmount));\n if (totalGst) {\n return DiscountAmountDisplay(amount, amount - totalGst);\n }\n } else {\n const found = cart.promoInfo.promoItems.find((x) => x.orderItemId === orderItemId);\n if (found) {\n return DiscountAmountDisplay(amount, amount - found.discountItemAmount);\n }\n }\n }\n return {utils.money.formatMoney(amount)};\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 {utils.money.formatMoney(discountedAmount)}\n
\n \n {utils.money.formatMoney(amount)}\n
\n \n
\n );\n}\n\nfunction ItemExt({ orderItem }) {\n // console.log(orderItem.ext);\n const ext = orderItem?.ext;\n if (!ext) return '';\n const desc = ext.itemName;\n if (ext.itemType === 'guide')\n return ;\n else if (ext.itemType === 'event')\n return (\n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n );\n}\n","import React from 'react';\nimport { useAuth } from 'auth';\n\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\nimport { FieldError, ServerErrors } from '@site/_helpers';\n\nconst schema = yup.object().shape({\n email: yup.string().required('Email is required.'),\n password: yup.string().required('Password is required.').min(6, 'Password is too short - should be 6 chars minimum.'),\n});\n\nexport function CreateAccountForm(props) {\n const auth = useAuth();\n\n const {\n formState: { isSubmitting, errors },\n register,\n handleSubmit,\n reset,\n } = useForm({ resolver: yupResolver(schema) });\n const [serverErrors, setServerErrors] = React.useState([]);\n\n async function onSubmit(model) {\n try {\n await auth.signup(model.email, model.password);\n } catch (e) {\n reset(model);\n setServerErrors(e);\n }\n }\n\n // console.log(isValid, dirtyFields, isSubmitting, errors);\n return (\n \n \n
\n );\n}\n","import React from 'react';\n\nimport { useForm } from 'react-hook-form';\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as yup from 'yup';\nimport { FieldError, ServerErrors } from '@site/_helpers';\n\nconst schema = yup.object().shape({\n email: yup.string().nullable().required('Email is required.'),\n firstName: yup.string().nullable().required('First Name is required.'),\n surname: yup.string().nullable().required('Surname is required.'),\n phone: yup.string().nullable(),\n});\n\nexport function DetailsForm({ cart, saveShipping }) {\n // console.log(cart.billingAddress);\n const defaultValues = cart.billingAddress;\n\n const {\n formState: { isSubmitting, errors },\n register,\n handleSubmit,\n reset,\n } = useForm({ defaultValues, resolver: yupResolver(schema) });\n const [serverErrors, setServerErrors] = React.useState([]);\n\n async function onSubmit(model) {\n try {\n await saveShipping({ billingInfo: model, useSameAddress: true });\n } catch (e) {\n reset(model);\n setServerErrors(e);\n }\n }\n\n // console.log(isValid, dirtyFields, isSubmitting, errors);\n return (\n \n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { SiteLink } from 'components';\nimport { CartSummary } from '../cartSummary/summary';\nimport { useAuth } from 'auth';\nimport { LoginForm } from 'auth/controls/login/loginForm';\nimport { CreateAccountForm } from 'auth/controls/createAccount/createAccountForm';\nimport { DetailsForm } from './detailsForm';\n\nexport function Shipping({ cart, saveShipping, post }) {\n const auth = useAuth();\n const needLogin = hasGuideInOrder(cart) && !auth.user;\n\n return (\n BILLING INFORMATION
\n \n\n
\n );\n}\n\nfunction hasGuideInOrder(cart) {\n return cart.orderItems.some((x) => x.ext?.itemType === 'guide');\n}\n","import { mq } from \"../../../cssInJs\";\n\nexport default {\n pay: {\n 'h3': {\n marginTop: 0\n }\n },\n stripeWrapper: {\n margin: '1rem 0 1rem',\n maxWidth: 500,\n padding: '1rem',\n backgroundColor: '#999999'\n },\n formActions: {\n marginTop: '2rem'\n },\n paymentInfoText : mq({\n fontSize: ['0.6rem', '0.5rem'],\n marginTop: '1rem',\n '.contact-link' : {\n color: 'white'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './payStyle';\nimport React from 'react';\n\nimport { SiteLink, usePost } from '../../../components';\nimport { Button, ErrorMessage } from '../../../components';\nimport env from '../../../env';\nimport { useRouter } from '../../../components';\nimport { initStripe } from './payStripe';\n\nimport { CartSummary } from '../cartSummary/summary';\n\nexport function Pay({ cart, model, form, payStripe }) {\n\n const [stripe, setStripe] = React.useState(null);\n const [card, setCard] = React.useState(null);\n const [error, setError] = React.useState(null);\n\n const post = usePost();\n const { Redirect } = useRouter()\n\n React.useEffect(() => {\n const { stripe, card } = initStripe(setError)\n setStripe(stripe);\n setCard(card);\n }, [])\n\n function payNow() {\n if (error) return;\n stripe.createToken(card).then(function (result) {\n if (result.error) {\n setError(result.error.message);\n } else {\n setError(null);\n // Send the token to your server.\n onSubmit(result.token.id);\n }\n });\n }\n\n function onSubmit(tokenId) {\n console.log(tokenId)\n post.send(env.apiBase + \"/api/cart/payStripe\", { tokenId: tokenId, itemTotalAmount: cart.itemTotalAmount, cartId: env.getDevCartId() });\n }\n\n if (post.done()) {\n env.setDevCartId(null);\n return \n
\n \n {needLogin ? (\n
\n\n \n
\n ) : (\n \n Create your account first to continue. If you already have an account, please login instead.\n
\n\n
\n \n
\n \n
\n CREATE ACCOUNT
\n\n
\n \n
\n LOG IN
\n\n Forgot Password? \n
\n \n
\n )}\n \n
\n \n
\n}\n","import env from '../../../env';\n\nexport function initStripe(setError) {\n // Create a Stripe client.\n const stripe = window.Stripe(env.stripeKey);\n\n\n // Create an instance of Elements.\n const elements = stripe.elements();\n\n // Custom styling can be passed to options when creating an Element.\n // (Note that this demo uses a wider set of styles than the guide below.)\n const elStyle = {\n base: {\n color: '#32325d',\n fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n fontSmoothing: 'antialiased',\n fontSize: '18px',\n '::placeholder': {\n //color: '#aab7c4'\n color: '#000000'\n }\n },\n invalid: {\n color: '#fa755a',\n iconColor: '#fa755a'\n }\n };\n\n // Create an instance of the card Element.\n const card = elements.create('card', { style: elStyle });\n\n // Add an instance of the card Element into the `card-element` \n
\n \n
\n\n Pay by Credit Card
\n\n\n
\n\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 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';\nimport { useStore } from 'store';\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';\n// import { 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 Type: {item?.itemTypeCode}\n \n ) : (\n ;\n } else if (item.itemTypeCode === 'BannerPanel') {\n itemElt = \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 closeMenu()}>\n {item.title}\n {subItemsElts && (\n toggleSubmenu(e)}>\n \n {subItemsElts && \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 {item.title}\n \n \n );\n}\n\nfunction Cart({ onCloseMenu, state }) {\n const cartItemNo = state?.cartInfo?.numberOfItems || 0;\n return (\n \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, null, 12],\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\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}","import { css } from '@emotion/core'\nimport { mq } from '../../cssInJs'\n\nexport default {\n top: css(mq({\n //height: [44, null, 80],\n height: [44, null, 56],\n //background: 'black',\n background: 'transparent',\n position: 'fixed',\n width: '100%',\n zIndex: '999',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n transition: 'all 0.3s'\n })),\n topScrolled: css(mq({\n background: 'white',\n })),\n logo: css(mq({\n })),\n logoImg: css(mq({\n display: 'block',\n height: ['45px', null, '70px'],\n marginTop: ['1rem', null, '2rem'],\n transition:'all .2s'\n })),\n logoScrolled: css(mq({\n img : css(mq({\n height: [34, null, 50],\n marginTop:'0rem'\n }))\n })),\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n\nimport { useState, Fragment } from 'react';\nimport { SiteLink } 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\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 function backTop() {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n return (\n \n \n \n 
\n \n\n \n \n );\n}\n","import React from 'react';\nimport { useRouter } from '../../components';\nimport { SiteLink } from '../../components';\nimport utils from 'utils';\n//import BottomDrawer from '../../components/bottomDrawer'\n\nexport function BottomDock(props) {\n const links = [\n { url: '/member/login', title: 'LOG-IN', icon: 'navicon-100.png', iconHover: 'navicon-100.png' },\n { url: '/guides', title: 'GUIDES', icon: 'navicon-100.png', iconHover: 'navicon-100.png' },\n { url: '/workshops', title: 'WORKSHOPS', icon: 'navicon-100.png', iconHover: 'navicon-100.png' },\n { url: '/phi-online', title: 'PHI ONLINE', icon: 'navicon-100.png', iconHover: 'navicon-100.png' },\n { url: '#contact', title: 'CONTACT', icon: 'navicon-100.png', iconHover: 'navicon-100.png' },\n ];\n\n //const path = usePath();\n const { pathname, navigate } = useRouter();\n\n const isCurrent = (link) => {\n return pathname && pathname.toLowerCase() === link.toLowerCase();\n };\n\n function linkClicked(e, url) {\n if (url === '#contact') {\n e.preventDefault();\n e.stopPropagation();\n if (utils.ui.findElement(url)) {\n utils.ui.scrollTo(url);\n } else {\n navigate('/#contact');\n }\n }\n }\n\n const linkElts = links.map((link, index) => (\n \n linkClicked(e, link.url)}\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","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\nfunction EmptyCart() {\n return (\n \n
\n \n {steps.map((step, index) => {\n let stepView = null;\n switch (step.id) {\n case 'orderItems':\n stepView = (\n
\n \n {stepView}\n
\n );\n })}\n \n
\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 { OrderDetails } from 'site/ecm/orderDetails/orderDetails';\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 \n
\n Your cart is empty.
\n\n
\n );\n}\n\nfunction ItemBranch({ item }) {\n const typeCode = item?.itemTypeCode;\n\n if (typeCode === 'Ecm-ShoppingCart') {\n return {item.itemTypeCode}
;\n }\n\n // const subItemsElts = subItems.map((subItem, index) =>\n // {sectionItems}
\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) 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 Dashboard\n \n
- \n signout(e)}>LOG OUT\n \n
- \n
- \n LOG IN\n \n
- {subItemsElts}
- \n
- \n
\n 
\n 
\n
\n {link.title}
\n \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';\n// import 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 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) utils.ui.scrollTo(anchor, 500);\n }, 500);\n } else {\n window.scrollTo(0, 0);\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\n// function 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) {\n return null;\n }\n return data;\n }\n return null;\n}\n\n// function 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\n// const MAX_SIZE = 5\n// function 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\n","//import { css } from '@emotion/core';\nimport variables from '../../../cssInJs/variables';\nimport { mq } from '../../../cssInJs';\nexport default {\n desc: {\n marginTop: '1rem',\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: ['180px', '340px'],\n position: 'relative',\n }),\n heroImage: mq({\n //maxWidth: '350px !important',\n //height: '100% !important'\n maxHeight: ['180px', '340px'],\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 fontWeight: 300,\n fontFamily: variables.familyHeader,\n lineHeight: '1.2',\n marginTop: '0.5rem',\n }),\n\n productViewTitle: mq({\n fontSize: ['1.3rem', null, null, '40px'],\n textAlign: 'center',\n marginTop: '0px',\n }),\n\n addToCartBtn: {\n //width: '100%'\n 'button, .btn': {\n width: '100%',\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","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\nfunction getFormModel(product, formValues /* for reset */) {\n const variantAttributes = product.variantAttributes;\n\n const model = fb.group({\n //quantity: [formValues.quantity || 1, [validators.Required()], { label: 'Quantity', type: 'number' }],\n quantity: [formValues.quantity || 1, [validators.Required()], { label: 'Quantity', type: 'number' }],\n variantOptions: fb.array([]),\n });\n const variantOptionArray = model.find('variantOptions').controls;\n (variantAttributes || []).forEach(attr => {\n variantOptionArray.push(newVariantAttribute(attr, formValues, product.variants))\n })\n return model;\n}\n\n// function newVariantAttribute(attr, formValues, variants) {\n// //console.log(attr, formValues, variants)\n// const optionsSelected = formValues.variantOptions || [];\n// const currentSelection = utils.array.find(optionsSelected, x => attr.name === x.name);\n// const filtered = variants\n// .filter(x => matchVariantOptions(optionsSelected, x.variantOptions, attr.name))\n// const availableOptions = getAvailableOptionValues(filtered, attr.name);\n// const options = attr.options.map(x => { return { ...x, ...{ disabled: !availableOptions.some(o => o === x.value) } } })\n// return fb.group({\n// name: [attr.name, [], { type: 'hidden' }],\n// value: [(currentSelection && currentSelection.value) || attr.value || '',\n// [validators.Required()], {\n// //label: attr.name,\n// label: null,\n// type: 'select',\n// options: [{ displayName: 'Select ...', value: '' }, ...options].map(x => {\n// return {\n// name: (x.displayName || x.value) + (x.disabled || false ? ' - not available' : ''),\n// value: x.value,\n// disabled: x.disabled || false\n// }\n// })\n// }]\n// })\n// }\n\nfunction newVariantAttribute(attr, formValues, variants) {\n \n // const choices = [\n // { name: 'Yes, please!', value: 'Yes' },\n // { name: 'No, thanks', value: 'No' }\n // ]\n\n const dyName = attr.name.toLowerCase();\n const optionsSelected = formValues.variantOptions || [];\n const currentSelection = utils.array.find(optionsSelected, x => attr.name === x.name);\n\n const filtered = variants\n .filter(x => matchVariantOptions(optionsSelected, x.variantOptions, attr.name))\n const availableOptions = getAvailableOptionValues(filtered, attr.name);\n const options = attr.options.map(x => { return { ...x, ...{ disabled: !availableOptions.some(o => o === x.value) } } });\n\n return fb.group({\n name: [attr.name, [], { type: 'hidden' }],\n [dyName] : [(currentSelection && currentSelection.value) || attr.value || options[0].value,\n [validators.Required()], {\n //label: attr.name,\n label: null,\n type: 'radioList',\n //options : choices\n options: [...options].map(x => {\n return {\n name: (x.displayName || x.value) + (x.disabled || false ? ' - not available' : ''),\n value: x.value,\n disabled: x.disabled || false\n }\n })\n }]\n })\n}\n\nfunction getAvailableOptionValues(variants, name) {\n const values = variants.map(x => {\n const options = x.variantOptions.filter(o => o.name === name)\n return options && options[0].value\n }).filter(x => x);\n\n return Array.from(new Set(values));\n}\n\nfunction matchVariantOptions(optionsSelected, optionsInVariant, currentControlName) {\n //console.log(optionsSelected, optionsInVariant, currentControlName)\n for (let i = 0; i < optionsSelected.length; i++) {\n let optionSelected = optionsSelected[i];\n if (optionSelected.value === '') {\n // skip match test\n continue;\n }\n if (optionSelected.name === currentControlName) {\n // skip match test for the just selected value\n continue;\n }\n let found = false;\n for (let j = 0; j < optionsInVariant.length; j++) {\n let optionInVariant = optionsInVariant[j];\n if (optionSelected.name === optionInVariant.name && optionSelected.value === optionInVariant.value) {\n found = true;\n break;\n }\n }\n if (!found) return false;\n }\n return true;\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './productViewStyle';\nimport React, { useState, useEffect } from 'react';\nimport env from '../../../env';\nimport utils from '../../../utils';\nimport { ErrorPopup, Loading, Button, ErrorMessage, useGet, usePost, useRouter } from '../../../components';\nimport { ViewPartial } from '../../../cms/pages/partials/viewPartial';\n//import { CommonProductBottom } from '../../../cms/pages/partials/commonProductBottom';\nimport { ProductTile } from '../productList/productTile';\nimport FsLightbox from 'fslightbox-react';\nimport { MetaTag } from '../../../components';\nimport { AddToCart } from './addToCart';\nimport Slider from 'react-slick';\n// import { MdFavorite } from 'react-icons/md';\n\n//import { debounce } from '../../../lib/utils-core/debounce';\nimport { gtm } from '../../../lib/tracking';\nimport { FacebookShareButton, FacebookIcon, PinterestShareButton, PinterestIcon } from 'react-share';\nimport { createPortal } from 'react-dom';\nimport { getEnquiryFormModel } from './enquiryFormModel';\nimport { useForm } from '../../../form';\n// import { ProductPagePartial } from '../../../cms/pages/partials/productPagePartial';\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 ProductView(props) {\n const { query } = useRouter();\n const [loaded, setLoaded] = React.useState(false);\n const get = useGet();\n const productCode = query.id || '';\n const category = query.category || '';\n const slug = query.slug || '';\n //console.log(category, slug, productCode)\n React.useEffect(() => {\n console.log('productview use effect');\n //const url = productCode ? `/api/product/getProduct/${productCode}` : `/api/product/getProductByUrl?category=${category}&slug=${slug}`\n const url = `/api/product/getProduct/${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 \n Price: {product.priceText ? product.priceText : 'AU ' + utils.money.formatMoney(product.price)}\n
*/}\n\n {/* \n \n
\n )\n }\n )\n }\n\n \n \n
\n\n {\n setAttributesEx(pre => {\n let _new = {...pre};\n _new[index] = !_new[index];\n return _new;\n });\n }}>\n
\n \n {item.controls[0].value}\n
\n \n {item.controls[1].value}\n
\n \n
\n \n {render(item.controls[0].value.toLowerCase(), item)}\n {/* {render('value', item)} */}\n
\n\n {/* {render('value', item)}
*/}\n No product found.
;\n return (\n \n \n {openPopup && (\n
\n )}\n \n\n \n
\n Enquire Now
\n \n
\n {enquiryFormRender('name')}
\n {enquiryFormRender('phone')}
\n {enquiryFormRender('email')}
\n \n
\n\n {enquiryFormRender('enquiry')}
\n \n
\n \n \n
\n \n {/* onClick={onSubmit} status={post.status} */}\n \n
\n \n {/*
\n \n );\n}\n\nfunction getMetaTag(product, mainPhoto) {\n return {\n title: product.productName,\n description: product.metaDesc || product.intro,\n keywords: '',\n heroImageUrl: utils.site.resourcePath(mainPhoto.imageUrl),\n language: 'English',\n country: 'Australia',\n siteName: env.siteName,\n url: utils.site.resourcePath('/product/' + product.productSlug),\n //canonical: utils.site.resourcePath(pageData.pageUrl)\n };\n}\n\nfunction RelatedProducts({ products }) {\n //console.log(products)\n if (!products || products.length === 0) return null;\n return (\n \n
\n \n \n
\n \n \n
\n\n {product.description && }\n {/* {barcodeCleaned && } */}\n {heroImage && heroImage.imageUrl && }\n\n \n {/*
\n \n \n
\n\n - \n
- \n {' '}\n
Home {' '}\n \n - \n {' '}\n
Shop {' '}\n \n {breadCrumbs.map((item, index) => (\n - \n
{item.categoryPageTitle} \n \n ))}\n - {product.productName} \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
\n \n openPopupImage(heroImage.imageUrl)}\n />\n
\n {allPhotos.length > 1 && (\n \n {/* {slides} */}\n {slides} \n
\n )}\n\n {/* \n
*/}\n \n {\n setOpenPopup(true);\n document.body.style.overflow = 'hidden';\n }}\n >\n {' '}\n CUSTOM QUOTE{' '}\n \n
\n\n \n Like this product but doesn't match your specifications? Click for a custom quote.\n
\n \n \n \n \n
\n \n SHARE THIS PRODUCT:
\n \n
*/}\n\n {/* {\n setOpenPopup(true);\n document.body.style.overflow = 'hidden';\n }}\n >\n {' '}\n ENQUIRE NOW{' '}\n \n )}\n\n {product.productStatus === 1 && }\n\n {product.productStatus === 98 && }\n\n
\n \n {product.productName}\n
\n {product.shortDesc && (\n\n {product.shortDesc}\n
\n )}\n\n \n\n {/* */}\n\n {/*
\n Product code: {product.productCode}\n
*/}\n\n {product.productStatus === 0 && \n
\n \n {\n setOpenPopup(true);\n document.body.style.overflow = 'hidden';\n }}\n >\n {' '}\n CUSTOM QUOTE{' '}\n \n
\n\n \n Like this product but doesn't match your specifications? Click for a custom quote.\n
\n \n \n \n \n \n
\n SHARE THIS PRODUCT:
\n \n
\n );\n}\n","import { fb, validators } from '../../../lib/form';\nexport function getEnquiryFormModel(data) {\n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [validators.Required()], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n enquiry: [data.enquiry || '', [validators.Required()], { label: 'Enquiry', type: 'textarea' }]\n //attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }]\n }); \n return model;\n}","import React, { useEffect } from 'react';\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useRouter } from './components';\nimport { StoreProvider } from './store';\nimport { ProvideAuth } from 'auth';\n\nimport MemberLayout from 'layout/memberLayout';\nimport DashboardNoAuthLayoutRoute from 'layout/dashboardNoAuthLayout';\nimport PermissionCheckFirst from 'layout/permissionCheckFirst';\nimport { Login } from 'auth';\nimport { EventView } from 'site/event/eventView/eventView';\n\nimport { ViewPage } from './cms/pages/viewPage/viewPage';\nimport { EditPage } from './cms/pages/editPage/editPage';\nimport { TopHeader } from './layout/topHeader/topHeader';\n// import { Footer } from './layout/footer/footer';\nimport { BottomDock } from './layout/bottomDock/bottomDock';\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 AOS from 'aos';\n\n//For ECM\nimport { ProductView } from './site/ecm/product/productView';\n// import { OrderDetails } from './site/ecm/orderDetails/orderDetails';\n// import env from './env';\n// import { useStore } from './store';\n\nfunction AppLayout(props) {\n const { pathname } = useRouter();\n\n //For ECM\n //const storeContext = useRef(useStore());\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 useEffect(() => {\n AOS.init({\n duration: 1200,\n //delay:400,\n //once:true\n });\n\n // For ECM\n // fetch(env.apiBase + \"/api/cart/getcart/\" + env.getDevCartId())\n // .then(res => res.json())\n // .then(res => {\n // const data = res;\n // if(data){\n // storeContext.current.dispatch({type:'SET_STATE', payload : {cartInfo : data.cartInfo.totalQuantity === 0 ? 0 : (data.cartInfo.totalQuantity)-1}});\n // }\n // })\n // .catch(error =>{\n // storeContext.current.dispatch({type:'SET_STATE', payload : {cartInfo : 0}});\n // });\n }, []);\n\n return (\n RELATED PRODUCTS
\n\n {products.map((product, index) => (\n
\n \n
\n );\n}\n\nfunction App() {\n return (\n \n
\n {/* */}\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n {/* For ECM \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(registration => {\n // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration\n console.log('Service Worker registration successful with scope: ', registration.scope);\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 navigator.serviceWorker.addEventListener('controllerchange', function (ev) {\n console.log('Service Worker controller change', ev)\n // Ensure refresh is only called once.\n // This works around a bug in \"force update on reload\".\n if (preventDevToolsReloadLoop) return;\n preventDevToolsReloadLoop = true;\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 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(