\r\n
\r\n );\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\nimport format from \"date-fns/format\";\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 formatDate(dateObj, formatStr) {\r\n const date = toDate(dateObj);\r\n if (!date) return \"\";\r\n return format(date, formatStr);\r\n}\r\n\r\nexport function formatYYYYMMDDToday() {\r\n const date = new Date();\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 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 (\r\n 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 );\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 (\r\n 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 );\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\r\n","//#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\n\nexport const isNZ = env.locale === 'nz'\n\n","import coreUtils from '../lib/utils-core';\nimport * as site from '../site/siteUtils';\n\nexport default { ...coreUtils, site };","import { useState, useEffect } from 'react';\r\nimport utils from '../../utils';\r\nimport siteConfig from '../../config';\r\n\r\nexport function useApi(fn) {\r\n //console.log('useApi')\r\n const [response, setResponse] = useState({});\r\n const [errors, setErrors] = useState([]);\r\n const [status, setStatus] = useState('ready');\r\n const [request, setRequest] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!request) return;\r\n\r\n //console.log('fetch now')\r\n setResponse(null);\r\n setErrors([]);\r\n setStatus('ready');\r\n\r\n const fetchData = async () => {\r\n setStatus('pending');\r\n try {\r\n //console.log(request);\r\n const options = request.options || {}\r\n siteConfig.apiNetJwt && await siteConfig.apiNetJwt(options);\r\n\r\n const res = await fetch(request.url, options);\r\n //console.log(res);\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n setErrors([json.message]);\r\n setStatus('error')\r\n return;\r\n }\r\n } catch (e) { }\r\n\r\n const statusText = res.status === 401 ? 'Permission denied. Please login first.' : res.statusText\r\n setErrors(['Error - [' + res.status + ']' + (statusText && (' - ' + statusText))]);\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n setErrors(utils.form.getErrors(json));\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n setResponse(json);\r\n setStatus('done')\r\n } catch (err) {\r\n //console.log(error, error.toString(), typeof error, JSON.stringify(error))\r\n setErrors([err.toString()]);\r\n setStatus('error')\r\n }\r\n };\r\n fetchData();\r\n }, [request]);\r\n\r\n const containsErrorMessage = (msg) => {\r\n const finding = (msg || '').toLowerCase()\r\n return errors.some(x => (x || '').toLowerCase().indexOf(finding) >= 0)\r\n }\r\n\r\n //return [ response, error, status, (...args) => setRequest(fn(...args)) ];\r\n return {\r\n request: request,\r\n response: response,\r\n errors: errors,\r\n status: status,\r\n hasErrors: () => status === 'error',\r\n containsErrorMessage: containsErrorMessage,\r\n addErrors: (errs) => {\r\n setErrors(...errors, ...errs)\r\n setStatus('error')\r\n },\r\n done: () => status === 'done',\r\n send: (...args) => { setStatus('ready'); setRequest(fn(...args)) },\r\n sendRaw: (httpOptionFn, ...args) => { setStatus('ready'); setRequest(httpOptionFn(...args)) },\r\n setResult: (json) => { setResponse(json); setStatus('done') },\r\n reset: () => {\r\n setStatus('ready');\r\n setErrors([]);\r\n }\r\n };\r\n}\r\n\r\nexport function usePost() {\r\n const formDataFn = (url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n body: data // FormData\r\n }\r\n });\r\n const post = useApi((url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data)\r\n }\r\n })\r\n );\r\n return {\r\n ...post,\r\n loading: () => post.status === 'ready' || post.status === 'pending',\r\n sending: () => post.status === 'pending',\r\n sendFormData: (...args) => post.sendRaw(formDataFn, ...args)\r\n }\r\n}\r\n\r\nexport function useGet() {\r\n const get = useApi((url, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'GET'\r\n }\r\n })\r\n );\r\n return {\r\n ...get,\r\n loading: () => get.status === 'ready' || get.status === 'pending'\r\n }\r\n}\r\n\r\n//https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c","import React from 'react';\r\nimport env from '../../env';\r\n\r\nexport function MediaQueryStatus(props) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Helmet } from 'react-helmet-async';\r\n\r\nexport function MetaTag({ data: seoData }) {\r\n //console.log(seoData)\r\n const data = Object.assign({}, {\r\n title: ''\r\n }, seoData)\r\n\r\n return (<>\r\n \r\n {displayingPosts.map((item, index) =>\r\n
\r\n )\r\n}\r\n\r\nfunction Feed({item}) {\r\n return (\r\n \r\n {/* {item.link} */}\r\n \r\n })
\r\n {item.type === 'video' &&
\r\n )\r\n}","// https://www.pluralsight.com/guides/re-render-react-component-on-window-resize\r\nexport function debounce(fn, ms) {\r\n let timer\r\n return _ => {\r\n clearTimeout(timer)\r\n timer = setTimeout(_ => {\r\n timer = null\r\n fn.apply(this, arguments)\r\n }, ms)\r\n };\r\n}","import utils from '../../utils';\r\n\r\nexport function loadApi(onApiReady) {\r\n \r\n if (typeof window !== `undefined` && !window.YT) { // If not, load the script asynchronously\r\n const tag = document.createElement('script');\r\n tag.src = 'https://www.youtube.com/iframe_api';\r\n tag.id = 'youtubeIframeApJaba';\r\n\r\n // onYouTubeIframeAPIReady will load the video after the script is loaded\r\n window.onYouTubeIframeAPIReady = () => onApiReady(true);\r\n\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n } else { // If script is already there, load the video directly\r\n onApiReady(false);\r\n }\r\n\r\n}\r\n\r\n// export function player(playerId, videoId, playerVars = {}, events = {}) {\r\n// //let player = null;\r\n// const defaultPlayerVars = {\r\n// 'autoplay': 1,\r\n// 'controls': 0,\r\n// 'loop': 1,\r\n// 'showinfo': 0,\r\n// 'rel': 0,\r\n// 'modestbranding': 1,\r\n// 'origin': window.location.origin,\r\n// 'allowfullscreen': true,\r\n// 'wmode': 'transparent'\r\n// }\r\n// const defaultEvents = {\r\n// 'onStateChange': (e) => { },\r\n// 'onReady': (e) => { console.log('onReady'); player.mute() },\r\n// 'onError': (e) => { console.log(e) }\r\n// }\r\n\r\n// const player = new window.YT.Player(playerId, {\r\n// videoId: videoId,\r\n// playerVars: Object.assign({}, defaultPlayerVars, playerVars),\r\n// events: Object.assign({}, defaultEvents, events),\r\n// });\r\n// return player;\r\n// }\r\n\r\nexport function thumbnailMax(videoId){\r\n return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\r\n}\r\n\r\n// onPlayerStateChange(event){\r\n// switch (event.data){\r\n// case window['YT'].PlayerState.PLAYING:\r\n// //console.log('Playing');\r\n// //this.player.mute();\r\n// break;\r\n// case window['YT'].PlayerState.PAUSED:\r\n// //console.log('Pafdsu');\r\n// break;\r\n// case window['YT'].PlayerState.ENDED:\r\n// //console.log('ended ');\r\n// //this.player.playVideo();\r\n// this.player.stopVideo();\r\n// break;\r\n// }\r\n// }\r\n\r\n// toggleBannerYoutueInCMS(toggleItem:string){ \r\n// if(toggleItem == 'youtube'){\r\n// //location.reload();\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.playVideo();\r\n// this.init();\r\n// }\r\n// else{\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.stopVideo();\r\n// }\r\n// }\r\n\r\n\r\nexport function getYoutubeCode(src) {\r\n // if (src.indexOf('http') >= 0) {\r\n // if (src.indexOf('v=') >= 0) {\r\n // return src.split('v=')[1];\r\n // }\r\n // }\r\n // return src;\r\n return utils.url.getYoutubeId(src);\r\n}","import React from 'react';\r\nimport utils from '../../utils';\r\nimport * as yt from './iframeApi';\r\nimport { FaRegPlayCircle } from 'react-icons/fa';\r\nimport { useStore } from '../../store';\r\n\r\nexport function YoutubeEmbedPopup({ url, title, posterUrl }) {\r\n const { dispatch } = useStore();\r\n\r\n const videoId = yt.getYoutubeCode(url);\r\n const posterImageUrl = utils.site.resourcePath(posterUrl || yt.thumbnailMax(videoId));\r\n const [popupIndex, setPopupIndex] = React.useState(0);\r\n\r\n function openVideo() {\r\n setPopupIndex(popupIndex + 1);\r\n dispatch({ type: 'SET_POPUP', payload: { sources: [\r\n // \r\n 'https://www.youtube.com/watch?v=' + videoId\r\n ], popupIndex: popupIndex + 1} });\r\n }\r\n return (\r\n \r\n {item.type === 'video' && \r\n
\r\n );\r\n}\r\n","function payload(item, key, defaultVal = '') {\n const found = item.payloads.find(x => x.key === key);\n return found ? found.value : defaultVal;\n}\n\nfunction getCodeJson(item) {\n const code = payload(item, 'Code');\n const codeType = payload(item, 'CodeType');\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n return codeJson\n }\n return null\n}\n\n\nfunction hasItemInPageDataByItemTypeCode(pageData, itemTypeCode) {\n return hasItemInPageData(pageData, item => item.itemTypeCode === itemTypeCode);\n}\n\n// hasItemInPageData(cmsOption.pageData, '')\n// matchFn = (item) => item.itemTypeCode === itemTypeCode\nfunction hasItemInPageData(pageData, matchFn) {\n if (!pageData) return false;\n for (let i = 0; i < pageData.sections.length; i++) {\n if (hasItemInItems(pageData.sections[i].items, matchFn)) return true;\n }\n return false;\n}\n\nfunction hasItemInItems(items, matchFn) {\n if (!items) return false;\n for (let i = 0; i < items.length; i++) {\n if (matchFn(items[i])) return true;\n if (hasItemInItems(items[i].items, matchFn)) return true;\n }\n return false;\n}\n\nexport default { payload, getCodeJson, hasItemInPageData, hasItemInItems, hasItemInPageDataByItemTypeCode };","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport cmsUtils from '../../cmsUtils';\nimport { Item } from '../../../../cms/items/item';\nimport utils from '../../../../utils';\n\nexport function Panel(props) {\n \n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n const panelType = props.panelType || \"normal__type\";\n\n //console.log('item', item, subItems);\n //console.log(cmsUtils.hasItemInPageDataByItemTypeCode(cmsOption.pageData, 'DestinationOperators'))\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n //console.log(bgTheme)\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || '', panelType);\n\n const subItemsElts = subItems.map((subItem, index) =>\n {subItemsElts}
\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, helpLabelText, 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={(forceUsePlaceholder && forceUsePlaceholder !== '') ? forceUsePlaceholder : 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\r\n ? getLabelAsString(control, formOption)\r\n : null;\r\n const valueStr = value === 0 ? 0 : value || \"\";\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 const disableAutoHeight = (style && style.disableAutoHeight) || false;\r\n if (!disableAutoHeight) {\r\n if (textAreaRef.current) {\r\n const h =\r\n textAreaRef.current.scrollHeight > 60\r\n ? textAreaRef.current.scrollHeight\r\n : 60;\r\n setParentHeight(`${h}px`);\r\n setTextAreaHeight(`${h}px`);\r\n }\r\n }\r\n }, [valueStr, style]);\r\n\r\n function onChangeInternal(e) {\r\n const disableAutoHeight = (style && style.disableAutoHeight) || false;\r\n if (!disableAutoHeight) {\r\n setTextAreaHeight(\"auto\");\r\n if (textAreaRef.current) {\r\n const h =\r\n textAreaRef.current.scrollHeight > 60\r\n ? textAreaRef.current.scrollHeight\r\n : 60;\r\n setParentHeight(`${h}px`);\r\n }\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\n \r\n 0 ? \" is-invalid\" : \"\")\r\n }\r\n {...attrs}\r\n >\r\n
\r\n {helpText && (\r\n \r\n handleChange(e, control)}\r\n className={\"form-check-input\"}\r\n {...attrs}\r\n />\r\n \r\n\r\n {helpText && (\r\n
\r\n )}\r\n \r\n {fieldLabel && (\r\n \r\n )}\r\n
\r\n )}\r\n \r\n handleChange(e, control)}\r\n defaultValue={mainCategory === null ? '' : value}\r\n className={\r\n 'form-control' + (errors && errors.length > 0 ? ' is-invalid' : '')\r\n }\r\n {...attrs}\r\n > \r\n {\r\n mainCategory && mainCategory !== '' &&\r\n \r\n }\r\n {options &&\r\n options.map((option) =>\r\n option.name !== mainCategory ? (\r\n \r\n {option.name}\r\n \r\n ) : (\r\n ''\r\n )\r\n )}\r\n \r\n
\r\n {helpText && (\r\n {renderHtml(found.code, _cmsOption)}
\n }\n else return null;\n}","import React, { useRef } from 'react';\nimport cmsUtils from '../../cmsUtils';\nimport utils from '../../../../utils';\n\nimport { useRouter } from '../../../../components';\n\nimport { handleElementLink } from '../../../../components';\nimport env from '../../../../env';\nimport { renderHtml } from './renderHtml';\n\n//import { Document, Page } from 'react-pdf'\n//import { Document, Page } from 'react-pdf/dist/entry.webpack';\n\nexport function Html(props) {\n const ver = env.ver;\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n const { history } = useRouter();\n //const [ pdfViewPath, setPdfViewPath ] = React.useState(null)\n //console.log('item', item, cmsOption);\n\n const year = (new Date()).getFullYear();\n let content = cmsOption.isCmsEdit ?\n cmsUtils.payload(item, 'Content') :\n cmsUtils.payload(item, 'Content')\n .replace(/__year__/g, year)\n .replace(\"__version__\", \" PWA \" + ver + \"\")\n .replace(/class=\"aos_effect_up\"/gi, `class=\"aos_effect_up\" data-aos=\"fade-up\"`);\n \n const cssClass = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n\n //let itemElt = ();\n\n function handleClick(e) {\n\n let target = \"\";\n if (e.target.closest('a')) {\n target = e.target.closest('a').getAttribute('target');\n }\n const processed = (target === \"_blank\" ? handleElementLink(e.target, null) : handleElementLink(e.target));\n //const link = utils.url.getLinkFromElement(e.target);\n //console.log('clicked', e, e.target, processed);\n\n if (processed.handled) {\n e.preventDefault();\n e.stopPropagation();\n } else if (processed.linkInfo && processed.linkInfo.type === 'internal') {\n e.preventDefault();\n e.stopPropagation();\n history.push(processed.linkInfo.url)\n } else {\n //e.preventDefault();\n //e.stopPropagation();\n // setPdfViewPath(utils.site.resourcePath(link))\n\n // process expandable old\n // if(e.target.closest('a')){\n // let href = e.target.closest('a').getAttribute('href') + \"\";\n // if(href.indexOf('#') !== -1){\n // let _href = href.split('#');\n // console.log(\"_href\", _href);\n // let el = document.querySelector('section[data-cms-item-anchor=\"' + _href[1] + '\"]');\n // if (el) {\n // let anchorStatus = el.getAttribute('data-anchor-status');\n // if(anchorStatus === \"collapse\"){\n // el.setAttribute('data-anchor-status', 'expand');\n // el.classList.add(\"expand\");\n // }\n // else{\n // el.setAttribute('data-anchor-status', 'collapse');\n // el.classList.remove(\"expand\");\n // }\n // }\n // e.preventDefault();\n // e.stopPropagation(); \n // }\n // }\n\n // process expandable\n if (e.target.closest('a')) {\n let aLink = e.target.closest('a')\n let href = aLink.getAttribute('href') + \"\";\n if (href.indexOf('#') !== -1) {\n let _href = href.split('#');\n console.log(\"_href\", _href);\n const targetId = _href[1]\n let targetElt = document.querySelector('section[data-cms-item-anchor=\"' + _href[1] + '\"]');\n\n const runEffect = () => {\n let anchorStatus = targetElt.getAttribute('data-anchor-status');\n if (anchorStatus === \"collapse\") {\n targetElt.setAttribute('data-anchor-status', 'expand');\n targetElt.classList.add(\"expand\");\n }\n else {\n targetElt.setAttribute('data-anchor-status', 'collapse');\n targetElt.classList.remove(\"expand\");\n }\n }\n\n if (targetElt) {\n const wrapper = aLink.closest('p, div, h1, h2, h3, h4, h5')\n const nextElt = wrapper.nextElementSibling\n //console.log(wrapper, nextElt)\n\n if (nextElt && nextElt.getAttribute('data-cms-item-anchor') === targetId) {\n // already in wrapper\n } else {\n // no wrapper\n wrapper.insertAdjacentElement(\"afterend\", targetElt);\n }\n\n window.setTimeout(runEffect, 100)\n\n e.preventDefault();\n e.stopPropagation();\n }\n }\n }\n\n\n }\n }\n\n const htmlBlock = useRef(null);\n return (\n <>\n handleClick(e)}>\n {renderHtml(content, cmsOption)}\n
\n \n )\n}\n","import React from 'react';\nimport { Html } from './view/html';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'Html', \n itemElt: (item, cmsOption) => \n {photoCredit} }\n
\n );\n}\n","import React from 'react';\nimport { ImagePanel } from './view/imagePanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'ImagePanel', \n itemElt: (item, cmsOption) => \n
\n \n {(photoCredit && !photoCreditUrl) && {photoCredit}
}\n {(photoCredit && photoCreditUrl) && \n signout(e)}\n >\n Logout\n \n
\n ) : (\n \n {\" \"}\n You are already logged in{\" \"}\n
\n\n
\n );\n}","import React from 'react';\nimport { MemberLogin } from './view/memberLogin';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'MemberLogin', \n itemElt: (item, cmsOption) => Member Login
\n \n\n Forgot Password? \n
\n \n
\n );\n } else {\n return (\n \n \n {tiles}\n \n
\n \n
\n );\n }\n\n}","import { variables, mq } from '../../cssInJs';\nimport { settings as defaultSettings} from './config';\n/**\n * Tile List Style. This is only for list wrapper, not tile itself\n * @param {Object} settings Tile Settings, required\n */\nexport function getTileListStyle(settings = defaultSettings) {\n const marginLR = settings.marginLR;\n const marginTB = settings.marginTB;\n return {\n holder: mq({\n //maxWidth: 1000,\n margin: 'auto',\n marginTop: [30, null, 40],\n marginBottom: [30, null, 40],\n '.slick-prev, .slick-next': {\n top: [100],\n transform: 'translate(0, 0)',\n },\n '.slick-prev': {\n left: [10, null, -20]\n },\n '.slick-next': {\n right: [10, null, -20]\n },\n '.slick-prev:before, .slick-next:before': {\n color: variables.fontColor\n }\n }),\n tiles: mq({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexWrap: 'wrap',\n marginLeft: marginLR.map(x => x === null? null : -x / 2),\n marginRight: marginLR.map(x => x === null? null : -x / 2),\n marginTop: marginTB.map(x => x === null? null : x / 2),\n marginBottom: marginTB.map(x => x === null? null : x / 2),\n }),\n tilesSlider: mq({\n display: 'block',\n marginLeft: [15, null, 15],\n marginRight: [15, null, 15],\n })\n }\n}\n\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport utils from 'utils';\nimport { SiteLink } from 'components';\nimport { getTileStyle } from './pageTileStyle';\n\nexport function PageTile({ page, useSlider, disableLink }) {\n const tileLink = page.pageUrl;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const title = page.pageTitle;\n const desc = page.tileDesc || page.description;\n const s = getTileStyle();\n return (\n \n {tiles}\n
\n \n
\n {title}
\n {desc}
\n \n Price: {product.priceText ? product.priceText : 'AU ' + utils.money.formatMoney(product.price)}\n
*/}\n\n {/* \n )}\n {attributes.controls.map((item, index) => {\n return (\n
\n
\n );\n })}\n {item.controls[0].value}
\n\n \n {render(item.controls[0].value.toLowerCase(), item)}\n
\n \n
\n } */}\n\n {product.productStatus === 0 && (\n \n
\n \n Quantity\n
\n {render('quantity')}\n \n All prices shown in AUD\n
\n \n
\n \n\n \n \n {/* {product.priceTextOveriding ? product.priceTextOveriding : 'AU ' + utils.money.formatMoney(product.priceIncTax)} */}\n {\n // (product.priceText && product.priceText !== '') ? product.priceText : (product.priceTextOveriding ? product.priceTextOveriding : 'AU ' + utils.money.formatMoney(product.priceIncTax))\n priceItem\n }\n \n
\n \n
\n\n {render(\"quantity\")}
\n \n \n {checkGoToCartBtn === true && (\n \n {\" \"}\n GO TO CART{\" \"}\n \n )}\n
\n \n {/* */}\n
\n \n )}\n \n );\n}\n\nfunction getFormModel(product, formValues /* for reset */) {\n const variantAttributes = product.variantAttributes;\n const model = fb.group({\n //quantity: [formValues.quantity || 1, [validators.Required()], { label: 'Quantity', type: 'number' }],\n quantity: [\n formValues.quantity || 1,\n [validators.Required()],\n { label: \"Quantity\", type: \"number\" },\n ],\n variantOptions: fb.array([]),\n });\n const variantOptionArray = model.find(\"variantOptions\").controls;\n (variantAttributes || []).forEach((attr) => {\n variantOptionArray.push(\n newVariantAttribute(attr, formValues, product.variants)\n );\n });\n return model;\n}\n\nfunction newVariantAttribute(attr, formValues, variants) {\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(\n optionsSelected,\n (x) => attr.name === x.name\n );\n\n const filtered = variants.filter((x) =>\n matchVariantOptions(optionsSelected, x.variantOptions, attr.name)\n );\n const availableOptions = getAvailableOptionValues(filtered, attr.name);\n const options = attr.options.map((x) => {\n return {\n ...x,\n ...{ disabled: !availableOptions.some((o) => o === x.value) },\n };\n });\n\n // console.log(\"options\", options);\n // console.log(\"variants\", variants);\n // console.log(\"attr\", attr);\n // console.log(\"availableOptions\", availableOptions);\n\n return fb.group({\n name: [attr.name, [], { type: \"hidden\" }],\n [dyName]: [\n (currentSelection && currentSelection.value) ||\n attr.value ||\n options[0].value,\n [validators.Required()],\n {\n //label: attr.name,\n label: null,\n type: \"select\",\n //options : choices\n options: [...options].map((x) => {\n return {\n name:\n (x.displayName || x.value) +\n (x.disabled || false ? \" - not available\" : \"\"),\n value: x.value,\n disabled: x.disabled || false,\n };\n }),\n },\n ],\n });\n}\n\nfunction getAvailableOptionValues(variants, name) {\n const values = variants\n .map((x) => {\n const options = x.variantOptions.filter((o) => o.name === name);\n return options && options[0].value;\n })\n .filter((x) => x);\n\n return Array.from(new Set(values));\n}\n\nfunction matchVariantOptions(\n optionsSelected,\n optionsInVariant,\n currentControlName\n) {\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 (\n optionSelected.name === optionInVariant.name &&\n optionSelected.value === optionInVariant.value\n ) {\n found = true;\n break;\n }\n }\n if (!found) return false;\n }\n return true;\n}\n","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport utils from \"../../../utils\";\nimport { SiteLink, useGet } from \"../../../components\";\nimport { tileStyle } from \"./productTileStyle\";\nimport { Fragment, useState, useEffect, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport env from \"../../../env\";\nimport { AddToCart } from \"../product/addToCart\";\nimport { AiOutlineClose } from \"react-icons/ai\";\n// import { CardImgOverlay } from 'reactstrap';\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, openClikcPopup = false, checkAuth = false }) {\n \n const s = tileStyle;\n const imageUrl = product.thumbnailUrl\n ? utils.site.resourcePath(product.thumbnailUrl)\n : \"/assets/product-empty.png\";\n const [openProductViewPopup, setOpenProductViewPopup] = useState(false);\n const productUrl = product.productUrl\n ? product.productUrl\n : `/product/${product.productSlug}`;\n function openProductViewPopupF() {\n setOpenProductViewPopup(true);\n document.body.style.overflow = \"hidden\";\n }\n function closeProductViewPopupF() {\n setOpenProductViewPopup(false);\n document.body.style.overflow = \"unset\";\n }\n return (\n \n {openClikcPopup === false ? (\n \n \n ) : (\n {\n openProductViewPopupF();\n }}\n >\n
\n )}\n \n \n
\n {product && product.checkNew && \n
\n \n
\n \n {product.productName}\n
\n \n {product.shortDesc}\n
\n\n \n {product.productStatus !== 0\n ? product.productStatusText\n : product.priceTextOveriding\n ? product.priceTextOveriding\n : \"AU\" + utils.money.formatMoney( checkAuth === true ? ((product.wholesalePriceIncTax && product.wholesalePriceIncTax !== '') ? product.wholesalePriceIncTax : product.priceIncTax ) : product.priceIncTax)}\n
\n\n \n \n
\n NEW
}\n {product && saleCheck === true && SALE
}\n \n );\n}\n\nfunction ProductViewPopup({ s, closeProductViewPopupF, product }) {\n const get = useGet();\n useEffect(() => {\n const url = `/api/product/getProduct/${product.productSlug}`;\n get.send(env.apiBase + url);\n \n // eslint-disable-next-line\n }, []);\n \n const data = get.response;\n\n return (\n \n
\n {data ? (\n \n ![\"logo\"](\"/assets/logos/logo.png\")
\n \n
\n \n Loading ...
\n \n )}\n \n \n {\n searchPedding ? \n {\n useSlider === 'default' ?\n \n }\n {\n pages && pages.length < 1 &&\n
\n )\n}\n\nfunction ProductPageTilesWithSlider({ pages }) {\n const settings = {\n dots: false,\n infinite: true,\n speed: 500,\n autoplaySpeed: 3000,\n fade: false,\n autoplay: true,\n slidesToShow: pages.length >= 4 ? 4 : pages.length,\n slidesToScroll: 1,\n responsive: [\n {\n breakpoint: 992,\n settings: {\n slidesToShow: pages.length >= 2 ? 2 : pages.length,\n }\n },\n {\n breakpoint: 576,\n settings: {\n slidesToShow: 1,\n }\n }\n ]\n };\n\n return (\n \n {\n pages.map((item, index) => {\n return (\n
: Sorry, there are no available results.
\n }\n \n {topLabel && \n \n \n {/* \n \n \n */}\n {/* \n \n \n */}\n \n \n \n \n \n \n \n \n
\n}\n","//import { mq } from '../../cssInJs';\n\nexport function getShareButtonStyle() {\n return {\n shareButtons: {\n marginTop: '1.5rem',\n },\n shareButtonTitle: {\n fontSize: '0.8rem',\n marginLeft: '0.5rem',\n marginBottom: '0.3rem'\n },\n shareButton: {\n margin: 5\n },\n }\n} \n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n// import cmsUtils from '../../cmsUtils';\nimport utils from 'utils'\nimport { ShareButtons } from 'site/shareButtons/shareButtons'\n\nexport function SharingIcons(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(cmsOption)\n //console.log('item', item);\n\n const cssClass = utils.classNames('cms_item', item.cssClass || item.anchorName || '');\n const shareUrl = utils.site.fullUrl(window.location.pathname + window.location.search)\n\n return {topLabel}
}\n \n \n
\n}\n","import React from 'react';\nimport { SharingIcons } from './view/sharingIcons';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'SharingIcons', \n itemElt: (item, cmsOption) => \n {muted ?
\n )} */}\n \n \n \n {slides}\n \n
\n );\n}","import React from 'react';\nimport { VideoPanel } from './view/videoPanel';\nimport cmsUtils from '../cmsUtils';\nimport { BannerPanel } from '../../../cms/items/bannerPanel/view';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'VideoPanel', \n itemElt: (item, cmsOption) => {\n const useRBonMobile = cmsUtils.payload(item, 'UseRBonMobile') || 'no';\n if(useRBonMobile === 'yes' && window.innerWidth <= 500){\n return \n
\n\n {render(\"addressFirstName\")}
\n {render(\"addressLastName\")}
\n {render(\"addressEmail\")}
\n \n
\n\n {render(\"address\")}
\n \n
\n {render(\"city\")}
\n {render(\"state\")}
\n {render(\"postalCode\")}
\n {render(\"country\")}
\n \n {\n (linkUrl && linkUrl !== '') ?\n \n :\n
\n );\n\n}\n\nfunction BannerItemContetns({ smallCaptionTop, bigCaptionMiddle, smallCaptionBottom, captionButton }) {\n return (\n \n {\n smallCaptionTop && smallCaptionTop !== '' &&\n
\n )\n}","//import { variables, mq } from 'cssInJs';\nimport { rgba } from 'polished';\n\nexport function getStyle({overlayColor, overlayOpacity, vAlign}){\n return{\n single__banner__bg : {\n '&:before' : {\n content: '\"\"',\n position: 'absolute',\n width: '100%',\n height: '100%',\n top : '0',\n backgroundColor: overlayColor === 'transparent' ? 'transparent' : rgba(overlayColor, parseFloat(overlayOpacity))\n //backgroundColor: rgba(overlayColor, parseFloat(overlayOpacity))\n },\n backgroundPosition: `50% ${vAlign === 'center' ? '50%' : vAlign}`\n }\n }\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function Panel(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n \n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n //console.log(bgTheme)\n\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || '');\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n {smallCaptionTop}\n
\n }\n {\n bigCaptionMiddle && bigCaptionMiddle !== '' &&\n \n {bigCaptionMiddle}\n
\n }\n {\n smallCaptionBottom && smallCaptionBottom !== '' &&\n \n {smallCaptionBottom}\n
\n }\n {\n captionButton && captionButton !== '' &&\n \n \n
\n }\n \n {subItemsElts}\n
\n handleClick(e)}>
\n {pdfView}\n \n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}\n\n\nfunction replaceEmbedCodes(block, cmsOption) {\n const embedDataList = cmsOption?.pageData?.embedDataList;\n const embedCodes = block.querySelectorAll('[data-embed-jaba]')\n embedCodes.forEach(embed => {\n const id = embed.getAttribute(\"data-embed-jaba\");\n const found = utils.array.find(embedDataList, x => x.id === id);\n if (found){\n //console.log(found)\n ReactDOM.render(, embed);\n }\n })\n //console.log(embedCodes, embedDataList)\n}\n\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function ImagePanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(cmsOption)\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n \n const cssClass = utils.classNames('cms_item', 'imagePanel', 'parallax', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n \n const bgUrl = cmsOption.pageOptions && cmsOption.pageOptions.imagePath ?\n utils.site.resourcePath(cmsOption.pageOptions.imagePath):\n utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const htmlBlock = React.useRef(null);\n const cssClass2 = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n const content = cmsUtils.payload(item, 'Content');\n\n return (\n \n
\n );\n}","//import { css, keyframes } from '@emotion/core'\n//import { variables, mq } from 'cssInJs'\n\n//import { css } from '@emotion/core'\nimport { mq, variables } from '../../../cssInJs';\n\nexport default {\n pageTiles__big: mq({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n marginLeft: ['-10px', '-20px', '-30px', '-40px', '-50px', '-60px'],\n marginRight: ['-10px', '-20px', '-30px', '-40px', '-50px', '-60px'],\n overflow: 'hidden',\n }),\n pageTile__big: mq({\n flex: ['1 0 100%', null, '1 0 50%', '1 0 25%'],\n maxWidth: ['100%', null, '50%', '25%'],\n padding: '10px',\n paddingLeft: '1rem',\n paddingRight: '1rem',\n }),\n pageTile__big__content: {\n '&:hover': {\n textDecoration: 'none',\n '.pageTile__big__wrapper': {\n backgroundColor: variables.colorLightGreen,\n },\n '.pageTile__big__bg': {\n transform: 'scale(1.05)',\n },\n '.pageTile__big__title': {\n color: 'white',\n },\n },\n },\n pageTile__big__wrapper: {\n boxShadow: '0.5px 1px 2px 0 rgba(0,0,0,.25)',\n padding: '0.4rem',\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: variables.colorLightGrey,\n height: '100%',\n transition: 'all .2s',\n },\n pageTile__big__bg: {\n paddingTop: '65.25%',\n backgroundPosition: 'center',\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n transition: 'all .2s',\n },\n pageTile__big__title: {\n textAlign: 'center',\n fontSize: '1.3rem',\n color: variables.colorGreen,\n marginTop: '0.5rem',\n lineHeight: '1',\n flex: '1 0 auto',\n maxWidth: '90%',\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n pageTile__big__middle__text: {\n color: '#767676',\n textAlign: 'center',\n marginTop: '0.5rem',\n fontSize: '0.7rem',\n fontWeight: '600',\n },\n pageTile__big__button: {\n textAlign: 'center',\n marginTop: '1rem',\n marginBottom: '1rem',\n button: {\n fontWeight: '600',\n padding: '10px 24px',\n fontSize: '0.8rem',\n lineHeight: '1',\n letterSpacing: '1px',\n },\n // 'button' : {\n // backgroundColor: variables.colorGreen,\n // color : 'white',\n // borderColor: variables.colorGreen\n // }\n },\n};\n","//import React from 'react';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\n\nexport function PageTilesBsyc(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'));\n const pageTileElts = pages.map((page, index) => (\n \n
\n \n \n \n
\n \n
\n \n
\n \n\n \n {pageTileElts}\n
\n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n const colorTheme = page.colorTheme === 'default' ? 'orange' : page.colorTheme;\n\n const sliderImgs = (page.bottomImageUrl && page.bottomImageUrl !== '') ? page.bottomImageUrl.split(\"|\") : [];\n\n //const sliderImgs = [\"https://dummyimage.com/640x360/333333/fff\"];\n\n if(imageUrl && imageUrl !== ''){\n sliderImgs.unshift(imageUrl);\n }\n \n const index = props.idx;\n\n var settings = {\n dots: false,\n infinite: true,\n speed: 1500,\n autoplaySpeed: 3000,\n fade: true,\n autoplay: true,\n //autoplay: false,\n slidesToShow: 1,\n slidesToScroll: 1\n };\n\n const mobile = utils.css.screenWidth() <= 550;\n\n const slides = sliderImgs.map((item, index) =>\n \n \n
\n );\n\n return (\n \n \n \n \n \n
\n )\n}","import { mq } from '../../../cssInJs';\n\nexport default {\n pageTiles__fourth: {\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n overflow: 'hidden',\n '&.slider': {\n display: 'block',\n overflow: 'unset',\n '.slick-prev:before, .slick-next:before': {\n color: 'black',\n },\n '.slick-prev': mq({\n left: ['0px', null, '-22px'],\n }),\n '.slick-next': mq({\n right: ['0px', null, '-22px'],\n }),\n },\n },\n pageTile__fourth: mq({\n flex: ['1 0 100%', null, '1 0 50%', '1 0 33.3%', '1 0 20%'],\n maxWidth: ['100%', null, '50%', '33.3%', '20%'],\n padding: '10px',\n '&.slider': {\n maxWidth: '100%',\n height: '100%',\n },\n }),\n pageTile__fourth__wrapper: {\n boxShadow: '0.5px 1px 2px 0 rgba(0,0,0,.25)',\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n backgroundColor: 'rgb(222,212,191)',\n },\n pageTile__fourth__content: {\n '&:hover': {\n textDecoration: 'none',\n '.pageTile__fourth__bg': {\n transform: 'scale(1.05)',\n },\n },\n },\n pageTile__fourth__title: mq({\n fontSize: ['32px', null, '23px'],\n lineHeight: '1.1',\n padding: '0.5rem 0.5rem',\n color: 'rgb(26,45,19)',\n fontWeight: '600',\n maxWidth: '100%',\n textAlign: 'center',\n }),\n pageTile__fourth__bg: {\n paddingTop: '56.25%',\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n transition: 'all .2s',\n },\n pageTile__fourth__des: {\n fontSize: '0.9rem',\n fontFamily: '\"Roboto Condensed\",sans-serif',\n lineHeight: 1.2,\n padding: '0.5rem 0.5rem',\n color: 'rgb(26,45,19)',\n flex: '1 0 auto',\n fontWeight: '400',\n paddingBottom: '1rem',\n },\n pageTile__fourth__button: {\n padding: '0rem 0.5rem 0.5rem',\n textAlign: 'center',\n button: {\n fontWeight: '600',\n padding: '10px 24px',\n fontSize: '0.8rem',\n lineHeight: '1',\n letterSpacing: '1px',\n },\n },\n};\n","//import React from 'react';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../..';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\nimport Slider from 'react-slick';\n\nexport function PageTilesFourth(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const useSlider = cmsUtils.payload(item, 'UseSlider') || 'default';\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'));\n const pageTileElts = pages.map((page, index) => (\n \n
\n \n {/* */}\n
\n \n \n \n {slides}\n \n
\n \n
\n\n \n \n {\n (page.pageTitle && page.pageTitle !== '') &&\n
\n\n
\n \n {page.pageTitle}\n
\n }\n\n \n\n
\n {page.tileDesc || page.description}\n
\n \n
\n \n\n \n \n
\n \n \n
\n \n {page.pageTitle && page.pageTitle !== '' && (\n
\n \n \n \n \n );\n}\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n//import { SiteLink } from '../../../components';\n\nexport function SingleBanner(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const alignV = cmsUtils.payload(item, 'AlignV') || '50%';\n\n const cssClass = utils.classNames('cms_item', 'single-banner', 'banner-item', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n //const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n //const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n // const titlePanel = captionTitle ? (\n // linkUrl ? ({page.pageTitle}
\n )}\n \n {page.tileDesc || page.description}\n
\n \n LEARN MORE\n
\n \n {/* {titlePanel && \n
\n );\n\n\n}\n","import React from 'react';\nimport env from '../../../env';\nimport { usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Button, ErrorMessage } from '../../../components';\nimport { getContactModel } from './contactFormModel';\nimport { gtm } from '../../../lib/tracking';\n\nexport function Contact(props) {\n\n const emailReceiver = props.emailReceiver;\n const fileAttachment = props.fileAttachment || 'false';\n const mailchimpApiKey = props.mailchimpApiKey;\n const mailchimpAudienceKey = props.mailchimpAudienceKey;\n \n const model = getContactModel({});\n const form = useForm(model, { usePlaceholder: true });\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const [mailChimpError, setMailChimpError] = React.useState();\n const post = usePost();\n\n const mailChimpErrorMemo = React.useMemo(() => {\n return mailChimpError\n }, [mailChimpError]);\n\n // function onSubmit(e) {\n // setMailChimpError(null);\n // form.validateForm(e, () => {\n // const value = { \n // ...form.getValue(),\n // emailReceiver: emailReceiver,\n // mailchimpApiKey : mailchimpApiKey,\n // mailchimpAudienceKey : mailchimpAudienceKey\n // };\n // var files = form.getFiles();\n // var formData = new FormData();\n // formData.append('jsonData', JSON.stringify(value))\n // files.forEach(file => {\n // (file.files || []).forEach(uploadFile => {\n // formData.append(file.name, uploadFile)\n // })\n // });\n // //post.send(env.apiBase + \"/api/contact/send\", value);\n // post.sendFormData(env.apiBase + \"/api/contact/send\", formData);\n // setSendingStatus('pending')\n // })\n\n // console.log('submitting')\n // }\n\n function onSubmit(e) {\n setMailChimpError(null);\n form.validateForm(e, () => {\n window.grecaptcha.ready(function () {\n window.grecaptcha.execute(env.reCaptchaSiteKey, { action: 'submit' }).then(function (token) {\n\n const value = {\n ...form.getValue(),\n emailReceiver: emailReceiver,\n mailchimpApiKey: mailchimpApiKey,\n mailchimpAudienceKey: mailchimpAudienceKey,\n grecaptchaToken : token\n };\n \n var files = form.getFiles();\n var formData = new FormData();\n formData.append('jsonData', JSON.stringify(value))\n files.forEach(file => {\n (file.files || []).forEach(uploadFile => {\n formData.append(file.name, uploadFile)\n })\n });\n post.sendFormData(env.apiBase + \"/api/contact/send\", formData);\n setSendingStatus('pending');\n\n });\n });\n })\n }\n\n // if (status === 'done') {\n // //navigate(`/task/view/${taskId}`)\n // window.location.reload();\n // }\n\n if (post.done() && sendingStatus === 'pending') {\n var value = form.getValue();\n gtm.sendEvent('contactFormSubmitted', {contactEmail: value.email} )\n form.reset(model);\n setSendingStatus(null);\n\n if(post.response.results && (post.response.results.MailChimpError && post.response.results.MailChimpError !== \"\")){\n setMailChimpError(\"Mail Chimp Error : \" + post.response.results.MailChimpError);\n }\n }\n\n const render = (name) => form.renderControl(name, null);\n\n return (\n \n );\n}","import { fb, validators } from '../../../lib/form';\n\nexport function getContactModel(data) {\n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [validators.Required()], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n enquiry: [data.enquiry || '', [validators.Required()], { label: 'Your Message', type: 'textarea' }],\n attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }]\n }); \n return model;\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { Contact } from './contactForm';\n\nexport function ContactForm(props) {\n const item = props.item;\n console.log('item', item);\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const emailReceiver = cmsUtils.payload(item, 'EmailReceiver');\n const fileAttachment = cmsUtils.payload(item, 'FileAttachment') || \"false\";\n\n const mailchimpApiKey = cmsUtils.payload(item, 'MailchimpApiKey');\n const mailchimpAudienceKey = cmsUtils.payload(item, 'MailchimpAudienceKey');\n\n const cssClass = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n\n //let itemElt = ();\n\n return (\n {titlePanel}\n
} */}\n \n\n
\n )\n}","import React, { useState, useRef } from 'react';\r\nimport utils from '../../utils';\r\nimport { debounce } from '../utils-core/debounce';\r\nimport * as yt from './iframeApi';\r\nimport { FiVolumeX, FiVolume2 } from 'react-icons/fi';\r\nimport { FaRegPlayCircle } from 'react-icons/fa';\r\nimport ModalVideo from 'react-modal-video'\r\n\r\n\r\nexport function YoutubeBannerMobilePopup(props) {\r\n const youtubeBannerRef = React.useRef(null);\r\n\r\n const [playerStatus, setPlayerStatus] = useState('loading');\r\n const [playerSize, setPlayerSize] = useState(null);\r\n const [ytPlayer, setYtPlayer] = useState(null);\r\n const [muted, setMuted] = useState(true);\r\n const countPlayedRef = useRef(0);\r\n const [popupOpened, setPopupOpened] = useState(false);\r\n const { heightSet, videoLinkOrId, playerId } = props.video;\r\n const videoId = yt.getYoutubeCode(videoLinkOrId);\r\n //const posterImageUrl = yt.thumbnailMax(videoId);\r\n const posterImageUrl = (props.posterImageUrl && props.posterImageUrl !== '') ? props.posterImageUrl : yt.thumbnailMax(videoId);\r\n const mobileImageUrl = props.mobileImageUrl;\r\n //let countPlayed = 0;\r\n const canPlayVideo = () => (typeof window !== `undefined` && typeof props.canPlayVideo === `undefined`)? window.innerWidth >= 1200 : !!(typeof props.canPlayVideo === 'function'? props.canPlayVideo() : props.canPlayVideo);\r\n\r\n const playerVars = {\r\n 'enablejsapi': 1,\r\n //'autoplay': 1,\r\n 'controls': 0,\r\n 'loop': 1,\r\n 'showinfo': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1,\r\n //'origin': typeof window !== `undefined` && window.location.origin,\r\n 'allowfullscreen': true,\r\n 'wmode': 'transparent'\r\n }\r\n\r\n //console.log('videoId: ' + videoId)\r\n //const canPlayVideo = () => window.innerWidth >= 1200\r\n React.useEffect(() => {\r\n const resized = debounce(() => {\r\n loadVideo();\r\n });\r\n loadVideo();\r\n if (typeof window !== `undefined`)\r\n window.addEventListener('resize', resized)\r\n return () => {\r\n if (typeof window !== `undefined`)\r\n window.removeEventListener('resize', resized)\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n \r\n function loadVideo() {\r\n if (youtubeBannerRef.current)\r\n setPlayerSize(getSize(youtubeBannerRef.current));\r\n if (canPlayVideo()) {\r\n \r\n const existingScript = document.getElementById('youtubeIframeApJaba');\r\n\r\n if(existingScript){\r\n if(window.YT){\r\n setTimeout(init, 100);\r\n }\r\n else{\r\n let checkInterTime = 0;\r\n const checkYoutubeIframeApJabaScript = setInterval(() => {\r\n console.log(\"checkYoutubeIframeApJabaScript\", checkInterTime);\r\n if(window.YT){\r\n setTimeout(init, 100);\r\n clearInterval(checkYoutubeIframeApJabaScript);\r\n }\r\n\r\n if(checkInterTime >= 10){\r\n clearInterval(checkYoutubeIframeApJabaScript);\r\n }\r\n checkInterTime ++;\r\n }, 100);\r\n }\r\n }\r\n else{\r\n yt.loadApi((loadJs) => {\r\n loadJs ? init() : setTimeout(init, 100)\r\n })\r\n }\r\n\r\n }\r\n }\r\n\r\n function init() {\r\n let player = null;\r\n if (typeof window !== `undefined`) {\r\n player = new window.YT.Player(playerId, {\r\n events: {\r\n 'onStateChange': (e) => {\r\n switch (e.data) {\r\n // case window.YT.PlayerState.PLAYING:\r\n // break;\r\n // case window.YT.PlayerState.PAUSED:\r\n // break;\r\n case window.YT.PlayerState.ENDED:\r\n console.log(\"window.YT.PlayerState.ENDED----\", playerId);\r\n const countPlayed = countPlayedRef.current;\r\n if (countPlayed < 3 - 1) {\r\n //console.log('ended', countPlayed + 1);\r\n countPlayedRef.current = countPlayed + 1;\r\n if (player && player.playVideo)\r\n player.playVideo();\r\n } else {\r\n console.log(\"window.YT.PlayerState.ENDED----finished\");\r\n setPlayerStatus('finished');\r\n }\r\n break;\r\n default:\r\n }\r\n },\r\n 'onReady': (e) => {\r\n //console.log('onReady');\r\n if (player && player.mute && player.playVideo) {\r\n player.mute();\r\n player.playVideo();\r\n }\r\n setTimeout(() => setPlayerStatus('loaded'), 1000)\r\n },\r\n 'onError': (e) => { console.log(e) }\r\n }\r\n });\r\n\r\n setYtPlayer(player);\r\n }\r\n }\r\n\r\n function soundToggle(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (ytPlayer){\r\n if (muted) {\r\n setMuted(false);\r\n setTimeout(() => {\r\n if (ytPlayer && ytPlayer.pauseVideo && ytPlayer.unMute && ytPlayer.playVideo) {\r\n ytPlayer.pauseVideo();\r\n ytPlayer.unMute();\r\n ytPlayer.playVideo();\r\n }\r\n }, 100)\r\n } else {\r\n setMuted(true);\r\n setTimeout(() => {\r\n if (ytPlayer && ytPlayer.pauseVideo && ytPlayer.unMute && ytPlayer.playVideo) {\r\n ytPlayer.pauseVideo();\r\n ytPlayer.mute();\r\n ytPlayer.playVideo();\r\n }\r\n }, 100)\r\n }\r\n }\r\n\r\n //https://developers.google.com/web/updates/2017/09/autoplay-policy-changes\r\n }\r\n\r\n function playVideo() {\r\n setPopupOpened(true)\r\n }\r\n\r\n const canPlay = canPlayVideo();\r\n const imageUrl = !canPlay && mobileImageUrl ? mobileImageUrl : posterImageUrl;\r\n return (\r\n \n
\n\n \r\n \r\n \r\n {canPlay && playerSize && }\r\n {canPlay && playerStatus === 'loaded' &&
\r\n \r\n {/* {muted?
}\r\n\r\n {!canPlay && !mobileImageUrl && \r\n
}\r\n \n {/* {canPlayVideo() ?
\n );\n}\n\n// function MobileSlider(props) {\n// const item = props.item;\n// const subItems = item.items || [];\n \n// const slides = subItems.map((subItem, index) =>\n// \n// {slides}\n//
\n// );\n// }\n\n// function SlideItem(props){\n// const item = props.item;\n// const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n// return (\n// \n// 
\n//
\n// );\n\n// }","import React from 'react';\nimport env from '../../env';\nimport { SiteLink} from '../../components';\nimport { usePost } from '../../components';\nimport { ErrorPopup, Loading } from '../../components';\nimport { useRouter } from '../../components';\nimport { ProductTile } from '../ecm/productList/productTile';\nimport utils from '../../utils';\n\nexport function SearchResult(props) {\n const { query } = useRouter();\n const post = usePost();\n const keyword = query.q;\n //console.log(keyword);\n\n React.useEffect(() => {\n post.send(env.apiBase + '/api/search/search', { keyword: keyword });\n // eslint-disable-next-line\n }, [keyword]);\n\n if (post.loading()) {\n return \n No result found.\n
\n )\n return (\n <>\n {products.length > 0 && \n {/*
}\n {pages.length > 0 && Products
*/}\n\n {/*
}\n \n );\n}\n\nfunction ProductList({ products }) {\n return (\n Pages
*/}\n\n {products.map((product, index) =>\n
\n );\n}\n\nfunction PageList({ pages }) {\n return (\n \n {pages.map((page, index) =>\n
\n );\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport { useEffect } from 'react';\n//import style from './style';\n\nexport function TextWithJavScript(props){\n \n const item = props.item;\n const cssClass = props.cssClass;\n const code = cmsUtils.payload(item, 'Code') || '';\n\n const javaScriptCode = code.substring(code.indexOf(\"\n
\n )}\n \n \n \n \n
\n \n {page.pageTitle}\n
\n \n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport { useLayoutEffect } from 'react';\n//import style from './style';\n\nexport function JotformIframe(props) {\n\n const item = props.item;\n const cssClass = props.cssClass;\n const code = cmsUtils.payload(item, 'Code') || '';\n\n const javaScriptCode = code.substring(code.indexOf(\"<_script\"), (code.indexOf(\"\") + 10)).trim();\n const nonjavaScriptCode = code.replace(javaScriptCode, '').trim();\n\n useLayoutEffect(() => {\n\n const existingScript = document.getElementById('jotformIframe');\n if (existingScript) {\n document.body.removeChild(existingScript);\n }\n\n const javaScriptInsideCode = javaScriptCode.substring((javaScriptCode.indexOf(\">\") + 1), (javaScriptCode.indexOf(\"\"))).trim();\n\n const script = document.createElement('script');\n script.type = `text/javascript`;\n script.text = javaScriptInsideCode;\n script.id = 'jotformIframe';\n\n document.body.appendChild(script);\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {nonjavaScriptCode && nonjavaScriptCode !== '' && }\n
\n )\n}","export default {\n jotform__lightbox__container : {\n 'a' : {\n cursor: 'pointer'\n }\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport { useEffect, useLayoutEffect, useState } from 'react';\nimport { Loading } from '../../components';\nimport style from './style';\n\nexport function JotformLightbox(props) {\n\n const item = props.item;\n const cssClass = props.cssClass;\n const code = cmsUtils.payload(item, 'Code') || '';\n const codes = code.split(\"\");\n\n const [result, setResult] = useState();\n console.log(\"codes --->\", codes);\n\n useEffect(() => {\n\n const javsScriptCodes = [];\n let nonjavaScriptCode = \"\";\n let index = 1;\n\n codes.forEach(code => {\n\n if (code.includes(\"<_script\")) {\n const script = document.createElement('script');\n script.type = `text/javascript`;\n script.id = 'jotformLightbox' + index;\n\n const javaScriptTopCode = code.substring(code.indexOf(\"<_script\"), (code.indexOf(\">\") + 1)).trim().replace(\"src =\", \"src=\").replace(\"src = \", \"src=\").replace(\"src= \", \"src=\").trim();\n const javaScriptInsideCode = code.substring((code.indexOf(\">\") + 1)).trim();\n\n console.log(\"javaScriptTopCode\", javaScriptTopCode);\n\n if (javaScriptTopCode.includes(\"src=\")) {\n let _src = javaScriptTopCode.indexOf('src=\"') === -1 ? '' : javaScriptTopCode.substring(javaScriptTopCode.indexOf('src=\"')).trim();\n let src = _src.substring((_src.indexOf('src=\"') + 5), _src.indexOf('\"', 5));\n script.src = src;\n }\n\n if (javaScriptInsideCode !== '') {\n script.text = javaScriptInsideCode;\n }\n javsScriptCodes.push(script);\n }\n else {\n nonjavaScriptCode = code.trim();\n }\n\n index++;\n\n });\n\n setResult({ javsScriptCodes: javsScriptCodes, nonjavaScriptCode: nonjavaScriptCode });\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {\n result ?
\n )\n}\n\n\nfunction GetJotformLightbox({ result }) {\n\n const javsScriptCodes = result.javsScriptCodes;\n const nonjavaScriptCode = result.nonjavaScriptCode;\n const [index, setIndex] = useState(0);\n\n useLayoutEffect(() => {\n\n if (!javsScriptCodes || (javsScriptCodes && javsScriptCodes.length <= 0)) {\n return;\n }\n\n const existingScript = document.getElementById(javsScriptCodes[index].id);\n if (existingScript) {\n document.body.removeChild(existingScript);\n }\n document.body.appendChild(javsScriptCodes[index]);\n\n let timer = null;\n\n if (javsScriptCodes.length > (index + 1)) {\n timer = setTimeout(() => {\n setIndex(index + 1);\n }, 1000);\n }\n\n return () => {\n if(timer){\n clearTimeout(timer);\n }\n }\n\n // eslint-disable-next-line\n }, [index]);\n\n return (\n \n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SearchResult } from '../../../site/searchResult/searchResult';\nimport { InstagramFeed } from '../../../components';\nimport { AppVersion } from '../../../components';\nimport { TextWithJavScript } from '../../../components/TextWithJavaScript/view';\nimport { JotformIframe } from '../../../components/jotformIframe/view';\nimport { JotformLightbox } from '../../../components/jotformLightbox/view';\n\nexport function Code(props) {\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const code = cmsUtils.payload(item, 'Code');\n const codeType = cmsUtils.payload(item, 'CodeType');\n let controls = null;\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n if (codeJson.control === 'search-results') {\n controls = \n
\n )\n else if (codeType === 'Text')\n return (\n \n )\n else if (codeType === 'TestWithJs') {\n return (\n \n Code Type: {codeType}\n {code}\n {controls}
\n )\n}\n","import { mq, variables } from '../../../cssInJs';\n\nexport default {\n pageTiles__small: {\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n overflow: 'hidden',\n '&.slider' : {\n display : 'block',\n overflow: 'unset',\n '.slick-prev:before, .slick-next:before' : {\n color: 'black'\n },\n '.slick-prev' : {\n left: '-22px'\n },\n '.slick-next' : {\n right: '-22px'\n }\n } \n },\n pageTile__small: mq({\n flex: ['1 0 100%', null, '1 0 50%', '1 0 33.3%', '1 0 25%'],\n maxWidth: ['100%', null, '50%', '33.3%', '25%'],\n padding: '10px',\n '&.slider' : {\n //flex : '1 0 100%',\n maxWidth : '100%',\n height : '100%'\n }\n }),\n pageTile__small__wrapper: {\n boxShadow: '0.5px 1px 2px 0 rgba(0,0,0,.25)',\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n backgroundColor: 'rgb(222, 212, 191)'\n },\n pageTile__small__content: {\n '&:hover': {\n textDecoration: 'none',\n color : 'white',\n '.pageTile__big__inner__title' : {\n color : 'white'\n },\n '.pageTile__small__inner__des' : {\n color : 'white'\n },\n '.pageTile__small__wrapper' : {\n backgroundColor: 'rgb(81, 94, 67)',\n },\n '.pageTile__small__bg': {\n transform: 'scale(1.05)'\n }\n }\n },\n pageTile__small__title: mq({\n fontSize: ['32px',null,'23px'],\n lineHeight: '1.1',\n padding: '0.5rem 0.5rem',\n //flex: '1 0 auto',\n color : variables.fontColor,\n minHeight: '72px',\n fontWeight : '600',\n maxWidth : '84%',\n '.pageTile__big__inner__title' : {\n textOverflow: 'ellipsis',\n display : '-webkit-box',\n WebkitLineClamp: '2',\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n }\n }),\n pageTile__small__bg: {\n paddingTop: '56.25%',\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n transition: 'all .2s'\n },\n pageTile__small__des: {\n fontSize: '18px',\n lineHeight: 1.2,\n padding: '0.5rem 0.5rem',\n color: variables.fontColor,\n flex: '1 0 auto',\n '.pageTile__small__inner__des' : {\n textOverflow: 'ellipsis',\n display : '-webkit-box',\n WebkitLineClamp: '5',\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n }\n },\n pageTile__small__button: {\n padding: '0rem 0.5rem 0.5rem',\n 'button': {\n //backgroundColor: 'transparent',\n \n //color: variables.fontColor,\n //borderColor: variables.colorDarkGray,\n \n fontWeight: '600',\n padding : '14px 30px',\n fontSize : '18px',\n lineHeight: '1',\n letterSpacing: '1px'\n }\n }\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\n\nexport function BlogPosts(props) {\n\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const posts = getPages(cmsUtils.payload(item, 'BlogPosts'));\n const numOfTileLines = parseInt(cmsUtils.payload(item, 'NumOfTileLines', '2'));\n //console.log(numOfPost, parseInt(numOfPost));\n //console.log(posts);\n const bp = utils.ui.getCurrentBreakpoint();\n const tilesPerLine = { xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4 }\n const numOfPost = numOfTileLines * (tilesPerLine[bp] || 3);\n const step = numOfPost;\n\n const [tilesToShow, setTilesToShow] = React.useState(numOfPost);\n\n const displayingPosts = posts.length > tilesToShow ? posts.slice(0, tilesToShow) : posts;\n const showMore = posts.length > displayingPosts.length;\n\n const pageTileElts = displayingPosts.map((page, index) =>\n \n {pageTileElts}\n
\n {showMore && (\n { setTilesToShow(tilesToShow + step) }}>LOAD MORE
)}\n \n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n //const postDate = utils.date.formatDDMMYYYY(page.postDate);\n\n return (\n \n \n\n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function BlogPostTitle(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const title = cmsUtils.payload(item, 'PageTitle');\n const postDate = cmsUtils.payload(item, 'PostDate');\n\n const cssClass = utils.classNames('blogView__titleContainer', 'cms_item', item.cssClass || item.anchorName || '');\n\n return (\n \n \n
\n \n \n
\n\n \n
\n\n \n {page.pageTitle}\n
\n \n
\n\n \n {page.tileDesc}\n
\n \n \n
\n\n \n
\n );\n}\n","import React from 'react';\n//import cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { Item } from '../../items/item';\n\nexport function VideoHolder(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n \n {title}\n \n
\n\n {postDate}\n
\n \n {subItemsElts}\n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { YoutubeEmbedPopup } from '../../../components';\n\nexport function VideoItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n console.log('item', item);\n\n const youtubeCode = cmsUtils.payload(item, 'YoutubeCode');\n const posterFrameUrl = cmsUtils.payload(item, 'PosterFrameUrl');\n const captionTitleYoutube = cmsUtils.payload(item, 'CaptionTitleYoutube');\n const shortDesc = cmsUtils.payload(item, 'ShortDesc');\n\n const cssClass = utils.classNames('cms_item', 'videoItem', item.cssClass || item.anchorName || '');\n\n return (\n \n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function MultiColumnPanel(props){\n const item = props.item;\n const mobileReverse = cmsUtils.payload(item, 'MobileReverse', 'no');\n //const subItems = item.items || [];\n const subItems = (mobileReverse === \"yes\" && utils.css.screenWidth() <= 550) ? item.items.reverse() || [] : item.items || [];\n const cmsOption = props.cmsOption || {};\n const columnWidths = cmsUtils.payload(item, 'ColumnWidths').split(\",\");\n const mobileColumnWidths = cmsUtils.payload(item, 'MobileColumnWidths').split(\",\");\n const countItem = {countD : 0, countM : 0, col : \"\"};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n \n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'multiColumnPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || ''); \n\n function setupClass(index){ \n countItem.col = \"\";\n if(columnWidths.length === countItem.countD){\n countItem.countD = 0;\n }\n\n if(mobileColumnWidths.length === countItem.countM){\n countItem.countM = 0;\n }\n \n countItem.col = \"col-sm\" + (columnWidths[countItem.countD] === \"13\" ? \"\" : \"-\" + columnWidths[countItem.countD]) + \" col-\" + mobileColumnWidths[countItem.countM];\n countItem.countD ++;\n countItem.countM ++;\n };\n\n const subItemsElts = subItems.map((subItem, index) => {\n setupClass();\n return \n
\n \n
\n \n
\n {captionTitleYoutube}
\n \n\n
\n } \n );\n return (\n \n
\n \n {subItemsElts}\n
\n handleClick(e)}>\n
\n )\n\n return (\n \n {e.preventDefault(); e.stopPropagation();}}>{buttonTitle}
\n \n \n To edit the button title, please double click or open item editor
\n handleClick(e)}>\n
\n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}","// //import { css, keyframes } from '@emotion/core'\n// //import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq } from '../../cssInJs'\n\nexport default {\n photoGallery : css({\n maxWidth : '960px',\n margin: 'auto'\n }),\n thumbnails : css({\n display:'flex',\n flexWrap:'wrap',\n marginLeft:'-5px',\n marginRight:'-5px'\n }),\n thumbnail : css(mq({\n //flexBasis: ['50%','25%','33.33%'],\n flexBasis: ['50%','25%','16.66%'],\n //padding: ['5px']\n padding:'5px',\n cursor: 'pointer'\n })),\n bg : {\n paddingBottom: '100%',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\nimport { useState, useEffect } from 'react';\n\nimport utils from '../../utils';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport FsLightbox from 'fslightbox-react';\nimport { createPortal } from \"react-dom\";\n\nfunction Portal({children}){\n const [el] = useState(document.createElement('div'));\n useEffect(() => {\n let mount = document.getElementById(\"portal-root\");\n mount.appendChild(el);\n return () => mount.removeChild(el);\n }, [el]);\n return createPortal(children, el);\n}\n\nexport function PhotoGallery(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'photoGallery', item.cssClass || item.anchorName || '');\n const _images = cmsUtils.payload(item, 'ImageUrl') ? cmsUtils.payload(item, 'ImageUrl').split(\"|\") : [];\n const _thumbImages = [];\n\n // _images.forEach(el => {\n // let a = el.split(\"/\");\n // console.log('e',e);\n // });\n\n //let a = _images[0].split(\"/\");\n \n if(_images.length > 0){\n _images.forEach(el => {\n let _texts = el.split('/');\n let _text = el.replace(_texts[_texts.length-1], \"@thumb/\" + _texts[_texts.length-1]);\n _thumbImages.push(_text);\n });\n //console.log('222', _images2);\n }\n\n //const _images = ['https://jaba.com.au/sites/jaba/media/images/multicolour-services-min.jpg'];\n const [toggler, setToggler] = useState(false);\n const [popupIndex, setPopupIndex] = useState(0);\n \n return(\n \n {buttonTitle}
\n \n \n \n {/* \n \n\n
\n ); \n}","import { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\nexport default{\n testimonialPanel : css({\n marginTop: '20px',\n marginBottom: '20px',\n backgroundColor: 'transparent',\n '& .slick-prev:before, .slick-next:before' : {\n color : 'black'\n },\n '& .slick-next' : {\n right : '-2%'\n },\n '& .slick-prev' : {\n left : '-2%'\n }\n })\n}","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nexport default{\n testimonialItem : css(mq({\n maxWidth : '300px',\n backgroundColor: '#f8f8ff',\n opacity: '.9',\n textAlign: 'center',\n color: '#000',\n padding: '10px',\n //height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n height: ['400px', '430px']\n })),\n\n\n testimonialItem_title : css(mq({\n marginBottom: '0px',\n fontSize: ['2rem', '1.72rem']\n })),\n\n testimonialItem_desc :css(mq({\n flex: '1 1 auto',\n fontSize: ['1.2rem', '1rem'] \n //flexGrow: '1',\n //flexShrink: '1'\n })),\n\n testimonialItem_bottom : css(mq({\n fontSize : ['1rem', '0.86rem']\n }))\n}","import utils from '../../../utils';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport { IoIosStar } from \"react-icons/io\";\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function TestimonialItem(props){\n\n const item = props.item;\n //const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialItem', item.cssClass || item.anchorName || '');\n \n const startRatingColor = (props.startRatingColor && props.startRatingColor !== \"\") ? props.startRatingColor : \"black\";\n \n const title = cmsUtils.payload(item, 'Title');\n const desc = cmsUtils.payload(item, 'Desc');\n const bottom = cmsUtils.payload(item, 'BottomText');\n const ratingValue = parseInt(cmsUtils.payload(item, 'RatingStar'));\n \n var rating = [];\n\n for(var i = 0; i < ratingValue; i++ ){\n rating.push(\n \n PhotoGallery\n
\n \n {\n _thumbImages.map((item, index) =>\n
\n {\n e.preventDefault();\n e.stopPropagation();\n setToggler(!toggler);\n setPopupIndex(index);\n }}>\n \n
\n )\n \n }\n \n
\n );\n}","//import { Item } from 'cms/items/item';\nimport Slider from \"react-slick\";\nimport utils from '../../../utils';\n//import cmsUtils from 'cms/utils/cmsUtils';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\n//import { useState, useEffect } from 'react';\n\nimport { TestimonialItem } from '../testimonialItem/view';\n\nexport function TestimonialPanel(props){\n const item = props.item;\n //const defaultDesH = 220;\n const startRatingColor = props.startRatingColor;\n const subItems = item.items || [];\n //console.log(subItems.length);\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialPanel', item.cssClass || item.anchorName || '');\n \n //const [desH, setDesH] = useState(defaultDesH);\n\n //var maxDesTextLength = 0;\n const testimonialItems = subItems.map((subItem, index) => {\n // let subItemDes = cmsUtils.payload(subItem, \"Desc\");\n // if(maxDesTextLength < subItemDes.length){\n // maxDesTextLength = subItemDes.length\n // }\n //return \n { title }\n
\n\n { rating }\n
\n {/* style={{ flexBasis: props.desH + \"px\" }} */}\n \n { desc }\n
\n \n { bottom }\n
\n\n \n { testimonialItems }\n \n
\n );\n}","import { css } from '@emotion/core'\n//import { mq } from '../../cssInJs'\nexport default{\n exTextItem : css({\n overflow:'hidden',\n maxHeight:'0',\n transition: 'all 0.8s',\n padding: '0px',\n '&.expand' : {\n maxHeight:'100%',\n padding: '1rem 0'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n//import React from 'react';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport utils from '../../utils';\nimport style from './style';\nimport { Item } from '../../cms/items/item';\n\nexport function ExpandablePanel(props){\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n \n let bgUrl = null;\n\n if (imageUrl){\n bgUrl = utils.site.resourcePath(imageUrl);\n }\n else if (backgroundTile){\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n }\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'expandablePanel', cmsOption.isCmsEdit && 'expandablePanel_item_cms', item.cssClass || item.anchorName || '');\n const subItemsElts = subItems.map((subItem, index) =>\n \n {subItemsElts}\n
\n \n {\n (linkUrl && linkUrl !== '') ? \n \n : \n \n
\n )\n }\n );\n\n var numOfSlides = (maxNum) => subItems.length >= maxNum ? maxNum : subItems.length\n\n var settings = {\n dots: false,\n infinite: true,\n speed: 1500,\n autoplaySpeed: 3000,\n ////fade: true,\n autoplay: true,\n slidesToShow: numOfSlides(6),\n //slidesToShow: 3,\n slidesToScroll: numOfSlides(3),\n responsive: [\n { breakpoint: 1024, settings: { slidesToShow: numOfSlides(5), slidesToScroll: numOfSlides(2) } },\n { breakpoint: 992, settings: { slidesToShow: numOfSlides(4), slidesToScroll: numOfSlides(2) } },\n { breakpoint: 768, settings: { slidesToShow: numOfSlides(3), slidesToScroll: numOfSlides(2) } },\n { breakpoint: 576, settings: { slidesToShow: numOfSlides(2), slidesToScroll: numOfSlides(1)} }\n ]\n };\n\n return (\n \n 
\n
\n {bottomText}
\n\n \n
\n \n }\n \n \n {bottomText}
\n\n \n {sliderAwardItems}\n \n
\n );\n}","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport React, { Fragment, useState, useEffect } from \"react\";\nimport env from \"../../../env\";\nimport { Loading, ErrorPopup, usePost } from \"../../../components\";\nimport { useForm } from \"../../../form\";\nimport { ProductTile } from \"./productTile\";\nimport { tileListStyle } from \"./productTileStyle\";\nimport { getCategoryListModel } from \"./categoryListModel\";\nimport { useAuth } from \"auth\";\n\nexport function ProductItems({ categories, mainCategory }) {\n const post = usePost();\n React.useEffect(() => {\n post.send(env.apiBase + \"/api/product/getProducts\", {\n categories: categories,\n });\n // eslint-disable-next-line\n }, [categories]);\n\n if (post.loading()) {\n return No products
\n );\n}\n\nfunction Items({\n items,\n categories,\n defaultCategories,\n mainCategory,\n mainCategory_name,\n checkMember,\n checkAuth,\n}) {\n const s = tileListStyle;\n const defaultCategoriesArray =\n defaultCategories && defaultCategories !== \"\"\n ? defaultCategories.split(\",\")\n : [];\n const model = getCategoryListModel(\n categories,\n defaultCategoriesArray,\n mainCategory\n );\n\n const categoryListForm = useForm(model, {\n usePlaceholder: true,\n onControlChanged: orderItemChanged,\n });\n\n const [showProducts, setShowProducts] = useState(() => {\n if (defaultCategoriesArray.length === 1) {\n let _items = [];\n let _items2 = JSON.parse(JSON.stringify(items));\n _items = _items2.filter((item) => {\n for (let i in item.productCategories) {\n if (\n item.productCategories[i].categoryId === defaultCategoriesArray[0]\n ) {\n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n return false;\n });\n sortProudcts(_items);\n return _items;\n }\n return items;\n });\n\n function orderItemChanged(e, control) {\n if (control && control.name === \"categoryList\") {\n console.log(\"controll value\", control.value);\n let _items = [];\n if (control.value && control.value !== \"\") {\n _items = items.filter((item) => {\n if (control.value === \"_favourites_\") {\n if (localStorage.favorites !== \"\") {\n if (localStorage.favorites.includes(item.productId)) {\n return true;\n }\n }\n } else if (control.value === mainCategory_name) {\n for (let i in item.productCategories) {\n item.seqInCategory = item.productCategories[i].seq;\n }\n return true;\n } else {\n for (let i in item.productCategories) {\n if (item.productCategories[i].categoryId === control.value) {\n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n }\n return false;\n });\n } else {\n _items = items;\n }\n //sort\n sortProudcts(_items);\n setShowProducts(_items);\n }\n }\n\n const render = (name) => categoryListForm.renderControl(name, null);\n const _checkAuth = checkAuth === true && checkMember === true ? true : false;\n\n return (\n {render(\"categoryList\")}
\n \n {/* {items.map((item, index) =>
\n No product
\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 const items = form.findControl(\"items\").controls;\n const render = (name, parent = null) => form.renderControl(name, parent);\n\n function itemAmount(item, orderItem) {\n const val = item.getValue();\n return (val.quantity * (orderItem.unitPrice * 100)) / 100;\n }\n\n const next = (e) => {\n form.validateForm(e, () => {\n moveNext();\n });\n };\n\n function ItemVariantSummary({ orderItem }) {\n if (!orderItem.variantOptionsSerialised) return null;\n const options = JSON.parse(orderItem.variantOptionsSerialised);\n return (\n 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(\n (acc, x) =>\n acc === null ? (\n x\n ) : (\n \n {acc}, {x}\n \n ),\n null\n )}\n
\n );\n }\n\n const orderItems = cart.orderItems.filter((x) => x.orderItemType === 0);\n // const taxLines = cart.orderItems.filter((x) => x.orderItemType === 1);\n\n return (\n \n
\n\n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n \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';\n//import utils from '../../../utils';\n\nexport function Shipping({ cart, form, saveShipping, post, action }) {\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 Get a FREE Pack of Seeds With Every Purchase!\n
\n\n We aim to nurture the human spirit with full inclusion. With each\n order, you will receive a FREE gift as part of an\n initiative of Australian Native Food Co. 1 x Pack of Seeds Native\n seeds.\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 { mq } from \"../../../cssInJs\";\n\nexport default {\n pay: {\n 'h3': {\n marginTop: 0\n }\n },\n stripeWrapper: {\n margin: '1rem 0 1rem',\n maxWidth: 500,\n padding: '1rem',\n backgroundColor: '#999999'\n },\n formActions: {\n marginTop: '2rem'\n },\n paymentInfoText : mq({\n fontSize: ['0.6rem', '0.5rem'],\n marginTop: '1rem',\n '.contact-link' : {\n color: 'white'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './payStyle';\nimport React from 'react';\nimport { SiteLink, 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';\n//import { 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\n const post = usePost();\n const { Redirect } = useRouter();\n //const { dispatch } = useStore();\n\n React.useEffect(() => {\n const { stripe, card } = initStripe(setError)\n setStripe(stripe);\n setCard(card);\n }, [])\n\n function payNow() {\n if (error) return;\n stripe.createToken(card).then(function (result) {\n if (result.error) {\n setError(result.error.message);\n } else {\n setError(null);\n // Send the token to your server.\n onSubmit(result.token.id);\n }\n });\n }\n\n function onSubmit(tokenId) {\n console.log(tokenId)\n post.send(env.apiBase + \"/api/cart/payStripe\", { tokenId: tokenId, itemTotalAmount: cart.itemTotalAmount, cartId: env.getDevCartId() });\n }\n\n if (post.done()) {\n env.setDevCartId(null);\n //dispatch({ type: 'SET_STATE', payload: { cartInfo:0 }})\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","import env from '../../../env';\n\nexport function initStripe(setError) {\n // Create a Stripe client.\n const stripe = window.Stripe(env.stripeKey);\n\n\n // Create an instance of Elements.\n const elements = stripe.elements();\n\n // Custom styling can be passed to options when creating an Element.\n // (Note that this demo uses a wider set of styles than the guide below.)\n const elStyle = {\n base: {\n color: '#32325d',\n fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n fontSmoothing: 'antialiased',\n fontSize: '18px',\n '::placeholder': {\n //color: '#aab7c4'\n color: '#000000'\n }\n },\n invalid: {\n color: '#fa755a',\n iconColor: '#fa755a'\n }\n };\n\n // Create an instance of the card Element.\n const card = elements.create('card', { style: elStyle });\n\n // Add an instance of the card Element into the `card-element` \n
\n \n
\n\n Pay by Credit Card
\n\n\n
\n\n \n \n
\n \n Payment through encrypted gateway can be made by Visa, Mastercard or AMEX. Please enter your credit card details to complete your order. \n For alternative payment methods please contact us \n
\n \n
\n \n \n
\n .\n card.mount('#card-element');\n\n // Handle real-time validation errors from the card Element.\n card.addEventListener('change', function (event) {\n if (event.error) {\n setError(event.error.message);\n } else {\n setError(null);\n }\n });\n\n return { stripe, card };\n}","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport style from \"./cartStyle\";\nimport React, { Fragment, useEffect } from \"react\";\n\n//import { SiteLink } from '../../../components';\nimport env from \"../../../env\";\nimport { usePost, Loading, ErrorPopup, useRouter } from \"../../../components\";\nimport { useForm } from \"../../../form\";\nimport { useStep } from \"./useStep\";\nimport { StepNav } from \"../cartStep/stepNav\";\n\nimport { OrderItems } from \"../cartOrderItems/orderItems\";\nimport { getOrderItemFormData } from \"../cartOrderItems/orderItemFormData\";\nimport { Shipping } from \"../cartShipping/shipping\";\nimport { getShippingFormData } from \"../cartShipping/shippingFormData\";\nimport { Pay } from \"../cartPayment/pay\";\nimport utils from \"../../../utils\";\nimport { useAuth } from \"auth\";\nimport { useStore } from \"../../../store\";\n\nexport function Cart() {\n const auth = useAuth();\n const [checkAuth, setCheckAuth] = React.useState(null);\n const { query } = useRouter();\n const canceled = query.canceled || \"\";\n const errorMsg = query.errormsg || \"\";\n\n useEffect(() => {\n const fetch = async () => {\n if (await auth.loggedIn()) {\n setCheckAuth(true);\n } else {\n setCheckAuth(false);\n }\n };\n fetch();\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {\n canceled === \"true\" && errorMsg !== '' && \n );\n}\n\nfunction CartMainView({ checkAuth, auth }) {\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const [cart, setCart] = React.useState(null);\n const { dispatch } = useStore();\n\n //const get = useGet();\n const post = usePost();\n\n React.useEffect(() => {\n let _cartId = env.getDevCartId();\n const value = {\n cartId: _cartId === \"null\" ? null : _cartId,\n auth: checkAuth,\n };\n\n post.send(env.apiBase + \"/api/cart/getCart\", value);\n setSendingStatus(\"pending\");\n \n // eslint-disable-next-line\n }, []);\n\n if (post.loading()) {\n return
\n \n );\n}\n\nfunction EmptyCart() {\n return (\n {'Payment error - ' + errorMsg}
\n }\n {checkAuth === null ? (\n \n
\n \n {cart.orderType === 1 && \n {steps.map((step, index) => {\n let stepView = null;\n switch (step.id) {\n case \"orderItems\":\n stepView = (\n \n {stepView}\n \n
\n );\n })}\n Wholse sale order
}\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 { 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, data.orderType, data.wholeSaleRegAdrBilling, (data.wholeSaleRegister && data.wholeSaleRegister.mobilePhone) ? data.wholeSaleRegister.mobilePhone : null),\n //shippingInfo: address(data.shippingAddress, data.orderType, data.wholeSaleRegAdrShipping, (data.wholeSaleRegister && data.wholeSaleRegister.mobilePhone) ? data.wholeSaleRegister.mobilePhone : null),\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, orderType, wholeSaleRegAdr, mobilePhone) {\n const data = model || {};\n const _firstName = (data.firstName && data.firstName !== '') ? data.firstName : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.addressFirstName : '';\n const _surname = (data.surname && data.surname !== '') ? data.surname : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.addressLastName : '';\n const _street1 = (data.street1 && data.street1 !== '') ? data.street1 : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.address : '';\n const _suburb = (data.suburb && data.suburb !== '') ? data.suburb : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.city : '';\n const _state = (data.state && data.state !== '') ? data.state : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.state : '';\n const _postcode = (data.postcode && data.postcode !== '') ? data.postcode : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.postalCode : '';\n const _email = (data.email && data.email !== '') ? data.email : (orderType === 1 && wholeSaleRegAdr) ? wholeSaleRegAdr.addressEmail : '';\n const _mobile = (data.mobile && data.mobile !== '') ? data.mobile : (orderType === 1) ? mobilePhone : '';\n\n return fb.group({\n firstName: [_firstName, [validators.Required()], { label: 'First Name', type: 'text' }],\n surname: [_surname, [validators.Required()], { label: 'Surname', type: 'text' }],\n street1: [_street1, [validators.Required()], { label: 'Street', type: 'text' }],\n street2: [data.street2 || '', [], { label: null, type: 'text' }],\n suburb: [_suburb, [validators.Required()], { label: 'Suburb', type: 'text' }],\n state: [_state, [validators.Required()], { label: 'State', type: 'text' }],\n postcode: [_postcode, [validators.Required()], { label: 'Postcode', type: 'text' }],\n email: [_email, [validators.Required(), validators.Email()], { label: 'Email Address', type: 'email' }],\n mobile: [_mobile, [validators.Required()], { label: 'Mobile', 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 React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { ProductItems } from '../../../site/ecm/productList/productItems';\nimport { Cart } from '../../../site/ecm/cart/cart';\n\nexport function EcmItems(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n \n const cssClass = utils.classNames(\n 'cms_item',\n 'ecm',\n item.cssClass || item.anchorName || ''\n );\n\n return cmsOption.isCmsEdit ? (\n \n
\n \n {\" \"}\n Your cart is empty.{\" \"}\n
\n\n
\n \n );\n });\n\n var settings = {\n dots: false,\n infinite: true,\n speed: 1500,\n autoplaySpeed: 4000,\n autoplay: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n };\n\n return (\n \n \n “\n
\n \n {reviewContent}\n
\n\n {reviewer}\n
\n{item.itemTypeCode}
;\n }\n\n // const subItemsElts = subItems.map((subItem, index) =>\n // \n {sectionItems}\n
\n \n );\n}\n\nfunction Section(props) {\n log(\"5. section rendering\");\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n if (!subItems || subItems.length === 0) return <>;\n\n const subItemsElts = subItems.map((subItem, index) => (\n <\\/p>/g, '');\n //editor.insertHtml(evt.data.dataValue); return false;\n setTimeout(function () {\n CKEDITOR.instances.cmsCurrentEditor.setData(CKEDITOR.instances.cmsCurrentEditor.getData());\n }, 100);\n }, null, null, 9);\n }\n\n close($editor = null) {\n const CKEDITOR = window['CKEDITOR'] || {};\n //console.log('ckeditor close');\n if (typeof CKEDITOR.instances.cmsCurrentEditor != \"undefined\")\n CKEDITOR.instances.cmsCurrentEditor.destroy();\n\n //for (var instance in CKEDITOR.instances) {\n // CKEDITOR.instances[instance].destroy();\n //}\n\n }\n}\n","import { CmsRadioSender } from './cms-radio-sender'\nimport { CmsRadioReceiver } from './cms-radio-receiver'\nimport { CmsHtmlEditor } from './cms-html-editor'\nimport env from '../../env';\n\n// declare var CKEDITOR: any;\n// import * as $ from 'jquery';\n\n\nexport class CmsPageController {\n settings;//: any;\n sender;//: CmsRadioSender;\n receiver;//: CmsRadioReceiver;\n htmlEditor;//: CmsHtmlEditor;\n\n constructor() {\n this.settings = { root: \"body\", viewOnly: false };\n this.sender = new CmsRadioSender(this);\n this.receiver = new CmsRadioReceiver(this);\n this.htmlEditor = new CmsHtmlEditor(env.cmsEndpoint, this.sender);\n }\n init(options) {\n const $ = window['jQuery'];\n this.settings = Object.assign({}, /*default*/{ root: \"body\", viewOnly: false }, options);\n this.initGlobalVars();\n\n var self = this;\n $(\"[onclick]\").prop(\"onclick\", null);\n $(\"[dblclick]\").prop(\"dblclick\", null);\n $(self.settings.root).off(\"click dblclick\", \"*\");\n $(self.settings.root).on(\"click dblclick\", \"*\", function (e) {\n //$(\".cms_html_editor_img_selected\").removeClass(\"cms_html_editor_img_selected\");\n // console.log($(e.target).hasClass(\"allowClick\"));\n // console.log(e.target);\n\n if (!$(e.target).hasClass(\"allowClick\")) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n if ($(this).attr(\"contenteditable\") === \"true\" ||\n $(\"#cms_html_editor_source_id\").is(\":visible\")) {\n e.stopPropagation();\n return;\n }\n if (!self.settings.viewOnly)\n self.selectItem($(this), false, e.type === \"dblclick\");\n\n //Add noreferrer noopener when new window\n $(\"#cke_108_select\").change(function() {\n let _value = $(this).val();\n $(\"#cke_215_textInput\").val(\"\");\n if(_value === \"_blank\"){\n $(\"#cke_215_textInput\").val(\"noreferrer noopener\");\n }\n });\n\n });\n\n if (self.settings.viewOnly) return; // stop the editing logic for viewonly mode.\n\n // ctrl + s for html block\n $(self.settings.root).on('keydown', \"#cmsCurrentEditor\", function (e) {\n if (e.ctrlKey && e.which === 83) {\n //var itemId = $(this).data(\"cms-item-id\");\n //if (!itemId)\n // itemId = $(this).closest(\"[data-cms-item-id]\").data(\"cms-item-id\");\n //window.parent.cms.site.saveHtml(itemId);\n //e.preventDefault();\n\n self.sender.saveAllDirtyHtml(self.getAllDirtyHtml());\n return false;\n }\n });\n }\n\n selectItemFromController(id) {\n const $ = window['jQuery'];\n var item = $(\".cms_item[data-cms-item-id='\" + id + \"']\");\n this.scrollTo(item);\n this.selectItem(item, true);\n }\n\n selectItem($item, fromController, doubleclicked = false) {\n //console.log(\"select item - \" + fromController + \" - \" + doubleclicked);\n //console.log($item);\n var editor = $item.closest(\"[contenteditable]\");\n if (editor.length > 0)\n return;\n var cke_top = $item.closest(\".cke_top\");\n if (cke_top.length > 0)\n return;\n\n this.closeEditingItem();\n //console.log($item);\n if (typeof $item === \"undefined\") return;\n if ($item.length === 0) return;\n this.findItem($item, fromController, 0, doubleclicked);\n }\n\n closeEditingItem() {\n const $ = window['jQuery'];\n //console.log(\"close editing item\");\n $(\"[contenteditable]\").removeAttr(\"contenteditable\");\n $(\"#cms_hovermenu\").remove();\n $(\".cms_editing_item\").removeClass(\"cms_editing_item\");\n\n }\n\n findItem($item, fromController, depth, doubleclicked) {\n if (depth > 100) return false;\n // console.log($item, fromController, depth, doubleclicked)\n if (typeof $item.attr(\"data-cms-html\") !== \"undefined\" && $item.attr(\"data-cms-html\") === \"true\") {\n $item.attr(\"contenteditable\", \"true\");\n this.showHtmlEditor($item);\n }\n if (typeof $item.attr(\"data-cms-item-id\") !== \"undefined\") {\n //$item.attr(\"contenteditable\", \"true\");\n $item.addClass(\"cms_editing_item\");\n if (!fromController) {\n //window.parent.cms.site.selectControllerItem($item.attr(\"data-cms-item-id\"),\n // typeof doubleclicked != \"undefined\" && doubleclicked == true\n //);\n this.sender.selectControllerItem({\n id: $item.attr(\"data-cms-item-id\"),\n openEdit: typeof doubleclicked !== \"undefined\" && doubleclicked === true\n });\n\n }\n\n //show_hovermenu($item);\n\n } else {\n var editableParent = $item.parents(\".cms_item[data-cms-item-id], [data-cms-html]\");\n if (editableParent.length > 0)\n this.findItem(editableParent.first(), fromController, depth + 1, doubleclicked);\n\n }\n }\n\n sameContent(a, b) {\n return a === b;\n }\n\n showHtmlEditor($item) {\n const $ = window['jQuery'];\n var editor = $item;\n //console.log(editor);\n //var $menu = $(\"#cms_html_editor_ctrl\");\n ////$menu.css(\"top\", $item.offset().top - 40);\n ////$menu.css(\"left\", $item.offset().left);\n //$menu.show();\n //initHtmlEditor($item);\n\n if (editor.attr(\"id\") === \"cmsCurrentEditor\") return;\n\n $(\"#cmsCurrentEditor\").attr(\"id\", \"\");\n this.htmlEditor.close(editor);\n\n editor.attr(\"id\", \"cmsCurrentEditor\");\n //editor.data(\"current-content\", editor.html());\n\n this.htmlEditor.show(editor);\n //setHandlers($item);\n\n }\n\n\n initGlobalVars() {\n const $ = window['jQuery'];\n window[\"cmsPage\"] = $.extend({}, window[\"cmsPage\"] || {}, {\n htmleditor: {\n // cmsPage.htmleditor.getAnchors();\n getAnchors: function (opt) {\n //var options = $.extend({}, opt);\n //console.log(options);\n var anchors = [];\n\n $(\"a[name]\").each(function (inx, obj) {\n anchors.push({ id: $(obj).attr(\"id\"), name: $(obj).attr(\"name\") });\n });\n\n $(\"[data-cms-item-name],[data-cms-anchor]\").each(function (inx, obj) {\n if (typeof $(obj).attr(\"data-cms-anchor\") !== \"undefined\" && $(obj).attr(\"data-cms-anchor\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-anchor\") });\n } else if ($(obj).attr(\"data-cms-item-name\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-item-name\") });\n }\n });\n\n return anchors;\n }\n }\n });\n }\n\n scrollTo(target) {\n const $ = window['jQuery'];\n if (typeof target === \"undefined\") return;\n if ($(target).length === 0) return;\n var htmlbody = $('html,body');\n var top = 0;\n if ($(target).height() > $(window).height())\n top = $(target).offset().top;\n else {\n top = $(target).offset().top - Math.floor(($(window).height() - $(target).height()) / 2);\n }\n //console.log(top);\n //htmlbody.animate({ scrollTop: top }, 500, 'easeInOutQuint');\n htmlbody.animate({ scrollTop: top }, 500);\n }\n\n getCurrentHtml() {\n const CKEDITOR = window['CKEDITOR'] || {};\n try {\n return CKEDITOR.instances.cmsCurrentEditor.getData();\n } catch (e) { return \"\"; }\n }\n\n getAllDirtyHtml() {\n const $ = window['jQuery'];\n var self = this;\n var htmlChanges = [];\n $(\".dirtyHtml\").each(function (inx, obj) {\n var $section = $(obj);\n var content = $section.is(\"#cmsCurrentEditor\") ? // if the html editor is active, it needs to get the html from the editor.\n self.getCurrentHtml() : $section.html();\n if ($section.is(\"[data-cms-section-id]\")) {\n // section level?\n let $item = $section.closest(\"[data-cms-item-id]\");\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: $section.data(\"cms-section-id\"), Content: content });\n } else if ($section.is(\"[data-cms-item-id]\")) {\n // section level?\n let $item = $section;\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: \"Content\", Content: content });\n }\n });\n return htmlChanges;\n }\n\n getHtml(itemid: any) {\n const $ = window['jQuery'];\n this.htmlEditor.close();\n var self = this;\n var item = $(\".cms_item[data-cms-item-id='\" + itemid + \"']\");\n\n var formvals = { Content: this.cms_replace_item_html(item) };\n\n //cms_msg_progressing(\"#save_message\", \"Saving...\");\n if ($(\"[data-cms-section-id]\", item).length > 0) {\n $(\"[data-cms-section-id]\", item).each(function (inx, section) {\n var closestItemId = $(section).closest(\".cms_item\").data(\"cms-item-id\");\n if (closestItemId === itemid) {\n var id = $(section).attr(\"data-cms-section-id\");\n formvals[id] = self.cms_replace_item_html($(section)); //.find(\">:first-child\")().html();\n\n }\n });\n }\n return formvals;\n }\n\n cms_replace_item_html(item) {\n return item.html();\n // var $tmp = $(\"
\").html(item.html());\n // if ($tmp.find('.cms-skeleton').length > 0)\n // return $tmp.find('.cms-skeleton').html();\n // else\n // return item.html();\n //tmp.find(\".cms_ctrl_in_editor\").each(function (inx, obj) {\n // var ctrlid = $(obj).attr(\"data-cms-ctrl-id\");\n // $(obj).replaceWith(\"__cms__ctrl:\" + ctrlid + \"__\");\n //});\n //return tmp.html();\n }\n\n}\n","import React, { useEffect } from 'react';\nimport { useRouter } from '../../../components';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport env from '../../../env';\nimport { loadJs } from '../../../lib/net-loader';\nimport { CmsPageController } from '../../services/cms-page-controller';\nimport { ErrorPopup, Loading } from '../../../components';\n\n// function useQuery() {\n// return new URLSearchParams(useLocation().search);\n// }\n\nexport function EditPage(props) {\n //const [page, setPage] = useState(null);\n\n //const pageId = props.pageId;\n const { query } = useRouter();\n const { cmsViewMode = 'edit', id, publishVer, editVer } = query;\n const pageId = id;\n\n //console.log(pageId, cmsViewMode, env.apiBase, env)\n\n const get = useGet();\n useEffect(() => {\n get.send(env.apiBase + '/api/cms/GetPage/' + pageId + '?cmsViewMode=' + cmsViewMode\n + (publishVer ? '&publishVer=' + publishVer : '')\n + (editVer ? '&editVer=' + editVer : '')\n );\n // eslint-disable-next-line\n }, [pageId]);\n\n if (get.loading()) {\n return\n {sectionItems}\n
\n );\n}\n\n\nfunction Section(props) {\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n - \n {subItemsElts}\n
\n // onCloseMenu()}>\n // Wholesale Dashboard\n // \n //
\n // )\n\n // if(state.authCheck && state.authCheck === true){\n // return(\n // \n // onCloseMenu()}>\n // Wholesale Dashboard\n // \n //
\n // )\n // }\n // return null;\n\n return(\n \n onCloseMenu()}>\n Wholesale Dashboard {state.userFirstName && state.userFirstName !== '' && (\" - Welcome, \" + state.userFirstName)}\n \n
\n )\n}","import { css } from '@emotion/core';\nimport { mq } from '../../cssInJs';\nexport default {\n button: css(mq({\n position: 'absolute',\n left: '1rem',\n // lineHeight: '1.6rem',\n display: 'flex',\n alignItems: 'center',\n color: '#ddd',\n fontSize: ['20px', null, '30px'],\n '&:hover': {\n textDecoration: 'none'\n }\n })),\n back_text: css(mq({\n fontSize: '14px',\n }))\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { SiteLink } from '../../components';\nimport { FaAngleLeft } from 'react-icons/fa';\nimport { useHistoryStore } from '../../components';\nimport style from './backButtonStyle';\n\nexport function BackButton(props) {\n\n const history = useHistoryStore();\n\n function goBack(e) {\n history.pop();\n }\n\n if (history.last()) {\n return (\n
\n \n
\n \n \n
\n \n \n {\n setInfo({ ...info, openInput: !info.openInput });\n }} />\n
\n \n \n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\n\nimport { useState, Fragment } from \"react\";\nimport { SiteLink } from \"../../components\";\nimport { useScrollPosition } from \"@n8tb1t/use-scroll-position\";\nimport { NavBar } from \"./navBar\";\nimport { BackButton } from \"../backButton/backButton\";\nimport { Hamburger } from \"../hamburger/hamburger\";\nimport style from \"./topHeaderStyle\";\n//import { MdAddShoppingCart } from \"react-icons/md\";\n//import { useStore } from \"../../store\";\nimport { SearchButton } from \"../searchButton/searchButton\";\nimport { CartButton } from \"../cartButton/cartButton\";\n\nexport function TopHeader(props) {\n const [menuOpened, setMenuOpened] = useState(false);\n const [scrolled, setScrolled] = useState(false);\n //const { state } = useStore();\n\n useScrollPosition(\n ({ prevPos, currPos }) => {\n //console.log(currPos.x)\n //console.log(currPos.y);\n if (currPos.y > 90) {\n setScrolled(true);\n } else {\n setScrolled(false);\n }\n //setScrolled(currPos.y > 90)\n },\n [],\n null,\n true\n );\n\n function toggleMenu(e) {\n setMenuOpened(!menuOpened);\n }\n\n function onCloseMenu() {\n setMenuOpened(false);\n }\n function backTop() {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n return (\n \n {state.cartInfo ? state.cartInfo : 0} \n
\n \n
\n\n */}\n\n \n {state.addToQuote ? state.addToQuote : 0}\n
\n \n
\n
\n
*/}\n \n
\n
\n
\n {link.title}
\n \n \n ));\n\n return (\n <>\n \n \n );\n}\n","import React from 'react';\nimport { useStore } from '../../store';\nimport FsLightbox from 'fslightbox-react';\n\nexport function CommonVideoPopup(props) {\n const { state } = useStore();\n\n const [toggler, setToggler] = React.useState(false);\n const [sources, setSources] = React.useState([]);\n const [popupIndex, setPopupIndex] = React.useState(0);\n\n const popup = state.popup;\n //console.log(popup, JSON.stringify((popup && popup.sources) || []), JSON.stringify(sources), (popup && popup.popupIndex), popupIndex)\n if (JSON.stringify((popup && popup.sources) || []) !== JSON.stringify(sources) ||\n ((popup && popup.popupIndex) || 0) !== popupIndex) {\n setSources(popup.sources);\n setPopupIndex(popup.popupIndex);\n setTimeout(() => { setToggler(!toggler) }, 10)\n } else {\n\n }\n //console.log(toggler, popupIndex, sources)\n return (\n \n {\n }}\n />\n
\n\n );\n}","import React from \"react\";\nimport { useRouter } from \"./components\";\nimport { useHistoryStore } from \"./components\";\nimport { useParallax } from \"./components\";\nimport utils from \"./utils\";\n// import debounce from \"lodash/debounce\";\n\nexport function AppRouteChanged() {\n const { path } = useRouter();\n const parallax = useParallax();\n const history = useHistoryStore();\n\n React.useLayoutEffect(() => {\n //console.log('route changed', path)\n // const scrolled = debounce((e) => saveScrollPosition(e, path), 100)\n\n history.push({ path: path });\n if (typeof window !== `undefined`) {\n parallax.reset();\n\n const pos = getPreviousPostition(path);\n // console.log('pos', pos)\n if (pos) {\n setTimeout(() => {\n window.scrollTo(pos.scrollLeft, pos.scrollTop);\n }, 500);\n } else {\n const hash = window.location.hash;\n if (hash) {\n setTimeout(() => {\n const anchor = utils.ui.findElement(hash);\n if (anchor) utils.ui.scrollTo(anchor, 500);\n }, 500);\n } else {\n window.scrollTo(0, 0);\n }\n }\n }\n\n // document.body.style.overflow = \"unset\";\n // window.addEventListener('scroll', scrolled);\n // return () => {\n // window.removeEventListener('scroll', scrolled)\n // }\n\n // eslint-disable-next-line\n }, [path]);\n\n return null;\n}\n\n//#region scroll position store\n\n// function saveScrollPosition(e, path) {\n// if (typeof window === `undefined`) return;\n// const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft\n// const scrollTop = window.pageYOffset || document.documentElement.scrollTop\n// // console.log('save position', path, scrollTop, scrollLeft)\n// setPositionData(path, scrollLeft, scrollTop)\n// }\n\nfunction getPreviousPostition(path) {\n const dataArr = getPositionData() || [];\n // console.log(dataArr.length)\n const pos = getPreviousPostitionInArray(dataArr, path);\n return pos;\n}\n\nfunction getPositionData() {\n const dataStr = localStorage.getItem(\"scrollPosRouter\");\n // console.log(dataStr)\n if (dataStr) {\n let data;\n try {\n data = JSON.parse(dataStr);\n } catch (e) {\n return null;\n }\n return data;\n }\n return null;\n}\n\n// function setPositionData(path, scrollLeft, scrollTop) {\n// const dataArr = getPositionData() || []\n// setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop)\n// // console.log(dataArr)\n// localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr))\n// }\n\n// const MAX_SIZE = 5\n// function setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop) {\n// const same = dataArr.length > 0 && dataArr[dataArr.length - 1].path === path\n// if (same) {\n// const found = dataArr[dataArr.length - 1]\n// found.scrollLeft = scrollLeft\n// found.scrollTop = scrollTop\n// found.ts = new Date()\n// } else {\n// if (dataArr.length >= MAX_SIZE) dataArr.shift()\n// dataArr.push({\n// path: path,\n// scrollLeft: scrollLeft,\n// scrollTop: scrollTop,\n// ts: new Date()\n// })\n// }\n// }\n\nfunction getPreviousPostitionInArray(dataArr, path) {\n const foundIndex = findIndexReverse(dataArr, (x) => x.path === path);\n // console.log(foundIndex, dataArr.length - 1)\n if (foundIndex >= 0 && foundIndex >= dataArr.length - 2) {\n // remove after the index\n if (foundIndex < dataArr.length - 1) {\n dataArr.splice(foundIndex + 1);\n localStorage.setItem(\"scrollPosRouter\", JSON.stringify(dataArr));\n }\n return dataArr[foundIndex];\n }\n return null;\n}\n\nfunction findIndexReverse(list, fn) {\n if (!list) return -1;\n for (let i = list.length - 1; i >= 0; i--) {\n if (fn(list[i])) {\n return i;\n }\n }\n return -1;\n}\n//#endregion\n","import React, { useState, useEffect } from 'react';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport { NotFound } from '../../../components';\nimport env from '../../../env';\nimport { useStore } from '../../../store';\nimport { ErrorPopup, Loading } from '../../../components';\n\nconst log = (...args) => {\n //console.log(args);\n}\nconst areEqual = (prevProps, nextProps) => {\n return (prevProps.pageData === nextProps.pageData)\n};\nconst PageMemo = React.memo(Page, areEqual)\n\nexport function ViewPartial({pageOptions = null}) {\n const { dispatch } = useStore();\n const [pageLoaded, setPageLoaded] = useState(false);\n const [data, setData] = useState(null);\n //const path = usePath();\n //log('view page', path);\n const pathname = '/partials/common-footer';\n\n const get = useGet();\n log('0. viewpage ready');\n\n useEffect(() => {\n log('*. start loading')\n setPageLoaded(false);\n get.send(env.apiBase + \"/api/cms/GetPublishedPage?path=\" + pathname);\n // eslint-disable-next-line\n }, [pathname]);\n\n useEffect(() => {\n if (data){\n dispatch({ type: 'SET_PAGE', payload: data.data })\n dispatch({ type: 'SET_MENU', payload: data.menu })\n }\n // eslint-disable-next-line\n }, [data]);\n\n if (get.loading()) {\n return No product found.
;\n return (\n \n
\n )}\n \n \n \n {/* {slides} */}\n\n {utils.site.isMobile() ? (\n {slides} \n ) : (\n \n {slides}\n
\n )}\n \n \n\n \n \n
\n\n {product.description && (\n \n )}\n\n {heroImage && heroImage.imageUrl && (\n \n \n\n \n Add to favorites\n {\n setFavorite((pre) => {\n let _localStorageFavorites =\n localStorage.favorites.replace(\n product.productId + \"|\",\n \"\"\n );\n let _new = !pre;\n if (_new === true) {\n _localStorageFavorites =\n _localStorageFavorites + product.productId + \"|\";\n }\n localStorage.setItem(\n \"favorites\",\n _localStorageFavorites\n );\n return _new;\n });\n }}\n >\n
\n\n \n \n openPopupImage(heroImage.imageUrl)}\n />\n
\n\n {allPhotos && allPhotos.length > 1 && (\n \n \n {product.productName}\n \n\n \n {product.shortDesc}\n
\n\n \n {\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n // addToQuoteFunction('get_quote');\n }}\n >\n {\" \"}\n GET QUOTE{\" \"}\n \n {/* {\n addToQuoteFunction();\n }}\n >\n {' '}\n
\n )}\n\n {product.productStatus === 1 && (\n \n )}\n\n {product.productStatus === 98 && (\n \n )}\n \n \n {/* \n// {\n// _variantAttributes.map((item, index) => {\n// return (\n//
\n// )\n// }\n\nfunction PdfViewItem({\n pdfViewPath,\n pdfViewNumPages,\n pdfViewWidth,\n pdfViewScale,\n onDocumentLoadSuccess,\n closePdfViewer,\n changePdfViewScale,\n}) {\n const abc = (event) => {\n if (event.scale !== 1) {\n event.preventDefault();\n }\n };\n\n useEffect(() => {\n document.addEventListener(\"touchmove\", abc, { passive: false });\n return () => {\n document.removeEventListener(\"touchmove\", abc, { passive: false });\n };\n }, []);\n\n return (\n \n//
\n// )\n// })\n// }\n// \n// {item.name}\n//
\n// \n// {\n// item.options.map((sItem, sIndex) => {\n// return (\n//
\n// \n// {sItem.value}\n//
\n// )\n// })\n// }\n// \n \n \n {\" \"}\n DOWNLOAD{\" \"}\n \n )}\n\n {pdfViewNumPages && (\n \n {\" \"}\n - / +{\" \"}\n
\n )}\n \n \n CLOSE\n
\n {pdfViewNumPages && (\n \n
\n \n {\n pdfViewNumPages &&\n \n {\n pdfViewNumPages.map((item, index) => {\n return (\n \n {\n item.items.map((sItem, sIndex) => {\n return (\n \n \n )\n })\n }\n \n )\n })\n }\n
\n } */}\n\n {(sItem + 1) + ' of ' + item.numPages}
\n \n//
\n// }\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './productViewStyle';\nimport { getEnquiryFormModel } from './enquiryFormModel';\nimport { Button, ErrorMessage, usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { useState } from 'react';\nimport { useStore } from '../../../store';\nimport env from '../../../env';\n\nexport function EnquiryFormView(props) {\n\n const enquiryFormModel = getEnquiryFormModel({});\n const enquiryForm = useForm(enquiryFormModel, { usePlaceholder: true });\n const enquiryFormRender = (name) => enquiryForm.renderControl(name, null);\n const post = usePost();\n const { dispatch } = useStore();\n const [enquiryItems, setEnquiryItems] = useState(() => {\n const _result = [];\n let cookieValue = document.cookie.split(\"; \").find((row) => row.startsWith(\"add_to_quote=\"))?.split(\"=\")[1];\n if (cookieValue && cookieValue !== '') {\n const _value = cookieValue.split(\"|\");\n _value.forEach(el => {\n const _item = el.split(\"::\");\n _result.push({\n productId: _item[0],\n productImg: _item[1],\n productName: _item[2],\n productVal: _item[3],\n uniqueId: _item[4],\n enquiryFormQty: _item[5]\n });\n });\n }\n\n console.log(\"_result\", _result);\n\n return _result;\n });\n\n const [sendingStatus, setSendingStatus] = useState(null);\n\n function onSubmit(e) {\n enquiryForm.validateForm(e, () => {\n const value = { ...enquiryForm.getValue(), enquiryItems: enquiryItems, emailReceiver: '' };\n\n var formData = new FormData();\n formData.append('jsonData', JSON.stringify(value));\n post.sendFormData(env.apiBase + \"/api/cart/sendenquire\", formData);\n setSendingStatus('pending');\n\n });\n }\n\n function removeEnquiryItem(uniqueId) {\n const _fi = enquiryItems.filter((x) => {\n return x.uniqueId !== uniqueId;\n });\n\n dispatch({ type: 'SET_STATE', payload: { addToQuote: _fi.length } });\n\n let _cookie = \"\";\n for (let i in _fi) {\n if (i > 0) {\n _cookie = _cookie + \"|\";\n }\n _cookie = _fi[i].productId + \":\" + _fi[i].productImg + \":\" + _fi[i].productName;\n }\n document.cookie = `add_to_quote=${_cookie}; expires=Session; path=/`;\n setEnquiryItems(_fi);\n }\n\n if (post.done() && sendingStatus === 'pending' && !post.hasErrors()) { \n\n setTimeout(() => {\n dispatch({ type: 'SET_STATE', payload: { addToQuote: 0 } });\n props.closeAddEnquiryForm();\n }, 500);\n\n document.cookie = `add_to_quote=${''}; expires=Session; path=/`;\n document.body.style.overflow = \"unset\";\n post.reset();\n }\n\n return (\n Why not add a small gift?
\n//\n// {products.map((product, index) =>\n// \n// )}\n//
\n// \n \n\n
\n )\n\n}","import { mq } from '../../../cssInJs'\n\nexport default {\n orderDetails: {\n textAlign: 'left',\n marginBottom: '3rem',\n paddingLeft: '1rem',\n paddingRight: '1rem',\n paddingBottom: '2rem'\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 { useGet } from \"../../../components\";\nimport { Loading, ErrorPopup } from \"../../../components\";\nimport { useRouter } 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 const { dispatch } = useStore();\n\n React.useEffect(() => {\n env.setDevCartId(null);\n get.send(env.apiBase + \"/api/order/getPaidOrder/\" + o);\n dispatch({ type: \"SET_STATE\", payload: { cartInfo: 0 } });\n\n // eslint-disable-next-line\n }, []);\n\n if (get.loading()) {\n return ;\n}\n\nfunction Details({ order }) {\n const orderItems = order.orderItems.filter((x) => x.orderItemType === 0);\n // const taxLines = order.orderItems.filter((x) => x.orderItemType === 1);\n\n function itemAmount(orderItem) {\n return (\n (orderItem.unitPrice * 100 +\n (orderItem.addedUnitPrice ? orderItem.addedUnitPrice * 100 : 0) -\n (orderItem.discountUnitPrice ? orderItem.discountUnitPrice * 100 : 0)) /\n 100\n );\n }\n // function itemTotalAmount(orderItem) {\n // return (orderItem.quantity * (orderItem.unitPrice * 100 + orderItem.addedUnitPrice * 100 - orderItem.discountUnitPrice * 100)) / 100;\n // }\n\n return (\n
\n
\n
\n\n
\n ))}\n\n \n
\n
\n \n
\n \n {\" \"}\n {order.orderNo}{\" \"}\n
\n \n {\" \"}\n \n AU {utils.money.formatMoney(order.totalAmount)}\n {\" \"}\n
\n \n {\" \"}\n \n {utils.date.formatYYYYMMDD(order.orderDate)}\n {\" \"}\n
\n \n\n
ITEMS
\n\n {orderItems.map((orderItem, i) => (\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 {/* {taxLines.map((orderItem, index) => \n Shipping Fee:
\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 GST: GST included in price
\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{order.shippingMethod}
\n {order.shippingAddress && order.shippingMethod === \"Standard\" && (\n \n )}\n \n
\n
\n );\n}\n\nfunction Billing(props) {\n const billingAddr = props.billingAddr;\n const useSameAddress = props.useSameAddress;\n return (\n \n
\n {\" \"}\n SHIPPING ADDRESS{\" \"}\n
\n\n {\" \"}\n {addr.firstName}{\" \"}\n
\n {/* \n {\" \"}\n {addr.surname}{\" \"}\n
*/}\n \n \n {addr.street1}\n \n {addr.street2}\n \n
\n \n {\" \"}\n {addr.suburb}{\" \"}\n
\n \n {\" \"}\n {addr.state}{\" \"}\n
\n \n {\" \"}\n {addr.postcode}{\" \"}\n
\n \n {\" \"}\n {addr.email}{\" \"}\n
\n \n {\" \"}\n {addr.mobile}{\" \"}\n
\n \n
\n\n \n )}\n
\n );\n}\n","import { mq, variables } from '../../../cssInJs';\n\nexport default {\n dash_board_banner : mq({\n backgroundImage: 'url(\"/sites/anfc/media/misc/native-food-in-jars.jpg\")',\n height: ['92px', null, '207px'],\n }),\n dash_board_menus : {\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'center',\n alignItems: 'center'\n },\n dash_board_menu : {\n //margin: '0.5rem',\n padding: '0.5rem',\n flex : '1 0 33.3%',\n maxWidth: '33.3%',\n textAlign: 'center',\n fontWeight: 600,\n fontSize: '1.2rem',\n '&.selected' : {\n backgroundColor: '#464934',\n color : 'white'\n },\n '.dash_board_menu_item' : {\n cursor: 'pointer'\n },\n 'svg' : {\n marginBottom: '5px'\n }\n },\n\n order_list : {\n display: 'flex',\n flexDirection: 'row',\n flexWrap : 'wrap'\n },\n order_list_item : {\n padding : '0.5rem 0rem',\n flex : '1 0 100%',\n maxWidth: '100%',\n '.order_list_item_container' : {\n //cursor: 'pointer',\n //backgroundColor: 'white',\n //padding : '1rem',\n display : 'flex',\n //flexDirection: 'column',\n flexWrap : 'wrap',\n 'div' : {\n paddingLeft: '0.5rem',\n paddingRight: '0.5rem',\n flex : '1 0 33.3%',\n maxWidth : '33.3%'\n }\n },\n 'label' : {\n marginBottom : '0rem'\n },\n '.order_list_item_order_no' : {\n //cursor: 'pointer',\n fontWeight : 700,\n transition: 'all .2s ease-in-out', \n 'a:hover' : {\n //fontWeight : 700\n color: variables.colorLightGreen\n }\n }\n },\n\n h_3 : {\n fontFamily: variables.familyBase\n }\n}","import { fb, validators } from \"../../../lib/form\";\n\nconst countryList = [{ name: \"Australia\", value: \"Australia\" }];\n\nconst businessCategories = [\n { name: \"Retail Storefront\", value: \"Retail Storefront\" },\n { name: \"Retail Online Only\", value: \"Retail Online Only\" },\n { name: \"Hospitality\", value: \"Hospitality\" },\n { name: \"Gift Store\", value: \"Gift Store\" },\n { name: \"Wholesaler\", value: \"Wholesaler\" },\n];\n\nconst estimatedSpendList = [\n { name: \"$0-$200 per month\", value: \"$0-$200 per month\" },\n { name: \"$201-$500 per month\", value: \"$201-$500 per month\" },\n { name: \"$501-$1000 per month\", value: \"$501-$1000 per month\" },\n { name: \"$1000+ per month\", value: \"$1000+ per month\" },\n];\n\nexport function getWholesaleRegisterModel(data) {\n\n const model = fb.group({\n billingAddress: address(data.billingAddress, data.checkReadOnly),\n shippingAddress: addressS(data.shippingAddress, data.checkReadOnly),\n\n firstName: [\n data.firstName || \"\",\n [validators.Required()],\n {\n label: \"Authorised Contact:\",\n type: \"text\",\n forceUsePlaceholder: \"First Name\",\n attrs: { readOnly: data.checkReadOnly ? data.checkReadOnly : false },\n },\n ],\n lastName: [\n data.lastName || \"\",\n [validators.Required()],\n {\n label: \"Last Name\",\n type: \"text\",\n style: { className: \"last_name\" },\n forceUsePlaceholder: \"Last Name\",\n attrs: { readOnly: data.checkReadOnly ? data.checkReadOnly : false },\n },\n ],\n email: [\n data.email || \"\",\n data.hideTermsAndConditions && data.hideTermsAndConditions === true\n ? []\n : [validators.Required()],\n {\n label: \"Email\",\n type: \"email\",\n forceUsePlaceholder: \"Enter Email\",\n attrs: { readOnly: data.checkReadOnly ? data.checkReadOnly : false },\n },\n ],\n password: [\n data.email || \"\",\n data.hideTermsAndConditions && data.hideTermsAndConditions === true\n ? []\n : [validators.Required()],\n { label: \"Password\", type: \"password\", forceUsePlaceholder: \"Password\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n businessPhone: [\n data.businessPhone || \"\",\n [validators.Required()],\n { label: \"Business Phone:\", type: \"text\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n\n mobilePhone: [\n data.mobilePhone || \"\",\n [validators.Required()],\n { label: \"Mobile Phone:\", type: \"text\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n\n businessName: [\n data.businessName || \"\",\n [validators.Required()],\n { label: \"Business Name:\", type: \"text\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n\n abn: [\n data.abn || \"\",\n [validators.Required()],\n { label: \"ABN:\", type: \"text\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n\n acn: [\n data.acn || \"\",\n [],\n { label: \"ACN:\", type: \"text\", attrs : {readOnly : data.checkReadOnly ? data.checkReadOnly : false } },\n ],\n\n useSameAddress: [\n data.useSameAddress || true,\n [],\n { label: `Same as Business Address`, type: \"checkbox\", attrs : {disabled : data.checkReadOnly ? data.checkReadOnly : false } }\n ],\n\n businessCategory: [\n data.businessCategory || \"Retail Storefront\",\n [validators.Required()],\n {\n label: \"Business Category:\",\n type: \"select\",\n options: businessCategories,\n style: { inline: true },\n attrs : {disabled : data.checkReadOnly ? data.checkReadOnly : false }\n },\n ],\n estimatedSpend: [\n data.estimatedSpend || \"Retail Storefront\",\n [validators.Required()],\n {\n label: \"Estimated Spend:\",\n type: \"select\",\n options: estimatedSpendList,\n style: { inline: true },\n attrs : {disabled : data.checkReadOnly ? data.checkReadOnly : false }\n },\n ],\n checkConditions: [\n data.checkConditions || false,\n data.hideTermsAndConditions && data.hideTermsAndConditions === true\n ? []\n : [validators.Required()],\n {\n label: `I agree to the website terms and conditions.`,\n type: \"checkbox\",\n },\n ],\n checkToUpdateForm: [\n data.checkToUpdateForm || true,\n [],\n {\n label: `Check to update form`,\n type: \"checkbox\",\n },\n ],\n });\n return model;\n}\n\nexport function address(model, checkReadOnly) {\n const data = model || {};\n return fb.group({\n addressFirstName: [\n data.addressFirstName || \"\",\n [validators.Required()],\n {\n label: \"Billing Contact:\",\n type: \"text\",\n forceUsePlaceholder: \"First Name\",\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n addressLastName: [\n data.addressLastName || \"\",\n [validators.Required()],\n {\n label: \"Billing Contact:\",\n type: \"text\",\n forceUsePlaceholder: \"Last Name\",\n style: { className: \"last_name\" },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n addressEmail: [\n data.addressEmail || \"\",\n [validators.Required(), validators.Email()],\n {\n label: \"Billing Email:\",\n type: \"email\",\n forceUsePlaceholder: \"Enter Email\",\n style: { className: \"last_name\" },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n address: [\n data.address || \"\",\n [validators.Required()],\n {\n label: \"Business Address:\",\n type: \"text\",\n forceUsePlaceholder: \"Street Address\",\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n city: [\n data.city || \"\",\n [validators.Required()],\n { label: \"City\", type: \"text\", attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n state: [\n data.state || \"\",\n [validators.Required()],\n { label: \"State / Province / Region\", type: \"text\",\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n postalCode: [\n data.postalCode || \"\",\n [validators.Required()],\n { label: \"ZIP / Postal Code\", type: \"text\", attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n country: [\n data.country || \"Australia\",\n [validators.Required()],\n {\n label: \"Country\",\n type: \"select\",\n options: countryList,\n style: { inline: true },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n });\n}\n\nexport function addressS(model, checkReadOnly) {\n const data = model || {};\n return fb.group({\n addressFirstName: [\n data.addressFirstName || \"\",\n [validators.Required()],\n {\n label: \"Shipping Contact:\",\n type: \"text\",\n forceUsePlaceholder: \"First Name\",\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n addressLastName: [\n data.addressLastName || \"\",\n [validators.Required()],\n {\n label: \"Shipping Contact:\",\n type: \"text\",\n forceUsePlaceholder: \"Last Name\",\n style: { className: \"last_name\" },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n addressEmail: [\n data.addressEmail || \"\",\n [validators.Required(), validators.Email()],\n {\n label: \"Shipping Email:\",\n type: \"email\",\n forceUsePlaceholder: \"Enter Email\",\n style: { className: \"last_name\" },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n\n address: [\n data.address || \"\",\n [validators.Required()],\n {\n label: \"Shipping Address:\",\n type: \"text\",\n forceUsePlaceholder: \"Street Address\",\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n city: [\n data.city || \"\",\n [validators.Required()],\n { label: \"City\", type: \"text\", attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n state: [\n data.state || \"\",\n [validators.Required()],\n { label: \"State / Province / Region\", type: \"text\", attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n postalCode: [\n data.postalCode || \"\",\n [validators.Required()],\n { label: \"ZIP / Postal Code\", type: \"text\", attrs : {readOnly : checkReadOnly ? checkReadOnly : false } }\n ],\n country: [\n data.country || \"Australia\",\n [validators.Required()],\n {\n label: \"Country\",\n type: \"select\",\n options: countryList,\n style: { inline: true },\n attrs : {readOnly : checkReadOnly ? checkReadOnly : false }\n },\n ],\n });\n}\n","import { mq, variables } from \"../../../cssInJs\"\n\nexport default {\n wholesale_register_form : {\n 'label' : mq({\n fontSize: ['1rem',null,'0.9rem']\n }),\n 'button' : {\n backgroundColor: '#8d2b01',\n borderColor: '#8d2b01',\n '&:hover' : {\n backgroundColor: '#5a1b00',\n borderColor: '#5a1b00',\n }\n }\n },\n h_3 : {\n fontFamily: variables.familyBase\n }\n}","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport { Fragment, useState } from \"react\";\nimport { getWholesaleRegisterModel } from \"./wholesaleRegisterModel\";\nimport { useForm } from \"../../../form\";\nimport style from \"./wholesaleRegisterStyle\";\nimport { Button, ErrorMessage } from \"../../../components\";\n\nexport function WholesaleRegisterView({ functionFrom, formData }) {\n const model = getWholesaleRegisterModel({ ...formData });\n const form = useForm(model, {\n usePlaceholder: false,\n onControlChanged: orderItemChanged,\n });\n //const post = usePost();\n const render = (name) => form.renderControl(name, null);\n const [sendingStatus, setSendingStatus] = useState(null);\n const [error, setError] = useState(\"\");\n const val = form.getValue();\n const billingInfo = form.model.find(\"billingAddress\");\n const shippingInfo = form.model.find(\"shippingAddress\");\n const checkToUpdateForm = form.model.find(\"checkToUpdateForm\").value;\n \n if (shippingInfo) {\n shippingInfo.disableValidators = val.useSameAddress;\n }\n billingInfo.disableValidators = false;\n\n function orderItemChanged(e, control) {\n if (control && control.name === \"checkToUpdateForm\") {\n const value = control.value;\n const model = getWholesaleRegisterModel({\n ...form.getValue(),\n checkReadOnly: !value,\n hideTermsAndConditions : (formData && formData.hideTermsAndConditions) ? formData.hideTermsAndConditions : false\n });\n form.reset(model);\n }\n }\n\n function onSubmit(e) {\n e.preventDefault();\n e.stopPropagation();\n\n // functionFrom({test : \"abcccc\"}).then(() => {\n // console.log(\"555555555555555\");\n // });\n\n form.validateForm(e, () => {\n setSendingStatus(\"pending\");\n const value = { ...form.getValue() };\n functionFrom(value).then((res) => {\n \n if(res && res.errors && res.errors.length > 0){\n setError(res.errors[0].errorMessage);\n } \n setSendingStatus(null);\n });\n });\n }\n\n return (\n \n
\n {\" \"}\n BILLING ADDRESS{\" \"}\n
\n {useSameAddress === true && Use the same address
}\n {billingAddr && useSameAddress === false && (\n \n {\" \"}\n {billingAddr.firstName}{\" \"}\n
\n {/* \n {\" \"}\n {billingAddr.surname}{\" \"}\n
*/}\n \n \n {billingAddr.street1} \n \n {\" \"}\n {billingAddr.street2}{\" \"}\n \n
\n \n {\" \"}\n {billingAddr.suburb}{\" \"}\n
\n \n {\" \"}\n {billingAddr.state}{\" \"}\n
\n \n {\" \"}\n {billingAddr.postcode}{\" \"}\n
\n \n {\" \"}\n {billingAddr.email}{\" \"}\n
\n \n {\" \"}\n {billingAddr.mobile}{\" \"}\n
\n \n
\n\n {render(\"firstName\")}
\n {render(\"lastName\")}
\n {formData.hideTermsAndConditions &&\n formData.hideTermsAndConditions === true ? null : (\n {render(\"email\")}
\n )} \n {formData.hideTermsAndConditions &&\n formData.hideTermsAndConditions === true ? null : (\n {render(\"password\")}
\n )}\n \n
\n\n {render(\"businessPhone\")}
\n {render(\"mobilePhone\")}
\n Business Details
\n\n\n
\n
\n\n \n\n {render(\"businessName\")}
\n {render(\"abn\")}
\n {render(\"acn\")}
\n Shipping/Postal Address:
\n\n
\n\n {!val.useSameAddress && (\n \n )}\n\n {render(\"useSameAddress\")}
\n \n
\n\n {formData.hideTermsAndConditions &&\n formData.hideTermsAndConditions === true ? null : (\n {render(\"businessCategory\")}
\n {render(\"estimatedSpend\")}
\n Terms and conditions
\n\n
\n {render(\"checkConditions\")}
\n \n
*/}\n\n {render(\"checkToUpdateForm\")}
\n \n
\n \n );\n}\n\nfunction Address({ form, addressModel }) {\n const render = (name) => form.renderControl(name, addressModel);\n return (\n \n
\n \n\n {checkToUpdateForm === true && (\n \n )}\n\n \n Successfully sent!\n \n )} */}\n
\n \n
\n\n {render(\"addressFirstName\")}
\n {render(\"addressLastName\")}
\n {render(\"addressEmail\")}
\n \n
\n\n {render(\"address\")}
\n \n
\n {render(\"city\")}
\n {render(\"state\")}
\n {render(\"postalCode\")}
\n {render(\"country\")}
\n \n \n \n {\n setCurrent(2);\n }}\n >\n
\n \n \n
\n \n \n {\n setCurrent(1);\n }}\n >\n
\n \n logOut(e)}\n >\n
\n \n \n\n {current === 1 && \n
\n );\n}\n\nfunction OrderListView({ data }) {\n const orders = data.orders;\n // const orders = [\n // {\n // orderNo: \"Test-V8720001\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720002\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720003\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720004\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720005\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720006\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720007\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720008\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V8720009\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V87200010\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V87200011\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V87200012\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // {\n // orderNo: \"Test-V87200013\",\n // totalAmount: 28.9,\n // orderDate: \"2023-11-27T11:08:27.022948+00:00\",\n // },\n // ];\n\n const [orderData, setOrderData] = useState();\n\n function addData() {\n const sliced = orders.slice(orderData.length, orderData.length + 10);\n sliced.forEach((el) => {\n orderData.push(el);\n });\n setOrderData([...orderData]);\n }\n\n useEffect(() => {\n if (orders.length > 0) {\n setOrderData(orders.slice(0, 10));\n } else {\n setOrderData([]);\n }\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n {orderData && orderData.length === 0 && (\n
\n );\n}\n\nfunction OrderListItem({ item }) {\n return (\n \n {\" \"}\n No orders\n
\n )}\n\n\n {orderData &&\n orderData.map((item, index) => (\n
\n {orderData && orders.length !== orderData.length && (\n \n \n
\n )}\n \n
\n );\n}\n","import { mq, variables } from \"../../../cssInJs\";\n\nexport default {\n order_detail_wholesale_user_banner: mq({\n backgroundImage:\n 'url(\"/sites/anfc/media/misc/native-food-in-jars.jpg\")',\n height: [\"92px\", null, \"207px\"],\n }),\n\n order_detail_wholesale_user_info: {\n backgroundColor: \"white\",\n paddingTop: \"0.5rem\",\n paddingBottom: \"0.5rem\",\n paddingLeft: '0.5rem',\n paddingRight: '0.5rem',\n \".row\": {\n marginLeft: \"0px\",\n marginRight: \"0px\",\n },\n label: {\n marginBottom: \"0rem\",\n },\n },\n\n go_button : {\n transition: 'all 0.2s ease-out',\n 'a:hover' : {\n color: variables.colorLightGreen\n }\n }\n \n};","/** @jsx jsx */\nimport { jsx } from \"@emotion/core\";\nimport { useState, useEffect, Fragment } from \"react\";\nimport {\n useRouter,\n Loading,\n ErrorMessage,\n SiteLink,\n} from \"../../../components\";\nimport { useAuth } from \"auth\";\nimport { getIdToken } from \"lib/auth/services/authHelper\";\nimport env from \"../../../env\";\nimport style from \"./style\";\nimport { ViewPartial } from \"../../../cms/pages/partials/viewPartial\";\nimport utils from \"../../../utils\";\n\nexport function WholeSaleDashBoardOrderView(props) {\n //const { query } = useRouter();\n const router = useRouter();\n const o = router.query.o || \"\";\n const auth = useAuth();\n const [order, setOrder] = useState();\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n \n useEffect(() => {\n const abortController = new AbortController();\n const signal = abortController.signal;\n\n const fetchData = async () => {\n const _user = await auth.loggedIn();\n\n if (!_user) {\n router.push(\"/member-login\");\n return;\n }\n\n const token = await getIdToken();\n const res = await fetch(\n env.apiBase + \"/api/order/getpaidorderforwholesaleuser/\" + o,\n {\n headers: { Authorization: `Bearer ${token}` },\n signal: signal,\n }\n );\n const data = await res.json();\n\n if (data && data.statusCode && data.statusCode === 500) {\n setError(data.message);\n }\n setOrder(data);\n setLoading(false);\n };\n fetchData();\n return function cleanup() {\n abortController.abort();\n };\n\n // eslint-disable-next-line\n }, []);\n\n if (loading) {\n return \n
\n \n \n Order Number: {item.orderNo}\n \n
\n \n Total Amount: \n \n AU {utils.money.formatMoney(item.totalAmount)}\n \n
\n \n Order Date: \n {utils.date.formatYYYYMMDD(item.orderDate)}\n
\n \n \n \n Go Wholesale Dashboard\n \n
\n\n \n
\n\n \n
\n \n {order.orderNo}\n
\n \n {\" \"}\n \n AU {utils.money.formatMoney(order.totalAmount)}\n {\" \"}\n
\n \n {\" \"}\n {utils.date.formatYYYYMMDD(order.orderDate)}{\" \"}\n
\n \n {orderItems.map((orderItem, i) => (\n
\n ))}\n\n \n
\n \n \n
\n \n
\n \n Unit Price:{\" \"}\n {utils.money.formatMoney(itemAmount(orderItem))}\n
\n Qty: {orderItem.quantity}
\n \n
\n\n {/* {taxLines.map((orderItem, index) => (\n Shipping Fee:
\n \n
\n \n {utils.money.formatMoney(order.shippingAmount)}\n
\n \n
\n ))} */}\n\n Tax: {orderItem.itemName}
\n \n
\n \n {utils.money.formatMoney(orderItem.unitPrice)}\n
\n \n
\n\n GST: GST included in price
\n \n
\n \n \n\n \n Total: AU {utils.money.formatMoney(order.totalAmount)}\n
\n {order.shippingMethod}
\n {order.shippingAddress && order.shippingMethod === \"Standard\" && (\n \n )}\n \n \n {\" \"}\n SHIPPING ADDRESS{\" \"}\n \n
\n );\n}\n\nfunction Billing(props) {\n const billingAddr = props.billingAddr;\n const useSameAddress = props.useSameAddress;\n return (\n \n {addr.firstName}{\" \"}\n
\n {/* \n {addr.surname}{\" \"}\n
*/}\n \n \n {addr.street1}\n {addr.street2}\n
\n \n {addr.suburb}{\" \"}\n
\n \n {addr.state}{\" \"}\n
\n \n {addr.postcode}{\" \"}\n
\n \n {addr.email}{\" \"}\n
\n \n {addr.mobile}{\" \"}\n
\n \n \n \n )}\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\";\n// import { IoReturnUpBack } from 'react-icons/io5';\n\nexport function ForgotPassword() {\n const [username, setUsername] = React.useState(\"\");\n const post = usePost();\n function onSubmit(e) {\n post.send(env.apiBase + \"/api/profile/sendpasswordresetemail\", {\n email: username,\n });\n }\n return (\n \n {\" \"}\n BILLING ADDRESS{\" \"}\n
\n {useSameAddress === true && Use the same address
}\n {billingAddr && useSameAddress === false && (\n \n {billingAddr.firstName}{\" \"}\n
\n {/* \n {billingAddr.surname}{\" \"}\n
*/}\n \n \n {billingAddr.street1} \n \n {\" \"}\n {billingAddr.street2}{\" \"}\n \n
\n \n {billingAddr.suburb}{\" \"}\n
\n \n {billingAddr.state}{\" \"}\n
\n \n {billingAddr.postcode}{\" \"}\n
\n \n {billingAddr.email}{\" \"}\n
\n \n {billingAddr.mobile}{\" \"}\n
\n \n \n \n
\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\";\n//import { 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 (\n Forgot Password
\n\n
\n \n \n
\n \n Go back to{\" \"}\n \n LOG IN\n \n
\n Reset Password
\n\n
\n\n \n \n
\n \n Go back to{\" \"}\n \n LOG IN\n \n
\n \n \n );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Redirect,\n} from \"react-router-dom\";\nimport { useRouter } from \"./components\";\nimport { StoreProvider } from \"./store\";\nimport { ViewPage } from \"./cms/pages/viewPage/viewPage\";\nimport { EditPage } from \"./cms/pages/editPage/editPage\";\nimport { TopHeader } from \"./layout/topHeader/topHeader\";\n// import { Footer } from './layout/footer/footer';\nimport { BottomDock } from \"./layout/bottomDock/bottomDock\";\n// import { BlogView } from './site/blog/blogView';\nimport { AppVersionPage } from \"./components\";\nimport { MediaQueryStatus } from \"./components\";\nimport { CommonVideoPopup } from \"./layout/popup/commonVideoPopup\";\nimport { HelmetProvider } from \"react-helmet-async\";\n//import { useScrollPosition } from '@n8tb1t/use-scroll-position';\nimport { AppRouteChanged } from \"./AppRouteChanged\";\nimport AOS from \"aos\";\nimport { ProvideAuth, useAuth } from \"auth\";\n\n//For ECM\nimport { ProductView } from \"./site/ecm/product/productView\";\nimport { EnquiryFormView } from \"./site/ecm/product/enquiryFormView\";\nimport { OrderDetails } from \"./site/ecm/orderDetails/orderDetails\";\nimport { useStore } from \"./store\";\nimport { createPortal } from \"react-dom\";\nimport { WholeSaleDashBoardView } from \"./site/wholeSale/dashboard/view\";\nimport { WholeSaleDashBoardOrderView } from \"./site/wholeSale/orderView/view\";\nimport { ForgotPassword } from \"./auth/controls/forgotPassword/forgotPassword\";\nimport { ResetPassword } from \"./auth/controls/resetPassword/resetPassword\";\nimport env from \"env\";\nimport { getIdToken } from \"lib/auth/services/authHelper\";\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\nfunction AppLayout(props) {\n const { pathname } = useRouter();\n const auth = useAuth();\n\n //For ECM\n const storeContext = useRef(useStore());\n const [openPopup, setOpenPopup] = useState(false);\n\n //const [scrolled, setScrolled] = useState(false)\n //const path = usePath();\n //const routeResult = useRoutes(routes);\n\n // const parallax = useParallax();\n // //console.log(path, routeResult);\n // const routeChanged = (path) => {\n // //console.log(path);\n // parallax.reset();\n // }\n\n // useScrollPosition(({ prevPos, currPos }) => {\n // //console.log(currPos.x)\n // //console.log(currPos.y);\n // if (currPos.y > 90) {\n // document.querySelector('body').classList.add('scrolled')\n // } else {\n // document.querySelector('body').classList.remove('scrolled')\n // }\n // //setScrolled(currPos.y > 90)\n // }, [], null, true)\n\n //const pageChanged = useCallback(path => routeChanged(path), [])\n //useLocationChange((path) => { routeChanged(path, history)})\n //useLocationChange(path => routeChanged(path))\n\n //const pathFiltered = (pathname || '').toLocaleLowerCase();\n let specialClassName = \"\";\n // if (pathFiltered.indexOf('/digital-sensor') >= 0) specialClassName = 'digital-sensor-page';\n // else if (pathFiltered === '/brilliance') specialClassName = 'brilliance-page';\n\n function openAddEnquiryForm() {\n setOpenPopup(true);\n document.body.style.overflow = \"hidden\";\n }\n\n function closeAddEnquiryForm() {\n setOpenPopup(false);\n document.body.style.overflow = \"unset\";\n }\n \n useEffect(() => {\n //console.log(\"----stg----\");\n\n if (!localStorage.favorites) {\n localStorage.setItem(\"favorites\", \"\");\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({\n // type: \"SET_STATE\",\n // payload: {\n // cartInfo:\n // data.cartInfo.totalQuantity === 0\n // ? 0\n // : data.cartInfo.totalQuantity - 1,\n // },\n // });\n // }\n // })\n // .catch((error) => {\n // storeContext.current.dispatch({\n // type: \"SET_STATE\",\n // payload: { cartInfo: 0 },\n // });\n // });\n\n // let cookieValue = document.cookie\n // .split(\"; \")\n // .find((row) => row.startsWith(\"add_to_quote=\"))\n // ?.split(\"=\")[1];\n // if (cookieValue && cookieValue !== \"\") {\n // const _value = cookieValue.split(\"|\");\n // storeContext.current.dispatch({\n // type: \"SET_STATE\",\n // payload: { addToQuote: _value.length },\n // });\n // }\n const abortController = new AbortController();\n const signal = abortController.signal;\n\n const fetchData = async () => {\n let checkAuth = false;\n\n if (await auth.loggedIn()) {\n checkAuth = true;\n }\n\n // if (checkAuth) {\n // const token = await getIdToken();\n\n // const res = await fetch(env.apiBase + \"/api/profile/getuserprofilev3\", {\n // headers: { Authorization: `Bearer ${token}` },\n // signal: signal,\n // });\n // const data = await res.json();\n // if (\n // data &&\n // data.results &&\n // data.results.user &&\n // data.results.user.firstName\n // ) {\n // storeContext.current.dispatch({\n // type: \"SET_STATE\",\n // payload: { userFirstName: data.results.user.firstName },\n // });\n // } else {\n // storeContext.current.dispatch({\n // type: \"SET_STATE\",\n // payload: { userFirstName: \"\" },\n // });\n // }\n // } else {\n // storeContext.current.dispatch({\n // type: \"SET_STATE\",\n // payload: { userFirstName: \"\" },\n // });\n // }\n\n const token = await getIdToken();\n const res = await fetch(env.apiBase + \"/api/cart/getcart\", {\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n },\n signal: signal,\n method: \"post\",\n body: JSON.stringify({ cartId: env.getDevCartId(), auth: checkAuth })\n \n });\n\n const data = await res.json();\n \n if (data && data.cartInfo) {\n storeContext.current.dispatch({\n type: \"SET_STATE\",\n payload: {\n cartInfo:\n data.cartInfo.totalQuantity === 0\n ? 0\n : data.cartInfo.totalQuantity - 1,\n },\n });\n }\n\n if (data && data.wholeSaleRegister) {\n storeContext.current.dispatch({\n type: \"SET_STATE\",\n payload: { userFirstName: data.wholeSaleRegister.businessName },\n });\n } else {\n storeContext.current.dispatch({\n type: \"SET_STATE\",\n payload: { userFirstName: \"\" },\n });\n }\n\n storeContext.current.dispatch({\n type: \"SET_STATE\",\n payload: { authCheck: checkAuth },\n });\n\n };\n\n fetchData();\n return function cleanup() {\n abortController.abort();\n };\n\n // eslint-disable-next-line\n }, []);\n\n return (\n \n
\n {/* */}\n \n \n \n \n\n \n \n \n
\n {/*