\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\nlet abc = {};\nexport function showAddCartMsg(msg = \"Added to Cart\"){\n const existingElemDiv = document.getElementById('addCartMsg');\n const elemDiv = document.createElement('div');\n elemDiv.id = \"addCartMsg\";\n elemDiv.innerText = msg;\n elemDiv.style.cssText = `\n position: fixed;\n top: 20%;\n left: 0px;\n z-index: 9999;\n display: inline-block;\n padding: 0.5rem 1.5rem;\n background-color: rgb(37, 47, 62);\n font-weight: 700;\n color: white;\n border-radius: 10px;\n left: 50%;\n font-size:1.5rem;\n transform: translateX(-50%);\n `;\n\n if(existingElemDiv){\n clearTimeout(abc);\n document.body.removeChild(existingElemDiv);\n setTimeout(() => {\n document.body.appendChild(elemDiv);\n }, 500);\n abc = setTimeout(() => {\n const existingElemDiv_s = document.getElementById('addCartMsg');\n if(existingElemDiv_s){\n document.body.removeChild(existingElemDiv_s);\n }\n }, 4500);\n\n }\n else{\n document.body.appendChild(elemDiv);\n abc = setTimeout(() => {\n const existingElemDiv_s = document.getElementById('addCartMsg');\n if(existingElemDiv_s){\n document.body.removeChild(existingElemDiv_s);\n }\n }, 4000);\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 env from '../../env';\r\n\r\nexport const pageView = (url) => {\r\n if (process.env.NODE_ENV === 'development') {\r\n console.warn(`Tracking is deprecated.`, `Use seperate tracking helper instead`);\r\n }\r\n if (hasGTM()) gtmPageView(url)\r\n if (hasGtag()) gaPageView(url)\r\n if (hasFBPixel()) fbPageView(url)\r\n}\r\n\r\nexport const sendFormEvent = (formName, params) => {\r\n if (process.env.NODE_ENV === 'development') {\r\n console.warn(`Tracking is deprecated.`, `Use seperate tracking helper instead`);\r\n }\r\n const p = Object.assign({ 'gtm.elementId': formName }, params || {})\r\n\r\n if (hasGTM()) gtmSendEvent('form', p)\r\n if (hasGtag()) gaSendEvent('form', p)\r\n if (hasFBPixel()) fbSendEvent('form', p)\r\n}\r\n\r\nexport const sendEvent = (eventName, params) => {\r\n if (process.env.NODE_ENV === 'development') {\r\n console.warn(`Tracking is deprecated.`, `Use seperate tracking helper instead`);\r\n }\r\n if (hasGTM()) gtmSendEvent(eventName, params)\r\n if (hasGtag()) gaSendEvent(eventName, params)\r\n if (hasFBPixel()) fbSendEvent(eventName, params)\r\n}\r\n\r\n//#region GTM\r\nexport const hasGTM = () => {\r\n return !!(typeof window !== `undefined` && window.dataLayer);\r\n}\r\n\r\nexport const gtmPageView = (url) => {\r\n if (typeof window !== `undefined`) {\r\n window.dataLayer.push({\r\n event: 'pageview',\r\n page: {\r\n path: url\r\n }\r\n })\r\n }\r\n}\r\nexport const gtmSendEvent = (eventName, params) => {\r\n if (typeof window !== `undefined`) {\r\n window.dataLayer.push(Object.assign({ event: eventName }, params || {}))\r\n }\r\n}\r\n//#endregion\r\n\r\n//#region Gtag / GA\r\nexport const hasGtag = () => {\r\n return !!(typeof window !== `undefined` && window.gtag);\r\n}\r\n\r\nexport const gaPageView = (url) => {\r\n if (typeof window !== `undefined`) {\r\n if (env.gaAccounts) {\r\n env.gaAccounts.forEach(id => {\r\n window.gtag('config', id, { 'page_path': url });\r\n })\r\n }\r\n }\r\n}\r\n\r\nexport const gaSendEvent = (eventName, params) => {\r\n if (typeof window !== `undefined`) {\r\n if (env.gaAccounts && env.gaAccounts.length > 0) {\r\n window.gtag('event', eventName, params || {});\r\n }\r\n }\r\n}\r\n//#endregion\r\n\r\n//#region Facebook Pixel\r\nexport const hasFBPixel = () => {\r\n return !!(typeof window !== `undefined` && window.fbq);\r\n}\r\n\r\nexport const fbPageView = (url) => {\r\n if (typeof window !== `undefined`) {\r\n window.fbq('track', 'PageView');\r\n }\r\n}\r\n\r\nexport const fbSendEvent = (eventName, params) => {\r\n if (typeof window !== `undefined`) {\r\n window.fbq('track', eventName, params || {});\r\n }\r\n}\r\n//#endregion\r\n\r\n\r\n\r\n","import utils from '../../utils';\r\n\r\nexport const MAX = 100000;\r\nexport const MIN = -100000;\r\n\r\nexport function getScrollProgress(el) {\r\n if (typeof window !== `undefined`) {\r\n const scroll = window.scrollY || window.pageYOffset\r\n if (!el) {\r\n console.log('not exists', el)\r\n return {\r\n progress: 0,\r\n top: scroll\r\n }\r\n }\r\n const boundsTop = el.getBoundingClientRect().top + scroll\r\n\r\n const viewport = {\r\n top: scroll,\r\n bottom: scroll + window.innerHeight,\r\n height: window.innerHeight\r\n }\r\n\r\n const bounds = {\r\n top: boundsTop,\r\n bottom: boundsTop + el.clientHeight,\r\n height: el.clientHeight\r\n }\r\n\r\n //const scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n // const status = {\r\n // viewport: viewport,\r\n // bound: bounds,\r\n // inViewport: (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom)\r\n // || (bounds.top <= viewport.bottom && bounds.top >= viewport.top)\r\n // }\r\n\r\n //console.log((viewport.bottom - bounds.top) / (bounds.height + viewport.height))\r\n return {\r\n progress: (viewport.bottom - bounds.top) / (bounds.height + viewport.height),\r\n top: (viewport.bottom - bounds.top) / (viewport.height)\r\n }\r\n } else {\r\n return {\r\n progress: 0,\r\n top: 0\r\n }\r\n }\r\n}\r\n\r\n//au.setClass(section, 'animated', pr, [0.3, au.MAX])\r\nexport function setClass(el, className, pr, range)\r\n{\r\n if (pr >= range[0] && pr <= range[1]) {\r\n utils.css.addClass(el, className);\r\n } else {\r\n utils.css.removeClass(el, className);\r\n }\r\n}\r\n\r\nexport function prVal(min, max, pr, range = [0, 1]) {\r\n //console.log(min, max, typeof min, typeof to)\r\n if (pr < range[0]) return min;\r\n if (pr > range[1]) return max;\r\n return min + (max - min) * ((pr - range[0])/(range[1] - range[0]));\r\n}\r\n\r\nexport function transform(el, x, y) {\r\n el.style.transform = 'translate(' + x + ',' + y + ')';\r\n}\r\n\r\nexport function removeTransform(el) {\r\n\r\n}\r\n\r\n// requestAnimationFrame\r\n// const raf =\r\n// (\n
\n );\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n\nimport { Link } from 'react-router-dom';\nimport { useAuth } from 'auth';\nimport { useRouter } from 'components';\n\nexport function MemberMenu({ onCloseMenu }) {\n const auth = useAuth();\n const router = useRouter();\n\n function signout(e) {\n e.preventDefault();\n e.stopPropagation();\n\n auth.signout().then(user => {\n router.push('/login')\n onCloseMenu();\n }).catch(error => {\n console.log(error)\n })\n }\n\n // const email = (auth.user && auth.user.email) || '';\n\n //if (router.path === '/member/login') return null;\n if (!auth.isResolved) return null;\n\n const s = getStyle()\n\n if (auth.user) {\n return 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 Dashboard\n \n
- \n signout(e)}>LOG OUT\n \n
- \n
- \n LOG IN\n \n
- \n {subItemsElts}\n
![\"logo\"](\"/assets/logos/logo.png\"){kind=logo}
\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';\nimport debounce from \"lodash/debounce\";\n\nexport function AppRouteChanged() {\n const { path } = useRouter();\n const parallax = useParallax();\n const history = useHistoryStore();\n \n React.useLayoutEffect(() => {\n //console.log('route changed', path)\n const scrolled = debounce((e) => saveScrollPosition(e, path), 100)\n\n \n history.push({ path: path })\n if (typeof window !== `undefined`) {\n parallax.reset();\n \n const pos = getPreviousPostition(path)\n // console.log('pos', pos)\n if (pos) {\n setTimeout(() => {\n window.scrollTo(pos.scrollLeft, pos.scrollTop)\n }, 500)\n } else {\n const hash = window.location.hash;\n \n if (hash) { \n setTimeout(() => {\n const anchor = utils.ui.findElement(hash);\n if (anchor)\n utils.ui.scrollTo(anchor, 500);\n }, 500)\n } else {\n window.scrollTo(0, 0);\n }\n }\n\n }\n\n window.addEventListener('scroll', scrolled)\n return () => {\n window.removeEventListener('scroll', scrolled)\n }\n // eslint-disable-next-line\n }, [path]);\n\n return null;\n}\n\n//#region scroll position store\n\nfunction saveScrollPosition(e, path) {\n if (typeof window === `undefined`) return;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop\n // console.log('save position', path, scrollTop, scrollLeft)\n setPositionData(path, scrollLeft, scrollTop)\n}\n\nfunction getPreviousPostition(path) {\n const dataArr = getPositionData() || []\n // console.log(dataArr.length)\n const pos = getPreviousPostitionInArray(dataArr, path)\n return pos\n}\n\nfunction getPositionData() {\n const dataStr = localStorage.getItem('scrollPosRouter')\n // console.log(dataStr)\n if (dataStr) {\n let data\n try {\n data = JSON.parse(dataStr)\n } catch (e) { return null }\n return data\n }\n return null\n}\n\nfunction setPositionData(path, scrollLeft, scrollTop) {\n const dataArr = getPositionData() || []\n setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop)\n // console.log(dataArr)\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr))\n}\n\nconst MAX_SIZE = 5\nfunction setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop) {\n const same = dataArr.length > 0 && dataArr[dataArr.length - 1].path === path\n if (same) {\n const found = dataArr[dataArr.length - 1]\n found.scrollLeft = scrollLeft\n found.scrollTop = scrollTop\n found.ts = new Date()\n } else {\n if (dataArr.length >= MAX_SIZE) dataArr.shift()\n dataArr.push({\n path: path,\n scrollLeft: scrollLeft,\n scrollTop: scrollTop,\n ts: new Date()\n })\n }\n}\n\nfunction getPreviousPostitionInArray(dataArr, path) {\n const foundIndex = findIndexReverse(dataArr, x => x.path === path)\n // console.log(foundIndex, dataArr.length - 1)\n if (foundIndex >=0 && foundIndex >= dataArr.length - 2) {\n // remove after the index\n if (foundIndex < dataArr.length - 1) {\n dataArr.splice(foundIndex + 1)\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr))\n }\n return dataArr[foundIndex]\n }\n return null\n}\n\nfunction findIndexReverse(list, fn) {\n if (!list) return -1;\n for (let i = list.length - 1; i >= 0 ; i--) {\n if (fn(list[i])) {\n return i;\n }\n }\n return -1;\n}\n//#endregion","import React from 'react';\nimport { Route } from 'react-router-dom';\n//import { MenuLoader } from './menuLoader';\n\nconst DashboardLayout = ({ children, ...rest }) => {\n return {children}
;\n};\n\nconst DashboardNoAuthLayoutRoute = ({\n component: RenderComponent,\n ...rest\n}) => {\n return (\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}","import React, { Fragment } from 'react';\nimport { Route } from 'react-router-dom';\nimport env from 'env';\nimport { ErrorPopup } from '../site/members/error/errorPopup';\nimport { useRouter, SiteLink, usePost, Loading } from '../components';\nimport { useAuth } from 'auth';\nimport { MenuLoader } from './menuLoader';\nimport { AiOutlineMenuUnfold } from \"react-icons/ai\";\nimport { MdPayment, MdAssignment, MdShoppingCart, MdPassword, MdLogout } from \"react-icons/md\";\nimport { useStore } from '../store';\n\nconst DashboardLayout = ({ children, ...rest }) => {\n const isCancelled = React.useRef(false);\n const [sessionChecked, setSessionChecked] = React.useState(false);\n const router = useRouter();\n const [menuOpen, setMenuOpen] = React.useState(() => {\n const w = window.innerWidth;\n if (w <= 500) {\n return false;\n }\n return true;\n });\n const { navigate, pathname, query } = router;\n const clubId = query.clubId || '';\n \n const auth = useAuth();\n //const get = useGet();\n const post = usePost();\n const { state } = useStore();\n \n const menu = [\n {\n title: 'ECOMMERCE', type: 'main', class: 'main', items: [\n { title: 'ORDERS', link: '/member/order-history', class: (auth.authData.memberInfo && auth.authData.memberInfo.memberType === 99) ? 'sub admin' : 'sub', type: 'sub', icon: {title}
\n {props.children}\n {messages.map((error, inx) => (\n \n ))}\n\n \n LOG IN\n \n
\n \n {\n auth.authData.memberInfo &&\n \n {\n menu.map((item, index) =>\n \n
;\n\n React.useEffect(() => {\n const checkAuth = async () => {\n if (!isCancelled.current) {\n const loggedIn = await auth.loggedIn();\n if (!loggedIn) {\n navigate('/login');\n } else {\n\n if (auth.authData.memberInfo) {\n setSessionChecked(true);\n }\n else {\n post.send(env.apiBase + `/api/dashboard/getdashboard`, {clubId : clubId});\n }\n\n }\n }\n };\n checkAuth();\n \n return () => {\n isCancelled.current = true;\n };\n\n //eslint-disable-next-line\n }, [auth, navigate]);\n\n React.useEffect(() => {\n\n if (auth.authData.memberInfo) {\n return;\n }\n\n if (sessionChecked === true && data) {\n auth.setMemberInfo(data.memberInfo);\n }\n //eslint-disable-next-line\n }, [sessionChecked]);\n\n if (post.done()) {\n const _data = post.response;\n if(clubId === '' && _data.memberInfo.memberType === 99){\n //router.push('/member/admin/dashboard/' + _data.memberInfo.clubId);\n window.location.href = '/member/admin/dashboard/' + _data.memberInfo.clubId;\n //return;\n }\n else{\n post.reset();\n setSessionChecked(true);\n }\n }\n else if (post.hasErrors() && sessionChecked === false) {\n setSessionChecked(true);\n }\n\n const data = post.response;\n\n function signout(e) {\n e.preventDefault();\n e.stopPropagation();\n\n auth.signout().then(user => {\n router.push('/login')\n }).catch(error => {\n console.log(error)\n });\n\n }\n\n if (!sessionChecked) {\n return (\n \n {\n auth.authData.memberInfo.memberType === 99 &&\n \n {/*
\n }\n ADMIN VIEW
\n }\n {auth.authData.memberInfo.displayName}
*/}\n\n
\n )\n }\n \n
\n {item.title}
\n {item.items.map((subItem, subItemIndex) =>\n \n {subItem.icon && subItem.icon}\n {\n (subItem.type === 'sub-function') ?\n {subItem.title} :\n {subItem.title} \n }\n
)}\n \n
\n );\n }\n else if (post.hasErrors()) {\n let errors = post.errors;\n let title = 'Loading Error';\n if (post.containsErrorMessage('inactive account')) {\n title = 'Account Disabled';\n errors = 'This account is inactive or temporarily disabled.';\n //auth.signout();\n }\n\n return \n \n \n
\n \n {sideMenu}\n
\n \n {sideMenu}\n
\n \n {\n auth.authData.memberInfo &&\n\n \n
\n }\n
\n \n \n {auth.authData.memberInfo.clubInfo.clubName} \n Virtual Store \n \n
\n }\n \n
\n \n
\n \n {children}\n
\n \n {'Welcome ' + names[0]}\n
\n )\n}\n\nconst DashboardLayoutRoute = ({ component: RenderComponent, ...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 (option.helpText && option.helpText !== '') &&\r\n \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\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 \r\n
\r\n \r\n { valueStr === '' ? 'No File Chosen' : valueStr.replace(/^.*\\\\/, \"\")}\r\n
\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 post.send(env.apiBase + '/api/dashboard/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 \n console.log(\"data\", data);\n \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 return model;\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}","import { css } from '@emotion/core';\nimport { variables, mq } from '../../../cssInJs';\n\nconst numberOfTiles = [1, 1, 1, 1]\n//const marginLR = [14, 14, 14, 14]\n//const marginTB = [14, 14, 14, 14]\nconst marginTB = [20, 20, 20, 20];\n\nconst widthPercent = (index) => 100 / numberOfTiles[index] + '%'\n\n// const linkText = {\n// color: variables.fontColor,\n// fontSize: '0.8rem',\n// padding: '0 20px',\n// '&:hover': {\n// color: variables.fontColor,\n// }\n// }\n\nexport const portalStyle = {\n portal__background: {\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: '9998'\n },\n portal__popupcontainer: mq({\n position: 'absolute',\n top: '12%',\n zIndex: '9999',\n display: 'inline-block',\n padding: '0.5rem 1.5rem',\n backgroundColor: 'rgb(37, 47, 62)',\n fontWeight: 700,\n color: 'white',\n borderRadius: '10px',\n left: '50%',\n transform: 'translateX(-50%)'\n }),\n portal__popupcontainer__centre: mq({\n position: 'absolute',\n top: '50%',\n zIndex: '9999',\n display: 'inline-block',\n padding: '0.5rem 1.5rem',\n backgroundColor: 'rgb(37, 47, 62)',\n fontWeight: 700,\n color: 'white',\n borderRadius: '10px',\n left: '50%',\n transform: 'translate(-50%, -50%)'\n }),\n portal__error__msg: {\n position: 'relative',\n '.close__button': {\n position: 'absolute',\n top: '50%',\n right: '0px',\n transform: 'translateY(-50%)'\n }\n }\n}\n\nexport const tileListStyle = {\n tiles: mq({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n //marginLeft: [-marginLR[0] / 2, -marginLR[1] / 2, -marginLR[2] / 2, -marginLR[3] / 2],\n //marginRight: [-marginLR[0] / 2, -marginLR[1] / 2, -marginLR[2] / 2, -marginLR[3] / 2],\n marginTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n marginBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n maxWidth: ['800px'],\n margin: 'auto',\n '&.portal': mq({\n //maxWidth:'1024px',\n maxWidth: 'unset',\n margin: 'unset',\n marginLeft: '-10px',\n marginRight: '-10px'\n })\n }),\n categoryList: mq({\n marginTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n marginBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n maxWidth: ['800px'],\n margin: 'auto',\n '&.portal': {\n maxWidth: 'unset',\n margin: 'unset'\n },\n 'div.ff.form-group': {\n maxWidth: '250px'\n }\n })\n}\n\nexport const tileStyle = {\n tile: mq({\n //paddingLeft: [marginLR[0] / 2, marginLR[1] / 2, marginLR[2] / 2, marginLR[3] / 2],\n //paddingRight: [marginLR[0] / 2, marginLR[1] / 2, marginLR[2] / 2, marginLR[3] / 2],\n paddingLeft: '10px',\n paddingRight: '10px',\n paddingTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n paddingBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n maxWidth: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexBasis: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexGrow: 0,\n flexShrink: 0,\n }),\n tileLink: {\n background: '#fff',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n //padding: 5,\n //border: '1px solid red',\n '&:hover': {\n textDecoration: 'none'\n //background: '#f3f3f3'\n }\n },\n tileContainer: {\n display: 'flex',\n flexDirection: 'row',\n border: '1px solid',\n borderRadius: '10px',\n flexWrap: 'wrap',\n padding: '0.2rem'\n //border: '1px solid red'\n },\n prdImage: mq({\n backgroundColor: 'transparent',\n flex: ['0 0 50%', null, '0 0 20%'],\n maxWidth: ['50%', null, '20%'],\n padding: '0.2rem'\n }),\n bg: mq({\n //height: 0,\n //paddingBottom: '100%',\n //paddingTop: ['136px', null, '210px'],\n paddingTop: ['130px'],\n backgroundPosition: 'center',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat'\n }),\n name: mq({\n padding: '0.3rem',\n lineHeight: '1',\n fontSize: ['1rem', null, '1rem'],\n flex: '0 0 100%',\n maxWidth: '100%',\n fontWeight: 700\n }),\n shortDes: css({\n textAlign: 'center',\n marginTop: '0.8rem'\n }),\n nameWrap: mq({\n padding: '0.3rem',\n fontWeight: 'bold',\n marginLeft: ['0rem', null, '1rem'],\n marginRight: ['0rem', null, '1rem'],\n color: variables.fontColor,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n flex: ['0 0 50%', null, '0 0 25%'],\n maxWidth: ['50%', null, '25%'],\n paddingLeft: ['1.2rem', null, '0.3rem']\n }),\n price: mq({\n padding: '0.3rem',\n fontSize: ['1rem', null, '1rem'],\n }),\n qty: mq({\n padding: '0.3rem',\n display: 'flex',\n alignItems: 'center',\n '.qtyText': {\n flex: '0 0 30%',\n maxWidth: '30%'\n },\n '.qtyInput': {\n flex: '0 0 50%',\n maxWidth: '50%',\n '.form-group': {\n marginBottom: '0px'\n }\n }\n }),\n attributesWrap: mq({\n padding: '0.3rem',\n flex: ['0 0 100%', null, '0 0 27%'],\n maxWidth: ['100%', null, '27%'],\n fontWeight: 'bold',\n color: variables.fontColor\n }),\n button__wrap: mq({\n padding: '0.3rem',\n flex: ['0 0 100%', null, '0 0 20%'],\n maxWidth: ['1000%', null, '20%'],\n //border: '1px solid red',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'unset',\n 'button': {\n // backgroundColor:'red'\n }\n }),\n\n button__view__product: {\n \n marginBottom : '1.1rem',\n 'a': {\n color: 'white',\n '&:hover': {\n textDecoration: 'none'\n }\n }\n }\n\n}","import { mq, variables } from '../../../../cssInJs';\n\nexport default{\n attributes__wrap : {\n cursor: 'pointer',\n height: '100%',\n paddingLeft: '0.3rem',\n paddingRight: '0.3rem',\n '&:hover':{\n background: variables.bgColor\n }\n },\n attributes__title : mq({\n display:'flex',\n '.attr__arrow' : {\n marginRight: '0.5rem',\n lineHeight:0,\n height:'auto',\n marginTop: 'auto',\n marginBottom: 'auto'\n }\n }),\n attributeItem__container : mq({\n display: 'flex',\n fontWeight: 400,\n '.attributeItem__item__value' : mq({\n marginLeft: '0.2rem'\n })\n }),\n\n portal__background : {\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: '9998'\n },\n portal__popupcontainer : mq({\n position: 'fixed',\n top:'50%',\n left: '50%',\n width: '100%',\n zIndex: '9999',\n margin: '0px',\n transform: 'translate(-50%, -50%)',\n maxWidth: ['320px', null, '560px']\n }),\n select__attribute : {\n backgroundColor:'white',\n textAlign:'center',\n maxWidth: ['320px', null, '560px'],\n margin: 'auto',\n padding: '0.5rem 0',\n borderRadius: '10px'\n },\n selectattribute__title : {\n position:'relative',\n paddingTop: '0.5rem',\n paddingBottom: '0.6rem',\n fontSize: '1.3rem',\n fontWeight:500,\n '.selectattribute__close' : {\n position: 'absolute',\n top: '50%',\n right: '10px',\n transform:'translateY(-50%)',\n cursor: 'pointer',\n borderRadius:'50%',\n lineHeight: '0px',\n padding : '5px',\n '&:hover' : {\n backgroundColor: '#ebebeb'\n }\n }\n },\n\n selectattribute__item : mq({\n textAlign:'left'\n }),\n selectattribute__item__name : {\n backgroundColor:'#f5f3f1',\n padding:'0.3rem 0.5rem',\n paddingLeft : '28px',\n fontWeight:500,\n fontSize:'1.2rem'\n },\n selectattribute__item__options : {\n padding:'0.3rem 0.5rem',\n fontWeight:700,\n cursor: 'pointer',\n '&.selected' : {\n color: '#017a39'\n },\n '.check' : {\n //display : 'none'\n width : '20px',\n display:'inline-block'\n }\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Fragment, useState, useEffect } from 'react';\nimport style from './attributes1Style';\nimport { MdMenuOpen, MdClose, MdCheck } from \"react-icons/md\";\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 Attributes({attributes, resetFormChange}){\n \n const [openPopup, setOpenPopup] = useState(false);\n const attributesItems = attributes.controls;\n\n function openAttributeOptions(e){\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }\n\n function closeAttributeOptions(e){\n setOpenPopup(false);\n resetFormChange();\n document.body.style.overflow = \"unset\";\n }\n \n return (\n \n {\n attributesItems.length > 0 ?\n \n {\n openPopup &&\n \n \n \n }\n \n
\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 { mq, variables } from '../../../cssInJs';\n\nexport default{\n dashboard_des :{\n marginTop: '1rem'\n },\n dashboard__links : {\n fontWeight: 800\n },\n dashboard_li : {\n '&.admin' : {\n pointerEvents: 'none',\n 'a' : {\n color: 'gray'\n }\n }\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Fragment, useEffect, useState } from 'react';\nimport { useAuth } from 'auth';\nimport { Loading, SiteLink } from '../../../components';\nimport utils from 'utils';\nimport style from './dashboardPageStyle';\n//import env from 'env';\n\n//import { useGet } from 'components';\n// import { SiteLink } from 'components';\n//import { Loading, ErrorPopup } from 'components';\n\n//import { SingleBannerPanel } from 'site/singleBanner/singlePanel';\n//const r = utils.site.resourcePath;\n//const bannerImage = '/sites/preventingharm/media/bwbanners/adobestock_392700489.jpg';\n\nexport function Dashboard() {\n const auth = useAuth();\n const memberInfo = auth.authData.memberInfo;\n const user = auth.authData.user;\n const [sendingStatus, setSendingStatus] = useState(\"pending\");\n \n useEffect(() => { \n setSendingStatus(\"pending\");\n if(!memberInfo || memberInfo === null || !user || user === null){\n return;\n }\n\n setSendingStatus(null);\n \n // eslint-disable-next-line\n }, [memberInfo, user]);\n\n if(sendingStatus === 'pending'){\n return 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
ORDERS \n PRODUCTS \n CART \n
\n {/*
\n \n
\n \n Attribute Options\n
\n {\n attributesItems.map((item, index) => \n
\n \n
\n {attributes.controls.map((item, index) => (\n \n
\n Attributes
\n \n
\n )\n}\n\nfunction NoAttributeItem(){\n return(\n { items[0].value} :
\n {items[1].value}
\n No Attributes
\n )\n}\n\nfunction SelectAttributeItem({item}){ \n const [value, setValue] = useState(item.controls[1].value);\n function changeValue(s_item){\n item.controls[1].value = s_item.value;\n item.controls[2].value = s_item.value;\n setValue(s_item.value);\n }\n\n return(\n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { useState, useEffect, Fragment } from 'react';\nimport utils from '../../../utils';\nimport { SiteLink, Button, usePost, ErrorMessage } from '../../../components';\nimport { tileStyle, portalStyle } from './productTileStyleV2';\nimport { fb, validators, useForm } from '../../../form';\nimport { Attributes } from './attributes/attributes1';\nimport env from '../../../env';\nimport { useStore } from '../../../store';\nimport { showAddCartMsg } from '../../siteUtils';\nimport { createPortal } from \"react-dom\";\nimport { MdClose } from \"react-icons/md\";\nimport { getEnquiryFormModel } from './enquiryFormModel';\nimport { useAuth } from 'auth';\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 ProductTile({ product, openMsgPopUp }) {\n \n const auth = useAuth();\n const memberInfo = auth.authData.memberInfo;\n \n const s = tileStyle;\n const imageUrl = product.thumbnailUrl ? utils.site.resourcePath(product.thumbnailUrl) : '/assets/logos/logo2.png';\n //const imageUrl = 'https://dummyimage.com/600x400/000/fff';\n const productUrl = product.productUrl ? product.productUrl : memberInfo.memberType === 99 ? `/member/admin/product/${product.productSlug}` : `/member/product/${product.productSlug}`;\n\n const model = getFormModel(product, { usePlaceholder: true });\n //const form = useForm(model, { usePlaceholder: true, onControlChanged: onControlChanged });\n const form = useForm(model, { usePlaceholder: true, onControlChanged: onControlChanged });\n const render = (name, parent = null) => form.renderControl(name, parent);\n const attributes = form.findControl('variantOptions');\n const post = usePost();\n const { dispatch } = useStore();\n const [openPopup, setOpenPopup] = useState(false);\n const [productPrice, setProductPrice] = useState(product.priceIncTax);\n\n const enquiryFormModel = getEnquiryFormModel({});\n const enquiryForm = useForm(enquiryFormModel, { usePlaceholder: true });\n const enquiryFormRender = (name) => enquiryForm.renderControl(name, null);\n\n //function onControlChanged(e, control) {\n // if (!(control.type === 'select' && control.parent)){\n // return;\n // }\n // const newModel = getFormModel(product, form.getValue())\n // form.reset(newModel)\n //}\n\n function onControlChanged(e, control) {\n if (control && control.name === 'quantity') {\n let _price = product.priceIncTax;\n for (let i in product.tiredPricings) {\n let _rangeMax = product.tiredPricings[i].rangeMax ? product.tiredPricings[i].rangeMax : 10000000;\n if (product.tiredPricings[i].rangeMin <= control.value && _rangeMax >= control.value) {\n _price = product.tiredPricings[i].pricePerUnit;\n break;\n }\n }\n setProductPrice(_price);\n }\n }\n\n function resetFormChange() {\n const newModel = getFormModel(product, form.getValue());\n form.reset(newModel);\n }\n\n function openEnquiry() {\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }\n\n function closeEnquiry() {\n setOpenPopup(false);\n document.body.style.overflow = \"unset\";\n }\n\n function addToCart(e) {\n form.validateForm(e, () => {\n const formVal = form.getValue();\n let _variantOptions = [];\n for (let i in formVal.variantOptions) {\n let _item = {\n name: formVal.variantOptions[i].name,\n value: formVal.variantOptions[i][Object.keys(formVal.variantOptions[i])[1]]\n };\n _variantOptions.push(_item);\n }\n \n let _cartId = env.getDevCartId();\n \n const value = {\n quantity: formVal.quantity,\n variantOptions: _variantOptions,\n productId: product.productId,\n productPrice : productPrice,\n //cartId: _cartId === 'null' || 'undefined' ? null : _cartId\n cartId: (_cartId === 'null' || _cartId === 'undefined') ? null : _cartId\n };\n\n post.send(env.apiBase + \"/api/cart/addtocartforclubmanger\", value);\n //post.send(env.apiBase + \"/api/cart/addtocartforclubmangertest\", value);\n })\n }\n\n function onSubmit(e) {\n enquiryForm.validateForm(e, () => {\n const value = { ...enquiryForm.getValue(), productName: product.productName, emailReceiver: '' };\n //var files = form.getFiles();\n var formData = new FormData();\n formData.append('jsonData', JSON.stringify(value));\n //post.send(env.apiBase + \"/api/contact/send\", value);\n post.sendFormData(env.apiBase + \"/api/cart/sendenquire\", formData);\n })\n //console.log('submitting');\n }\n\n useEffect(() => {\n form.reset(getFormModel(product, { usePlaceholder: true }));\n setProductPrice(product.priceIncTax);\n\n // eslint-disable-next-line\n }, [product]);\n\n if (post.done()) {\n env.setDevCartId(post.response.results.cartInfo.cartId);\n const formVal = form.getValue();\n showAddCartMsg(formVal.quantity + \" items added to cart\");\n setTimeout(() => {\n dispatch({ type: 'SET_STATE', payload: { cartInfo: post.response.results.cartInfo.totalQuantity === 0 ? 0 : (post.response.results.cartInfo.totalQuantity) - 1 } });\n }, 100);\n\n // if(post.response.results.minimumQtyInfo && post.response.results.minimumQtyInfo !== ''){\n // openMsgPopUp(post.response.results.minimumQtyInfo); \n // }\n\n post.reset();\n // return \n {value}\n
\n {\n item.controls[1].options.map((s_item, s_index) =>\n {changeValue(s_item)}}>\n \n {\n value === s_item.value &&\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 \n {product.productName}\n \n\n
\n {\n (product.shortDesc && product.shortDesc !== '') &&\n \n {product.shortDesc}\n
\n }\n \n \n \n \n
\n \n
\n \n \n {\n product.productStatus !== 0 ? product.productStatusText : product.priceTextOveriding ? product.priceTextOveriding : 'AU' + utils.money.formatMoney(productPrice)\n }\n
\n \n
\n \n QTY :\n
\n \n {render('quantity')}\n
\n \n
\n\n\n \n\n\n\n \n\n {\n product.productStatus === 0 &&\n \n }\n {\n product.productStatus === 1 &&\n \n }\n {\n product.productStatus === 98 &&\n \n }\n {\n product.productStatus === 100 &&\n \n }\n
\n No products
;\n}\n\nfunction Items({ items, categories, defaultCategories, clubCategories }) {\n const s = tileListStyle;\n const defaultCategoriesArray = (defaultCategories && defaultCategories !== '') ? defaultCategories.split(',') : [];\n const model = getCategoryListModel(categories, defaultCategoriesArray, clubCategories);\n const categoryListForm = useForm(model, {usePlaceholder : true, onControlChanged: orderItemChanged});\n const { state } = useStore();\n const [openPopupMsg, setOpenPopupMsg] = useState(\"\");\n const [showProducts, setShowProducts] = useState(()=> {\n sortProudcts(items);\n return items;\n });\n\n function orderItemChanged(e, control){\n if(control && control.name === 'categoryList'){\n \n let _items = [];\n if(control.value && control.value !== ''){\n _items = items.filter(item => {\n for(let i in item.productClubCategories){\n if(item.productClubCategories[i].clubCategoryId === control.value){\n //item.seqInCategory = item.productClubCategories[i].seq;\n return true;\n }\n }\n return false;\n });\n sortProudcts(_items);\n }\n else{\n _items = items;\n }\n\n //sort\n setShowProducts(JSON.parse(JSON.stringify(_items)));\n\n }\n };\n\n function openMsgPopUp(msg){\n setTimeout(() => {\n setOpenPopupMsg(msg); \n }, 100);\n document.body.style.overflow = \"hidden\";\n }\n\n function closeMsgPopUp(){\n setOpenPopupMsg(\"\");\n document.body.style.overflow = \"unset\";\n }\n\n const render = (name) => categoryListForm.renderControl(name, null);\n return (\n \n
\n ERROR
\n {openPopupMsg}
\n PRODUCTS
\n \n {render('categoryList')}\n
\n \n {\n showProducts.length > 0 ? showProducts.map((item, index) =>
\n No product
\n }\n \n
\n );\n\n // if (rrp && rrp !== price) {\n // return {priceText}
\n {product.shippingFeeType === 1 && (\n \n {\"Shipping fee : AU \" +\n (product.shippingFee\n ? utils.money.formatMoney(product.shippingFee, 2)\n : \"$0\")}\n
\n )}\n \n //
\n // } else {\n // return {priceText}
\n // RRP: {rrpText} {discount.toFixed(0)}% discounted
\n // {\n // product.shippingFeeType === 1 &&\n // \n // { 'Shipping fee : AU ' + (product.shippingFee ? utils.money.formatMoney(product.shippingFee, 2) : \"$0\")}\n //
\n // }\n // \n //
\n // }\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport { useState, Fragment } from 'react';\nimport env from '../../../env';\nimport { SiteLink } from '../../../components'; //useRouter\n//import { useHistory } from \"react-router-dom\";\nimport { useForm } from '../../../form';\nimport { fb, validators } from '../../../form';\nimport { Button, ErrorMessage } from '../../../components';\nimport { usePost } from '../../../components';\nimport utils from '../../../utils';\nimport style from './productViewStyle';\n//import { MdKeyboardArrowDown } from \"react-icons/md\";\nimport { useStore } from '../../../store';\nimport { ProductPrice } from './price';\n//import {ProductAttributes} from './productAttributes';\n\nexport function AddToCart({ product, variantOnly, openPopupImage }) {\n\n const post = usePost();\n //const { Redirect } = useRouter();\n //const history = useHistory();\n const render = (name, parent = null) => form.renderControl(name, parent);\n const model = getFormModel(product, {});\n const form = useForm(model, { usePlaceholder: true, onControlChanged: onControlChanged });\n\n const [attributesEx, setAttributesEx] = useState(() => {\n let _array = [];\n for(let n in product.variantAttributes){\n console.log(n, product.variantAttributes[n].options[0].value);\n _array.push(product.variantAttributes[n].options[0].value);\n }\n return _array;\n });\n\n console.log(attributesEx);\n\n const [checkGoToCartBtn, setCheckGoToCartBtn] = useState(false);\n const { dispatch, state } = useStore();\n\n function onControlChanged(e, control) {\n if (!(control.type === 'select' && control.parent)){\n return;\n } \n const newModel = getFormModel(product, form.getValue())\n form.reset(newModel)\n }\n\n function addToCart(e) {\n form.validateForm(e, () => {\n const formVal = form.getValue();\n let _variantOptions = [];\n for(let i in formVal.variantOptions){\n let _item = {\n name : formVal.variantOptions[i].name,\n value : formVal.variantOptions[i][Object.keys(formVal.variantOptions[i])[1]]\n };\n _variantOptions.push(_item);\n }\n //const value = { ...formVal, productId: product.productId, cartId: env.getDevCartId() };\n let _cartId = env.getDevCartId();\n const value = { \n quantity : formVal.quantity,\n variantOptions : _variantOptions,\n productId: product.productId,\n cartId: _cartId === 'null' ? null : _cartId\n };\n \n setCheckGoToCartBtn(false);\n //post.send(env.apiBase + \"/api/cart/addtocart\", value);\n post.send(env.apiBase + \"/api/cart/addtocartforclubmanger\", value);\n\n })\n }\n\n if (post.done()) {\n env.setDevCartId(post.response.results.cartInfo.cartId);\n if(post.response.errors.length < 1){\n setTimeout(() => {\n dispatch({type:'SET_STATE', payload : {cartInfo : post.response.results.cartInfo.totalQuantity === 0 ? 0 : (post.response.results.cartInfo.totalQuantity)-1}});\n setCheckGoToCartBtn(true);\n }, 500); \n }\n post.reset();\n // return {priceText}
\n // {\n // product.shippingFeeType === 1 &&\n // \n // { 'Shipping fee : AU ' + (product.shippingFee ? utils.money.formatMoney(product.shippingFee, 2) : \"$0\")}\n //
\n // }\n // \n {/* \n {attributes.controls.length > 0 &&
}\n\n{\n attributes.controls.map(\n (item, index) =>\n { \n return(\n \n\n }\n \n {\n (product.chartImage && product.chartImage !== \"\") &&\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}","//#region GTM\r\nexport const hasGTM = () => {\r\n return !!(typeof window !== `undefined` && window.dataLayer);\r\n}\r\n\r\nexport const pageView = (url, pageTitle = null) => {\r\n if (!hasGTM()) return;\r\n\r\n const pageOpt = pageTitle ? {\r\n path: url,\r\n title: pageTitle\r\n } : { path: url }\r\n //console.log(url, pageOpt)\r\n window.dataLayer.push({\r\n event: 'pageview',\r\n page: pageOpt\r\n })\r\n}\r\n\r\n// \r\nexport const sendEvent = (eventName, params) => {\r\n if (!hasGTM()) return;\r\n window.dataLayer.push(Object.assign({ event: eventName }, params || {}))\r\n}\r\n\r\nexport const sendGAEvent = (category, action, label, value) => {\r\n if (!hasGTM()) return;\r\n window.dataLayer.push(Object.assign({ event: 'gaEvent' }, { category: category || '', action: action || '', label: label || '', value: value || '' }))\r\n}\r\n//#endregion\r\n\r\n\r\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './productViewStyle';\nimport React, { useState, useEffect, useRef, useLayoutEffect } from 'react';\nimport env from '../../../env';\nimport utils from '../../../utils';\nimport { ErrorPopup, Loading, Button, ErrorMessage, useGet, usePost, useRouter, SiteLink } from '../../../components';\n//import { CommonProductBottom } from '../../../cms/pages/partials/commonProductBottom';\n//import { ProductTile } from '../productList/productTile';\nimport FsLightbox from 'fslightbox-react';\n//import { MetaTag } from '../../../components';\n//import { AddToCart } from './addToCart';\nimport { AddToCart } from './addToCartOld';\n\nimport Slider from \"react-slick\";\nimport { MdFavorite } from \"react-icons/md\";\n\n//import { debounce } from '../../../lib/utils-core/debounce';\nimport { gtm } from '../../../lib/tracking';\n//import { FacebookShareButton, FacebookIcon, PinterestShareButton, PinterestIcon } from \"react-share\";\nimport { createPortal } from \"react-dom\";\nimport { getEnquiryFormModel } from './enquiryFormModel';\nimport { useForm } from '../../../form';\nimport Drift from 'drift-zoom';\n//import { ProductPrice } from './price';\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\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/getproductforclubmanger/${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 attributes.controls.map(\n (item, index) =>\n { \n return(\n
\n \n
\n )\n }\n )\n}\n\n \n {item.controls[0].value}\n
\n\n \n
\n {/* \n {\n item.controls[1].options.map((sitem, sindex) => \n
\n {\n item.controls[1].value = sitem.value;\n setAttributesEx(pre => {\n let _new = {...pre};\n return _new;\n });\n }}>\n {sitem.name}\n
)\n }\n {render('value', item)}
*/}\n {\n openPopupImage();\n }}> \n View Size Chart\n
\n }\n\n {!variantOnly &&}\n No product found.
\n return (\n \n
*/}\n \n })
setHeroImage(photo)} /> */}\n
\n );\n\n const slidesBanner = allPhotos.map((photo, index) =>\n {\n setHeroImage(photo)\n sliderBanner.current.slickGoTo(index);\n }}\n >\n
\n {/* \n {/* 
openPopupImage(photo.imageUrl)} /> */}\n \n
\n );\n\n function onSubmit(e) {\n enquiryForm.validateForm(e, () => {\n const value = { ...enquiryForm.getValue(), productName: product.productName, emailReceiver: '' };\n //var files = form.getFiles();\n var formData = new FormData();\n formData.append('jsonData', JSON.stringify(value));\n //post.send(env.apiBase + \"/api/contact/send\", value);\n post.sendFormData(env.apiBase + \"/api/cart/sendenquire\", formData);\n setSendingStatus('pending');\n })\n //console.log('submitting');\n }\n\n if (post.done() && sendingStatus === 'pending') {\n //var value = enquiryForm.getValue();\n //gtm.sendEvent('contactFormSubmitted', {contactEmail: value.email} )\n enquiryForm.reset(enquiryFormModel);\n setSendingStatus(null);\n setTimeout(() => {\n setOpenPopup(false);\n document.body.style.overflow = \"unset\";\n }, 1500);\n }\n\n useLayoutEffect(() => {\n\n const triggers = [...document.querySelectorAll('.productView__hero')];\n const paneContainer = document.querySelector('div.product__detail__col');\n\n let _inlinePane = false;\n if(window.innerWidth <= 500){\n _inlinePane = true;\n }\n\n triggers.map(img => new Drift(img, {\n paneContainer: paneContainer,\n inlinePane: _inlinePane,\n //containInline: true,\n //inlineOffsetY: -85,\n }));\n\n }, []);\n\n return (\n \n\n \n {\n openPopup &&\n \n\n
\n )\n}\n\n// function getMetaTag(product, mainPhoto) {\n// return {\n// title: product.productName,\n// description: product.metaDesc || product.shortDesc,\n// keywords: '',\n// heroImageUrl: utils.site.resourcePath(mainPhoto.imageUrl),\n// language: 'English',\n// country: 'Australia',\n// siteName: env.siteName,\n// url: utils.site.resourcePath('/products/' + product.productSlug),\n// //canonical: utils.site.resourcePath(pageData.pageUrl)\n// }\n// }\n\n// function 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\n \n \n
\n \n \n
\n\n {product.description && }\n {/* {barcodeCleaned && } */}\n {heroImage && heroImage.imageUrl && }\n \n\n
\n {/* \n
\n\n {\n !product.clubId &&\n \n < Return to product list \n
\n \n {\n setFavorite(pre => {\n let _localStorageFavorites = localStorage.favorites.replace(product.productId + \"|\", \"\");\n let _new = !pre;\n if (_new === true) {\n _localStorageFavorites = _localStorageFavorites + product.productId + \"|\";\n }\n localStorage.setItem(\"favorites\", _localStorageFavorites);\n return _new;\n });\n }}> \n
\n\n }\n\n \n {/* css={style.heroImageContainer} */}\n
\n \n \n {slidesBanner}\n \n
\n\n {\n (slides && slides.length) > 1 &&\n \n {/* {slides} */}\n \n {slides}\n \n
\n }\n\n \n\n {/*
*/}\n\n {/*
\n \n {product.shortDesc}\n
*/}\n\n {\n (product.shippingFeeType !== null && product.shippingFeeType === 99) &&\n * Pickup Only Product
\n }\n\n {\n clubInfo &&\n Club Product
\n }\n\n \n {product.productName}\n
\n\n \n\n {/**/}\n\n {/*
\n Product code: {product.productCode}\n
*/}\n\n {\n !checkExpiredDate &&\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 { 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 marginTop:'1rem'\n }),\n\n stepsWrapper: css({\n overflow: 'hidden',\n }),\n steps: css({\n display: 'flex',\n transition: 'all 1s cubic-bezier(0.22, 0.61, 0.36, 1)',\n '& h3, & h4': {\n textTransform: 'uppercase'\n }\n }),\n step,\n stepCurrent: css(step, {\n // maxHeight: '2000px',\n opacity: 1,\n background: 'rgba(255,255,255,0.5)',\n }),\n stepPrev: css(step, {}),\n stepNext: css(step, {}),\n stepLast: css({\n //maxHeight: '1000px',\n opacity: 1\n }),\n\n}\n","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nconst navs = {\n navs: css(mq({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderBottom: 'solid 1px #ccc',\n marginBottom: 8,\n background: 'rgba(255,255,255,0.9)',\n //background: 'linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(255,255,255,1) 100%)',\n })),\n nav: css(mq({\n //width: 20,\n //height: 30,\n padding: '0.9rem 1rem',\n fontSize: '1.1rem',\n position: 'relative',\n flex: '1 1 auto',\n textAlign: 'center',\n })),\n navArrow: {\n },\n navCurrent: css({\n //color: 'white',\n //backgroundColor: variables.primaryColor\n //background: 'linear-gradient(0deg, rgba(34,45,100,1) 0%, rgba(89,102,166,1) 100%)',\n //borderBottom: 'solid 2px ' + variables.primaryColor\n //background: '#ddd',\n fontWeight: 'bold',\n background: 'linear-gradient(0deg, rgba(0,0,0,0.08) 0%, rgba(255,255,255,1) 100%)',\n //borderBottom: 'solid 2px ' + variables.primaryColor\n }),\n navFilled: css({\n //backgroundColor: '#666'\n }),\n navClickable: css({\n cursor: 'pointer'\n })\n}\n\nexport default {\n\n arrow: css(mq({\n position: \"absolute\",\n cursor: 'pointer',\n color: '#aaa',\n transition: 'all 0.3s',\n zIndex: '1',\n // xs, sm(>=576), md(>=768), lg(>=992), xl(>=1200), xxl(>=1600)\n top: 0,\n // [mqMax.md]: {\n // width: 100\n // },\n width: [20, 25, 30, 40],\n '&:hover': {\n color: '#666'\n }\n })),\n arrowPrev: css(mq({\n left: [-15, 0]\n })),\n arrowNext: css(mq({\n right: [-15, 0]\n })),\n\n ...navs\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './stepStyle';\nimport React from 'react';\n\nimport { FaAngleRight } from 'react-icons/fa';\n\t\n\n\nexport function StepNav({ stepInfo }) {\n const { steps, currentStep, moveTo, canGo } = stepInfo;\n\n //if (currentStep === steps.length - 1) return null;\n return RELATED PRODUCTS
\n//\n// {products.map((product, index) =>\n// \n// \n// )}\n//
\n// \n {steps.filter(x => x.id !== 'thanks').map((step, index) =>\n \n moveTo(index)}\n >\n {step.title}\n\n
\n {index < steps.length - 1 && \n {\n cart.shippingMethod === \"Standard\" &&\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';\n\nexport function OrderItems({ cart, form, moveNext, post, remove }) {\n //const model = form.model;\n\n const items = form.findControl('items').controls;\n const render = (name, parent = null) => form.renderControl(name, parent);\n const checkMinimumQtyList = cart.checkMinimumQtyList;\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 Shipping
\n AU {formatMoney(cart.shippingAmount)}
\n \n
Total Amount
\n AU {formatMoney(cart.totalAmount)}
\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 options\n .map(x =>\n \n {x.Name}:\n {x.Value}\n \n )\n .reduce((acc, x) => acc === null ? x : {acc}, {x} , null)\n }
\n }\n\n const orderItems = cart.orderItems.filter(x => x.orderItemType === 0);\n const taxLines = cart.orderItems.filter(x => x.orderItemType === 1);\n\n return \n
\n}\n\nfunction GetCheckMinimumQtyList({ list }) {\n return (\n \n
\n \n {\n checkMinimumQtyList.length > 0 &&\n
\n \n
\n \n \n
\n {\n checkMinimumQtyList.length > 0 &&\n \n
\n }\n \n {\n list.map((item, index) =>\n
\n )\n}","import { fb } from '../../../form';\n\nexport function getOrderItemFormData(cart) {\n const model = fb.group({\n items: fb.array([]),\n });\n\n const itemArray = model.find('items').controls;\n (cart.orderItems || []).forEach(item => {\n itemArray.push(orderItemData(item))\n })\n return model;\n}\n\n\nexport function orderItemData(item) {\n return fb.group({\n quantity: [item.quantity || '', [], { label: null, type: 'number', attrs: { min:'1'}}]\n })\n}\n\n// addedUnitPrice: 0\n// discountUnitPrice: 0\n// extSerialized: null\n// itemDesc: \"\"\n// itemDescHtml: \"\"\n// itemName: \"Donation\"\n// orderItemDescriptions: []\n// orderItemId: \"031283cd-dbf2-4d62-aaf7-4134231f27a6\"\n// orderItemOptions: []\n// productCode: \"Donation\"\n// productId: \"dbdc9aad-16ab-47a0-97c7-ac2c13cf01a6\"\n// quantity: 1\n// shippingFeeType: 1\n// shppingFee: 0\n// subTitle: null\n// taxType: 2\n// thumbnailUrl: null\n// unitPrice: 0","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport { Fragment } from 'react';\n//import style from './shippingStyle';\nimport { Button, ErrorMessage } from '../../../components';\nimport { CartSummary } from '../cartSummary/summary';\nimport utils from '../../../utils';\n\nexport function Shipping({ cart, form, saveShipping, post }) {\n const model = form.model;\n const render = (name) => form.renderControl(name);\n\n const val = form.getValue();\n const billingInfo = model.find('billingInfo');\n const shippingInfo = model.find('shippingInfo');\n\n const next = (e) => {\n form.validateForm(e, () => {\n saveShipping();\n utils.ui.scrollTo('#ecmcart');\n })\n }\n \n if (billingInfo){\n billingInfo.disableValidators = val.useSameAddress;\n }\n \n shippingInfo.disableValidators = false;\n\n if(val.shippingMethod === 'Pickup' || val.shippingMethod === '0'){\n shippingInfo.disableValidators = true;\n }\n\n return \n {`* Minimum quantity of ${item.minimumQty} items not met for ${item.productName}`}\n
)\n }\n \n \n \n }\n\n
\n}\n\nfunction Address({form, addressModel}) {\n const render = (name) => form.renderControl(name, addressModel);\n return \n
\n \n {\n val.shippingMethod !== '' &&\n \n \n
\n\n \n
\n \n \n \n
\n \n
\n}","import { fb, validators } from '../../../form';\n\nexport function getShippingFormData(cart) {\n const data = cart || {}\n\n const shippingMethods = [\n { name: 'Shipping', value: \"Standard\" },\n { name: 'Pickup', value: \"Pickup\" }\n ];\n\n const shippingCountry = [\n { name: 'Australia', value: \"Australia\" },\n { name: 'International', value: \"International\" }\n ];\n\n const model = fb.group({\n billingInfo: address(data.billingAddress),\n shippingInfo: address(data.shippingAddress),\n //shippingMethod: [data.shippingMethod || '', [], { label: 'Shipping Method', type: 'text' }],\n shippingMethod: [data.shippingMethod || '', [], { label: null, type: 'radioList', options : shippingMethods, style : {inline : true} }],\n shippingCountry: [data.shippingCountry || 'Australia', [], { label: null, type: 'radioList', options : shippingCountry, style : {inline : true} }],\n useSameAddress: [data.useSameAddress || false, [], { label: `Use the same address`, type: 'checkbox' }],\n });\n return model;\n}\n\nexport function address(model) {\n const data = model || {}\n return fb.group({\n firstName: [data.firstName || '', [validators.Required()], { label: 'First Name', type: 'text' }],\n surname: [data.surname || '', [validators.Required()], { label: 'Surname', type: 'text' }],\n street1: [data.street1 || '', [validators.Required()], { label: 'Street', type: 'text' }],\n street2: [data.street2 || '', [], { label: null, type: 'text' }],\n suburb: [data.suburb || '', [validators.Required()], { label: 'Suburb', type: 'text' }],\n state: [data.state || '', [validators.Required()], { label: 'State', type: 'text' }],\n postcode: [data.postcode || '', [validators.Required()], { label: 'Postcode', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email Address', type: 'email' }],\n mobile: [data.mobile || '', [validators.Required()], { label: 'Phone', type: 'tel' }],\n })\n}\n\n// public AddressModel ShippingInfo { get; set; }\n// public AddressModel BillingInfo { get; set; }\n// public string ShippingMethod { get; set; }\n// public bool UseSameAddress { get; set; }\n// public string SpecialRequest { get; set; }\n\n// public string FirstName { get; set; }\n// public string Surname { get; set; }\n// public string AddressLine { get; set; }\n// public string Suburb { get; set; }\n// public string State { get; set; }\n// public string Postcode { get; set; }\n// public string Country { get; set; }\n// public string CountryCode { get; set; }\n// public string Email { get; set; }\n// public string Phone { get; set; }\n// public string Mobile { get; set; }","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 paymentInfoText2 : mq({\n fontSize: '1rem',\n '.contact-link' : {\n color: 'white'\n }\n }),\n button : {\n '&.pending' : {\n pointerEvents: 'none'\n }\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './payStyle';\nimport React, { Fragment } from 'react';\nimport { usePost } from '../../../components';\nimport { Button, ErrorMessage } from '../../../components';\nimport env from '../../../env';\nimport { useRouter } from '../../../components';\nimport { initStripe } from './payStripe';\nimport { CartSummary } from '../cartSummary/summary';\nimport { getPaymentFormData } from './paymentFormData';\nimport { useForm } from '../../../form';\nimport { useStore } from '../../../store';\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 const [sendingStatus, setSendingStatus] = React.useState(null);\n\n const post = usePost();\n const { Redirect } = useRouter();\n const paymentForm = useForm(getPaymentFormData(cart), { onControlChanged: orderItemChanged });\n const render = (name) => paymentForm.renderControl(name);\n const val = paymentForm.getValue();\n const { dispatch } = useStore();\n\n function orderItemChanged(e, control) {\n if (control && control.name === 'paymentMethod') {\n setError(null);\n }\n }\n\n function payNow(e) {\n\n paymentForm.validateForm(e, () => {\n if (error) return;\n \n stripe.createToken(card).then(function (result) {\n if (result.error) {\n setError(result.error.message);\n } else {\n setError(null);\n \n // Send the token to your server.\n //onSubmit(result.token.id, e);\n\n setSendingStatus('pending');\n var _value = paymentForm.getValue();\n dispatch({ type: 'SET_STATE', payload: { cartInfo: 0 } });\n post.send(env.apiBase + \"/api/cart/payStripe\", {\n tokenId: result.token.id,\n itemTotalAmount: cart.itemTotalAmount,\n cartId: env.getDevCartId(),\n comments: _value.comments\n });\n }\n });\n\n });\n\n\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, e);\n // }\n // });\n\n\n }\n\n // function onSubmit(tokenId) {\n // setSendingStatus('pending');\n // var _value = paymentForm.getValue();\n // dispatch({type:'SET_STATE', payload : {cartInfo : 0}});\n // post.send(env.apiBase + \"/api/cart/payStripe\", {\n // tokenId: tokenId,\n // itemTotalAmount: cart.itemTotalAmount,\n // cartId: env.getDevCartId(),\n // comments: _value.comments\n // });\n // }\n\n // function onSubmit(tokenId, e) {\n // paymentForm.validateForm(e, () => {\n // setSendingStatus('pending');\n // const _value = paymentForm.getValue();\n // dispatch({ type: 'SET_STATE', payload: { cartInfo: 0 } });\n // post.send(env.apiBase + \"/api/cart/payStripe\", {\n // tokenId: tokenId,\n // itemTotalAmount: cart.itemTotalAmount,\n // cartId: env.getDevCartId(),\n // comments: _value.comments\n // });\n // });\n // }\n\n function sendEmail(e) {\n paymentForm.validateForm(e, () => {\n setSendingStatus('pending');\n var _value = paymentForm.getValue();\n dispatch({ type: 'SET_STATE', payload: { cartInfo: 0 } });\n post.send(env.apiBase + \"/api/cart/paycontactemail\", {\n itemTotalAmount: cart.itemTotalAmount,\n cartId: env.getDevCartId(),\n comments: _value.comments\n });\n });\n\n }\n \n if (post.done()) {\n env.setDevCartId(null);\n return \n
\n \n {render('firstName')}\n
\n \n {render('surname')}\n
\n \n
\n \n {render('street1')}{render('street2')}\n
\n \n
\n \n {render('suburb')}\n
\n \n {render('state')}\n
\n \n {render('postcode')}\n
\n \n
\n \n {render('email')}\n
\n \n {render('mobile')}\n
\n \n
\n}\n\nfunction CreditCard({ setStripe, setCard, setError }) {\n\n React.useEffect(() => {\n const { stripe, card } = initStripe(setError)\n setStripe(stripe);\n setCard(card);\n // eslint-disable-next-line\n }, []);\n\n return (\n \n
\n\n \n \n {\n val.paymentMethod === 'card' &&\n
\n\n \n {render('comments')}\n
\n \n
\n\n \n {\n val.paymentMethod === 'card' &&\n \n }\n {\n val.paymentMethod === 'cod' &&\n \n }\n
\n\n Pay by Credit Card
\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\n Call Us \n
\n Contact Email
\n//\n//
\n// \n// We will send you email\n//
\n// \n// contact us \n//
\n// .\n card.mount('#card-element');\n\n // Handle real-time validation errors from the card Element.\n card.addEventListener('change', function (event) {\n if (event.error) {\n setError(event.error.message);\n } else {\n setError(null);\n }\n });\n\n return { stripe, card };\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './cartStyle';\nimport React from 'react';\n//import { SiteLink } from '../../../components';\nimport env from '../../../env';\nimport { useGet, usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Loading, ErrorPopup } from '../../../components';\nimport { useStep } from './useStep';\nimport { StepNav } from '../cartStep/stepNav';\nimport { OrderItems } from '../cartOrderItems/orderItems';\nimport { getOrderItemFormData } from '../cartOrderItems/orderItemFormData'\nimport { Shipping } from '../cartShipping/shipping'\nimport { getShippingFormData } from '../cartShipping/shippingFormData';\nimport { Pay } from '../cartPayment/pay';\nimport utils from '../../../utils';\nimport { useStore } from '../../../store';\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 \n )\n}\n\nfunction Address({ addr, clubName }) {\n return
\n\n \n {headerGroups.map(headerGroup => (\n
\n \n )\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport React, { Fragment } from 'react';\nimport { Loading, useGet, SiteLink } from '../../../components';\nimport { Table } from 'components/table/table';\nimport env from '../../../env';\nimport utils from 'utils';\n\nexport function OrderHistory(){\n\n const [sendingStatus, setSendingStatus] = React.useState(\"pending\");\n const get = useGet();\n\n React.useEffect(() => {\n const url = `/api/order/getpaidorderlist`;\n get.send(env.apiBase + url);\n \n // eslint-disable-next-line\n }, []);\n\n const data = get.response;\n \n const columns = React.useMemo(\n () => [\n {\n Header: 'Order No.',\n accessor: 'orderNo',\n Cell: (c) => {\n //console.log(c)\n return ({c.cell.value} )\n }\n },\n {\n Header: 'Payment',\n accessor: 'paymentMethodText',\n },\n {\n Header: 'Name',\n accessor: 'buyerName',\n },\n {\n Header: 'Email',\n accessor: 'buyerEmail',\n },\n {\n Header: 'Amount',\n accessor: 'totalAmount',\n Cell : (c) => \"$\" + c.cell.value\n },\n // {\n // Header: 'Status',\n // accessor: 'statusText',\n // },\n {\n Header: 'Order Date',\n accessor: 'orderDate',\n Cell: (c) => c.cell.value && utils.date.formatYYYYMMDD(c.cell.value)\n }\n ],\n []\n );\n\n if(get.done() && sendingStatus === 'pending'){\n setSendingStatus(null);\n }\n\n if(sendingStatus === 'pending'){\n return \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\n//import { 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';\n//import { MenuLoader } from './menuLoader';\nimport { Dashboard } from 'site/members/dashboard/dashboardPage';\nimport { Products } from 'site/members/products/products';\nimport { ProductView } from 'site/members/product/productView';\nimport { Cart } from 'site/members/cart/cart';\nimport { OrderDetails } from 'site/members/orderDetails/orderDetails';\nimport { OrderHistory } from 'site/members/orderHistory/orderHistory';\n\nconst MemberLayout = ({ children }) => (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nlet serviceUpdateCheckerInterval = null;\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl, {updateViaCache: 'none'})\n .then(async registration => {\n // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration\n console.log('Service Worker registration successful with scope: ', registration.scope);\n if (registration && registration.waiting) {\n registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n }\n \n // Regular checking service worker\n if (serviceUpdateCheckerInterval) { try { clearInterval(serviceUpdateCheckerInterval) } catch (e) { } }\n serviceUpdateCheckerInterval = setInterval(() => {\n console.log('Checking SW updates...')\n registration.update();\n }, 1/*hour(s)*/ * 10/*minutes*/ * 60 * 1000);\n\n window.updateSW = function() {\n console.log('Checking SW updates... (force)')\n return registration.update();\n }\n \n // When the user asks to refresh the UI, we'll need to reload the window\n var preventDevToolsReloadLoop = false;\n \n const oldSw = (await navigator.serviceWorker.getRegistration())?.active?.state;\n console.log(oldSw, registration)\n navigator.serviceWorker.addEventListener('controllerchange', async function (ev) {\n const newSw = (await navigator.serviceWorker.getRegistration())?.active?.state;\n console.log('Service Worker controller change', ev)\n console.log(oldSw, newSw)\n // Ensure refresh is only called once.\n // This works around a bug in \"force update on reload\".\n if (preventDevToolsReloadLoop) return;\n \n\n if(oldSw === 'activated' && newSw === 'activating') {\n preventDevToolsReloadLoop = true;\n console.log('Reloading...')\n window.location.reload();\n }\n\n //window.location.reload();\n });\n\n // onNewServiceWorker(registration, function () {\n // console.log('onNewServiceWorker', registration)\n // alert('New Update Available');\n \n // console.log('User okay to update', registration);\n // if (!registration.waiting) {\n // // Just to ensure registration.waiting is available before calling postMessage()\n // return;\n // }\n // registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n\n // console.log('show refresh')\n // });\n \n registration.onupdatefound = () => {\n console.log('registration.onupdatefound', registration.installing)\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n\n navigator.serviceWorker.ready.then(function (registration) {\n console.log('Service Worker ready');\n });\n}\n\n\n// function onNewServiceWorker(registration, callback) {\n// if (registration.waiting) {\n// console.log('onNewServiceWorker-registration.waiting')\n// // SW is waiting to activate. Can occur if multiple clients open and one of the clients is refreshed.\n// return callback();\n// }\n\n// function listenInstalledStateChange() {\n// console.log('listenInstalledStateChange', registration.installing)\n// registration.installing.addEventListener('statechange', function (event) {\n// console.log('listenInstalledStateChange - statechange', event)\n// if (event.target.state === 'installed') {\n// // A new service worker is available, inform the user\n// callback();\n// }\n// });\n// };\n\n// if (registration.installing) {\n// console.log('onNewServiceWorker-registration.installing')\n// return listenInstalledStateChange();\n// }\n\n// // We are currently controlled so a new SW may be found...\n// // Add a listener in case a new SW is found,\n// registration.addEventListener('updatefound', listenInstalledStateChange);\n// }\n\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n console.log('Reloading... No SW found')\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\nimport './polyfill';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './_scss/index.scss';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(
\n
;\n}\n\nfunction EmptyCart() {\n return \n
\n \n {steps.map((step, index) => {\n let stepView = null\n switch (step.id) {\n case 'orderItems': stepView =
\n \n {stepView}\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 { mq } from '../../../cssInJs'\n\nexport default {\n orderDetails: {\n textAlign: 'left',\n marginBottom: '3rem',\n //paddingLeft: '1rem',\n //paddingRight: '1rem'\n },\n summary: {\n\n },\n\n fn: mq({\n minWidth: ['7rem', null, '10em'],\n margin: 0\n }),\n fv: {\n\n },\n\n orderItems: {},\n orderItem: {\n padding: '0.5rem 0',\n margin: '0.5rem 0',\n borderBottom: 'solid 1px #ccc'\n },\n total: {\n //marginLeft: 15,\n fontWeight: 'bold',\n color: 'chocolate'\n }\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './orderDetailsStyle';\nimport React, { Fragment } from 'react';\nimport env from '../../../env';\nimport { Loading, ErrorPopup, useGet, Button } from '../../../components';\nimport { useRouter, usePost } from '../../../components';\nimport utils from '../../../utils';\nimport { useStore } from '../../../store';\n\nexport function OrderDetails() {\n const get = useGet();\n const { query } = useRouter();\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 Your cart is empty.
\n\n}\n\nfunction Details({ order }) {\n const paymentInfo = order.payment;\n const orderItems = order.orderItems.filter(x => x.orderItemType === 0);\n const taxLines = order.orderItems.filter(x => x.orderItemType === 1);\n const post = usePost();\n const { Redirect } = useRouter()\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const { dispatch } = useStore();\n\n function itemAmount(orderItem) {\n return (orderItem.unitPrice * 100 + (orderItem.addedUnitPrice ? orderItem.addedUnitPrice * 100 : 0) - (orderItem.discountUnitPrice ? orderItem.discountUnitPrice * 100 : 0)) / 100;\n }\n // function itemTotalAmount(orderItem) {\n // return (orderItem.quantity * (orderItem.unitPrice * 100 + orderItem.addedUnitPrice * 100 - orderItem.discountUnitPrice * 100)) / 100;\n // }\n\n function reOrder() {\n let _cartId = env.getDevCartId();\n setSendingStatus('pending');\n post.send(env.apiBase + \"/api/cart/reorder\", {\n cartId: _cartId === 'null' ? null : _cartId,\n reOrderId: order.orderId\n });\n }\n\n if (post.hasErrors()) {\n\n }\n\n if (post.done() && sendingStatus === 'pending') {\n env.setDevCartId(post.response.results.cartInfo.cartId);\n setTimeout(() => {\n dispatch({type:'SET_STATE', payload : {cartInfo : post.response.results.cartInfo.totalQuantity === 0 ? 0 : (post.response.results.cartInfo.totalQuantity)-1}});\n }, 500);\n //dispatch({type:'SET_STATE', payload : {cartInfo : post.response.results.cartInfo.totalQuantity === 0 ? 0 : (post.response.results.cartInfo.totalQuantity)-1}});\n return
ORDER
\n \n \n
\n \n
\n
\n\n
\n {/*
\n \n
\n
\n \n
\n {order.orderNo}
\n AU {utils.money.formatMoney(order.totalAmount)}
\n {utils.date.formatYYYYMMDD(order.orderDate)}
\n {paymentInfo.paymentMethodText}
\n \n\n
ITEMS
\n\n {orderItems.map((orderItem, i) =>
\n\n \n
\n )}\n\n \n \n \n
\n \n
\n Unit Price: {utils.money.formatMoney(itemAmount(orderItem))}
\n \n Qty: {orderItem.quantity}\n
\n \n
\n\n {taxLines.map((orderItem, index) =>\n \n Shipping Fee:\n
\n \n
\n \n {utils.money.formatMoney(order.shippingAmount)}\n
\n \n
\n )}\n\n \n Tax: {orderItem.itemName}\n
\n \n
\n \n {utils.money.formatMoney(orderItem.unitPrice)}\n
\n \n
\n\n \n
\n \n Total: AU {utils.money.formatMoney(order.totalAmount)}\n {/* Item Total: {utils.money.formatMoney(order.itemAmount)}\n + Shipping Fee: {order.shippingAmount > 0 ? 'AU ' + utils.money.formatMoney(order.shippingAmount) : 'FREE'}\n + GST: {utils.money.formatMoney(order.taxAmount)}\n \n
\n Grand Total (including GST): AU {utils.money.formatMoney(order.totalAmount)}\n
*/}\n \n {/*
CONTACT
*/}\n\n DELIVERY METHOD\n
\n\n {order.shippingMethod}\n
\n {\n (order.shippingAddress && order.shippingMethod === 'Standard') &&\n \n }\n COMMENTS
\n\n {order.payment.ext.comments}\n
\n \n
\n
\n}\n\nfunction Billing(props) {\n const billingAddr = props.billingAddr;\n const useSameAddress = props.useSameAddress;\n const clubName = props.clubName;\n return (\n \n
SHIPPING ADDRESS
\n {clubName}
\n {addr.firstName}
\n {addr.surname}
\n \n \n {addr.street1}\n {addr.street2}\n
\n {addr.suburb}
\n {addr.state}
\n {addr.postcode}
\n {addr.email}
\n {addr.mobile}
\n \n
\n\n \n }\n
\n )\n}\n\n// eslint-disable-next-line\n{/* \n
BILLING ADDRESS
\n {\n useSameAddress === true &&\n Use the same address
\n }\n {\n (billingAddr && useSameAddress === false) &&\n {clubName}
\n {billingAddr.firstName}
\n {billingAddr.surname}
\n \n \n {billingAddr.street1} \n {billingAddr.street2} \n
\n {billingAddr.suburb}
\n {billingAddr.state}
\n {billingAddr.postcode}
\n {billingAddr.email}
\n {billingAddr.mobile}
\n Delivery Method
\n\n
\n\n\n
\n\n
\n Pickup
\n\n
\n Selected Location
\n\n
\n {{order.pickupLocation.companyName}}
\n {{order.pickupLocation.suburb}}, {{order.pickupLocation.state}}
\n T: {{order.pickupLocation.phone}}
\n \n {{order.shippingMethod}}\n
\n\n Shipping/Billing Information
\n\n\n
\n\n
\n\n
\n Shipping\n place\n
\n {{order.shippingAddress.firstName}}
\n {{order.shippingAddress.surname}}
\n {{order.shippingAddress.email}}
\n {{order.shippingAddress.phone}}
\n {{order.shippingAddress.addressLine}}
\n {{order.shippingAddress.suburb}}
\n {{order.shippingAddress.state}}
\n {{order.shippingAddress.postcode}}
\n \n
\n Billing\n place\n
\nUse the same address
\n \n
\n {{order.billingAddress.firstName}}
\n {{order.billingAddress.surname}}
\n {{order.billingAddress.email}}
\n {{order.billingAddress.phone}}
\n {{order.billingAddress.addressLine}}
\n {{order.billingAddress.suburb}}
\n {{order.billingAddress.state}}
\n {{order.billingAddress.postcode}}
\n\n \n
Special Request
\n\n
*/}","import React from 'react'\nimport { useTable, useSortBy } from 'react-table'\n\nexport function Table({ columns, data }) {\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n } = useTable(\n {\n columns,\n data,\n },\n useSortBy\n )\n\n return (\n <>\n \n
\n\n {{order.specialRequest? order.specialRequest : \"N/A\"}}\n
\n | \n {column.render('Header')}\n {/* Add a sort direction indicator */}\n \n {column.isSorted\n ? column.isSortedDesc\n ? ' 🔽'\n : ' 🔼'\n : ''}\n \n | \n ))}\n
|---|
| {cell.render('Cell')} | \n )\n })}\n
ORDERS
\n \n
\n
\n \n\n {/* \n \n\n {/* \n */}\n\n
\n);\nexport default MemberLayout;","import React, { useEffect, useRef } from 'react';\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useRouter } from './components';\nimport { StoreProvider } from './store';\n//import { ViewPage } from './cms/pages/viewPage/viewPage';\n//import { EditPage } from './cms/pages/editPage/editPage';\nimport { TopHeader } from './layout/topHeader/topHeader';\n// import { Footer } from './layout/footer/footer';\n//import { BottomDock } from './layout/bottomDock/bottomDock';\n// import { BlogView } from './site/blog/blogView';\n//import { 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';\nimport DashboardNoAuthLayoutRoute from 'layout/dashboardNoAuthLayout';\nimport MemberLayout from 'layout/memberLayout';\nimport { Login, ProvideAuth } from 'auth';\n\n//For ECM\n//import { ProductView } from './site/ecm/product/productView';\n//import { OrderDetails } from './site/ecm/orderDetails/orderDetails';\nimport env from './env';\nimport { 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 = pathname.includes('/member/') ? \"member-page\" : '';\n// if (pathFiltered.indexOf('/digital-sensor') >= 0) specialClassName = 'digital-sensor-page';\n// else if (pathFiltered === '/brilliance') specialClassName = 'brilliance-page';\n\nuseEffect(()=>{\n \n if(!localStorage.favorites){\n localStorage.setItem(\"favorites\", \"\");\n }\n\n if(!localStorage.currency){\n localStorage.setItem(\"currency\", \"AUD\");\n }\n \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 storeContext.current.dispatch({type:'SET_STATE', payload : {currency : localStorage.getItem(\"currency\")}});\n\n}, []);\n\n return (\n \n
\n );\n}\n\nfunction App() {\n return (\n \n
\n {/* */}\n {/* \n \n {/* \n \n\n {/* \n {/* \n\n \n
\n {/*