= ({\r\n editMode,\r\n linkTheme,\r\n description,\r\n linkSize,\r\n className,\r\n field,\r\n tag\r\n}) => {\r\n const [t] = useTranslation();\r\n const externalLinkText = t('accessibility-link-opens-in-a-new-tab');\r\n if (editMode) {\r\n const { href, text } = field?.value || {};\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n const linkObj = getLink(field.value);\r\n\r\n return (\r\n \r\n \r\n {linkObj.text || linkObj.url}\r\n {linkObj.type === LinkTypes.External && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nLink.defaultProps = {\r\n tag: 'a',\r\n linkTheme: LinkTheme.Primary,\r\n linkSize: LinkSize.Default\r\n};\r\n\r\nexport default compose(withEditMode)(Link);\r\n","import styled from 'styled-components';\r\nimport { text_s, iconColorOnPrint, mq } from '_utils/styles';\r\nimport svg from '../../../styles/svg';\r\n\r\nexport const AttributeRow = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: flex-start;\r\n`;\r\n\r\nexport const AttributeValue = styled.span`\r\n ${text_s}\r\n flex: 1 1 auto;\r\n margin: 0;\r\n`;\r\n\r\nexport const AttributeIcon = styled.span`\r\n ${svg(24, 24)}\r\n width: 20px;\r\n flex: none;\r\n margin: -1px 8px 0 0px;\r\n\r\n ${mq('md')} {\r\n margin: 1px 8px 0 0px;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n","import React from 'react';\r\n\r\nimport { AttributeRow, AttributeIcon, AttributeValue } from './StyledTimeEstimate';\r\nimport { Time } from '_utils/icons';\r\n\r\nconst TimeEstimate = ({ estimate }) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {estimate}\r\n \r\n );\r\n};\r\n\r\nexport default TimeEstimate;\r\n","import styled from 'styled-components';\r\nimport { text_s, iconColorOnPrint, mq } from '_utils/styles';\r\nimport svg from '../../../styles/svg';\r\n\r\nexport const AttributeRow = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: flex-start;\r\n`;\r\n\r\nexport const AttributeValue = styled.span`\r\n ${text_s}\r\n flex: 1 1 auto;\r\n margin: 0;\r\n`;\r\n\r\nexport const AttributeIcon = styled.span`\r\n ${svg(24, 24)}\r\n width: 20px;\r\n flex: none;\r\n margin: 0px 8px 0 0px;\r\n\r\n ${mq('md')} {\r\n margin: 2px 8px 0 0px;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n","import React from 'react';\r\n\r\nimport { AttributeRow, AttributeIcon, AttributeValue } from './StyledCost';\r\nimport { Cost } from '_utils/icons';\r\n\r\nconst CostEstimate = ({ estimate }) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {estimate}\r\n \r\n );\r\n};\r\n\r\nexport default CostEstimate;\r\n","import styled from 'styled-components';\r\nimport { text_s, iconColorOnPrint, mq } from '_utils/styles';\r\nimport svg from '../../../styles/svg';\r\n\r\nexport const AttributeRow = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: flex-start;\r\n`;\r\n\r\nexport const AttributeValue = styled.span`\r\n ${text_s}\r\n flex: 1 1 auto;\r\n margin: 0;\r\n`;\r\n\r\nexport const AttributeIcon = styled.span`\r\n ${svg(24, 24)}\r\n width: 20px;\r\n flex: none;\r\n margin: -1px 8px 0 0px;\r\n\r\n ${mq('md')} {\r\n margin: 1px 8px 0 0px;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n","import React from 'react';\r\n\r\nimport { AttributeRow, AttributeIcon, AttributeValue } from './StyledInstallationPeriod';\r\nimport { Calendar } from '_utils/icons';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst InstallationPeriod = ({ installationPeriod }) => {\r\n const [t] = useTranslation();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {t('page-banner-installed')}{' '}\r\n {installationPeriod}\r\n \r\n );\r\n};\r\n\r\nexport default InstallationPeriod;\r\n","import styled from 'styled-components';\r\nimport { NavLink } from 'react-router-dom';\r\n\r\nimport { text_s, iconColorOnPrint, mq } from '_utils/styles';\r\nimport svg from '../../../styles/svg';\r\n\r\nexport const AttributeRow = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: flex-start;\r\n`;\r\n\r\nexport const AttributeValue = styled.span`\r\n ${text_s}\r\n flex: 1 1 auto;\r\n margin: 0;\r\n`;\r\n\r\nexport const AttributeIcon = styled.span`\r\n ${svg(24, 24)}\r\n width: 20px;\r\n flex: none;\r\n margin: -2px 8px 0 0;\r\n\r\n ${mq('md')} {\r\n margin: 0px 8px 0 0;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n\r\nexport const Link = styled(NavLink)`\r\n color: inherit;\r\n`;\r\n","import React from 'react';\r\nimport { AttributeRow, AttributeIcon, AttributeValue, Link } from './StyledRelatesTo';\r\n\r\nimport { RelatesTo as RelatesToIcon } from '_utils/icons';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nfunction RelatedItem({ item, index }) {\r\n if (Boolean(item?.CoreRelationTitle?.jss) === false) {\r\n return null;\r\n }\r\n\r\n const {\r\n CoreRelationTitle: { jss: coreRelationTitle },\r\n url\r\n } = item;\r\n return (\r\n <>\r\n {index > 0 ? ', ' : ''}\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction RelatesTo({ items }) {\r\n const [t] = useTranslation();\r\n\r\n if (!items) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {t('page-banner-related-to')}{' '}\r\n {items.map((item, index) => (\r\n \r\n ))}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default RelatesTo;\r\n","import styled from 'styled-components';\r\nimport { text_s, iconColorOnPrint, mq } from '_utils/styles';\r\nimport svg from '../../../styles/svg';\r\n\r\nexport const AttributeRow = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: flex-start;\r\n`;\r\n\r\nexport const AttributeValue = styled.span`\r\n ${text_s}\r\n flex: 1 1 auto;\r\n margin: 0;\r\n`;\r\n\r\nexport const AttributeIcon = styled.span`\r\n ${svg(20, 20)}\r\n width: 17px;\r\n flex: none;\r\n margin: 0px 10px 0 0;\r\n\r\n ${mq('md')} {\r\n margin: 2px 10px 0 0;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n","import React from 'react';\r\n\r\nimport { AttributeRow, AttributeIcon, AttributeValue } from './StyledLastUpdated';\r\n\r\nimport { dateConverter } from '_utils/helpers';\r\nimport { Calendar } from '_utils/icons';\r\nimport { warnInDev } from '_utils/helpers/dev';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nfunction LastUpdated({ systemDateUpdated }) {\r\n const [t] = useTranslation();\r\n const { value } = systemDateUpdated;\r\n const output = dateConverter(value);\r\n\r\n if (!output) {\r\n warnInDev(`LastUpdated : dateConverter failed to convert ${value}`);\r\n return null;\r\n }\r\n\r\n const { attrDate, visualDate } = output;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {t('publication-page-banner-last-updated-prefix')}{' '}\r\n {' '}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default LastUpdated;\r\n","export { default as Box } from './Box';\r\nexport { default as Grid } from './Grid';\r\nexport { default as Section } from './Section';\r\nexport { PlaceholderWrapper } from './Section/StyledSection';\r\nexport { default as Radio } from './Radio';\r\n// export { default as Type } from './Type/';\r\n// export { default as Icon } from './Icon/';\r\n// export { default as PlainButton } from './PlainButton/';\r\n// export { default as Modal } from './Modal/';\r\nexport { default as CopyText } from './CopyText/';\r\nexport { default as Carousel } from './Carousel/';\r\nexport { default as ListingImage } from './ListingImage/';\r\nexport { default as Link } from './Link/';\r\nexport { default as TimeEstimate } from './TimeEstimate/';\r\nexport { default as CostEstimate } from './CostEstimate/';\r\nexport { default as InstallationPeriod } from './InstallationPeriod/';\r\nexport { default as RelatesTo } from './RelatesTo/';\r\nexport { default as LastUpdated } from './LastUpdated/';\r\n// export { default as Navigation } from './Navigation/';\r\n// export { default as PrimaryNavigation } from './PrimaryNavigation/';\r\n// export { default as ListWrapper } from './ListWrapper/';\r\n// export { default as ReadMore } from './ReadMore/';\r\n// export { default as ShowMore } from './ShowMore/';\r\n// export { default as CardLarge } from './CardLarge/';\r\n// export { default as Picture } from './Picture/';\r\n// export { default as NewsItem } from './NewsItem/';\r\n// export { default as InsightsItem } from './InsightsItem/';\r\n// export { default as CaseStudiesListItem } from './CaseStudiesListItem/';\r\n// export { default as BannerFullWidthImage } from './BannerFullWidthImage/';\r\n// export { default as BannerFullWidthImageWithText } from './BannerFullWidthImageWithText/';\r\n// export { default as CircularArrow } from './CircularArrow/';\r\n// export { default as YoutubeLoader } from './YoutubeLoader/';\r\n// export { default as VideoHtml5 } from './VideoHtml5';\r\n\r\n// export { default as ConditionalStaticPlaceholder } from './ConditionalStaticPlaceholder/';\r\n","import styled from 'styled-components';\r\n\r\nimport { flex, layout, text, spacing, color } from '_utils/props/';\r\nimport mq, { getZeroMediaQuery } from '../../../styles/mq';\r\nimport { isPlainValue } from '_utils/props';\r\nimport { ITheme } from '_containers/Theme/theme';\r\n\r\nconst toPercent = (col: any, colCount: number): string => `${(parseInt(col) / colCount) * 100}%`;\r\n\r\nconst wrapWithMediaQuery = (breakpoint: string, value): string => {\r\n value = Array.isArray(value) ? value.join('') : value;\r\n if (breakpoint !== getZeroMediaQuery()) {\r\n return `\r\n ${mq(breakpoint)} {\r\n ${value}\r\n }\r\n `;\r\n }\r\n return `${value}`;\r\n};\r\n\r\nconst getColStyles = (col: any, colCount: number): string => {\r\n if (col === 'auto') {\r\n return `\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n `;\r\n }\r\n\r\n return `\r\n flex: 0 0 ${toPercent(col, colCount)};\r\n max-width: ${toPercent(col, colCount)};\r\n `;\r\n};\r\n\r\nconst columns = (col: any, theme: ITheme) => {\r\n // 1 grid size all breakpoints\r\n if (isPlainValue(col)) {\r\n return getColStyles(col, theme.grid.colCount);\r\n }\r\n\r\n // At this point cols should be an object;\r\n // {sm: 4, md: 6}\r\n return Object.keys(col).map((size) =>\r\n wrapWithMediaQuery(size, getColStyles(col[size], theme.grid.colCount))\r\n );\r\n};\r\n\r\nconst offset = (offset, theme) => {\r\n // 1 grid size all breakpoints\r\n if (isPlainValue(offset)) {\r\n return `margin-left: ${toPercent(offset, theme.grid.colCount)};`;\r\n }\r\n\r\n // At this point value should be an object;\r\n // {sm: 4, md: 6}\r\n return Object.keys(offset).map((size) =>\r\n wrapWithMediaQuery(size, `margin-left: ${toPercent(offset[size], theme.grid.colCount)};`)\r\n );\r\n};\r\n\r\nconst push = (push, theme) => {\r\n // 1 grid size all breakpoints\r\n if (isPlainValue(push)) {\r\n return `margin-right: ${toPercent(push, theme.grid.colCount)};`;\r\n }\r\n\r\n // At this point value should be an object;\r\n // {sm: 4, md: 6}\r\n return Object.keys(push).map((size) =>\r\n wrapWithMediaQuery(size, `margin-right: ${toPercent(push[size], theme.grid.colCount)};`)\r\n );\r\n};\r\n\r\nconst order = (order) => {\r\n const propType = typeof order;\r\n\r\n // 1 grid size all breakpoints\r\n if (propType === 'string' || propType === 'number') {\r\n return `order: ${order};`;\r\n }\r\n\r\n // At this point value should be an object;\r\n // {sm: 4, md: 6}\r\n return Object.keys(order).map((size) => wrapWithMediaQuery(size, `order: ${order[size]};`));\r\n};\r\n\r\nconst gutters = ({ config, theme }) => {\r\n const gutters = config && config.gutters ? config.gutters : theme.grid.gutter.directions;\r\n\r\n return Object.keys(theme.grid.gutter.size).map((breakpoint) =>\r\n wrapWithMediaQuery(\r\n breakpoint,\r\n gutters.map((dir) => `padding-${dir}: ${theme.grid.gutter.size[breakpoint] / 2}px;`)\r\n )\r\n );\r\n};\r\n\r\nconst borders = ({ config, theme }) => {\r\n const borders = config && config.borders;\r\n\r\n if (!borders) {\r\n return '';\r\n }\r\n\r\n const borderColor = config && config.borderColor ? config.borderColor : theme.grid.borderColor;\r\n const borderWidth = config && config.borderWidth ? config.borderWidth : theme.grid.borderWidth;\r\n\r\n const gutters = config && config.gutters ? config.gutters : theme.grid.gutter.directions;\r\n const gutterLeft = gutters.indexOf('left') > -1;\r\n const gutterRight = gutters.indexOf('right') > -1;\r\n const gutterTop = gutters.indexOf('top') > -1;\r\n const gutterBottom = gutters.indexOf('bottom') > -1;\r\n\r\n return Object.keys(theme.grid.gutter.size).map((breakpoint) =>\r\n wrapWithMediaQuery(\r\n breakpoint,\r\n `\r\n :after {\r\n \r\n content: '';\r\n position: absolute;\r\n top: ${gutterTop ? theme.grid.gutter.size[breakpoint] / 2 : 0}px;\r\n left: ${gutterLeft ? theme.grid.gutter.size[breakpoint] / 2 : 0}px;\r\n width: calc(100% - ${gutterLeft ? theme.grid.gutter.size[breakpoint] / 2 : 0}px - ${\r\n gutterRight ? theme.grid.gutter.size[breakpoint] / 2 : 0\r\n }px );\r\n height: calc(100% - ${gutterTop ? theme.grid.gutter.size[breakpoint] / 2 : 0}px - ${\r\n gutterBottom ? theme.grid.gutter.size[breakpoint] / 2 : 0\r\n }px );\r\n pointer-events: none;\r\n \r\n ${borders.map((dir) => `border-${dir}: ${borderWidth} solid ${borderColor};`).join('')};\r\n }`\r\n )\r\n );\r\n};\r\n\r\n// reverse effect of item gutters with negative margins\r\nconst rowGutters = ({ config, theme }) => {\r\n const gutters = config && config.gutters ? config.gutters : theme.grid.gutter.directions;\r\n\r\n return Object.keys(theme.grid.gutter.size).map((breakpoint) =>\r\n wrapWithMediaQuery(\r\n breakpoint,\r\n gutters.map((dir) => `margin-${dir}: -${theme.grid.gutter.size[breakpoint] / 2}px;`)\r\n )\r\n );\r\n};\r\n\r\nconst calculateItemConfig = ({ config, theme }) => {\r\n const styles = [];\r\n\r\n if (typeof config.col !== 'undefined') {\r\n styles.push(columns(config.col, theme));\r\n }\r\n\r\n if (typeof config.order !== 'undefined') {\r\n styles.push(order(config.order));\r\n }\r\n\r\n if (typeof config.offset !== 'undefined') {\r\n styles.push(offset(config.offset, theme));\r\n }\r\n\r\n if (typeof config.push !== 'undefined') {\r\n styles.push(push(config.push, theme));\r\n }\r\n\r\n return styles;\r\n};\r\n\r\nconst Container = styled.div`\r\n width: 100%;\r\n max-width: ${(props) => (props.fluid ? 'none' : `${props.theme.grid.containerMaxWidth}px`)};\r\n min-width: ${(props) => (props.fluid ? 'none' : `${props.theme.grid.containerMinWidth}px`)};\r\n margin-right: auto;\r\n margin-left: auto;\r\n\r\n padding-left: ${({ theme }) => theme.grid.margin.xs}px;\r\n padding-right: ${({ theme }) => theme.grid.margin.xs}px;\r\n\r\n ${mq('lg')} {\r\n padding-left: ${({ theme }) => theme.grid.margin.lg}px;\r\n padding-right: ${({ theme }) => theme.grid.margin.lg}px;\r\n }\r\n\r\n ${mq('xl')} {\r\n padding-left: 0;\r\n padding-right: 0;\r\n }\r\n\r\n ${spacing}\r\n`;\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n ${flex}\r\n ${rowGutters}\r\n ${spacing}\r\n`;\r\n\r\nRow.defaultProps = {\r\n flexWrap: 'wrap'\r\n};\r\n\r\nconst Item = styled.div`\r\n position: relative;\r\n width: 100%;\r\n ${color}\r\n ${layout}\r\n ${flex}\r\n ${text}\r\n ${spacing}\r\n ${gutters}\r\n ${borders}\r\n ${calculateItemConfig}\r\n`;\r\n\r\nItem.defaultProps = {\r\n config: {\r\n gridX: true,\r\n gridY: true\r\n }\r\n};\r\n\r\nexport default {\r\n Container,\r\n Row,\r\n Item\r\n};\r\n","import styled from 'styled-components';\r\nimport { cssInlineSvg } from '_utils/styles/svg';\r\nimport { mq } from '_utils/styles';\r\n\r\nexport const Container = styled.div`\r\n position: relative;\r\n & + & {\r\n margin-top: 8px;\r\n }\r\n`;\r\n\r\n// hidden input (but keep accessible)\r\nexport const Input = styled.input`\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n opacity: 0;\r\n transform: translateY(-50%);\r\n margin: 0;\r\n`;\r\n\r\nexport const Label = styled.label`\r\n display: block;\r\n z-index: 1;\r\n margin: 0;\r\n padding-left: 32px;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n`;\r\n\r\nexport const Check = styled.div`\r\n flex: none;\r\n width: 24px;\r\n height: 24px;\r\n border: ${({ theme }) => theme.colors.form.radio.borderHover};\r\n border-radius: 9999px;\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n\r\n ${mq.lessThan('md')}{\r\n top: 12px;\r\n }\r\n\r\n &:before {\r\n content: '';\r\n background: ${cssInlineSvg(\r\n ``\r\n )}\r\n no-repeat;\r\n position: absolute;\r\n display: block;\r\n left: 50%;\r\n top: 50%; /* looks better */\r\n transform: translate(-50%, -50%);\r\n width: 11.71px;\r\n height: 8.72px;\r\n opacity: 0;\r\n }\r\n outline: 0;\r\n\r\n ${Input}:checked ~ & {\r\n &:before {\r\n opacity: 1;\r\n }\r\n\r\n background-color: ${({ theme }) => theme.colors.form.radio.selectedBackground};\r\n border: ${({ theme }) => theme.colors.form.radio.selectedBorder};\r\n }\r\n\r\n body:not(.safe-focus-removal) ${Input}:focus ~ & {\r\n &:after {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 9999px;\r\n }\r\n }\r\n\r\n [type='checkbox'] ~ & {\r\n border-radius: 4px;\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n body:not(.safe-focus-removal) ${Input}[type='checkbox']:focus ~ & {\r\n &:after {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 6px;\r\n }\r\n }\r\n`;","import { warnInDev } from '../helpers/dev';\r\nimport { isContentful } from '../helpers/image';\r\n\r\nexport const convertSrcJss = (src, width = null) => {\r\n if (!src) {\r\n return '';\r\n }\r\n\r\n let pattern = /^(.*\\/-\\/)media(\\/[^?]*)?.*$/gim;\r\n let matches = pattern.exec(src);\r\n\r\n if (isContentful(src)) {\r\n return `${src + (width ? `?w=${width}` : '')}`;\r\n }\r\n\r\n if (matches && matches.length > 2) {\r\n return `${matches[1]}jssmedia${matches[2] + (width ? `?mw=${width}` : '')}`;\r\n }\r\n return src;\r\n};\r\n\r\nexport const createSrcSet = (src, widths) => {\r\n let jssSrc = convertSrcJss(src);\r\n if (!jssSrc) {\r\n warnInDev(`Could not get jssSrc for ${src}`);\r\n return '';\r\n }\r\n if (isContentful(src)) {\r\n return widths.map((width) => `${jssSrc}?w=${width} ${width}w`).join(', ');\r\n }\r\n return widths.map((width) => `${jssSrc}?mw=${width} ${width}w`).join(', ');\r\n};\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\nimport PropTypes from 'prop-types'\r\n\r\nconst Download = (props) => (\r\n \r\n);\r\n\r\nDownload.prototype = {\r\n color: PropTypes.string\r\n}\r\nexport default withSvg(16, 18)(Download);\r\n","import styled from 'styled-components';\r\n\r\nimport { PlaceholderWrapper } from '_utils/components/Corporate';\r\n\r\nexport const Primary = styled(PlaceholderWrapper)``;\r\nexport const Secondary = styled(PlaceholderWrapper)``;\r\n","export default function keyByValue(object, value) {\r\n if (!object) {\r\n return undefined;\r\n }\r\n\r\n const keys = Object.keys(object);\r\n\r\n for (let i = 0; i < keys.length; i++) {\r\n if (object[keys[i]] === value) {\r\n return keys[i];\r\n }\r\n }\r\n\r\n return undefined;\r\n}\r\n","import keyByValue from '_utils/helpers/keyByValue';\r\n\r\nexport default function getTypeFromValue(\r\n object,\r\n value: string | object,\r\n key: string = 'type'\r\n): T {\r\n if (!object || !value) {\r\n return undefined;\r\n }\r\n\r\n if (typeof value === 'string') {\r\n return object[keyByValue(object, value)];\r\n }\r\n\r\n if (value && value.hasOwnProperty(key)) {\r\n return object[keyByValue(object, value[key])];\r\n }\r\n}\r\n","import axios from 'axios';\r\n\r\n/**\r\n * Implements a data fetcher using Axios - replace with your favorite\r\n * SSR-capable HTTP or fetch library if you like. See HttpJsonFetcher type\r\n * in sitecore-jss library for implementation details/notes.\r\n * @param {string} url The URL to request; may include query string\r\n * @param {any} data Optional data to POST with the request.\r\n */\r\nexport function dataFetcher(url, data) {\r\n return axios({\r\n url,\r\n method: data ? 'POST' : 'GET',\r\n data,\r\n // note: axios needs to use `withCredentials: true` in order for Sitecore cookies to be included in CORS requests\r\n // which is necessary for analytics and such\r\n withCredentials: true\r\n });\r\n}\r\n","export const isValidLinkObject = (link) => Boolean(link?.url);\r\n\r\nexport const getLink = (link) => {\r\n if (isValidLinkObject(link)) {\r\n return {\r\n ...link,\r\n ...(Boolean(link.linkType && typeof link.linkType === 'string') && {\r\n type: link.linkType.toLowerCase()\r\n }),\r\n ...(Boolean(link.linktype && typeof link.linktype === 'string') && {\r\n type: link.linktype.toLowerCase()\r\n }),\r\n ...(Boolean(link.type && typeof link.type === 'string') && {\r\n type: link.type.toLowerCase()\r\n })\r\n };\r\n } else if (typeof link === 'string' && Boolean(link)) {\r\n let linkObj: any = {\r\n url: link\r\n };\r\n\r\n if (!link.startsWith('/')) {\r\n linkObj.type = 'external';\r\n linkObj.target = '_blank';\r\n }\r\n\r\n return linkObj;\r\n } else if (link && typeof link === 'object') {\r\n // handle yet another format of links\r\n let linkObj: any = {\r\n ...link\r\n };\r\n\r\n if (link.hasOwnProperty('href')) {\r\n linkObj.url = link.href;\r\n }\r\n\r\n if (link.hasOwnProperty('linktype')) {\r\n linkObj.type = link.linktype;\r\n }\r\n\r\n if (link.hasOwnProperty('linkType')) {\r\n linkObj.type = link.linkType;\r\n }\r\n\r\n // remove renamed keys\r\n delete linkObj.href;\r\n delete linkObj.linkType;\r\n delete linkObj.linktype;\r\n\r\n if (isValidLinkObject(linkObj)) {\r\n return linkObj;\r\n } else {\r\n return null;\r\n }\r\n } else {\r\n return null;\r\n }\r\n};\r\n","import React, { ReactNode, forwardRef } from 'react';\r\n\r\nimport { Container, Input, Label, Check } from './StyledRadio';\r\n\r\ntype RadioProps = {\r\n id: string;\r\n name: string;\r\n value: any;\r\n checked: boolean;\r\n disabled?: boolean;\r\n onChange: (e) => void;\r\n children: ReactNode;\r\n};\r\n\r\nexport type Ref = HTMLElement;\r\n\r\nconst Radio = forwardRef(\r\n ({ id, name, value, checked, disabled = false, children, onChange }, ref) => (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n);\r\n\r\nexport default Radio;\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\nimport PropTypes from 'prop-types'\r\n\r\nconst SvgArrowLeft = (props) => (\r\n \r\n);\r\n\r\nSvgArrowLeft.prototype = {\r\n color: PropTypes.string\r\n}\r\nexport default withSvg(24, 24)(SvgArrowLeft);","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgBook = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgBook);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCapacity = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgCapacity);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgChevron = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgChevron);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCheveron = () => (\r\n \r\n);\r\n\r\nexport default withSvg(14, 8)(SvgCheveron);\r\n","import React from 'react';\r\nimport {withSvg} from \"./Svg\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgClipboard = (props) => (\r\n \r\n);\r\n\r\nSvgClipboard.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(40, 40)(SvgClipboard);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvClosed = (props) => (\r\n \r\n);\r\n\r\nSvClosed.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(24, 24)(SvClosed);\r\n","import React from 'react';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgClock = (props) => (\r\n \r\n);\r\n\r\nSvgClock.prototype = {\r\n color: PropTypes.string\r\n}\r\nexport default SvgClock;\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCompleted = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgCompleted);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCost = () => (\r\n <>\r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgCost);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgArrow = () => (\r\n \r\n);\r\n\r\nexport default withSvg(18, 18)(SvgArrow);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgInfoCircle = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgInfoCircle);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgInProgress = (props) => (\r\n \r\n);\r\n\r\nSvgInProgress.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(24, 24)(SvgInProgress);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgMarker = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgMarker);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgOnExhibition = () => (\r\n \r\n);\r\n\r\nexport default withSvg(22, 22)(SvgOnExhibition);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgOpenForFeedback = (props) => (\r\n \r\n);\r\n\r\nSvgOpenForFeedback.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(24, 24)(SvgOpenForFeedback);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgPlanned = (props) => (\r\n <>\r\n \r\n \r\n \r\n);\r\n\r\nSvgPlanned.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(24, 24)(SvgPlanned);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgRelatesTo = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgRelatesTo);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgReportingBack = (props) => (\r\n \r\n);\r\n\r\nSvgReportingBack.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(20, 20)(SvgReportingBack);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgSearch = () => (\r\n \r\n);\r\n\r\nexport default withSvg(18, 18)(SvgSearch);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgSimpleArrow = () => (\r\n \r\n);\r\n\r\nexport default withSvg(7, 12)(SvgSimpleArrow);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCapacity = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgCapacity);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCapacity = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgCapacity);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgTime = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgTime);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgUnderReview = (props) => (\r\n <>\r\n {/**/}\r\n {/**/}\r\n \r\n \r\n);\r\n\r\nSvgUnderReview.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(20, 20)(SvgUnderReview);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgWarning = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 21)(SvgWarning);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgWarningCircle = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgWarningCircle);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgRefresh = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgRefresh);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst InProgress = () => (\r\n <>\r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(InProgress);","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst NotStarted = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(NotStarted);","import React from 'react';\r\nimport {withSvg} from \"../Svg\";\r\n\r\nconst Completed = () => (\r\n <>\r\n \r\n \r\n \r\n\r\n);\r\n\r\nexport default withSvg(24, 24)(Completed);","import React from 'react';\r\nimport {withSvg} from \"../Svg\";\r\n\r\nconst SvgPerson = () => (\r\n \r\n\r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPerson);","import React from 'react';\r\nimport {withSvg} from \"../Svg\";\r\n\r\nconst SvgCheck = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCheck);","import React from 'react';\r\nimport {withSvg} from \"../Svg\";\r\n\r\nconst SvgClose = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgClose);","import React from 'react';\r\nimport {withSvg} from \"../Svg\";\r\n\r\nconst SvgCornerDownRight = () => (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCornerDownRight);","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgPlanned = (props) => (\r\n \r\n);\r\n\r\nSvgPlanned.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(20, 20)(SvgPlanned);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst Chart = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(Chart);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst ClipBoard = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(ClipBoard);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst CommentExclaim = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(CommentExclaim);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPin = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPin);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst File = () => (\r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(File);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst Zip = () => (\r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(Zip);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst Excel = () => (\r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(Excel);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst Image = () => (\r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(Image);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst Movie = () => (\r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(Movie);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst PDF = () => (\r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(PDF);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport colors from '_containers/Theme/colors';\r\n\r\nconst Word = () => (\r\n \r\n);\r\n\r\nexport default withSvg(16, 20)(Word);\r\n","export { default as Arrow } from './Arrow';\r\nexport { default as ArrowLeft } from './ArrowLeft';\r\nexport { default as Book } from './status/Book';\r\nexport { default as Calendar } from './Calendar';\r\nexport { default as Camera } from './Camera';\r\nexport { default as Capacity } from './Capacity';\r\nexport { default as Chevron } from './Chevron';\r\nexport { default as ChevronDown } from './ChevronDown';\r\nexport { default as Clipboard } from './Clipboard';\r\nexport { default as Closed } from './status/Closed';\r\nexport { default as Clock } from './Clock';\r\nexport { default as Completed } from './status/Completed';\r\nexport { default as Cost } from './Cost';\r\nexport { default as Cross } from './Cross';\r\nexport { default as Directions } from './Directions';\r\nexport { default as Download } from './Download';\r\nexport { default as External } from './External';\r\nexport { default as Facebook } from './social/Facebook';\r\nexport { default as Filters } from './Filters';\r\nexport { default as InfoCircle } from './InfoCircle';\r\nexport { default as InProgress } from './status/InProgress';\r\nexport { default as Instagram } from './social/Instagram';\r\nexport { default as LinkedIn } from './social/LinkedIn';\r\nexport { default as Lockup } from './Lockup';\r\nexport { default as Logo } from './Logo';\r\nexport { default as Mail } from './Mail';\r\nexport { default as Marker } from './Marker';\r\nexport { default as OnExhibition } from './status/OnExhibition';\r\nexport { default as OpenForFeedback } from './status/OpenForFeedback';\r\nexport { default as Phone } from './Phone';\r\nexport { default as Pin } from './Pin';\r\nexport { default as Planned } from './status/Planned';\r\nexport { default as RelatesTo } from './RelatesTo';\r\nexport { default as ReportingBack } from './status/ReportingBack';\r\nexport { default as Search } from './Search';\r\nexport { default as SimpleArrow } from './SimpleArrow';\r\nexport { default as Size } from './Size';\r\nexport { default as Tag } from './Tag';\r\nexport { default as Time } from './Time';\r\nexport { default as Twitter } from './social/Twitter';\r\nexport { default as UnderReview } from './status/UnderReview';\r\nexport { default as Warning } from './Warning';\r\nexport { default as WarningCircle } from './WarningCircle';\r\nexport { default as Youtube } from './social/Youtube';\r\nexport { default as Refresh } from './Refresh';\r\nexport { default as TimelineInProgress } from './Timeline/InProgress';\r\nexport { default as TimelineNotStarted } from './Timeline/NotStarted';\r\nexport { default as TimelineCompleted } from './Timeline/Completed';\r\nexport { default as DashBoardRequestUser } from './DashboardRequestTab/User';\r\nexport { default as DashBoardRequestCheck } from './DashboardRequestTab/Check';\r\nexport { default as DashBoardRequestClose } from './DashboardRequestTab/Close';\r\nexport { default as DashBoardRequestCorner } from './DashboardRequestTab/CornerDownRight';\r\nexport { default as ConsultationsPlanned } from './Consultations/Planned';\r\nexport { default as LinkButtonChart } from './LinkButtons/Chart';\r\nexport { default as LinkButtonClipBoard } from './LinkButtons/ClipBoard';\r\nexport { default as LinkButtonCommentExclaim } from './LinkButtons/CommentExclaim';\r\nexport { default as LinkButtonPin } from './LinkButtons/Pin';\r\n\r\nexport * from './filetypes/';\r\n","import { useState, useEffect } from 'react';\r\n// Usage\r\n\r\n// Hook\r\nlet cachedScripts = [];\r\nfunction useScript(src, removeOnUnmount = false) {\r\n // Keeping track of script loaded and error state\r\n const [state, setState] = useState({\r\n loaded: false,\r\n error: false\r\n });\r\n\r\n useEffect(\r\n () => {\r\n // If cachedScripts array already includes src that means another instance ...\r\n // ... of this hook already loaded this script, so no need to load again.\r\n if (cachedScripts.indexOf(src) > -1) {\r\n setState({\r\n loaded: true,\r\n error: false\r\n });\r\n } else {\r\n cachedScripts.push(src);\r\n\r\n // Create script\r\n let script = document.createElement('script');\r\n script.src = src;\r\n script.async = true;\r\n\r\n // Script event listener callbacks for load and error\r\n const onScriptLoad = () => {\r\n setState({\r\n loaded: true,\r\n error: false\r\n });\r\n };\r\n\r\n const onScriptError = () => {\r\n // Remove from cachedScripts we can try loading again\r\n const index = cachedScripts.indexOf(src);\r\n if (index >= 0) cachedScripts.splice(index, 1);\r\n script.remove();\r\n\r\n setState({\r\n loaded: true,\r\n error: true\r\n });\r\n };\r\n\r\n script.addEventListener('load', onScriptLoad);\r\n script.addEventListener('error', onScriptError);\r\n\r\n // Add script to document body\r\n document.body.appendChild(script);\r\n\r\n // Remove event listeners on cleanup\r\n return () => {\r\n script.removeEventListener('load', onScriptLoad);\r\n script.removeEventListener('error', onScriptError);\r\n if(removeOnUnmount){\r\n const index = cachedScripts.indexOf(src);\r\n if (index >= 0) cachedScripts.splice(index, 1);\r\n if(script){\r\n script.remove();\r\n }\r\n }\r\n };\r\n }\r\n },\r\n [src] // Only re-run effect if script src changes\r\n );\r\n\r\n return [state.loaded, state.error];\r\n}\r\nexport default useScript;\r\n","import { filter, mergeLeft } from 'ramda';\r\n\r\nexport const addressClean = (address) => {\r\n const isValid = (value) =>\r\n value !== false && value !== undefined && value !== null && value !== '';\r\n\r\n return filter(isValid, address);\r\n};\r\n\r\nexport const addressMerge = (address1, address2) => {\r\n if (!address2) {\r\n return address1;\r\n }\r\n\r\n if (!address1) {\r\n return address2;\r\n }\r\n\r\n // remove empty values in space so they dont override those in place\r\n return mergeLeft(addressClean(address1), address2);\r\n};\r\n","export const getRandomId = () =>\r\n Math.random()\r\n .toString()\r\n .substr(2);\r\n\r\nexport const normalizeId = (id: string | string[]) => {\r\n if (!id) {\r\n return id;\r\n }\r\n if (Array.isArray(id)) {\r\n return id.map(normalizeId);\r\n }\r\n if (typeof id !== 'string') {\r\n return id;\r\n }\r\n return id.replace(/-/g, '').toLowerCase();\r\n};\r\n\r\nexport const equalIds = (id1: string, id2: string): boolean => {\r\n let s1 = normalizeId(id1);\r\n let s2 = normalizeId(id2);\r\n if (s1 === '' && s2 === '') {\r\n return true;\r\n }\r\n if (!s1 || !s2) {\r\n return false;\r\n }\r\n return s1 === s2;\r\n};\r\n\r\nexport const includesId = (array, id: string): boolean => {\r\n if (!id || !Array.isArray(array)) {\r\n return false;\r\n }\r\n return array.filter((value) => equalIds(value, id)).length > 0;\r\n};\r\n","import moment from 'moment-mini';\r\n\r\nconst DATE_UNDEFINED = '00010101T000000'; // also default date\r\n\r\nexport const dateIsDefined = (dateStr) => {\r\n if (!dateStr || dateStr === DATE_UNDEFINED) {\r\n return false;\r\n }\r\n\r\n const date = moment.parseZone(dateStr, 'YYYYMMDDTHHmmss', true);\r\n\r\n if (!date.isValid()) {\r\n return false;\r\n }\r\n\r\n return date.format('YYYYMMDDTHH:mm') !== '0001010100:00';\r\n};\r\n","export * from './address';\r\nexport * from './queryString';\r\nexport * from './id';\r\nexport * from './dateIsDefined';\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCalendar = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCalendar);\r\n","/**\r\n * Allows us to detect whether focus related styles can be removed safely\r\n *\r\n * see http://a11yproject.com/posts/never-remove-css-outlines\r\n *\r\n * Example usage:\r\n * const focusStylesObserver = createFocusStylesObserver(document.body)\r\n * focusStylesObserver.start()\r\n *\r\n */\r\n\r\nfunction setFocusStylesSafeRemoval(elem, className) {\r\n if (elem.classList.contains(className)) {\r\n return;\r\n }\r\n\r\n elem.classList.add(className);\r\n}\r\n\r\nfunction unsetFocusStylesSafeRemoval(elem, className) {\r\n if (!elem.classList.contains(className)) {\r\n return;\r\n }\r\n\r\n elem.classList.remove(className);\r\n}\r\n\r\nfunction startObserving(elem, className) {\r\n elem.addEventListener('mousemove', () => {\r\n setFocusStylesSafeRemoval(elem, className);\r\n });\r\n\r\n elem.addEventListener('keydown', () => {\r\n unsetFocusStylesSafeRemoval(elem, className);\r\n });\r\n}\r\n\r\nfunction createFocusStylesObserver(elem, className = 'safe-focus-removal') {\r\n return {\r\n start: startObserving.bind(null, elem, className)\r\n };\r\n}\r\n\r\nexport default createFocusStylesObserver;\r\n","export { default as createFocusStylesObserver } from './FocusStylesObserver';\r\n\r\nexport const safeFocusRemoval = `\r\n .safe-focus-removal & {\r\n outline: 0\r\n }\r\n`;\r\n\r\nexport const focusOutline = ({ theme }) => `\r\n outline-color: ${theme.colors.element.focused};\r\n outline-offset: 2px;\r\n outline-width: 2px;\r\n outline-style: solid;\r\n}\r\n`;\r\n","import { useEffect } from 'react';\r\n\r\nimport { useLocation } from 'react-router-dom';\r\nimport { canUseDOM } from 'exenv';\r\n\r\nexport const TRANSITION_DELAY = 250;\r\nlet timer;\r\n\r\nexport function scrollTop(delay = TRANSITION_DELAY, behavior: ScrollBehavior = 'auto') {\r\n try {\r\n if (canUseDOM) {\r\n clearTimeout(timer);\r\n\r\n // Let the LoadingScreen fade in before scrolling\r\n timer = window.setTimeout(\r\n () =>\r\n window.scrollTo({\r\n top: 0,\r\n left: 0,\r\n behavior: behavior\r\n }),\r\n delay\r\n );\r\n }\r\n } catch {}\r\n}\r\n\r\nfunction scrollToElementById(id, scrollOptions = { behavior: 'smooth' }, attempts = 0) {\r\n const element = document.getElementById(id);\r\n\r\n if (element) {\r\n element.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n } else {\r\n requestAnimationFrame(() => {\r\n //give up after ~15 sec\r\n if (attempts < 900) {\r\n scrollToElementById(id, scrollOptions, attempts + 1);\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default function ScrollToTop() {\r\n const { pathname, hash } = useLocation();\r\n\r\n useEffect(() => {\r\n if (!canUseDOM) {\r\n return;\r\n }\r\n\r\n // no hash: Scroll to top whenever path changes\r\n if (!hash) {\r\n scrollTop();\r\n } else {\r\n // hash: try to scroll to element with that id\r\n const id = hash.replace('#', '');\r\n scrollToElementById(id);\r\n }\r\n }, [pathname, hash]);\r\n\r\n return null;\r\n}\r\n","import { css } from 'styled-components';\r\n\r\nexport const aspect = (width, height) => css`\r\n position: relative;\r\n\r\n &:before {\r\n content: '';\r\n display: block;\r\n width: 100%;\r\n padding-top: ${(100 * height) / width}%;\r\n }\r\n`;\r\n","export default {\r\n MODAL: 1200,\r\n MENU: 1000,\r\n MENU_BUTTON: 950,\r\n MENU_COVER: 900,\r\n MENU_BLOCK: 899,\r\n CAPTION_POPUP: 800,\r\n QUICK_CLOSE: 5,\r\n LOADING_SCREEN: 9999\r\n};\r\n","import styled from 'styled-components';\r\nimport { isExperienceEditorActive } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { section } from '_utils/styles';\r\nimport { spacing } from '_utils/props';\r\nimport Grid from '_utils/components/Corporate/Grid';\r\n\r\nexport const SectionWrapper = styled.section`\r\n ${({ theme, sectionTheme }) => section({ theme, sectionTheme })}\r\n\r\n &.is-empty {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n`;\r\n\r\nconst styleKey = isExperienceEditorActive() ? 'mb' : 'mt';\r\n\r\nexport const PlaceholderWrapper = styled(Grid.Item)`\r\n > * {\r\n ${({ theme, spacingUnit = 7 }) => spacing({ theme, [styleKey]: spacingUnit })}\r\n\r\n &.scEmptyPlaceholder,\r\n &:first-child {\r\n ${({ theme }) => spacing({ theme, [styleKey]: 0 })}\r\n }\r\n }\r\n\r\n .is-empty & {\r\n margin: 0 !important;\r\n }\r\n`;\r\n","import { mq } from '_utils/styles/';\r\nimport { css } from 'styled-components';\r\nimport { IButtonColors, IButtonSetting } from '_containers/Theme/theme';\r\nimport { throwInDev } from '../../helpers/dev';\r\n\r\nexport function buttonReset() {\r\n return css`\r\n display: inline-block;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n text-decoration: none;\r\n background: transparent;\r\n color: inherit;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n text-align: center;\r\n appearance: none;\r\n `;\r\n}\r\n\r\nexport function buttonColors(settings: IButtonColors) {\r\n return css`\r\n background: ${settings.background};\r\n color: ${settings.color};\r\n border: 2px solid ${settings.border};\r\n position: relative;\r\n\r\n &:hover {\r\n background: ${settings.backgroundHover};\r\n color: ${settings.colorHover};\r\n border: 2px solid ${settings.borderHover};\r\n }\r\n\r\n outline: 0;\r\n\r\n body:not(.safe-focus-removal) &:focus {\r\n /* psuedo focus outline */\r\n &:before {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.background.quaternary};\r\n border-radius: 9999px;\r\n }\r\n }\r\n `;\r\n}\r\n\r\nexport function buttonSize(settings: IButtonSetting) {\r\n return css`\r\n font-size: ${settings.fontSize.sm}px;\r\n line-height: ${settings.lineHeight.sm}px;\r\n font-weight: ${settings.fontWeight || 'bold'};\r\n font-family: ${settings.fontFamily};\r\n border-radius: 32px;\r\n padding: ${settings.padding.y}px ${settings.padding.x}px;\r\n text-align: center;\r\n\r\n ${mq('md')} {\r\n font-size: ${settings.fontSize.md}px;\r\n line-height: ${settings.lineHeight.md}px;\r\n }\r\n `;\r\n}\r\n\r\nexport const button = (size = 'default', color = 'primary') => ({ theme }) => {\r\n if (typeof size !== 'string') {\r\n // most likely got a theme object. give helpful error\r\n throwInDev(\r\n `Invalid button 'size' parameter (${size}). Usage: button([size],[color]) => curried fn. Did you forget to add parenthesis?`\r\n );\r\n }\r\n\r\n return css`\r\n ${buttonReset}\r\n ${buttonSize(theme.buttons[size])}\r\n ${buttonColors(theme.colors.button[color])}\r\n`;\r\n};\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgMail = () => (\r\n \r\n);\r\n\r\nexport default withSvg(18, 22)(SvgMail);\r\n","enum Unit {\r\n B = 'Bytes',\r\n KB = 'Kilobytes',\r\n MB = 'Megabyte',\r\n GB = 'Gigabyte'\r\n}\r\n\r\nenum Abbreviation {\r\n B = 'B',\r\n KB = 'KB',\r\n MB = 'MB',\r\n GB = 'GB'\r\n}\r\n\r\ntype FileSizeData = {\r\n size: number;\r\n unit: {\r\n LongForm: Unit;\r\n ShortForm: Abbreviation;\r\n };\r\n};\r\n\r\nconst defaultConvert = {\r\n size: 0,\r\n unit: {\r\n LongForm: Unit.B,\r\n ShortForm: Abbreviation.B\r\n }\r\n};\r\n\r\n//https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript\r\nexport default (size: string | number, decimals: number = 2): FileSizeData => {\r\n try {\r\n const convertedSize: number = typeof size === 'number' ? size : parseInt(size);\r\n\r\n if (convertedSize === 0 || isNaN(convertedSize)) {\r\n return defaultConvert;\r\n }\r\n\r\n const k = 1024;\r\n\r\n const dm = decimals < 0 ? 0 : decimals;\r\n\r\n const sizes = ['B', 'KB', 'MB', 'GB'];\r\n\r\n const i = Math.floor(Math.log(convertedSize) / Math.log(k));\r\n\r\n return {\r\n size: parseFloat((convertedSize / Math.pow(k, i)).toFixed(dm)),\r\n unit: {\r\n LongForm: Unit[sizes[i]],\r\n ShortForm: Abbreviation[sizes[i]]\r\n }\r\n };\r\n } catch {\r\n return defaultConvert;\r\n }\r\n};\r\n","export function toLocaleStringSupported() {\r\n return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function');\r\n}\r\n\r\nexport default function formatNumber(x): string {\r\n x = Number(x);\r\n if (isNaN(x) || x === undefined || x === null) return '';\r\n return x.toLocaleString('en-AU');\r\n}\r\n","export default function getDisplayName(Component) {\r\n if (!Component) return 'Cannot get display name of null';\r\n // get React display name or fallback ie. for func component\r\n return Component.displayName || Component.name || 'Component';\r\n}\r\n","import { canUseDOM } from 'exenv';\r\n\r\nexport enum Portals {\r\n before = 'portal-before-root',\r\n after = 'portal-after-root'\r\n}\r\n\r\nexport default (portal: Portals) => {\r\n if (!canUseDOM) {\r\n return null;\r\n }\r\n\r\n return document.getElementById(portal);\r\n};\r\n","import moment from 'moment-mini';\r\n\r\nexport const isValidDate = (d) => d.toString().toLowerCase() !== 'invalid date';\r\n\r\ntype DateData = {\r\n attrDate: string; // used for \r\n visualDate: string;\r\n};\r\n\r\nexport default (value = null, options = null, dateFormat = 'YYYYMMDDTHHmmss'): DateData => {\r\n try {\r\n if (value === null) {\r\n return null;\r\n }\r\n\r\n if (options && options.serverDate) {\r\n value = value + 'Z';\r\n dateFormat = dateFormat + 'Z';\r\n }\r\n\r\n let date = moment.parseZone(value, dateFormat, true);\r\n\r\n if (!date.isValid()) {\r\n return null;\r\n }\r\n\r\n if (options && options.yearOnly) {\r\n return {\r\n attrDate: date.format('YYYY-MM-DD'),\r\n visualDate: date.format('YYYY')\r\n };\r\n }\r\n\r\n if (options && options.short) {\r\n return {\r\n attrDate: date.format('YYYY-MM-DD'),\r\n visualDate: date.format('DD/MM/YYYY')\r\n };\r\n }\r\n\r\n return {\r\n attrDate: date.format('YYYY-MM-DD'),\r\n visualDate: date.format('D MMMM YYYY')\r\n };\r\n } catch {\r\n return null;\r\n }\r\n};\r\n","/**\r\n * Helper to get Time estimate for service content type\r\n *\r\n */\r\n\r\nimport handleSpecificity from '../handleSpecificity';\r\n\r\nexport const plurise = (word: string, value: string | number) =>\r\n Number(value) === 1 ? word : `${word}s`;\r\n\r\nexport default (\r\n specificity: string = '',\r\n units: string = '',\r\n estimate: string = '',\r\n description: string = ''\r\n) => {\r\n // Need this field to show data\r\n if (estimate === '') {\r\n // still return description if valid\r\n if (description !== '') {\r\n return `${description.charAt(0).toUpperCase()}${description.slice(1)}`;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n // estimate needs units and specificity\r\n if (estimate !== '' && (units === '' || specificity === '')) {\r\n // still return description if valid\r\n if (description !== '') {\r\n return `${description.charAt(0).toUpperCase()}${description.slice(1)}`;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n const parts = [];\r\n\r\n parts.push(handleSpecificity(specificity));\r\n parts.push(estimate);\r\n parts.push(plurise(units, estimate).toLowerCase());\r\n parts.push(description.toLowerCase());\r\n\r\n return parts.filter(Boolean).join(' ');\r\n};\r\n","import { stringify } from 'query-string';\r\n\r\nconst baseUrl = '/search';\r\n\r\nexport enum TagKey {\r\n capacity = 'capacity',\r\n usedFor = 'used-for',\r\n location = 'location',\r\n suitableFor = 'suitable-for',\r\n topic = 'topic'\r\n}\r\n\r\ntype Query = {\r\n term?: string;\r\n page?: string | number;\r\n [TagKey.capacity]?: string;\r\n [TagKey.usedFor]?: string;\r\n [TagKey.location]?: string;\r\n [TagKey.suitableFor]?: string;\r\n [TagKey.topic]?: string;\r\n};\r\n\r\nconst querySortPrecedence = {\r\n term: 1000,\r\n page: 500,\r\n type: 200,\r\n filters: 100,\r\n [TagKey.capacity]: 70,\r\n [TagKey.usedFor]: 60,\r\n [TagKey.location]: 50,\r\n [TagKey.suitableFor]: 40,\r\n [TagKey.topic]: 30\r\n};\r\n\r\nconst querySort = (a, b) => querySortPrecedence[b] - querySortPrecedence[a];\r\n\r\nexport const queryFilterDelimiter = ',';\r\n\r\nexport const buildSearchQuery = (query: Query): string => {\r\n if (typeof 'window' === 'undefined') {\r\n return '';\r\n }\r\n\r\n return stringify(query, { sort: querySort }).replace(\r\n new RegExp(encodeURIComponent(queryFilterDelimiter), 'g'),\r\n queryFilterDelimiter\r\n );\r\n};\r\n\r\nexport const buildSearchUrl = (query: Query): string => {\r\n if (typeof 'window' === 'undefined') {\r\n return '';\r\n }\r\n\r\n if (query && query.hasOwnProperty('term') && !query.term) {\r\n delete query.term;\r\n }\r\n\r\n const stringifiedQuery = buildSearchQuery(query);\r\n\r\n return `${baseUrl}${stringifiedQuery !== '' ? `?${stringifiedQuery}` : ''}`;\r\n};\r\n","const stripUrl = (url: string) => {\r\n // Remove (http:// or https://)\r\n url = url.replace(/(http|https):\\/\\//, '');\r\n // Remove trailing slash and everything after it\r\n url = url.split('/')[0];\r\n return url;\r\n}\r\n\r\nexport default stripUrl;\r\n","// Older browsers don't support event options, feature detect it.\r\n\r\n// Adopted and modified solution from Bohdan Didukh (2017)\r\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\r\n\r\nlet hasPassiveEvents = false;\r\nif (typeof window !== 'undefined') {\r\n const passiveTestOptions: any = {\r\n get passive() {\r\n hasPassiveEvents = true;\r\n return undefined;\r\n }\r\n };\r\n window.addEventListener('testPassive', null, passiveTestOptions);\r\n window.removeEventListener('testPassive', null, passiveTestOptions);\r\n}\r\n\r\nconst isIosDevice =\r\n typeof window !== 'undefined' &&\r\n window.navigator &&\r\n window.navigator.platform &&\r\n /iP(ad|hone|od)/.test(window.navigator.platform);\r\n\r\nlet locks = [];\r\nlet documentListenerAdded = false;\r\nlet initialClientY = -1;\r\nlet previousBodyOverflowSetting;\r\nlet previousBodyPaddingRight;\r\n\r\n// returns true if `el` should be allowed to receive touchmove events\r\nconst allowTouchMove = (el) =>\r\n locks.some((lock) => {\r\n if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\r\n return true;\r\n }\r\n\r\n return false;\r\n });\r\n\r\nconst preventDefault = (rawEvent) => {\r\n const e = rawEvent || window.event;\r\n\r\n // For the case whereby consumers adds a touchmove event listener to document.\r\n // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\r\n // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\r\n // the touchmove event on document will break.\r\n if (allowTouchMove(e.target)) {\r\n return true;\r\n }\r\n\r\n // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom)\r\n if (e.touches.length > 1) return true;\r\n\r\n if (e.preventDefault) e.preventDefault();\r\n\r\n return false;\r\n};\r\n\r\nconst setOverflowHidden = (options) => {\r\n // Setting overflow on body/documentElement synchronously in Desktop Safari slows down\r\n // the responsiveness for some reason. Setting within a setTimeout fixes this.\r\n setTimeout(() => {\r\n // If previousBodyPaddingRight is already set, don't set it again.\r\n if (previousBodyPaddingRight === undefined) {\r\n const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\r\n const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\r\n\r\n if (reserveScrollBarGap && scrollBarGap > 0) {\r\n previousBodyPaddingRight = document.body.style.paddingRight;\r\n document.body.style.width = `calc(100% - ${scrollBarGap}px)`;\r\n }\r\n }\r\n\r\n // If previousBodyOverflowSetting is already set, don't set it again.\r\n if (previousBodyOverflowSetting === undefined) {\r\n previousBodyOverflowSetting = document.body.style.overflow;\r\n document.body.style.overflow = 'hidden';\r\n }\r\n });\r\n};\r\n\r\nconst restoreOverflowSetting = () => {\r\n // Setting overflow on body/documentElement synchronously in Desktop Safari slows down\r\n // the responsiveness for some reason. Setting within a setTimeout fixes this.\r\n setTimeout(() => {\r\n if (previousBodyPaddingRight !== undefined) {\r\n document.body.style.width = null; //previousBodyPaddingRight;\r\n\r\n // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\r\n // can be set again.\r\n previousBodyPaddingRight = undefined;\r\n }\r\n\r\n if (previousBodyOverflowSetting !== undefined) {\r\n document.body.style.overflow = previousBodyOverflowSetting;\r\n\r\n // Restore previousBodyOverflowSetting to undefined\r\n // so setOverflowHidden knows it can be set again.\r\n previousBodyOverflowSetting = undefined;\r\n }\r\n });\r\n};\r\n\r\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\r\nconst isTargetElementTotallyScrolled = (targetElement) =>\r\n targetElement\r\n ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight\r\n : false;\r\n\r\nconst handleScroll = (event, targetElement) => {\r\n const clientY = event.targetTouches[0].clientY - initialClientY;\r\n\r\n if (allowTouchMove(event.target)) {\r\n return false;\r\n }\r\n\r\n if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\r\n // element is at the top of its scroll\r\n return preventDefault(event);\r\n }\r\n\r\n if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\r\n // element is at the top of its scroll\r\n return preventDefault(event);\r\n }\r\n\r\n event.stopPropagation();\r\n return true;\r\n};\r\n\r\nexport const disableBodyScroll = (targetElement, options: any = {}) => {\r\n if (isIosDevice) {\r\n // targetElement must be provided, and disableBodyScroll must not have been\r\n // called on this targetElement before.\r\n if (!targetElement) {\r\n // eslint-disable-next-line no-console\r\n console.error(\r\n 'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'\r\n );\r\n return;\r\n }\r\n\r\n if (targetElement && !locks.some((lock) => lock.targetElement === targetElement)) {\r\n const lock = {\r\n targetElement,\r\n options: options || {}\r\n };\r\n\r\n locks = [...locks, lock];\r\n\r\n targetElement.ontouchstart = (event) => {\r\n if (event.targetTouches.length === 1) {\r\n // detect single touch\r\n initialClientY = event.targetTouches[0].clientY;\r\n }\r\n };\r\n targetElement.ontouchmove = (event) => {\r\n if (event.targetTouches.length === 1) {\r\n // detect single touch\r\n handleScroll(event, targetElement);\r\n }\r\n };\r\n\r\n if (!documentListenerAdded) {\r\n document.addEventListener(\r\n 'touchmove',\r\n preventDefault,\r\n hasPassiveEvents ? { passive: false } : undefined\r\n );\r\n documentListenerAdded = true;\r\n }\r\n }\r\n } else {\r\n setOverflowHidden(options);\r\n const lock = {\r\n targetElement,\r\n options: options || {}\r\n };\r\n\r\n locks = [...locks, lock];\r\n }\r\n};\r\n\r\nexport const clearAllBodyScrollLocks = () => {\r\n if (isIosDevice) {\r\n // Clear all locks ontouchstart/ontouchmove handlers, and the references\r\n locks.forEach((lock) => {\r\n lock.targetElement.ontouchstart = null;\r\n lock.targetElement.ontouchmove = null;\r\n });\r\n\r\n if (documentListenerAdded) {\r\n // cast here because typescript doesn't like passive\r\n (document as any).removeEventListener(\r\n 'touchmove',\r\n preventDefault,\r\n hasPassiveEvents ? { passive: false } : undefined\r\n );\r\n documentListenerAdded = false;\r\n }\r\n\r\n locks = [];\r\n\r\n // Reset initial clientY\r\n initialClientY = -1;\r\n } else {\r\n restoreOverflowSetting();\r\n locks = [];\r\n }\r\n};\r\n\r\nexport const enableBodyScroll = (targetElement) => {\r\n if (isIosDevice) {\r\n if (!targetElement) {\r\n // eslint-disable-next-line no-console\r\n console.error(\r\n 'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'\r\n );\r\n return;\r\n }\r\n\r\n targetElement.ontouchstart = null;\r\n targetElement.ontouchmove = null;\r\n\r\n locks = locks.filter((lock) => lock.targetElement !== targetElement);\r\n\r\n if (documentListenerAdded && locks.length === 0) {\r\n // cast here because typescript doesn't like passive\r\n (document as any).removeEventListener(\r\n 'touchmove',\r\n preventDefault,\r\n hasPassiveEvents ? { passive: false } : undefined\r\n );\r\n\r\n documentListenerAdded = false;\r\n }\r\n } else if (locks.length === 1 && locks[0].targetElement === targetElement) {\r\n restoreOverflowSetting();\r\n\r\n locks = [];\r\n } else {\r\n locks = locks.filter((lock) => lock.targetElement !== targetElement);\r\n }\r\n};\r\n","export { default as dev } from './dev';\r\nexport { default as formatNumber } from './formatNumber';\r\nexport { default as getDisplayName } from './getDisplayName';\r\n// export { default as getContentType } from './getContentType';\r\nexport { default as byteConverter } from './byteConverter';\r\nexport { default as dateConverter } from './dateConverter';\r\nexport { default as getTimeEstimate } from './getTimeEstimate';\r\nexport { default as getCostEstimate } from './getCostEstimate';\r\nexport { default as getPortal } from './getPortal';\r\nexport { default as stripUrl } from './stripUrl';\r\nexport { Portals } from './getPortal';\r\nexport * from './search';\r\nexport * from './bodyScrollLock';\r\n// export { default as dateConversion } from './dateConversion/';\r\n// export { default as stripAllWhitespace } from './stripAllWhitespace/';\r\n// export { default as nl2br } from './nl2br/';\r\n// export { default as getSitecoreValues } from './getSitecoreValues/';\r\n// export { default as generateResponsiveImageData } from './generateResponsiveImageData/';\r\n// export { default as dateSorting } from './dateSorting/';\r\n// export { default as processList } from './processList/';\r\n// export { default as processListWithTemplateId } from './processListWithTemplateId/';\r\n// export { default as getThemeConfig } from './getThemeConfig/';\r\n// export { default as chunkArray } from './chunkArray/';\r\n// export { default as endsWith } from './endsWith/';\r\n// export { default as returnIfExist } from './returnIfExist/';\r\n// export { default as getDisplayName } from './getDisplayName';\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgPhone = () => (\r\n \r\n);\r\n\r\nexport default withSvg(21, 20)(SvgPhone);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgPin = (props) => (\r\n \r\n);\r\n\r\nSvgPin.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(18, 22)(SvgPin);\r\n","import { useRef, useEffect } from 'react';\r\n\r\nexport default function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n}\r\n","import React, { createContext, useState, useEffect } from 'react';\r\nimport { usePrevious } from '_utils/hooks';\r\nimport { Optionalize } from '_utils/types';\r\nimport { ChildrenPropTypes } from '_types';\r\n\r\nexport type ModalProps = {\r\n id: string;\r\n content: JSX.Element;\r\n dismissable?: boolean;\r\n onClose: () => void;\r\n};\r\nexport type ModalContextProps = {\r\n modal: ModalProps;\r\n prevModalContent: null;\r\n setModal: (modal: ModalProps) => void;\r\n};\r\n\r\nconst ModalContext = createContext({\r\n modal: null,\r\n setModal: null\r\n});\r\n\r\nfunction ModalProvider({ children }) {\r\n // state\r\n const [modal, setModal] = useState(null);\r\n const modalContent = modal?.content;\r\n const prevModalContent = usePrevious(Boolean(modalContent));\r\n\r\n useEffect(() => {\r\n if (modalContent && !prevModalContent) {\r\n document.body.classList.add('menu-active');\r\n } else if (!modalContent && prevModalContent) {\r\n document.body.classList.remove('menu-active');\r\n }\r\n\r\n return () => {\r\n document.body.classList.remove('menu-active');\r\n };\r\n }, [modalContent, prevModalContent]);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nModalProvider.propTypes = {\r\n children: ChildrenPropTypes\r\n};\r\n\r\nexport default ModalProvider;\r\n\r\nexport const ModalConsumer = ModalContext.Consumer;\r\n\r\nexport function withModalContext(\r\n WrappedComponent: React.ComponentType\r\n) {\r\n // Try to create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withModalContext: React.FC> = (props) => {\r\n return (\r\n \r\n {(value) => }\r\n \r\n );\r\n };\r\n\r\n withModalContext.displayName = `withModalContext(${displayName})`;\r\n\r\n return withModalContext;\r\n}\r\n","import { getPersonalInfo } from '_services/personalInfoService';\r\n\r\nconst handleCommunityEngagementProfilePageLoadEvent = (dataLayer: any, fullUrl: string, pageTitle: string, pageUrl: string) => {\r\n\r\n const url = new URL(fullUrl);\r\n const queryParams = new URLSearchParams(url.search);\r\n\r\n const surveyId = queryParams.get('survey');\r\n const socialpinpointId = queryParams.get('socialpinpoint');\r\n const nextPage = queryParams.get('next-page');\r\n const referer = queryParams.get('referer') ?? nextPage;\r\n\r\n let feedback_type;\r\n\r\n if (surveyId) {\r\n feedback_type = 'survey';\r\n } else if (socialpinpointId) {\r\n feedback_type = 'map_pin';\r\n } else if (nextPage) {\r\n feedback_type = 'community_ideas';\r\n }\r\n\r\n getPersonalInfo(\r\n (res: any) => {\r\n const userId = res?.data?.personalInfo?.individualId || '';\r\n dataLayer.push({\r\n event: 'select_profile',\r\n page_title: pageTitle,\r\n page_url: pageUrl,\r\n referer,\r\n feedback_type,\r\n userId\r\n });\r\n },\r\n (error: any) => {\r\n dataLayer.push({\r\n event: 'select_profile',\r\n page_title: pageTitle,\r\n page_url: pageUrl,\r\n feedback_type\r\n });\r\n }\r\n );\r\n};\r\n\r\nconst handleCommunityEngagementWidgetEvent = (dataLayer: any, eventData: any, pageTitle: string, pageUrl: string) => {\r\n\r\n dataLayer.push({\r\n ...eventData,\r\n page_title: pageTitle,\r\n page_url: pageUrl\r\n });\r\n \r\n};\r\n\r\nconst handleCommunityEngagementLink = (dataLayer: any, linkUrl: string, pageTitle: string, pageUrl: string) => {\r\n\r\n const isSurveryLink = linkUrl.includes('account%2Fyour-profile%2Fcommunity-engagement%3Fsurvey');\r\n const isSocialPinpointLink = linkUrl.includes('account%2Fyour-profile%2Fcommunity-engagement%3Fsocialpinpoint');\r\n\r\n let feedback_type;\r\n\r\n if (isSurveryLink) {\r\n feedback_type = 'survey';\r\n } else if (isSocialPinpointLink) {\r\n feedback_type = 'map_pin';\r\n }\r\n\r\n dataLayer.push({\r\n event: 'form_start',\r\n page_title: pageTitle,\r\n page_url: pageUrl,\r\n feedback_type\r\n });\r\n\r\n};\r\n\r\nexport const handlePageLoadEvent = (dataLayer: any, fullUrl: string, pageTitle: string, pageUrl: string) => {\r\n \r\n if (pageUrl.includes('account/your-profile/community-engagement')) {\r\n handleCommunityEngagementProfilePageLoadEvent(dataLayer, fullUrl, pageTitle, pageUrl);\r\n }\r\n \r\n};\r\n\r\nexport const handleWidgetEvent = (dataLayer: any, eventData: any, pageTitle: string, pageUrl: string) => {\r\n\r\n if (eventData.event === 'community_ideas_engagement') {\r\n handleCommunityEngagementWidgetEvent(dataLayer, eventData, pageTitle, pageUrl);\r\n }\r\n\r\n};\r\n\r\nexport const handleLinkClickEvent = (dataLayer: object, linkUrl: string, pageTitle: string, pageUrl: string) => {\r\n\r\n const isCommunityEngagementLink = linkUrl.includes('account%2Fyour-profile%2Fcommunity-engagement');\r\n\r\n if (isCommunityEngagementLink) {\r\n handleCommunityEngagementLink(dataLayer, linkUrl, pageTitle, pageUrl);\r\n }\r\n\r\n};","export default (specificity: string) => {\r\n const allowed = ['about', 'at least'];\r\n\r\n if (allowed.indexOf(specificity.toLowerCase()) !== -1) {\r\n return specificity;\r\n }\r\n\r\n return false;\r\n};\r\n","import styled from 'styled-components';\r\nimport { mq, section } from '_utils/styles';\r\n\r\nimport { Container as PageBannerContainer } from '_components/Corporate/PageBanner/StyledPageBanner';\r\n\r\nexport const CurveContainer = styled.div`\r\n position: absolute;\r\n left: 50%;\r\n top: -1px; /* prevent 'crack' between this and banner */\r\n height: 50%;\r\n transform: translateX(-50%);\r\n width: 130%;\r\n\r\n ${mq('sm')} {\r\n width: 116%;\r\n }\r\n\r\n ${mq('md')} {\r\n width: 112.5%;\r\n }\r\n\r\n ${mq('lg')} {\r\n width: 109%;\r\n }\r\n\r\n ${mq('xl')} {\r\n width: 105%;\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n ${({ theme, sectionTheme }) => section({ theme, sectionTheme })};\r\n\r\n position: relative;\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n width: 100%;\r\n overflow: hidden;\r\n\r\n ${PageBannerContainer} + & {\r\n padding-top: 0 !important;\r\n\r\n ${CurveContainer} {\r\n display: block;\r\n }\r\n }\r\n`;\r\n\r\nexport const Curve = styled.span`\r\n width: 100%;\r\n\r\n svg {\r\n max-width: none;\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n max-height: 160px;\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.background.tertiary};\r\n }\r\n @media print {\r\n path {\r\n fill: ${({ theme }) => theme.colors.background.primary};\r\n }\r\n }\r\n`;\r\n","import axios from 'axios';\r\nimport config from '../temp/config';\r\nimport { dataFetcher } from '../dataFetcher';\r\nimport { dataApi } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nexport function get(action, success, failed, config = {}) {\r\n return axios\r\n .get(`${action}`, {\r\n params: {}\r\n // withCredentials: true\r\n }, config)\r\n .then((data) => success(data))\r\n .catch((error) => failed(error));\r\n}\r\n\r\nexport function fetchApi(url, config) {\r\n return axios.get(`${url}`, config);\r\n}\r\n\r\nexport function post(action, params, success, failed, config = {}) {\r\n return axios\r\n .post(`${action}`, { ...params }, config)\r\n .then((data) => success(data))\r\n .catch((error) => failed(error));\r\n}\r\n\r\nexport async function getRouteData(route, language, history, currentPathName) {\r\n const querystringParams = {\r\n sc_lang: language,\r\n sc_apikey: config.sitecoreApiKey\r\n };\r\n const fetchOptions = {\r\n layoutServiceConfig: { host: config.sitecoreApiHost },\r\n querystringParams: querystringParams,\r\n fetcher: dataFetcher\r\n };\r\n return dataApi.fetchRouteData(route, fetchOptions).catch((error) => {\r\n if (error.response.status === 401) {\r\n history.push('/401?returnUrl=' + currentPathName);\r\n return null;\r\n }\r\n if (error.response && error.response.status === 404 && error.response.data) {\r\n return error.response.data;\r\n }\r\n console.error('Route data fetch error', error, error.response);\r\n return null;\r\n });\r\n}\r\n\r\nexport async function getRefreshToken(route, language, history, currentPathName) {\r\n try {\r\n const routeData = await getRouteData(route, language, history, currentPathName);\r\n // check if isAuthenticated is false show the login Button\r\n if (routeData !== null && routeData.sitecore && routeData.sitecore.route) {\r\n return routeData.sitecore.context.requestVerificationToken;\r\n }\r\n return '';\r\n } catch (e) {\r\n return '';\r\n }\r\n}\r\n","export const isContentful = (url) => {\r\n if (!url || typeof url !== 'string') {\r\n return false;\r\n }\r\n\r\n const matches = /(?:\\w+\\.)+\\w+/.exec(url);\r\n\r\n if (matches && matches.length) {\r\n return matches[0]?.toLowerCase() === 'images.ctfassets.net';\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const resizeContentfulImage = (url, options: any = {}) => {\r\n if (!url || typeof url !== 'string') {\r\n return url;\r\n }\r\n\r\n let params = [];\r\n if (options.width) {\r\n params.push(`w=${options.width}`);\r\n }\r\n\r\n if (options.height) {\r\n params.push(`h=${options.height}`);\r\n }\r\n\r\n if (!params.length) {\r\n return url;\r\n }\r\n\r\n const paramString = params.join('&');\r\n\r\n if (url.indexOf('?') > -1) {\r\n return `${url}&${paramString}`;\r\n }\r\n\r\n return `${url}?${paramString}`;\r\n};\r\n","import styled from 'styled-components';\r\nimport { NavLink } from 'react-router-dom';\r\n\r\nimport theme from '_containers/Theme/theme';\r\nimport { spacing } from '_utils/props';\r\nimport { buttonColors, heading_xs, mq } from '_utils/styles/';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n ${spacing({ theme, mt: 2, ml: -1 })}\r\n`;\r\n\r\nexport const Tag = styled(NavLink)`\r\n ${heading_xs}\r\n ${buttonColors(theme.colors.button.tag)};\r\n\r\n ${spacing({ theme, px: 2, py: '5px', m: '4px' })}\r\n\r\n ${mq('md')} {\r\n ${spacing({ theme, px: 2, py: '4px', m: '4px' })}\r\n }\r\n\r\n outline: 0 !important;\r\n font-weight: bold;\r\n border-radius: 4px;\r\n text-decoration: none;\r\n position: relative;\r\n\r\n /* psuedo focus outline */\r\n body:not(.safe-focus-removal) &:focus {\r\n &:before {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 8px;\r\n }\r\n }\r\n\r\n @media print {\r\n width: 100%;\r\n margin: 0px;\r\n padding-left: 10px;\r\n :before {\r\n content: '•';\r\n padding-right: 10px;\r\n }\r\n }\r\n`;\r\n","import React from 'react';\r\n\r\nimport { buildSearchUrl } from '_utils/helpers';\r\n\r\nimport { Container, Tag } from './StyledTagList';\r\nimport NavItem from '../NavItem';\r\n\r\ntype TagData = {\r\n displayName: {\r\n value: string;\r\n };\r\n id: string;\r\n friendlyName: string;\r\n parent: {\r\n id: string;\r\n name: string;\r\n identifier: {\r\n value: string;\r\n };\r\n };\r\n};\r\n\r\ntype TagListProps = {\r\n tags: TagData[];\r\n};\r\n\r\nexport const validTag = (tag) => {\r\n if (!tag) {\r\n return false;\r\n }\r\n\r\n const { displayName, id, friendlyName, parent } = tag;\r\n\r\n return Boolean(displayName?.value && id && friendlyName && parent?.id && parent?.identifier?.value);\r\n};\r\n\r\nconst TagList: React.FC = ({ tags }) => {\r\n if (!tags?.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {tags.filter(validTag).map(\r\n ({\r\n displayName,\r\n id,\r\n friendlyName,\r\n parent: {\r\n identifier: { value: tagId }\r\n }\r\n }) => {\r\n return (\r\n \r\n {displayName?.value}\r\n \r\n );\r\n }\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default TagList;\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgArrow = () => (\r\n \r\n);\r\n\r\nexport default withSvg(14, 16)(SvgArrow);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgArrow = () => (\r\n \r\n);\r\n\r\nexport default withSvg(14, 14)(SvgArrow);\r\n","/**\r\n * Helper to get cost estimate for service content type\r\n *\r\n */\r\n\r\nimport handleSpecificity from '../handleSpecificity';\r\n\r\nexport const formatCostString = (estimate: string) => {\r\n if (estimate === '') {\r\n return false;\r\n }\r\n\r\n if (estimate === '0') {\r\n return 'Free';\r\n }\r\n\r\n return `$${Number(estimate)\r\n .toFixed(2)\r\n .replace(/\\.00$/, '')\r\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}`;\r\n};\r\n\r\nexport default (specificity: string = '', estimate: string = '', description: string = '') => {\r\n // no valid estimate, so just give description back if valid\r\n // 1) no estimate\r\n // 2) an estimate with no specificity\r\n if (estimate === '' || (estimate !== '' && specificity === '')) {\r\n // still return description if valid\r\n if (description !== '') {\r\n return `${description}`;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n const parts = [];\r\n\r\n const formattedEstimate = formatCostString(estimate);\r\n\r\n if (formattedEstimate !== 'Free') {\r\n parts.push(handleSpecificity(specificity));\r\n }\r\n\r\n parts.push(formattedEstimate);\r\n parts.push(description);\r\n\r\n return parts.filter(Boolean).join(' ');\r\n};\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCross = () => (\r\n \r\n);\r\n\r\nexport default withSvg(14, 14)(SvgCross);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgFilters = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgFilters);\r\n","import React from 'react';\r\nimport { withSvg, SvgProps } from './Svg';\r\n\r\ntype LogoProps = SvgProps & {\r\n fill?: string;\r\n};\r\n\r\nconst SvgLogo: React.FC = ({ fill }) => (\r\n <>\r\n {fill && }\r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(40, 40)(SvgLogo);\r\n","import React from 'react';\r\n\r\nconst SvgCurve = () => (\r\n \r\n \r\n \r\n);\r\n\r\nexport default SvgCurve;\r\n","import React from 'react';\r\nimport BgCurve from './bg-curve';\r\nimport { Container, CurveContainer, Curve } from './StyledBannerCurve';\r\nimport { BackgroundColors } from '_utils/components/Corporate/Section';\r\n\r\nexport type BannerCurveProps = {};\r\n\r\nexport type BannerCurveOptions = {\r\n backgroundColor?: string;\r\n renderCurve?: (props: any) => boolean;\r\n renderNothing?: (props: any) => boolean;\r\n};\r\n\r\nconst defaultOptions = {\r\n offsetY: 0,\r\n renderCurve: null,\r\n backgroundColor: BackgroundColors.White\r\n};\r\n\r\ninterface WithParamProps {\r\n params: {\r\n backgroundColour: BackgroundColors;\r\n };\r\n}\r\n\r\n// HOC to wrap component with blue background curve when displayed right under banner\r\nexport const withBannerCurve = (options: BannerCurveOptions = {}) =>\r\n function (\r\n WrappedComponent: React.ComponentType\r\n ) {\r\n const mergedOptions = { ...defaultOptions, ...options };\r\n\r\n const { renderCurve, backgroundColor, renderNothing } = mergedOptions;\r\n\r\n // Create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withBannerCurve: React.FC = (props: T & WithParamProps) => {\r\n if (renderCurve !== null && renderCurve(props) === false) {\r\n return null;\r\n }\r\n\r\n if (renderNothing && renderNothing(props)) {\r\n return null;\r\n }\r\n\r\n let sectionTheme = backgroundColor;\r\n\r\n try {\r\n sectionTheme = BackgroundColors[props.params.backgroundColour];\r\n } catch { }\r\n\r\n const showCurve = renderCurve(props) !== null;\r\n\r\n return (\r\n \r\n {showCurve && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n };\r\n\r\n withBannerCurve.displayName = `withBannerCurve(${displayName})`;\r\n\r\n return withBannerCurve;\r\n };\r\n","import React, { ReactNode, forwardRef } from 'react';\r\n\r\n/**\r\n * Nav Item Footer and Main\r\n */\r\nexport type LinkProps = {\r\n url: string;\r\n type?: string;\r\n target?: string;\r\n rel?: string;\r\n};\r\n\r\ntype LinkComponentProps = {\r\n to?: string;\r\n href?: string;\r\n target?: string;\r\n as?: string;\r\n ref?: React.Ref;\r\n className?: string;\r\n onClick?: (event: Event) => void;\r\n rel?: string;\r\n};\r\n\r\nexport type NavItemProps = {\r\n children: ReactNode;\r\n StyledLink: React.ComponentType;\r\n link: LinkProps;\r\n ariaLabelledBy?: string;\r\n className?: string;\r\n tabIndex?: string | number;\r\n additionalStyledLinkProps?: any;\r\n description?: string | '';\r\n onClick?: (event: React.MouseEvent) => void;\r\n};\r\n\r\nexport type Ref = HTMLElement;\r\n\r\nconst NavItem = forwardRef(\r\n (\r\n {\r\n children,\r\n StyledLink,\r\n link,\r\n ariaLabelledBy,\r\n className,\r\n description,\r\n additionalStyledLinkProps = {},\r\n onClick,\r\n ...rest\r\n },\r\n ref\r\n ) => {\r\n if (!children) {\r\n return null;\r\n }\r\n\r\n let props: LinkComponentProps = {};\r\n\r\n if (ariaLabelledBy) {\r\n props['aria-labelledby'] = ariaLabelledBy;\r\n }\r\n\r\n if (link) {\r\n props.target = link.target || null;\r\n\r\n const regexp = new RegExp('^https?://', 'i');\r\n\r\n const linkType = link?.type || null;\r\n\r\n if (\r\n linkType &&\r\n (linkType.toLowerCase() === 'external' ||\r\n linkType.toLowerCase() === 'mailto' ||\r\n linkType.toLowerCase() === 'anchor' ||\r\n linkType.toLowerCase() === 'javascript' ||\r\n ((linkType.toLowerCase() === 'internal' || linkType.toLowerCase() === 'media') &&\r\n regexp.test(link.url)))\r\n ) {\r\n props.as = 'a';\r\n props.href = link.url;\r\n } else {\r\n // internal link (default)\r\n props.to = link.url;\r\n }\r\n\r\n if (link.rel) {\r\n props.rel = link.rel;\r\n } else if (link?.target === '_blank' && !link.rel) {\r\n // information disclosure attack prevention keeps target blank site from getting ref to window.opener\r\n props.rel = 'noopener';\r\n }\r\n } else {\r\n props.as = 'span';\r\n }\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n);\r\n\r\nexport default NavItem;\r\n","import colors from './colors';\r\n\r\nexport const MOTION_SPEED_BASE = 400;\r\nexport const TEXT_LINE_HEIGHT = 1.5;\r\n\r\nexport const FONT_FAMILY_DISPLAY = \"'Helvetica Now Display', Helvetica, sans-serif\";\r\nexport const FONT_FAMILY_TEXT = \"'Helvetica Now Text', Helvetica, sans-serif\";\r\nexport const FONT_FAMILY_MICRO =\r\n \"'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif\";\r\n\r\nexport interface IButtonColors {\r\n background: string;\r\n backgroundHover: string;\r\n border: string;\r\n borderHover: string;\r\n color: string;\r\n colorHover: string;\r\n}\r\n\r\nexport interface ILinkColors extends IButtonColors {\r\n colorVisited: string;\r\n borderVisited: string;\r\n textDecoration: string;\r\n}\r\n\r\nexport interface IColorSettings {\r\n all: {\r\n [key: string]: string;\r\n };\r\n element: {\r\n [key: string]: string;\r\n };\r\n background: {\r\n [key: string]: string;\r\n };\r\n status: {\r\n warning: string;\r\n error: string;\r\n info: string;\r\n };\r\n link: {\r\n primary: ILinkColors;\r\n primaryWithoutVisited: ILinkColors;\r\n secondary: ILinkColors;\r\n white: ILinkColors;\r\n black: ILinkColors;\r\n };\r\n button: {\r\n primary: IButtonColors;\r\n secondary: IButtonColors;\r\n outline: IButtonColors;\r\n footerOutline: IButtonColors;\r\n white: IButtonColors;\r\n text: IButtonColors;\r\n tag: IButtonColors;\r\n };\r\n table: {\r\n head: {\r\n [key: string]: string;\r\n };\r\n cell: {\r\n [key: string]: string;\r\n };\r\n row: {\r\n [key: string]: string;\r\n };\r\n };\r\n form: {\r\n input: {\r\n [key: string]: string;\r\n };\r\n radio: {\r\n [key: string]: string;\r\n };\r\n };\r\n search: {\r\n focus: string;\r\n submit: {\r\n [key: string]: string;\r\n };\r\n border: string;\r\n filtersActive: string;\r\n };\r\n downloads: {\r\n border: string;\r\n };\r\n menu: {\r\n container: {\r\n background: string;\r\n };\r\n item: {\r\n background: string;\r\n backgroundActive: string;\r\n color: string;\r\n colorActive: string;\r\n description: string;\r\n descriptionActive: string;\r\n };\r\n divider: string;\r\n };\r\n modal: {\r\n container: {\r\n background: string;\r\n };\r\n scrollThumb: {\r\n background: string;\r\n };\r\n close: {\r\n fill: string;\r\n fillHover: string;\r\n };\r\n };\r\n footer: {\r\n container: {\r\n background: string;\r\n };\r\n item: {\r\n background: string;\r\n backgroundActive: string;\r\n color: string;\r\n colorActive: string;\r\n };\r\n tertiaryItem: {\r\n color: string;\r\n };\r\n divider: string;\r\n };\r\n featureList: {\r\n tick: string;\r\n cross: string;\r\n };\r\n dna: {\r\n default: string;\r\n };\r\n}\r\n\r\nexport interface IFontSetting {\r\n fontSize: {\r\n [key: string]: number;\r\n };\r\n lineHeight: {\r\n [key: string]: number;\r\n };\r\n fontFamily: string;\r\n fontWeight?: string | number;\r\n spacing?: number;\r\n textTransform?: string;\r\n}\r\n\r\nexport interface IFontSettings {\r\n headings: {\r\n title: IFontSetting;\r\n xxxl: IFontSetting;\r\n xxl: IFontSetting;\r\n xl: IFontSetting;\r\n l: IFontSetting;\r\n m: IFontSetting;\r\n s: IFontSetting;\r\n xs: IFontSetting;\r\n };\r\n text: {\r\n l: IFontSetting;\r\n m: IFontSetting;\r\n s: IFontSetting;\r\n xs: IFontSetting;\r\n xscap: IFontSetting;\r\n };\r\n}\r\n\r\nexport interface IButtonSetting {\r\n fontSize: {\r\n [key: string]: number;\r\n };\r\n lineHeight: {\r\n [key: string]: number;\r\n };\r\n padding: {\r\n [key: string]: number;\r\n };\r\n icon: {\r\n [key: string]: {\r\n [key: string]: number;\r\n };\r\n };\r\n fontFamily: string;\r\n fontWeight?: string | number;\r\n borderRadius?: {\r\n [key: string]: {\r\n [key: string]: number;\r\n };\r\n };\r\n}\r\n\r\nexport interface IButtonSettings {\r\n default: IButtonSetting;\r\n slim: IButtonSetting;\r\n iconOnly: IButtonSetting;\r\n}\r\n\r\nexport interface IBorderRadiusSettings {\r\n default: {\r\n [key: string]: number;\r\n };\r\n}\r\n\r\nexport interface ITableSettings {\r\n font: IFontSetting;\r\n}\r\n\r\ninterface IMotionSetting {\r\n ease: string;\r\n timing: {\r\n [key: string]: string;\r\n };\r\n}\r\n\r\nexport interface IGridSettings {\r\n margin: {\r\n [key: string]: number;\r\n };\r\n gutter: {\r\n size: { [key: string]: number };\r\n directions: string[];\r\n };\r\n colCount: number;\r\n containerMinWidth: number;\r\n containerMaxWidth: number;\r\n borderColor: string;\r\n borderWidth: string;\r\n}\r\n\r\nexport interface IHeaderSettings {\r\n height: {\r\n xs: 72;\r\n md: 88;\r\n };\r\n}\r\n\r\nexport interface IContentSettings {\r\n indent: {\r\n [key: string]: number;\r\n };\r\n}\r\n\r\nexport interface ITheme {\r\n colors: IColorSettings;\r\n fonts: IFontSettings;\r\n buttons: IButtonSettings;\r\n borderRadius: IBorderRadiusSettings;\r\n table: ITableSettings;\r\n grid: IGridSettings;\r\n card: {\r\n sectionBackground: string;\r\n primary: string;\r\n secondary: string;\r\n action: string;\r\n actionHover: string;\r\n attributeIcon: string;\r\n borderRadius: number;\r\n boxShadow: string;\r\n boxShadowHover: string;\r\n border: string;\r\n borderHover: string;\r\n borderDashed: string;\r\n borderDashedHover: string;\r\n };\r\n accordion: {\r\n primary: string;\r\n action: string;\r\n actionHover: string;\r\n titleHover: string;\r\n borderRadius: number;\r\n border: string;\r\n borderHover: string;\r\n };\r\n callToAction: {\r\n backgroundColor: string;\r\n color: string;\r\n borderRadius: number;\r\n };\r\n motion: IMotionSetting;\r\n responsiveSpacing: {\r\n [key: string]: {\r\n [key: string]: number;\r\n };\r\n };\r\n header: IHeaderSettings;\r\n content: IContentSettings;\r\n}\r\n\r\nconst Theme: ITheme = {\r\n colors: {\r\n all: colors,\r\n element: {\r\n primary: colors.deepBlue,\r\n secondary: colors.green,\r\n tertiary: colors.greenTint110,\r\n quaternary: colors.deepBlueTint75,\r\n white: colors.white,\r\n black: colors.black,\r\n focused: colors.blueTint75,\r\n danger: colors.pottsPointRedTint110\r\n },\r\n background: {\r\n primary: colors.white,\r\n secondary: colors.light,\r\n tertiary: colors.blue,\r\n quaternary: colors.blueTint75,\r\n quinternary: colors.greenTint110,\r\n lightPink: colors.newtownFuchsiaTint15,\r\n lightOrange: colors.annandaleOrangeTint15,\r\n senary: colors.deepBlueTint07,\r\n octonary: colors.deepBlue,\r\n nonary: colors.blueTint110,\r\n disabled: colors.deepBlueTint07\r\n },\r\n status: {\r\n warning: '#ffc107',\r\n error: '#dc3545',\r\n info: '#b8daff'\r\n },\r\n link: {\r\n primary: {\r\n background: colors.transparent,\r\n backgroundHover: colors.green,\r\n border: colors.green,\r\n borderHover: colors.green,\r\n color: 'inherit',\r\n colorHover: colors.deepBlue,\r\n colorVisited: colors.darlinghurstPurple,\r\n borderVisited: colors.darlinghurstPurple,\r\n textDecoration: 'none'\r\n },\r\n primaryWithoutVisited: {\r\n background: colors.transparent,\r\n backgroundHover: colors.green,\r\n border: colors.green,\r\n borderHover: colors.green,\r\n color: 'inherit',\r\n colorHover: colors.deepBlue,\r\n colorVisited: 'inherit',\r\n borderVisited: colors.green,\r\n textDecoration: 'none'\r\n },\r\n secondary: {\r\n background: colors.transparent,\r\n backgroundHover: colors.transparent,\r\n border: colors.transparent,\r\n borderHover: colors.transparent,\r\n color: 'inherit',\r\n colorHover: colors.green,\r\n colorVisited: colors.darlinghurstPurple,\r\n borderVisited: colors.transparent,\r\n textDecoration: 'underline'\r\n },\r\n white: {\r\n background: colors.transparent,\r\n backgroundHover: colors.transparent,\r\n border: colors.transparent,\r\n borderHover: colors.transparent,\r\n color: 'inherit',\r\n colorHover: colors.white,\r\n colorVisited: colors.white,\r\n borderVisited: colors.transparent,\r\n textDecoration: 'underline'\r\n },\r\n black: {\r\n background: colors.transparent,\r\n backgroundHover: colors.transparent,\r\n border: colors.transparent,\r\n borderHover: colors.transparent,\r\n color: 'inherit',\r\n colorHover: colors.black,\r\n colorVisited: colors.black,\r\n borderVisited: colors.transparent,\r\n textDecoration: 'underline'\r\n }\r\n },\r\n button: {\r\n primary: {\r\n background: colors.greenTint110,\r\n backgroundHover: colors.greenTint120,\r\n border: colors.greenTint110,\r\n borderHover: colors.greenTint120,\r\n color: colors.white,\r\n colorHover: colors.white\r\n },\r\n secondary: {\r\n background: colors.deepBlueTint07,\r\n backgroundHover: colors.deepBlueTint15,\r\n border: colors.deepBlueTint07,\r\n borderHover: colors.deepBlueTint15,\r\n color: colors.deepBlue,\r\n colorHover: colors.deepBlue\r\n },\r\n outline: {\r\n background: colors.white,\r\n backgroundHover: colors.white,\r\n border: colors.greenTint110,\r\n borderHover: colors.greenTint120,\r\n color: colors.greenTint110,\r\n colorHover: colors.greenTint120\r\n },\r\n text: {\r\n background: colors.transparent,\r\n backgroundHover: colors.transparent,\r\n border: colors.transparent,\r\n borderHover: colors.transparent,\r\n color: colors.greenTint110,\r\n colorHover: colors.greenTint120\r\n },\r\n tag: {\r\n background: colors.greenTint15,\r\n border: colors.transparent,\r\n color: colors.greenTint115,\r\n backgroundHover: colors.greenTint45,\r\n borderHover: colors.transparent,\r\n colorHover: colors.greenTint120\r\n },\r\n footerOutline: {\r\n background: colors.transparent,\r\n backgroundHover: colors.white,\r\n border: colors.white,\r\n borderHover: colors.white,\r\n color: colors.white,\r\n colorHover: colors.deepBlue\r\n },\r\n white: {\r\n background: colors.white,\r\n backgroundHover: colors.greenTint25,\r\n border: colors.white,\r\n borderHover: colors.greenTint25,\r\n color: colors.greenTint110,\r\n colorHover: colors.greenTint110\r\n }\r\n },\r\n table: {\r\n head: {\r\n color: colors.white,\r\n background: colors.greenTint110\r\n },\r\n cell: {\r\n border: colors.deepBlueTint15\r\n },\r\n row: {\r\n background: colors.white,\r\n backgroundAlt: colors.deepBlueTint07\r\n }\r\n },\r\n form: {\r\n input: {\r\n background: colors.deepBlueTint07,\r\n border: `2px solid ${colors.deepBlueTint45}`\r\n },\r\n radio: {\r\n background: colors.white,\r\n backgroundHover: colors.white,\r\n border: `2px solid ${colors.deepBlueTint45}`,\r\n borderHover: `2px solid ${colors.deepBlueTint75}`,\r\n selectedBackground: colors.greenTint110,\r\n selectedBackgroundHover: colors.greenTint120,\r\n selectedBorder: `2px solid ${colors.greenTint110}`,\r\n selectedBorderHover: `2px solid ${colors.greenTint120}`,\r\n color: colors.white,\r\n colorHover: colors.white\r\n }\r\n },\r\n search: {\r\n focus: colors.greenTint110,\r\n submit: {\r\n background: colors.deepBlueTint15\r\n },\r\n border: colors.deepBlueTint15,\r\n filtersActive: colors.greenTint15\r\n },\r\n downloads: {\r\n border: colors.deepBlueTint15\r\n },\r\n menu: {\r\n container: {\r\n background: colors.deepBlue\r\n },\r\n item: {\r\n color: colors.white,\r\n colorActive: colors.white,\r\n background: colors.transparent,\r\n backgroundActive: colors.greenTint110,\r\n description: colors.deepBlueTint45,\r\n descriptionActive: colors.white\r\n },\r\n divider: colors.deepBlueTint75\r\n },\r\n modal: {\r\n container: {\r\n background: colors.darkBlue\r\n },\r\n scrollThumb: {\r\n background: colors.deepBlueTint45\r\n },\r\n close: {\r\n fill: colors.white,\r\n fillHover: colors.green\r\n }\r\n },\r\n footer: {\r\n container: {\r\n background: colors.deepBlue\r\n },\r\n item: {\r\n color: colors.white,\r\n colorActive: colors.white,\r\n background: colors.transparent,\r\n backgroundActive: colors.greenTint110\r\n },\r\n tertiaryItem: {\r\n color: colors.deepBlueTint45\r\n },\r\n divider: colors.deepBlueTint45\r\n },\r\n featureList: {\r\n tick: colors.green,\r\n cross: colors.pottsPointRedTint110\r\n },\r\n dna: {\r\n default: colors.blueTint110\r\n }\r\n },\r\n fonts: {\r\n headings: {\r\n title: {\r\n fontSize: {\r\n sm: 56,\r\n md: 72\r\n },\r\n lineHeight: {\r\n sm: 56,\r\n md: 72\r\n },\r\n fontWeight: 300,\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n xxxl: {\r\n fontSize: {\r\n sm: 40,\r\n md: 64\r\n },\r\n lineHeight: {\r\n sm: 40,\r\n md: 64\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n xxl: {\r\n fontSize: {\r\n sm: 32,\r\n md: 48\r\n },\r\n lineHeight: {\r\n sm: 32,\r\n md: 52\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n xl: {\r\n fontSize: {\r\n sm: 24,\r\n md: 40\r\n },\r\n lineHeight: {\r\n sm: 28,\r\n md: 44\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n l: {\r\n fontSize: {\r\n sm: 20,\r\n md: 32\r\n },\r\n lineHeight: {\r\n sm: 24,\r\n md: 36\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n m: {\r\n fontSize: {\r\n sm: 18,\r\n md: 24\r\n },\r\n lineHeight: {\r\n sm: 24,\r\n md: 28\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n s: {\r\n fontSize: {\r\n sm: 16,\r\n md: 18\r\n },\r\n lineHeight: {\r\n sm: 20,\r\n md: 24\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n xs: {\r\n fontSize: {\r\n sm: 14,\r\n md: 16\r\n },\r\n lineHeight: {\r\n sm: 18,\r\n md: 20\r\n },\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n }\r\n },\r\n text: {\r\n // large intro etc\r\n l: {\r\n fontSize: {\r\n sm: 20,\r\n md: 32\r\n },\r\n lineHeight: {\r\n sm: 30,\r\n md: 48\r\n },\r\n spacing: 16,\r\n fontWeight: 300,\r\n fontFamily: FONT_FAMILY_DISPLAY\r\n },\r\n // normal body\r\n m: {\r\n fontSize: {\r\n sm: 16,\r\n md: 18\r\n },\r\n lineHeight: {\r\n sm: 24,\r\n md: 28\r\n },\r\n spacing: 16,\r\n fontFamily: FONT_FAMILY_TEXT\r\n },\r\n // smaller body\r\n s: {\r\n fontSize: {\r\n sm: 14,\r\n md: 16\r\n },\r\n lineHeight: {\r\n sm: 21,\r\n md: 24\r\n },\r\n spacing: 16,\r\n fontFamily: FONT_FAMILY_TEXT\r\n },\r\n // small text\r\n xs: {\r\n fontSize: {\r\n sm: 10,\r\n md: 10\r\n },\r\n lineHeight: {\r\n sm: 16,\r\n md: 16\r\n },\r\n fontWeight: 'normal',\r\n spacing: 16,\r\n fontFamily: FONT_FAMILY_MICRO\r\n },\r\n // small text caps\r\n xscap: {\r\n fontSize: {\r\n sm: 10,\r\n md: 10\r\n },\r\n lineHeight: {\r\n sm: 16,\r\n md: 16\r\n },\r\n spacing: 16,\r\n fontWeight: 'bold',\r\n textTransform: 'uppercase',\r\n fontFamily: FONT_FAMILY_MICRO\r\n }\r\n }\r\n },\r\n buttons: {\r\n default: {\r\n // (same as h5)\r\n fontSize: {\r\n sm: 16,\r\n md: 18\r\n },\r\n lineHeight: {\r\n sm: 24,\r\n md: 28\r\n },\r\n padding: {\r\n x: 14,\r\n y: 6\r\n },\r\n icon: {\r\n sm: {\r\n w: 24,\r\n h: 24\r\n },\r\n md: {\r\n w: 24,\r\n h: 24\r\n }\r\n },\r\n fontFamily: FONT_FAMILY_TEXT\r\n },\r\n slim: {\r\n // (same as h6)\r\n fontSize: {\r\n sm: 14,\r\n md: 16\r\n },\r\n lineHeight: {\r\n sm: 16,\r\n md: 20\r\n },\r\n padding: {\r\n x: 14,\r\n y: 6\r\n },\r\n icon: {\r\n sm: {\r\n w: 20,\r\n h: 20\r\n },\r\n md: {\r\n w: 24,\r\n h: 24\r\n }\r\n },\r\n fontFamily: FONT_FAMILY_TEXT\r\n },\r\n iconOnly: {\r\n fontSize: {\r\n sm: 16,\r\n md: 16\r\n },\r\n lineHeight: {\r\n sm: 16,\r\n md: 16\r\n },\r\n padding: {\r\n x: 16,\r\n y: 16\r\n },\r\n icon: {\r\n sm: {\r\n w: 20,\r\n h: 20\r\n },\r\n md: {\r\n w: 24,\r\n h: 24\r\n }\r\n },\r\n fontFamily: FONT_FAMILY_TEXT\r\n }\r\n },\r\n borderRadius: {\r\n default: {\r\n sm: 10,\r\n md: 14\r\n }\r\n },\r\n table: {\r\n font: {\r\n // same as body2\r\n fontSize: {\r\n sm: 14,\r\n md: 16\r\n },\r\n lineHeight: {\r\n sm: 16,\r\n md: 20\r\n },\r\n spacing: 16,\r\n fontFamily: FONT_FAMILY_TEXT\r\n }\r\n },\r\n motion: {\r\n ease: 'cubic-bezier(.27,.23,.08,1)',\r\n timing: {\r\n none: `0ms`,\r\n fast: `${MOTION_SPEED_BASE / 2}ms`,\r\n default: `${MOTION_SPEED_BASE}ms`,\r\n slow: `${MOTION_SPEED_BASE * 2}ms`\r\n }\r\n },\r\n responsiveSpacing: {\r\n xs: {\r\n '0': 0,\r\n '1': 8,\r\n '2': 16,\r\n '3': 16,\r\n '4': 16,\r\n '5': 24,\r\n '6': 24,\r\n '7': 32,\r\n '8': 40,\r\n '9': 64\r\n },\r\n md: {\r\n '0': 0,\r\n '1': 8,\r\n '2': 16,\r\n '3': 24,\r\n '4': 32,\r\n '5': 40,\r\n '6': 48,\r\n '7': 64,\r\n '8': 80,\r\n '9': 120\r\n }\r\n },\r\n grid: {\r\n margin: {\r\n xs: 24,\r\n lg: 48\r\n },\r\n gutter: {\r\n size: {\r\n xs: 16,\r\n md: 24,\r\n lg: 32\r\n },\r\n directions: ['left', 'right', 'top', 'bottom']\r\n },\r\n colCount: 12,\r\n containerMinWidth: 280,\r\n containerMaxWidth: 1024,\r\n borderColor: colors.deepBlueTint15,\r\n borderWidth: '1px'\r\n },\r\n card: {\r\n sectionBackground: colors.light,\r\n primary: colors.deepBlue,\r\n secondary: colors.deepBlueTint75,\r\n action: colors.greenTint110,\r\n actionHover: colors.greenTint120,\r\n attributeIcon: colors.deepBlueTint75,\r\n borderRadius: 8,\r\n boxShadow: `0px 3px 12px ${colors.black10}`,\r\n boxShadowHover: `0px 6px 20px ${colors.black20}`,\r\n border: `1px solid ${colors.deepBlueTint15}`,\r\n borderDashed: `1px dashed ${colors.deepBlueTint15}`,\r\n borderHover: `1px solid ${colors.deepBlueTint45}`,\r\n borderDashedHover: `1px dashed ${colors.deepBlueTint45}`\r\n },\r\n accordion: {\r\n primary: colors.deepBlue,\r\n action: colors.greenTint110,\r\n actionHover: colors.greenTint120,\r\n titleHover: colors.green,\r\n borderRadius: 8,\r\n border: `1px solid ${colors.deepBlueTint15}`,\r\n borderHover: `1px solid ${colors.deepBlueTint45}`\r\n },\r\n callToAction: {\r\n backgroundColor: colors.greenTint110,\r\n borderRadius: 8,\r\n color: colors.white\r\n },\r\n header: {\r\n height: {\r\n xs: 72,\r\n md: 88\r\n }\r\n },\r\n content: {\r\n indent: {\r\n xs: 40,\r\n md: 48\r\n }\r\n }\r\n};\r\n\r\nexport default Theme;\r\n","import { useRef } from 'react';\r\n\r\nexport interface IValues {\r\n setTimer: (fn: any, delay: number) => void;\r\n cancelTimer: () => void;\r\n}\r\n\r\nexport default function useTimer(): IValues {\r\n const timeoutRef = useRef(null);\r\n\r\n const cancelTimer = () => {\r\n if (timeoutRef.current) {\r\n clearTimeout(timeoutRef.current);\r\n timeoutRef.current = null;\r\n }\r\n };\r\n\r\n const setTimer = (fn: any, delay: number = 1000) => {\r\n cancelTimer();\r\n\r\n if (typeof fn === 'function') {\r\n timeoutRef.current = setTimeout(() => {\r\n fn();\r\n cancelTimer();\r\n }, delay);\r\n }\r\n };\r\n\r\n return { setTimer, cancelTimer };\r\n}\r\n","import { range } from 'ramda';\r\n\r\nfunction getItems(pageIndex: number, numPages: number, buffer: number): any[] {\r\n const maxItems = buffer * 2 + 1;\r\n\r\n // easy case numPages < max\r\n if (numPages <= maxItems) {\r\n return range(1, numPages + 1);\r\n }\r\n\r\n let start: number = pageIndex - buffer;\r\n let end: number = pageIndex + buffer;\r\n\r\n // keep items within bounds\r\n if (start < 1) {\r\n start = 1;\r\n end = start + (maxItems - 1);\r\n }\r\n\r\n if (end >= numPages) {\r\n end = numPages;\r\n start = end - (maxItems - 1);\r\n }\r\n\r\n // create items\r\n let items = range(start, end + 1);\r\n\r\n // also add first/last if they are not in items\r\n // null used as placeholder for ellipsis indicator\r\n if (start > 1) {\r\n if (start > 2) items.unshift(null);\r\n items.unshift(1);\r\n }\r\n\r\n if (end < numPages) {\r\n if (end < numPages - 1) items.push(null);\r\n items.push(numPages);\r\n }\r\n\r\n return items;\r\n}\r\n\r\nexport default function usePagination({\r\n pageSize,\r\n pageIndex,\r\n count,\r\n buffer\r\n}): { items: number[]; prevEnabled: boolean; nextEnabled: boolean } {\r\n const numPages = Math.ceil(count / pageSize);\r\n return {\r\n prevEnabled: pageIndex > 1,\r\n items: getItems(pageIndex, numPages, buffer),\r\n nextEnabled: pageIndex < numPages\r\n };\r\n}\r\n","import { canUseDOm } from 'exenv';\r\nimport { useState, useEffect } from 'react';\r\n\r\nexport default function() {\r\n function getSize() {\r\n return {\r\n width: canUseDOm ? window.innerWidth : undefined,\r\n height: canUseDOm ? window.innerHeight : undefined\r\n };\r\n }\r\n\r\n const [windowSize, setWindowSize] = useState(getSize);\r\n\r\n useEffect(() => {\r\n function handleResize() {\r\n setWindowSize(getSize());\r\n }\r\n\r\n window.addEventListener('resize', handleResize);\r\n return () => window.removeEventListener('resize', handleResize);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []); // Empty array ensures that effect is only run on mount and unmount\r\n\r\n return windowSize;\r\n}\r\n","import { useState, useEffect } from 'react';\r\n\r\ninterface LoginLogoutTime {\r\n loginTime: string | null;\r\n handleLoginTime: () => void;\r\n}\r\n\r\nfunction useLoginLogoutTime(): LoginLogoutTime {\r\n const [loginTime, setLoginTime] = useState(null);\r\n\r\n const handleLoginTime = () => {\r\n const currentTime = new Date().toISOString();\r\n setLoginTime(currentTime);\r\n localStorage.setItem('loginTime', currentTime);\r\n };\r\n\r\n\r\n //Fetch previously stored login time from localStorage\r\n useEffect(() => {\r\n const storedLoginTime = localStorage.getItem('loginTime');\r\n if (storedLoginTime) {\r\n setLoginTime(storedLoginTime);\r\n }\r\n\r\n // Cleanup function to remove loginTime after 3 minutes\r\n const timeout = setTimeout(() => {\r\n localStorage.removeItem('loginTime');\r\n setLoginTime(null);\r\n }, 3 * 60 * 1000); // 3 minutes in milliseconds\r\n\r\n // Clear the timeout on unmount to avoid memory leaks\r\n return () => clearTimeout(timeout);\r\n }, []);\r\n\r\n return { loginTime, handleLoginTime };\r\n}\r\n\r\nexport default useLoginLogoutTime;\r\n","import { useState, useEffect } from 'react';\r\nimport { canUseDOM } from 'exenv';\r\n\r\ndeclare global {\r\n interface Window {\r\n dataLayer?: any[];\r\n }\r\n}\r\n\r\n// data layer is not immediately available\r\n// call callback(dataLayer) when it is\r\nconst getDataLayer = (callback: (dataLayer: any) => void, attempts = 0): void => {\r\n if (!canUseDOM) {\r\n callback(null);\r\n return;\r\n }\r\n\r\n const { dataLayer } = window;\r\n\r\n if (dataLayer) {\r\n callback(dataLayer);\r\n return;\r\n } else {\r\n requestAnimationFrame(() => {\r\n if (attempts < 100) {\r\n // keep trying\r\n getDataLayer(callback, attempts + 1);\r\n } else {\r\n //give up\r\n callback(null);\r\n }\r\n });\r\n }\r\n};\r\n\r\nexport const useDataLayer = () => {\r\n const [dataLayer, setDataLayer] = useState(null);\r\n\r\n useEffect(() => {\r\n getDataLayer((dataLayer) => setDataLayer(dataLayer));\r\n }, []);\r\n\r\n return dataLayer;\r\n};\r\n\r\nexport default useDataLayer;\r\n","export { default as usePrevious } from './usePrevious';\r\nexport { default as useLocalStorage } from './useLocalStorage';\r\nexport { default as useTimer } from './useTimer';\r\nexport { default as usePagination } from './usePagination';\r\nexport { default as useScript } from './useScript';\r\nexport { default as useStateWithCallback } from './useStateWithCallback';\r\nexport { default as useWindowSize } from './useWindowSize';\r\nexport { default as useLoginLogOutTime } from './useLoginLogOutTime';\r\nexport { default as useDataLayer } from './useDataLayer';\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgCamera = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 18)(SvgCamera);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgFacebook = () => (\r\n \r\n);\r\n\r\nexport default withSvg(11, 20)(SvgFacebook);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgInstagram = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgInstagram);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgLinkedIn = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgLinkedIn);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgLockup = () => (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(249, 40)(SvgLockup);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgTwitter = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgTwitter);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgYoutube = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 16)(SvgYoutube);\r\n","import React from 'react';\r\n\r\nimport { SectionWrapper } from './StyledSection';\r\n\r\nexport enum BackgroundColors {\r\n White = 'white',\r\n Grey = '',\r\n 'Light beige' = 'beige',\r\n Lavender = 'lavender'\r\n}\r\n\r\ntype SectionProps = {\r\n className?: string;\r\n children: React.ReactNode;\r\n sectionTheme?: BackgroundColors;\r\n};\r\n\r\nconst Section: React.FC = ({ className, children, sectionTheme, ...rest }) => {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nSection.defaultProps = {\r\n sectionTheme: BackgroundColors.White\r\n};\r\n\r\nexport default Section;\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgLargeCross = () => (\r\n \r\n);\r\n\r\nexport default withSvg(28, 28)(SvgLargeCross);\r\n","import { useState, useEffect } from 'react';\r\nimport usePrevious from './usePrevious';\r\n\r\ntype ContentStyle = {\r\n height?: string;\r\n transition?: string;\r\n};\r\n\r\nexport default function useAccordion(contentRef, startExpanded = false) {\r\n const [expanded, setExpanded] = useState(startExpanded);\r\n const [contentStyle, setContentStyle] = useState(\r\n !startExpanded ? { height: '0px' } : {}\r\n );\r\n const prevExpanded = usePrevious(expanded);\r\n\r\n // expand/collapse effect\r\n useEffect(() => {\r\n const el = contentRef.current;\r\n if (!expanded && prevExpanded) {\r\n // collapse\r\n if (el) {\r\n // store content height before collapse\r\n const contentHeight = el.scrollHeight;\r\n const elemTransition = el.style.transition;\r\n\r\n setContentStyle({ transition: '' });\r\n\r\n // @see https://css-tricks.com/using-css-transitions-auto-dimensions/\r\n requestAnimationFrame(() => {\r\n setContentStyle({\r\n height: contentHeight + 'px',\r\n transition: elemTransition\r\n });\r\n\r\n requestAnimationFrame(() => {\r\n setContentStyle({ height: '0px' });\r\n });\r\n });\r\n }\r\n } else if (expanded && !prevExpanded) {\r\n // expand\r\n if (el) {\r\n setContentStyle({\r\n // height: el.scrollHeight + 'px'\r\n height: 'auto'\r\n });\r\n }\r\n }\r\n }, [expanded, prevExpanded, contentRef, setContentStyle]);\r\n\r\n return { expanded, setExpanded, contentStyle };\r\n}\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nexport const StyledComponentWrapper = styled.div`\r\n padding-bottom: 50px;\r\n`;\r\n\r\nexport const StyledNotice = styled.div`\r\n display: inline-block;\r\n padding: ${({ theme }) => spacing({ theme, p: 1 })};\r\n background-color: ${({ theme, noticeLevel = 'info' }) => theme.colors.status[noticeLevel]};\r\n color: ${({ theme }) => theme.colors.element.primary};\r\n font-size: 10px;\r\n line-height: 1.6;\r\n\r\n ul {\r\n list-style: inside disc;\r\n padding-left: ${({ theme }) => spacing({ theme, pl: 1 })};\r\n }\r\n\r\n small {\r\n font-size: 10px;\r\n }\r\n\r\n em {\r\n font-style: italic;\r\n }\r\n`;\r\n\r\nexport const StyledComponentHighlight = styled.div`\r\n border: 3px dashed ${({ theme, noticeLevel = 'info' }) => theme.colors.status[noticeLevel]};\r\n min-height: 30px;\r\n\r\n ${StyledNotice} + & {\r\n margin-top: 16px;\r\n }\r\n`;\r\n","import React, { useState } from 'react';\r\n// import { isValidMedia, isValidLink } from '_utils/validationChecks/';\r\nimport {\r\n StyledComponentWrapper,\r\n StyledNotice,\r\n StyledComponentHighlight\r\n} from './StyledBaseComponent';\r\n\r\nimport { warnInDev } from '_utils/helpers/dev';\r\nimport { getDisplayName } from '_utils/helpers';\r\nimport { isExperienceEditorActive } from '@sitecore-jss/sitecore-jss-react';\r\n// HOC to wrap component with editMode provider\r\n// (ex BaseComponent instance method 'isEditMode')\r\nexport const withEditMode = (Component) => {\r\n const withEditMode = (props) => {\r\n return ;\r\n };\r\n return withEditMode;\r\n};\r\n\r\n// HOC to wrap component with disableable render\r\n// (ex BaseComponent instance method componentRender)\r\n//\r\n// this is an inversion of the orig BaseComponent func 'componentRender'\r\n// approach, instead component may *opt-in* to disable render by calling\r\n// props.setRenderDisabled() with bool indicating whether to proceed with\r\n// render or just return null\r\n//\r\n// Note: to get meaningfull debug messages in dev about when render was disabled,\r\n// make withDisableRender right-most function in composition, e.g:\r\n// export default compose( withSitecoreContext(), withFieldValidation, withDisableRender )(ArticleHeaderImage);\r\n//\r\nexport const withDisableRender = (Component) => {\r\n const WithDisableRender = (props) => {\r\n const editMode = isExperienceEditorActive();\r\n\r\n // wrapped components can set this with a truthy value (debug msg) to prevent render\r\n const [renderDisabled, setRenderDisabled] = useState();\r\n\r\n // TODO this may get a bit noisy - give options to turn down/off warnings\r\n if (renderDisabled && !editMode) {\r\n warnInDev(`${getDisplayName(Component)} was not rendered (${renderDisabled})`);\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n return WithDisableRender;\r\n};\r\n\r\n// HOC to wrap component with field validation methods:\r\n// 'isValidField' and 'maybeRenderField' (ex BaseComponent instance methods)\r\n// export const withFieldValidation = (Component) => {\r\n// const isValidField = (fieldType, field) => {\r\n// switch (fieldType) {\r\n// case 'image':\r\n// return isValidMedia(field);\r\n// case 'video':\r\n// return isValidMedia(field);\r\n// case 'text':\r\n// return isValidField(field);\r\n// case 'link':\r\n// return isValidLink(field);\r\n// default:\r\n// warnInDev(`Validation is not configured for field type [${fieldType}]`);\r\n// return false;\r\n// }\r\n// };\r\n\r\n// const maybeRenderFld = (editMode, type, field, markup) => {\r\n// if (editMode) {\r\n// return markup;\r\n// }\r\n\r\n// if (isValidField(type, field)) {\r\n// return markup;\r\n// }\r\n\r\n// warnInDev(`${getDisplayName(Component)} field ${field} of type ${type} was not rendered `);\r\n\r\n// return null;\r\n// };\r\n\r\n// const withFieldValidation = (props) => {\r\n// const editMode = isEditMode(props);\r\n\r\n// const maybeRenderField = (type, field, markup) => {\r\n// maybeRenderFld(editMode, type, field, markup);\r\n// };\r\n\r\n// return ;\r\n// };\r\n\r\n// return withFieldValidation;\r\n// };\r\n\r\n// HOC to wrap component with editor Notice (ex BaseComponent instance methods)\r\nexport const withEditModeNotice = (Component) => {\r\n const withEditModeNotice = (props) => {\r\n const editMode = isExperienceEditorActive();\r\n\r\n const { noticeEnabled, noticeMessage = '', noticeLevel = 'warning' } = props;\r\n\r\n if (!editMode || !noticeEnabled) {\r\n return ;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {noticeMessage}\r\n
\r\n );\r\n };\r\n return withEditModeNotice;\r\n};\r\n","import React from 'react';\r\nimport {TimelineStageStatusType, StatusType, TimelineStatusType} from '_utils/helpers/statusType';\r\nimport {\r\n OpenForFeedback,\r\n UnderReview,\r\n InProgress,\r\n Completed,\r\n Planned,\r\n Closed,\r\n Book,\r\n OnExhibition,\r\n TimelineCompleted,\r\n TimelineInProgress,\r\n TimelineNotStarted,\r\n ReportingBack\r\n} from '_utils/icons';\r\nimport SvgApproved from \"../../../icons/StatusTag/Approved\";\r\n\r\nconst icons = {\r\n [StatusType.book]: ,\r\n [StatusType.underReview]: ,\r\n [StatusType.open]: ,\r\n [StatusType.inProgress]: ,\r\n [StatusType.planned]: ,\r\n [StatusType.closed]: ,\r\n [StatusType.completed]: \r\n};\r\n\r\nconst timelineStatusIcons = {\r\n [TimelineStatusType.underReview]: ,\r\n [TimelineStatusType.openForFeedback]: ,\r\n [TimelineStatusType.open]: ,\r\n [TimelineStatusType.inProgress]: ,\r\n [TimelineStatusType.planned]: ,\r\n [TimelineStatusType.closed]: ,\r\n [TimelineStatusType.completed]: ,\r\n [TimelineStatusType.onExhibition]: ,\r\n [TimelineStatusType.reportingBack]: \r\n};\r\n\r\nconst timelineStageStatusIcons = {\r\n [TimelineStageStatusType.completed]: ,\r\n [TimelineStageStatusType.inProgress]: ,\r\n [TimelineStageStatusType.notStarted]: ,\r\n}\r\n\r\nexport function StatusIcon({ status }) {\r\n if (icons[status]) {\r\n return icons[status];\r\n }\r\n\r\n return null;\r\n}\r\n\r\nexport function TimelineIcon({ status }) {\r\n if (timelineStatusIcons[status]) {\r\n return timelineStatusIcons[status];\r\n }\r\n\r\n return null;\r\n}\r\n\r\nexport function TimelineStageIcon({ status }) {\r\n if (timelineStageStatusIcons[status]) {\r\n return timelineStageStatusIcons[status];\r\n }\r\n\r\n return null;\r\n}\r\n","export const BREAKPOINTS = {\r\n xs: 0,\r\n sm: 576,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1440\r\n};\r\n\r\nexport const getZeroMediaQuery = (): string => {\r\n const keys = Object.keys(BREAKPOINTS);\r\n for (let i = 0; i < keys.length; i++) {\r\n const key = keys[i];\r\n if (BREAKPOINTS[key] === 0) {\r\n return key;\r\n }\r\n }\r\n return undefined;\r\n};\r\n\r\n// retrieve breakpoint keys from object that match known breakpoints\r\nexport const getBreakpointKeys = (obj?: object) => {\r\n const breakpoints = Object.keys(BREAKPOINTS);\r\n if (!obj) {\r\n return breakpoints;\r\n }\r\n return Object.keys(obj).filter((key) => breakpoints.indexOf(key) > -1);\r\n};\r\n\r\nconst mq = (bp, includeMedia = true): string =>\r\n `${includeMedia ? '@media ' : ''}(min-width: ${BREAKPOINTS[bp]}px)`;\r\n\r\nmq.lessThan = (bp, includeMedia = true): string =>\r\n `${includeMedia ? '@media ' : ''}(max-width: ${BREAKPOINTS[bp] - 1}px)`;\r\n\r\nmq.between = (bpA, bpB, includeMedia = true): string =>\r\n `${includeMedia ? '@media ' : ''}(min-width: ${BREAKPOINTS[bpA]}px) and (max-width: ${BREAKPOINTS[\r\n bpB\r\n ] - 1}px)`;\r\n\r\nexport default mq;\r\n","export interface IPropList {\r\n [key: string]: string[];\r\n}\r\n\r\nexport const isPlainValue = (value: any): boolean =>\r\n typeof value === 'string' || typeof value === 'number';\r\n\r\nexport const isObject = (value: any) => typeof value === 'object' && value !== null;\r\n","import { isPlainValue, isObject } from '_utils/props/';\r\nimport mq, { getZeroMediaQuery, getBreakpointKeys } from '_utils/styles/mq';\r\nimport { IPropList } from '../types';\r\n\r\nexport interface IHelperOptions {\r\n getValue?: (value: any, property: string, theme: any) => any;\r\n applyValue?: (\r\n SUPPORTED_PROPS: IPropList,\r\n theme: any,\r\n property: string,\r\n value?: any,\r\n breakpoint?: string\r\n ) => string[];\r\n getCssString?: (css: string | string[], breakpoint?: string) => string;\r\n}\r\n/**\r\n * get media query properties\r\n * @param value component props\r\n * @returns Array. property keys that match breakpoints\r\n */\r\nconst getMediaQueries = (theme: any, value: any): string[] => {\r\n if (!isObject(value)) {\r\n return [];\r\n }\r\n return getBreakpointKeys(value);\r\n};\r\n\r\nconst defaultGetValue = (props: any, property: string, theme?: any) => {\r\n return props ? props[property] : undefined;\r\n};\r\n\r\n// default implementation for applying prop/value to get css\r\nconst defaultApplyValue = (\r\n SUPPORTED_PROPS: IPropList,\r\n theme: any,\r\n property: string,\r\n value?: any,\r\n breakpoint?: string,\r\n config?: any\r\n): string[] => {\r\n return SUPPORTED_PROPS[property].map((prop) => `${prop}: ${value};`);\r\n};\r\n\r\n// default implementation for wrapping css partials with media queries\r\nexport const defaultGetCssString = (css: string | string[], breakpoint?: string): string => {\r\n // might get array of css partials, convert to string\r\n if (Array.isArray(css)) {\r\n css = css.join(' ');\r\n }\r\n\r\n return !breakpoint || breakpoint === getZeroMediaQuery() ? css : `${mq(breakpoint)} { ${css} }`;\r\n};\r\n\r\nconst defaultOptions = {\r\n getValue: defaultGetValue,\r\n applyValue: defaultApplyValue,\r\n getCssString: defaultGetCssString\r\n};\r\n\r\nexport default (\r\n SUPPORTED_PROPS: IPropList,\r\n { theme, config = undefined, ...rest },\r\n options?: IHelperOptions\r\n) =>\r\n Object.keys(rest)\r\n .filter((key) => Object.keys(SUPPORTED_PROPS).indexOf(key) > -1)\r\n .reduce((prev, property) => {\r\n const { getValue, applyValue, getCssString } = { ...defaultOptions, ...options };\r\n\r\n const value = getValue(rest, property, theme);\r\n\r\n // case 1. simple value to applied without media queries\r\n\r\n if (isPlainValue(value)) {\r\n let css: string[] = applyValue(SUPPORTED_PROPS, theme, property, value, undefined, config);\r\n return prev.concat(getCssString(css, undefined));\r\n }\r\n\r\n // case 2. value is object containing values keyed by media queries\r\n\r\n const mediaQueries: string[] = getMediaQueries(theme, value);\r\n return prev.concat(\r\n ...mediaQueries.map((breakpoint) => {\r\n let css: string[] = applyValue(\r\n SUPPORTED_PROPS,\r\n theme,\r\n property,\r\n value[breakpoint],\r\n breakpoint,\r\n config\r\n );\r\n return getCssString(css, breakpoint);\r\n })\r\n );\r\n }, [])\r\n .join(' ');\r\n","import { IPropList } from '../';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n color: ['color'],\r\n backgroundColor: ['background-color'],\r\n opacity: ['opacity']\r\n};\r\n\r\nconst getValue = (propValue, property, { colors }) => {\r\n if (property === 'opacity') {\r\n return propValue;\r\n }\r\n\r\n const colorArgs = propValue.split('.');\r\n const firstKey = colorArgs.shift();\r\n\r\n const color = colorArgs.reduce((acc, curr) => acc[curr], colors[firstKey]);\r\n\r\n return typeof color === 'undefined' ? propValue : color;\r\n};\r\n\r\nexport default (props: any) => generateHelper(SUPPORTED_PROPS, props, { getValue });\r\n","import { IPropList } from '../';\r\nimport { warnInDev } from '_utils/helpers/dev';\r\nimport mq, { getZeroMediaQuery, getBreakpointKeys } from '_utils/styles/mq';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n margin: ['margin'],\r\n m: ['margin'],\r\n marginX: ['margin-left', 'margin-right'],\r\n mx: ['margin-left', 'margin-right'],\r\n marginY: ['margin-top', 'margin-bottom'],\r\n my: ['margin-top', 'margin-bottom'],\r\n marginTop: ['margin-top'],\r\n mt: ['margin-top'],\r\n marginBottom: ['margin-bottom'],\r\n mb: ['margin-bottom'],\r\n marginLeft: ['margin-left'],\r\n ml: ['margin-left'],\r\n marginRight: ['margin-right'],\r\n mr: ['margin-right'],\r\n padding: ['padding'],\r\n p: ['padding'],\r\n paddingX: ['padding-left', 'padding-right'],\r\n px: ['padding-left', 'padding-right'],\r\n paddingY: ['padding-top', 'padding-bottom'],\r\n py: ['padding-top', 'padding-bottom'],\r\n paddingTop: ['padding-top'],\r\n pt: ['padding-top'],\r\n paddingBottom: ['padding-bottom'],\r\n pb: ['padding-bottom'],\r\n paddingLeft: ['padding-left'],\r\n pl: ['padding-left'],\r\n paddingRight: ['padding-right'],\r\n pr: ['padding-right']\r\n};\r\n\r\nconst invalidValue = (theme: any, breakpoint: string, value: any): string => {\r\n if (\r\n theme &&\r\n theme.responsiveSpacing &&\r\n theme.responsiveSpacing[breakpoint] &&\r\n theme.responsiveSpacing[breakpoint].hasOwnProperty(value)\r\n ) {\r\n return undefined;\r\n }\r\n\r\n return `could not find spacing for value (${value}) at breakpoint '${breakpoint}'`;\r\n};\r\n\r\n/*\r\n * @private\r\n */\r\nexport const applyValue = (\r\n SUPPORTED_PROPS: IPropList,\r\n theme: any,\r\n property: string,\r\n value: string | number,\r\n breakpoint?: string,\r\n config?: any\r\n) => {\r\n if (typeof value !== 'string' && typeof value !== 'number') {\r\n warnInDev(`invalid spacing of type (${typeof value}) ignored for (${property})`);\r\n return [];\r\n }\r\n\r\n // // dont process non numeric values - just apply\r\n if (isNaN(Number(value))) {\r\n return SUPPORTED_PROPS[property].map((prop) => `${prop}: ${value};`);\r\n }\r\n\r\n // early exit for 0\r\n if (Number(value) === 0) {\r\n return SUPPORTED_PROPS[property].map((prop) => `${prop}: 0;`);\r\n }\r\n\r\n // breakpoint is undefined value is plain value\r\n // eg { margin: 2 } as opposed to { margin: { xs: 1, md : 2} }\r\n // we handle it specially here by auto applying breakpoint as per\r\n // responsive spacing values defined in the theme\r\n\r\n const factor = config?.factor || 1;\r\n\r\n let sign = 1;\r\n\r\n const negativeMatch = /^-(\\d+)$/.exec(String(value));\r\n // check for negative value\r\n if (negativeMatch) {\r\n sign = -1;\r\n value = negativeMatch[1];\r\n }\r\n\r\n if (breakpoint === undefined) {\r\n // get breakpoints defined by theme\r\n let mediaQueries = getBreakpointKeys(theme.responsiveSpacing);\r\n\r\n return mediaQueries.map((breakpoint) => {\r\n let invalid = invalidValue(theme, breakpoint, value);\r\n\r\n if (invalid) {\r\n // throwInDev(invalid);\r\n warnInDev(invalid);\r\n return '';\r\n }\r\n\r\n let val = factor * sign * Number(theme.responsiveSpacing[breakpoint][value]);\r\n\r\n // convert to css to string so we can wrap in mq\r\n let css: string = SUPPORTED_PROPS[property].map((prop) => `${prop}: ${val}px;`).join(' ');\r\n\r\n return !breakpoint || breakpoint === getZeroMediaQuery()\r\n ? css\r\n : `${mq(breakpoint)} { ${css} }`;\r\n });\r\n }\r\n\r\n // if we this far, a breakpoint was specified\r\n // in props e.g. { margin: { xs: 1, md : 2} }\r\n const allBreakpointKeys = getBreakpointKeys();\r\n const spacingBreakpointKeys = getBreakpointKeys(theme.responsiveSpacing);\r\n\r\n // make sure breakpoint is valid and in responsive spacing table\r\n // if possible fall back to earlier breakpoint's value\r\n const breakpointIndex = allBreakpointKeys.indexOf(breakpoint);\r\n const spacingBPIndex = spacingBreakpointKeys.indexOf(breakpoint);\r\n\r\n if (breakpointIndex === -1) {\r\n return [];\r\n } else {\r\n if (spacingBPIndex === -1) {\r\n // breakpoint is valid, but not in responsive spacing table, fall back to next closest\r\n let index = breakpointIndex;\r\n let fallbackBreakpoint;\r\n while (index > -1) {\r\n index--;\r\n fallbackBreakpoint = allBreakpointKeys[index];\r\n if (spacingBreakpointKeys.indexOf(fallbackBreakpoint) > -1) {\r\n break;\r\n }\r\n }\r\n\r\n // warnInDev(\r\n // `breakpoint '${breakpoint}' is not defined in spacing. Will use closest previous breakpoint '${fallbackBreakpoint}' in applying '${property}' of (${value})`\r\n // );\r\n\r\n // replace requested breakpoint with fallback\r\n breakpoint = fallbackBreakpoint;\r\n }\r\n }\r\n\r\n let invalid = invalidValue(theme, breakpoint, value);\r\n\r\n if (invalid) {\r\n // throwInDev(invalid);\r\n warnInDev(invalid);\r\n return [];\r\n }\r\n\r\n return SUPPORTED_PROPS[property].map(\r\n (prop) => `${prop}: ${theme.responsiveSpacing[breakpoint][value]}px;`\r\n );\r\n};\r\n\r\n/*\r\n * spacing helper generates spacing styles for components\r\n *\r\n * Basic usage:\r\n *\r\n * using component properties:\r\n *\r\n * \r\n *\r\n * OR styled components interpolation:\r\n *\r\n * const styles = css`${spacing({ theme, mt: 3, mb : 4 })}`\r\n *\r\n * @see SUPPORTED_PROPERTIES for valid properties and aliases.\r\n *\r\n * margin-top: 16px; @media (min-width: 768px) { margin-top: 24px; }\r\n * margin-bottom: 16px; @media (min-width: 768px) { margin-bottom: 32px; }\r\n *\r\n * Spacing helper uses settings under 'spacing' key in theme:\r\n * @see src/containers/Theme/theme\r\n *\r\n * Plain values such as mt:2 will retrieve and apply spacing as per the breakpoints set out\r\n * in theme's spacing table\r\n *\r\n * Note the zero breakpoint ('xs') will be used as the base style (i.e. not wrapped in media query)\r\n *\r\n * Custom values can be used by adding 'px' to value.\r\n *\r\n * Custom values can be provided under breakpoint keys:\r\n *\r\n * Important: If specifying breakpoints in properties, you must\r\n * supply the lowest breakpoint ('xs') to ensure base styles are created.\r\n *\r\n * \r\n *\r\n * generates:\r\n * margin-top: 10px; @media (min-width: 576px) { margin-top: 20px; }\r\n *\r\n */\r\nexport default (props: any) => generateHelper(SUPPORTED_PROPS, props, { applyValue });\r\n","import { IPropList } from '../';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n alignSelf: ['align-self'],\r\n alignItems: ['align-items'],\r\n alignContent: ['align-content'],\r\n justifyContent: ['justify-content'],\r\n order: ['order'],\r\n flexDirection: ['flex-direction'],\r\n flexWrap: ['flex-wrap'],\r\n flex: ['flex'],\r\n flexGrow: ['flex-grow'],\r\n flexShrink: ['flex-shrink']\r\n};\r\n\r\n// Helper to ensure auto sizing works on IE11\r\nconst getValue = (props, property) => {\r\n const propValue = props ? props[property] : undefined;\r\n\r\n if (property === 'flex' && Number(propValue) === 1) {\r\n return '1 0 auto';\r\n }\r\n\r\n return propValue;\r\n};\r\n\r\nexport default (props) => generateHelper(SUPPORTED_PROPS, props, { getValue });\r\n","import { IPropList } from '../';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n display: ['display'],\r\n width: ['width'],\r\n w: ['width'],\r\n minWidth: ['min-width'],\r\n maxWidth: ['max-width'],\r\n height: ['height'],\r\n h: ['height'],\r\n minHeight: ['min-height'],\r\n maxHeight: ['max-height']\r\n};\r\n\r\nexport default (props) => generateHelper(SUPPORTED_PROPS, props);\r\n","import { IPropList } from '../';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n transition: ['transition']\r\n};\r\n\r\nconst getValue = (propValue, property, { motion }) => {\r\n const timing = propValue === true ? motion.timing.default : motion.timing[propValue];\r\n\r\n return `${timing} ${motion.ease}`;\r\n};\r\n\r\nexport default (props) => generateHelper(SUPPORTED_PROPS, props, { getValue });\r\n","import { IPropList } from '../';\r\nimport generateHelper from '../generateHelper';\r\n\r\nconst SUPPORTED_PROPS: IPropList = {\r\n textAlign: ['text-align']\r\n};\r\n\r\nexport default (props) => generateHelper(SUPPORTED_PROPS, props);\r\n","export * from './types';\r\nexport { default as color } from './color';\r\nexport { default as spacing } from './spacing';\r\nexport { default as flex } from './flex';\r\nexport { default as layout } from './layout';\r\nexport { default as transitions } from './transitions';\r\nexport { default as text } from './text';\r\n","import { css } from 'styled-components';\r\nimport { aspect } from '_utils/styles/layout';\r\nimport mq from '../mq';\r\n\r\n/*\r\n * create a container with fixed aspect ratio\r\n * using the padding-top aspect ratio trick to create a container\r\n */\r\n\r\nexport default (width: number = 100, height: number = 100) => css`\r\n ${aspect(width, height)}\r\n\r\n display: inline-block;\r\n\r\n svg,\r\n img {\r\n display: block;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n left: 0;\r\n top: 0;\r\n }\r\n`;\r\n\r\n// Encode symbols\r\nfunction urlEncode(string) {\r\n const encodingMap = [\r\n [/%/g, '%25'],\r\n [//g, '%3E'],\r\n [/ /g, '%20'],\r\n [/!/g, '%21'],\r\n [/\\*/g, '%2A'],\r\n [/'/g, '%27'],\r\n [/\"/g, '%22'],\r\n [/\\(/g, '%28'],\r\n [/\\)/g, '%29'],\r\n [/;/g, '%3B'],\r\n [/:/g, '%3A'],\r\n [/@/g, '%40'],\r\n [/&/g, '%26'],\r\n [/=/g, '%3D'],\r\n [/\\+/g, '%2B'],\r\n [/\\$/g, '%24'],\r\n [/,/g, '%2C'],\r\n [/\\//g, '%2F'],\r\n [/\\?/g, '%3F'],\r\n [/#/g, '%23'],\r\n [/\\[/g, '%5B'],\r\n [/\\]/g, '%5D']\r\n ];\r\n\r\n for (let i = 0; i < encodingMap.length; i++) {\r\n const entry = encodingMap[i];\r\n const search = entry[0];\r\n const replacement = entry[1];\r\n string = string.replace(search, replacement);\r\n }\r\n\r\n return string;\r\n}\r\n\r\n// Format the SVG as a URL\r\nexport function cssInlineSvg(svgString: string) {\r\n return `url(\"data:image/svg+xml,${urlEncode(svgString)}\")`;\r\n}\r\n\r\nexport const cssResponsiveSvg = (\r\n w: { xs: number; md: number },\r\n h: { xs: number; md: number }\r\n) => css`\r\n svg {\r\n width: ${w.xs}px;\r\n height: ${h.xs}px;\r\n ${mq('md')} {\r\n width: ${w.md}px;\r\n height: ${h.md}px;\r\n }\r\n }\r\n`;\r\n","// true if in dev\r\nexport const isDev: boolean = process.env.NODE_ENV === 'development';\r\n\r\nconst debugInDev = (fn) => (msg: any): void => {\r\n if (!fn || !isDev || !msg) {\r\n return;\r\n }\r\n\r\n if (typeof msg === 'function') {\r\n fn(msg());\r\n } else {\r\n fn(msg);\r\n }\r\n};\r\n\r\n// warn in dev only\r\nexport const logInDev = debugInDev(console.log);\r\n\r\n// log in dev only\r\nexport const warnInDev = debugInDev(console.warn);\r\n\r\n// error in dev only\r\nexport const errorInDev = debugInDev(console.error);\r\n\r\nexport function throwInDev(msg: any): void {\r\n if (!isDev || !msg) {\r\n return;\r\n }\r\n\r\n if (typeof msg === 'function') {\r\n throw new Error(msg());\r\n } else {\r\n throw new Error(msg);\r\n }\r\n}\r\n\r\nexport default isDev;\r\n","import React from 'react';\r\n\r\nexport default (importComponent) =>\r\n class extends React.Component {\r\n state = {\r\n component: null\r\n };\r\n\r\n async componentDidMount() {\r\n const { default: component } = await importComponent();\r\n\r\n this.setState({\r\n component: component\r\n });\r\n }\r\n\r\n render() {\r\n const { component: C } = this.state;\r\n\r\n return C ? : null;\r\n }\r\n };\r\n","import getTypeFromValue from '_utils/helpers/getTypeFromValue';\r\n\r\n// note! enum values match keys sent by server\r\nexport enum StatusType {\r\n book = 'book',\r\n underReview = 'under-review',\r\n open = 'open',\r\n inProgress = 'in-progress',\r\n planned = 'planned',\r\n closed = 'closed',\r\n completed = 'completed'\r\n}\r\n\r\nexport enum TimelineStatusType {\r\n underReview = 'under-review',\r\n openForFeedback = 'open-for-feedback',\r\n inProgress = 'in-progress',\r\n planned = 'planned',\r\n closed = 'closed',\r\n completed = 'completed',\r\n onExhibition = 'on-exhibition',\r\n reportingBack = 'reporting-back',\r\n open = 'open'\r\n}\r\n\r\nexport enum TimelineStageStatusType {\r\n completed = 'completed',\r\n inProgress = 'in-progress',\r\n notStarted = 'not-started'\r\n}\r\n\r\n/**\r\n * @param target either a string representation of a content type or an object containing a content type\r\n * @param key optional used to retrieve contentType value (if passing an object)\r\n */\r\nexport const getStatusType = (value: string | object, key: string = 'type'): StatusType => {\r\n return getTypeFromValue(StatusType, value, key);\r\n};\r\n\r\nexport const getTimelineStatusType = (value: string | object, key: string = 'type'): TimelineStatusType => {\r\n return getTypeFromValue(TimelineStatusType, value, key);\r\n};\r\n\r\nexport const getTimelineStageStatusType = (value: string | object, key: string = 'type'): TimelineStageStatusType => {\r\n return getTypeFromValue(TimelineStageStatusType, value, key);\r\n};","/* eslint-disable */\n// Do not edit this file, it is auto-generated at build time!\n// See scripts/bootstrap.js to modify the generation of this file.\nmodule.exports = {\n \"sitecoreApiKey\": \"{0994FF40-7336-4069-BEAD-E596A53562A1}\",\n \"sitecoreApiHost\": \"\",\n \"jssAppName\": \"cityofsydney\",\n \"defaultLanguage\": \"en\",\n \"graphQLEndpointPath\": \"/api/cityofsydney\",\n \"graphQLEndpoint\": \"/api/cityofsydney?sc_apikey={0994FF40-7336-4069-BEAD-E596A53562A1}\"\n};","import { get, post } from './genericService';\r\n\r\nexport function getPersonalInfo(success, failed) {\r\n return get('/api/v1/account/personal-info', success, failed);\r\n}\r\n\r\nexport function getListAddressByKeyword(countryISO, keyword, sessionApi, success, failed) {\r\n let urlPath = '/api/v1/account/address/suggestions?';\r\n if (keyword) urlPath += 'keyword=' + keyword + '&';\r\n if (sessionApi) urlPath += 'session=' + sessionApi + '&';\r\n if (countryISO) urlPath += 'countryISO=' + countryISO;\r\n return get(urlPath, success, failed);\r\n}\r\n\r\nexport function getAddressDetails(addressKey, countryISO, sessionApi, success, failed) {\r\n let urlPath = '/api/v1/account/address/details?';\r\n if (addressKey) urlPath += 'key=' + addressKey + '&';\r\n if (sessionApi) urlPath += 'session=' + sessionApi + '&';\r\n if (countryISO) urlPath += 'countryISO=' + countryISO;\r\n return get(urlPath, success, failed);\r\n}\r\n\r\nexport function getListCountry(success, failed) {\r\n return get('/api/v1/account/address/countries', success, failed);\r\n}\r\n\r\nexport function updateResidentialAddress(params, success, failed, config = {}) {\r\n return post('/api/v1/account/personal-info/update', params, success, failed, config);\r\n}\r\n\r\nexport function updatePostalAddress(params, success, failed, config = {}) {\r\n return post('/api/v1/account/personal-info/update', params, success, failed, config);\r\n}\r\n\r\nexport function updateNotificationReminder(params, success, failed, config = {}) {\r\n return post('/api/v1/account/personal-info/update', params, success, failed, config);\r\n}\r\n","var map = {\n\t\"./locale\": 319,\n\t\"./locale.js\": 319\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 597;","import React from 'react';\r\n\r\nexport type SvgProps = {\r\n children?: any;\r\n title?: string;\r\n titleId?: string;\r\n role?: string;\r\n ariaLabelledBy?: string;\r\n ariaHidden?: boolean;\r\n ariaLabel?: string;\r\n fill?: string;\r\n};\r\n\r\nconst Title = ({ id, title }) => {\r\n if (!id && !title) {\r\n return null;\r\n }\r\n\r\n if (!id) {\r\n return {title};\r\n }\r\n\r\n return {title};\r\n};\r\n\r\nconst defaultProps: any = {\r\n role: 'img'\r\n};\r\n\r\nconst Svg: React.FC = (props) => {\r\n const merged = {\r\n ...defaultProps,\r\n ...props\r\n };\r\n\r\n const {\r\n width,\r\n height,\r\n children,\r\n title,\r\n titleId,\r\n role,\r\n ariaLabelledBy,\r\n ariaHidden,\r\n ariaLabel\r\n } = merged;\r\n\r\n let svgProps = {\r\n ...(role && { role }),\r\n ...(ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }),\r\n ...(ariaHidden && { 'aria-hidden': ariaHidden }),\r\n ...(ariaLabel && { 'aria-label': ariaLabel })\r\n };\r\n\r\n let titleProps = {\r\n ...(title && { title }),\r\n ...(titleId && { id: titleId })\r\n };\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Svg;\r\n\r\nexport const withSvg = (width, height) =>\r\n function(WrappedComponent: React.ComponentType) {\r\n // Try to create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withSvg: React.FC = (props: T) => {\r\n return (\r\n \r\n );\r\n };\r\n\r\n withSvg.displayName = `withSvg(${displayName})`;\r\n\r\n return withSvg;\r\n };\r\n","import styled, { css } from 'styled-components';\r\nimport { Link } from 'react-router-dom';\r\nimport { spacing } from '_utils/props';\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport { linkWithoutVisited, heading_xxl, text_m, mq, heading_xs, svg } from '_utils/styles';\r\nimport { warnInDev } from '_utils/helpers/dev';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n color: ${({ theme }) => theme.colors.element.white};\r\n background-color: ${({ theme }) => theme.colors.background.tertiary};\r\n @media print {\r\n color: ${({ theme }) => theme.colors.element.black};\r\n background-color: ${({ theme }) => theme.colors.background.primary};\r\n }\r\n`;\r\n\r\nexport const CategoryLinkContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n\r\nexport const CategoryLink = styled(Link)`\r\n ${({ theme }) => linkWithoutVisited({ theme })}\r\n`;\r\n\r\nexport const Header = styled.h1`\r\n /* FIXME wierd extra fn call required\r\n somehow caused by importing above Container \r\n class into _utils/styles/section/index !? */\r\n ${() => heading_xxl}\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n\r\nexport const Blurb = styled.p`\r\n ${() => text_m}\r\n`;\r\n\r\nconst imageTypes = {\r\n publication: (theme) => css`\r\n ${spacing({ theme, pb: 8 })};\r\n\r\n ${mq('md')} {\r\n width: 100%;\r\n ${spacing({ theme, py: 8 })};\r\n }\r\n `,\r\n focus: (theme) => css`\r\n ${spacing({ theme, pb: 8 })};\r\n width: 50%;\r\n\r\n ${mq('sm')} {\r\n width: 100%;\r\n }\r\n\r\n ${mq('md')} {\r\n ${spacing({ theme, py: 8 })};\r\n }\r\n `,\r\n simple: (theme) => css`\r\n /* counter grid container to give 'full bleed' */\r\n ${mq.lessThan('md')} {\r\n ${({ theme }) => spacing({ mx: -theme.grid.margin.xs + 'px' })}\r\n }\r\n\r\n ${mq('md')} {\r\n width: calc(100% + ${({ theme }) => theme.grid.gutter.size.md}px);\r\n }\r\n\r\n ${mq('lg')} {\r\n width: 150%;\r\n }\r\n `\r\n};\r\n\r\nconst handleImageTypes = ({ theme, imageType }) => {\r\n if (typeof imageTypes[imageType] !== 'undefined') {\r\n return imageTypes[imageType](theme);\r\n }\r\n\r\n warnInDev(\r\n `The specifed imageType (${imageType}) hasn't been configure. Fallback back to simple imageType.`\r\n );\r\n\r\n return imageTypes['simple'](theme);\r\n};\r\n\r\nexport const ImageWrap = styled.div`\r\n /* Edit mode height blowing out, so need to keep it in check */\r\n max-height: ${({ editMode }) => (editMode ? '640px' : 'none')};\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n\r\n ${handleImageTypes}\r\n`;\r\n\r\nexport const AttributeRow = styled.div`\r\n & + & {\r\n margin-top: 10px;\r\n }\r\n`;\r\n\r\nexport const PrimaryCellItem = styled(Grid.Item)`\r\n @media print {\r\n ${({ theme }) => spacing({ theme, py: 2, px: 3 })};\r\n flex: 0 0 60%;\r\n max-width: 60%;\r\n }\r\n`;\r\nexport const SecondaryCellItem = styled(Grid.Item)`\r\n @media print {\r\n margin-left: 0;\r\n flex: 0 0 40%;\r\n max-width: 40%;\r\n }\r\n`;\r\n\r\nexport const SvgWrapper = styled.span`\r\n display: ${({ isInLine }) => (isInLine ? 'flex' : 'inline')};\r\n text-align: center;\r\n align-items: center;\r\n ${({ theme }) => spacing({ theme, ml: 1 })};\r\n ${svg(20, 20)}\r\n width: 20px;\r\n height: 20px;\r\n path {\r\n fill: ${({ isInLine }) => (isInLine ? '#4E5A5F' : '#FFF')};\r\n }\r\n ${mq.lessThan('md')} {\r\n width: ${({ isSlim }) => (isSlim ? '20px' : '18px')};\r\n height: ${({ isSlim }) => (isSlim ? '20px' : '18px')};\r\n }\r\n`;\r\n\r\nexport const CTAButton = styled.a`\r\n ${heading_xs()}\r\n display: flex !important;\r\n align-items: center;\r\n width: fit-content;\r\n padding: 6px 16px !important;\r\n border: none !important;\r\n\r\n ${mq.lessThan('md')} {\r\n line-height: 18px !important;\r\n padding: 7px 16px !important;\r\n margin-top: 24px !important;\r\n }\r\n\r\n margin-top: 48px !important;\r\n\r\n &:focus {\r\n outline: none;\r\n background: #005a0b;\r\n }\r\n\r\n &:focus:before {\r\n left: -4px !important;\r\n top: -4px !important;\r\n width: calc(100% + 8px) !important;\r\n height: calc(100% + 8px) !important;\r\n }\r\n`;","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst SvgApproved = (props) => (\r\n \r\n);\r\n\r\nSvgApproved.prototype = {\r\n color: PropTypes.string\r\n}\r\n\r\nexport default withSvg(20, 20)(SvgApproved);\r\n","import React from 'react';\r\nimport { compose } from 'ramda';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { withEditMode, withEditModeNotice } from '_containers/BaseComponent';\r\nimport { canUseDOM } from 'exenv';\r\nimport StyledContentRichText from './StyledContentRichText';\r\n\r\n/**\r\n * ContentRichText component.\r\n * Connected component for the display of the Rich Text Content.\r\n */\r\n\r\ntype RichTextProps = {\r\n field?: any;\r\n fields: {\r\n body: any;\r\n };\r\n history?: any;\r\n className?: string;\r\n editMode?: boolean;\r\n};\r\n\r\nconst handleClick = (history, e) => {\r\n if (!canUseDOM) {\r\n return;\r\n }\r\n const { target } = e;\r\n\r\n if (target.tagName.toLowerCase() === 'a') {\r\n // eslint-disable-next-line no-useless-escape\r\n var match = target.href.match(/^([^:\\/?#]+:)?(?:\\/\\/([^\\/?#]*))?([^?#]+)?(\\?[^#]*)?(#.*)?/);\r\n var isExternal =\r\n (typeof match[1] === 'string' &&\r\n match[1].length > 0 &&\r\n match[1].toLowerCase() !== window.location.protocol) ||\r\n (typeof match[2] === 'string' &&\r\n match[2].length > 0 &&\r\n match[2].replace(\r\n new RegExp(':(' + { 'http:': 80, 'https:': 443 }[window.location.protocol] + ')?$'),\r\n ''\r\n ) !== window.location.host);\r\n var isDownload = e.target.pathname.startsWith('/-/media/');\r\n\r\n var isSigninLink = e.target.pathname.startsWith('/oidc/signin');\r\n\r\n // Allow links to skip React Router's client side routing\r\n // Example: Login\r\n var skipClientSideRouting = e.target?.getAttribute(\"data-reload-document\") === \"true\";\r\n\r\n if (target.pathname !== '/' && !isExternal && !isDownload && !isSigninLink && !skipClientSideRouting) {\r\n e.preventDefault();\r\n\r\n if (target.hash) {\r\n // handle anchor on same page\r\n try {\r\n const currentPath = window.location.pathname;\r\n const currentHash = window.location.hash;\r\n\r\n if (\r\n target.pathname.toLowerCase() === currentPath.toLowerCase() &&\r\n target.hash.toLowerCase() === currentHash.toLowerCase()\r\n ) {\r\n // if link points to anchor on this page, scroll to it\r\n const id = target.hash.replace('#', '');\r\n const element = document.getElementById(id);\r\n if (element) {\r\n element.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n // exit without updating history\r\n return;\r\n }\r\n }\r\n } catch (err) {}\r\n }\r\n\r\n history?.push(target.pathname + (target.hash ? target.hash : ''));\r\n }\r\n }\r\n};\r\n\r\nconst MissingDataSource = compose(withEditModeNotice)(`div`);\r\n\r\nexport const ContentRichText: React.FC = ({\r\n field,\r\n fields,\r\n history,\r\n className = '',\r\n editMode\r\n}) => {\r\n const richTextField = typeof field === 'undefined' ? fields?.body : field;\r\n\r\n if (!richTextField) {\r\n if (editMode) {\r\n return (\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default compose(withRouter, withEditMode)(ContentRichText);\r\n","import React, { Fragment } from 'react';\r\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\r\nimport { normalize } from 'styled-normalize';\r\nimport {\r\n buttonReset,\r\n buttonColors,\r\n buttonSize,\r\n safeFocusRemoval,\r\n text_m,\r\n focusOutline,\r\n mq\r\n} from '_utils/styles/';\r\nimport { ChildrenPropTypes } from '_types';\r\nimport theme from './theme';\r\n\r\nexport * from './theme';\r\n\r\nconst GlobalStyles = createGlobalStyle`\r\n\r\n${normalize}\r\n\r\nhtml {\r\n box-sizing: border-box;\r\n height: 100%;\r\n overflow:auto;\r\n overflow-x: hidden;\r\n}\r\n\r\n* {\r\n &,\r\n &:before,\r\n &:after {\r\n box-sizing: inherit;\r\n }\r\n} \r\n\r\nbody {\r\n max-width: 100%;\r\n min-height: 100%; \r\n ${text_m}\r\n position: relative;\r\n margin: 0;\r\n color: ${theme.colors.element.primary};\r\n min-width: 300px;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n &.menu-active {\r\n height: 100%;\r\n }\r\n}\r\n\r\n#root {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 100vh;\r\n width: 100%;\r\n}\r\n\r\nimg,\r\npicture,\r\nsvg {\r\n vertical-align: middle;\r\n border-style: none;\r\n height: auto;\r\n max-width: 100%;\r\n}\r\n\r\nimg {\r\n\r\n &.lazyload,\r\n &.lazyloading {\r\n opacity: 0;\r\n }\r\n\r\n &.lazyloaded {\r\n \r\n ${mq('md')} {\r\n transition: opacity 0.4s linear; \r\n }\r\n\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.button-primary {\r\n ${buttonReset()}\r\n ${buttonSize(theme.buttons.default)}\r\n ${buttonColors(theme.colors.button.primary)}\r\n}\r\n\r\n.button-outline {\r\n ${buttonReset()}\r\n ${buttonSize(theme.buttons.default)}\r\n ${buttonColors(theme.colors.button.outline)}\r\n}\r\n\r\n.button-slim {\r\n ${buttonSize(theme.buttons.slim)}\r\n}\r\n\r\na:focus {\r\n ${safeFocusRemoval}\r\n ${focusOutline({ theme })}\r\n}\r\n.hide-on-print{\r\n @media print {\r\n display:none;\r\n }\r\n}\r\n@media print {\r\n * {\r\n background: transparent !important;\r\n color: black !important; // Black prints faster: h5bp.com/s\r\n color-adjust: economy;\r\n box-shadow: none !important;\r\n text-shadow: none !important;\r\n &::after {\r\n box-shadow: none !important;\r\n }\r\n }\r\n\r\n\r\n // Prevent page breaks in the middle of a blockquote or preformatted text block\r\n pre,\r\n blockquote {\r\n border: 1px solid black;\r\n page-break-inside: avoid;\r\n }\r\n\r\n tr,\r\n img { \r\n page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */\r\n page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */\r\n page-break-inside: avoid; /* or 'auto' */\r\n }\r\n img { max-width: 100% !important; }\r\n\r\n @page { margin: 0.5cm; }\r\n p,\r\n h2,\r\n h3 {\r\n orphans: 3;\r\n widows: 3;\r\n }\r\n\r\n // Avoid page breaks after a heading\r\n p,\r\n h2,\r\n h3 { page-break-after: avoid; }\r\n \r\n }\r\n`;\r\n\r\nexport default function Theme({ children }) {\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nTheme.propTypes = {\r\n children: ChildrenPropTypes\r\n};\r\n\r\n// global spacing styles TODO incorporate scale for breakpoints?\r\n// ${generateSpacingStyles('m', ['margin'])}\r\n// ${generateSpacingStyles('mx', ['margin-left', 'margin-right'])}\r\n// ${generateSpacingStyles('my', ['margin-top', 'margin-bottom'])}\r\n// ${generateSpacingStyles('mt', ['margin-top'])}\r\n// ${generateSpacingStyles('mb', ['margin-bottom'])}\r\n// ${generateSpacingStyles('ml', ['margin-left'])}\r\n// ${generateSpacingStyles('mr', ['margin-right'])}\r\n// ${generateSpacingStyles('p', ['padding'])}\r\n// ${generateSpacingStyles('px', ['padding-left', 'padding-right'])}\r\n// ${generateSpacingStyles('py', ['padding-top', 'padding-bottom'])}\r\n// ${generateSpacingStyles('pt', ['padding-top'])}\r\n// ${generateSpacingStyles('pb', ['padding-bottom'])}\r\n// ${generateSpacingStyles('pl', ['padding-left'])}\r\n// ${generateSpacingStyles('pr', ['padding-right'])}\r\n","import React, { Component, ReactNode, FC } from 'react';\r\n\r\ninterface Props {\r\n children: ReactNode;\r\n fallbackUI: FC;\r\n fallbackData: object;\r\n}\r\n\r\ninterface IErrorBoundary {\r\n hasError: boolean;\r\n}\r\n\r\nclass ErrorBoundary extends Component {\r\n public state: IErrorBoundary = {\r\n hasError: false\r\n };\r\n\r\n public static getDerivedStateFromError(error: Error): IErrorBoundary {\r\n return { hasError: true };\r\n }\r\n\r\n public render() {\r\n const FallbackUI = this.props.fallbackUI;\r\n if (!this.state.hasError) {\r\n return this.props.children;\r\n } else {\r\n return ;\r\n }\r\n }\r\n}\r\n\r\n// HOC wrapping the passed component\r\nexport default function withErrorBoundary(WrappedComponent: FC, FallbackUI: FC) {\r\n const withErrorBoundary = (props) => (\r\n \r\n \r\n \r\n );\r\n return withErrorBoundary;\r\n}\r\n","import styled, { css } from 'styled-components';\r\nimport { Link } from 'react-router-dom';\r\nimport { spacing } from '_utils/props';\r\nimport { linkWithoutVisited, heading_xxl, mq, text_xs } from '_utils/styles';\r\n\r\n//INFO: style for link\r\nexport const CategoryLinkContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n\r\nexport const CategoryLink = styled(Link)`\r\n ${({ theme }) => linkWithoutVisited({ theme })}\r\n`;\r\n\r\n//INFO: style for header & description\r\nexport const Header = styled.h1`\r\n /* FIXME wierd extra fn call required\r\n somehow caused by importing above Container \r\n class into _utils/styles/section/index !? */\r\n ${() => heading_xxl}\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n\r\nconst DashboardWelcomeCss = css`\r\n /* calculate to make welcome text center to the image */\r\n padding-top: calc((200px - 36px) / 2 - 76px);\r\n ${mq.between('md', 'lg')} {\r\n padding-top: calc((180px - 36px) / 2 - 76px);\r\n }\r\n ${mq.between('sm', 'md')} {\r\n padding-top: calc((140px - 28px) / 2 - 48px);\r\n }\r\n ${mq.lessThan('sm')} {\r\n padding-top: 0;\r\n }\r\n`;\r\n\r\nexport const Description = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n & > div > h3 {\r\n font-size: 20px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n\r\n ${mq('md')} {\r\n font-size: 32px;\r\n line-height: 36px;\r\n }\r\n }\r\n ${({ isDashboard }) => (isDashboard ? DashboardWelcomeCss : null)}\r\n`;\r\n\r\n// INFO: style for metadata\r\nexport const AttributeContainer = styled.div`\r\n color: white;\r\n div {\r\n font-size: 18px;\r\n ${mq.lessThan('md')} {\r\n font-size: 16px;\r\n }\r\n }\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })};\r\n`;\r\n\r\nexport const MetadataWrapper = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })};\r\n > div {\r\n line-height: 24px;\r\n ${mq('md')} {\r\n line-height: 28px;\r\n }\r\n }\r\n > div > svg {\r\n ${mq('md')} {\r\n width: 24px;\r\n height: 24px;\r\n margin-top: 0;\r\n }\r\n }\r\n`;\r\n\r\n// INFO: text and richtext style\r\nexport const TextWrapper = styled.div`\r\n ${text_xs}\r\n font-weight: 700;\r\n margin: 0;\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n text-transform: uppercase;\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n\r\nexport const AccountInfoText = styled.div`\r\n font-family: Helvetica Now Micro;\r\n font-style: normal;\r\n font-weight: normal;\r\n font-size: 11px;\r\n line-height: 16px;\r\n\r\n &.mb-5 {\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 5 })}\r\n\r\n ${mq('sm')} {\r\n margin-bottom: 0;\r\n }\r\n }\r\n`;\r\n\r\nexport const RichTextWrapper = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 3 })}\r\n`;\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgBin = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgBin);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgBookmark = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgBookmark);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgBriefcase = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgBriefcase);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgBusiness = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgBusiness);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCalculation = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCalculation);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCalendar = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCalendar);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCamera = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCamera);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCar = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCar);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCard = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCard);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCat = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCat);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgClock = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgClock);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCost = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCost);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgDog = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgDog);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgEmail = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgEmail);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgFile = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgFile);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgForm = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgForm);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgGroup = () => (\r\n \r\n);\r\n\r\nexport default withSvg(24, 24)(SvgGroup);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgInfo = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgInfo);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgLocationInfo = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgLocationInfo);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgMobile = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgMobile);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgNotepad = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgNotepad);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPermit = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPermit);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPhone = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPhone);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPin = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPin);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPropertyCertificate = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPropertyCertificate);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgReceipt = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgReceipt);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgReportIssue = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgReportIssue);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgStar = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgStar);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgTag = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgTag);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgTotalOutstanding = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgTotalOutstanding);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgTruck = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgTruck);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgUrl = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgUrl);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgUser = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgUser);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgView = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgView);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgWarningCircle = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgWarningCircle);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgWarningTriangle = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgWarningTriangle);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgZone = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgZone);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgRefresh = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgRefresh);\r\n","import * as React from 'react';\r\nimport { SVGProps } from 'react';\r\n\r\nconst SvgHome = (props: SVGProps) => (\r\n \r\n \r\n \r\n);\r\n\r\nexport default SvgHome;\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { mq } from '_utils/styles';\r\nimport color from '_containers/Theme/colors';\r\n\r\nexport const MetadataThemes = {\r\n default: {\r\n name: 'default',\r\n color: color.deepBlueTint75,\r\n background: 'transparent'\r\n },\r\n blueWhite: {\r\n name: 'blueWhite',\r\n color: color.white,\r\n background: color.blue\r\n }\r\n};\r\n\r\n// Styled Metadata\r\nexport const StyledMetadata = styled.div`\r\n display: flex;\r\n align-items: flex-start;\r\n font-size: 14px;\r\n line-height: 18px;\r\n color: ${({ metadataTheme }) => MetadataThemes[metadataTheme].color};\r\n background-color: ${({ metadataTheme }) => MetadataThemes[metadataTheme].background};\r\n\r\n ${mq('md')} {\r\n font-size: 16px;\r\n line-height: 22px;\r\n }\r\n\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n flex-shrink: 0;\r\n ${({ theme }) => spacing({ theme, mr: 1, mt: { md: '2px' } })};\r\n\r\n path {\r\n fill: ${({ metadataTheme }) => MetadataThemes[metadataTheme].color};\r\n }\r\n }\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n// Additional icon of metadata\r\nimport * as MetadataIcon from '_utils/icons/metadata';\r\nimport { StyledMetadata } from './StyledMetadata';\r\n\r\ntype MetadataProps = {\r\n metadataType: string;\r\n text: string;\r\n metadataTheme?: MetadataThemeConfig;\r\n className?: string;\r\n handleClick?: () => void;\r\n};\r\n\r\nexport enum MetadataThemeConfig {\r\n Default = 'default',\r\n BlueWhite = 'blueWhite'\r\n}\r\n\r\n// INFO: Metadata configs with icon and prefix suffix\r\nconst METADATA_CONFIGS = {\r\n default: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n details: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n name: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n ratepayer: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-ratepayer',\r\n suffix: ''\r\n },\r\n recipient: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-recipient',\r\n suffix: ''\r\n },\r\n 'care-for': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-carer-for',\r\n suffix: ''\r\n },\r\n type: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n duration: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n validity: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-validity',\r\n suffix: ''\r\n },\r\n fee: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'total-cost': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-total-cost',\r\n suffix: ''\r\n },\r\n due: {\r\n icon: ,\r\n prefix: '',\r\n suffix: 'dashboard-metadata-due'\r\n },\r\n outstanding: {\r\n icon: ,\r\n prefix: '',\r\n suffix: 'dashboard-metadata-outstanding'\r\n },\r\n permit: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n registration: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-registration',\r\n suffix: ''\r\n },\r\n 'permit-pack': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-permit-pack',\r\n suffix: ''\r\n },\r\n 'permit-number': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-permit-number',\r\n suffix: ''\r\n },\r\n date: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'missed-date': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-missed-date',\r\n suffix: ''\r\n },\r\n 'scheduled-date': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-scheduled-date',\r\n suffix: ''\r\n },\r\n 'last-trading-day': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-last-trading-day',\r\n suffix: ''\r\n },\r\n 'start-date': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-start-date',\r\n suffix: ''\r\n },\r\n 'expiry-date': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-expiry-date',\r\n suffix: ''\r\n },\r\n address: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'area-info': {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n description: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n document: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n gipa: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-gipa',\r\n suffix: ''\r\n },\r\n 'file-reference': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-file-reference',\r\n suffix: ''\r\n },\r\n mail: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n contact: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-contact',\r\n suffix: ''\r\n },\r\n business: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n tag: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n vehicle: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'parking-permit': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-parking-permit',\r\n suffix: ''\r\n },\r\n zone: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n area: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-area',\r\n suffix: ''\r\n },\r\n 'property-certificate': {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n issue: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'issue-remove': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-issue-remove',\r\n suffix: ''\r\n },\r\n 'issue-clean': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-issue-clean',\r\n suffix: ''\r\n },\r\n replace: {\r\n icon: ,\r\n prefix: 'Replace:',\r\n suffix: ''\r\n },\r\n info: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'certificate-number': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-certificate-number',\r\n suffix: ''\r\n },\r\n attention: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n collection: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n bin: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'bin-number': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-bin-number',\r\n suffix: ''\r\n },\r\n 'new-bin-size': {\r\n icon: ,\r\n prefix: 'dashboard-metadata-new-bin-size',\r\n suffix: ''\r\n },\r\n warning: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n escalated: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-escalated',\r\n suffix: ''\r\n },\r\n accident: {\r\n icon: ,\r\n prefix: 'dashboard-metadata-accident',\r\n suffix: ''\r\n },\r\n 'business-type': {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'total-outstanding': {\r\n icon: ,\r\n prefix: '',\r\n suffix: 'dashboard-metadata-total-outstanding'\r\n },\r\n view: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n mobile: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n url: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n bookmark: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n phone: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n camera: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n receipt: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n card: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n calculation: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n cat: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n dog: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n group: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n 'update-balance': {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n lot: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n },\r\n amount: {\r\n icon: ,\r\n prefix: '',\r\n suffix: ''\r\n }\r\n};\r\n\r\nconst Metadata: React.FC = ({\r\n metadataType,\r\n text,\r\n className,\r\n metadataTheme,\r\n handleClick\r\n}) => {\r\n const [t] = useTranslation();\r\n\r\n if (!metadataType || typeof metadataType !== 'string') return null;\r\n\r\n // INFO: Consistent type to compare string\r\n const type = metadataType.toLowerCase();\r\n\r\n return (\r\n \r\n {METADATA_CONFIGS[type] ? METADATA_CONFIGS[type]?.icon : METADATA_CONFIGS['default'].icon}\r\n {`${\r\n METADATA_CONFIGS[type]\r\n ? `${METADATA_CONFIGS[type]?.prefix ? `${t(METADATA_CONFIGS[type]?.prefix)} ` : ''}`\r\n : METADATA_CONFIGS['default'].prefix\r\n }${text}${\r\n METADATA_CONFIGS[type]\r\n ? `${METADATA_CONFIGS[type]?.suffix ? ` ${t(METADATA_CONFIGS[type]?.suffix)}` : ''}`\r\n : METADATA_CONFIGS['default'].suffix\r\n }`}\r\n \r\n );\r\n};\r\n\r\nMetadata.defaultProps = {\r\n metadataTheme: MetadataThemeConfig.Default\r\n};\r\n\r\nexport default Metadata;\r\n","import React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport {\r\n CategoryLink,\r\n CategoryLinkContainer,\r\n Header,\r\n Description,\r\n TextWrapper,\r\n AccountInfoText,\r\n MetadataWrapper,\r\n AttributeContainer\r\n} from './StyledBannerContent';\r\nimport ContentRichText from '_components/Corporate/ContentRichText';\r\nimport Metadata, { MetadataThemeConfig } from '_utils/components/CityConnect/Metadata';\r\n\r\nconst BannerContent = ({\r\n link,\r\n pageTitle,\r\n message,\r\n subheading,\r\n metadata,\r\n accountInfo,\r\n withImage,\r\n isDashboard\r\n}) => {\r\n return (\r\n <>\r\n {link?.jss?.value?.href && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {pageTitle && (\r\n \r\n )}\r\n {message?.value && (\r\n \r\n \r\n \r\n )}\r\n {subheading && (\r\n \r\n \r\n \r\n )}\r\n {metadata?.length > 0 && (\r\n \r\n {metadata.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n )}\r\n {accountInfo && (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default BannerContent;\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { mq } from '_utils/styles';\r\n\r\n// INFO: container style\r\nexport const Container = styled.div`\r\n width: 100%;\r\n min-height: 360px;\r\n color: ${({ theme }) => theme.colors.element.white};\r\n background-color: ${({ theme }) => theme.colors.background.tertiary};\r\n @media print {\r\n color: ${({ theme }) => theme.colors.element.black};\r\n background-color: ${({ theme }) => theme.colors.background.primary};\r\n }\r\n\r\n ${mq.between('md', 'lg')} {\r\n min-height: 340px;\r\n }\r\n\r\n ${mq.between('sm', 'md')} {\r\n min-height: 220px;\r\n }\r\n\r\n ${mq.lessThan('sm')} {\r\n min-height: 204px;\r\n }\r\n\r\n .Banner-container {\r\n ${({ theme }) => spacing({ theme, py: 8 })}\r\n }\r\n\r\n .hidden-xs {\r\n ${mq.lessThan('sm')} {\r\n display: none;\r\n }\r\n }\r\n`;\r\n\r\nexport const ImageWrap = styled.div`\r\n width: 100%;\r\n height: auto;\r\n & img {\r\n object-fit: contain;\r\n max-height: 200px;\r\n\r\n ${mq.between('md', 'lg')} {\r\n max-height: 180px;\r\n }\r\n\r\n ${mq.between('sm', 'md')} {\r\n max-height: 140px;\r\n }\r\n }\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport { compose } from 'ramda';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { withEditMode } from '_containers/BaseComponent';\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport BannerContent from './BannerContent';\r\nimport { Grid, ListingImage } from '_utils/components/Corporate';\r\nimport { getBannerData, getBannerDataById } from '_services/bannerService';\r\nimport { IBannerProps, IBannerResponse } from './definitions';\r\nimport { Container, ImageWrap } from './StyledBanner';\r\n\r\nconst DISPLAY_NAME = '{displayName}';\r\nconst LAST_UPDATED = '{lastUpdatedOnText}';\r\nconst LIST_PAGES_USING_ID = ['service-request', 'registration', 'property'];\r\nconst DASHBOARD_PAGE = 'dashboard';\r\n\r\nconst Banner: React.FC = ({ fields }) => {\r\n let { greeting, message, accountInformation, accountPending, link, pageName } =\r\n fields?.data?.datasource || {};\r\n\r\n const [bannerData, setBannerData] = useState();\r\n const [bannerImage, setBannerImage] = useState({ src: '' });\r\n const [pageTitle, setPageTitle] = useState({ value: '' });\r\n const [accountInfo, setAccountInfo] = useState({ value: '' });\r\n const [error, setError] = useState(false);\r\n const location = useLocation();\r\n const itemId = location.pathname.slice(location.pathname.lastIndexOf('/') + 1);\r\n\r\n useEffect(() => {\r\n setBannerData(undefined);\r\n // get Banner data\r\n if (LIST_PAGES_USING_ID.includes(pageName?.value.toLowerCase())) {\r\n getBannerDataById(\r\n pageName?.value,\r\n itemId,\r\n (data) => setBannerData(data.data.banner),\r\n (err) => setError(err)\r\n );\r\n } else {\r\n getBannerData(\r\n pageName?.value,\r\n (data) => setBannerData(data.data.banner),\r\n (err) => setError(err)\r\n );\r\n }\r\n }, [pageName]);\r\n\r\n useEffect(() => {\r\n if (error) {\r\n throw error;\r\n }\r\n }, [error]);\r\n\r\n useEffect(() => {\r\n if (pageTitle.value) {\r\n const titleSiteName = document.title\r\n .split('-')\r\n .pop()\r\n ?.trim();\r\n document.title = `${pageTitle.value} - ${titleSiteName}`;\r\n }\r\n }, [pageTitle.value]);\r\n\r\n useEffect(() => {\r\n if (fields && bannerData) {\r\n let selectedAcountInfo = bannerData.pageData?.lastUpdatedOnText\r\n ? {\r\n value: accountInformation.value.replace(\r\n LAST_UPDATED,\r\n bannerData.pageData.lastUpdatedOnText\r\n )\r\n }\r\n : accountPending;\r\n setAccountInfo(selectedAcountInfo);\r\n\r\n let selectedTitle = bannerData.pageData?.heading\r\n ? bannerData.pageData.heading\r\n : greeting.value.replace(DISPLAY_NAME, bannerData.displayName);\r\n setPageTitle({ value: selectedTitle });\r\n\r\n let selectedImage = bannerData.pageData?.image\r\n ? bannerData.pageData.image\r\n : fields.data.datasource.image?.jss.value;\r\n setBannerImage(selectedImage);\r\n }\r\n }, [bannerData]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {bannerImage?.src && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst BannerFallback: React.FC = ({ fields }) => {\r\n let { greeting, message, link, image } = fields?.data?.datasource || {};\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default compose(\r\n withSitecoreContext(),\r\n withEditMode\r\n)(withErrorBoundary(Banner, BannerFallback));\r\n","import { get } from './genericService';\r\n\r\nexport function getBannerData(page, success, failed) {\r\n if (!page) {\r\n return failed('missing page parameter for banner api.');\r\n }\r\n\r\n return get(`/api/v1/account/banner/${page}`, success, failed);\r\n}\r\n\r\nexport function getBannerDataById(page, id, success, failed) {\r\n if (!page) {\r\n return failed('missing page parameter for banner api.');\r\n }\r\n\r\n return get(`/api/v1/account/banner/${page}/${id || 'xxxx'}`, success, failed);\r\n}\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { color, heading_m, svg, mq } from '_utils/styles';\r\n\r\n// INFO: Card Wrapper\r\nexport const CardWrapper = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border: 1px solid ${color('all.deepBlueTint15')};\r\n border-radius: 8px;\r\n box-shadow: 0px 3px 12px 0px #00000012;\r\n cursor: pointer;\r\n\r\n ${mq.lessThan('sm')} {\r\n height: auto;\r\n }\r\n\r\n &:hover {\r\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n span:focus {\r\n outline: none;\r\n }\r\n\r\n &:focus-within,\r\n &:focus {\r\n border: 3px solid #4060FF;\r\n }\r\n`;\r\n\r\nexport const CardHeader = styled.div`\r\n ${({ theme }) => spacing({ theme, px: 2, py: 2 })};\r\n background-color: ${color('all.white')};\r\n height: calc(100% - 100px);\r\n border-bottom: 1px solid ${color('all.deepBlueTint15')};\r\n\r\n ${mq('md')} {\r\n height: calc(100% - 108px);\r\n }\r\n`;\r\n\r\nexport const ImageWrapper = styled.div`\r\n width: 48px;\r\n height: 48px;\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })}\r\n\r\n ${mq('md')} {\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 2 })}\r\n width: 64px;\r\n height: 64px;\r\n }\r\n`;\r\n\r\nexport const Header = styled.h2`\r\n /* FIXME wierd extra fn call required\r\n somehow caused by importing above Container \r\n class into _utils/styles/section/index !? */\r\n color: white;\r\n ${() => heading_m}\r\n`;\r\n\r\n// INFO: Card Content: Reference Number, Metadata and Category Link\r\nexport const CardContent = styled.div`\r\n ${({ theme }) => spacing({ theme, px: 2, py: 2 })};\r\n`;\r\n\r\nexport const ReferenceNumber = styled.div`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n text-transform: uppercase;\r\n color: ${color('all.deepBlueTint75')};\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n`;\r\n\r\nexport const MetadataWrapper = styled.div`\r\n &:not(:last-child) {\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })};\r\n }\r\n span {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n`;\r\n\r\nexport const ArrowWrapper = styled.span`\r\n ${svg(14, 14)}\r\n width: 16px;\r\n margin-left: 8px;\r\n display: inline-block;\r\n margin-right: 10px;\r\n\r\n path {\r\n fill: ${({ theme }) => theme.card.action};\r\n }\r\n`;\r\n\r\nexport const CategoryLink = styled.span`\r\n color: ${color('all.deepBlue')};\r\n word-break: break-word;\r\n white-space: break-spaces;\r\n font-size: 20px;\r\n\r\n ${CardWrapper}:hover & {\r\n text-decoration: underline;\r\n color: ${color('all.greenTint110')};\r\n }\r\n\r\n ${mq('md')} {\r\n font-size: 24px;\r\n }\r\n\r\n &:focus-visible {\r\n outline: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n }\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Text, Image } from '@sitecore-jss/sitecore-jss-react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport { Arrow } from '_utils/icons';\r\nimport Metadata, { MetadataThemeConfig } from '_utils/components/CityConnect/Metadata';\r\nimport {\r\n // INFO: Card Wrapper\r\n CardWrapper,\r\n CardHeader,\r\n ImageWrapper,\r\n Header,\r\n ArrowWrapper,\r\n // INFO: Card Content: Reference Number, Metadata and Category Link\r\n CardContent,\r\n ReferenceNumber,\r\n MetadataWrapper,\r\n CategoryLink\r\n} from './StyledPropertyCard';\r\n\r\nconst PropertyCard: React.FC = (data) => {\r\n let { link, metadata, image, referenceNumber, streetAddress, suburb } = data.data;\r\n const [t] = useTranslation();\r\n const history = useHistory();\r\n\r\n return (\r\n history.push(link)}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`${t(\r\n 'tab-rates-and-properties-reference-number'\r\n )} ${referenceNumber}`}\r\n {metadata?.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default PropertyCard;\r\n","import { spacing } from '_utils/props';\r\nimport { button, color, safeFocusRemoval, svg, text_s } from '_utils/styles';\r\nimport styled, { css, keyframes } from 'styled-components';\r\n\r\nexport const TextInfo = styled.p`\r\n ${text_s};\r\n text-align: center;\r\n margin-top: 0;\r\n ${({ theme }) => spacing({ theme, mb: 3 })};\r\n`;\r\n\r\nexport const Count = styled.span`\r\n font-weight: 700;\r\n font-family: 'Helvetica Now Text', Helvetica, sans-serif;\r\n`;\r\n\r\nexport const ShowMoreButton = styled.button`\r\n ${button('default', 'outline')}\r\n ${safeFocusRemoval}\r\n display: flex;\r\n align-items: center;\r\n\r\n body:not(.safe-focus-removal) &:focus {\r\n &:before {\r\n content: none;\r\n }\r\n }\r\n\r\n body:not(.safe-focus-removal) &:focus-visible {\r\n &:before {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 9999px;\r\n }\r\n }\r\n font-family: 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-weight: 700;\r\n`;\r\n\r\nconst rotate = keyframes`\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(359deg);\r\n }\r\n`;\r\n\r\nconst RotateCss = css`\r\n animation: ${rotate} 2s linear infinite;\r\n`;\r\n\r\nexport const RefreshIcon = styled.span`\r\n ${svg(20, 20)};\r\n width: 20px;\r\n margin-right: 10px;\r\n ${RotateCss}\r\n path {\r\n fill: ${color('all.greenTint110')};\r\n }\r\n\r\n ${ShowMoreButton}:hover & {\r\n path {\r\n fill: ${({ theme }) => theme.colors.button.outline.colorHover};\r\n }\r\n }\r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgRefresh = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgRefresh);\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { IShowMoreProps } from './definitions';\r\nimport { Count, ShowMoreButton, RefreshIcon, TextInfo, Wrapper } from './StyledShowMore';\r\nimport SvgRefresh from '_utils/icons/common/Refresh';\r\n\r\nconst ShowMore: React.FC = ({\r\n labelTransKeys,\r\n numbers,\r\n isLoading,\r\n handleClickShowMore,\r\n className\r\n}) => {\r\n const [t] = useTranslation();\r\n\r\n const isVisibleButton = Number(numbers.showingNumber) < Number(numbers.totalNumber);\r\n\r\n return (\r\n \r\n \r\n {t(labelTransKeys.showLabel)} {numbers.showingNumber}{' '}\r\n {t(labelTransKeys.ofLabel)} {numbers.totalNumber}{' '}\r\n {t(labelTransKeys.itemLabel)}\r\n \r\n {isVisibleButton && (\r\n \r\n {isLoading && (\r\n \r\n \r\n \r\n )}\r\n {t(labelTransKeys.showMoreLabel)}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ShowMore;\r\n","import { spacing } from '_utils/props';\r\nimport { color, mq, linkInText } from '_utils/styles';\r\nimport styled, { css, keyframes } from 'styled-components';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nexport const TextMessageWrapper = styled.div`\r\n background: #f9f9f9;\r\n border: 1px solid #9095A1;\r\n border-radius: 8px;\r\n ${({ theme }) => spacing({ theme, p: 3 })};\r\n`;\r\n\r\nconst NormalText = styled(RichText)`\r\n font-size: 16px;\r\n line-height: 24px;\r\n color: ${color('all.deepBlueTint75')};\r\n\r\n br {\r\n display: block;\r\n content: '';\r\n ${({ theme }) => spacing({ theme, mb: 2 })};\r\n }\r\n\r\n ${mq('md')} {\r\n font-size: 18px;\r\n line-height: 28px;\r\n\r\n br {\r\n display: block;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n content: '';\r\n }\r\n }\r\n\r\n ${linkInText()}\r\n\r\n .secondary_link {\r\n font-size: 14px;\r\n line-height: 18px;\r\n\r\n ${mq('md')} {\r\n font-size: 16px;\r\n line-height: 22px;\r\n }\r\n }\r\n\r\n .default_link {\r\n ${({ theme }) => spacing({ theme, ml: 1 })};\r\n }\r\n`;\r\n\r\nexport const Text = {\r\n NormalText\r\n};\r\n\r\nconst rotate = keyframes`\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(359deg);\r\n }\r\n`;\r\n\r\nconst RotateCss = css`\r\n animation: ${rotate} 2s linear infinite;\r\n`;\r\n\r\nexport const RefreshWrapper = styled.span`\r\n margin-left: 8px;\r\n display: inline-block;\r\n path {\r\n fill: ${({ theme }) => theme.card.action};\r\n }\r\n svg {\r\n ${RotateCss};\r\n overflow: visible;\r\n ${mq('md')} {\r\n width: 24px;\r\n }\r\n }\r\n`;\r\n","import React from 'react';\r\nimport { canUseDOM } from 'exenv';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Text, TextMessageWrapper, RefreshWrapper } from './StyledTextMessage';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Refresh } from '_utils/icons';\r\n\r\ntype TextMessageProps = {\r\n fields: any;\r\n loading?: boolean;\r\n className?: string;\r\n textOnly?: boolean;\r\n};\r\n\r\nconst TextMessage: React.FC = ({ fields, loading, className, textOnly }) => {\r\n const [t] = useTranslation();\r\n const history = useHistory();\r\n const value = fields?.data?.datasource?.message?.jss.value;\r\n\r\n const contentText = loading ? t('dashboard-loading-information') : value;\r\n\r\n const handleClick = (e) => {\r\n if (!canUseDOM) {\r\n return;\r\n }\r\n\r\n const { target } = e;\r\n const { href } = target;\r\n\r\n // exclude pay rates link from preventDefault\r\n if (target.className === 'pay-rates-link') {\r\n return;\r\n }\r\n\r\n // handle clink on a link\r\n if (target.tagName.toLowerCase() === 'a' && href) {\r\n try {\r\n const targetUrl = new URL(href);\r\n const { pathname, hash, search, origin } = targetUrl;\r\n const isExternalURL = origin !== window.location.origin;\r\n const isDownload = pathname.startsWith('/-/media/');\r\n // handle internal link\r\n if (!isExternalURL && !isDownload) {\r\n e.preventDefault();\r\n const { location } = window;\r\n // handle link is an anchor\r\n const isAnchor =\r\n origin.toLowerCase() === location.origin.toLowerCase() &&\r\n pathname.toLowerCase() === location.pathname.toLowerCase() &&\r\n search.toLowerCase() === location.search.toLowerCase() &&\r\n hash;\r\n if (isAnchor) {\r\n const id = hash.replace('#', '');\r\n const element = document.getElementById(id);\r\n if (element) {\r\n element.scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n return;\r\n }\r\n }\r\n // route to internal link\r\n history.push(pathname + search + hash);\r\n }\r\n } catch (error) {\r\n // link href fail to create new URL\r\n return;\r\n }\r\n }\r\n };\r\n\r\n const renderTextMessage = (displayText) => {\r\n return ;\r\n };\r\n\r\n if (loading) {\r\n return (\r\n \r\n {t('dashboard-loading-information')}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {contentText ? (\r\n textOnly ? (\r\n renderTextMessage(contentText)\r\n ) : (\r\n \r\n {renderTextMessage(contentText)}\r\n \r\n )\r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default TextMessage;\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgInfoOutline = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgInfoOutline);\r\n","import { color, heading_s, mq, text_s, linkInText } from '_utils/styles';\r\nimport styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nexport const TipBoxContainer = styled.div`\r\n border: 1px solid ${color('all.deepBlueTint45')};\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n ${text_s};\r\n margin: 0;\r\n\r\n ${({ theme }) => spacing({ theme, p: 3 })};\r\n\r\n ${mq.lessThan('md')} {\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n }\r\n p:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n p:last-child {\r\n margin-bottom: 0;\r\n }\r\n`;\r\n\r\nexport const IconContainer = styled.span`\r\n display: inline-flex;\r\n align-items: center;\r\n`;\r\n\r\nexport const TipTitle = styled.div`\r\n ${heading_s}\r\n color: ${color('all.deepBlueTint75')};\r\n ${({ theme }) => spacing({ theme, mt: 1 })};\r\n`;\r\n\r\nexport const InstructionContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 1 })};\r\n`;\r\n\r\nexport const Instruction = styled(RichText)`\r\n br{\r\n display: block;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n content: \"\";\r\n }\r\n \r\n ${linkInText()}\r\n color: ${color('all.deepBlueTint75')};\r\n`;\r\n\r\nexport const Example = styled.div`\r\n ${text_s};\r\n font-style: italic;\r\n ${({ theme }) => spacing({ theme, m: 0, mt: 1 })};\r\n`;\r\n\r\nexport const ExampleImageContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 1 })};\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport SvgInfoOutLine from '_utils/icons/announcement/InfoOutLine';\r\nimport {\r\n TipBoxContainer,\r\n IconContainer,\r\n TipTitle,\r\n InstructionContainer,\r\n Instruction,\r\n Example,\r\n ExampleImageContainer\r\n} from './StyledTipBox';\r\n\r\ninterface ITipBoxProps {\r\n tipTitle?: string;\r\n tipDescription?: string;\r\n isShowExample?: boolean;\r\n Image?: React.FC;\r\n}\r\n\r\nconst TipBox: React.FC = ({ tipTitle, tipDescription, isShowExample, Image }) => {\r\n const [t] = useTranslation();\r\n\r\n return tipTitle || tipDescription || Image ? (\r\n \r\n \r\n \r\n \r\n {tipTitle && {tipTitle}}\r\n {tipDescription && (\r\n \r\n \r\n \r\n )}\r\n {isShowExample && (\r\n <>\r\n {t('rates-calculator-example')}\r\n {Image && (\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n ) : null;\r\n};\r\n\r\nexport default TipBox;\r\n","import styled from 'styled-components';\r\nimport { mq } from '_utils/styles';\r\nimport { spacing } from '_utils/props';\r\n\r\n// INFO: Tab wrapper styling\r\nexport const PropertyTabWrapper = styled.div`\r\n width: 100%;\r\n\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ShowMoreContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ContentSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const UnAvailableSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;\r\n","import React, { useContext, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport PropertyCard from './PropertyCard';\r\nimport { DashboardTabsContext } from '..';\r\nimport ShowMore from '../../ShowMore';\r\nimport TextMessage from '../../TextMessage';\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport { PROPERTIES_TAB } from '../constant';\r\nimport TipBox from '_components/CityConnect/RatesCalculator/RatesInput/TipBox';\r\n\r\nimport { PropertyTabWrapper, ShowMoreContainer, ContentSection, UnAvailableSection } from './StyledPropertiesTab';\r\n\r\ntype RatesAndPropertiesProps = {\r\n tabData: any;\r\n};\r\n\r\nconst PropertiesTab: React.FC = ({ tabData }) => {\r\n const {\r\n activeTab,\r\n showMoreData,\r\n loading,\r\n error,\r\n description,\r\n notificationMsg,\r\n unavailableMessage,\r\n handleGetMoreItems\r\n } = useContext(DashboardTabsContext);\r\n\r\n useEffect(() => {\r\n if (error && activeTab === PROPERTIES_TAB) {\r\n throw error;\r\n }\r\n }, [error]);\r\n\r\n const formatTextMessageFields = (value: string) => {\r\n return {\r\n data: {\r\n datasource: {\r\n message: {\r\n jss: {\r\n value: value\r\n }\r\n }\r\n }\r\n }\r\n };\r\n };\r\n\r\n if (unavailableMessage) {\r\n return <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n \r\n {/* Unavailable message */}\r\n \r\n \r\n \r\n }\r\n\r\n return (\r\n <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n {/* main content */}\r\n {tabData && tabData.length > 0 ? (\r\n \r\n \r\n \r\n {tabData.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n {/* show more */}\r\n {showMoreData.nextPage && (\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nconst PropertiesTabFallback: React.FC = () => {\r\n const [t] = useTranslation();\r\n const errorMessage = {\r\n data: {\r\n datasource: {\r\n message: { jss: { value: t('dashboard-information-is-currently-unavailable') } }\r\n }\r\n }\r\n };\r\n\r\n return ;\r\n};\r\n\r\nexport default withErrorBoundary(PropertiesTab, PropertiesTabFallback);\r\n","export const SERVICE_REQUESTS_TAB = 'service-requests';\r\nexport const PROPERTIES_TAB = 'properties';\r\nexport const PROPERTY_CERTIFICATES_TAB = 'property-certificates';\r\nexport const REGISTRATIONS_TAB = 'registrations';\r\nexport const CONSULTATIONS_TAB = 'consultations';\r\n\r\nexport const ALL_TIME = 'all-time';\r\nexport const LAST_30_DAYS = 'last-30-days';\r\nexport const DEFAULT_SHOW_REQUEST = '5';\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgDownload = () => (\r\n \r\n);\r\n\r\nexport default withSvg(14, 15)(SvgDownload);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgFile = () => (\r\n <>\r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(14, 17)(SvgFile);\r\n","import { fetchApi, get } from './genericService';\r\n\r\nexport const getDashboardTabContentData = (endPoint, config) => {\r\n let tabEndPoint;\r\n if (typeof endPoint === 'string') {\r\n tabEndPoint = endPoint;\r\n } else if (typeof endPoint === 'object') {\r\n const { activeTab, activeFilter } = endPoint;\r\n tabEndPoint = '/api/v1/account/dashboard/tabs/' + activeTab;\r\n if (activeFilter) tabEndPoint += '/' + activeFilter;\r\n }\r\n\r\n return fetchApi(tabEndPoint, config);\r\n};\r\n\r\nexport function getDashboardTabsNavData(success, failed) {\r\n return get('/api/v1/account/dashboard/tabs', success, failed);\r\n}\r\n\r\nexport function getUpdatedBalance(link, success, failed) {\r\n // '/api/v1/account/property-certificates/:certificateId'\r\n return get(link, success, failed);\r\n}\r\n","import { BackgroundColors } from '_utils/components/Corporate/Section';\r\nimport { spacing } from '_utils/props';\r\nimport { color, mq, buttonReset, safeFocusRemoval, focusOutline } from '_utils/styles';\r\nimport { handleSectionTheme } from '_utils/styles/section';\r\nimport styled, { css, keyframes } from 'styled-components';\r\n\r\n// INFO: Certificate Section\r\nexport const CerUpdatedTime = styled.span`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n white-space: nowrap;\r\n flex-grow: 1;\r\n color: ${color('all.deepBlueTint75')};\r\n`;\r\n\r\nconst rotate = keyframes`\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(359deg);\r\n }\r\n`;\r\n\r\nconst RotateCss = css`\r\n animation: ${rotate} 2s linear infinite;\r\n`;\r\n\r\nconst UpdateActiveCss = css`\r\n .cer-update-balance {\r\n span {\r\n color: #6009a0;\r\n text-decoration: underline;\r\n }\r\n\r\n svg {\r\n ${RotateCss}\r\n overflow: visible;\r\n }\r\n }\r\n`;\r\n\r\nconst UpdateDeactiveCss = css`\r\n .cer-update-balance {\r\n span {\r\n text-decoration: underline;\r\n }\r\n }\r\n`;\r\n\r\nexport const CertificateActions = styled.div`\r\n display: flex;\r\n width: auto;\r\n justify-content: ${({ isUpdateBalance }) => (isUpdateBalance ? 'space-between' : 'flex-end')};\r\n flex-grow: 1;\r\n align-items: center;\r\n\r\n ${mq('md')} {\r\n justify-content: flex-end;\r\n }\r\n\r\n .cer-update-balance {\r\n svg {\r\n path {\r\n fill: #188838;\r\n }\r\n }\r\n\r\n span:hover {\r\n color: #188838;\r\n text-decoration: none;\r\n }\r\n\r\n span:focus {\r\n color: #041c2c;\r\n border: 2px solid #8ca0ff;\r\n }\r\n }\r\n\r\n ${({ loading }) => (loading ? UpdateActiveCss : UpdateDeactiveCss)}\r\n`;\r\n\r\nexport const UpdateBalance = styled.button`\r\n ${buttonReset}\r\n &:focus {\r\n ${safeFocusRemoval}\r\n ${focusOutline}\r\n }\r\n\r\n ${mq('md')} {\r\n ${({ theme }) => spacing({ theme, mr: 2 })};\r\n }\r\n`;\r\n\r\nexport const DownloadWrapper = styled.button`\r\n display: flex;\r\n flex-shrink: 0;\r\n align-items: center;\r\n cursor: pointer;\r\n ${({ theme }) => spacing({ theme, ml: '4px' })};\r\n\r\n svg:first-child {\r\n margin-right: 7px;\r\n }\r\n\r\n svg:last-child:hover {\r\n path {\r\n fill: #1b5928;\r\n }\r\n }\r\n\r\n /* &:focus {\r\n border: 2px solid #8ca0ff;\r\n } */\r\n ${buttonReset}\r\n &:focus {\r\n ${safeFocusRemoval}\r\n ${focusOutline}\r\n }\r\n`;\r\n\r\nconst DotCss = css`\r\n content: '.';\r\n position: relative;\r\n font-size: 18px;\r\n ${({ theme }) => spacing({ theme, mx: 1 })};\r\n`;\r\n\r\nexport const CertificateBottom = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n ${CerUpdatedTime} {\r\n ${({ theme }) => spacing({ theme, my: 1 })};\r\n }\r\n\r\n ${mq('md')} {\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n ${CerUpdatedTime}::before {\r\n ${DotCss}\r\n bottom: 3px;\r\n }\r\n\r\n ${CerUpdatedTime} {\r\n ${({ theme }) => spacing({ theme, my: 0, mt: '1px' })};\r\n }\r\n }\r\n`;\r\n\r\nexport const Certificate = styled.div`\r\n display: flex;\r\n flex-direction: ${({ isAmount }) => (isAmount ? 'column' : 'row')};\r\n ${CertificateBottom} {\r\n ${({ theme, isAmount }) => (isAmount ? spacing({ theme, mt: 1 }) : '')};\r\n }\r\n flex-wrap: wrap;\r\n ${({ theme }) => spacing({ theme, py: 1 })};\r\n\r\n ${mq('lg')} {\r\n flex-direction: row;\r\n align-items: center;\r\n ${CertificateBottom} {\r\n ${({ theme }) => spacing({ theme, mt: 0 })};\r\n }\r\n ${CertificateBottom}:before {\r\n ${({ isAmount }) => (isAmount ? DotCss : '')};\r\n bottom: 4px;\r\n }\r\n }\r\n\r\n .certificate {\r\n svg {\r\n padding-left: 1.3px;\r\n }\r\n }\r\n`;\r\n\r\n// INFO: Card Wrapper\r\nexport const CardWrapper = styled.div`\r\n width: 100%;\r\n border: 1px solid ${color('all.deepBlueTint15')};\r\n border-radius: 8px;\r\n overflow: hidden;\r\n ${({ theme }) => spacing({ theme, mb: 4 })};\r\n box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.07);\r\n\r\n &:focus {\r\n border: 3px solid #8ca0ff;\r\n }\r\n`;\r\n\r\nexport const CardSection = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n ${({ theme }) => spacing({ theme, p: 3 })};\r\n ${() => handleSectionTheme(BackgroundColors['white'])};\r\n`;\r\n\r\n// INFO: Main Information\r\n\r\nexport const TitleWrapper = styled.div`\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n`;\r\n\r\nconst Title = styled.a`\r\n font-weight: bold;\r\n font-size: 18px;\r\n line-height: 24px;\r\n margin-right: 13px;\r\n\r\n &:hover {\r\n cursor: text;\r\n }\r\n\r\n ${mq('md')} {\r\n font-size: 24px;\r\n line-height: 28px;\r\n }\r\n`;\r\n\r\nconst StyledDot = `\r\n &:not(:last-child) {\r\n position: relative;\r\n margin-right: 25px;\r\n margin-bottom: 8px;\r\n\r\n ${mq('md')} {\r\n ${({ theme }) => spacing({ theme, mb: 0 })};\r\n }\r\n\r\n &:after {\r\n ${mq('md')} {\r\n content: '.';\r\n font-weight: bold;\r\n position: absolute;\r\n top: -5px;\r\n right: -12.5px;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst Address = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n\r\n .request-type-card__description {\r\n ${StyledDot}\r\n }\r\n`;\r\n\r\nconst SubmissionTime = styled.span`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n color: ${color('all.deepBlueTint75')};\r\n`;\r\n\r\nexport const MainInformation = {\r\n Title,\r\n Address,\r\n SubmissionTime\r\n};\r\n\r\n// INFO: Sub-items Information\r\nexport const SubItemWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n ${({ theme }) => spacing({ theme, mt: 2 })};\r\n`;\r\n\r\nexport const SubItem = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n background: #f9f9f9;\r\n border-radius: 8px;\r\n ${({ theme }) => spacing({ theme, p: 1 })};\r\n\r\n &:not(:last-child) {\r\n ${({ theme }) => spacing({ theme, mb: 2 })};\r\n }\r\n\r\n ${mq('md')} {\r\n ${({ theme }) => spacing({ theme, p: 2 })};\r\n }\r\n`;\r\n\r\nexport const SubItemTitle = styled.div`\r\n font-size: 16px;\r\n line-height: 20px;\r\n font-weight: bold;\r\n\r\n ${mq('md')} {\r\n font-size: 18px;\r\n line-height: 24px;\r\n }\r\n`;\r\n\r\nexport const SubItemsBody = styled.div`\r\n ${Certificate}:not(:last-child) {\r\n border-bottom: 1px dashed #dddee1;\r\n }\r\n`;\r\n\r\nexport const SubItemHeader = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n ${SubItemTitle}:first-child {\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n }\r\n\r\n ${mq('md')} {\r\n flex-direction: row;\r\n ${SubItemTitle}:first-child {\r\n ${({ theme }) => spacing({ theme, mb: 0 })};\r\n }\r\n }\r\n`;\r\n","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport Metadata, { MetadataThemeConfig } from '_utils/components/CityConnect/Metadata';\r\nimport { logInDev } from '_utils/helpers/dev';\r\nimport NavItem from '_components/Corporate/NavItem';\r\nimport SvgDownload from '_utils/icons/PropertyCertificateCard/Download';\r\nimport SvgFile from '_utils/icons/PropertyCertificateCard/File';\r\nimport { IPropertyCertificateCardProps, ICertificate, ISubItemCertificate } from './definitions';\r\nimport { getUpdatedBalance } from '_services/dashboardTabsService';\r\nimport {\r\n CardSection,\r\n CardWrapper,\r\n Certificate,\r\n CertificateActions,\r\n UpdateBalance,\r\n CertificateBottom,\r\n CerUpdatedTime,\r\n DownloadWrapper,\r\n MainInformation,\r\n SubItem,\r\n SubItemHeader,\r\n SubItemsBody,\r\n SubItemTitle,\r\n SubItemWrapper,\r\n TitleWrapper\r\n} from './styledPropertyCertificateCard';\r\n\r\nconst SubItemCertificate: React.FC = ({ certificateData }) => {\r\n const [t] = useTranslation();\r\n const [loading, setLoading] = useState(false);\r\n const [certificate, setCertificate] = useState(certificateData);\r\n const type = certificate?.type;\r\n const amount = certificate?.outstandingAmount;\r\n const updated = certificate?.lastUpdated;\r\n const updateBalanceApi = certificate?.updateBalanceLink;\r\n const downloadCerApi = certificate?.downloadCertificateLink;\r\n const isValidCertificate = type || amount || updated || downloadCerApi ? true : false;\r\n\r\n const handleClickUpdate = (updateBalanceApi) => {\r\n setLoading(true);\r\n //call api\r\n getUpdatedBalance(updateBalanceApi, updateBalanceSuccess, (res) => {\r\n setLoading(false);\r\n logInDev(res);\r\n });\r\n };\r\n\r\n const updateBalanceSuccess = (res) => {\r\n setLoading(false);\r\n const responseData = res?.data?.s603Certificate;\r\n setCertificate({\r\n ...certificate,\r\n lastUpdated: responseData?.lastUpdatedOn,\r\n outstandingAmount: responseData?.outstandingAmount\r\n });\r\n };\r\n\r\n const handleClickDownload = (downloadCerApi) => {\r\n //call api\r\n logInDev(`Call api: ${downloadCerApi}`);\r\n };\r\n\r\n const renderCertificateDownload = (downloadCerApi) => {\r\n return (\r\n downloadCerApi && (\r\n handleClickDownload(downloadCerApi)}\r\n name=\"download-button\"\r\n role=\"button\"\r\n aria-label=\"Download file\"\r\n >\r\n \r\n \r\n \r\n )\r\n );\r\n };\r\n\r\n const renderCertificateActions = (updateBalanceApi, downloadCerApi) => {\r\n return (\r\n \r\n {updateBalanceApi && (\r\n \r\n handleClickUpdate(updateBalanceApi)}\r\n />\r\n \r\n )}\r\n {renderCertificateDownload(downloadCerApi)}\r\n \r\n );\r\n };\r\n\r\n return (\r\n isValidCertificate && (\r\n \r\n {type && (\r\n \r\n )}\r\n \r\n {amount && (\r\n \r\n )}\r\n {updated && (\r\n \r\n {t('tab-property-certificates-updated')} {updated}\r\n \r\n )}\r\n {renderCertificateActions(updateBalanceApi, downloadCerApi)}\r\n \r\n \r\n )\r\n );\r\n};\r\n\r\nconst PropertyCertificateCard: React.FC = ({ data, className }) => {\r\n const [t] = useTranslation();\r\n const subItems = data?.subitems;\r\n\r\n const renderSubItems = () => {\r\n return (\r\n !!subItems?.length &&\r\n subItems?.map((item, idxSubItem) => (\r\n \r\n \r\n {item.address}\r\n \r\n \r\n {item?.certificates?.map((certificate, idxCer) => (\r\n \r\n ))}\r\n \r\n \r\n ))\r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {t('tab-property-certificates-reference')}\r\n {data.referenceNumber}\r\n \r\n \r\n \r\n {t('tab-property-certificates-submitted')} {data.submitted}\r\n \r\n\r\n {renderSubItems()}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default PropertyCertificateCard;\r\n","import { spacing } from '_utils/props';\r\nimport styled from 'styled-components';\r\n\r\nexport const CertificateOrderWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const MainContent = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;\r\n\r\nexport const ShowMoreContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ContentSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const UnAvailableSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;","import styled, { css } from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { text_m } from '_utils/styles';\r\n\r\nconst ActiveCss = css`\r\n color: ${({ theme }) => theme.colors.all.deepBlue};\r\n font-weight: 700;\r\n border-bottom: 4px solid;\r\n border-bottom-color: ${({ theme }) => theme.colors.all.green};\r\n`;\r\n\r\nexport const FilterItem = styled.p`\r\n cursor: pointer;\r\n ${text_m};\r\n margin: 0;\r\n ${({ theme }) => spacing({ theme, mr: 3, pb: 2 })};\r\n transition: all 0.2s ease-in;\r\n\r\n &:hover {\r\n color: ${({ theme }) => theme.colors.all.greenTint110};\r\n }\r\n\r\n &.active {\r\n ${ActiveCss}\r\n }\r\n\r\n &:focus-visible {\r\n outline: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n }\r\n`;\r\n\r\nexport const FilterWrapper = styled.div`\r\n width: 100%;\r\n display: flex;\r\n border-bottom: 1px solid #dddee1;\r\n color: ${({ theme }) => theme.colors.all.deepBlueTint75};\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { IFilter, IFilterTabsProps } from './definitions';\r\nimport { FilterItem, FilterWrapper } from './StyledFilterTabs';\r\n\r\nconst FilterTabs: React.FC = ({\r\n filters,\r\n currentFilter,\r\n changeFilter,\r\n className\r\n}) => {\r\n const [t] = useTranslation();\r\n\r\n const renderFilterItem = filters?.map((item: IFilter, idx: number) => {\r\n const { type, link } = item;\r\n const filterName = `tab-${type}`;\r\n const filterByText = t('tab-requests-and-applications-filter-by');\r\n\r\n const handleEnter = (e) => {\r\n if (e.key === 'Enter') {\r\n changeFilter(link, type);\r\n }\r\n };\r\n\r\n return (\r\n changeFilter(link, type)}\r\n onKeyPress={(e) => handleEnter(e)}\r\n >\r\n {t(filterName)}\r\n \r\n );\r\n });\r\n\r\n return {renderFilterItem};\r\n};\r\n\r\nexport default FilterTabs;\r\n","import React, { useContext, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport PropertyCertificateCard from './PropertyCertificateCard';\r\nimport {\r\n CertificateOrderWrapper,\r\n MainContent,\r\n ShowMoreContainer,\r\n ContentSection,\r\n UnAvailableSection\r\n} from './styledPropertyCertificatesTab';\r\nimport FilterTabs from '../FilterTabs';\r\nimport { DashboardTabsContext } from '..';\r\nimport ShowMore from '../../ShowMore';\r\nimport TextMessage from '../../TextMessage';\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport { PROPERTY_CERTIFICATES_TAB } from '../constant';\r\nimport TipBox from '_components/CityConnect/RatesCalculator/RatesInput/TipBox';\r\n\r\ninterface IPropertyCertificatesTabProps {\r\n tabData: any;\r\n filters: any;\r\n}\r\n\r\nconst PropertyCertificatesTab: React.FC = ({ tabData, filters }) => {\r\n const {\r\n activeTab,\r\n currentFilter,\r\n changeFilter,\r\n showMoreData,\r\n loading,\r\n error,\r\n description,\r\n notificationMsg,\r\n unavailableMessage,\r\n handleGetMoreItems\r\n } = useContext(DashboardTabsContext);\r\n\r\n useEffect(() => {\r\n if (error && activeTab === PROPERTY_CERTIFICATES_TAB) {\r\n throw error;\r\n }\r\n }, [error]);\r\n\r\n const formatTextMessageFields = (value: string) => {\r\n return {\r\n data: {\r\n datasource: {\r\n message: {\r\n jss: {\r\n value: value\r\n }\r\n }\r\n }\r\n }\r\n };\r\n };\r\n\r\n if (unavailableMessage) {\r\n return <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n \r\n {/* Unavailable message */}\r\n \r\n \r\n \r\n }\r\n\r\n return (\r\n <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n {/* filters */}\r\n {filters.length > 0 && (\r\n \r\n \r\n \r\n )}\r\n {/* main content */}\r\n \r\n {tabData && tabData.length > 0 ? (\r\n <>\r\n \r\n {tabData?.map((data, idx) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n {/* show more */}\r\n {showMoreData.nextPage && (\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nconst PropertyCertificatesTabFallback: React.FC = () => {\r\n const [t] = useTranslation();\r\n const errorMessage = {\r\n data: {\r\n datasource: {\r\n message: { jss: { value: t('dashboard-information-is-currently-unavailable') } }\r\n }\r\n }\r\n };\r\n\r\n return ;\r\n};\r\n\r\nexport default withErrorBoundary(PropertyCertificatesTab, PropertyCertificatesTabFallback);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgDanger = () => (\r\n \r\n);\r\n\r\nexport default withSvg(18, 18)(SvgDanger);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgCollection = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgCollection);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgDeclined = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgDeclined);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgInProgress = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgInProgress);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPaymentCard = () => (\r\n <>\r\n \r\n \r\n \r\n);\r\n\r\nexport default withSvg(18, 18)(SvgPaymentCard);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgPencil = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgPencil);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgScheduled = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgScheduled);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgResidential = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgResidential);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgMail = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgMail);\r\n","import React from 'react';\r\nimport { withSvg } from '../Svg';\r\n\r\nconst SvgProcessing = () => (\r\n \r\n);\r\n\r\nexport default withSvg(20, 20)(SvgProcessing);\r\n","import React from 'react';\r\n\r\nconst SvgRecycle = () => (\r\n \r\n);\r\n\r\nexport default SvgRecycle;\r\n","import { spacing } from '_utils/props';\r\nimport { svg } from '_utils/styles';\r\nimport styled from 'styled-components';\r\n\r\nexport const StyledStatusTag = styled.div`\r\n display: flex;\r\n flex: none;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 4px 6px;\r\n border-radius: 4px;\r\n width: fit-content;\r\n\r\n background: ${({ type }) => type.backgroundColor};\r\n color: ${({ type }) => type.textColor};\r\n\r\n svg {\r\n path {\r\n fill: ${({ type }) => type.textColor};\r\n }\r\n }\r\n`;\r\n\r\nexport const Icon = styled.span`\r\n ${svg(20, 20)};\r\n width: 20px;\r\n ${({ theme }) => spacing({ theme, mr: 1 })}\r\n`;\r\n\r\nexport const Text = styled.div`\r\n font-weight: bold;\r\n font-size: 14px;\r\n line-height: 18px;\r\n`;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n// INFO: status tag icon\r\nimport SvgDanger from '_utils/icons/Danger';\r\nimport SvgApproved from '_utils/icons/StatusTag/Approved';\r\nimport SvgCollection from '_utils/icons/StatusTag/Collection';\r\nimport SvgDeclined from '_utils/icons/common/Declined';\r\nimport SvgInProgress from '_utils/icons/StatusTag/InProgress';\r\nimport SvgPaymentCard from '_utils/icons/ScheduledPayments/PaymentCard';\r\nimport SvgPencil from '_utils/icons/StatusTag/Pencil';\r\nimport SvgSchedule from '_utils/icons/StatusTag/Schedule';\r\nimport SvgResidential from '_utils/icons/StatusTag/Residential';\r\nimport SvgWarningTriangle from '_utils/icons/metadata/WarningTriangle';\r\nimport SvgMail from '_utils/icons/StatusTag/Mail';\r\nimport SvgPaymentProcessing from '_utils/icons/PaymentsDueList/Processing';\r\nimport SvgRecycle from '_utils/icons/ScheduledPayments/Recycle';\r\nimport { Icon, StyledStatusTag, Text } from './StyledStatusTag';\r\nimport { UnderReview, OpenForFeedback, InProgress, ConsultationsPlanned, Closed, OnExhibition, ReportingBack } from \"../../../icons\";\r\n\r\ntype StatusTagProps = {\r\n text: string;\r\n displayStatusText?: string;\r\n isConsultation?: boolean;\r\n};\r\n\r\nconst STATUS_COLOR = {\r\n DEFAULT: '#F9F9F9',\r\n BLACK: '#4E5A5F',\r\n YELLOW: '#FEFADD',\r\n ORANGE: '#FFE6D7',\r\n LIGHT_PURPLE: '#F8DDE6',\r\n BLUE: '#E0F6FD',\r\n PURPLE: '#E8DAF1',\r\n GREEN: '#DAF5E4',\r\n COMPLETED: '#F0F1F2',\r\n RED: '#FFD8D9',\r\n TRANSPARENT: 'transparent'\r\n};\r\n\r\nconst TEXT_COLOR = {\r\n DEFAULT: '#4E5A5F',\r\n WHITE: '#FFF',\r\n YELLOW: '#7A570E',\r\n ORANGE: '#B23914',\r\n LIGHT_PURPLE: '#821846',\r\n BLUE: '#005084',\r\n PURPLE: '#37266A',\r\n GREEN: '#157932',\r\n GREEN_TEXT: '#188838',\r\n RED: '#B00020',\r\n PINK: '#DA1E5B',\r\n};\r\n\r\nexport const STATUS_CONFIGS = {\r\n draft: {\r\n text: 'draft',\r\n color: TEXT_COLOR.DEFAULT,\r\n backgroundColor: STATUS_COLOR.DEFAULT,\r\n icon: \r\n },\r\n expired: {\r\n text: 'expired',\r\n color: TEXT_COLOR.WHITE,\r\n backgroundColor: STATUS_COLOR.BLACK,\r\n icon: \r\n },\r\n cancelled: {\r\n text: 'cancelled',\r\n color: TEXT_COLOR.WHITE,\r\n backgroundColor: STATUS_COLOR.BLACK,\r\n icon: \r\n },\r\n closed: {\r\n text: 'closed',\r\n color: TEXT_COLOR.WHITE,\r\n backgroundColor: STATUS_COLOR.BLACK,\r\n icon: \r\n },\r\n duplicate: {\r\n text: 'duplicate',\r\n color: TEXT_COLOR.WHITE,\r\n backgroundColor: STATUS_COLOR.BLACK,\r\n icon: \r\n },\r\n submitted: {\r\n text: 'submitted',\r\n color: TEXT_COLOR.YELLOW,\r\n backgroundColor: STATUS_COLOR.YELLOW,\r\n icon: \r\n },\r\n processing: {\r\n text: 'processing',\r\n color: TEXT_COLOR.YELLOW,\r\n backgroundColor: STATUS_COLOR.YELLOW,\r\n icon: \r\n },\r\n scheduled: {\r\n text: 'scheduled',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n rescheduled: {\r\n text: 'rescheduled',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'assessment-scheduled': {\r\n text: 'assessment-scheduled',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'in-review': {\r\n text: 'in-review',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'in-progress': {\r\n text: 'in-progress',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'awaiting-payment': {\r\n text: 'awaiting-payment',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'ready-for-payment': {\r\n text: 'ready-for-payment',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'to-be-rescheduled': {\r\n text: 'to-be-rescheduled',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n pending: {\r\n text: 'pending',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n 'cancellation-requested': {\r\n text: 'cancellation-requested',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n approved: {\r\n text: 'approved',\r\n color: TEXT_COLOR.BLUE,\r\n backgroundColor: STATUS_COLOR.BLUE,\r\n icon: \r\n },\r\n 'ready-for-collection': {\r\n text: 'ready-for-collection',\r\n color: TEXT_COLOR.BLUE,\r\n backgroundColor: STATUS_COLOR.BLUE,\r\n icon: \r\n },\r\n paid: {\r\n text: 'paid',\r\n color: TEXT_COLOR.PURPLE,\r\n backgroundColor: STATUS_COLOR.PURPLE,\r\n icon: \r\n },\r\n 'payment-received': {\r\n text: 'payment-received',\r\n color: TEXT_COLOR.PURPLE,\r\n backgroundColor: STATUS_COLOR.PURPLE,\r\n icon: \r\n },\r\n 'payment-processing': {\r\n text: 'processing',\r\n color: TEXT_COLOR.YELLOW,\r\n backgroundColor: STATUS_COLOR.YELLOW,\r\n icon: \r\n },\r\n completed: {\r\n text: 'completed',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n 'report-received': {\r\n text: 'report-received',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n received: {\r\n text: 'received',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n active: {\r\n text: 'active',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n declined: {\r\n text: 'declined',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n },\r\n 'could-not-complete': {\r\n text: 'could-not-complete',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n },\r\n 'on-hold': {\r\n text: 'on-hold',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n overdue: {\r\n text: 'overdue',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n },\r\n due: {\r\n text: 'due',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'expiring-soon': {\r\n text: 'expiring-soon',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n },\r\n saved: {\r\n text: 'saved',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.TRANSPARENT,\r\n icon: \r\n },\r\n missed: {\r\n text: 'missed',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n },\r\n reported: {\r\n text: 'reported',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'status-unknown': {\r\n text: 'status-unknown',\r\n color: TEXT_COLOR.DEFAULT,\r\n backgroundColor: STATUS_COLOR.DEFAULT,\r\n icon: \r\n },\r\n 'awaiting-information': {\r\n text: 'awaiting-information',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n escalated: {\r\n text: 'escalated',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n 'pending-sale': {\r\n text: 'pending-sale',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n suspended: {\r\n text: 'suspended',\r\n color: TEXT_COLOR.LIGHT_PURPLE,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n mailed: {\r\n text: 'mailed',\r\n color: TEXT_COLOR.BLUE,\r\n backgroundColor: STATUS_COLOR.BLUE,\r\n icon: \r\n },\r\n 'information-received': {\r\n text: 'information-received',\r\n color: TEXT_COLOR.PURPLE,\r\n backgroundColor: STATUS_COLOR.PURPLE,\r\n icon: \r\n },\r\n 'information-provided': {\r\n text: 'information-provided',\r\n color: TEXT_COLOR.PURPLE,\r\n backgroundColor: STATUS_COLOR.PURPLE,\r\n icon: \r\n },\r\n attempted: {\r\n text: 'attempted',\r\n color: TEXT_COLOR.RED,\r\n backgroundColor: STATUS_COLOR.RED,\r\n icon: \r\n }\r\n};\r\n\r\n\r\nexport const STATUS_CONSULTATION_CONFIGS = {\r\n 'open-for-feedback': {\r\n text: 'open-for-feedback',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n closed: {\r\n text: 'closed',\r\n color: TEXT_COLOR.PINK,\r\n backgroundColor: STATUS_COLOR.LIGHT_PURPLE,\r\n icon: \r\n },\r\n completed: {\r\n text: 'completed',\r\n color: TEXT_COLOR.GREEN,\r\n backgroundColor: STATUS_COLOR.GREEN,\r\n icon: \r\n },\r\n 'under-review': {\r\n text: 'under-review',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n planned: {\r\n text: 'planned',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'in-progress': {\r\n text: 'in-progress',\r\n color: TEXT_COLOR.ORANGE,\r\n backgroundColor: STATUS_COLOR.ORANGE,\r\n icon: \r\n },\r\n 'reporting-back': {\r\n text: 'reporting-back',\r\n color: TEXT_COLOR.BLUE,\r\n backgroundColor: STATUS_COLOR.BLUE,\r\n icon: \r\n },\r\n 'on-exhibition': {\r\n text: 'on-exhibition',\r\n color: TEXT_COLOR.BLUE,\r\n backgroundColor: STATUS_COLOR.BLUE,\r\n icon: \r\n }\r\n};\r\n\r\nconst StatusTag: React.FC = ({ text, displayStatusText, isConsultation = false }) => {\r\n const [t] = useTranslation();\r\n const statusText = text?.toLowerCase();\r\n const STATUS_TAGS = isConsultation ? STATUS_CONSULTATION_CONFIGS : STATUS_CONFIGS;\r\n return (\r\n \r\n \r\n {STATUS_TAGS[statusText]\r\n ? STATUS_TAGS[statusText]?.icon\r\n : STATUS_TAGS['draft']?.icon}\r\n \r\n {displayStatusText ? displayStatusText : t(`dashboard-status-${statusText}`)}\r\n \r\n );\r\n};\r\n\r\nexport default StatusTag;\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgVector = () => (\r\n \r\n);\r\n\r\nexport default withSvg(12, 12)(SvgVector);\r\n","import { BackgroundColors } from '_utils/components/Corporate/Section';\r\nimport { spacing } from '_utils/props';\r\nimport { color, mq } from '_utils/styles';\r\nimport { handleSectionTheme } from '_utils/styles/section';\r\nimport styled, { css } from 'styled-components';\r\nimport { NavLink } from 'react-router-dom';\r\n\r\n// INFO: Card Wrapper\r\nexport const ServiceRequestCardWrapper = styled.div`\r\n width: 100%;\r\n border: 1px solid ${color('all.deepBlueTint15')};\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.07);\r\n ${({ theme }) => spacing({ theme, mb: 4 })};\r\n background-color: ${({ isGray }) => (isGray ? color('all.deepBlueTint07') : color('all.white'))};\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n &:hover {\r\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\r\n cursor: pointer;\r\n\r\n .card-title {\r\n color: ${color('all.greenTint110')};\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &:focus-within {\r\n border: 3px solid #4060FF;\r\n }\r\n\r\n a:focus {\r\n outline: none;\r\n }\r\n`;\r\n\r\nexport const CardSection = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n ${({ theme }) => spacing({ theme, p: 3 })};\r\n ${() => handleSectionTheme(BackgroundColors['white'])};\r\n`;\r\n\r\n// INFO: Main Information\r\nconst ReferenceText = styled.div`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n color: ${color('all.deepBlueTint75')};\r\n text-transform: uppercase;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n`;\r\n\r\nexport const TitleWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n\r\n span {\r\n ${({ theme }) => spacing({ theme, mr: 1 })};\r\n }\r\n\r\n ${mq('md')} {\r\n svg {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n`;\r\n\r\nconst Title = styled(NavLink)`\r\n font-weight: bold;\r\n font-size: 18px;\r\n line-height: 24px;\r\n margin-right: 13px;\r\n color: ${color('all.deepBlue')};\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n ${mq('md')} {\r\n font-size: 24px;\r\n line-height: 28px;\r\n }\r\n`;\r\n\r\nconst StyledDot = css`\r\n &:after {\r\n content: '.';\r\n font-weight: bold;\r\n position: absolute;\r\n top: -5px;\r\n left: -13.5px;\r\n }\r\n`;\r\n\r\nconst Address = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n overflow: hidden;\r\n\r\n & > .request-type-card__description:first-child {\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n }\r\n\r\n & > .request-type-card__description:not(:first-child) {\r\n position: relative;\r\n ${({ theme }) => spacing({ theme, mb: 1 })};\r\n\r\n ${mq('lg')} {\r\n ${StyledDot}\r\n }\r\n }\r\n\r\n ${mq('lg')} {\r\n flex-direction: row;\r\n & > .request-type-card__description {\r\n ${({ theme }) => spacing({ theme, mr: 3 })};\r\n }\r\n }\r\n`;\r\n\r\nconst SubmissionTime = styled.span`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n color: ${color('all.deepBlueTint75')};\r\n`;\r\n\r\nexport const MainInformation = {\r\n ReferenceText,\r\n Title,\r\n Address,\r\n SubmissionTime\r\n};\r\n\r\n// INFO: Sub-items Information\r\nexport const SubItemWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n ${({ theme }) => spacing({ theme, mt: 2 })};\r\n`;\r\n\r\nexport const SubItem = styled.div<{ status: string }>`\r\n ${({ status }) => css`\r\n display: flex;\r\n flex-direction: column;\r\n background: #f9f9f9;\r\n border-radius: 8px;\r\n ${({ theme }) => spacing({ theme, p: 2 })};\r\n &:not(:last-child) {\r\n ${({ theme }) => spacing({ theme, mb: 2 })};\r\n }\r\n\r\n ${mq('sm')} {\r\n flex-direction: row;\r\n }\r\n `}\r\n`;\r\n\r\nexport const SubItemTitle = styled.div`\r\n font-size: 16px;\r\n line-height: 20px;\r\n font-weight: bold;\r\n\r\n ${mq('md')} {\r\n font-size: 18px;\r\n line-height: 24px;\r\n }\r\n`;\r\n\r\nexport const SubItemDescription = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n overflow: hidden;\r\n\r\n ${mq('md')} {\r\n flex-direction: ${({ isSubItemImg }) => (isSubItemImg ? 'column' : 'row')};\r\n }\r\n\r\n & > .request-type-card__description:first-child {\r\n ${({ theme }) => spacing({ theme, mr: 3, mt: 1 })};\r\n }\r\n\r\n & > .request-type-card__description:not(:first-child) {\r\n position: relative;\r\n ${({ theme }) => spacing({ theme, mr: 3, mt: 1 })};\r\n\r\n ${mq('md')} {\r\n ${({ isSubItemImg }) => (isSubItemImg ? `` : StyledDot)};\r\n }\r\n }\r\n`;\r\n\r\nexport const SubItemImage = styled.img`\r\n width: 88px;\r\n height: 88px;\r\n flex: 0 0 88px;\r\n border-radius: 50%;\r\n ${({ theme }) => spacing({ theme, mb: 2, mr: 2 })};\r\n\r\n ${mq('md')} {\r\n width: 128px;\r\n height: 128px;\r\n flex: 0 0 128px;\r\n ${({ theme }) => spacing({ theme, mb: 0, mr: 2 })};\r\n }\r\n`;\r\n\r\n// Subtype description item\r\nexport const SubTypeDescription = styled.span`\r\n font-size: 16px;\r\n line-height: 22px;\r\n`;\r\n\r\nexport const SubTypeUpdatedTime = styled.span`\r\n font-family: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, sans-serif;\r\n font-size: 10px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0em;\r\n text-align: left;\r\n color: ${color('all.deepBlueTint75')};\r\n ${({ theme }) => spacing({ theme, mt: 1 })};\r\n\r\n ${mq('md')} {\r\n text-align: right;\r\n }\r\n`;\r\n\r\nexport const SubTypeContainer = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n ${({ theme }) => spacing({ theme, mt: 2 })};\r\n\r\n ${mq('md')} {\r\n align-items: flex-end;\r\n ${({ theme }) => spacing({ theme, mt: 0 })};\r\n }\r\n`;\r\n","import { ITabNav } from './DashboardTabsHeader/definitions';\r\n\r\nexport interface IDashboardTabsProps {\r\n fields: { data: { datasource: { tabs: ITab[] } } };\r\n className?: string;\r\n}\r\n\r\nexport interface ITab extends ITabNav {\r\n description: {\r\n value: string;\r\n };\r\n notificationMessage: {\r\n value: string;\r\n };\r\n unavailableMessage: {\r\n value: string;\r\n };\r\n}\r\n\r\nexport const greyOutStatus = [\r\n 'completed',\r\n 'cancelled',\r\n 'duplicate'\r\n]\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useHistory } from 'react-router-dom';\r\nimport Metadata, { MetadataThemeConfig } from '_utils/components/CityConnect/Metadata';\r\nimport NavItem from '_components/Corporate/NavItem';\r\nimport StatusTag from '_utils/components/CityConnect/StatusTag';\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport SvgVector from '_utils/icons/Vector';\r\nimport {\r\n CardSection,\r\n MainInformation,\r\n ServiceRequestCardWrapper,\r\n SubItem,\r\n SubItemDescription,\r\n SubItemImage,\r\n SubItemTitle,\r\n SubItemWrapper,\r\n SubTypeContainer,\r\n SubTypeUpdatedTime,\r\n TitleWrapper\r\n} from './StyledServiceRequestCard';\r\nimport { greyOutStatus } from '../../definitions';\r\n\r\ntype ServiceRequestCardProps = {\r\n data?: any;\r\n};\r\n\r\nconst ServiceRequestCard: React.FC = ({ data }) => {\r\n const [t] = useTranslation();\r\n const history = useHistory();\r\n\r\n const renderRequestTypeDescription = (metadata) => {\r\n return (\r\n metadata?.length > 0 &&\r\n metadata.map((data, index) => (\r\n \r\n ))\r\n );\r\n };\r\n\r\n const renderSubItemDescription = (metadata) => {\r\n return (\r\n metadata?.length > 0 &&\r\n metadata.map((data, index) => (\r\n \r\n ))\r\n );\r\n };\r\n\r\n const renderSubItems = () => {\r\n const subItems = data?.subitems;\r\n return (\r\n subItems?.length > 0 &&\r\n subItems?.map((item, index) => (\r\n \r\n {item?.image && (\r\n \r\n )}\r\n \r\n \r\n {item?.title && (\r\n \r\n {item?.title}\r\n \r\n )}\r\n {item?.metadata && (\r\n \r\n {renderSubItemDescription(item?.metadata)}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {item?.lastUpdated}\r\n \r\n \r\n \r\n \r\n ))\r\n );\r\n };\r\n\r\n const handleClickOnCard = (e) => {\r\n e.preventDefault();\r\n if (data?.link) {\r\n history.push(data.link);\r\n }\r\n };\r\n return (\r\n \r\n \r\n \r\n {t('tab-requests-and-applications-reference')} {data?.referenceNumber}\r\n \r\n \r\n \r\n {data?.title}\r\n \r\n \r\n \r\n {data?.metadata && (\r\n \r\n {renderRequestTypeDescription(data?.metadata)}\r\n \r\n )}\r\n \r\n {t('tab-requests-and-applications-submitted')} {data?.submitted}\r\n \r\n\r\n {renderSubItems()}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ServiceRequestCard;\r\n","import { spacing } from '_utils/props';\r\nimport styled from 'styled-components';\r\n\r\nexport const RequestAndApplicationWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const MainContent = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;\r\n\r\nexport const ShowMoreContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ContentSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const UnAvailableSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;","import React, { useContext, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport ServiceRequestCard from './ServiceRequestCard';\r\nimport {\r\n RequestAndApplicationWrapper,\r\n MainContent,\r\n ShowMoreContainer,\r\n ContentSection,\r\n UnAvailableSection\r\n} from './StyledServiceRequestsTab';\r\nimport FilterTabs from '../FilterTabs';\r\nimport { DashboardTabsContext } from '..';\r\nimport ShowMore from '../../ShowMore';\r\nimport TextMessage from '../../TextMessage';\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport { SERVICE_REQUESTS_TAB } from '../constant';\r\nimport TipBox from '_components/CityConnect/RatesCalculator/RatesInput/TipBox';\r\n\r\ninterface IRequestsAndApplicationTabProps {\r\n tabData: any;\r\n filters: any;\r\n}\r\n\r\nconst renderServiceRequestCard = (listItem) => {\r\n return (\r\n listItem?.length > 0 &&\r\n listItem?.map((item, idx) => )\r\n );\r\n};\r\n\r\nconst RequestsAndApplicationTab: React.FC = ({\r\n tabData,\r\n filters\r\n}) => {\r\n const {\r\n activeTab,\r\n currentFilter,\r\n changeFilter,\r\n showMoreData,\r\n loading,\r\n error,\r\n description,\r\n notificationMsg,\r\n unavailableMessage,\r\n handleGetMoreItems\r\n } = useContext(DashboardTabsContext);\r\n\r\n useEffect(() => {\r\n if (error && activeTab === SERVICE_REQUESTS_TAB) {\r\n throw error;\r\n }\r\n }, [error]);\r\n\r\n const formatTextMessageFields = (value: string) => {\r\n return {\r\n data: {\r\n datasource: {\r\n message: {\r\n jss: {\r\n value: value\r\n }\r\n }\r\n }\r\n }\r\n };\r\n };\r\n\r\n if (unavailableMessage) {\r\n return <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n \r\n {/* Unavailable message */}\r\n \r\n \r\n \r\n }\r\n\r\n return (\r\n <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n {/* filter */}\r\n {filters?.length > 0 && (\r\n \r\n \r\n \r\n )}\r\n {/* main content */}\r\n \r\n {tabData && tabData.length > 0 ? (\r\n <>\r\n \r\n {renderServiceRequestCard(tabData)}\r\n \r\n {/* show more */}\r\n {showMoreData.nextPage && (\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nconst RequestsAndApplicationTabFallback: React.FC = () => {\r\n const [t] = useTranslation();\r\n const errorMessage = {\r\n data: {\r\n datasource: {\r\n message: { jss: { value: t('dashboard-information-is-currently-unavailable') } }\r\n }\r\n }\r\n };\r\n\r\n return ;\r\n};\r\n\r\nexport default withErrorBoundary(RequestsAndApplicationTab, RequestsAndApplicationTabFallback);\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { color, svg, mq } from '_utils/styles';\r\n\r\n// INFO: item styling\r\nexport const CardWrapper = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border: 1px solid ${color('all.deepBlueTint15')};\r\n border-radius: 8px;\r\n box-shadow: 0px 3px 12px 0px #00000012;\r\n cursor: pointer;\r\n\r\n ${mq.lessThan('sm')} {\r\n height: auto;\r\n }\r\n\r\n &:hover {\r\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n span:focus {\r\n outline: none;\r\n }\r\n\r\n &:focus-within,\r\n &:focus {\r\n border: 3px solid #4060ff;\r\n }\r\n`;\r\n\r\nexport const CardHeader = styled.div`\r\n ${({ theme }) => spacing({ theme, px: 2, py: 2 })};\r\n background-color: ${(props) => color(props.inputColor || 'palevioletred')};\r\n min-height: 168px;\r\n\r\n ${mq.lessThan('md')} {\r\n min-height: 136px;\r\n }\r\n`;\r\n\r\nexport const ImageWrapper = styled.div`\r\n width: 64px;\r\n height: 64px;\r\n\r\n ${mq.lessThan('md')} {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })};\r\n`;\r\n\r\nexport const Header = styled.h2`\r\n color: white;\r\n font-size: 24px;\r\n ${({ theme }) => spacing({ theme, mt: 2, mb: 0 })};\r\n ${mq.lessThan('md')} {\r\n font-size: 20px;\r\n ${({ theme }) => spacing({ theme, mt: 1, mb: 0 })};\r\n }\r\n`;\r\n\r\nexport const CardContent = styled.div`\r\n ${({ theme }) => spacing({ theme, mx: 2, my: 2 })};\r\n`;\r\n\r\nexport const Status = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })};\r\n font-weight: bold;\r\n font-size: 14px;\r\n`;\r\n\r\nexport const MetadataWrapperItem = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 0, mb: 1 })};\r\n span {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n`;\r\n\r\nexport const ArrowWrapper = styled.span`\r\n ${svg(14, 14)}\r\n width: 14px;\r\n margin-left: 8px;\r\n margin-right: 10px;\r\n\r\n path {\r\n fill: #2db84b;\r\n }\r\n`;\r\n\r\nexport const CategoryLink = styled.span`\r\n color: white;\r\n\r\n ${CardWrapper}:hover & {\r\n text-decoration: underline;\r\n }\r\n\r\n &:focus-visible {\r\n outline: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n }\r\n`;\r\n","import React from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Text, Image } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { Arrow } from '_utils/icons';\r\nimport StatusTag from '_utils/components/CityConnect/StatusTag';\r\nimport Metadata from '_utils/components/CityConnect/Metadata';\r\nimport {\r\n CardWrapper,\r\n CardHeader,\r\n ImageWrapper,\r\n Header,\r\n ArrowWrapper,\r\n CardContent,\r\n Status,\r\n MetadataWrapperItem,\r\n CategoryLink\r\n} from './StyledRegistrationItem';\r\n\r\nconst RegistrationItem: React.FC = (data) => {\r\n let { link, status, metadata, image, title, color } = data.data;\r\n const history = useHistory();\r\n\r\n return (\r\n history.push(link)}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {metadata?.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default RegistrationItem;\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\n\r\n// INFO: Tab wrapper styling\r\nexport const RegistrationsTabWrapper = styled.div`\r\n padding: 0;\r\n`;\r\n\r\nexport const ShowMoreContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ContentSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const UnAvailableSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;","import React, { useContext, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport RegistrationItem from './RegistrationItem';\r\nimport { DashboardTabsContext } from '..';\r\nimport ShowMore from '../../ShowMore';\r\nimport TextMessage from '../../TextMessage';\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport { REGISTRATIONS_TAB } from '../constant';\r\nimport TipBox from '_components/CityConnect/RatesCalculator/RatesInput/TipBox';\r\n\r\nimport {\r\n RegistrationsTabWrapper,\r\n ShowMoreContainer,\r\n ContentSection,\r\n UnAvailableSection\r\n} from './StyledRegistrationsTab';\r\n\r\ntype RegistrationProps = {\r\n tabData: any;\r\n};\r\n\r\nconst RegistrationsTab: React.FC = ({ tabData }) => {\r\n const {\r\n activeTab,\r\n showMoreData,\r\n loading,\r\n error,\r\n description,\r\n notificationMsg,\r\n unavailableMessage,\r\n handleGetMoreItems\r\n } = useContext(DashboardTabsContext);\r\n\r\n useEffect(() => {\r\n if (error && activeTab === REGISTRATIONS_TAB) {\r\n throw error;\r\n }\r\n }, [error]);\r\n\r\n const formatTextMessageFields = (value: string) => {\r\n return {\r\n data: {\r\n datasource: {\r\n message: {\r\n jss: {\r\n value: value\r\n }\r\n }\r\n }\r\n }\r\n };\r\n };\r\n\r\n if (unavailableMessage) {\r\n return <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n \r\n {/* Unavailable message */}\r\n \r\n \r\n \r\n }\r\n\r\n return (\r\n \r\n {/* notification message */}\r\n {notificationMsg && }\r\n {/* main content */}\r\n {tabData && tabData.length > 0 ? (\r\n \r\n \r\n {tabData.map((item, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n {/* show more */}\r\n {showMoreData.nextPage && (\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nconst RegistrationsTabFallback: React.FC = () => {\r\n const [t] = useTranslation();\r\n const errorMessage = {\r\n data: {\r\n datasource: {\r\n message: { jss: { value: t('dashboard-information-is-currently-unavailable') } }\r\n }\r\n }\r\n };\r\n\r\n return ;\r\n};\r\n\r\nexport default withErrorBoundary(RegistrationsTab, RegistrationsTabFallback);\r\n","import { spacing } from '_utils/props';\r\nimport styled from 'styled-components';\r\n\r\nexport const RequestAndApplicationWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const MainContent = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;\r\n\r\nexport const ShowMoreContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const ContentSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n`;\r\n\r\nexport const UnAvailableSection = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n`;","import {BackgroundColors} from '_utils/components/Corporate/Section';\r\nimport {spacing} from '_utils/props';\r\nimport {color, heading_m, heading_s, linkWithoutVisited, mq} from '_utils/styles';\r\nimport {handleSectionTheme} from '_utils/styles/section';\r\nimport styled, {css} from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport {Image as SCImage} from '@sitecore-jss/sitecore-jss-react';\r\nimport {Link} from \"_utils/components/Corporate\";\r\n\r\nconst comment_text = (size: number, weight: number, lineHeight: number) => `\r\n font-style: normal;\r\n font-size: ${size}px;\r\n font-weight: ${weight};\r\n line-height: ${lineHeight}px;\r\n`\r\n\r\n// INFO: Card Wrapper\r\nexport const ServiceRequestCardWrapper = styled.div`\r\n width: 100%;\r\n border: 1px solid ${color('all.deepBlueTint15')};\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.07);\r\n ${({theme}) => spacing({theme, mb: 4})};\r\n background-color: #FFFFFF;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n &:hover {\r\n box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);\r\n cursor: pointer;\r\n\r\n .card-title {\r\n color: ${color('all.greenTint110')};\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &:focus {\r\n border: 3px solid #8ca0ff;\r\n }\r\n`;\r\n\r\nexport const CardSection = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n ${({theme}) => spacing({theme, p: 3})};\r\n ${() => handleSectionTheme(BackgroundColors['white'])};\r\n`;\r\n\r\n// INFO: Main Information\r\nconst ReferenceText = styled.div`\r\n font-family: \"Helvetica Now Micro\", \"Helvetica Now Text\", Helvetica, sans-serif;\r\n ${comment_text(10, 700, 16)}\r\n letter-spacing: 0em;\r\n text-align: left;\r\n color: ${color('all.deepBlueTint75')};\r\n text-transform: uppercase;\r\n ${({theme}) => spacing({theme, mb: 1})};\r\n`;\r\n\r\nexport const TitleContainer = styled.div`\r\n ${({theme}) => spacing({theme, mb: 2})};\r\n`\r\n\r\nexport const TitleWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n ${({theme}) => spacing({theme, mb: 1, mt: 1})};\r\n\r\n span { \r\n ${({theme}) => spacing({theme, mr: 1})};\r\n }\r\n svg {\r\n display: inline;\r\n }\r\n\r\n ${mq('md')} {\r\n svg {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n`;\r\n\r\nexport const TimeLeft = styled.div`\r\n display: flex;\r\n align-items: center;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 22px;\r\n color: #4E5A5F;\r\n & svg{\r\n margin-right: 10px;\r\n };\r\n ${mq.lessThan('md')}{\r\n font-size: 14px;\r\n }\r\n`\r\n\r\nconst Title = styled(NavLink)`\r\n ${heading_m}\r\n margin-right: 13px;\r\n color: ${color('all.deepBlue')};\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n ${mq.lessThan('md')}{\r\n line-height: 24px;\r\n }\r\n`;\r\n\r\nconst StyledDot = css`\r\n &:after {\r\n content: '.';\r\n font-weight: bold;\r\n position: absolute;\r\n top: -5px;\r\n left: -13.5px;\r\n }\r\n`;\r\n\r\nconst Address = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n overflow: hidden;\r\n\r\n & > .request-type-card__description:first-child {\r\n ${({theme}) => spacing({theme, mb: 1})};\r\n }\r\n\r\n & > .request-type-card__description:not(:first-child) {\r\n position: relative;\r\n ${({theme}) => spacing({theme, mb: 1})};\r\n\r\n ${mq('lg')} {\r\n ${StyledDot}\r\n }\r\n }\r\n\r\n ${mq('lg')} {\r\n flex-direction: row;\r\n & > .request-type-card__description {\r\n ${({theme}) => spacing({theme, mr: 3})};\r\n }\r\n }\r\n`;\r\n\r\nconst SubmissionTime = styled.span`\r\n font-family: \"Helvetica Now Micro\", \"Helvetica Now Text\", Helvetica, sans-serif;\r\n ${comment_text(10, 400, 16)}\r\n letter-spacing: 0em;\r\n text-align: left;\r\n display: flex;\r\n align-items: center;\r\n ${({theme}) => spacing({theme, mt: 1, mb: 1})};\r\n color: ${color('all.deepBlueTint75')};\r\n\r\n ${mq.lessThan('md')}{\r\n display: inline-block;\r\n\r\n div {\r\n display: inline-block;\r\n margin: 6px 6px 3px 6px;\r\n }\r\n }\r\n`;\r\n\r\nconst CommunityIdeaSubmissionTime = styled.span`\r\n font-family: \"Helvetica Now Micro\", \"Helvetica Now Text\", Helvetica, sans-serif;\r\n ${comment_text(10, 400, 16)}\r\n letter-spacing: 0em;\r\n text-align: left;\r\n display: flex;\r\n align-items: center;\r\n ${({theme}) => spacing({theme, mb: 1})};\r\n color: ${color('all.deepBlueTint75')};\r\n\r\n ${mq.lessThan('md')}{\r\n display: inline-block;\r\n\r\n div {\r\n display: inline-block;\r\n margin: 6px 6px 3px 6px;\r\n }\r\n }\r\n`;\r\n\r\nexport const MainInformation = {\r\n ReferenceText,\r\n Title,\r\n Address,\r\n SubmissionTime,\r\n CommunityIdeaSubmissionTime\r\n};\r\n\r\n// INFO: Sub-items Information\r\nexport const SubItemWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const SubItem = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n background: #F9F9F9;\r\n border-radius: 8px;\r\n ${({theme}) => spacing({theme, p: 2})};\r\n \r\n &:not(:last-child) {\r\n ${({theme}) => spacing({theme, mb: 2})};\r\n }\r\n\r\n ${mq('sm')} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nexport const CommunityIdeaSubItem = styled.div`\r\n background: #F9F9F9;\r\n border-radius: 8px;\r\n ${({theme}) => spacing({theme, p: 2})};\r\n \r\n &:not(:last-child) {\r\n ${({theme}) => spacing({theme, mb: 2})};\r\n }\r\n\r\n ${mq('sm')} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nexport const CommunityIdeaSubItemRow = styled(Grid.Row)`\r\n background: #fff;\r\n border-radius: 8px;\r\n ${({theme}) => spacing({theme, p: 2})};\r\n ${({theme}) => spacing({theme, mt: 2})};\r\n\r\n ${mq('sm')} {\r\n flex-direction: row;\r\n }\r\n`;\r\n\r\nexport const SubItemTitle = styled.div`\r\n ${heading_s}\r\n display: flex;\r\n align-items: center;\r\n & svg{\r\n fill: #005084;\r\n margin-right: 10px;\r\n max-width: 23px;\r\n }\r\n`;\r\n\r\nexport const SubItemDes = styled.p`\r\n ${comment_text(16, 400, 22)}\r\n color: #041C2C;\r\n margin: 0;\r\n ${mq.lessThan('md')}{\r\n font-size: 14px;\r\n }\r\n`\r\n\r\nexport const Dot = styled.div`\r\n width: 2px;\r\n height: 2px;\r\n background: black;\r\n margin: 6px;\r\n border-radius: 50%;\r\n`\r\n\r\nexport const Figure = styled.figure`\r\n display: block;\r\n height: 100%;\r\n margin: 0;\r\n ${({theme}) => spacing({theme, mb: 2})};\r\n ${mq.lessThan('lg')}{\r\n & img{\r\n border-radius: 50%;\r\n height: ${props => props.height ? props.height + 'px' : ''}\r\n }\r\n }\r\n @media print {\r\n width: 50%;\r\n height: 50%;\r\n }\r\n`;\r\n\r\nexport const Image = styled(SCImage)`\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n font-family: 'object-fit: cover;';\r\n @media print {\r\n width: 50%;\r\n left: 25%;\r\n }\r\n border-radius: 4px;\r\n`;\r\n\r\nexport const ResultLink = styled(Link)`\r\n text-align: end;\r\n line-height: 24px;\r\n a {\r\n font-size: 16px;\r\n ${({theme}) => linkWithoutVisited({theme})}\r\n }\r\n ${mq.lessThan('md')} {\r\n line-height: 16px;\r\n a {\r\n font-size: 14px;\r\n }\r\n margin-top: 6px;\r\n }\r\n ${mq.lessThan('sm')}{\r\n text-align: start;\r\n }\r\n`;\r\n\r\nexport const SubItemRightSide = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n`\r\n\r\nexport const SubItemRightSideRow = styled.div`\r\n display: flex;\r\n height: 18px;\r\n justify-content: flex-end;\r\n align-items: center;\r\n color: ${props => props.color ? props.color : ''};\r\n & svg {\r\n margin-left: 10px;\r\n }\r\n`\r\nexport const Progress = styled.div`\r\n height: 8px;\r\n border-radius: 8px;\r\n margin-right: 8px;\r\n background: ${props => props.color ? props.color : ''};\r\n width: ${props => props.width ? props.width + 'px' : ''};\r\n`\r\n\r\nexport const TextRate = styled.p`\r\n color: ${props => props.color ? props.color : ''};\r\n ${comment_text(10, 700, 16)}\r\n text-align: right;\r\n text-transform: uppercase;\r\n width: 30px;\r\n margin-right: 5px;\r\n`","import React from 'react';\r\nimport {\r\n Clipboard,\r\n DashBoardRequestCheck,\r\n DashBoardRequestClose,\r\n DashBoardRequestCorner,\r\n LinkButtonCommentExclaim,\r\n Pin\r\n} from '_utils/icons';\r\n\r\nexport enum ConsultationType {\r\n survey = 'survey',\r\n 'community-ideas' = 'community-ideas',\r\n 'interactive-map' = 'interactive-map',\r\n}\r\n\r\nconst cases = {\r\n \"yes\": {\r\n color: '#188838',\r\n icon: \r\n },\r\n \"no\": {\r\n color: '#DA1E5B',\r\n icon: \r\n },\r\n \"unsure\": {\r\n color: \"#4E5A5F\",\r\n icon: \r\n }\r\n}\r\n\r\nconst icons = {\r\n [ConsultationType.survey]: ,\r\n [ConsultationType['community-ideas']]: ,\r\n [ConsultationType['interactive-map']]: ,\r\n};\r\n\r\nexport function ConsultationIcon({ icon }) {\r\n if (icons[icon]) {\r\n return icons[icon];\r\n }\r\n\r\n return null;\r\n}\r\n\r\nexport function ConsultationOpinions(opinion: string) {\r\n if (cases[opinion]) {\r\n return cases[opinion];\r\n }\r\n\r\n return null;\r\n}\r\n","export const createSitecoreLink = (href: string, text: string) => {\r\n return {\r\n value: {\r\n href: href,\r\n text: text,\r\n anchor: \"\",\r\n linktype: \"internal\",\r\n class: \"\",\r\n title: \"\",\r\n target: \"_blank\",\r\n querystring: \"\",\r\n id: \"\"\r\n }\r\n }\r\n}\r\n\r\nexport const calculateRate = (total: number, number: number) => {\r\n return Math.round((number / total) * 100);\r\n}","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport {\r\n Progress,\r\n ResultLink,\r\n SubItemRightSide,\r\n SubItemRightSideRow,\r\n TextRate\r\n} from './StyledConsultationsCard';\r\nimport { calculateRate, createSitecoreLink } from '_utils/helpers/consultationFunctions';\r\nimport { DashBoardRequestUser } from '_utils/icons';\r\nimport { ConsultationOpinions } from '_utils/components/CityConnect/ConsultationIcon/ConsultationIcon';\r\n\r\ninterface metaType {\r\n type: string;\r\n value: any;\r\n}\r\n\r\ninterface opinionProps {\r\n item: {\r\n type: string;\r\n metadata: metaType[];\r\n };\r\n}\r\n\r\nconst OpinionCard: React.FC = ({ item }) => {\r\n const [t] = useTranslation();\r\n return (\r\n <>\r\n {item.type !== 'community-ideas' ? (\r\n \r\n ) : (\r\n \r\n {item.metadata.map((meta) => (\r\n \r\n {meta.type === 'person' ? (\r\n <>\r\n {meta.value}\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n {meta.value}\r\n \r\n {ConsultationOpinions(meta.type).icon}\r\n \r\n )}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default OpinionCard;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useHistory } from 'react-router-dom';\r\nimport NavItem from '_components/Corporate/NavItem';\r\nimport StatusTag from '_utils/components/CityConnect/StatusTag';\r\nimport { Grid } from '_utils/components/Corporate';\r\nimport SvgVector from '_utils/icons/Vector';\r\nimport {\r\n CardSection,\r\n MainInformation,\r\n ServiceRequestCardWrapper,\r\n SubItem,\r\n CommunityIdeaSubItem,\r\n CommunityIdeaSubItemRow,\r\n SubItemTitle,\r\n SubItemWrapper,\r\n TitleWrapper,\r\n SubItemDes,\r\n TimeLeft,\r\n TitleContainer,\r\n Dot\r\n} from './StyledConsultationsCard';\r\nimport { Clock } from '_utils/icons';\r\nimport { ConsultationIcon } from '_utils/components/CityConnect/ConsultationIcon/ConsultationIcon';\r\nimport OpinionCard from './OpinionCard';\r\n\r\ntype ConsultationsCardProps = {\r\n data?: any;\r\n};\r\n\r\nconst ConsultationsCard: React.FC = ({ data }) => {\r\n const [t] = useTranslation();\r\n const history = useHistory();\r\n const url = data.link.replace(window.location.origin, '');\r\n const subItems = data?.subitems;\r\n\r\n const compareDates = (a, b) => {\r\n const dateA = new Date(a.lastUpdatedIso);\r\n const dateB = new Date(b.lastUpdatedIso);\r\n return dateB.getTime() - dateA.getTime();\r\n };\r\n const communityIdeaItems = subItems\r\n .filter((i) => i.type === 'community-ideas')\r\n .sort(compareDates);\r\n const restItems = subItems.filter((i) => i.type !== 'community-ideas').sort(compareDates);\r\n\r\n const renderSubItems = () => {\r\n return (\r\n <>\r\n {restItems.map((item, index) => (\r\n \r\n \r\n \r\n {item?.title && (\r\n \r\n \r\n {item?.title}\r\n \r\n )}\r\n \r\n {t('tab-consultations-submitted')}\r\n {' ' + t('tab-consultations-by') + ' ' + item.name}\r\n {item?.organizationName && ' ' + t('tab-consultations-on-behalf-of') + ' ' + item.organizationName}\r\n \r\n {item.lastUpdated}\r\n \r\n {item.description}\r\n \r\n \r\n {item.metadata && item.metadata.length > 0 && }\r\n \r\n \r\n \r\n ))}\r\n\r\n {communityIdeaItems.length > 0 && (\r\n \r\n \r\n \r\n {communityIdeaItems[0].title && (\r\n \r\n \r\n {communityIdeaItems[0].title}\r\n \r\n )}\r\n \r\n \r\n\r\n {communityIdeaItems.map((item, index) => (\r\n \r\n \r\n \r\n {t('tab-consultations-submitted')}\r\n {' ' + t('tab-consultations-by') + ' ' + item.name}\r\n {item?.organizationName && ' ' + t('tab-consultations-on-behalf-of') + ' ' + item.organizationName}\r\n \r\n {item.lastUpdated}\r\n \r\n {item.description}\r\n \r\n \r\n {item.metadata && item.metadata.length > 0 && }\r\n \r\n \r\n ))}\r\n \r\n )}\r\n \r\n );\r\n };\r\n\r\n const renderTitle = (data: any) => {\r\n return (\r\n \r\n {data?.status && (\r\n \r\n )}\r\n \r\n \r\n {data?.title}\r\n \r\n \r\n \r\n {data?.metadata[0]?.value && data?.metadata[0]?.type === 'days-left' && (\r\n \r\n \r\n {data?.metadata[0]?.value === '1'\r\n ? `${data.metadata[0].value} ${t('tab-consultations-day-left')}`\r\n : `${data.metadata[0].value} ${t('tab-consultations-days-left')}`}\r\n \r\n )}\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n {renderTitle(data)}\r\n {renderSubItems()}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ConsultationsCard;\r\n","import React, { useContext, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport {\r\n RequestAndApplicationWrapper,\r\n MainContent,\r\n ShowMoreContainer,\r\n UnAvailableSection\r\n} from './StyledConsultationsTab';\r\nimport ShowMore from \"../../ShowMore\";\r\nimport TextMessage from \"../../TextMessage\";\r\nimport withErrorBoundary from '_containers/ErrorBoundary';\r\nimport TipBox from '_components/CityConnect/RatesCalculator/RatesInput/TipBox';\r\nimport ConsultationsCard from \"./ConsultationsCard\";\r\nimport { DashboardTabsContext } from \"../index\";\r\nimport { CONSULTATIONS_TAB } from \"../constant\";\r\n\r\ninterface IConsultationTabProps {\r\n tabData: any;\r\n filters: any;\r\n}\r\n\r\nconst renderConsultationCard = (listItem) => {\r\n return (\r\n listItem?.length > 0 &&\r\n listItem?.map((item, idx) => (\r\n \r\n ))\r\n );\r\n};\r\n\r\nconst ConsultationTab: React.FC = ({ tabData }) => {\r\n const { activeTab, showMoreData, loading, error, description, notificationMsg, unavailableMessage, handleGetMoreItems } = useContext(DashboardTabsContext);\r\n\r\n useEffect(() => {\r\n if (error && activeTab === CONSULTATIONS_TAB) {\r\n throw error;\r\n }\r\n }, [error])\r\n\r\n const formatTextMessageFields = (value: string) => {\r\n return {\r\n data: {\r\n datasource: {\r\n message: {\r\n jss: {\r\n value: value\r\n }\r\n }\r\n }\r\n }\r\n };\r\n };\r\n\r\n if (unavailableMessage) {\r\n return <>\r\n {/* notification message */}\r\n {notificationMsg && }\r\n \r\n {/* Unavailable message */}\r\n \r\n \r\n \r\n }\r\n\r\n\r\n return (\r\n <>\r\n {notificationMsg && }\r\n {/*{notificationMsg && }*/}\r\n \r\n {(tabData && tabData.length > 0)\r\n ? (<>\r\n {renderConsultationCard(tabData)}\r\n {/* show more */}\r\n {showMoreData.nextPage && (\r\n \r\n \r\n \r\n )}\r\n )\r\n : ()\r\n }\r\n \r\n \r\n );\r\n};\r\n\r\nconst ConsultationTabFallback: React.FC = () => {\r\n const [t] = useTranslation();\r\n const errorMessage = { data: { datasource: { message: { jss: { value: t('dashboard-information-is-currently-unavailable') } } } } };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default withErrorBoundary(ConsultationTab, ConsultationTabFallback);\r\n","import React from 'react';\r\n\r\nexport const SvgChevronLeft = () => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SvgChevronRight = () => (\r\n \r\n);\r\n","import React from 'react';\r\nimport PropTypes from \"prop-types\";\r\n\r\nexport const SvgConsultation = () => (\r\n \r\n);\r\n\r\nSvgConsultation.prototype = {\r\n color: PropTypes.string\r\n}\r\n","import { cssResponsiveSvg } from '_utils/styles/svg';\r\nimport styled, { css } from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { mq, text_m } from '_utils/styles';\r\nimport { FONT_FAMILY_DISPLAY } from '_containers/Theme/theme';\r\n\r\nexport const TabHeader = styled.div`\r\n width: 100%;\r\n height: 40px;\r\n background-color: ${({ colour, theme }) => theme.colors.all[colour]};\r\n border-radius: 8px 8px 0 0;\r\n\r\n display: flex;\r\n align-items: center;\r\n\r\n ${mq('md')} {\r\n height: 48px;\r\n }\r\n`;\r\n\r\nexport const IconWrapper = styled.div`\r\n ${({ theme }) => spacing({ theme, ml: 3 })}\r\n ${({ iconConfig }) => {\r\n const { width, height } = iconConfig;\r\n return cssResponsiveSvg(width, height);\r\n }}\r\n`;\r\n\r\nexport const TabBody = styled.div`\r\n border: 2px solid #dddee1;\r\n border-top: none;\r\n border-bottom: none;\r\n width: 100%;\r\n flex-grow: 1;\r\n min-height: 101px;\r\n\r\n ${mq('md')} {\r\n min-height: 117px;\r\n }\r\n`;\r\n\r\nexport const Heading = styled.h2`\r\n font-family: ${FONT_FAMILY_DISPLAY};\r\n font-weight: bold;\r\n ${({ theme }) => spacing({ theme, m: 0, ml: 3, mr: 3, pt: 3 })}\r\n margin-bottom: 5px;\r\n font-size: 20px;\r\n color: ${({ theme }) => theme.colors.all.black};\r\n ${mq('md')} {\r\n font-size: 28px;\r\n ${({ theme }) => spacing({ theme, pt: 2 })};\r\n }\r\n`;\r\n\r\nexport const PreCount = styled.span`\r\n width: 12px;\r\n display: inline-block;\r\n`;\r\n\r\nexport const Count = styled.span`\r\n ${text_m};\r\n margin: 0;\r\n display: inline-block;\r\n`;\r\n\r\nconst TabFooterCss = css`\r\n height: 32px;\r\n opacity: 0.1;\r\n\r\n position: absolute;\r\n bottom: 2px;\r\n right: -12px;\r\n left: -12px;\r\n z-index: 1;\r\n\r\n background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, #000000 100%);\r\n`;\r\n\r\nconst TabFooterHoverCss = css`\r\n background: transparent;\r\n opacity: 1;\r\n bottom: 0;\r\n right: 0;\r\n left: 0;\r\n`;\r\n\r\nexport const TabFooter = styled.div`\r\n ${TabFooterCss}\r\n`;\r\n\r\nexport const Line = styled.div`\r\n position: absolute;\r\n height: 0;\r\n bottom: 0;\r\n right: -12px;\r\n left: -12px;\r\n\r\n border-bottom: 2px solid #dddee1;\r\n`;\r\n\r\nconst CurveLine = css`\r\n content: '';\r\n display: block;\r\n height: 34px;\r\n width: 14px;\r\n background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, rgba(0, 0, 0, 0.1) 100%);\r\n border-radius: 0px 0px 20px 0px;\r\n border: 2px solid #dddee1;\r\n border-top: none;\r\n border-left: none;\r\n\r\n position: absolute;\r\n bottom: 0;\r\n z-index: 2;\r\n box-shadow: 0 14px 0 #fff;\r\n`;\r\n\r\nexport const TabWrapper = styled.button`\r\n position: relative;\r\n width: 200px;\r\n background-color: #ffffff;\r\n flex-shrink: 0;\r\n border: none;\r\n padding: 0;\r\n text-align: start;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n cursor: pointer;\r\n\r\n &:hover,\r\n &.active {\r\n ${Line} {\r\n display: none;\r\n }\r\n\r\n ${TabFooter} {\r\n ${TabFooterHoverCss}\r\n }\r\n\r\n ${TabBody} {\r\n }\r\n }\r\n\r\n &:hover::before,\r\n &.active::before {\r\n ${CurveLine}\r\n left: -12px;\r\n }\r\n\r\n &:hover::after,\r\n &.active::after {\r\n ${CurveLine}\r\n transform: matrix(-1, 0, 0, 1, 0, 0);\r\n right: -12.1px;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n\r\n ${Line} {\r\n z-index: -1;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n ${TabHeader},\r\n ${TabBody} {\r\n border: 3px solid #4060ff;\r\n }\r\n ${TabHeader} {\r\n border-bottom: none;\r\n }\r\n\r\n ${TabBody} {\r\n border-top: none;\r\n }\r\n\r\n &::before,\r\n &::after {\r\n z-index: -2;\r\n }\r\n }\r\n\r\n ${mq('md')} {\r\n width: 262px;\r\n }\r\n`;\r\n","import React, { useContext } from 'react';\r\nimport { SvgCertificate } from '_utils/icons/DashboardTabs/Certificate';\r\nimport { SvgRegistration } from '_utils/icons/DashboardTabs/Registration';\r\nimport { SvgRates } from '_utils/icons/DashboardTabs/Rates';\r\nimport { SvgRequest } from '_utils/icons/DashboardTabs/Request';\r\nimport { SvgConsultation } from \"_utils/icons/DashboardTabs/Consultation\";\r\nimport { DashboardTabsContext } from '../..';\r\nimport { IDashboardTabNavProps } from './definitions';\r\nimport {\r\n Count,\r\n PreCount,\r\n Heading,\r\n IconWrapper,\r\n Line,\r\n TabBody,\r\n TabFooter,\r\n TabHeader,\r\n TabWrapper\r\n} from './StyledDashboardTabNav';\r\nimport {\r\n PROPERTIES_TAB,\r\n PROPERTY_CERTIFICATES_TAB,\r\n REGISTRATIONS_TAB,\r\n SERVICE_REQUESTS_TAB,\r\n CONSULTATIONS_TAB\r\n} from '../../constant';\r\n\r\nconst TAB_HEADER_ICON = {\r\n request: {\r\n iconSvg: ,\r\n config: {\r\n width: { xs: 20, md: 27 },\r\n height: { xs: 20, md: 27 }\r\n }\r\n },\r\n registration: {\r\n iconSvg: ,\r\n config: {\r\n width: { xs: 16, md: 21 },\r\n height: { xs: 20, md: 27 }\r\n }\r\n },\r\n rates: {\r\n iconSvg: ,\r\n config: {\r\n width: { xs: 18, md: 24 },\r\n height: { xs: 20, md: 27 }\r\n }\r\n },\r\n certificate: {\r\n iconSvg: ,\r\n config: {\r\n width: { xs: 19, md: 25 },\r\n height: { xs: 20, md: 27 }\r\n }\r\n },\r\n consultations: {\r\n iconSvg: ,\r\n config: {\r\n width: { xs: 19, md: 32 },\r\n height: { xs: 20, md: 30 }\r\n }\r\n }\r\n};\r\n\r\nconst LIST_TAB_NAMES = {\r\n 'service-requests': SERVICE_REQUESTS_TAB,\r\n registrations: REGISTRATIONS_TAB,\r\n properties: PROPERTIES_TAB,\r\n 'property-certificates': PROPERTY_CERTIFICATES_TAB,\r\n consultations: CONSULTATIONS_TAB\r\n};\r\n\r\nconst DashboardTabNav: React.FC = ({\r\n tabName,\r\n colour,\r\n icon,\r\n title,\r\n count,\r\n active,\r\n className,\r\n tabIndex,\r\n updateScroll\r\n}) => {\r\n const dashboardContext = useContext(DashboardTabsContext);\r\n const changeActiveTab = useContext(DashboardTabsContext)?.changeActiveTab;\r\n const activeTab = useContext(DashboardTabsContext)?.activeTab;\r\n\r\n const { iconSvg, config } = TAB_HEADER_ICON[icon];\r\n\r\n const handleClickOnTab = () => {\r\n if (tabName.toLocaleLowerCase() !== activeTab.toLowerCase()) {\r\n changeActiveTab(tabName);\r\n }\r\n updateScroll(tabIndex);\r\n };\r\n\r\n return (\r\n \r\n \r\n {iconSvg}\r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n (\r\n {dashboardContext?.error && activeTab === LIST_TAB_NAMES[tabName]\r\n ? '...'\r\n : count ?? '...'}\r\n )\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DashboardTabNav;\r\n","import React from 'react';\r\n\r\nexport const SvgRequest = () => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SvgRegistration = () => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SvgRates = () => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SvgCertificate = () => (\r\n \r\n);\r\n","import { button, mq, safeFocusRemoval } from '_utils/styles';\r\nimport styled, { css } from 'styled-components';\r\n\r\nconst ScrollButton = css`\r\n ${button()}\r\n ${safeFocusRemoval}\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 28px;\r\n\r\n position: absolute;\r\n z-index: 4;\r\n bottom: 50%;\r\n transform: translateY(50%);\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n svg {\r\n path {\r\n fill: #ffffff;\r\n }\r\n }\r\n\r\n body:not(.safe-focus-removal) &:focus:before {\r\n content: none;\r\n }\r\n\r\n body:not(.safe-focus-removal) &:focus-visible {\r\n &:before {\r\n position: absolute;\r\n left: -6px;\r\n top: -6px;\r\n content: '';\r\n width: calc(100% + 12px);\r\n height: calc(100% + 12px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 9999px;\r\n }\r\n }\r\n`;\r\n\r\nexport const ScrollButtonLeft = styled.button`\r\n ${ScrollButton};\r\n left: -13px;\r\n visibility: ${({ hidden }) => (hidden ? 'hidden' : 'visible')};\r\n\r\n ${mq('lg')} {\r\n left: -26px;\r\n }\r\n`;\r\n\r\nexport const ScrollButtonRight = styled.button`\r\n ${ScrollButton};\r\n right: -13px;\r\n visibility: ${({ hidden }) => (hidden ? 'hidden' : 'visible')};\r\n\r\n ${mq('lg')} {\r\n right: -26px;\r\n }\r\n`;\r\n\r\nexport const WrapperInSide = styled.div`\r\n display: flex;\r\n position: relative;\r\n z-index: 2;\r\n left: ${({ moveToRight }) => `-${moveToRight}px`};\r\n\r\n transition: 0.5s linear;\r\n\r\n .tabNav {\r\n margin: 0 12px;\r\n }\r\n`;\r\n\r\nexport const WrapperOutSide = styled.div`\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n max-width: 1120px;\r\n`;\r\n\r\nexport const Container = styled.div`\r\n position: relative;\r\n width: 100%;\r\n max-width: 1120px;\r\n`;\r\n","import React, { useContext, useEffect, useRef, useState } from 'react';\r\nimport { SvgChevronLeft } from '_utils/icons/DashboardTabs/ChevronLeft';\r\nimport { SvgChevronRight } from '_utils/icons/DashboardTabs/ChevronRight';\r\nimport DashboardTabNav from '_components/CityConnect/DashboardTabs/DashboardTabsHeader/DashboardTabNav';\r\nimport { DashboardTabsContext } from '..';\r\nimport { SERVICE_REQUESTS_TAB } from '../constant';\r\nimport { IDashboardTabsHeaderProps, ITabApi, ITabNav, ITabNavExtend } from './definitions';\r\nimport {\r\n Container,\r\n ScrollButtonLeft,\r\n ScrollButtonRight,\r\n WrapperInSide,\r\n WrapperOutSide\r\n} from './styledDashboardTabsHeader';\r\n\r\nimport { getDashboardTabsNavData } from '_services/dashboardTabsService';\r\n\r\nconst TABNAV_XS = 224;\r\nconst TABNAV_MD = 284;\r\n\r\nconst DashboardTabsHeader: React.FC = ({ fields }) => {\r\n const [moveToRight, setMoveToRight] = useState(0);\r\n const [widthWrapperOutSide, setWidtWrapperOutSide] = useState(0);\r\n const [hideScrollButtonRight, setHideScrollButtonRight] = useState(false);\r\n const [hideScrollButtonLeft, setHideScrollButtonLeft] = useState(true);\r\n const [step, setStep] = useState(TABNAV_XS);\r\n const [tabsData, setTabsData] = useState();\r\n const [error, setError] = useState(null);\r\n\r\n const activeTab = useContext(DashboardTabsContext)?.activeTab || SERVICE_REQUESTS_TAB;\r\n\r\n const wrapperOutSideRef = useRef() as React.MutableRefObject;\r\n\r\n const { tabs } = fields?.data?.datasource;\r\n\r\n const handleWindowsResize = () => {\r\n const width = wrapperOutSideRef?.current?.offsetWidth;\r\n\r\n setMoveToRight(0);\r\n setWidtWrapperOutSide(width);\r\n setHideScrollButtonLeft(true);\r\n setHideScrollButtonRight(false);\r\n\r\n if (window.innerWidth >= 768) {\r\n setStep(TABNAV_MD);\r\n } else {\r\n setStep(TABNAV_XS);\r\n }\r\n\r\n if (width >= len * TABNAV_MD) {\r\n setHideScrollButtonLeft(true);\r\n setHideScrollButtonRight(true);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n handleWindowsResize();\r\n }, []);\r\n\r\n useEffect(() => {\r\n window.addEventListener('resize', handleWindowsResize);\r\n\r\n return () => window.removeEventListener('resize', handleWindowsResize);\r\n }, []);\r\n\r\n // call API to get data\r\n useEffect(() => {\r\n getDashboardTabsNavData(\r\n (data) => setTabsData((prevState) => data?.data?.tabs),\r\n (data) => setError((prevState) => data?.error)\r\n );\r\n }, []);\r\n\r\n const len = tabs?.length ?? 0;\r\n const widthWrapperInSide = step * len;\r\n const diff = widthWrapperInSide - (widthWrapperOutSide + moveToRight);\r\n const flag = diff / step;\r\n\r\n const handleClickScrollButtonRight = () => {\r\n if (!moveToRight && diff > step) {\r\n setMoveToRight((prevState) => prevState + (step * 5) / 6);\r\n setHideScrollButtonLeft(false);\r\n } else if (flag > 1.2) {\r\n setMoveToRight((prevState) => prevState + step);\r\n } else if (flag < 1.2) {\r\n setMoveToRight((prevState) => prevState + diff);\r\n setHideScrollButtonRight(true);\r\n setHideScrollButtonLeft(false);\r\n }\r\n };\r\n\r\n const handleClickScrollButtonLeft = () => {\r\n if (diff <= 0 && moveToRight > step) {\r\n setMoveToRight((prevState) => prevState - (step * 5) / 6);\r\n setHideScrollButtonRight(false);\r\n } else if (moveToRight >= step) {\r\n setMoveToRight((prevState) => prevState - step);\r\n } else if (moveToRight < step) {\r\n setMoveToRight(0);\r\n setHideScrollButtonLeft(true);\r\n setHideScrollButtonRight(false);\r\n }\r\n };\r\n\r\n const tabsExtend = tabs?.map((tab: ITabNav) => {\r\n return {\r\n ...tab,\r\n active: tab.tabName.value === activeTab,\r\n count: tabsData?.find((item: ITabApi) => item?.tabName === tab?.tabName?.value)?.total\r\n };\r\n });\r\n\r\n const updateScroll = (idx: number) => {\r\n if ((idx + 1) * step > moveToRight + widthWrapperOutSide) {\r\n handleClickScrollButtonRight();\r\n } else if (idx * step < moveToRight) {\r\n handleClickScrollButtonLeft();\r\n }\r\n };\r\n\r\n const renderDashboardTabNavs = (tabs: ITabNavExtend[]) => {\r\n return tabs?.map((tab: ITabNavExtend, idx) => {\r\n const { tabName, colour, icon, title, count, active } = tab;\r\n return (\r\n \r\n );\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {renderDashboardTabNavs(tabsExtend)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DashboardTabsHeader;\r\n","import { spacing } from '_utils/props';\r\nimport styled from 'styled-components';\r\n\r\n// INFO: Card Wrapper\r\nexport const DashboardTabsWrapper = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\n\r\nexport const DashboardTabContentWrapper = styled.div`\r\n ${({ theme }) =>\r\n spacing({\r\n theme,\r\n px: { xs: 0, sm: '16px', md: '24px' }\r\n })};\r\n width: 100%;\r\n`;\r\n\r\nexport const DashboardTabContentContainer = styled.div`\r\n ${({ theme }) => spacing({ theme, mt: 6 })};\r\n min-height: ${(props) => (props.isLoading ? '100vh' : '')};\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useLocation } from 'react-router-dom';\r\nimport axios from 'axios';\r\n\r\nimport PropertiesTab from './PropertiesTab';\r\nimport PropertyCertificatesTab from './PropertyCertificatesTab';\r\nimport ServiceRequestsTab from './ServiceRequestsTab';\r\nimport RegistrationsTab from './RegistrationsTab';\r\nimport ConsultationsTab from \"./ConsultationsTab\";\r\nimport {\r\n LAST_30_DAYS,\r\n PROPERTIES_TAB,\r\n PROPERTY_CERTIFICATES_TAB,\r\n REGISTRATIONS_TAB,\r\n SERVICE_REQUESTS_TAB,\r\n CONSULTATIONS_TAB\r\n} from './constant';\r\nimport DashboardTabsHeader from './DashboardTabsHeader';\r\nimport { IDashboardTabsProps } from './definitions';\r\nimport {\r\n DashboardTabContentContainer,\r\n DashboardTabContentWrapper,\r\n DashboardTabsWrapper\r\n} from './StyledDashboardTabs';\r\n\r\nimport { getDashboardTabContentData } from '_services/dashboardTabsService';\r\n\r\nexport const DashboardTabsContext = React.createContext(null);\r\nconst LIST_TAB = [\r\n SERVICE_REQUESTS_TAB,\r\n REGISTRATIONS_TAB,\r\n PROPERTIES_TAB,\r\n PROPERTY_CERTIFICATES_TAB,\r\n CONSULTATIONS_TAB\r\n];\r\n\r\nlet cancelToken;\r\n\r\nconst DashboardTabs: React.FC = ({ fields }) => {\r\n const [t] = useTranslation();\r\n const location = useLocation();\r\n const targetTab = location.pathname.split('/').pop();\r\n\r\n const [activeTab, setActiveTab] = useState(\r\n LIST_TAB.includes(targetTab) ? targetTab : SERVICE_REQUESTS_TAB\r\n );\r\n const [currentTab, setCurrentTab] = useState(activeTab);\r\n const [currentTabContent, setCurrentTabContent] = useState();\r\n const [loading, setLoading] = useState(false);\r\n const [error, setError] = useState(null);\r\n const [currentFilter, setCurrentFilter] = useState({\r\n [SERVICE_REQUESTS_TAB]: LAST_30_DAYS,\r\n [PROPERTY_CERTIFICATES_TAB]: LAST_30_DAYS\r\n });\r\n const [showMoreLoading, setShowMoreLoading] = useState(false);\r\n const [filters, setFilters] = useState<[]>([]);\r\n\r\n const tabList = fields?.data?.datasource?.tabs;\r\n const notificationMsg = tabList?.find((tab) => tab.tabName.value === activeTab)\r\n ?.notificationMessage?.value;\r\n const unavailableMessage = tabList?.find((tab) => tab.tabName.value === activeTab)\r\n ?.unavailableMessage?.value;\r\n const description = tabList?.find((tab) => tab.tabName.value === activeTab)?.description?.value;\r\n const tabName = currentTabContent?.tabName;\r\n const totalItems = currentTabContent?.results?.totalItems?.toString();\r\n const nextPage = currentTabContent?.results?.nextPage?.toString();\r\n const items = currentTabContent?.results?.items;\r\n const showRequest = currentTabContent?.results?.items?.length;\r\n\r\n const changeActiveTab = (tabName: string) => {\r\n setActiveTab(tabName);\r\n };\r\n\r\n const changeFilter = async (apiLink: string, filter: string) => {\r\n setError(false);\r\n setLoading(true);\r\n setCurrentTabContent(null);\r\n setCurrentFilter((prevState) => ({ ...prevState, [activeTab]: filter }));\r\n //Check if there are any previous pending requests\r\n if (typeof cancelToken != typeof undefined) {\r\n cancelToken.cancel('Operation canceled due to new request.');\r\n }\r\n //Save the cancel token for the current request\r\n cancelToken = axios.CancelToken.source();\r\n try {\r\n const data = await getDashboardTabContentData(apiLink, {\r\n cancelToken: cancelToken.token\r\n });\r\n setLoading(false);\r\n setCurrentTabContent(data?.data?.tab);\r\n } catch (err) {\r\n if (!axios.isCancel(err)) {\r\n setError(err);\r\n setLoading(false);\r\n }\r\n }\r\n };\r\n\r\n const handleGetMoreItems = async () => {\r\n //call next page items api\r\n setError(false);\r\n setShowMoreLoading((prevState) => true);\r\n //Check if there are any previous pending requests\r\n if (typeof cancelToken != typeof undefined) {\r\n cancelToken.cancel('Operation canceled due to new request.');\r\n }\r\n //Save the cancel token for the current request\r\n cancelToken = axios.CancelToken.source();\r\n\r\n try {\r\n const res = await getDashboardTabContentData(nextPage, {\r\n cancelToken: cancelToken.token\r\n });\r\n const newTabContent = res?.data?.tab;\r\n\r\n setShowMoreLoading((prevState) => false);\r\n setCurrentTabContent((prevState) => ({\r\n ...newTabContent,\r\n results: {\r\n ...newTabContent?.results,\r\n items: [...prevState?.results?.items, ...newTabContent?.results?.items]\r\n }\r\n }));\r\n } catch (err) {\r\n if (!axios.isCancel(err)) {\r\n setShowMoreLoading((prevState) => false);\r\n setError(err);\r\n }\r\n }\r\n };\r\n\r\n const contextValue = {\r\n activeTab,\r\n changeActiveTab,\r\n currentFilter,\r\n changeFilter,\r\n showMoreData: {\r\n nextPage,\r\n tabName,\r\n showRequest,\r\n totalItems,\r\n showMoreLoading\r\n },\r\n loading,\r\n error,\r\n description,\r\n notificationMsg,\r\n unavailableMessage,\r\n handleGetMoreItems\r\n };\r\n\r\n useEffect(() => {\r\n //Call API to get tab api when change tab\r\n const activeFilter = currentFilter[activeTab];\r\n\r\n const fetchingContent = async () => {\r\n setLoading(true);\r\n setCurrentTabContent(null);\r\n setFilters([]);\r\n setError(false);\r\n //Check if there are any previous pending requests\r\n if (typeof cancelToken != typeof undefined) {\r\n cancelToken.cancel('Operation canceled due to new request.');\r\n }\r\n //Save the cancel token for the current request\r\n cancelToken = axios.CancelToken.source();\r\n\r\n try {\r\n const res = await getDashboardTabContentData(\r\n {\r\n activeTab,\r\n activeFilter\r\n },\r\n {\r\n cancelToken: cancelToken.token\r\n }\r\n );\r\n setLoading(false);\r\n setCurrentTabContent(res?.data?.tab);\r\n } catch (err) {\r\n if (!axios.isCancel(err)) {\r\n setLoading(false);\r\n setError(err);\r\n }\r\n }\r\n };\r\n\r\n // fetch tab data if tab is not unavailable\r\n if(!unavailableMessage){\r\n fetchingContent();\r\n }\r\n\r\n setCurrentTab(activeTab);\r\n }, [activeTab]);\r\n\r\n useEffect(() => {\r\n if (currentTabContent && currentTabContent.filters) {\r\n setFilters(currentTabContent.filters);\r\n }\r\n }, [currentTabContent]);\r\n\r\n const renderTabContent = () => {\r\n switch (currentTab) {\r\n case SERVICE_REQUESTS_TAB:\r\n return ;\r\n case PROPERTY_CERTIFICATES_TAB:\r\n return ;\r\n case REGISTRATIONS_TAB:\r\n return ;\r\n case PROPERTIES_TAB:\r\n return ;\r\n case CONSULTATIONS_TAB:\r\n return ;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {renderTabContent()}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DashboardTabs;\r\n","import React, { createContext, useState, useEffect } from 'react';\r\nimport { usePrevious } from '_utils/hooks';\r\nimport { Optionalize } from '_utils/types';\r\nimport { ChildrenPropTypes } from '_types';\r\n\r\nexport interface MenuContextProps {\r\n menuActive: boolean;\r\n setMenuActive: (active: boolean) => void;\r\n}\r\n\r\nconst MenuContext = createContext({\r\n menuActive: false,\r\n setMenuActive: null\r\n});\r\n\r\nfunction MenuProvider({ children }) {\r\n // state\r\n const [menuActive, setMenuActive] = useState(false);\r\n const prevMenuActive = usePrevious(menuActive);\r\n\r\n useEffect(() => {\r\n if (menuActive && !prevMenuActive) {\r\n document.body.classList.add('menu-active');\r\n } else if (!menuActive && prevMenuActive) {\r\n document.body.classList.remove('menu-active');\r\n }\r\n\r\n return () => {\r\n document.body.classList.remove('menu-active');\r\n };\r\n }, [menuActive, prevMenuActive]);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nMenuProvider.propTypes = {\r\n children: ChildrenPropTypes\r\n};\r\n\r\nexport default MenuProvider;\r\n\r\nexport const MenuConsumer = MenuContext.Consumer;\r\n\r\nexport function withMenuContext(\r\n WrappedComponent: React.ComponentType\r\n) {\r\n // Try to create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withMenuContext: React.FC> = (props) => {\r\n return (\r\n \r\n {(value) => }\r\n \r\n );\r\n };\r\n\r\n withMenuContext.displayName = `withMenuContext(${displayName})`;\r\n\r\n return withMenuContext;\r\n}\r\n","import React, { createContext, useState, useEffect } from 'react';\r\nimport { usePrevious } from '_utils/hooks';\r\nimport { Optionalize } from '_utils/types';\r\nimport { ChildrenPropTypes } from '_types';\r\n\r\nexport interface UserDropdownContextProps {\r\n userDropdownActive: boolean;\r\n setUserDropdownActive: (active: boolean) => void;\r\n}\r\n\r\nconst UserDropdownContext = createContext({\r\n userDropdownActive: false,\r\n setUserDropdownActive: null\r\n});\r\n\r\nfunction UserDropdownProvider({ children }) {\r\n // state\r\n const [userDropdownActive, setUserDropdownActive] = useState(false);\r\n const prevUserDropdownActive = usePrevious(userDropdownActive);\r\n\r\n useEffect(() => {\r\n if (userDropdownActive && !prevUserDropdownActive) {\r\n document.body.classList.add('menu-active');\r\n } else if (!userDropdownActive && prevUserDropdownActive) {\r\n document.body.classList.remove('menu-active');\r\n }\r\n\r\n return () => {\r\n document.body.classList.remove('menu-active');\r\n };\r\n }, [userDropdownActive, prevUserDropdownActive]);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nUserDropdownProvider.propTypes = {\r\n children: ChildrenPropTypes\r\n};\r\n\r\nexport default UserDropdownProvider;\r\n\r\nexport const UserDropdownConsumer = UserDropdownContext.Consumer;\r\n\r\nexport function withUserDropdownContext<\r\n T extends UserDropdownContextProps = UserDropdownContextProps\r\n>(WrappedComponent: React.ComponentType) {\r\n // Try to create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withUserDropdownContext: React.FC> = (props) => {\r\n return (\r\n \r\n {(value) => }\r\n \r\n );\r\n };\r\n\r\n withUserDropdownContext.displayName = `withUserDropdownContext(${displayName})`;\r\n\r\n return withUserDropdownContext;\r\n}\r\n","import React, { createContext, useState } from 'react';\r\nimport { Optionalize } from '_utils/types';\r\nimport { ChildrenPropTypes } from '_types';\r\n\r\nexport interface IUserProfile {\r\n userDisplayName?: string;\r\n userFullName?: string;\r\n email?: string;\r\n isAuthenticated: boolean;\r\n canTrust: boolean;\r\n silentSignInUrl?: string;\r\n signOutUrl?: string;\r\n sessionExpiredUrl?: string;\r\n}\r\n\r\nexport interface UserProfileContextProps {\r\n userProfile: IUserProfile;\r\n setUserProfile: (data: IUserProfile) => void;\r\n}\r\n\r\nconst USER_DATA_INIT = {\r\n userDisplayName: '',\r\n userFullName: '',\r\n email: '',\r\n isAuthenticated: false,\r\n canTrust: false, //true if data got from sitecoreContext after update route\r\n silentSignInUrl: '',\r\n signOutUrl: '',\r\n sessionExpiredUrl: ''\r\n};\r\n\r\nconst UserProfileContext = createContext({\r\n userProfile: USER_DATA_INIT,\r\n setUserProfile: null\r\n});\r\n\r\nfunction UserProfileProvider({ children }) {\r\n // state\r\n const [userProfile, setUserProfile] = useState(USER_DATA_INIT);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nUserProfileProvider.propTypes = {\r\n children: ChildrenPropTypes\r\n};\r\n\r\nexport default UserProfileProvider;\r\n\r\nexport const UserProfileConsumer = UserProfileContext.Consumer;\r\n\r\nexport function withUserProfileContext(\r\n WrappedComponent: React.ComponentType\r\n) {\r\n // Try to create a nice displayName for React Dev Tools.\r\n const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n\r\n const withUserProfileContext: React.FC> = (props) => {\r\n return (\r\n \r\n {(value) => }\r\n \r\n );\r\n };\r\n\r\n withUserProfileContext.displayName = `withUserProfileContext(${displayName})`;\r\n\r\n return withUserProfileContext;\r\n}\r\n","import styled from 'styled-components';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { listReset, heading_l, text_s, depth } from '_utils/styles';\r\nimport { spacing } from '_utils/props';\r\nimport { TRANSITION_DURATION } from '.';\r\n\r\nexport const Nav = styled.nav`\r\n background-color: ${({ theme }) => theme.colors.menu.container.background};\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n width: calc(100% - 48px);\r\n height: 100%;\r\n display: flex;\r\n justify-content: flex-end;\r\n transform: translateX(100%);\r\n transition: transform ${() => TRANSITION_DURATION + 'ms'} cubic-bezier(0.42, 0, 0.59, 1);\r\n z-index: ${depth.MENU};\r\n pointer-events: auto;\r\n overflow-y: auto;\r\n\r\n &.active {\r\n transform: translateX(0);\r\n }\r\n\r\n @media (min-width: 524px) {\r\n width: 476px;\r\n }\r\n`;\r\n\r\nexport const List = styled.ul`\r\n ${listReset};\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n max-width: 476px;\r\n height: auto;\r\n ${({ theme }) => spacing({ theme, pt: 4 })};\r\n`;\r\n\r\nexport const Item = styled.li`\r\n color: ${({ theme }) => theme.colors.menu.item.color};\r\n display: block;\r\n flex: none;\r\n`;\r\n\r\nexport const Divider = styled.li`\r\n background-color: ${({ theme }) => theme.colors.menu.divider};\r\n ${({ theme }) => spacing({ theme, my: 2 })};\r\n height: 1px;\r\n flex: none;\r\n`;\r\n\r\nexport const Link = styled(NavLink)`\r\n color: inherit;\r\n text-decoration: none;\r\n ${({ theme }) => spacing({ theme, py: 2, px: 6 })};\r\n outline: 0;\r\n display: block;\r\n\r\n body:not(.safe-focus-removal) &:focus {\r\n background-color: ${({ theme }) => theme.colors.menu.item.backgroundActive};\r\n }\r\n\r\n &[href] {\r\n &:hover,\r\n &:active {\r\n background-color: ${({ theme }) => theme.colors.menu.item.backgroundActive};\r\n }\r\n transition: background-color 0.1s linear;\r\n }\r\n`;\r\n\r\nexport const Label = styled.span`\r\n ${heading_l};\r\n line-height: 1.2 !important;\r\n display: block;\r\n overflow: hidden;\r\n\r\n ${Link}[href]:active &,\r\n ${Link}[href]:hover & {\r\n color: ${({ theme }) => theme.colors.menu.item.colorActive};\r\n }\r\n`;\r\n\r\nexport const Description = styled.span`\r\n display: block;\r\n color: ${({ theme }) => theme.colors.menu.item.description};\r\n ${text_s}\r\n overflow: hidden;\r\n \r\n ${({ theme }) => spacing({ theme, mt: 1, mb: 0 })};\r\n &:first-of-type {\r\n margin-top: 0;\r\n }\r\n\r\n body:not(.safe-focus-removal) ${Link}[href]:focus & {\r\n color: ${({ theme }) => theme.colors.menu.item.descriptionActive};\r\n }\r\n\r\n ${Link}[href]:active &,\r\n ${Link}[href]:hover & {\r\n color: ${({ theme }) => theme.colors.menu.item.descriptionActive};\r\n }\r\n`;\r\n","import React, { useRef, createRef, useState, useEffect, useCallback, forwardRef } from 'react';\r\nimport { usePrevious, useTimer } from '_utils/hooks';\r\nimport { compose } from 'ramda';\r\nimport { withSitecoreContext } from '@sitecore-jss/sitecore-jss-react';\r\nimport { Nav, List, Item, Label, Link, Divider, Description } from './StyledMainMenu';\r\nimport { withMenuContext, MenuContextProps } from '_containers/MenuContext';\r\nimport { enableBodyScroll, disableBodyScroll } from '_utils/helpers';\r\nimport NavItem, { LinkProps } from '../NavItem';\r\n\r\nexport const TRANSITION_DURATION = 200;\r\n\r\n// https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html\r\n\r\ntype MenuItem = {\r\n label: any;\r\n description: any;\r\n link: LinkProps;\r\n};\r\n\r\ntype MenuItemProps = {\r\n menuActive: boolean;\r\n onItemClick: (e) => void;\r\n onFocus?: (e) => void;\r\n onBlur?: (e) => void;\r\n item: MenuItem;\r\n};\r\n\r\ntype MenuItemHandlerProps = {\r\n tabIndex?: number;\r\n 'aria-hidden': boolean;\r\n onClick?: any;\r\n onFocus?: any;\r\n onBlur?: any;\r\n};\r\n\r\nexport type Ref = HTMLElement;\r\n\r\nconst MenuItem = forwardRef(\r\n ({ item, menuActive, onItemClick, onFocus, onBlur }, ref) => {\r\n if (!item) {\r\n return null;\r\n }\r\n\r\n const label = item.label?.value || '';\r\n const description = item.description?.value || '';\r\n\r\n // nullify links without urls\r\n const link = item && item.link && item.link.url ? item.link : null;\r\n\r\n // only create handlers if we have a link\r\n let handlers: MenuItemHandlerProps = link\r\n ? {\r\n tabIndex: menuActive ? 0 : -1,\r\n 'aria-hidden': menuActive ? false : true,\r\n onClick: onItemClick,\r\n onFocus: onFocus,\r\n onBlur: onBlur\r\n }\r\n : null;\r\n\r\n return (\r\n - \r\n \r\n {label && }\r\n {description && {description}}\r\n \r\n
\r\n );\r\n }\r\n);\r\n\r\ninterface MenuProps extends MenuContextProps {\r\n fields: {\r\n data: {\r\n datasource: {\r\n primaryNavigation: any;\r\n secondaryNavigation: any;\r\n };\r\n };\r\n };\r\n sitecoreContext: any;\r\n onMenuItemFocus: (e: Event, itemIndex: number) => void;\r\n}\r\n\r\nconst MenuItemList = ({\r\n menuActive,\r\n onItemClick,\r\n enabledItemRefs,\r\n onItemFocus,\r\n onItemBlur,\r\n getEnabledItemsIndex,\r\n menuItems\r\n}) => {\r\n return menuItems.map((item, index) => {\r\n let enabledItemsIndex = getEnabledItemsIndex(item);\r\n let enabledItemProps =\r\n enabledItemsIndex > -1\r\n ? {\r\n ref: enabledItemRefs.current[enabledItemsIndex],\r\n onFocus: (e) => {\r\n onItemFocus(e, enabledItemsIndex);\r\n },\r\n onBlur: onItemBlur\r\n }\r\n : {};\r\n return (\r\n \r\n );\r\n });\r\n};\r\n\r\nconst MainMenu: React.FC = ({ fields, menuActive, setMenuActive }) => {\r\n const datasource = fields?.data?.datasource;\r\n\r\n const primaryNavigation = datasource?.primaryNavigation?.[0] || [];\r\n const secondaryNavigation = datasource?.secondaryNavigation?.[0] || [];\r\n\r\n const primaryItems = primaryNavigation?.links || [];\r\n const secondaryItems = secondaryNavigation?.links || [];\r\n\r\n const containerRef = useRef();\r\n const prevMenuActive = usePrevious(menuActive);\r\n const [focusItemIndex, setFocusItemIndex] = useState(-1);\r\n const { setTimer, cancelTimer } = useTimer();\r\n // const timerRef = useRef(null);\r\n const [transitioning, setTransitioning] = useState(false);\r\n\r\n // return all menu items that have a valid links\r\n const getAllEnabledItems = useCallback(() => {\r\n const enabledPrimaryItems = primaryItems.filter((item) => item.link && item.link.url);\r\n const enabledSecondaryItems = secondaryItems.filter((item) => item.link && item.link.url);\r\n return enabledPrimaryItems.concat(enabledSecondaryItems);\r\n }, [primaryItems, secondaryItems]);\r\n\r\n // store array of enabled menu item refs inside another ref\r\n const enabledItemRefs = useRef(getAllEnabledItems().map(() => createRef()));\r\n\r\n const focusFirstItem = () => {\r\n if (document.body && document.body.classList.contains('safe-focus-removal')) {\r\n // dont highlight item if menu was opened with mouse\r\n return;\r\n }\r\n if (enabledItemRefs.current && enabledItemRefs.current.length) {\r\n let first = enabledItemRefs.current[0];\r\n if (first && first.current) {\r\n first.current.focus();\r\n }\r\n }\r\n };\r\n\r\n // focus listener effect:\r\n // 1. auto focus first menu item when menu opened\r\n // 2. close menu if focused element is outside of menu\r\n useEffect(\r\n () => {\r\n // const menuButton = document.getElementById('menu-button');\r\n const container = containerRef.current;\r\n\r\n const focusListener = (e) => {\r\n let target: HTMLElement = e.target;\r\n\r\n if (target && target.id === 'menu-button') {\r\n return;\r\n }\r\n\r\n // iterate through parents until we find menu container or no more\r\n while (target) {\r\n if (target === container) {\r\n // found menu container, bail\r\n return;\r\n }\r\n // move up to next parent\r\n target = target.parentNode as HTMLElement;\r\n }\r\n // focus outside, close menu\r\n setMenuActive(false);\r\n };\r\n\r\n // add/remove listener when menu opened/closed\r\n if (menuActive && !prevMenuActive) {\r\n setTransitioning(true);\r\n setTimer(() => {\r\n document.body.addEventListener('focus', focusListener, true);\r\n setTransitioning(false);\r\n focusFirstItem();\r\n }, TRANSITION_DURATION + 10);\r\n\r\n disableBodyScroll(container, {\r\n reserveScrollBarGap: true\r\n });\r\n // without setImmediate effect clean up runs immediately\r\n } else if (!menuActive && prevMenuActive) {\r\n document.body.removeEventListener('focus', focusListener, true);\r\n enableBodyScroll(container);\r\n setTransitioning(true);\r\n\r\n setTimer(() => {\r\n setTransitioning(false);\r\n }, TRANSITION_DURATION + 10);\r\n }\r\n\r\n // clean up\r\n return () => {\r\n cancelTimer();\r\n enableBodyScroll(container);\r\n document.body.removeEventListener('focus', focusListener, true);\r\n };\r\n },\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [menuActive]\r\n );\r\n\r\n const onItemClick = () => {\r\n setMenuActive(false);\r\n };\r\n\r\n const onItemFocus = (e, enabledItemsIndex) => {\r\n if (transitioning) {\r\n return;\r\n }\r\n if (!menuActive) {\r\n setMenuActive(true);\r\n }\r\n setFocusItemIndex(enabledItemsIndex);\r\n };\r\n\r\n const onItemBlur = (e) => {\r\n setFocusItemIndex(-1);\r\n };\r\n\r\n const onKeyDown = (e, focusItemIndex, enabledItemElems) => {\r\n if (!menuActive || focusItemIndex === -1 || !enabledItemElems || !enabledItemElems.length) {\r\n return;\r\n }\r\n\r\n let prevIndex = focusItemIndex === 0 ? enabledItemElems.length - 1 : focusItemIndex - 1;\r\n let nextIndex = focusItemIndex === enabledItemElems.length - 1 ? 0 : focusItemIndex + 1;\r\n\r\n if (e && e.keyCode === 35) {\r\n // END\r\n if (enabledItemElems[enabledItemElems.length - 1]) {\r\n e.preventDefault();\r\n enabledItemElems[enabledItemElems.length - 1].focus();\r\n }\r\n } else if (e && e.keyCode === 36) {\r\n // HOME\r\n if (enabledItemElems[0]) {\r\n e.preventDefault();\r\n enabledItemElems[0].focus();\r\n }\r\n } else if (e && e.keyCode === 38) {\r\n // UP\r\n if (enabledItemElems[prevIndex]) {\r\n e.preventDefault();\r\n enabledItemElems[prevIndex].focus();\r\n }\r\n } else if (e && e.keyCode === 40) {\r\n // DOWN\r\n if (enabledItemElems[nextIndex]) {\r\n e.preventDefault();\r\n enabledItemElems[nextIndex].focus();\r\n }\r\n }\r\n };\r\n\r\n const getEnabledItemsIndex = (item) => {\r\n return getAllEnabledItems().indexOf(item);\r\n };\r\n\r\n if (!datasource) {\r\n return null;\r\n }\r\n\r\n return (\r\n {\r\n const enabledItemElems = enabledItemRefs.current\r\n ? enabledItemRefs.current.map(({ current }) => current)\r\n : [];\r\n onKeyDown(e, focusItemIndex, enabledItemElems);\r\n }}\r\n >\r\n \r\n \r\n {secondaryItems && secondaryItems.length && (\r\n <>\r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default compose(withSitecoreContext(), withMenuContext)(MainMenu);\r\n","import React from 'react';\r\nimport { withSvg } from './Svg';\r\n\r\nconst SvgUser = () => (\r\n \r\n);\r\n\r\nexport default withSvg(18, 18)(SvgUser);\r\n","import styled from 'styled-components';\r\nimport { buttonReset, svg, focusOutline } from '_utils/styles';\r\nimport depth from '_utils/styles/depth';\r\nimport mq from '_utils/styles/mq';\r\nimport { Grid } from '_utils/components/Corporate';\r\n\r\nexport const Dialog = styled.div`\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: ${depth.MODAL};\r\n background-color: ${({ theme }) => theme.colors.modal.container.background};\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n scroll-behavior: smooth;\r\n`;\r\n\r\nexport const Layout = styled.div`\r\n ${mq('lg')} {\r\n margin-top: 64px;\r\n }\r\n`;\r\n\r\nexport const CloseContainer = styled.div`\r\n width: 100%;\r\n height: 64px;\r\n flex: none;\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n\r\n ${mq('lg')} {\r\n width: calc(100% - 15px);\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n }\r\n`;\r\n\r\nexport const CloseButton = styled.button`\r\n ${() => buttonReset()}\r\n\r\n &:focus {\r\n ${({ theme }) => focusOutline({ theme })}\r\n .safe-focus-removal & {\r\n outline: 0;\r\n }\r\n }\r\n\r\n position: relative;\r\n padding: 10px;\r\n display: inline-block;\r\n margin-right: 8px;\r\n`;\r\n\r\nexport const CrossWrapper = styled.span`\r\n ${() => svg(28, 28)};\r\n width: 28px;\r\n flex: none;\r\n path {\r\n fill: ${({ theme }) => theme.colors.modal.close.fill};\r\n }\r\n\r\n ${CloseButton}:hover & {\r\n path {\r\n fill: ${({ theme }) => theme.colors.modal.close.fillHover};\r\n }\r\n }\r\n`;\r\n\r\nexport const ContentContainer = styled(Grid.Container)``;\r\n","import React, { useEffect, useRef } from 'react';\r\nimport FocusTrap from 'focus-trap-react';\r\nimport {\r\n Dialog,\r\n Layout,\r\n CloseContainer,\r\n ContentContainer,\r\n CloseButton,\r\n CrossWrapper\r\n} from './StyledModal';\r\nimport { withModalContext, ModalContextProps } from '_containers/ModalContext';\r\nimport { enableBodyScroll, disableBodyScroll } from '_utils/helpers';\r\nimport { usePrevious } from '_utils/hooks';\r\nimport LargeCross from '_utils/icons/LargeCross';\r\nimport { useTranslation } from 'react-i18next';\r\nimport ScreenReader from '_utils/components/Corporate/ScreenReader';\r\n\r\ntype ModalProps = ModalContextProps & {};\r\n\r\nconst Modal: React.FC = ({ modal }) => {\r\n const [t] = useTranslation();\r\n\r\n const { id, content, onClose, dismissable } = modal || {};\r\n\r\n const dialogRef = useRef();\r\n\r\n const contentContainerRef = useRef();\r\n\r\n const prevModalContent = usePrevious(Boolean(content));\r\n\r\n useEffect(\r\n () => {\r\n const dialog = dialogRef.current;\r\n\r\n const contentContainer = contentContainerRef.current;\r\n\r\n const clickOutsideListener = (e) => {\r\n let target: HTMLElement = e.target;\r\n\r\n // iterate through parents until we find menu dialog or no more\r\n while (target) {\r\n if (target === contentContainer) {\r\n // target is in contentContainer, bail\r\n return;\r\n }\r\n // move up to next parent\r\n target = target.parentNode as HTMLElement;\r\n }\r\n // focus outside, close menu\r\n onClose();\r\n };\r\n\r\n // add/remove listener when menu opened/closed\r\n if (content && !prevModalContent) {\r\n disableBodyScroll(dialog);\r\n if (dismissable) {\r\n document.body.addEventListener('mousedown', clickOutsideListener, true);\r\n }\r\n // without setImmediate effect clean up runs immediately\r\n } else if (!content && prevModalContent) {\r\n if (dismissable) {\r\n document.body.removeEventListener('mousedown', clickOutsideListener, true);\r\n }\r\n enableBodyScroll(dialog);\r\n }\r\n\r\n // clean up\r\n return () => {\r\n if (dismissable) {\r\n document.body.removeEventListener('mousedown', clickOutsideListener, true);\r\n }\r\n enableBodyScroll(dialog);\r\n };\r\n },\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [content]\r\n );\r\n\r\n if (!content) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default withModalContext(Modal);\r\n","import React from 'react';\r\nimport { Placeholder, VisitorIdentification } from '@sitecore-jss/sitecore-jss-react';\r\nimport styled, { css, keyframes } from 'styled-components';\r\nimport { WithContext, Organization } from 'schema-dts';\r\nimport { JsonLd } from 'react-schemaorg';\r\n\r\n// import { withTranslation } from 'react-i18next';\r\nimport MenuProvider from '_containers/MenuContext';\r\nimport ModalProvider from '_containers/ModalContext';\r\nimport Modal from '_components/Corporate/Modal';\r\nimport { buildSearchUrl } from '_utils/helpers';\r\nimport { TRANSITION_DELAY } from '_utils/components/Corporate/Scroller/';\r\nimport { spacing } from '_utils/props';\r\nimport { cssInlineSvg } from '_utils/styles/svg';\r\nimport { depth } from '_utils/styles';\r\n\r\ninterface LayoutProps {\r\n context: any;\r\n route: any;\r\n loading: boolean;\r\n}\r\n\r\n/*\r\n DEFAULT APP LAYOUT\r\n*/\r\n\r\nconst StructuredData: React.FC = ({ context }) => {\r\n if (typeof context.siteInfo === 'undefined') {\r\n return null;\r\n }\r\n\r\n const {\r\n siteInfo: { siteBaseUrl: url }\r\n } = context;\r\n\r\n const OrganizationData: WithContext = {\r\n '@context': 'https://schema.org',\r\n '@type': 'Organization',\r\n url: url,\r\n logo: `${url}/dist/cityofsydney/cos-logo.jpg`\r\n };\r\n\r\n // This should be of type WebSite not any\r\n // But WebSite type doesn't like 'query-input' which is required for SearchAction\r\n // @see https://developers.google.com/search/docs/data-types/sitelinks-searchbox#potential-action-query-input\r\n const WebSiteData: WithContext = {\r\n '@context': 'https://schema.org',\r\n '@type': 'WebSite',\r\n url: url,\r\n potentialAction: {\r\n '@type': 'SearchAction',\r\n target: `${url}${buildSearchUrl({ term: '' })}{search_term_string}`,\r\n 'query-input': 'required name=search_term_string'\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const MainContainer = styled.div`\r\n flex: 1 0 auto;\r\n\r\n > * {\r\n &:last-child {\r\n ${({ theme }) => spacing({ theme, pb: 7 })}\r\n }\r\n }\r\n`;\r\n\r\nconst pulse = keyframes`\r\n 100% {\r\n opacity: 0;\r\n }\r\n`;\r\n\r\nconst LoadingScreen = styled.div`\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background-color: white;\r\n z-index: ${depth.LOADING_SCREEN};\r\n\r\n ${({ active }) => {\r\n return css`\r\n opacity: ${active ? 1 : 0};\r\n pointer-events: ${active ? 'auto' : 'none'};\r\n transition: ${active ? TRANSITION_DELAY - 50 : 400}ms opacity ease-in;\r\n `;\r\n }}\r\n\r\n > div {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 6vw;\r\n height: 6vh;\r\n display: block;\r\n animation: 2000ms ${pulse} linear infinite alternate;\r\n\r\n &:before {\r\n content: '';\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n background-image: ${cssInlineSvg(\r\n ``\r\n )};\r\n background-size: contain;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n\r\n ${({ active }) => {\r\n return css`\r\n opacity: ${active ? 1 : 0};\r\n transition: 400ms opacity ease-in ${active ? 1500 : 0}ms;\r\n `;\r\n }}\r\n }\r\n }\r\n`;\r\n\r\nconst DefaultLayout: React.FC = (props: LayoutProps) => {\r\n const { route, loading } = props;\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default DefaultLayout;\r\n","import styled, { css } from 'styled-components';\r\nimport { Text, Image as SCImage } from '@sitecore-jss/sitecore-jss-react';\r\nimport ContentRichText from '../ContentRichText';\r\nimport { spacing } from '_utils/props';\r\nimport {\r\n mq,\r\n heading_xxxl,\r\n heading_m,\r\n buttonReset,\r\n text_xscap,\r\n svg,\r\n depth,\r\n text_s,\r\n hideOnPrint,\r\n iconColorOnPrint\r\n} from '_utils/styles';\r\nimport { MainContainer } from '_layouts/DefaultLayout';\r\n\r\nconst forceWhiteLinkStyles = () => css`\r\n a {\r\n box-shadow: none;\r\n text-decoration: underline;\r\n &:visited {\r\n color: inherit;\r\n }\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n ${mq('lg')} {\r\n overflow: hidden;\r\n }\r\n\r\n ${MainContainer} > &:last-child {\r\n ${({ theme }) => spacing({ theme, mb: 9 })}\r\n }\r\n`;\r\n\r\nexport const Heading = styled(Text)`\r\n ${heading_xxxl}\r\n`;\r\n\r\nexport const Description = styled(ContentRichText)`\r\n ${heading_m}\r\n\r\n &&& {\r\n line-height: 24px;\r\n\r\n ${mq('md')} {\r\n line-height: 36px;\r\n }\r\n\r\n ${forceWhiteLinkStyles};\r\n }\r\n\r\n &:not(:first-child) {\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n }\r\n`;\r\n\r\nexport const SearchContainer = styled.div`\r\n &:not(:first-child) {\r\n ${({ theme }) => spacing({ theme, mt: 4 })};\r\n }\r\n\r\n height: 48px;\r\n\r\n ${mq('md')} {\r\n height: 56px;\r\n }\r\n\r\n ${hideOnPrint}\r\n`;\r\n\r\nexport const IntroColumn = styled.div`\r\n position: relative;\r\n color: ${({ theme }) => theme.colors.element.white};\r\n background-color: ${({ theme }) => theme.colors.background.tertiary};\r\n width: 100%;\r\n\r\n ${({ theme }) => spacing({ theme, py: 9, px: 5 })};\r\n\r\n ${mq('lg')} {\r\n ${({ theme }) => spacing({ theme, px: 6 })};\r\n width: 50%;\r\n }\r\n\r\n ${mq('xl')} {\r\n ${({ theme }) => spacing({ theme, px: 8 })};\r\n width: 36%;\r\n }\r\n z-index: 2;\r\n\r\n @media print {\r\n ${({ theme }) => spacing({ theme, py: 2, px: 3 })};\r\n }\r\n`;\r\n\r\nexport const TextContainer = styled.div`\r\n position: relative;\r\n z-index: 3;\r\n`;\r\n\r\nexport const Circle = styled.div`\r\n ${mq.lessThan('lg')} {\r\n display: none;\r\n }\r\n\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n height: 171%;\r\n width: 2048px;\r\n\r\n img {\r\n position: absolute;\r\n background-color: ${({ theme }) => theme.colors.background.tertiary};\r\n border-radius: 9999px;\r\n height: 100%;\r\n width: auto;\r\n right: 0;\r\n transform: translateX(9.6%);\r\n }\r\n`;\r\n\r\nexport const ImageColumn = styled.div`\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n padding-top: 75%;\r\n ${mq('sm')} {\r\n padding-top: 56.25%;\r\n }\r\n\r\n ${mq('lg')} {\r\n padding-top: 0;\r\n width: 50%;\r\n }\r\n\r\n ${mq('xl')} {\r\n width: 64%;\r\n }\r\n @media print {\r\n padding-top: 35%;\r\n }\r\n z-index: 1;\r\n`;\r\n\r\nexport const Figure = styled.figure`\r\n display: block;\r\n height: 100%;\r\n margin: 0;\r\n @media print {\r\n width: 50%;\r\n height: 50%;\r\n }\r\n`;\r\n\r\nexport const Image = styled(SCImage)`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n font-family: 'object-fit: cover;';\r\n @media print {\r\n width: 50%;\r\n left: 25%;\r\n }\r\n`;\r\n\r\nconst captionBox = ({ theme }) => css`\r\n color: ${theme.colors.element.white};\r\n background-color: ${theme.colors.background.octonary};\r\n border-radius: 4px;\r\n`;\r\n\r\nexport const Caption = styled(ContentRichText)``;\r\n\r\nexport const CaptionButtonContainer = styled.div`\r\n position: absolute;\r\n right: 8px;\r\n bottom: 8px;\r\n line-height: 1;\r\n max-width: calc(100% - 16px);\r\n\r\n ${mq('md')} {\r\n right: 16px;\r\n bottom: 16px;\r\n max-width: calc(100% - 64px);\r\n }\r\n @media print {\r\n right: 25%;\r\n }\r\n`;\r\n\r\nexport const CaptionButton = styled.button`\r\n ${buttonReset}\r\n ${text_xscap}\r\n ${captionBox}\r\n margin: 0;\r\n max-width: 100%;\r\n ${({ theme }) => spacing({ theme, px: '8px', py: '4px' })}\r\n outline: 0;\r\n\r\n &:disabled {\r\n cursor: auto;\r\n }\r\n\r\n body:not(.safe-focus-removal) &:focus {\r\n /* psuedo focus outline */\r\n &:before {\r\n position: absolute;\r\n left: -4px;\r\n top: 0px;\r\n content: '';\r\n width: calc(100% + 8px);\r\n height: calc(100% + 4px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 6px;\r\n }\r\n }\r\n`;\r\n\r\nexport const CaptionButtonInnerContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n /* allows text inside to be truncated @see https://css-tricks.com/flexbox-truncated-text/ */\r\n min-width: 0;\r\n`;\r\n\r\nexport const CameraWrapper = styled.span`\r\n ${svg(16, 16)};\r\n width: 13px;\r\n flex: none;\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n`;\r\n\r\nexport const CaptionButtonTitle = styled(Text)`\r\n margin-left: 9px;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n width: 100%;\r\n`;\r\n\r\nexport const CaptionContainer = styled.figcaption`\r\n ${captionBox}\r\n ${text_s}\r\n position: absolute;\r\n margin: 0;\r\n right: 8px;\r\n bottom: 2px;\r\n transform: translateY(100%);\r\n max-width: calc(100% - 16px);\r\n\r\n /* use visibility to prevent reflow when toggling and a11y*/\r\n visibility: hidden;\r\n\r\n &.active {\r\n visibility: visible;\r\n }\r\n\r\n ${({ theme }) => spacing({ theme, p: 2 })}\r\n\r\n ${mq('sm')} {\r\n max-width: 305px;\r\n }\r\n\r\n ${mq('md')} {\r\n transform: none;\r\n right: 16px;\r\n bottom: 44px;\r\n }\r\n\r\n &&& {\r\n ${forceWhiteLinkStyles};\r\n }\r\n\r\n z-index: ${depth.CAPTION_POPUP};\r\n`;\r\n\r\nexport const Credit = styled(Text)`\r\n ${text_xscap}\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n`;\r\n","import styled, { keyframes } from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport {\r\n svg,\r\n buttonReset,\r\n inputReset,\r\n text_m,\r\n mq,\r\n hideOnPrint,\r\n iconColorOnPrint,\r\n color,\r\n depth,\r\n focusOutline,\r\n safeFocusRemoval\r\n} from '_utils/styles';\r\nimport { Container as HomepageBannerContainer } from '_components/Corporate/HomepageBanner/StyledHomepageBanner';\r\n\r\nconst formAnimation = keyframes`\r\n from { \r\n width: 40px;\r\n }\r\n to {\r\n width: 100%;\r\n }\r\n`;\r\n\r\nconst formAnimationClose = keyframes`\r\n from { \r\n width: 100%;\r\n visibility: visible;\r\n }\r\n to {\r\n width: 40px;\r\n visibility: visible;\r\n }\r\n`;\r\n\r\nconst closeButtonAnimation = keyframes`\r\n from {\r\n width: auto;\r\n }\r\n to {\r\n width: auto;\r\n }\r\n`;\r\n\r\nconst searchContainerAnimation = keyframes`\r\n from {\r\n width: calc(100% - 87px);\r\n z-index: ${depth.MENU_BUTTON + 1};\r\n position: absolute;\r\n }\r\n to {\r\n width: calc(100% - 87px);\r\n z-index: ${depth.MENU_BUTTON + 1};\r\n position: absolute;\r\n }\r\n`;\r\n\r\nconst searchContainerMdUpAnimation = keyframes`\r\n from {\r\n width: calc(100% - 321px);\r\n z-index: ${depth.MENU_BUTTON + 1};\r\n position: absolute;\r\n }\r\n to {\r\n width: calc(100% - 321px);\r\n z-index: ${depth.MENU_BUTTON + 1};\r\n position: absolute;\r\n }\r\n`;\r\n\r\nexport const SearchContainer = styled.div`\r\n display: flex;\r\n height: 40px;\r\n justify-content: flex-end;\r\n\r\n &.absolute {\r\n z-index: ${depth.MENU_BUTTON + 1};\r\n position: absolute;\r\n /* calculate width base on header padding, logo button, search margin */\r\n ${mq.between('md', 'lg')} {\r\n left: 297px;\r\n width: calc(100% - 321px);\r\n }\r\n ${mq.lessThan('md')} {\r\n left: 71px;\r\n width: calc(100% - 87px);\r\n }\r\n }\r\n\r\n &.static {\r\n position: static;\r\n ${mq.between('md', 'lg')} {\r\n animation: ${searchContainerMdUpAnimation} 0.2s linear;\r\n }\r\n ${mq.lessThan('md')} {\r\n animation: ${searchContainerAnimation} 0.2s linear;\r\n }\r\n }\r\n`;\r\n\r\nexport const FormContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n flex-grow: 1;\r\n background-color: rgba(255, 255, 255, 0);\r\n transition: all 0.2s linear;\r\n width: 0;\r\n\r\n ${SearchContainer}.absolute & {\r\n background-color: rgba(255, 255, 255, 1);\r\n }\r\n\r\n ${SearchContainer}.static & {\r\n background-color: rgba(255, 255, 255, 0);\r\n }\r\n`;\r\n\r\nexport const Form = styled.form`\r\n background-color: ${({ theme }) => theme.colors.form.input.background};\r\n border-radius: 8px;\r\n visibility: hidden;\r\n position: relative;\r\n border: 2px solid transparent;\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n width: 100%;\r\n\r\n &.search--focused {\r\n border: 2px solid ${({ theme }) => theme.colors.search.focus};\r\n }\r\n ${hideOnPrint}\r\n\r\n ${HomepageBannerContainer} & {\r\n border: 4px solid ${({ theme }) => theme.colors.element.secondary};\r\n\r\n &.search--focused {\r\n border: 4px solid ${({ theme }) => theme.colors.search.focus};\r\n }\r\n }\r\n\r\n ${SearchContainer}.static & {\r\n animation: ${formAnimationClose} 0.2s linear;\r\n }\r\n\r\n ${SearchContainer}.absolute & {\r\n visibility: visible;\r\n width: 100%;\r\n animation: ${formAnimation} 0.2s linear;\r\n }\r\n\r\n ${mq.between('sm', 'lg')} {\r\n visibility: ${({ isLoggedIn }) => (isLoggedIn ? 'visible' : 'hidden')};\r\n }\r\n\r\n ${mq('lg')} {\r\n visibility: visible;\r\n }\r\n`;\r\n\r\nexport const Input = styled.input`\r\n ${inputReset};\r\n ${text_m}\r\n margin: 0;\r\n flex-grow: 1;\r\n outline: 0;\r\n border-bottom-left-radius: 8px;\r\n border-top-left-radius: 8px;\r\n width: 100%;\r\n\r\n ${({ theme }) => spacing({ theme, pl: 2, pr: '50px' })}\r\n\r\n ${HomepageBannerContainer} & {\r\n ${({ theme }) => spacing({ theme, pr: '58px' })}\r\n\r\n ${mq('md')} {\r\n ${({ theme }) => spacing({ theme, pr: '64px' })}\r\n font-size: 22px;\r\n }\r\n }\r\n`;\r\n\r\nexport const Submit = styled.button`\r\n ${buttonReset}\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: ${({ theme }) => theme.colors.search.submit.background};\r\n\r\n position: absolute;\r\n top: -2px;\r\n right: -2px;\r\n width: 42px;\r\n height: calc(100% + 4px);\r\n\r\n border-bottom-right-radius: 8px;\r\n border-top-right-radius: 8px;\r\n outline: 0;\r\n\r\n ${HomepageBannerContainer} & {\r\n top: 0;\r\n right: 0;\r\n height: 100%;\r\n width: 46px;\r\n border-bottom-right-radius: 3px;\r\n border-top-right-radius: 3px;\r\n\r\n ${mq('md')} {\r\n width: 54px;\r\n }\r\n }\r\n\r\n /* when input has focus */\r\n :hover,\r\n .search--focused & {\r\n background-color: ${({ theme }) => theme.colors.search.focus};\r\n }\r\n\r\n /* when button has focus */\r\n body:not(.safe-focus-removal) &:focus {\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n left: -4px;\r\n top: -4px;\r\n width: calc(100% + 8px);\r\n height: calc(100% + 8px);\r\n border: 2px solid ${({ theme }) => theme.colors.element.focused};\r\n border-radius: 10px;\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n }\r\n }\r\n\r\n body:not(.safe-focus-removal) ${HomepageBannerContainer} &:focus {\r\n &:before {\r\n top: -8px;\r\n width: calc(100% + 12px);\r\n height: calc(100% + 16px);\r\n }\r\n }\r\n`;\r\n\r\nexport const Icon = styled.span`\r\n ${svg(17, 17)}\r\n width: 17px;\r\n margin: 0 auto;\r\n\r\n /* ie11 cant do margin auto in flex */\r\n @media all and (-ms-high-contrast: none) {\r\n margin: 0;\r\n }\r\n\r\n ${HomepageBannerContainer} & {\r\n ${mq('md')} {\r\n width: 22px;\r\n }\r\n }\r\n\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.primary};\r\n }\r\n\r\n ${Submit}:hover &,\r\n .search--focused & {\r\n path {\r\n fill: ${({ theme }) => theme.colors.element.white};\r\n ${iconColorOnPrint}\r\n }\r\n }\r\n`;\r\n\r\nexport const CloseButton = styled.button`\r\n ${buttonReset};\r\n width: 0;\r\n background-color: ${color('all.white')};\r\n display: flex;\r\n align-items: center;\r\n\r\n &:focus-visible {\r\n ${safeFocusRemoval};\r\n ${focusOutline};\r\n }\r\n\r\n &[aria-expanded='true'] {\r\n width: auto;\r\n margin-left: 6px;\r\n\r\n ${mq('md')} {\r\n margin-left: 14px;\r\n }\r\n }\r\n\r\n &[aria-expanded='false'] {\r\n animation: ${closeButtonAnimation} 0.2s linear;\r\n }\r\n`;\r\n\r\nexport const CloseIcon = styled.span`\r\n margin: 10px;\r\n width: 20px;\r\n height: 11px;\r\n position: relative;\r\n display: block;\r\n`;\r\n\r\nexport const Bar = styled.span`\r\n position: absolute;\r\n width: 100%;\r\n height: 2px;\r\n left: 0px;\r\n top: 0px;\r\n background-color: ${({ theme }) => theme.colors.element.primary};\r\n opacity: 1;\r\n border-radius: 1px;\r\n transition: all 0.2s linear;\r\n\r\n &:nth-child(1) {\r\n ${CloseButton} [aria-expanded='true'] & {\r\n transform: translate3d(0, 5px, 0) rotate(45deg);\r\n }\r\n }\r\n &:nth-child(2) {\r\n transform: translate(0, 5px);\r\n ${CloseButton} [aria-expanded='true'] & {\r\n opacity: 0;\r\n }\r\n }\r\n &:nth-child(3) {\r\n transform: translate3d(0, 10px, 0);\r\n\r\n ${CloseButton} [aria-expanded='true'] & {\r\n transform: translate3d(0, 5px, 0) rotate(-45deg);\r\n }\r\n }\r\n`;\r\n\r\nexport const SearchIcon = styled.button`\r\n ${buttonReset}\r\n background-color: ${color('all.white')};\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n\r\n &:focus-visible {\r\n ${safeFocusRemoval};\r\n ${focusOutline};\r\n }\r\n\r\n ${mq('lg')} {\r\n width: 0;\r\n visibility: hidden;\r\n }\r\n \r\n ${mq.between('sm', 'lg')} {\r\n width: ${({ isLoggedIn }) => (!isLoggedIn ? 'auto' : '0')};\r\n visibility: ${({ isLoggedIn }) => (!isLoggedIn ? 'visible' : 'hidden')};\r\n }\r\n\r\n &[aria-hidden='true'] {\r\n width: 0;\r\n visibility: hidden;\r\n }\r\n`;\r\n","import React, { useState, useEffect, useRef, useContext } from 'react';\r\nimport { Search } from '_utils/icons';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { buildSearchUrl } from '_utils/helpers';\r\nimport { useTranslation } from 'react-i18next';\r\nimport ScreenReader from '_utils/components/Corporate/ScreenReader';\r\nimport { PageHeaderWithLoginContext } from '..';\r\n// import style\r\nimport {\r\n SearchContainer,\r\n FormContainer,\r\n Form,\r\n Input,\r\n Submit,\r\n SearchIcon,\r\n Icon,\r\n CloseButton,\r\n CloseIcon,\r\n Bar\r\n} from './StyledMainSearch';\r\n\r\ninterface MainSearchProps {\r\n placeholder?: string;\r\n isLoggedIn: boolean;\r\n}\r\n\r\nconst MainSearch: React.FC = ({ placeholder = undefined, isLoggedIn = false }) => {\r\n const [t] = useTranslation();\r\n const history = useHistory();\r\n const location = useLocation();\r\n const [focused, setFocused] = useState(false);\r\n const { isAbsoluteSearch, setIsAbsoluteSearch } = useContext(PageHeaderWithLoginContext);\r\n const { search, pathname } = location || {};\r\n const searchParams = new URLSearchParams(search);\r\n const [term, setTerm] = useState(searchParams.get('term') || '');\r\n const inputRef = useRef(null);\r\n const searchIconRef = useRef(null);\r\n\r\n if (!placeholder) {\r\n placeholder = t('search-placeholder-text');\r\n }\r\n\r\n const onSubmit = (e) => {\r\n if (e) {\r\n e.preventDefault();\r\n }\r\n\r\n history.push(buildSearchUrl({ term, page: 1 }));\r\n };\r\n\r\n useEffect(() => {\r\n if (pathname !== buildSearchUrl({})) {\r\n setTerm('');\r\n }\r\n }, [pathname]);\r\n\r\n useEffect(() => {\r\n if (isAbsoluteSearch) {\r\n // trigger search input focus\r\n inputRef.current.focus();\r\n } else if (isAbsoluteSearch === false) {\r\n searchIconRef.current.focus();\r\n }\r\n }, [isAbsoluteSearch]);\r\n\r\n return (\r\n \r\n \r\n \r\n setTerm(e.target.value)}\r\n onFocus={() => setFocused(true)}\r\n onBlur={() => setFocused(false)}\r\n onKeyDown={(e) => {\r\n if (e.keyCode === 27 && isAbsoluteSearch) {\r\n setIsAbsoluteSearch(false);\r\n }\r\n }}\r\n aria-label=\"Search\"\r\n value={term}\r\n ref={inputRef}\r\n aria-required=\"true\"\r\n />\r\n \r\n {t('search-accessible-search-button-label')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n setIsAbsoluteSearch(false)}\r\n aria-label=\"Close\"\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n setIsAbsoluteSearch(true)}\r\n ref={searchIconRef}\r\n >\r\n {t('search-accessible-search-button-label')}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default MainSearch;\r\n","import styled from 'styled-components';\r\nimport { buttonReset, mq, safeFocusRemoval, depth, hideOnPrint } from '_utils/styles';\r\n\r\nexport const Button = styled.button`\r\n ${buttonReset};\r\n ${safeFocusRemoval}\r\n display: flex;\r\n align-items: center;\r\n z-index: ${depth.MENU_BUTTON};\r\n\r\n &:focus {\r\n ${safeFocusRemoval}\r\n position: relative;\r\n outline-color: ${({ theme }) => theme.colors.element.focused};\r\n outline-offset: 2px;\r\n outline-width: 2px;\r\n outline-style: solid;\r\n }\r\n ${hideOnPrint}\r\n`;\r\n\r\nexport const Icon = styled.span`\r\n margin: 10px;\r\n width: 20px;\r\n height: 11px;\r\n position: relative;\r\n display: block;\r\n`;\r\n\r\nexport const Bar = styled.span`\r\n position: absolute;\r\n width: 100%;\r\n height: 2px;\r\n left: 0px;\r\n top: 0px;\r\n background-color: ${({ theme }) => theme.colors.element.primary};\r\n opacity: 1;\r\n transition: all 0.2s linear;\r\n border-radius: 1px;\r\n\r\n &:nth-child(1) {\r\n [aria-expanded='true'] & {\r\n transform: translate3d(0, 5px, 0) rotate(45deg);\r\n }\r\n }\r\n &:nth-child(2) {\r\n transform: translate(0, 5px);\r\n [aria-expanded='true'] & {\r\n opacity: 0;\r\n }\r\n }\r\n &:nth-child(3) {\r\n transform: translate3d(0, 10px, 0);\r\n\r\n [aria-expanded='true'] & {\r\n transform: translate3d(0, 5px, 0) rotate(-45deg);\r\n }\r\n }\r\n`;\r\n\r\nexport const Label = styled.span`\r\n display: none;\r\n padding-right: 4px;\r\n\r\n ${mq('lg')} {\r\n display: block;\r\n }\r\n`;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { compose } from 'ramda';\r\nimport { withMenuContext, MenuContextProps } from '_containers/MenuContext';\r\nimport { useTimer } from '_utils/hooks';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { withUserDropdownContext, UserDropdownContextProps } from '_containers/UserDropdownContext';\r\n\r\nimport { Button, Icon, Bar, Label } from './StyledMenuButton';\r\n\r\nconst TRANSITION_DURATION = 200;\r\n\r\ninterface MenuButtonProps extends MenuContextProps, UserDropdownContextProps {}\r\n\r\nconst MenuButton: React.FC = ({\r\n menuActive,\r\n setMenuActive,\r\n userDropdownActive,\r\n setUserDropdownActive\r\n}) => {\r\n const [t] = useTranslation();\r\n const [enabled, setEnabled] = useState(true);\r\n const { setTimer, cancelTimer } = useTimer();\r\n\r\n // clean up\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n useEffect(() => cancelTimer(), []);\r\n\r\n const handleClick = () => {\r\n if (!enabled) {\r\n return;\r\n }\r\n\r\n setMenuActive(!menuActive);\r\n\r\n if (userDropdownActive) {\r\n setUserDropdownActive(false);\r\n }\r\n\r\n setEnabled(false);\r\n\r\n setTimer(() => {\r\n setEnabled(true);\r\n }, TRANSITION_DURATION + 10);\r\n };\r\n\r\n const handleFocus = () => {\r\n if (!enabled) {\r\n return;\r\n }\r\n if (menuActive) {\r\n setEnabled(false);\r\n setMenuActive(false);\r\n }\r\n\r\n setTimer(() => {\r\n setEnabled(true);\r\n }, TRANSITION_DURATION + 10);\r\n };\r\n\r\n return (\r\n