\r\n
\r\n}","export function isExternalLink(link){\r\n return link && (link.indexOf('https://') === 0 || link.indexOf('http://') === 0 || link.indexOf('://') === 0);\r\n}\r\n\r\nexport function getLinkFromElement(el){\r\n if (!el) return null;\r\n const linkEl = el.closest('a');\r\n //console.log(el, linkEl);\r\n if (linkEl){\r\n return linkEl.getAttribute('href');\r\n }\r\n return null;\r\n}\r\n\r\n\r\n// router utils\r\nexport function getLinkInfo(link) {\r\n if (!link) return null;\r\n\r\n const origin = typeof window !== `undefined` && window.location && window.location.origin;\r\n const currentPath = typeof window !== `undefined` && window.location && window.location.pathname;\r\n let linkFiltered = link.replace(origin, '').replace(currentPath + '#', '#');\r\n let linkLower = link.toLowerCase();\r\n\r\n //if (isStaticFile(linkLower)) return null;\r\n const isExternal = isExternalLink(linkFiltered);\r\n const isHash = linkFiltered.indexOf('#') === 0;\r\n const isTel = linkFiltered.indexOf('tel:') === 0;\r\n const isMailTo = linkFiltered.indexOf('mailto:') === 0;\r\n const type = (isHash && 'hash') || (isTel && 'tel') || (isMailTo && 'mailto') || \r\n (isStaticFile(linkLower) && 'static') || (isExternal && 'external') || 'internal';\r\n\r\n return { url: linkFiltered, type: type, ext: getExtension(link) };\r\n}\r\n\r\nvar exts = ['.pdf', '.jpg', '.png', '.gif', '.docx', '.doc']\r\nfunction isStaticFile(path) {\r\n for(let i = 0; i < exts.length; i++) {\r\n if (path.indexOf(exts[i]) >= 0) return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function getExtension(filename) {\r\n if (!filename || filename.indexOf('.') < 0) return null;\r\n return filename.split('.').pop().toLowerCase();\r\n}\r\n\r\nexport function getFilename(url) {\r\n return url.split('/').pop().split('?')[0];\r\n}\r\n\r\nexport function getFolderPath(url, parentDepth = -1) {\r\n return url.split('/').slice(0, parentDepth).join('/');\r\n}\r\n\r\n//\r\nexport function toQueryString(params) {\r\n var queryString = Object.keys(params).map((key) => {\r\n return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])\r\n }).join('&');\r\n return queryString;\r\n}\r\n\r\nexport function getYoutubeId(url){\r\n url = url.split(/(vi\\/|v=|\\/v\\/|youtu\\.be\\/|\\/embed\\/)/);\r\n return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_-]/i)[0] : url[0];\r\n}\r\n\r\nexport function getSlug(text){\r\n return text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\\w-]+/g,'');\r\n}\r\n\r\nexport function getWebUrl(url, schema = 'https://'){\r\n if (!url) return null;\r\n if (url.indexOf('https:') >= 0 || url.indexOf('http:') >= 0 || url.indexOf(':') >= 0) {\r\n return url;\r\n }\r\n return schema + url;\r\n}","//#region error json parsing\r\nexport const getErrors = (result) => {\r\n let errors = [];\r\n if (result && result.errors && result.errors.length > 0) {\r\n result.errors.forEach(err => {\r\n errors.push(err.errorMessage);\r\n });\r\n }\r\n return errors;\r\n}\r\n\r\nexport const getErrorMessage = (result) => {\r\n let errors = getErrors(result);\r\n return errors.join(\" \");\r\n}\r\n//#endregion","//#region conversion between array and object\r\nexport const convertToObject = (array, key) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item,\r\n };\r\n }, initialValue);\r\n};\r\n\r\nexport const convertToKeyValues = (array, key, value) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item[value],\r\n };\r\n }, initialValue);\r\n};\r\n//#endregion\r\n\r\n//#region array helper functions\r\nexport const moveItem = (list, fromIndex, toIndex) => {\r\n //const list = Array.from(array);\r\n const [removed] = list.splice(fromIndex, 1);\r\n list.splice(toIndex, 0, removed);\r\n\r\n return list;\r\n};\r\n\r\nexport const removeItem = (list, index) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 1);\r\n\r\n return list;\r\n};\r\n\r\nexport const insertItem = (list, index, item) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 0, item);\r\n\r\n return list;\r\n};\r\n\r\n\r\nexport const find = (list, fn) => {\r\n if (!list) return null;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return list[i];\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nexport const findIndex = (list, fn) => {\r\n if (!list) return -1;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return i;\r\n }\r\n }\r\n return -1;\r\n};\r\n\r\nexport const contains = (list, fn) => {\r\n return findIndex(list, fn) >= 0;\r\n}\r\n\r\n// utils.array.distinct(images, (x, y) => x.imageUrl === y.imageUrl)\r\nexport const distinct = (list, comparer) => {\r\n const filtered = []\r\n for (let i = 0; i < list.length; i++) {\r\n if (!contains(filtered, (x) => comparer(x, list[i]))) {\r\n filtered.push(list[i])\r\n }\r\n }\r\n return filtered;\r\n}\r\n\r\nexport const sum = (list, fn) => {\r\n if (!list) return 0;\r\n let total = 0;\r\n for (let i = 0; i < list.length; i++) {\r\n total += fn(list[i]) || 0\r\n }\r\n return total\r\n}\r\n\r\nexport const equal = (list1, list2, fn) => {\r\n if (!list1 && !list2) return true;\r\n if (!list1 || !list2) return false;\r\n if (list1.length !== list2.length) return false;\r\n for (let i = 0; i < list1.length; i++) {\r\n let found = false;\r\n for (let j = 0; j < list2.length; j++) {\r\n if(fn(list1[i], list2[i])) {\r\n found = true;\r\n break;\r\n }\r\n }\r\n if (!found) return false;\r\n }\r\n return true;\r\n}\r\n//#endregion\r\n\r\n//#region sorting helpers\r\nexport const caseInsensitiveCompare = function (a, b) {\r\n return a.toLowerCase().localeCompare(b.toLowerCase());\r\n}\r\n\r\n// put the null items at the end.\r\nexport const compareIgnoreEmpty = function (asc) {\r\n return asc ?\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || +(a > b) || -(a < b);\r\n }\r\n :\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || -(a > b) || +(a < b);\r\n }\r\n}\r\n//#endregion","import parse from 'date-fns/parse';\r\nimport parseISO from 'date-fns/parseISO';\r\n\r\n//#region manipulation\r\nexport const addDays = (date, days) => {\r\n var result = new Date(date)\r\n result.setDate(result.getDate() + days)\r\n return result\r\n}\r\n//#endregion\r\n\r\n//#region format\r\nexport function formatYYYYMMDD(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n } \r\n return (`${yyyy}-${mm}-${dd}`)\r\n}\r\n\r\nexport function formatDDMMYYYY(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n }\r\n return (`${dd}-${mm}-${yyyy}`)\r\n}\r\n//#endregion\r\n\r\n//#region parse\r\nexport function toDate(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, 'yyyy-MM-dd') ||\r\n parseDate(dateObj, 'yyyy-M-d') ||\r\n parseDate(dateObj, 'dd/MM/yyyy') ||\r\n parseDate(dateObj, 'd/M/yyyy') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function toDateTime(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\") ||\r\n parseDate(dateObj, 'yyyy-MM-dd HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'yyyy-M-d HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'dd/MM/yyyy HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'd/M/yyyy HH:mm:ss.SSSxxx') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function parseDate(dateStr, format) {\r\n const date = parse(dateStr, format, new Date());\r\n return date && isValidDate(date)? date : null;\r\n}\r\n\r\nexport function isValidDate(d) {\r\n return d instanceof Date && !isNaN(d);\r\n}\r\n//#endregion","//#region background images\r\nexport const bgUrl = (imageUrl) => {\r\n return `background-image:url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n\r\nexport const bgUrlStyle = (imageUrl) => {\r\n return `url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n//#endregion\r\n\r\n//#region screen/element size\r\nexport const screenWidth = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerWidth ||\r\n document.documentElement.clientWidth ||\r\n document.body.clientWidth\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const screenHeight = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerHeight ||\r\n document.documentElement.clientHeight ||\r\n document.body.clientHeight\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const outerWidth = el => el.offsetWidth\r\nexport const outerHeight = el => el.offsetHeight\r\n//#endregion\r\n\r\n//#region css class\r\n/**\r\n * Check if element has the css class on it.\r\n */\r\nexport const hasClass = (el, className) => {\r\n if (el.classList) {\r\n return el.classList.contains(className)\r\n }\r\n\r\n return !!el.className.match(new RegExp(`(\\\\s|^)${className}(\\\\s|$)`))\r\n}\r\n\r\n/**\r\n * Adds the provided css className to the element.\r\n */\r\nexport const addClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.add(className)\r\n return\r\n }\r\n\r\n if (!hasClass(el, className)) {\r\n el.className += ` ${className}`\r\n }\r\n}\r\n\r\n/**\r\n * Remove the provided css className from the element.\r\n */\r\nexport const removeClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.remove(className)\r\n return\r\n }\r\n\r\n if (hasClass(el, className)) {\r\n const reg = new RegExp(`(\\\\s|^)${className}(\\\\s|$)`)\r\n el.className = el.className.replace(reg, ' ')\r\n }\r\n}\r\n\r\n/**\r\n * Adds or removes a class name on the input depending on the status flag.\r\n */\r\nexport const toggleClass = (el, className, status) => {\r\n if (!el || !className) return\r\n\r\n if (status) {\r\n return addClass(el, className)\r\n }\r\n\r\n removeClass(el, className)\r\n}\r\n//#endregion","import { gsap } from 'gsap';\r\nimport { ScrollToPlugin } from 'gsap/ScrollToPlugin';\r\n\r\ngsap.registerPlugin(ScrollToPlugin);\r\n\r\nexport function scrollTo(selector, duration = 750, delay = 0) {\r\n const el = findElement(selector);\r\n if (el) {\r\n setTimeout(() => {\r\n //console.log(element);\r\n const offset = elementOffset(el);\r\n //console.log(offset)\r\n //window.scrollTo(0, offset.top - 300);\r\n\r\n gsap.to(window, {duration: (duration/1000), scrollTo: offset.top - 100, ease: 'power1'});\r\n\r\n }, delay);\r\n //el.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' }); }, timeout);\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function findElement(selector) {\r\n if (typeof selector !== 'string') return selector;\r\n\r\n let found = querySelectorOrNull(selector)\r\n || querySelectorOrNull('#' + selector)\r\n || querySelectorOrNull('.' + selector)\r\n \r\n return found;\r\n}\r\n\r\nexport function querySelectorOrNull(selector) {\r\n try {\r\n return document.querySelector(selector);\r\n } catch(e){\r\n return null;\r\n };\r\n}\r\n\r\nexport function elementOffset(el) {\r\n var rect = el.getBoundingClientRect(),\r\n scrollLeft = typeof window !== `undefined` ? (window.pageXOffset || document.documentElement.scrollLeft) : 0,\r\n scrollTop = typeof window !== `undefined` ? (window.pageYOffset || document.documentElement.scrollTop) : 0;\r\n\r\n return { top: rect.top + scrollTop, left: rect.left + scrollLeft, width: el.offsetWidth, height: el.offsetHeight }\r\n}\r\n\r\nexport function isElementInViewport (el) {\r\n if (typeof window !== `undefined`) {\r\n var rect = el.getBoundingClientRect();\r\n\r\n return (\r\n rect.top >= 0 &&\r\n rect.left >= 0 &&\r\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */\r\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */\r\n );\r\n } else {\r\n return true;\r\n }\r\n}\r\n\r\nexport function getCurrentBreakpoint() {\r\n if (typeof window === `undefined`) return null;\r\n \r\n const bpHolder = document.querySelector('.devMediaQueryStatus__current');\r\n if (!bpHolder) return null;\r\n return window.getComputedStyle(bpHolder, ':before').getPropertyValue('content').replace(/[\"']/g, '');\r\n}\r\n\r\n","export function formatMoney(number, fraction = 0) {\r\n var formatter = new Intl.NumberFormat('en-AU', {\r\n style: 'currency',\r\n currency: 'AUD',\r\n minimumFractionDigits: fraction,\r\n });\r\n\r\n return formatter.format(number);\r\n}\r\n\r\nexport function toMonthlyCost(amount, frequency) {\r\n if (!amount) return 0;\r\n if (frequency === 'Week') {\r\n return amount * 52.1429 / 12.0;\r\n } else if (frequency === 'Fortnight') {\r\n return amount * 52.1429 / 2.0 / 12.0;\r\n } else if (frequency === 'Month') {\r\n return amount;\r\n } else if (frequency === 'Quarter') {\r\n return amount * 4.0 / 12.0;\r\n } else if (frequency === 'Year') {\r\n return amount / 12.0;\r\n } else {\r\n return amount;\r\n }\r\n}\r\n","export function isBlank(str) {\r\n return (!str || /^\\s*$/.test(str))\r\n}\r\n\r\nexport function isEmpty(str) {\r\n return (!str || str.length === 0)\r\n}\r\n\r\nexport function isNumeric(num){\r\n return !isNaN(num)\r\n}\r\n\r\nexport function capitalize(expression) {\r\n return expression.charAt(0).toUpperCase() + expression.slice(1);\r\n}\r\n\r\nexport function toFieldName(str) {\r\n if (!str) return null;\r\n return capitalize((str.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1')).trim());\r\n}\r\n\r\nexport function toHtml(str) {\r\n if (!str) return null;\r\n return str.replace(/[\\n\\r]/g, '\r\n
\r\n ')\r\n}\r\n\r\n// Shorten a string to less than maxLen characters without truncating words.\r\nexport function truncateWords(str, maxLen, separator = ' ', ellipsis = '...') {\r\n if (str.length <= maxLen) return str\r\n var pos = str.lastIndexOf(separator, maxLen)\r\n return str.substr(0, pos) + ellipsis\r\n}\r\n\r\nexport function numberWithCommas(x) {\r\n var parts = x.toString().split(\".\");\r\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n return parts.join(\".\");\r\n}\r\n\r\nexport const formatNumber = (value) => {\r\n if (value === 0) return '0';\r\n if (!value) return '';\r\n return Math.round(value * 100) / 100\r\n}\r\n\r\nexport const toTelephoneNumber = (str) => {\r\n return (str || []).replace(/[^+\\d]+/g, \"\");\r\n\r\n}\r\n\r\n// utils.text.like('text here', '%keyword%')\r\nexport const like = (str, search) => {\r\n if (typeof search !== 'string' || str === null) { return false; }\r\n // Remove special chars\r\n search = search.replace(new RegExp(\"([\\\\.\\\\\\\\\\\\+\\\\*\\\\?\\\\[\\\\^\\\\]\\\\$\\\\(\\\\)\\\\{\\\\}\\\\=\\\\!\\\\<\\\\>\\\\|\\\\:\\\\-])\", \"g\"), \"\\\\$1\");\r\n // Replace % and _ with equivalent regex\r\n search = search.replace(/%/g, '.*').replace(/_/g, '.');\r\n // Check matches\r\n return RegExp('^' + search + '$', 'gi').test(str);\r\n\r\n}","import shortid from 'shortid';\r\nimport uuid from 'uuid/v4';\r\n\r\nexport function shortId() {\r\n return shortid();\r\n}\r\n\r\nexport function guid() {\r\n return uuid();\r\n}","export function toCamel(o) {\r\n var newO, origKey, newKey, value\r\n if (o instanceof Array) {\r\n return o.map(function(value) {\r\n if (typeof value === \"object\") {\r\n value = toCamel(value)\r\n }\r\n return value\r\n })\r\n } else {\r\n newO = {}\r\n for (origKey in o) {\r\n if (o.hasOwnProperty(origKey)) {\r\n newKey = (origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey).toString()\r\n value = o[origKey]\r\n if (value instanceof Array || (value !== null && value.constructor === Object)) {\r\n value = toCamel(value)\r\n }\r\n newO[newKey] = value\r\n }\r\n }\r\n }\r\n return newO\r\n}","import { getFilename } from './url';\r\nimport { contains } from './array';\r\nexport function getImageSetPath(url, setId) {\r\n const info = getPathDetails(url)\r\n if (!info) return url;\r\n //console.log(url, info);\r\n return info.baseFolder + \"/@\" + setId + '/' + info.filename\r\n}\r\n\r\nexport function getPathDetails(url, setIds) {\r\n if (!url) return null;\r\n const parts = url.split('/').slice(0, -1);\r\n if (parts.length <= 1) return { baseFolder: '/', setId: null, filename: getFilename(url) };\r\n\r\n const lastFolder = parts[parts.length - 1];\r\n const hasSet = setIds && setIds.length > 0 ? contains(setIds, x => x === lastFolder) : lastFolder.indexOf('@') === 0;\r\n\r\n return hasSet ?\r\n { baseFolder: parts.slice(0, -1).join('/'), setId: lastFolder, filename: getFilename(url) } :\r\n { baseFolder: parts.join('/'), setId: null, filename: getFilename(url) }\r\n}","import classNames from 'classnames';\r\nimport * as url from './url';\r\nimport * as form from './form';\r\nimport * as array from './array';\r\nimport * as date from './date';\r\nimport * as css from './css';\r\nimport * as ui from './ui';\r\nimport * as money from './money';\r\nimport * as text from './text';\r\nimport * as random from './random';\r\nimport * as object from './object';\r\nimport * as media from './media';\r\n\r\nexport default { classNames, url, form, array, date, css, ui, money, text, random, object, media};","import facepaint from 'facepaint'\r\nimport siteConfig from '../../config';\r\n\r\nconst config = siteConfig.cssEmotion\r\nconst breakpointNames = (config && config.breakpointNames) || ['sm', 'md', 'lg', 'xl', 'xxl']\r\nconst breakpoints = (config && config.breakpoints) || [576, 768, 992, 1200, 1600]\r\n\r\nconst mq = facepaint(\r\n breakpoints.map(bp => `@media (min-width: ${bp}px)`)\r\n)\r\n\r\nconst mqMin = {};\r\nbreakpointNames.forEach((bp, index) => mqMin[bp] = `@media (min-width: ${breakpoints[index]}px)`)\r\n\r\nconst mqMax = {};\r\nbreakpointNames.forEach((bp, index) => mqMax[bp] = `@media (max-width: ${breakpoints[index] - 1}px)`)\r\n//console.log(mqMin, mqMax)\r\n\r\nconst matches = (mediaQuery) => !!window.matchMedia(mediaQuery).matches\r\nconst isMin = {};\r\nbreakpointNames.forEach((bp, index) => isMin[bp] = () => matches(`(min-width: ${breakpoints[index]}px)`))\r\n\r\nconst isMax = {};\r\nbreakpointNames.forEach((bp, index) => isMax[bp] = () => matches(`(max-width: ${breakpoints[index] - 1}px)`))\r\n\r\nexport { mq, mqMin, mqMax, isMin, isMax }","export function overlay() {\r\n return {\r\n content: `''`,\r\n position: 'absolute',\r\n top:0,\r\n bottom:0,\r\n left: 0,\r\n right: 0,\r\n transition: 'all 0.5s'\r\n }\r\n}","import utils from \"../utils\";\nimport env from '../env';\nimport { isMin } from '../lib/css-emotion'\n\nexport const isMobile = () => {\n // isMin.md() ==> min-width: 768px\n return !isMin.md()\n}\n\nexport function resourcePath(url){\n if (!url) return null;\n if (url && url.indexOf('/assets/') === 0) return url;\n return utils.url.isExternalLink(url)? url : env.resourceBase + url;\n}\n\nexport function fullUrl(url){\n return utils.url.isExternalLink(url)? url : env.baseOrigin + url;\n}\n\n\nexport const isNZ = env.locale === 'nz'\n\nconst lsVer = \"V1\";\nconst lsProductHistory = \"lsProductHistory\" + lsVer;\n\nfunction createLsSearchInfo(){\n const lsProductHistoryData = {\n bannerImg : ''\n };\n localStorage.setItem(lsProductHistory, JSON.stringify(lsProductHistoryData));\n}\n\nexport function setupLsPhImg(imgUrl){\n if(!localStorage.getItem(lsProductHistory)){\n createLsSearchInfo();\n }\n const lsProductHistoryData = JSON.parse(localStorage.getItem(lsProductHistory));\n lsProductHistoryData.bannerImg = imgUrl;\n localStorage.setItem(lsProductHistory, JSON.stringify(lsProductHistoryData));\n}","import coreUtils from '../lib/utils-core';\nimport * as site from '../site/siteUtils';\n\nexport default { ...coreUtils, site };","import { useState, useEffect } from 'react';\r\nimport utils from '../../utils';\r\nimport siteConfig from '../../config';\r\n\r\nexport function useApi(fn) {\r\n //console.log('useApi')\r\n const [response, setResponse] = useState({});\r\n const [errors, setErrors] = useState([]);\r\n const [status, setStatus] = useState('ready');\r\n const [request, setRequest] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!request) return;\r\n\r\n //console.log('fetch now')\r\n setResponse(null);\r\n setErrors([]);\r\n setStatus('ready');\r\n\r\n const fetchData = async () => {\r\n setStatus('pending');\r\n try {\r\n //console.log(request);\r\n const options = request.options || {}\r\n siteConfig.apiNetJwt && await siteConfig.apiNetJwt(options);\r\n\r\n const res = await fetch(request.url, options);\r\n //console.log(res);\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n setErrors([json.message]);\r\n setStatus('error')\r\n return;\r\n }\r\n } catch (e) { }\r\n\r\n const statusText = res.status === 401 ? 'Permission denied. Please login first.' : res.statusText\r\n setErrors(['Error - [' + res.status + ']' + (statusText && (' - ' + statusText))]);\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n setErrors(utils.form.getErrors(json));\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n setResponse(json);\r\n setStatus('done')\r\n } catch (err) {\r\n //console.log(error, error.toString(), typeof error, JSON.stringify(error))\r\n setErrors([err.toString()]);\r\n setStatus('error')\r\n }\r\n };\r\n fetchData();\r\n }, [request]);\r\n\r\n const containsErrorMessage = (msg) => {\r\n const finding = (msg || '').toLowerCase()\r\n return errors.some(x => (x || '').toLowerCase().indexOf(finding) >= 0)\r\n }\r\n\r\n //return [ response, error, status, (...args) => setRequest(fn(...args)) ];\r\n return {\r\n request: request,\r\n response: response,\r\n errors: errors,\r\n status: status,\r\n hasErrors: () => status === 'error',\r\n containsErrorMessage: containsErrorMessage,\r\n addErrors: (errs) => {\r\n setErrors(...errors, ...errs)\r\n setStatus('error')\r\n },\r\n done: () => status === 'done',\r\n send: (...args) => { setStatus('ready'); setRequest(fn(...args)) },\r\n sendRaw: (httpOptionFn, ...args) => { setStatus('ready'); setRequest(httpOptionFn(...args)) },\r\n setResult: (json) => { setResponse(json); setStatus('done') },\r\n reset: () => {\r\n setStatus('ready');\r\n setErrors([]);\r\n }\r\n };\r\n}\r\n\r\nexport function usePost() {\r\n const formDataFn = (url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n body: data // FormData\r\n }\r\n });\r\n const post = useApi((url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data)\r\n }\r\n })\r\n );\r\n return {\r\n ...post,\r\n loading: () => post.status === 'ready' || post.status === 'pending',\r\n sending: () => post.status === 'pending',\r\n sendFormData: (...args) => post.sendRaw(formDataFn, ...args)\r\n }\r\n}\r\n\r\nexport function useGet() {\r\n const get = useApi((url, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'GET'\r\n }\r\n })\r\n );\r\n return {\r\n ...get,\r\n loading: () => get.status === 'ready' || get.status === 'pending'\r\n }\r\n}\r\n\r\n//https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c","import React from 'react';\r\nimport env from '../../env';\r\n\r\nexport function MediaQueryStatus(props) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Helmet } from 'react-helmet-async';\r\n\r\nexport function MetaTag({ data: seoData }) {\r\n //console.log(seoData)\r\n const data = Object.assign({}, {\r\n title: ''\r\n }, seoData)\r\n\r\n return (<>\r\n \r\n {displayingPosts.map((item, index) =>\r\n
\r\n )\r\n}\r\n\r\nfunction Feed({item}) {\r\n return (\r\n \r\n {/* {item.link} */}\r\n \r\n })
\r\n {item.type === 'video' &&
\r\n )\r\n}","// https://www.pluralsight.com/guides/re-render-react-component-on-window-resize\r\nexport function debounce(fn, ms) {\r\n let timer\r\n return _ => {\r\n clearTimeout(timer)\r\n timer = setTimeout(_ => {\r\n timer = null\r\n fn.apply(this, arguments)\r\n }, ms)\r\n };\r\n}","import utils from '../../utils';\r\n\r\nexport function loadApi(onApiReady) {\r\n if (typeof window !== `undefined` && !window.YT) { // If not, load the script asynchronously\r\n const tag = document.createElement('script');\r\n tag.src = 'https://www.youtube.com/iframe_api';\r\n\r\n // onYouTubeIframeAPIReady will load the video after the script is loaded\r\n window.onYouTubeIframeAPIReady = () => onApiReady(true);\r\n\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n } else { // If script is already there, load the video directly\r\n onApiReady(false);\r\n }\r\n}\r\n\r\n// export function player(playerId, videoId, playerVars = {}, events = {}) {\r\n// //let player = null;\r\n// const defaultPlayerVars = {\r\n// 'autoplay': 1,\r\n// 'controls': 0,\r\n// 'loop': 1,\r\n// 'showinfo': 0,\r\n// 'rel': 0,\r\n// 'modestbranding': 1,\r\n// 'origin': window.location.origin,\r\n// 'allowfullscreen': true,\r\n// 'wmode': 'transparent'\r\n// }\r\n// const defaultEvents = {\r\n// 'onStateChange': (e) => { },\r\n// 'onReady': (e) => { console.log('onReady'); player.mute() },\r\n// 'onError': (e) => { console.log(e) }\r\n// }\r\n\r\n// const player = new window.YT.Player(playerId, {\r\n// videoId: videoId,\r\n// playerVars: Object.assign({}, defaultPlayerVars, playerVars),\r\n// events: Object.assign({}, defaultEvents, events),\r\n// });\r\n// return player;\r\n// }\r\n\r\nexport function thumbnailMax(videoId){\r\n return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\r\n}\r\n\r\n// onPlayerStateChange(event){\r\n// switch (event.data){\r\n// case window['YT'].PlayerState.PLAYING:\r\n// //console.log('Playing');\r\n// //this.player.mute();\r\n// break;\r\n// case window['YT'].PlayerState.PAUSED:\r\n// //console.log('Pafdsu');\r\n// break;\r\n// case window['YT'].PlayerState.ENDED:\r\n// //console.log('ended ');\r\n// //this.player.playVideo();\r\n// this.player.stopVideo();\r\n// break;\r\n// }\r\n// }\r\n\r\n// toggleBannerYoutueInCMS(toggleItem:string){ \r\n// if(toggleItem == 'youtube'){\r\n// //location.reload();\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.playVideo();\r\n// this.init();\r\n// }\r\n// else{\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.stopVideo();\r\n// }\r\n// }\r\n\r\n\r\nexport function getYoutubeCode(src) {\r\n // if (src.indexOf('http') >= 0) {\r\n // if (src.indexOf('v=') >= 0) {\r\n // return src.split('v=')[1];\r\n // }\r\n // }\r\n // return src;\r\n return utils.url.getYoutubeId(src);\r\n}","import React from 'react';\r\nimport utils from '../../utils';\r\nimport * as yt from './iframeApi';\r\nimport { FaRegPlayCircle } from 'react-icons/fa';\r\nimport { useStore } from '../../store';\r\n\r\nexport function YoutubeEmbedPopup({ url, title, posterUrl }) {\r\n const { dispatch } = useStore();\r\n\r\n const videoId = yt.getYoutubeCode(url);\r\n const posterImageUrl = utils.site.resourcePath(posterUrl || yt.thumbnailMax(videoId));\r\n const [popupIndex, setPopupIndex] = React.useState(0);\r\n\r\n function openVideo() {\r\n setPopupIndex(popupIndex + 1);\r\n dispatch({ type: 'SET_POPUP', payload: { sources: [\r\n // \r\n 'https://www.youtube.com/watch?v=' + videoId\r\n ], popupIndex: popupIndex + 1} });\r\n }\r\n return (\r\n \r\n {item.type === 'video' && \r\n
\r\n );\r\n}\r\n","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 };","import React from 'react';\nimport cmsUtils from '../cmsUtils';\nimport { InstagramFeed } from 'components';\nimport { isOffline } from '@site/_offline';\n\nexport const renderRule = {\n match: (item, cmsOption) => (cmsUtils.getCodeJson(item) || {})['control'] === 'instagram', \n itemElt: (item, cmsOption) => (!isOffline() && \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction RadioListInput({ control, handleChange, formOption }) {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n {prependText &&
\r\n {helpText && }\r\n \r\n
\r\n }\r\n\r\n handleChange(e, control)} \r\n // onBlur={(e) => handleChange(e, control, true)}\r\n onChange={changed}\r\n onKeyDown={keyDown}\r\n onBlur={blur}\r\n autoComplete=\"new-password\"\r\n //onFocus={focus}\r\n //autoFocus={autoFocus}\r\n placeholder={placeHolder}\r\n className={\"form-control\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs} />\r\n {prependText}
\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(value, optionValue) {\r\n if (optionValue === null || typeof optionValue === 'undefined') return false;\r\n return value === optionValue;\r\n}\r\n\r\nexport default RadioListInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxListInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n const values = value ? [...value] : [];\r\n return (\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs} />\r\n \r\n
)}\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(values, value) {\r\n if (value === null || typeof value === 'undefined') return false;\r\n return values.includes(value);\r\n}\r\n\r\nexport default CheckboxListInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction DateSeparateInput({ control, handleChange, formOption }) {\r\n //const { name, label, value, errors, style } = control;\r\n const { name, label, errors, style, helpText, attrs } = control;\r\n const thisYear = (new Date()).getFullYear();\r\n //console.log(name, value)\r\n const [year, setYear] = React.useState('')\r\n const [month, setMonth] = React.useState('')\r\n const [day, setDay] = React.useState('')\r\n\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, name + '|'+ fieldLabel)\r\n //const placeHolder = usePlaceholder ? fieldLabel : null;\r\n // let valueStr = value === 0 ? 0 : (value || \"\");\r\n // if (type === 'date' && value) {\r\n // valueStr = utils.date.formatYYYYMMDD(value);\r\n // }\r\n\r\n function handleChangeDay(e) {\r\n setDay(e.target.value)\r\n handleChangeInner(year, month, e.target.value)\r\n }\r\n\r\n function handleChangeMonth(e) {\r\n setMonth(e.target.value)\r\n handleChangeInner(year, e.target.value, day)\r\n }\r\n\r\n function handleChangeYear(e) {\r\n setYear(e.target.value)\r\n handleChangeInner(e.target.value, month, day)\r\n }\r\n\r\n function handleChangeInner(yyyy, mm, dd) {\r\n control.incomplete = !(yyyy !== '' && mm !== '' && dd !== '')\r\n const newVal = yyyy + '-' + mm + '-' + dd;\r\n //console.log(newVal)\r\n //mimic event\r\n handleChange({\r\n persist: () => { },\r\n target: { name: name, value: newVal, checked: false }\r\n }, control)\r\n }\r\n\r\n //const monthsFull = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']\r\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n const selectStyle = { width: 'auto', display: 'inline-block', marginRight: '0.5em' };\r\n\r\n const fromYear = style && style.recentYear ? thisYear : thisYear - 10;\r\n const recentYear = style && style.recentYear ? style.recentYear : 100;\r\n return (\r\n \r\n
\r\n {helpText && }\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs}/>\r\n \r\n
)}\r\n\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default DateSeparateInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction FileInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, control)\r\n const placeHolder = usePlaceholder ? fieldLabel : null;\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n if (type === 'date' && value) {\r\n valueStr = utils.date.formatYYYYMMDD(value);\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n\r\n )\r\n}\r\n\r\nexport default FileInput;","import TextInput from './TextInput';\r\nimport RadioListInput from './RadioListInput';\r\nimport TextareaInput from './TextareaInput';\r\nimport CheckboxInput from './CheckboxInput';\r\nimport CheckboxListInput from './CheckboxListInput';\r\nimport SelectInput from './SelectInput';\r\nimport HiddenInput from './HiddenInput';\r\n//import HtmlInput from './HtmlInput';\r\nimport DateSeparateInput from './DateSeparateInput';\r\nimport FileInput from './FileInput';\r\n\r\nconst Components = { TextInput, RadioListInput, TextareaInput, CheckboxInput, CheckboxListInput, SelectInput, HiddenInput, DateSeparateInput, FileInput };\r\n\r\nconst capitalize = expression => expression.charAt(0).toUpperCase() + expression.slice(1);\r\n\r\nexport function getControl(control, formOption) {\r\n let Component = null;\r\n if (control.type === 'number' || control.type === 'email' || control.type === 'date' || control.type === 'password' || control.type === 'tel')\r\n Component = TextInput;\r\n else if (control.type === \"dob\")\r\n Component = DateSeparateInput;\r\n else\r\n Component = Components[capitalize(control.type || '') + 'Input'];\r\n\r\n return Component;\r\n}\r\n\r\n","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel, getLabelAsString } from '../formRenderHelper';\r\n\r\nfunction TextareaInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const { usePlaceholder = false } = formOption;\r\n const placeHolder = usePlaceholder ? getLabelAsString(control, formOption) : null;\r\n const valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n const textAreaRef = React.useRef(null);\r\n const [textAreaHeight, setTextAreaHeight] = React.useState(\"auto\");\r\n const [parentHeight, setParentHeight] = React.useState(\"auto\");\r\n\r\n React.useEffect(() => {\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n setTextAreaHeight(`${h}px`);\r\n }\r\n }, [valueStr]);\r\n\r\n function onChangeInternal(e) {\r\n setTextAreaHeight(\"auto\");\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n }\r\n handleChange(e, control);\r\n }\r\n\r\n return (\r\n \r\n handleChange(e, control)} onBlur={(e) => handleChange(e, control)}\r\n placeholder={placeHolder}\r\n className={\"form-control-file\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs}/>\r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextareaInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)} \r\n className={\"form-check-input\"} {...attrs}/>\r\n \r\n {helpText && }\r\n
\r\n )\r\n}\r\n\r\nexport default CheckboxInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction SelectInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(value, typeof value)\r\n return (\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default SelectInput;\r\n\r\n","import * as React from 'react';\r\nimport utils from '../../../utils';\r\n\r\nfunction TextInput({ control, handleChange, formOption }) {\r\n const { name, value } = control;\r\n const fieldId = utils.random.shortId();\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport * as formModelHelper from './formModelHelper';\r\nimport { getControl } from './controls';\r\nimport { getSiteControl } from '../../form';\r\n\r\nexport function renderControlDirect(control, handleChange, formOption) {\r\n if (control === null) return null;\r\n let Component = getSiteControl(control, formOption) || getControl(control, formOption);\r\n if (!Component) return control.value;\r\n return \r\n \r\n
\r\n {helpText && }\r\n {renderHtml(found.code, _cmsOption)}
\n }\n else return null;\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport { useRef } from 'react';\nimport utils from '../../../../utils';\nimport cmsUtils from '../../cmsUtils';\nimport { handleElementLink } from '../../../../components';\nimport { useRouter } from '../../../../components';\nimport { renderHtml } from '../../html/view/renderHtml';\nimport { getExTextPanelStyle } from './exTextPanelStyle';\n\nexport function ExTextPanel(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const { history } = useRouter();\n let content = cmsOption.isCmsEdit ? cmsUtils.payload(item, 'Content') : cmsUtils.payload(item, 'Content').replace(\"__version__\", \"sample\");\n\n const cssClassExPanel = utils.classNames('cms_item', cmsOption.isCmsEdit && 'expand', item.cssClass || item.anchorName || '');\n const cssClass = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html');\n\n function handleClick(e) { \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 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 }\n else {}\n }\n const s = getExTextPanelStyle();\n const htmlBlock = useRef(null);\n return( \n \n
\n )\n}","import { mq } from \"../../../../cssInJs\";\n\nexport function getExTextPanelStyle(){\n return{\n exTextPanel : mq({\n overflow:'hidden',\n maxHeight:'0',\n transition: 'all 0.8s',\n '&.expand' : {\n maxHeight:'10000px'\n }\n })\n }\n}","import React from 'react';\nimport { ExTextPanel } from './view/exTextPanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'ExTextPanel', \n itemElt: (item, cmsOption) => handleClick(e)}>\n {renderHtml(content, cmsOption)}\n
\n \n \n {\n currentStep === 'car' &&\n \n }\n
\n )\n}\n\nfunction CarForm(){\n\n const [formValue, setFormValue] = useState({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n make : '',\n model : '',\n year : '',\n cylinders : '',\n engineSize : '',\n terminalPositive : '',\n enquiry : '',\n emailReceiver : ''\n });\n\n const [pending, setPending] = useState(false);\n const [triggerForm, setTriggerForm] = useState(0);\n const [result, setResult] = useState({errors : [], results : null});\n\n function submit(e){\n e.preventDefault();\n e.stopPropagation();\n setPending(true);\n setResult({errors : [], results : null});\n setTriggerForm(triggerForm + 1);\n }\n\n function handChange(el){\n const elName = el.target.name;\n const elValue =el.target.value;\n setFormValue({...formValue, [elName] : elValue});\n }\n\n useEffect(() => {\n if(triggerForm === 0){\n return;\n }\n const fetchData = async() => {\n try{\n const res = await fetch(env.apiBase + '/api/form/batteryMatcherformcarsend', {\n method : 'post',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formValue)\n });\n const data = await res.json();\n console.log(\"data\", data);\n setFormValue({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n make : '',\n model : '',\n year : '',\n cylinders : '',\n engineSize : '',\n terminalPositive : '',\n enquiry : '',\n emailReceiver : ''\n });\n setResult({...result, errors : data.errors, results : \"ok\"});\n }\n catch(ex){\n\n }\n setPending(false);\n };\n fetchData();\n // eslint-disable-next-line\n }, [triggerForm]);\n\n return(\n - \n
- \n \n \n
- \n \n \n
- \n \n \n
\n \n
\n )\n}\n\nfunction MarineForm(){\n \n const [formValue, setFormValue] = useState({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n searchOption : '',\n enquiry : '',\n emailReceiver : ''\n });\n\n const [pending, setPending] = useState(false);\n const [triggerForm, setTriggerForm] = useState(0);\n const [result, setResult] = useState({errors : [], results : null});\n\n function submit(e){\n e.preventDefault();\n e.stopPropagation();\n setPending(true);\n setResult({errors : [], results : null});\n setTriggerForm(triggerForm + 1);\n }\n\n function handChange(el){\n const elName = el.target.name;\n const elValue =el.target.value;\n setFormValue({...formValue, [elName] : elValue});\n }\n\n useEffect(() => {\n if(triggerForm === 0){\n return;\n }\n const fetchData = async() => {\n try{\n const res = await fetch(env.apiBase + '/api/form/batterymatcherformmarinesend', {\n method : 'post',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formValue)\n });\n const data = await res.json();\n console.log(\"data\", data);\n setFormValue({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n searchOption : '',\n enquiry : '',\n emailReceiver : ''\n });\n setResult({...result, errors : data.errors, results : \"ok\"});\n }\n catch(ex){\n\n }\n setPending(false);\n };\n fetchData();\n // eslint-disable-next-line\n }, [triggerForm]);\n\n return(\n \n \n
\n )\n}\n\nfunction CaravanForm(){\n \n const [formValue, setFormValue] = useState({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n searchOption : '',\n enquiry : '',\n emailReceiver : ''\n });\n\n const [pending, setPending] = useState(false);\n const [triggerForm, setTriggerForm] = useState(0);\n const [result, setResult] = useState({errors : [], results : null});\n\n function submit(e){\n e.preventDefault();\n e.stopPropagation();\n setPending(true);\n setResult({errors : [], results : null});\n setTriggerForm(triggerForm + 1);\n }\n\n function handChange(el){\n const elName = el.target.name;\n const elValue =el.target.value;\n setFormValue({...formValue, [elName] : elValue});\n }\n\n useEffect(() => {\n if(triggerForm === 0){\n return;\n }\n const fetchData = async() => {\n try{\n const res = await fetch(env.apiBase + '/api/form/batterymatcherformmarinesend', {\n method : 'post',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(formValue)\n });\n const data = await res.json();\n console.log(\"data\", data);\n setFormValue({\n name : '',\n phoneNumber : '',\n email : '',\n location : '',\n searchOption : '',\n enquiry : '',\n emailReceiver : ''\n });\n setResult({...result, errors : data.errors, results : \"ok\"});\n }\n catch(ex){\n\n }\n setPending(false);\n };\n fetchData();\n // eslint-disable-next-line\n }, [triggerForm]);\n\n return(\n \n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport utils from 'utils';\nimport cmsUtils from '../../cmsUtils';\nimport { BatteryMatcherForm } from './batteryMatcherForm';\nimport { getFormStyle } from './formStyle';\n//import { useRef } from 'react';\n\nexport function Form(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'form', item.cssClass || item.anchorName || '');\n const formSelect = cmsUtils.payload(item, 'formSelect') || 'return';\n const s = getFormStyle();\n \n return(\n \n {\n formSelect === 'battery' &&
\n )\n}","import { variables } from \"../../../../cssInJs\";\n\n\nexport function getFormStyle(){\n return{\n form : {\n maxWidth: '960px',\n margin: 'auto'\n },\n batteryMatcherForm : {\n //color: 'red'\n 'ul' : {\n listStyle: 'none',\n display: 'flex',\n maxWidth: '516px',\n paddingLeft: '0px'\n },\n 'li' : {\n flex: '1 0 auto',\n 'button.selected' : {\n background: variables.darkTealColor,\n color: 'white'\n }\n },\n '.col-form-label' : {\n textAlign: 'right'\n }\n }\n }\n}","import React from 'react';\nimport { Form } from './view/form';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'Form', \n itemElt: (item, cmsOption) => \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\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 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 let el = document.querySelector('[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 }\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
\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 {subItemsElts}
\n {\n (item.anchorName && item.anchorName === 'trade') &&\n \n { \n pagePending ?
\n );\n}\n\nfunction LoginView({checkAuth, auth}) {\n const [pending, setPending] = React.useState(false);\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n const [error, setError] = React.useState('');\n const router = useRouter();\n \n function submit(e) {\n \n setPending(true);\n e.preventDefault();\n e.stopPropagation();\n\n auth\n .signin(username, password)\n .then((user) => {\n //console.log(\"wwwwwwwwwww\", user);\n setPending(false);\n setError('');\n //router.push('/member/dashboard');\n router.push('/trade');\n })\n .catch((error) => {\n console.log(error);\n setPending(false);\n setError(error.message);\n });\n }\n\n function signout(e) {\n e.preventDefault();\n e.stopPropagation();\n\n auth.signout().then(user => {\n //router.push('/admin/login')\n router.push('/');\n }).catch(error => {\n console.log(error)\n })\n }\n\n if(checkAuth){\n return(\n \n \n
\n \n \n )\n }\n\n return(\n You are already logged in
\n \nTrade Login
\n\n
\n \n \n
\n \n Don't have an account? Apply Here \n
\n \n Forgot Password? \n
\n changeCurrnetProduct(item.brandName)}>\n \n \n
\n );\n\n return(\n \n { buttons }\n
\n )\n}\n\n//disabled = {currentInfo === item.name}","import React from 'react'\nimport { useTable, useSortBy } from 'react-table'\n\nexport function Table({ columns, data }) {\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n rows,\n prepareRow,\n } = useTable(\n {\n columns,\n data,\n },\n useSortBy\n )\n\n return (\n <>\n | \n {column.render('Header')}\n {/* Add a sort direction indicator */}\n | \n ))}\n
|---|
| {cell.render('Cell')} | \n )\n })}\n
![\"product\"](\"/assets/logos/logo.png\"){kind=logo}
\n \n )\n }\n },\n {\n Header: 'Part Number',\n Cell : (c) => {\n return(\n {c.row.original.partNumber}
\n )\n }\n //accessor: 'partNumber'\n },\n {\n Header: 'Category',\n Cell : (c) => {\n return(\n c.row.original.categoryCode === 'no' ? '' : \n {c.row.original.category}
\n )\n }\n },\n {\n Header: 'Description',\n accessor: 'description'\n },\n {\n Header: 'Voltage',\n accessor: 'voltage'\n },\n {\n Header: 'Capacity',\n accessor: 'capacity'\n },\n {\n Header: 'QTY',\n accessor: '',\n Cell : (c) => {\n return( \n \n \n
\n )\n }\n },\n \n // eslint-disable-next-line\n ], []);\n\n const columnsMobile = useMemo(() => [\n // {\n // Header: '',\n // accessor: 'image',\n // Cell : (c) => {\n // return(\n // \n // )\n // }\n // },\n {\n Header: 'Part Number',\n accessor: 'partNumber',\n Cell : (c) => {\n return(\n openPopUpFunction(products[c.row.index])} className={`category-in-table`} data-category-code={c.row.original.categoryCode}>\n { c.row.original.partNumber }\n
\n )\n }\n },\n {\n Header: 'Category',\n Cell : (c) => {\n return(\n c.row.original.categoryCode === 'no' ? '' : \n {c.row.original.category}
\n )\n }\n },\n {\n Header: 'QTY',\n accessor: '',\n Cell : (c) => {\n return( \n \n \n
\n )\n }\n },\n \n // eslint-disable-next-line\n ], []);\n\n useLayoutEffect(() => {\n if(currentInfo !== ''){\n utils.ui.scrollTo(\"poViewTable\");\n }\n\n // eslint-disable-next-line\n }, []);\n\n // const _categories = !categories.brandCategories ? null : categories.brandCategories.map((item, index) =>\n // { scrollToCategory(item.categoryCode) }}> { item.categoryName } \n // );\n \n const _categories = !categories.brandCategories || (categories.brandCategories && categories.brandCategories.length <=0) ? null : categories.brandCategories.map((item, index) =>\n { scrollToCategory(item.categoryCode) }}> { item.categoryName } \n );\n\n const openPopUpFunction = ((item) => {\n setOpenPopUp({status : true, item : item});\n document.body.style.overflow = \"hidden\";\n });\n\n const closePopUpFunction = (() => {\n setOpenPopUp({status : false, item : null});\n document.body.style.overflow = \"unset\";\n });\n\n return(\n \n \n
\n \n \n
\n \n {'Part Number : ' + openPopUp.item.partNumber}\n
\n \n {'Brand : ' + openPopUp.item.brand}\n
\n \n {'Category : ' + (openPopUp.item.category === 'NO' ? '' : openPopUp.item.category)}\n
\n \n {'Des : ' + openPopUp.item.description}\n
\n \n {'Voltage : ' + openPopUp.item.voltage}\n
\n \n {'Capacity : ' + openPopUp.item.capacity}\n
\n \n
\n \n {\n _categories &&\n
\n {\n products.length < 1 ?\n \n \n Categories:\n \n {_categories}\n
\n }\n \n \n
\n \n \n { currentInfo }\n
\n\n {/* {\n checkAuth &&\n \n }\n */}\n \n {\n checkAuth &&\n \n }\n {\n products.length > 0 &&\n \n }\n
\n \n { (currentInfo && currentInfo !== '') && 'No Products '} \n
: \n \n
\n
\n } \n {\n products.length > 0 &&\n \n \n
\n }\n \n
\n );\n \n return( \n \n
\n \n \n \n
\n \n { 'Brand : ' + item.brand}
\n {\n item.category !== 'NO' &&\n { 'Category : ' + item.category}
\n }\n { 'Part Number : ' + item.partNumber}
\n {\n (item.voltage && item.voltage !== '') &&\n { 'Voltage: ' + item.voltage}
\n }\n {\n (item.capacity && item.capacity !== '') &&\n { 'Capacity: ' + item.capacity}
\n }\n\n \n \n
\n \n {\n removeSavedProduct(index)\n }} />\n
\n \n \n \n :\n
\n \n \n
\n {\n _savedProducts.length > 0 ?\n \n {\n _savedProducts.length > 0 &&\n
\n \n \n
\n }\n\n 0 ? 'col-2' : 'col-12' }`}>\n
\n Location is invalid
\n \n {_savedProducts}\n
\n\n \n \n \n
\n\n Purchase Order is invalid
\n \n \n
\n\n \n \n \n
\n \n \n \n
\n \n \n \n
\n\n \n \n
\n\n \n
\n }\n No Products
\n\n Your order currently has no products. Please select the brand to begin your trade order.\n
\n{summaryMessage}
\n\n let message = errors;\n if (Array.isArray(errors)) {\n if (errors.length === 0) return null;\n message = errors.map((error, index) => {error.errorMessage}
);\n }\n\n return(\n {message}
\n )\n\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Fragment, useEffect, useState } from 'react';\nimport style from './historyViewStyle';\nimport { AiOutlineCloseCircle } from \"react-icons/ai\";\nimport config from 'config';\nimport env from 'env';\nimport { ErrorMessage } from '../errorMessage/errorMessage';\nimport { Loading } from 'components';\n\n\nfunction GetHistoryOrder({historyOrders, confirmReOrder}){\n\n const [historyOrdersStatus, setHistoryOrdersStatus] = useState({\n historyOrders : historyOrders\n });\n\n const getDateFormat = ((dateItem) => {\n const _date = new Date(dateItem);\n return _date.getDate() + \"-\" + (_date.getMonth() + 1) + \"-\" + _date.getFullYear()\n });\n\n const openItem = ((index) => {\n // const preItem = document.querySelector(\"#\" + id);\n // const preItemClass = JSON.parse(JSON.stringify(document.querySelector(\"#\" + id).classList.toString()));\n\n // const _items = document.querySelectorAll('.ho-items');\n // _items.forEach(el => {\n // el.classList.remove(\"open\");\n // el.classList.add(\"close\");\n // });\n\n // if(preItemClass.toString().includes(\"open\")){\n // preItem.classList.remove(\"open\");\n // preItem.classList.add(\"close\");\n // }\n // else if(preItemClass.toString().includes(\"close\")){\n // preItem.classList.remove(\"close\");\n // preItem.classList.add(\"open\");\n // }\n \n setHistoryOrdersStatus(pre => {\n let _new = {...pre};\n const templeListOpen = JSON.parse(JSON.stringify(_new.historyOrders[index].listOpen));\n _new.historyOrders.forEach(el => {\n el.listOpen = false;\n });\n if(templeListOpen === false){\n _new.historyOrders[index].listOpen = true;\n }\n return _new;\n });\n });\n \n const _historyOrders = historyOrdersStatus.historyOrders.map((item, index) =>\n \n
\n );\n\n return(\n \n
\n \n {'Order No : ' + item.orderNo}\n
\n \n {'Location : ' + item.location}\n
\n \n {'Order Date : ' + getDateFormat(item.dateCreated)}\n
\n \n {'Total QTY : ' + item.totalQty}\n
\n \n \n \n
\n \n {\n item.items.map((sitem, sindex) =>\n
\n \n
)\n }\n { 'Part Number : ' + sitem.partNumber}
\n { 'QTY : ' + sitem.qty}
\n \n {\n _historyOrders\n }\n
\n )\n}\n\nexport function HistoryView({closePopUp, confirmReOrder}){\n console.log(\"HistoryView\");\n const [hoStatus, setHoStatus] = useState({\n errors : [],\n historyOrders : null,\n pagePending : true\n });\n\n console.log(\"2csd\", hoStatus);\n\n useEffect(()=>{\n const fetchData = async() => {\n let _errors = [];\n let _historyOrders = null;\n try{\n const _options = { headers: { 'Content-Type': 'application/json' } };\n await config.apiNetJwt(_options);\n const res = await fetch(env.apiBase + '/api/purchaseorder/GetHistoryOrder', {\n method : 'get',\n ..._options\n });\n const data = await res.json();\n console.log(\"data\", data);\n \n if(data.results.historyOrders && data.errors.length <= 0){\n //_historyOrders = data.results.historyOrders\n _historyOrders = [];\n data.results.historyOrders.forEach(el => {\n _historyOrders.push({...el, listOpen : false});\n });\n }\n \n //let aaa = JSON.parse(data.results.historyOrder[0].itemSerialized);\n //console.log(aaa);\n\n if(data.errors.length > 0){\n _errors = data.errors;\n }\n\n }\n catch(ex){}\n \n setHoStatus({\n ...hoStatus,\n historyOrders : _historyOrders,\n errors : _errors,\n pagePending : false\n });\n }\n fetchData();\n // eslint-disable-next-line\n }, []);\n\n return(\n \n {\n hoStatus.pagePending ? \n \n }\n
\n \n
\n {\n (hoStatus.historyOrders && hoStatus.historyOrders.length > 0) ?\n No Products
\n }\n\n
\n \n
\n Please login
\n\n Login \n
\n \n
\n );\n\n return(\n \n \n
\n \n { 'Brand : ' + item.brand}
\n {\n item.category !== 'NO' &&\n { 'Category : ' + item.category}
\n }\n { 'Part Number : ' + item.partNumber}
\n {\n (item.voltage && item.voltage !== '') &&\n { 'Voltage: ' + item.voltage}
\n }\n {\n (item.capacity && item.capacity !== '') &&\n { 'Capacity: ' + item.capacity}
\n }\n { 'QTY : ' + item.qty }
\n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport {useEffect, useState, useMemo, Fragment } from 'react';\nimport style from './purchaseOrderStyle';\nimport utils from '../../../../utils';\n//import cmsUtils from '../../cmsUtils';\nimport { useAuth } from 'auth';\nimport { Loading } from 'components';\n//import { Redirect } from 'react-router-dom';\nimport { BrandList } from '../brandList/brandList';\nimport { PurchaseOrderView } from '../purchaseOrderView/purchaseOrderView';\nimport { OrderView } from '../orderView/orderView';\nimport { HistoryView } from '../historyView/historyView';\nimport { PopupMsg } from '../popupMsg/popupMsg';\nimport { AddCartPopUp } from '../addCartPopUp/addCartPopUp';\nimport { ErrorMessage } from '../errorMessage/errorMessage';\nimport { createPortal } from \"react-dom\";\nimport config from 'config';\nimport env from 'env';\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\n// const initialBrands = [\n// {name : 'DURACELL', totalQty : 0, logoImage : '/assets/brand/duracell-logo.jpg'},\n// {name : 'PROCELL', totalQty : 0, logoImage : '/assets/brand/procell.jpg' },\n// {name : 'ENERGIZER', totalQty : 0, logoImage : '/assets/brand/energizer-logo.jpg'},\n// {name : 'CENTURY', totalQty : 0, categories : [{name : 'AGM', code : 'agm'}, {name : 'VRLA', code : 'vrla'}], logoImage : '/assets/brand/century-logo.jpg'},\n// {name : 'YUASA', totalQty : 0, categories : [{name : 'AGM', code : 'agm'}, {name : 'VRLA', code : 'vrla'}], logoImage : '/assets/brand/yuasa.jpg'},\n// {name : 'EMERGENCY LIGHTING', totalQty : 0, categories : [{name : 'LIFEPO4', code : 'lifepo4'}, {name : 'NICD', code : 'nicd'}], logoImage : '/assets/logos/logo.png'},\n// {name : 'EATON', totalQty : 0, categories : [\n// {name : '1MBS', code : '1mbs'},\n// {name : 'DC POWER (AU)', code : 'dc-power-au'},\n// {name : 'DC RACKS & ePDU', code : 'dc-racks-epdu'},\n// {name : 'LINE INTERACTIVE', code : 'line-interactive'},\n// {name : 'ONLINE - SMALL', code : 'online-small'},\n// {name : 'SOFTWARE & CONNECTIVITY', code : 'software-connectivity'},\n// {name : 'SPD', code : 'spd'},\n// {name : 'STANDBY AVR', code : 'standby-avr'}\n// ], logoImage : '/assets/brand/eaton-logo.jpg'},\n// {name : 'RAITAR', totalQty : 0, logoImage : '/assets/logos/logo.png'},\n// {name : 'SONNENSCHEIN', totalQty : 0, logoImage : '/assets/brand/sonnenschein.jpg'},\n// {name : 'SAFT', totalQty : 0, logoImage : '/assets/brand/saft.jpg'},\n// {name : 'ODYSSEY', totalQty : 0, logoImage : '/assets/logos/logo.png'},\n// {name : 'VICTRON', totalQty : 0, logoImage : '/assets/logos/logo.png'},\n// {name : 'BAE', totalQty : 0, logoImage : '/assets/logos/logo.png'},\n// {name : 'FULLRIVER', totalQty : 0, logoImage : '/assets/logos/logo.png'},\n// {name : 'VISON', totalQty : 0, logoImage : '/assets/logos/logo.png'}\n// ];\n\nexport function PurchaseOrder(props){\n\n console.log(\"PurchaseOrder start\");\n \n const auth = useAuth();\n const item = props.item;\n\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'purchaseOrder', item.cssClass || item.anchorName || '');\n const [purchaseOrderState, setPurchaseOrderState] = useState({\n pagePending : true,\n checkAuth : false,\n firstRunCheck : false,\n currentInfo : '',\n // currentProduts : null,\n // currentCategories : null,\n currentProduts : [],\n currentCartProducts : [],\n currentCategories : {},\n savedProducts : [],\n //savedProductsFiltered : [],\n isMobile : false,\n triggerConfirmOrder : 0,\n //brands : JSON.parse(JSON.stringify(initialBrands)),\n brands : [],\n backUpBrands : null,\n errors : [],\n orderConfirm : false,\n reOrder : false,\n location : '',\n purchaseOrderNum : '',\n quoteRequested : '',\n comments : ''\n });\n\n console.log(\"purchaseOrderState ::: \", purchaseOrderState);\n\n const [openPopUp, setOpenPopUp] = useState(false);\n const [popUpItem, setPopUpItem] = useState(\"order\");\n\n useEffect(() => {\n console.log(\"PurchaseOrder - useEffect1\");\n if(cmsOption.isCmsEdit){\n return;\n }\n \n //let _errors = [{ errorMessage : 'abgsdfsd'}];\n let _errors = [];\n\n const checkAuth = async() => { \n let _checkAuth = purchaseOrderState.checkAuth;\n if(await auth.loggedIn()){\n _checkAuth = true;\n }\n\n let _isMobile = false;\n if(window.innerWidth <= 600){\n _isMobile = true;\n }\n\n const fetchData = async()=>{\n\n const res = await fetch(env.apiBase + '/api/purchaseorder/getbrands');\n const data = await res.json();\n console.log(\"data :::: \", data);\n\n let _brands = [];\n\n if(data && data.results && data.results.brands){\n _brands = data.results.brands;\n }\n \n setPurchaseOrderState({\n ...purchaseOrderState,\n pagePending : false,\n checkAuth : _checkAuth,\n firstRunCheck : true,\n isMobile : _isMobile,\n errors : _errors,\n brands : _brands,\n backUpBrands : JSON.parse(JSON.stringify(_brands)),\n });\n };\n fetchData();\n }\n\n const timer = setTimeout(() => {\n checkAuth();\n }, 1000);\n\n return () => {\n clearTimeout(timer);\n }\n // eslint-disable-next-line\n }, []);\n\n useEffect(() => {\n console.log(\"PurchaseOrder - useEffect2\");\n if(!purchaseOrderState.currentInfo){\n return;\n }\n let _errors = [];\n let _currentProduts = null;\n const fetchData = async() => {\n try{ \n const res = await fetch(env.apiBase + '/api/purchaseorder/GetPurchaseOrderItemsByBrandName/' + purchaseOrderState.currentInfo);\n const data = await res.json();\n console.log(\"data ------------ \", data);\n\n if(data.results.poProducts){\n _currentProduts = [];\n data.results.poProducts.forEach(el => {\n _currentProduts.push({...el, qty : '0' });\n });\n }\n\n if(data.errors.length > 0){\n _errors = data.errors;\n }\n }\n catch(ex){}\n\n let _indexForBrand = findIndexForBrand();\n const _currentCategories = purchaseOrderState.brands[_indexForBrand];\n\n setPurchaseOrderState({\n ...purchaseOrderState,\n pagePending : false,\n errors : _errors,\n currentProduts : _currentProduts,\n currentCategories : _currentCategories,\n currentCartProducts : []\n });\n };\n fetchData();\n // eslint-disable-next-line\n }, [purchaseOrderState.currentInfo]);\n\n useEffect(() => {\n console.log(\"PurchaseOrder - useEffect3\");\n if(cmsOption.isCmsEdit || purchaseOrderState.triggerConfirmOrder === 0){\n return;\n }\n let _errors = [];\n let _orderConfirm = true;\n\n const fetchData = async() => {\n try{ \n const _options = { headers: { 'Content-Type': 'application/json' } };\n await config.apiNetJwt(_options);\n const res = await fetch(env.apiBase + '/api/purchaseorder/ConfirmOrder', {\n method : 'post',\n //headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n items : purchaseOrderState.savedProducts,\n reOrder : purchaseOrderState.reOrder,\n location : purchaseOrderState.location,\n purchaseOrderNum : purchaseOrderState.purchaseOrderNum,\n quoteRequested : purchaseOrderState.quoteRequested,\n comments : purchaseOrderState.comments\n }),\n ..._options,\n });\n const data = await res.json();\n if(data.errors.length > 0){\n _errors = data.errors;\n _orderConfirm = false;\n }\n }\n catch(ex){}\n\n let _brands = JSON.parse(JSON.stringify(purchaseOrderState.backUpBrands));\n\n //reset\n setPurchaseOrderState({\n ...purchaseOrderState,\n pagePending : false,\n currentInfo : '',\n // currentProduts : null,\n // currentCategories : null,\n currentProduts : [],\n currentCategories : {},\n currentCartProducts : [],\n savedProducts : [],\n //savedProductsFiltered : [],\n //brands : JSON.parse(JSON.stringify(initialBrands)),\n brands : _brands,\n errors : _errors,\n orderConfirm : _orderConfirm,\n reOrder : false,\n location : '',\n purchaseOrderNum : '',\n quoteRequested : '',\n comments : ''\n });\n utils.ui.scrollTo(\"purchaseorderpanelmsg\");\n }\n fetchData();\n // eslint-disable-next-line\n }, [purchaseOrderState.triggerConfirmOrder]);\n\n const changeCurrnetProduct = ((value) => {\n \n setPurchaseOrderState({\n ...purchaseOrderState,\n currentInfo : value,\n pagePending : true,\n orderConfirm : false\n });\n });\n\n const changeProductQty = ((obj) => {\n setPurchaseOrderState(pre => {\n let _new = {...pre};\n let _qty = obj.qty;\n let _index = _new.currentProduts.findIndex(x => x.partNumber === obj.partNumber);\n if(_qty.length >=2 && _qty.charAt(0) === \"0\"){\n _qty = _qty.replace(\"0\", \"\");\n }\n _new.currentProduts[_index].qty = _qty;\n let _indeCurrentCartProduct = _new.currentCartProducts.findIndex(x => x.partNumber === obj.partNumber);\n \n if(_indeCurrentCartProduct === -1){\n if(_new.currentProduts[_index].qty !== '0'){\n _new.currentCartProducts.push(_new.currentProduts[_index]);\n }\n }\n else{\n if(_new.currentProduts[_index].qty === '0'){\n _new.currentCartProducts.splice(_indeCurrentCartProduct, 1);\n }\n }\n return _new;\n });\n\n });\n\n const removeSavedProduct = ((index) => {\n purchaseOrderState.savedProducts.splice(index, 1);\n setPurchaseOrderState({...purchaseOrderState});\n });\n \n const changeSavedProductQty = ((obj) => {\n\n setPurchaseOrderState(pre => {\n let _new = {...pre};\n \n let _qty = obj.qty;\n let _index = _new.savedProducts.findIndex(x => x.partNumber === obj.partNumber);\n if(_qty.length >=2 && _qty.charAt(0) === \"0\"){\n _qty = _qty.replace(\"0\", \"\");\n }\n _new.savedProducts[_index].qty = _qty;\n return _new;\n });\n });\n\n const findIndexForSavdProduct = ((partNumber) => {\n let index = -1;\n index = purchaseOrderState.savedProducts.findIndex(x => x.partNumber === partNumber);\n return index;\n });\n\n // const findIndexForCurrentCartProduct = ((partNumber) => {\n // let index = -1;\n // index = purchaseOrderState.currentCartProducts.findIndex(x => x.partNumber === partNumber);\n // return index;\n // });\n\n const findIndexForBrand = (() => {\n let index = -1;\n index = purchaseOrderState.brands.findIndex(x => x.brandName === purchaseOrderState.currentInfo);\n return index;\n });\n\n const addCartOrder = (() => {\n setPopUpItem('addcart');\n setOpenPopUp(true);\n document.body.style.overflow = \"hidden\";\n });\n\n const order = (() => {\n setOpenPopUp(true);\n document.body.style.overflow = \"hidden\";\n });\n\n const history = (() => {\n setPopUpItem('history');\n setOpenPopUp(true);\n document.body.style.overflow = \"hidden\";\n });\n\n const confirmCartOreder = (() => {\n closePopUp();\n\n purchaseOrderState.currentCartProducts.forEach(el => {\n const copiedEl = JSON.parse(JSON.stringify(el));\n const sIndex = findIndexForSavdProduct(copiedEl.partNumber);\n if(sIndex !== -1){\n purchaseOrderState.savedProducts[sIndex].qty = \n parseInt(purchaseOrderState.savedProducts[sIndex].qty) + parseInt(copiedEl.qty);\n }\n else{\n purchaseOrderState.savedProducts.push(copiedEl);\n }\n });\n \n purchaseOrderState.currentProduts.forEach(sEl=> {\n sEl.qty = \"0\";\n });\n \n purchaseOrderState.currentCartProducts = [];\n setPurchaseOrderState({...purchaseOrderState});\n });\n\n const confirmOrder = ((location, purchaseOrderNum, quoteRequested, comments) => {\n closePopUp();\n console.log('', location, purchaseOrderNum, quoteRequested, comments);\n utils.ui.scrollTo(\"purchaseorderpanel\");\n setPurchaseOrderState({\n ...purchaseOrderState,\n pagePending : true,\n location : location,\n purchaseOrderNum : purchaseOrderNum,\n quoteRequested : quoteRequested,\n comments : comments,\n triggerConfirmOrder : purchaseOrderState.triggerConfirmOrder + 1\n });\n });\n\n const confirmReOrder = ((reOrderProcuts) => {\n closePopUp();\n console.log(\"reOrderProcuts\", reOrderProcuts);\n setPurchaseOrderState({\n ...purchaseOrderState,\n pagePending : true,\n //savedProductsFiltered : reOrderProcuts.items,\n savedProducts : reOrderProcuts.items,\n reOrder : true,\n location : reOrderProcuts.location,\n purchaseOrderNum : reOrderProcuts.purchaseOrderNum,\n triggerConfirmOrder : purchaseOrderState.triggerConfirmOrder + 1\n });\n });\n\n const closePopUp = (() => {\n setOpenPopUp(false);\n setPopUpItem('order');\n document.body.style.overflow = \"unset\";\n });\n\n const brandList = useMemo(() => {\n return(\n \n \n :\n
\n \n
\n {\n _currentCartProductsFiltered.length > 0 ?\n \n {_currentCartProductsFiltered}\n
\n \n \n
\n No Products
\n }\n\n
\n )\n }\n\n return(\n \n Purchase Order Item\n
\n \n {\n purchaseOrderState.pagePending ?
\n \n { brandList }\n {\n purchaseOrderState.currentProduts && purchaseOrderView \n }\n
\n }\n \n Successfully sent!\n
\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 {\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 {bottomText}
\n\n \n {sliderAwardItems}\n \n
\n );\n}","import React from 'react';\nimport { SliderAwardPanel } from './view/sliderAwardPanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'SliderAwardPanel', \n itemElt: (item, cmsOption) => \r\n \r\n \r\n {canPlay && playerSize && }\r\n {canPlay && playerStatus === 'loaded' &&
\r\n \r\n {muted?
}\r\n\r\n {!canPlay && !mobileImageUrl && \r\n
}\r\n \n {/* {canPlayVideo() ?
\n );\n}\n","import React from 'react';\nimport { VideoPanel } from './view/videoPanel';\n\nexport const renderRule = {\n match: (item, cmsOption) => item.itemTypeCode === 'VideoPanel', \n itemElt: (item, cmsOption) => \n \n {slides}\n \n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function BannerItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const captionButton = cmsUtils.payload(item, 'CaptionButton') && cmsUtils.payload(item, 'CaptionButton') !== \"\" ? cmsUtils.payload(item, 'CaptionButton') : \"READ MORE\";\n \n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n const titlePanel = captionTitle ? (\n linkUrl ? (\n \n { captionButton } \n
\n ) : ()\n ) : null;\n\n const linkOverlay = linkUrl && !captionTitle ? (\n \n {titlePanel &&
\n );\n\n\n}\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function Panel(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n \n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n //console.log(bgTheme)\n\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || '');\n\n const subItemsElts = subItems.map((subItem, index) =>\n {titlePanel}
}\n {linkOverlay && linkOverlay}\n \n {subItemsElts}\n
\n handleClick(e)}>
\n {pdfView}\n \n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}\n\n\nfunction replaceEmbedCodes(block, cmsOption) {\n const embedDataList = cmsOption?.pageData?.embedDataList;\n const embedCodes = block.querySelectorAll('[data-embed-jaba]')\n embedCodes.forEach(embed => {\n const id = embed.getAttribute(\"data-embed-jaba\");\n const found = utils.array.find(embedDataList, x => x.id === id);\n if (found){\n //console.log(found)\n ReactDOM.render(, embed);\n }\n })\n //console.log(embedCodes, embedDataList)\n}\n\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function ImagePanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(cmsOption)\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n \n const cssClass = utils.classNames('cms_item', 'imagePanel', 'parallax', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n \n const bgUrl = cmsOption.pageOptions && cmsOption.pageOptions.imagePath ?\n utils.site.resourcePath(cmsOption.pageOptions.imagePath):\n utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const htmlBlock = React.useRef(null);\n const cssClass2 = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n const content = cmsUtils.payload(item, 'Content');\n\n return (\n \n
\n );\n}","//import { css, keyframes } from '@emotion/core'\n//import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq, variables } from '../../../cssInJs'\n\nexport default {\n pageTiles : css({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n overflow:'hidden'\n }),\n pageTile__tile : css(mq({\n flex: '0 0 100%',\n maxWidth: '100%',\n padding: '10px',\n zIndex:1,\n '&:nth-of-type(even)' : {\n '.pageTile__bsyc__bg' : mq({\n order: ['0',null,'2'],\n }),\n '.pageTile__bsyc__content__details' : mq({\n order: '1'\n })\n }\n })),\n\n tile__content : css({\n // display: 'flex',\n // flexDirection: 'row',\n // justifyContent: 'space-between',\n // width: '100%',\n // height: '100%',\n // cursor: 'pointer',\n // position: 'relative',\n // flexWrap: 'wrap',\n '&:hover' : {\n textDecoration: 'none',\n '& .pageTile__bsyc__content__details' : {\n color: 'white',\n backgroundColor: variables.lightTealColor\n // '&.default' : css({\n // backgroundColor: 'rgba(0,113,188,1)'\n // }),\n // '&.red' : css({\n // backgroundColor: 'rgba(211,61,2,1)'\n // }),\n // '&.green' : css({\n // backgroundColor: 'rgba(0, 146, 69,1)'\n // })\n },\n '& .pageTile__bsyc__bg2' : {\n //transform: scale(1.05)\n transform : 'scale(1.05)'\n }\n }\n }),\n\n tile__flip__wrapper : css({\n zIndex:'-1', \n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n width: '100%',\n height: '100%',\n cursor: 'pointer',\n position: 'relative',\n flexWrap: 'wrap'\n }),\n\n// tile__bg : css(mq({\n// height: '0',\n// //paddingTop: '30%',\n// paddingTop: ['50%','35%','30%'],\n// backgroundPosition: '50%',\n// backgroundRepeat: 'no-repeat',\n// backgroundSize: 'cover',\n// flex: '1 1 300px'\n// })),\n\ntile__bg : css(mq({\n height: '0',\n paddingTop: ['50%','35%','30%'],\n //height: ['50%','35%','30%'],\n flex: '1 1 300px',\n overflow:'hidden',\n position:'relative'\n})),\n\ntile__bg2 : css(mq({\n height: '100%',\n backgroundPosition: '50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n //overflow:'hidden',\n transition:'all .2s',\n position:'absolute',\n top:'0px',\n width:'100%'\n})),\n\n tile__details : css({\n overflow: 'hidden',\n flexGrow: '1',\n textAlign: 'center',\n width: '100%',\n bottom: '0',\n backgroundColor: variables.lightGreyColor,\n // '&.default' : css({\n // backgroundColor: 'rgba(0, 113, 188,.5)'\n // }),\n // '&.red' : css({\n // backgroundColor: 'rgba(211, 61, 2,.5)'\n // }),\n // '&.green' : css({\n // backgroundColor: 'rgba(0, 146, 69,.5)'\n // }),\n //backgroundColor : '#77cf22',\n flex: '1 1 300px',\n transition: 'all .2s ease-in-out',\n color: variables.greyColor,\n position:'relative',\n '& .pageTile__bsyc__container' : mq({\n //position: 'absolute',\n position: ['static,',null,'absolute'],\n top: '50%',\n left:'50%',\n transform: ['none',null,'translate(-50%, -50%)'],\n width:['100%',null,'90%'],\n padding:['1rem',null,'0px'],\n '& .pageTile__bsyc__title' : {\n //fontFamily: 'proxima-soft, sans-serif',\n fontSize: '2rem',\n //textTransform: 'uppercase',\n //fontWeight: '700',\n lineHeight: '1',\n margin: '0',\n paddingTop: '.5rem',\n paddingBottom: '.5rem',\n color:'inherit'\n },\n '& .pageTile__bsyc__desc' : {\n lineHeight: '1.3',\n fontSize: '.9rem',\n //color: '#3d3d3d',\n minHeight: '70px',\n color:'inherit'\n }\n })\n })\n}","//import React from 'react';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function PageTilesBsyc(props) {\n const item = props.item;\n //const detailHoverBgColor = props.detailHoverBgColor ? props.detailHoverBgColor : \"black\";\n const cmsOption = props.cmsOption || {};\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'))\n const pageTileElts = pages.map((page, index) =>\n \n
\n \n {pageTileElts}\n
\n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n const colorTheme = page.colorTheme;\n const index = props.idx;\n return (\n \n \n \n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function SingleBanner(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const alignV = cmsUtils.payload(item, 'AlignV') || '50%';\n\n const cssClass = utils.classNames('cms_item', 'single-banner', 'banner-item', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n const titlePanel = captionTitle ? (\n linkUrl ? (\n\n
\n \n \n
\n \n \n
\n \n \n {\n (page.pageTitle && page.pageTitle !== '') &&\n
\n \n {page.pageTitle}\n
\n }\n\n \n {page.tileDesc || page.description}\n
\n \n {titlePanel &&
\n );\n}","import React, { useRef } from 'react';\nimport env from '../../../env';\nimport { usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Button, ErrorMessage } from '../../../components';\nimport { getContactModel } from './contactFormModel';\nimport { gtm } from '../../../lib/tracking';\nimport ReCAPTCHA from \"react-google-recaptcha\";\n\nexport function Contact(props) {\n\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 const recaptchaRef = useRef(null);\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 recaptchaValue = recaptchaRef.current.getValue();\n const value = { \n ...form.getValue(),\n emailReceiver: emailReceiver,\n mailchimpApiKey : mailchimpApiKey,\n mailchimpAudienceKey : mailchimpAudienceKey,\n recaptchaValue : recaptchaValue\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 // if (status === 'done') {\n // //navigate(`/task/view/${taskId}`)\n // window.location.reload();\n // }\n\n if (post.done() && sendingStatus === 'pending') {\n var value = form.getValue();\n gtm.sendEvent('contactFormSubmitted', {contactEmail: value.email} )\n form.reset(model);\n recaptchaRef.current.reset();\n setSendingStatus(null);\n\n 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 \n //let stateList = ['ACT', 'NSW', 'NT', 'QLD', 'SA', 'TAS', 'VIC', 'WA'].map(x => { return { name: x, value: x } })\n let stateList = [\n {name: 'What state are you from?', value: ''},\n {name: 'Australian Capital Territory', value: 'ACT'},\n {name: 'New South Wales', value: 'New South Wales'},\n {name: 'Victoria', value: 'Victoria'},\n {name: 'South Australia', value: 'South Australia'},\n {name: 'Queensland', value: 'Queensland'},\n {name: 'Western Australia', value: 'Western Australia'},\n {name: 'Northern Territory', value: 'Northern Territory'},\n {name: 'Tasmania', value: 'Tasmania'}\n ]\n \n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [validators.Required()], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n enquiry: [data.enquiry || '', [validators.Required()], { label: 'Your Message', type: 'textarea' }],\n attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }],\n state : [data.state || '', [validators.Required()], { label: null, type: 'select', options: stateList }],\n }); \n return model;\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { Contact } from './contactForm';\n\nexport function ContactForm(props) {\n const item = props.item;\n //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}","import React from 'react';\n// import { Item } from '../../items/item';\n// import { SiteLink } from 'shared/link/siteLink';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { YoutubeBannerMobilePopup } from '../../../lib/youtube/youtubeBanner--mobilePopup';\n//import env from '../../../env';\n//import Slider from 'modules/slider/slider';\n//import {BannerPanel} from '../bannerPanel/view';\n\nexport function VideoPanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const videoCode = cmsUtils.payload(item, 'YoutubeCode');\n const playerId = 'ytBanner-' + (item.itemId).substr(0, 8);\n\n const video = {\n heightSet: heightSet,\n videoLinkOrId: videoCode,\n playerId: playerId\n }\n\n //const enableYoutube = env.isProd;\n const canPlayVideo = () => utils.css.screenWidth() >= 1200\n\n const cssClass = utils.classNames('cms_item', 'youtubePanel', item.cssClass || item.anchorName || '');\n\n //console.log(window.innerWidth, canPlayVideo())\n\n return (\n \n
\n\n \n {/* {canPlayVideo() ?
\n );\n}\n\n// function MobileSlider(props) {\n// const item = props.item;\n// const subItems = item.items || [];\n \n// const slides = subItems.map((subItem, index) =>\n// \n// {slides}\n//
\n// );\n// }\n\n// function SlideItem(props){\n// const item = props.item;\n// const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n// return (\n// \n// 
\n//
\n// );\n\n// }","import { css } from '@emotion/core';\nimport { variables, mq } from '../../../cssInJs';\n\nconst numberOfTiles = [1, 2, 3, 3]\n//const marginLR = [14, 14, 14, 14]\nconst marginTB = [14, 14, 14, 14]\n\nconst widthPercent = (index) => 100 / numberOfTiles[index] + '%'\n\nconst linkText = {\n color: variables.fontColor,\n fontSize: '0.8rem',\n //padding: '0 20px',\n // '&:hover': {\n // color: variables.fontColor,\n // }\n}\n\nexport const tileListStyle = {\n tiles: mq({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n //marginLeft: [-marginLR[0] / 2, -marginLR[1] / 2, -marginLR[2] / 2, -marginLR[3] / 2],\n //marginRight: [-marginLR[0] / 2, -marginLR[1] / 2, -marginLR[2] / 2, -marginLR[3] / 2],\n marginTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n marginBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n marginLeft: '-15px',\n marginRight: '-15px'\n //maxWidth:['960px'],\n //margin: 'auto'\n }),\n categoryList : mq({\n marginTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n marginBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n //maxWidth:['960px'],\n //margin: 'auto',\n 'div.ff.form-group' : {\n maxWidth: '250px'\n }\n }),\n container : mq({\n maxWidth: '960px',\n margin: 'auto'\n })\n}\n\nexport const tileStyle = {\n tile: mq({\n //paddingLeft: [marginLR[0] / 2, marginLR[1] / 2, marginLR[2] / 2, marginLR[3] / 2],\n //paddingRight: [marginLR[0] / 2, marginLR[1] / 2, marginLR[2] / 2, marginLR[3] / 2],\n paddingLeft : '15px',\n paddingRight : '15px',\n paddingTop: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n paddingBottom: [marginTB[0] / 2, marginTB[1] / 2, marginTB[2] / 2, marginTB[3] / 2],\n maxWidth: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexBasis: [widthPercent(0), widthPercent(1), widthPercent(2), widthPercent(3)],\n flexGrow: 0,\n flexShrink: 0\n }),\n tileLink: {\n background: '#fff',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n //padding: 5,\n //border: '1px solid red',\n '&:hover': {\n textDecoration: 'none',\n //background: '#f3f3f3'\n '& .buyNowBtn' : {\n backgroundColor: '#006892',\n color: 'white'\n },\n '& .bgImage' : {\n transform: 'scale(1.02)'\n }\n }\n },\n prdImage: {\n //padding: '0 5px',\n //maxWidth: '190px',\n //margin: 'auto',\n //width: '100%',\n backgroundColor: 'grey',\n //overflow: 'hidden'\n },\n bg: {\n //height: 0,\n //paddingBottom: '100%',\n paddingTop: '210px',\n backgroundPosition: 'center top',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n transition: 'all .2s ease-in-out'\n },\n shortDes : css({\n //textAlign:'center',\n //marginTop: '0.8rem',\n fontSize:'0.7rem',\n marginTop: '0.5rem',\n marginBottom : '0.5rem',\n color : variables.fontColor,\n lineHeight: '1'\n }),\n name: css(linkText, {\n fontWeight: 'bold',\n fontFamily: variables.familyHeader,\n //textAlign:'center',\n lineHeight: '1',\n //marginTop: '0.5rem',\n //color:variables.primaryColor,\n color: '#64b3c4',\n fontSize:'1.14rem'\n }),\n price: css(linkText, {\n //marginTop: 'auto',\n //textAlign:'center',\n //marginBottom:'1rem',\n fontWeight:'700',\n fontSize:'0.8rem',\n flex:'1 0 auto'\n }),\n desContainer : {\n backgroundColor: '#ebebeb',\n padding: '0.8rem',\n flexDirection: 'column',\n height: '100%',\n display: 'flex',\n marginTop: '0.5rem'\n },\n buyNowButton : {\n border: '1px solid #006892',\n textAlign: 'center',\n marginTop: '0.5rem',\n paddingTop: '0.1rem',\n paddingBottom:'0.1rem'\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\nimport { tileStyle } from './productTileStyle';\n//import utils from '../../../utils';\n\nexport function ProductTile({ product }) {\n console.log(\"product : \", product)\n const s = tileStyle;\n const imageUrl = product.thumbnailUrl ? utils.site.resourcePath(product.thumbnailUrl) : '/assets/product-empty.png';\n //console.log(\"product : \", product)\n const productUrl = product.productUrl ? product.productUrl : `/product/${product.productSlug}`;\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';\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 \n
\n \n
\n \n {product.productName}\n
\n \n {product.shortDesc}\n
\n \n { \n product.productStatus !== 0 ? product.productStatusText :\n product.priceTextOveriding ? product.priceTextOveriding : 'AU' + utils.money.formatMoney(product.priceIncTax)\n }\n
\n \n Buy Now\n
\n \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 {page.pageTitle} \n \n
\n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SearchResult } from '../../../site/searchResult/searchResult';\nimport { InstagramFeed } from '../../../components';\nimport { AppVersion } from '../../../components';\nimport { TextWithJavScript } from '../../../components/TextWithJavaScript/view';\n\nexport function Code(props) {\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const code = cmsUtils.payload(item, 'Code');\n const codeType = cmsUtils.payload(item, 'CodeType');\n let controls = null;\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n if (codeJson.control === 'search-results') {\n controls = \n
\n )\n else if (codeType === 'Text')\n return (\n \n )\n else if(codeType === 'TestWithJs'){\n return(\n \n Code Type: {codeType}\n {code}\n {controls}
\n )\n}\n","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\nexport function BlogPosts(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const posts = getPages(cmsUtils.payload(item, 'BlogPosts'));\n const numOfTileLines = parseInt(cmsUtils.payload(item, 'NumOfTileLines', '2'));\n //console.log(numOfPost, parseInt(numOfPost));\n //console.log(posts);\n const bp = utils.ui.getCurrentBreakpoint();\n const tilesPerLine = {xs:1, sm:1, md:2, lg:2, xl:3, xxl:4}\n const numOfPost = numOfTileLines * (tilesPerLine[bp] || 3);\n const step = numOfPost;\n console.log(bp, numOfTileLines, tilesPerLine, numOfPost)\n\n const [tilesToShow, setTilesToShow] = React.useState(numOfPost);\n\n const displayingPosts = posts.length > tilesToShow ? posts.slice(0, tilesToShow) : posts;\n const showMore = posts.length > displayingPosts.length;\n\n const pageTileElts = displayingPosts.map((page, index) =>\n \n {pageTileElts}\n
\n {showMore && (\n { setTilesToShow(tilesToShow + step) }}>LOAD MORE
)}\n \n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n return (\n \n \n \n \n
\n )\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\n\nexport function BlogPostTitle(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const title = cmsUtils.payload(item, 'PageTitle');\n const postDate = cmsUtils.payload(item, 'PostDate');\n\n const cssClass = utils.classNames('blogView__titleContainer', 'cms_item', item.cssClass || item.anchorName || '');\n\n return (\n \n
\n \n
\n \n {page.pageTitle}\n
\n \n {page.tileDesc || page.description}\n
\n READ MORE
\n \n
\n );\n}\n","import React from 'react';\n//import cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { Item } from '../../items/item';\n\nexport function VideoHolder(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n {postDate}\n
\n \n {title}\n
\n\n {subItemsElts}\n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { YoutubeEmbedPopup } from '../../../components';\n\nexport function VideoItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n console.log('item', item);\n\n const youtubeCode = cmsUtils.payload(item, 'YoutubeCode');\n const posterFrameUrl = cmsUtils.payload(item, 'PosterFrameUrl');\n const captionTitleYoutube = cmsUtils.payload(item, 'CaptionTitleYoutube');\n const shortDesc = cmsUtils.payload(item, 'ShortDesc');\n\n const cssClass = utils.classNames('cms_item', 'videoItem', item.cssClass || item.anchorName || '');\n\n return (\n \n
\n );\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport { Item } from '../../items/item';\nimport utils from '../../../utils';\n\nexport function MultiColumnPanel(props){\n const item = props.item;\n const mobileReverse = cmsUtils.payload(item, 'MobileReverse', 'no');\n //const subItems = item.items || [];\n const subItems = (mobileReverse === \"yes\" && utils.css.screenWidth() <= 550) ? item.items.reverse() || [] : item.items || [];\n const cmsOption = props.cmsOption || {};\n const columnWidths = cmsUtils.payload(item, 'ColumnWidths').split(\",\");\n const mobileColumnWidths = cmsUtils.payload(item, 'MobileColumnWidths').split(\",\");\n const countItem = {countD : 0, countM : 0, col : \"\"};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n \n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'multiColumnPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || ''); \n\n function setupClass(index){ \n countItem.col = \"\";\n if(columnWidths.length === countItem.countD){\n countItem.countD = 0;\n }\n\n if(mobileColumnWidths.length === countItem.countM){\n countItem.countM = 0;\n }\n \n countItem.col = \"col-sm\" + (columnWidths[countItem.countD] === \"13\" ? \"\" : \"-\" + columnWidths[countItem.countD]) + \" col-\" + mobileColumnWidths[countItem.countM];\n countItem.countD ++;\n countItem.countM ++;\n };\n\n const subItemsElts = subItems.map((subItem, index) => {\n setupClass();\n return \n
\n \n
\n \n
\n {captionTitleYoutube}
\n \n\n
\n } \n );\n return (\n \n
\n \n {subItemsElts}\n
\n handleClick(e)}>\n
\n )\n\n return (\n \n {e.preventDefault(); e.stopPropagation();}}>{buttonTitle}
\n \n \n To edit the button title, please double click or open item editor
\n handleClick(e)}>\n
\n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}","// //import { css, keyframes } from '@emotion/core'\n// //import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq } from '../../cssInJs'\n\nexport default {\n photoGallery : css({\n maxWidth : '960px',\n margin: 'auto'\n }),\n thumbnails : css({\n display:'flex',\n flexWrap:'wrap',\n marginLeft:'-5px',\n marginRight:'-5px'\n }),\n thumbnail : css(mq({\n //flexBasis: ['50%','25%','33.33%'],\n flexBasis: ['50%','25%','16.66%'],\n //padding: ['5px']\n padding:'5px',\n cursor: 'pointer'\n })),\n bg : {\n paddingBottom: '100%',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n }\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\nimport { useState, useEffect } from 'react';\n\nimport utils from '../../utils';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport FsLightbox from 'fslightbox-react';\nimport { createPortal } from \"react-dom\";\n\nfunction Portal({children}){\n const [el] = useState(document.createElement('div'));\n useEffect(() => {\n let mount = document.getElementById(\"portal-root\");\n mount.appendChild(el);\n return () => mount.removeChild(el);\n }, [el]);\n return createPortal(children, el);\n}\n\nexport function PhotoGallery(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'photoGallery', item.cssClass || item.anchorName || '');\n const _images = cmsUtils.payload(item, 'ImageUrl') ? cmsUtils.payload(item, 'ImageUrl').split(\"|\") : [];\n const _thumbImages = [];\n\n // _images.forEach(el => {\n // let a = el.split(\"/\");\n // console.log('e',e);\n // });\n\n //let a = _images[0].split(\"/\");\n \n if(_images.length > 0){\n _images.forEach(el => {\n let _texts = el.split('/');\n let _text = el.replace(_texts[_texts.length-1], \"@thumb/\" + _texts[_texts.length-1]);\n _thumbImages.push(_text);\n });\n //console.log('222', _images2);\n }\n\n //const _images = ['https://jaba.com.au/sites/jaba/media/images/multicolour-services-min.jpg'];\n const [toggler, setToggler] = useState(false);\n const [popupIndex, setPopupIndex] = useState(0);\n \n return(\n \n {buttonTitle}
\n \n \n \n {/* \n \n\n
\n ); \n}","import { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\nexport default{\n testimonialPanel : css({\n marginTop: '20px',\n marginBottom: '20px',\n backgroundColor: 'transparent',\n '& .slick-prev:before, .slick-next:before' : {\n color : 'black'\n },\n '& .slick-next' : {\n right : '-2%'\n },\n '& .slick-prev' : {\n left : '-2%'\n }\n })\n}","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nexport default{\n testimonialItem : css(mq({\n maxWidth : '300px',\n backgroundColor: '#f8f8ff',\n opacity: '.9',\n textAlign: 'center',\n color: '#000',\n padding: '10px',\n //height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n height: ['400px', '430px']\n })),\n\n\n testimonialItem_title : css(mq({\n marginBottom: '0px',\n fontSize: ['2rem', '1.72rem']\n })),\n\n testimonialItem_desc :css(mq({\n flex: '1 1 auto',\n fontSize: ['1.2rem', '1rem'] \n //flexGrow: '1',\n //flexShrink: '1'\n })),\n\n testimonialItem_bottom : css(mq({\n fontSize : ['1rem', '0.86rem']\n }))\n}","import utils from '../../../utils';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport { IoIosStar } from \"react-icons/io\";\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function TestimonialItem(props){\n\n const item = props.item;\n //const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialItem', item.cssClass || item.anchorName || '');\n \n const startRatingColor = (props.startRatingColor && props.startRatingColor !== \"\") ? props.startRatingColor : \"black\";\n \n const title = cmsUtils.payload(item, 'Title');\n const desc = cmsUtils.payload(item, 'Desc');\n const bottom = cmsUtils.payload(item, 'BottomText');\n const ratingValue = parseInt(cmsUtils.payload(item, 'RatingStar'));\n \n var rating = [];\n\n for(var i = 0; i < ratingValue; i++ ){\n rating.push(\n \n PhotoGallery\n
\n \n {\n _thumbImages.map((item, index) =>\n
\n {\n e.preventDefault();\n e.stopPropagation();\n setToggler(!toggler);\n setPopupIndex(index);\n }}>\n \n
\n )\n \n }\n \n
\n );\n}","//import { Item } from 'cms/items/item';\nimport Slider from \"react-slick\";\nimport utils from '../../../utils';\n//import cmsUtils from 'cms/utils/cmsUtils';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport style from './style';\n//import { useState, useEffect } from 'react';\n\nimport { TestimonialItem } from '../testimonialItem/view';\n\nexport function TestimonialPanel(props){\n const item = props.item;\n //const defaultDesH = 220;\n const startRatingColor = props.startRatingColor;\n const subItems = item.items || [];\n //console.log(subItems.length);\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'testimonialPanel', item.cssClass || item.anchorName || '');\n \n //const [desH, setDesH] = useState(defaultDesH);\n\n //var maxDesTextLength = 0;\n const testimonialItems = subItems.map((subItem, index) => {\n // let subItemDes = cmsUtils.payload(subItem, \"Desc\");\n // if(maxDesTextLength < subItemDes.length){\n // maxDesTextLength = subItemDes.length\n // }\n //return \n { title }\n
\n\n { rating }\n
\n {/* style={{ flexBasis: props.desH + \"px\" }} */}\n \n { desc }\n
\n \n { bottom }\n
\n\n \n { testimonialItems }\n \n
\n );\n}","import { css } from '@emotion/core'\n//import { mq } from '../../cssInJs'\nexport default{\n exTextItem : css({\n overflow:'hidden',\n maxHeight:'0',\n transition: 'all 0.8s',\n padding: '0px',\n '&.expand' : {\n maxHeight:'40000px',\n padding: '1rem 0'\n }\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\n//import React from 'react';\nimport cmsUtils from '../../cms/utils/cmsUtils';\nimport utils from '../../utils';\nimport style from './style';\nimport { Item } from '../../cms/items/item';\n\nexport function ExpandablePanel(props){\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n \n let bgUrl = null;\n\n if (imageUrl){\n bgUrl = utils.site.resourcePath(imageUrl);\n }\n else if (backgroundTile){\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n }\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'expandablePanel', cmsOption.isCmsEdit && 'expandablePanel_item_cms', item.cssClass || item.anchorName || '');\n const subItemsElts = subItems.map((subItem, index) =>\n \n {subItemsElts}\n
\n No products
;\n}\n\nfunction Items({ items, categories, defaultCategories }) {\n const s = tileListStyle;\n const defaultCategoriesArray = (defaultCategories && defaultCategories !== '') ? defaultCategories.split(',') : [];\n const model = getCategoryListModel(categories, defaultCategoriesArray);\n const categoryListForm = useForm(model, {usePlaceholder : true, onControlChanged: orderItemChanged});\n\n const [showProducts, setShowProducts] = useState(()=> {\n if(defaultCategoriesArray.length === 1){\n let _items = [];\n let _items2 = JSON.parse(JSON.stringify(items));\n _items = _items2.filter(item => {\n for(let i in item.productCategories){\n if(item.productCategories[i].categoryId === defaultCategoriesArray[0]){ \n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n return false;\n });\n sortProudcts(_items);\n return _items;\n }\n return items;\n });\n\n function orderItemChanged(e, control){\n if(control && control.name === 'categoryList'){\n console.log('controll value', control.value);\n let _items = [];\n if(control.value && control.value !== ''){\n _items = items.filter(item => {\n if(control.value === '_favourites_'){\n if(localStorage.favorites !== \"\"){\n if(localStorage.favorites.includes(item.productId)){\n return true;\n }\n }\n }\n else{\n for(let i in item.productCategories){\n if(item.productCategories[i].categoryId === control.value){\n item.seqInCategory = item.productCategories[i].seq;\n return true;\n }\n }\n }\n return false;\n });\n }\n else{\n _items = items;\n }\n //sort\n sortProudcts(_items);\n setShowProducts(_items);\n }\n }\n\n const render = (name) => categoryListForm.renderControl(name, null);\n return (\n \n
\n )\n}\n\nfunction sortProudcts(items) {\n items.sort((a, b) => {\n return a.seqInCategory - b.seqInCategory;\n }); \n}","import { fb } from '../../../lib/form';\nexport function getCategoryListModel(data, defaultCategories) { \n\n var options = [\n {name : 'All', value : ''}\n // {name : 'Favourites', value : '_favourites_'}\n ];\n \n if(data.length > 0){\n data.forEach(el => {\n options.push({name : el.categoryName, value : el.categoryId});\n });\n }\n\n let categoryList = \"\";\n if(defaultCategories.length === 1){\n categoryList = defaultCategories[0];\n }\n\n const model = fb.group({\n categoryList: [categoryList, [], {\n label: 'FILTER BY',\n type: 'select',\n options : options\n }]\n }); \n return model;\n}","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nconst step = css(mq({\n flex: '0 0 100%',\n opacity: 0,\n padding: '2rem 1rem 2rem',\n // maxHeight: '300px',\n transition: 'all 0.3s',\n}))\n\nexport default {\n cart: css({\n position: 'relative',\n margin: 'auto',\n marginBottom: '3rem',\n textAlign: 'left'\n }),\n\n stepsWrapper: css({\n overflow: 'hidden',\n }),\n steps: css({\n display: 'flex',\n transition: 'all 1s cubic-bezier(0.22, 0.61, 0.36, 1)',\n '& h3, & h4': {\n textTransform: 'uppercase'\n }\n }),\n step,\n stepCurrent: css(step, {\n // maxHeight: '2000px',\n opacity: 1,\n background: 'rgba(255,255,255,0.5)',\n }),\n stepPrev: css(step, {}),\n stepNext: css(step, {}),\n stepLast: css({\n //maxHeight: '1000px',\n opacity: 1\n }),\n\n}\n","import { css } from '@emotion/core'\nimport { mq } from '../../../cssInJs'\n\nconst navs = {\n navs: css(mq({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderBottom: 'solid 1px #ccc',\n marginBottom: 8,\n background: 'rgba(255,255,255,0.9)',\n //background: 'linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(255,255,255,1) 100%)',\n })),\n nav: css(mq({\n //width: 20,\n //height: 30,\n padding: '0.9rem 1rem',\n fontSize: '1.1rem',\n position: 'relative',\n flex: '1 1 auto',\n textAlign: 'center',\n })),\n navArrow: {\n },\n navCurrent: css({\n //color: 'white',\n //backgroundColor: variables.primaryColor\n //background: 'linear-gradient(0deg, rgba(34,45,100,1) 0%, rgba(89,102,166,1) 100%)',\n //borderBottom: 'solid 2px ' + variables.primaryColor\n //background: '#ddd',\n fontWeight: 'bold',\n background: 'linear-gradient(0deg, rgba(0,0,0,0.08) 0%, rgba(255,255,255,1) 100%)',\n //borderBottom: 'solid 2px ' + variables.primaryColor\n }),\n navFilled: css({\n //backgroundColor: '#666'\n }),\n navClickable: css({\n cursor: 'pointer'\n })\n}\n\nexport default {\n\n arrow: css(mq({\n position: \"absolute\",\n cursor: 'pointer',\n color: '#aaa',\n transition: 'all 0.3s',\n zIndex: '1',\n // xs, sm(>=576), md(>=768), lg(>=992), xl(>=1200), xxl(>=1600)\n top: 0,\n // [mqMax.md]: {\n // width: 100\n // },\n width: [20, 25, 30, 40],\n '&:hover': {\n color: '#666'\n }\n })),\n arrowPrev: css(mq({\n left: [-15, 0]\n })),\n arrowNext: css(mq({\n right: [-15, 0]\n })),\n\n ...navs\n}\n","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './stepStyle';\nimport React from 'react';\n\nimport { FaAngleRight } from 'react-icons/fa';\n\t\n\n\nexport function StepNav({ stepInfo }) {\n const { steps, currentStep, moveTo, canGo } = stepInfo;\n\n //if (currentStep === steps.length - 1) return null;\n return \n {render('categoryList')}\n
\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\" && cart.shippingAmount !== 0 ) &&\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/summary2';\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 Shipping
\n AU {formatMoney(cart.shippingAmount)}
\n \n
Total Amount
\n AU {formatMoney(cart.totalAmount)}
\n {\n options\n .map(x => \n \n {x.Name}: \n {x.Value}\n \n )\n .reduce((acc, x) => acc === null ? x : {acc}, {x} , null)\n }
\n }\n\n const orderItems = cart.orderItems.filter(x => x.orderItemType === 0)\n const taxLines = cart.orderItems.filter(x => x.orderItemType === 1)\n\n return \n
\n}","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\nexport function orderItemData(item) {\n\n return fb.group({\n quantity: [item.quantity || '', [], { label: null, type: 'number', \n attrs: item.productId === 'aab24a82-ad82-4021-b359-7ee5187d0ada' ? { min:'1', max : '1' } : { min:'1'}\n }]\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 { ErrorMessage } from '../../../components';\nimport { CartSummary } from '../cartSummary/summary2';\nimport utils from '../../../utils';\n\nexport function Shipping({ cart, form, saveShipping, post, disabledCheckOutBtn }) {\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
\n \n \n\n
\n \n
\n \n \n
\n \n \n \n }\n\n
\n}\n\nfunction Address({form, addressModel}) {\n const render = (name) => form.renderControl(name, addressModel);\n return \n
\n \n {\n val.shippingMethod !== '' &&\n \n \n
\n\n \n
\n \n {/* */}\n \n \n
\n \n
\n}","import { fb, validators } from '../../../form';\n\nexport function getShippingFormData(cart, callType = \"normal\") {\n \n const data = cart || {};\n\n const shippingMethods = [\n { name: 'Shipping', value: \"Standard\" },\n { name: 'Pickup', value: \"Pickup\" }\n ];\n\n const model = fb.group({\n billingInfo: address(data.billingAddress, callType),\n shippingInfo: address(data.shippingAddress, \"normal\"),\n //shippingMethod: [data.shippingMethod || '', [], { label: 'Shipping Method', type: 'text' }],\n shippingMethod: [data.shippingMethod || '', [], { label: null, type: 'radioList', options : shippingMethods, 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, callType) {\n const data = model || {};\n\n const locations = [\n { name: 'State*', value: \"\" },\n { name: 'SA', value: \"sa\" },\n { name: 'WA', value: \"wa\" },\n { name: 'NT', value: \"nt\" },\n { name: 'QLD', value: \"qld\" },\n { name: 'VIC', value: \"vic\" },\n { name: 'TAS', value: \"tas\" },\n { name: 'NSW', value: \"nsw\" },\n { name: 'ACT', value: \"act\" }\n ];\n\n const locations2 = [\n { name: 'State*', value: \"\" },\n { name: 'SA', value: \"sa\" },\n { name: 'WA', value: \"wa\" },\n { name: 'NT', value: \"nt\" },\n //{ name: 'QLD', value: \"qld\" },\n { name: 'VIC', value: \"vic\" },\n { name: 'TAS', value: \"tas\" }\n //{ name: 'NSW', value: \"nsw\" },\n //{ name: 'ACT', value: \"act\" }\n ];\n\n return fb.group({\n firstName: [data.firstName || '', [validators.Required()], { label: 'First Name', type: 'text' }],\n surname: [data.surname || '', [validators.Required()], { label: 'Surname', type: 'text' }],\n street1: [data.street1 || '', [validators.Required()], { label: 'Street', type: 'text' }],\n street2: [data.street2 || '', [], { label: null, type: 'text' }],\n suburb: [data.suburb || '', [validators.Required()], { label: 'Suburb', type: 'text' }],\n //state: [data.state || '', [validators.Required()], { label: 'State', type: 'text' }],\n state: [data.state || '', [validators.Required()], { label: 'State', type: 'select', options : callType === 'normal' ? locations : locations2 }],\n postcode: [data.postcode || '', [validators.Required()], { label: 'Postcode', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email Address', type: 'email' }],\n mobile: [data.mobile || '', [validators.Required()], { label: '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; }","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './cartStyle';\nimport React from 'react';\n//import { SiteLink } from '../../../components';\nimport env from '../../../env';\nimport { useGet, usePost } from '../../../components';\nimport { useForm } from '../../../form';\nimport { Loading, ErrorPopup } from '../../../components';\nimport { useStep } from './useStep';\nimport { StepNav } from '../cartStep/stepNav';\nimport { OrderItems } from '../cartOrderItems/orderItems2';\nimport { getOrderItemFormData } from '../cartOrderItems/orderItemFormData2'\nimport { Shipping } from '../cartShipping/shipping'\nimport { getShippingFormData } from '../cartShipping/shippingFormData';\n//import { Pay } from '../cartPayment/pay';\nimport utils from '../../../utils';\n\nexport function Cart() {\n const [sendingStatus, setSendingStatus] = React.useState(null);\n const [cart, setCart] = React.useState(null);\n\n const get = useGet();\n\n React.useEffect(() => {\n get.send(env.apiBase + '/api/cart/getCart/' + env.getDevCartId());\n setSendingStatus('pending')\n // eslint-disable-next-line\n }, []);\n\n if (get.loading()) {\n return \n
\n \n {render('firstName')}\n
\n \n {render('surname')}\n
\n \n
\n \n {render('street1')}{render('street2')}\n
\n \n
\n \n {render('suburb')}\n
\n \n {render('state')}\n
\n \n {render('postcode')}\n
\n \n
\n \n {render('email')}\n
\n \n {render('mobile')}\n
\n \n
;\n}\n\nfunction EmptyCart() {\n return \n
\n \n {steps.map((step, index) => {\n let stepView = null\n switch (step.id) {\n case 'orderItems': stepView =
\n \n {stepView}\n \n
\n )\n })}\n \n
;\n}","import React from 'react';\n\nexport function useStep(initialSteps){\n const [steps, setSteps] = React.useState(initialSteps);\n const [currentStep, setCurrentStep] = React.useState(0);\n const [lastStep, setLastStep] = React.useState(0);\n\n const moveNext = () => {\n moveTo(currentStep < steps.length ? currentStep + 1 : currentStep)\n }\n\n const movePrev = () => {\n moveTo(currentStep > 0 ? currentStep - 1 : 0)\n }\n\n const moveTo = (index) => {\n if (!canGo(index)) return\n setLastStep(currentStep)\n setCurrentStep(index)\n // if (!utils.ui.isElementInViewport(navEl.current)) {\n // utils.ui.scrollTo(navEl.current)\n // }\n }\n\n const markAsFilled = (index) => {\n if (!steps[index]) return;\n steps[index].filled = true;\n setSteps(steps);\n }\n \n function canGo(index) {\n if (steps[index] && steps[index].filled) return true;\n const maxIndexFilled = Math.max(...steps.map((x, i) => x.filled ? i : -1));\n return index <= maxIndexFilled + 1\n }\n\n function canGoNext() {\n return currentStep < steps.length && canGo(currentStep + 1)\n }\n\n function canGoPrev() {\n return currentStep > 0 && canGo(currentStep - 1)\n }\n\n return { steps, setSteps, currentStep, lastStep, moveTo, moveNext, movePrev, markAsFilled, canGo, canGoNext, canGoPrev}\n}","import React from 'react';\nimport cmsUtils from '../../utils/cmsUtils';\nimport utils from '../../../utils';\nimport { ProductItems } from '../../../site/ecm/productList/productItems';\n//import { Cart } from '../../../site/ecm/cart/cart';\nimport { Cart } from '../../../site/ecm/cart/cart2';\n\nexport function EcmItems(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n \n const cssClass = utils.classNames('cms_item', 'ecm', item.cssClass || item.anchorName || '');\n\n return cmsOption.isCmsEdit ? \n
\n Your cart is empty.
\n\n Type: {item?.itemTypeCode}\n : \n
;\n}\n\nfunction ItemBranch({ item }) {\n const typeCode = item?.itemTypeCode;\n\n if (typeCode === 'Ecm-ShoppingCart') {\n return {item.itemTypeCode}
);\n }\n\n // const subItemsElts = subItems.map((subItem, index) =>\n // \n {sectionItems}\n
\n \n );\n}\n\nfunction Section(props) {\n log('5. section rendering')\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n <\\/p>/g, '');\n //editor.insertHtml(evt.data.dataValue); return false;\n setTimeout(function () {\n CKEDITOR.instances.cmsCurrentEditor.setData(CKEDITOR.instances.cmsCurrentEditor.getData());\n }, 100);\n }, null, null, 9);\n }\n\n close($editor = null) {\n const CKEDITOR = window['CKEDITOR'] || {};\n //console.log('ckeditor close');\n if (typeof CKEDITOR.instances.cmsCurrentEditor != \"undefined\")\n CKEDITOR.instances.cmsCurrentEditor.destroy();\n\n //for (var instance in CKEDITOR.instances) {\n // CKEDITOR.instances[instance].destroy();\n //}\n\n }\n}\n","import { CmsRadioSender } from './cms-radio-sender'\nimport { CmsRadioReceiver } from './cms-radio-receiver'\nimport { CmsHtmlEditor } from './cms-html-editor'\nimport env from '../../env';\n\n// declare var CKEDITOR: any;\n// import * as $ from 'jquery';\n\n\nexport class CmsPageController {\n settings;//: any;\n sender;//: CmsRadioSender;\n receiver;//: CmsRadioReceiver;\n htmlEditor;//: CmsHtmlEditor;\n\n constructor() {\n this.settings = { root: \"body\", viewOnly: false };\n this.sender = new CmsRadioSender(this);\n this.receiver = new CmsRadioReceiver(this);\n this.htmlEditor = new CmsHtmlEditor(env.cmsEndpoint, this.sender);\n }\n init(options) {\n const $ = window['jQuery'];\n this.settings = Object.assign({}, /*default*/{ root: \"body\", viewOnly: false }, options);\n this.initGlobalVars();\n\n var self = this;\n $(\"[onclick]\").prop(\"onclick\", null);\n $(\"[dblclick]\").prop(\"dblclick\", null);\n $(self.settings.root).off(\"click dblclick\", \"*\");\n $(self.settings.root).on(\"click dblclick\", \"*\", function (e) {\n //$(\".cms_html_editor_img_selected\").removeClass(\"cms_html_editor_img_selected\");\n // console.log($(e.target).hasClass(\"allowClick\"));\n // console.log(e.target);\n\n if (!$(e.target).hasClass(\"allowClick\")) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n if ($(this).attr(\"contenteditable\") === \"true\" ||\n $(\"#cms_html_editor_source_id\").is(\":visible\")) {\n e.stopPropagation();\n return;\n }\n if (!self.settings.viewOnly)\n self.selectItem($(this), false, e.type === \"dblclick\");\n\n //Add noreferrer noopener when new window\n $(\"#cke_108_select\").change(function() {\n let _value = $(this).val();\n $(\"#cke_215_textInput\").val(\"\");\n if(_value === \"_blank\"){\n $(\"#cke_215_textInput\").val(\"noreferrer noopener\");\n }\n });\n\n });\n\n if (self.settings.viewOnly) return; // stop the editing logic for viewonly mode.\n\n // ctrl + s for html block\n $(self.settings.root).on('keydown', \"#cmsCurrentEditor\", function (e) {\n if (e.ctrlKey && e.which === 83) {\n //var itemId = $(this).data(\"cms-item-id\");\n //if (!itemId)\n // itemId = $(this).closest(\"[data-cms-item-id]\").data(\"cms-item-id\");\n //window.parent.cms.site.saveHtml(itemId);\n //e.preventDefault();\n\n self.sender.saveAllDirtyHtml(self.getAllDirtyHtml());\n return false;\n }\n });\n }\n\n selectItemFromController(id) {\n const $ = window['jQuery'];\n var item = $(\".cms_item[data-cms-item-id='\" + id + \"']\");\n this.scrollTo(item);\n this.selectItem(item, true);\n }\n\n selectItem($item, fromController, doubleclicked = false) {\n //console.log(\"select item - \" + fromController + \" - \" + doubleclicked);\n //console.log($item);\n var editor = $item.closest(\"[contenteditable]\");\n if (editor.length > 0)\n return;\n var cke_top = $item.closest(\".cke_top\");\n if (cke_top.length > 0)\n return;\n\n this.closeEditingItem();\n //console.log($item);\n if (typeof $item === \"undefined\") return;\n if ($item.length === 0) return;\n this.findItem($item, fromController, 0, doubleclicked);\n }\n\n closeEditingItem() {\n const $ = window['jQuery'];\n //console.log(\"close editing item\");\n $(\"[contenteditable]\").removeAttr(\"contenteditable\");\n $(\"#cms_hovermenu\").remove();\n $(\".cms_editing_item\").removeClass(\"cms_editing_item\");\n\n }\n\n findItem($item, fromController, depth, doubleclicked) {\n 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
\n \n
\n \n \n
\n \n \n {\n setInfo({...info, openInput : !info.openInput});\n }} />\n
\n \n \n \n
\n )\n}","import { css } from '@emotion/core'\nimport { mq, variables } from '../../cssInJs'\n\nexport default {\n top: css(mq({\n //height: [44, null, 80],\n height: [44, null, 56],\n background: 'transparent',\n position: 'fixed',\n width: '100%',\n zIndex: '999',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n transition: 'all 0.3s',\n top:0\n })),\n topScrolled: css(mq({\n background: variables.darkTealColor\n })),\n logo: css(mq({\n })),\n logoImg: css(mq({\n display: 'block',\n height: ['60px', null, '100px'],\n marginTop: ['2.5rem', null, '3rem'],\n transition:'all .2s'\n })),\n logoScrolled: css(mq({\n img : css(mq({\n height: [34, null, 50],\n marginTop:'0rem'\n }))\n })),\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n\nimport { useState, Fragment } from 'react';\nimport { SiteLink } from '../../components';\nimport { useScrollPosition } from '@n8tb1t/use-scroll-position';\nimport { NavBar } from './navBar';\nimport { BackButton } from '../backButton/backButton';\nimport { Hamburger } from '../hamburger/hamburger';\nimport { SearchButton } from '../searchButton/searchButton';\nimport { CartButton } from '../cartButton/cartButton';\nimport style from './topHeaderStyle';\nimport { useStore } from '../../store';\n\nexport function TopHeader(props) {\n const [menuOpened, setMenuOpened] = useState(false);\n const [scrolled, setScrolled] = useState(false);\n const { state } = useStore();\n\n useScrollPosition(({ 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 }, [], null, true)\n\n function toggleMenu(e) {\n setMenuOpened(!menuOpened);\n }\n\n function onCloseMenu() {\n setMenuOpened(false);\n }\n\n return (\n \n {state.cartInfo ? state.cartInfo : 0} \n
\n \n 
\n 
\n
\n {link.title}
\n \n {\n }}\n />\n
\n\n );\n}","import React from 'react';\nimport { useRouter } from './components';\nimport { useHistoryStore } from './components';\nimport { useParallax } from './components';\nimport utils from './utils';\nimport debounce from 'lodash/debounce';\n\nexport function AppRouteChanged() {\n const { path } = useRouter();\n const parallax = useParallax();\n const history = useHistoryStore();\n\n React.useLayoutEffect(() => {\n console.log('route changed', path);\n const scrolled = debounce((e) => saveScrollPosition(e, path), 100);\n history.push({ path: path });\n if (typeof window !== `undefined`) {\n parallax.reset();\n\n const pos = getPreviousPostition(path);\n // console.log('pos', pos)\n if (pos) {\n setTimeout(() => {\n //window.scrollTo(pos.scrollLeft, pos.scrollTop)\n }, 500);\n } else {\n const hash = window.location.hash;\n\n if (hash) {\n setTimeout(() => {\n const anchor = utils.ui.findElement(hash);\n if (anchor) utils.ui.scrollTo(anchor, 500);\n }, 500);\n } else {\n window.scrollTo(0, 0);\n }\n }\n }\n\n // reset schema\n const productSchemaScript = document.getElementById('productSchemaScript');\n if (productSchemaScript) {\n document.body.removeChild(productSchemaScript);\n }\n\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\nfunction saveScrollPosition(e, path) {\n if (typeof window === `undefined`) return;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n // console.log('save position', path, scrollTop, scrollLeft)\n setPositionData(path, scrollLeft, scrollTop);\n}\n\nfunction getPreviousPostition(path) {\n const dataArr = getPositionData() || [];\n // console.log(dataArr.length)\n const pos = getPreviousPostitionInArray(dataArr, path);\n return pos;\n}\n\nfunction getPositionData() {\n const dataStr = localStorage.getItem('scrollPosRouter');\n // console.log(dataStr)\n if (dataStr) {\n let data;\n try {\n data = JSON.parse(dataStr);\n } catch (e) {\n return null;\n }\n return data;\n }\n return null;\n}\n\nfunction setPositionData(path, scrollLeft, scrollTop) {\n const dataArr = getPositionData() || [];\n setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop);\n // console.log(dataArr)\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr));\n}\n\nconst MAX_SIZE = 5;\nfunction setCurrentPositionInArray(dataArr, path, scrollLeft, scrollTop) {\n const same = dataArr.length > 0 && dataArr[dataArr.length - 1].path === path;\n if (same) {\n const found = dataArr[dataArr.length - 1];\n found.scrollLeft = scrollLeft;\n found.scrollTop = scrollTop;\n found.ts = new Date();\n } else {\n if (dataArr.length >= MAX_SIZE) dataArr.shift();\n dataArr.push({\n path: path,\n scrollLeft: scrollLeft,\n scrollTop: scrollTop,\n ts: new Date(),\n });\n }\n}\n\nfunction getPreviousPostitionInArray(dataArr, path) {\n const foundIndex = findIndexReverse(dataArr, (x) => x.path === path);\n // console.log(foundIndex, dataArr.length - 1)\n if (foundIndex >= 0 && foundIndex >= dataArr.length - 2) {\n // remove after the index\n if (foundIndex < dataArr.length - 1) {\n dataArr.splice(foundIndex + 1);\n localStorage.setItem('scrollPosRouter', JSON.stringify(dataArr));\n }\n return dataArr[foundIndex];\n }\n return null;\n}\n\nfunction findIndexReverse(list, fn) {\n if (!list) return -1;\n for (let i = list.length - 1; i >= 0; i--) {\n if (fn(list[i])) {\n return i;\n }\n }\n return -1;\n}\n//#endregion\n","import React from 'react';\nimport { Route } from 'react-router-dom';\n//import { ViewPartial } from '../cms/pages/partials/viewPartial';\n//import { MenuLoader } from './menuLoader';\n\nconst DashboardLayout = ({ children, ...rest }) => {\n return {children}
;\n};\n\nconst DashboardNoAuthLayoutRoute = ({\n component: RenderComponent,\n ...rest\n}) => {\n return (\n \n
)\n}","import React from 'react';\nimport env from 'env';\nimport { usePost } from 'components';\nimport { SiteLink } from 'components';\nimport { useRouter } from 'components';\nimport { ErrorPopup } from 'components';\nimport { Button, ErrorMessage } from 'components';\nimport { IoReturnUpBack } from 'react-icons/io5';\n\nexport function ResetPassword() {\n const [password, setPassword] = React.useState(\"\");\n const { query } = useRouter();\n const token = (query && query.u) || '';\n const post = usePost();\n\n if (!token) {\n return Forgot Password
\n\n
\n \n \n
\n \n LOG IN \n
\n \n
)\n}","import React from 'react';\nimport { useAuth } from 'auth';\nimport { useRouter } from 'components';\n\nexport function Signup(props) {\n \n const [email, setEmail] = React.useState(\"\");\n const [password, setPassword] = React.useState(\"\");\n \n const [name, setName] = React.useState(\"\");\n const [phone, setPhone] = React.useState(\"\");\n const [companyName, setCompanyName] = React.useState(\"\");\n const [branchSiteName, setBranchSiteName] = React.useState(\"\");\n \n const [error, setError] = React.useState(\"\");\n const [pending, setPending] = React.useState(false);\n const auth = useAuth();\n\n const router = useRouter();\n\n function submit(e) {\n setPending(true);\n //console.log('loggin', username, password)\n e.preventDefault();\n e.stopPropagation();\n\n auth.signup(email, password, name, phone, companyName, branchSiteName).then(user => {\n console.log(user)\n setPending(false);\n setError('')\n router.push('/trade')\n }).catch(error => {\n console.log(error)\n setPending(false);\n setError(error.message)\n });\n }\n return (\n Reset Password
\n\n
\n \n \n \n
\n \n LOG IN \n
\n \n
)\n}","import React, {useLayoutEffect} from 'react';\nimport { Route, Redirect } from 'react-router-dom';\nimport DashboardNoAuthLayoutRoute from 'layout/dashboardNoAuthLayout';\nimport { ForgotPassword } from 'auth/controls/forgotPassword/forgotPassword';\nimport { ResetPassword } from 'auth/controls/resetPassword/resetPassword';\nimport { Signup } from 'auth/controls/signup/signup';\nimport { Login } from 'auth';\nimport { useStore } from '../store';\n\nconst MemberLayout = ({children}) => {\n const { dispatch } = useStore();\n\n useLayoutEffect(() => {\n dispatch({type:'SET_STATE', payload : {scrolled : true}});\n \n // eslint-disable-next-line\n }, []);\n\n return(\n Sign Up
\n\n Please be aware that you will need a valid credit account with BSA Group, before we can process your trade order.
\n Any trade orders placed without a valid credit account will be treated as COD payment terms.\n
Trade Applications
\n\n SA/WA/NT/QLD - Apply Here
\n VIC/NSW - Fill out the Application Form and return to accountsvic@bsag.com.au \n
\n {/*
\n \n \n
\n \n \n \n
\n )\n};\nexport default MemberLayout;","import React from 'react';\nimport { SiteLink } from 'components';\nimport env from 'env';\n\nexport function AppSideBar() {\n return (\n \n
\n );\n}","import React from 'react';\nimport { Route } from 'react-router-dom';\n\n//import { AppHeader } from 'layout/appHeader';\nimport { AppSideBar } from 'layout/appSideBar';\n\nconst DashboardLayout = ({ children, ...rest }) => {\n\n return (\n \n \n \n
\n Ecommerce
\n- \n
- \n
Orders \n \n - \n
Products \n \n - \n
Categories \n \n
CMS
\n- \n
- \n {/*
CMS (external) */}\n CMS (external) \n \n
Tools
\n- \n
- \n
Re-index (search engine) \n \n
\n {/*
\n )\n}\n\nconst DashboardLayoutRoute = ({ component: RenderComponent, ...rest }) => {\n return (\n \n
\n \n
\n \n {children}\n
\n sfjsdflksdjfvvvvvv
\n )\n}","import React from 'react';\n//import { Route, Redirect } from 'react-router-dom';\n//import DashboardNoAuthLayoutRoute from 'layout/dashboardNoAuthLayout';\nimport DashboardLayoutRoute from 'layout/DashboardLayout';\nimport { OrderView } from '../site/purchaseOrder/order/orderView';\n\n\n//import { Login } from 'auth';\n//import { useStore } from '../store';\n\nconst PurchaseOrderLayout = ({children}) => {\n // const { dispatch } = useStore();\n \n // useLayoutEffect(() => {\n // dispatch({type:'SET_STATE', payload : {scrolled : true}});\n \n // // eslint-disable-next-line\n // }, []);\n \n return(\n \n
\n )\n };\n export default PurchaseOrderLayout;","//import { css } from '@emotion/core';\nimport variables from '../../../cssInJs/variables';\nimport { mq } from '../../../cssInJs';\nexport default {\n desc: {\n 'p': {\n fontSize: '1rem !important',\n fontFamily: variables.familyBase + ' !important',\n marginBottom: '0.5rem !important',\n lineHeight: '1.1 !important'\n }\n },\n heroImageContainer : mq({\n //textAlign: 'center',\n height: ['180px', '270px'],\n position: 'relative',\n }),\n heroImage : mq({\n //maxWidth: '350px !important',\n //height: '100% !important'\n maxHeight: ['180px', '270px'],\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n }),\n productPageCol : mq({\n paddingLeft: '45px',\n paddingRight: '45px'\n }),\n productFavorite : {\n cursor: 'pointer',\n '&.checked' : {\n color: 'red'\n }\n },\n productBreadCrumbs : mq({\n padding: '0px',\n listStyle: 'none',\n marginBottom:'0.5rem',\n display: 'block',\n 'li' : mq({\n display:'inline-block',\n marginRight:'1.5rem',\n position: 'relative',\n fontSize:'0.7rem',\n '&:not(:last-child)::after, &.breadCrumb.last-item::after' : {\n content: '\">\"',\n position: 'absolute',\n right: '-1rem'\n },\n '&.breadCrumb::after' : {\n content: '\"|\"',\n position: 'absolute',\n right: '-1rem'\n }\n })\n }),\n productViewImageBg : mq({\n backgroundPosition: 'center',\n backgroundSize: 'contain',\n paddingTop: ['80px', '120px'],\n backgroundRepeat: 'no-repeat',\n marginLeft: '5px',\n marginRight: '5px' \n }),\n productViewImages : mq({\n marginTop: ['1rem', '2rem'],\n paddingBottom: ['1rem', '2rem'],\n marginLeft: '-5px',\n marginRight: '-5px',\n '.slick-prev, .slick-next' : {\n transform: 'none',\n top: '150px',\n '&:before' : {\n color: '#999999'\n }\n },\n '.slick-prev' : {\n left: '150px'\n },\n '.slick-next' : {\n right: '150px'\n }\n }),\n\n productViewImage : {\n //paddingLeft: '5px',\n //paddingRight: '5px'\n outline: 'none',\n cursor: 'pointer'\n },\n\n productViewShortDes : mq({\n fontSize:['1rem'],\n //textAlign: 'center',\n marginBottom: '1rem'\n }),\n\n productViewTitle : mq({\n fontSize:['1.5rem', null, '2rem'],\n //textAlign: 'center',\n marginTop:'0px',\n marginBottom:'1rem'\n }),\n\n addToCartBtn : {\n //width: '100%'\n 'button, .btn' : {\n width: '100%'\n //transform: 'skewX(-12deg)'\n },\n // 'button.gotocartbtn' : {\n // marginTop: '1rem'\n // }\n },\n priceText : {\n fontSize: '0.8rem'\n },\n socialMedia : {\n '.social-icon-text' : {\n fontSize: '0.8rem'\n }\n },\n attributesRow : {\n cursor: 'pointer',\n //marginTop: '0.5rem',\n //marginBottom: '0.5rem',\n paddingTop: '0.2rem',\n paddingBottom: '0.2rem',\n '&:hover' : {\n backgroundColor: '#999999',\n color: 'white'\n },\n '.svgContainer svg' : {\n transition: 'all 0.5s'\n },\n '.svgContainer.open svg' : {\n transform: 'rotate(180deg)'\n }\n },\n\n attrContainer : {\n maxHeight: '0px',\n transition: 'all 0.3s',\n overflow: 'hidden',\n '&.open' : {\n maxHeight: '1000px'\n }\n },\n\n desktopMobile : {\n '&.mobile' : mq({\n display: ['block', 'none']\n }),\n '&.desk__top' : mq({\n display: ['none', 'block']\n })\n },\n quoteContainer : {\n marginBottom: '1rem',\n '.quote__text' : {\n fontSize: '0.8rem',\n marginBottom: '1rem'\n },\n button : {\n //transform: 'skewX(-12deg)'\n }\n },\n enquiryFormContainer : {\n backgroundColor:'rgba(0,0,0,0.3)',\n position: 'fixed',\n top:'0px',\n left:'0px',\n width:'100%',\n height: '100%',\n zIndex:'9999',\n 'form.contactForm' : {\n position: 'absolute',\n width: '100%',\n maxWidth: '900px',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n backgroundColor: 'grey',\n //paddingTop: '2rem',\n paddingLeft: '1rem',\n paddingRight: '1rem',\n margin: '0px',\n '.closeButton' : {\n textAlign: 'right',\n //margin: '1rem 0px',\n cursor: 'pointer',\n color: 'white',\n marginTop: '0.5rem'\n },\n '.enquireNowText' : {\n marginBottom: '0.5rem',\n color: 'white'\n }\n }\n }\n}","import React, { useState, useEffect } from 'react';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport { NotFound } from '../../../components';\nimport env from '../../../env';\nimport { useStore } from '../../../store';\nimport { ErrorPopup, Loading } from '../../../components';\n\nconst log = (...args) => {\n //console.log(args);\n}\nconst areEqual = (prevProps, nextProps) => {\n return (prevProps.pageData === nextProps.pageData)\n};\nconst PageMemo = React.memo(Page, areEqual)\n\nexport function ViewPartial({pageOptions = null}) {\n const { dispatch } = useStore();\n const [pageLoaded, setPageLoaded] = useState(false);\n const [data, setData] = useState(null);\n //const path = usePath();\n //log('view page', path);\n const pathname = '/partials/common-footer';\n\n const get = useGet();\n log('0. viewpage ready');\n\n useEffect(() => {\n log('*. start loading')\n setPageLoaded(false);\n get.send(env.apiBase + \"/api/cms/GetPublishedPage?path=\" + pathname);\n // eslint-disable-next-line\n }, [pathname]);\n\n useEffect(() => {\n if (data){\n dispatch({ type: 'SET_PAGE', payload: data.data })\n dispatch({ type: 'SET_MENU', payload: data.menu })\n }\n // eslint-disable-next-line\n }, [data]);\n\n if (get.loading()) {\n return \n {/*
\n\n \n Price: {product.priceText ? product.priceText : 'AU ' + utils.money.formatMoney(product.price)}\n
*/}\n\n {/* \n
\n \n {\n setAttributesEx((pre) => {\n let _new = { ...pre };\n _new[index] = !_new[index];\n return _new;\n });\n }}\n >\n \n
\n {item.controls[0].value}
\n {item.controls[1].value}
\n {render('value', item)}
*/}\n \n );\n })}\n\n \n All prices shown in AUD\n
\n \n
\n \n\n \n \n {/* {product.priceTextOveriding\n ? product.priceTextOveriding\n : \"AU \" + utils.money.formatMoney(product.priceIncTax)} */}\n {\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\nfunction getFormModel(product, formValues /* for reset */) {\n const variantAttributes = product.variantAttributes;\n\n const model = fb.group({\n //quantity: [formValues.quantity || 1, [validators.Required()], { label: 'Quantity', type: 'number' }],\n quantity: [\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\n// function newVariantAttribute(attr, formValues, variants) {\n// //console.log(attr, formValues, variants)\n// const optionsSelected = formValues.variantOptions || [];\n// const currentSelection = utils.array.find(optionsSelected, x => attr.name === x.name);\n// const filtered = variants\n// .filter(x => matchVariantOptions(optionsSelected, x.variantOptions, attr.name))\n// const availableOptions = getAvailableOptionValues(filtered, attr.name);\n// const options = attr.options.map(x => { return { ...x, ...{ disabled: !availableOptions.some(o => o === x.value) } } })\n// return fb.group({\n// name: [attr.name, [], { type: 'hidden' }],\n// value: [(currentSelection && currentSelection.value) || attr.value || '',\n// [validators.Required()], {\n// //label: attr.name,\n// label: null,\n// type: 'select',\n// options: [{ displayName: 'Select ...', value: '' }, ...options].map(x => {\n// return {\n// name: (x.displayName || x.value) + (x.disabled || false ? ' - not available' : ''),\n// value: x.value,\n// disabled: x.disabled || false\n// }\n// })\n// }]\n// })\n// }\n\nfunction newVariantAttribute(attr, formValues, variants) {\n // 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 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: \"radioList\",\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","import React, { useState, useEffect } from 'react';\nimport { useGet } from '../../../components';\nimport { Item } from '../../items/item';\nimport { NotFound } from '../../../components';\nimport env from '../../../env';\n//import { 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 ProductPagePartial({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-product-page-footer';\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 if (get.loading()) {\n return No product found.
;\n return (\n \n \n {openPopup && (\n \n
\n Enquire Now
\n \n
\n \n {enquiryFormRender('name')}\n
\n \n {enquiryFormRender('phone')}\n
\n \n {enquiryFormRender('email')}\n
\n \n
\n\n \n {enquiryFormRender('enquiry')}\n
\n \n
\n \n \n )}\n \n\n \n
\n \n \n
\n \n
\n\n {product.productStatus === 0 && (\n \n
\n \n \n \n \n
\n\n {product.description && (\n \n )}\n {heroImage && heroImage.imageUrl && (\n \n \n {slides} \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 {\n setOpenPopup(true);\n document.body.style.overflow = 'hidden';\n }}\n >\n {' '}\n CUSTOM QUOTE{' '}\n \n
\n \n \n \n \n Like this product but doesn't match your specifications?\n Click for a custom quote.\n
\n \n
\n );\n}\n","import { fb, validators } from '../../../lib/form';\nexport function getEnquiryFormModel(data) {\n const model = fb.group({\n name: [data.name || '', [validators.Required()], { label: 'Name', type: 'text' }],\n phone: [data.phone || '', [validators.Required()], { label: 'Phone', type: 'text' }],\n email: [data.email || '', [validators.Required(), validators.Email()], { label: 'Email', type: 'email' }],\n enquiry: [data.enquiry || '', [validators.Required()], { label: 'Enquiry', type: 'textarea' }]\n //attachments: [data.attachments || '', [], { label: 'Attachments', type: 'file' }]\n }); \n return model;\n}","import { mq } from '../../../cssInJs'\n\nexport default {\n orderDetails: {\n textAlign: 'left',\n marginBottom: '3rem',\n paddingLeft: '1rem',\n paddingRight: '1rem',\n marginTop: '4rem'\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, useLayoutEffect} from 'react';\n\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\n React.useEffect(() => {\n get.send(env.apiBase + '/api/order/getPaidOrder/' + o);\n // eslint-disable-next-line\n }, []);\n\n if (get.loading()) {\n return RELATED PRODUCTS
\n\n {products.map((product, index) => (\n \n ))}\n
\n Error Please Contact Admin
\n ) \n }\n\n return \n}\n\nfunction Details({ order }) {\n\n const orderItems = order.orderItems.filter(x => x.orderItemType === 0);\n const taxLines = order.orderItems.filter(x => x.orderItemType === 1);\n\n const { dispatch } = useStore();\n\n useLayoutEffect(() => {\n dispatch({type:'SET_STATE', payload : {scrolled : true}});\n // eslint-disable-next-line\n }, []);\n \n function itemAmount(orderItem) {\n return (orderItem.unitPrice * 100 + (orderItem.addedUnitPrice ? orderItem.addedUnitPrice * 100 : 0) - (orderItem.discountUnitPrice ? orderItem.discountUnitPrice * 100 : 0)) / 100;\n }\n // function itemTotalAmount(orderItem) {\n // return (orderItem.quantity * (orderItem.unitPrice * 100 + orderItem.addedUnitPrice * 100 - orderItem.discountUnitPrice * 100)) / 100;\n // }\n\n function getPromoCodeText(){\n const _promoCode = order.promoCode.split(\"|\");\n return _promoCode[0] + \" : \" + _promoCode[1] + \"% Discount\";\n }\n\n return
\n\n
\n
\n\n
\n {/*
;\n}\n\nfunction Address({addr}) {\n \n console.log('addr', addr);\n \n return \n
\n
\n \n
\n {order.orderNo}
\n AU {utils.money.formatMoney(order.totalAmount)}
\n {utils.date.formatYYYYMMDD(order.orderDate)}
\n \n\n
ITEMS
\n\n {orderItems.map((orderItem, i) =>
\n\n \n
\n )}\n\n \n \n \n {\n (orderItem.itemName === 'Kit Build' || orderItem.itemName === 'Kit Builder') &&\n \n }\n
\n \n
\n Unit Price: {utils.money.formatMoney(itemAmount(orderItem))}
\n \n Qty: {orderItem.quantity}\n
\n \n
\n\n {taxLines.map((orderItem, index) => \n \n Shipping Fee: \n
\n \n
\n \n {utils.money.formatMoney(order.shippingAmount)}\n
\n \n
\n )}\n\n {\n (order.promoCode && order.promoCode !== \"\") &&\n \n Tax: {orderItem.itemName}\n
\n \n
\n \n {utils.money.formatMoney(orderItem.unitPrice)}\n
\n \n
\n }\n\n \n Promo Code : { getPromoCodeText() }\n
\n \n
\n \n {'- ' + utils.money.formatMoney(order.discountAmount)}\n
\n \n
\n\n \n
\n \n Total: AU {utils.money.formatMoney(order.totalAmount)}\n {/* Item Total: {utils.money.formatMoney(order.itemAmount)}\n + Shipping Fee: {order.shippingAmount > 0 ? 'AU ' + utils.money.formatMoney(order.shippingAmount) : 'FREE'}\n + GST: {utils.money.formatMoney(order.taxAmount)}\n \n
\n Grand Total (including GST): AU {utils.money.formatMoney(order.totalAmount)}\n
*/}\n \n {/*
CONTACT
*/}\n\n DELIVERY METHOD\n
\n\n {order.shippingMethod}\n
\n {\n (order.shippingAddress && order.shippingMethod === 'Standard') &&\n // \n \n }\n \n
\n
\n}\n\nfunction Billing(props){\n const billingAddr = props.billingAddr;\n const useSameAddress = props.useSameAddress\n return (\n \n
SHIPPING ADDRESS
\n {addr.firstName}
\n {addr.surname}
\n \n \n {addr.street1}\n {addr.street2}\n
\n {addr.suburb}
\n {addr.state}
\n {addr.postcode}
\n {addr.email}
\n {addr.mobile}
\n \n
\n\n \n }\n
\n )\n}\n\nfunction KitBuildDetail(props){\n const kitBuildModel = props.kitBuild ? JSON.parse(props.kitBuild) : {};\n //console.log(\"kitBuildModel\", kitBuildModel);\n return(\n \n
BILLING ADDRESS
\n {\n useSameAddress === true && \n Use the same address
\n }\n {\n (billingAddr && useSameAddress === false) &&\n {billingAddr.firstName}
\n {billingAddr.surname}
\n \n \n {billingAddr.street1} \n {billingAddr.street2} \n
\n {billingAddr.suburb}
\n {billingAddr.state}
\n {billingAddr.postcode}
\n {billingAddr.email}
\n {billingAddr.mobile}
\n \n { kitBuildModel.SingleItemCheckout.Name }\n
\n )\n}","import React, { useEffect, useRef } from 'react';\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useRouter } from './components';\nimport { StoreProvider } from './store';\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 MemberLayout from 'layout/memberLayout';\nimport PurchaseOrderLayout from 'layout/purchaseOrderLayout';\nimport { ProvideAuth } from 'auth';\n\n//For ECM\nimport { ProductView } from './site/ecm/product/productView';\nimport { OrderDetails } from './site/ecm/orderDetails/orderDetails2';\nimport env from './env';\nimport { useStore } from './store';\n\nfunction AppLayout(props) {\n const { pathname } = useRouter();\n \n //For ECM\n const storeContext = useRef(useStore());\n \n //const [scrolled, setScrolled] = useState(false)\n //const path = usePath();\n //const routeResult = useRoutes(routes);\n\n // const parallax = useParallax();\n // //console.log(path, routeResult);\n // const routeChanged = (path) => {\n // //console.log(path);\n // parallax.reset();\n // }\n\n // useScrollPosition(({ prevPos, currPos }) => {\n // //console.log(currPos.x)\n // //console.log(currPos.y);\n // if (currPos.y > 90) {\n // document.querySelector('body').classList.add('scrolled')\n // } else {\n // document.querySelector('body').classList.remove('scrolled')\n // }\n // //setScrolled(currPos.y > 90)\n // }, [], null, true)\n\n //const pageChanged = useCallback(path => routeChanged(path), [])\n //useLocationChange((path) => { routeChanged(path, history)})\n //useLocationChange(path => routeChanged(path))\n \n //const pathFiltered = (pathname || '').toLocaleLowerCase();\n let specialClassName = '';\n// if (pathFiltered.indexOf('/digital-sensor') >= 0) specialClassName = 'digital-sensor-page';\n// else if (pathFiltered === '/brilliance') specialClassName = 'brilliance-page';\n\nuseEffect(()=>{\n \n if(!localStorage.favorites){\n localStorage.setItem(\"favorites\", \"\");\n }\n \n AOS.init({\n duration : 1200\n //delay:400,\n //once:true\n });\n\n // For ECM\n fetch(env.apiBase + \"/api/cart/getcart/\" + env.getDevCartId())\n .then(res => res.json())\n .then(res => {\n const data = res;\n if(data){\n storeContext.current.dispatch({type:'SET_STATE', payload : {cartInfo : data.cartInfo.totalQuantity === 0 ? 0 : (data.cartInfo.totalQuantity)-1}});\n }\n })\n .catch(error =>{\n storeContext.current.dispatch({type:'SET_STATE', payload : {cartInfo : 0}});\n });\n\n}, []);\n\n return (\n \n
\n );\n}\n\nfunction App() {\n return (\n \n
\n {/* */}\n \n \n \n \n \n \n \n
\n {/*