\r\n
\r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\nimport React, { useContext, useRef, useState } from 'react';\r\nimport {\r\n IonButton,\r\n IonContent,\r\n IonPage,\r\n IonList,\r\n IonItem,\r\n IonLabel,\r\n IonInput,\r\n IonLoading,\r\n IonGrid,\r\n IonHeader,\r\n IonToolbar,\r\n IonText\r\n} from '@ionic/react';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\nimport { loginUser } from '../data/user/loginUser';\r\n\r\nimport { TopBanner } from '../components/TopBanner';\r\n\r\nimport { handleContentShortcodes } from '../helpers/handleContentShortcodes';\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\n\r\nimport topBannerPlaceholderImg from '../images/top-banner-default.jpg';\r\n\r\nexport const LoginPage = () => {\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n const [ username, setUsername ] = useState('');\r\n const [ password, setPassword ] = useState('');\r\n \r\n const formRef = useRef(null);\r\n \r\n const handleSubmit = async e => {\r\n e.preventDefault();\r\n await loginUser(username, password, state, dispatch);\r\n };\r\n \r\n const logo = state.config.data.logo;\r\n const topBannerImg = state.config.data.banner_image ? state.config.data.banner_image : topBannerPlaceholderImg;\r\n const loginPageText = handleContentShortcodes(state.config.data.text.login_page, state);\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 {state.user.loginErrors}\r\n
\r\n ) }\r\n \r\n \r\n \r\n tag is\r\n * appropriate for this purpose. For example:\r\n *\r\n * \r\n * \r\n * \r\n * \r\n *\r\n * See the code comments below for details of the 'prop(s)' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport React from 'react';\r\n\r\nimport './BackgroundShape.css';\r\n\r\n/**\r\n * The following optional 'prop(s)' can be passed to this component:\r\n *\r\n * @param {string} position\r\n * Set this to 'left' or 'right', to display the shape on the left or right side of the page.\r\n * @param {boolean} contentTop\r\n * Set this to TRUE to display the shape higher up in the page content (the horizontal position may also be\r\n * slightly adjusted, to display the shape closer to the content).\r\n * @param {boolean} hideOnSmallScreens\r\n * Set this to TRUE to hide the shape on smaller (i.e. mobile device) screens. Otherwise the shape will be\r\n * shown on these screens.\r\n * @param {boolean} hideOnLargeScreens\r\n * Set this to TRUE to hide the shape on larger (i.e. tablet and desktop) screens. Otherwise the shape will be\r\n * shown on these screens.\r\n */\r\nexport const BackgroundShape = ({\r\n position,\r\n contentTop,\r\n hideOnSmallScreens,\r\n hideOnLargeScreens\r\n}) => {\r\n \r\n // Set default sizing and positioning, to display the shape on the right side of the page\r\n let svgWidth= '2810.9'; let svgHeight= '2807.123';\r\n let svgViewBox= '0 0 2810.9 2807.123';\r\n let pathTransform = 'matrix(0.259, -0.966, 0.966, 0.259, 0, 2212.817)';\r\n let shapeClassNames = 'background-shape right';\r\n \r\n // Override the default sizing and positioning if the shape should be shown on the left side of the page\r\n if(position === 'left') {\r\n svgWidth = '3132.067'; svgHeight= '3134.023';\r\n svgViewBox= '0 0 3132.067 3134.023';\r\n pathTransform = 'translate(3132.067 1988.584) rotate(150)';\r\n shapeClassNames = 'background-shape left';\r\n }\r\n \r\n if(hideOnSmallScreens) {\r\n shapeClassNames += ' mobile-hide';\r\n }\r\n \r\n if(hideOnLargeScreens) {\r\n shapeClassNames += ' desktop-hide';\r\n }\r\n \r\n if(contentTop) {\r\n shapeClassNames += ' content-top';\r\n }\r\n \r\n return (\r\n \r\n \r\n );\r\n }\r\n \r\n return paras;\r\n};","/**\r\n * This component renders the main content that appears at the top of various pages. On the left and right hand side\r\n * of this content, illustrated stick figures are displayed; these are automatically moved below the content and\r\n * appear centred horizontally at smaller screen sizes. Skeleton text is shown while the text content is still\r\n * loading, whereas the illustrated stick figures are always displayed. Any 'shortcodes' within the content will\r\n * automatically be replaced with the appropriate HTML content.\r\n *\r\n * The IonGrid component (see https://ionicframework.com/docs/api/grid & https://ionicframework.com/docs/layout/grid)\r\n * is used to control the sizing and positioning of the text content and illustrated stick figure images, utilising\r\n * built-in IonGrid features as well as some custom styling to adjust the columns at different screen sizes.\r\n *\r\n * The page content displayed by this component is retrieved from the app state.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonCol, IonGrid, IonImg, IonRow, IonSkeletonText } from '@ionic/react';\r\n\r\n/* Get app context and any associated action(s), so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get required custom app components */\r\nimport { SkeletonTextParagraphs } from './SkeletonTextParagraphs';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtmlWithShortcodes } from '../helpers/sanitiseHtml';\r\n\r\n/* Import image file asset(s) used by this component */\r\nimport stickFigureImg1 from '../images/stick-figure-1.png';\r\nimport stickFiguresImg2 from '../images/stick-figures-2.png';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './TopContent.css';\r\n\r\nexport const TopContent = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n { ! state.page.isLoading ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};","import { changeCurrentPage } from '../data/page/page.actions';\r\nimport { sanitise } from './sanitiseHtml';\r\n\r\n/**\r\n * This function updates the current app state as soon as a page navigation button/link is clicked upon,\r\n * allowing certain known data about the new page to be updated 'instantly', thus providing a more seamless\r\n * user experience.\r\n *\r\n * The 'CHANGE_CURRENT_PAGE' action is dispatched with the relevant new page data if we are navigating to\r\n * a different page; nothing happens if we are already on the page being navigated to.\r\n *\r\n * [Note that this function does not directly handle the transition to the new page; that functionality\r\n * is provided separately by the Ionic & React Router functionality.]\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * 1. Import this function at the top of any React component file that includes links/buttons pointing to a new page:\r\n *\r\n * import { changePage } from '../helpers/changePage';\r\n *\r\n * 2. Add code similar to this in the component (the precise syntax will vary depending on the type of link/button,\r\n * but it should include an onClick() prop calling this function, as well as a prop that handles the page navigation):\r\n *\r\n * changePage(item, state, dispatch)}>Page\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n *\r\n * @param {{link: string, template: string, title: string, section_title: string, banner_image: string}} newPageData\r\n * Object containing data about the new page being navigated to. It may include data such as the new page link\r\n * path, template, title and banner image - the app state will be updated to store this new data if present.\r\n * All of these data properties are optional however. Any other properties that cannot be used to directly\r\n * update the app page state will be ignored.\r\n * @param {Object} state\r\n * Object containing the current overall app state. This can be retrieved from the AppContext.\r\n * @param {function} dispatch\r\n * Dispatch function to use to update the global application state when the current page changes;\r\n * this can be retrieved from the AppContext.\r\n */\r\nexport function changePage(newPageData, state, dispatch) {\r\n // Don't do anything if the clicked link/button points to the page we are already visiting\r\n if(newPageData.hasOwnProperty('link') && state.page.path === newPageData.link) {\r\n return;\r\n }\r\n \r\n /* Assemble new payload data to update the page state, based on the available new page data properties\r\n (use empty strings if any of these properties are not present in the new page data) */\r\n const newPagePayload = {\r\n template: newPageData.hasOwnProperty('template') ? newPageData.template : '',\r\n title: newPageData.hasOwnProperty('title') ? newPageData.title : '',\r\n section_title: newPageData.hasOwnProperty('section_title') ? newPageData.section_title : '',\r\n banner_image: newPageData.hasOwnProperty('banner_image') ? newPageData.banner_image : '',\r\n }\r\n \r\n // Dispatch the action to update the page state, so that it contains the new data\r\n dispatch(changeCurrentPage(newPagePayload));\r\n \r\n // Update page title\r\n if(state.config.data.title && newPageData.title) {\r\n // Use this method to ensure HTML entities are correctly decoded, whilst minimising security risks\r\n const pageTitle = state.config.data.title + ' - ' + newPageData.title;\r\n document.querySelector('title').innerHTML = sanitise(pageTitle);\r\n }\r\n}","/**\r\n * This component renders a 'card' to display for the specified topic. The card includes a title, optional\r\n * brief excerpt, button, and optional full-width image. When clicked/tapped, the card links to another page\r\n * within the app. A grid column contains the card.\r\n *\r\n * Cards are rendered using the IonCard component (see https://ionicframework.com/docs/api/card), and the\r\n * IonCol component surrounds each card. This component should therefore be used in conjunction with the\r\n * IonGrid and IonRow components (see https://ionicframework.com/docs/api/grid and\r\n * https://ionicframework.com/docs/layout/grid).\r\n *\r\n * See the code comments below for details of the 'props' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport {\r\n IonButton,\r\n IonCard,\r\n IonCardContent,\r\n IonCardHeader,\r\n IonCardTitle,\r\n IonCol,\r\n IonImg\r\n} from '@ionic/react';\r\n\r\n/* Get app context and associated actions, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\nimport { changePage } from '../helpers/changePage';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './TopicCard.css';\r\n\r\n/**\r\n * The following 'props' should be passed to this component:\r\n *\r\n * @param {{title: string, link: string, excerpt: string, ...}} topic\r\n * Object containing the topic title to display within the card, the app link URL path to navigate to if the\r\n * card is clicked/tapped, and a brief excerpt summarising the topic content (can contain special characters\r\n * and basic HTML). The excerpt is optional, and will not be shown if it is not specified. The topic object\r\n * may also contain additional properties such as 'template' and 'banner_image', which will be used if the\r\n * user clicks/taps on the card to navigate to a new page.\r\n * @param {string} image\r\n * The complete URL of a full-width image to display in the card.\r\n * This image is optional, and no image will be shown unless an image URL is specified.\r\n * @param {number} sizeSm\r\n * A number from 1 to 12, indicating how wide the card should appear on small (e.g. mobile) screens. A value\r\n * of 6 means the card should appear at 50% width (probably adjacent to another similar card). This number\r\n * is optional, and the width will be automatically calculated if unspecified.\r\n * @param {number} sizeMd\r\n * A number from 1 to 12, indicating how wide the card should appear on medium (e.g. tablet) screens. A value\r\n * of 6 means the card should appear at 50% width (probably adjacent to another similar card). This number\r\n * is optional, and the width will be automatically calculated if unspecified.\r\n */\r\nexport const TopicCard = (\r\n {\r\n topic,\r\n image,\r\n sizeSm,\r\n sizeMd\r\n }\r\n) => {\r\n \r\n // Use app context to retrieve the current app state & dispatch state updates\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n return (\r\n \r\n changePage(topic, state, dispatch)}\r\n >\r\n \r\n {image && (\r\n \r\n \r\n \r\n \r\n {topic.excerpt && (\r\n \r\n )}\r\n \r\n \r\n {state.config.data.text.read_more} \r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * This component renders a dummy 'topic card' containing skeleton content - including areas for a title,\r\n * brief excerpt, button, and optional full-width image. A grid column contains the card. It is intended\r\n * for display in situations where the real topic cards are still being loaded. This component is based upon\r\n * the similar `TopicCard` component, which is designed to display real content instead.\r\n *\r\n * Cards are rendered using the IonCard component (see https://ionicframework.com/docs/api/card), and the\r\n * IonCol component surrounds each card. This component should therefore be used in conjunction with the\r\n * IonGrid and IonRow components (see https://ionicframework.com/docs/api/grid and\r\n * https://ionicframework.com/docs/layout/grid).\r\n *\r\n * See the code comments below for details of the 'prop(s)' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport {\r\n IonButton,\r\n IonCard,\r\n IonCardContent,\r\n IonCardHeader,\r\n IonCardTitle,\r\n IonCol,\r\n IonSkeletonText\r\n} from '@ionic/react';\r\n\r\n/* Get app context and any associated action(s), so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './TopicCard.css';\r\n\r\n/**\r\n * The following 'prop(s)' must be passed to this component:\r\n *\r\n * @param {boolean} hasImage\r\n * Is the actual topic card expected to include an image? If so, an additional skeleton block area is displayed\r\n * at the top of the card, to simulate this image.\r\n */\r\nexport const TopicCardLoading = (\r\n {\r\n hasImage,\r\n sizeSm,\r\n sizeMd\r\n }\r\n) => {\r\n \r\n // Use app context to retrieve the current app state\r\n const { state } = useContext(AppContext);\r\n \r\n return (\r\n \r\n \r\n {hasImage &&\r\n \r\n \r\n \r\n \r\n \r\n {state.config.data.text.read_more} \r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * This function retrieves details of the menu items associated with the specified menu ID. This can be used\r\n * to retrieve the menu items for the correct menu, based on the applicable menu location.\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * 1. Import this function at the top of any React component file that needs to display a menu:\r\n *\r\n * import { getMenuItems } from '../helpers/getMenu';\r\n *\r\n * 2. Add code similar to this within the component (this code will retrieve the menu items for the 'header' menu):\r\n *\r\n * const menuItems = getMenuItems(state.config.data.menus, state.config.data.menu_locations.header);\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n *\r\n * @param {array} menus\r\n * All the menus that are currently available in the app. This could be retrieved from the app state.\r\n * @param {number} menuId\r\n * The ID of the menu to retrieve items for. This could be retrieved from the app state, based on the ID defined\r\n * for a specified menu location. The items will be retrieved from the menus data passed into this function.\r\n *\r\n * @returns {array}\r\n * The items in the relevant menu. This will be an empty array if the items cannot be retrieved for this menu.\r\n */\r\nexport function getMenuItems(menus, menuId) {\r\n // Loop through each menu until a menu with the specified ID is located\r\n for(let i = 0; i < menus.length; i++) {\r\n let curMenu = menus[i];\r\n if(curMenu.id === menuId) {\r\n // Get the items in this menu\r\n return curMenu.items;\r\n }\r\n }\r\n \r\n // The relevant menu cannot be located based on the supplied ID, so just return empty array\r\n return [];\r\n}","/**\r\n * @todo review & document\r\n */\r\n\r\nimport { IonGrid, IonRow } from \"@ionic/react\";\r\nimport React, { useContext } from \"react\";\r\nimport { TopicCard } from \"./TopicCard\";\r\nimport { TopicCardLoading } from './TopicCardLoading';\r\n\r\nimport ctaPlaceholderImg from '../images/card-img-default.jpg';\r\nimport { getMenuItems } from '../helpers/getMenu';\r\nimport { AppContext } from '../data/AppContext';\r\n\r\nexport const HomeTopCTAs = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n \r\n const items = getMenuItems(state.config.data.menus, state.config.data.menu_locations.header);\r\n if(items.length === 0 && ! state.page.isLoading) {\r\n return null;\r\n }\r\n \r\n const ctasLimit = 3; let numDisplayedCtas = 0; const cols = [];\r\n const ctaSize = items.length >= 4 /* account for the skipped 'home' item */ ? 4 : 6;\r\n \r\n for(let curItemNum = 0; curItemNum < items.length; curItemNum++) {\r\n // Do not assemble any further cards if we have already assembled cards for all available topics\r\n if(numDisplayedCtas === ctasLimit) {\r\n break;\r\n }\r\n \r\n // Get the next available item\r\n let item = items[curItemNum];\r\n \r\n if(item.type === 'custom' || item.target === '_blank' || item.link === '/') {\r\n continue;\r\n }\r\n // Get featured image, or 'default' image if item appears to have no featured image\r\n const featuredImg = item.featured_image ? item.featured_image : ctaPlaceholderImg;\r\n \r\n // Assemble the next item card and add it to the array of assembled columns within the current row.\r\n cols.push(\r\n \r\n \r\n { ! state.page.isLoading ? (\r\n \r\n {cols}\r\n \r\n ) : (\r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};","/**\r\n * This function provides functionality to open a new window pointing to the URL of an external Live Chat provider.\r\n * It can be used to display this window when a link or button in the app is clicked.\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * 1. Import this function at the top of any React component file that needs to show a Live Chat overlay/window:\r\n *\r\n * import { openLiveChat } from '../helpers/openLiveChat';\r\n *\r\n * 2. Add code similar to this within the component (this code will display the Live Chat overlay/window\r\n * when the relevant element is clicked):\r\n *\r\n * openLiveChat(state)}>Live Chat\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nexport const openLiveChat = (state) => {\r\n if(!state.config.liveChatEnabled) {\r\n console.error('Live Chat is currently unavailable!');\r\n return;\r\n }\r\n \r\n if ( ! window.liveChatWindow || window.liveChatWindow.closed) {\r\n logLiveChatStatus('Opening Live Chat window with URL: ' + state.config.data.live_chat_url);\r\n window.liveChatWindow = window.open(\r\n state.config.data.live_chat_url,\r\n 'ChatWindow',\r\n 'menubar=0,location=0,scrollbars=auto,resizable=1,status=0,width=400,height=600'\r\n );\r\n // window.liveChatWindow.opener = null;\r\n } else {\r\n logLiveChatStatus('Live Chat window is already open - re-focussing window...');\r\n window.liveChatWindow.focus();\r\n }\r\n}\r\n\r\n/**\r\n * Log the current Live Chat status to the browser console, if this is enabled based on the configured\r\n * environment variables.\r\n *\r\n * @param {string} message\r\n * Current Live Chat status message\r\n */\r\nexport const logLiveChatStatus = (message) => {\r\n if(\r\n process.env.REACT_APP_ENABLE_LIVE_CHAT_LOGGING &&\r\n process.env.REACT_APP_ENABLE_LIVE_CHAT_LOGGING === \"1\"\r\n ) {\r\n console.log(message);\r\n }\r\n}","/**\r\n * @todo review & document\r\n */\r\n\r\nimport React, { useContext } from 'react';\r\nimport {IonCol, IonGrid, IonIcon, IonImg, IonRow, IonSkeletonText} from '@ionic/react';\r\nimport { call, chatbubbles, mail } from 'ionicons/icons';\r\n\r\nimport './HomeContactDetails.css';\r\n\r\nimport contactPlaceholderImg from '../images/home-contact-default.jpg';\r\nimport { AppContext } from '../data/AppContext';\r\nimport { sanitiseHtmlWithShortcodes } from '../helpers/sanitiseHtml';\r\nimport { getContactEmailAddress, getContactPhoneNumber, getContactPhoneUrl } from '../helpers/getContactDetails';\r\nimport { openLiveChat } from '../helpers/openLiveChat';\r\n\r\nexport const HomeContactDetails = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {isLoading, data} = state.page;\r\n \r\n // Don't display this component unless it is enabled within the page settings\r\n if(data.home_display_contact_section !== 'yes' && ! isLoading) {\r\n return null;\r\n }\r\n \r\n // Get the contact details displayed in this component\r\n const phone = getContactPhoneNumber(state);\r\n const phoneUrl = getContactPhoneUrl(state);\r\n const email = getContactEmailAddress(state);\r\n \r\n return (\r\n \r\n \r\n \r\n { ! isLoading ? (\r\n \r\n \r\n { ! isLoading ? (\r\n <>\r\n \r\n \r\n {state.config.data.display_phone !== 'no' &&\r\n data.home_display_phone_number !== 'no' &&\r\n phone && (\r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\nimport React, { useContext } from 'react';\r\nimport { IonCol, IonGrid, IonImg, IonRow, IonSkeletonText } from '@ionic/react';\r\nimport { SkeletonTextParagraphs } from './SkeletonTextParagraphs';\r\n\r\nimport contentPlaceholderImg from '../images/home-bottom-content-default.jpg';\r\nimport { AppContext } from '../data/AppContext';\r\nimport { sanitiseHtmlWithShortcodes } from '../helpers/sanitiseHtml';\r\n\r\nimport './HomeBottomContent.css';\r\n\r\nexport const HomeBottomContent = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {isLoading, data} = state.page;\r\n \r\n // Don't display this component unless it is enabled within the page settings\r\n if(data.home_display_bottom_section !== 'yes' && ! isLoading) {\r\n return null;\r\n }\r\n \r\n return (\r\n \r\n \r\n \r\n { ! isLoading ? (\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n { ! isLoading ? (\r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\nimport {IonGrid, IonRow} from \"@ionic/react\";\r\nimport React from \"react\";\r\nimport {sanitiseHtml} from \"../helpers/sanitiseHtml\";\r\nimport {TopicCard} from \"./TopicCard\";\r\nimport { TopicCardLoading } from './TopicCardLoading';\r\n\r\nimport featuredTopicPlaceholderImg from '../images/card-img-default.jpg';\r\n\r\nconst FeaturedTopics = (\r\n {\r\n heading,\r\n topics,\r\n isLoading\r\n }\r\n) => {\r\n \r\n const topicsLimit = 2; const cols = [];\r\n \r\n // Assemble the featured topic cards to display if content is not still loading\r\n if( ! isLoading) {\r\n // Do not render any topic cards if there are no topics\r\n if(topics.length === 0) {\r\n return null;\r\n }\r\n \r\n // Loop through each row and column, assembling the topic card to render in each grid 'cell'\r\n for(let curTopicNum = 0; curTopicNum < topics.length; curTopicNum++) {\r\n // Do not assemble any further cards if we have already assembled cards for all available topics\r\n if(curTopicNum === topicsLimit) {\r\n break;\r\n }\r\n \r\n // Get the next available topic\r\n let topic = topics[curTopicNum];\r\n \r\n // Get featured image, or 'default' image if topic appears to have no featured image\r\n const featuredImg = topic.featured_image ? topic.featured_image : featuredTopicPlaceholderImg;\r\n \r\n // Assemble the next topic card and add it to the array of assembled columns within the current row.\r\n cols.push(\r\n \r\n changePage(topicListing, state, dispatch)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n \r\n // Proceed to the next available topic listing\r\n curTopicListingNum++;\r\n }\r\n \r\n // Assemble the next row based on the assembled columns, and add this to the array of assembled rows.\r\n rows.push(\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n } else {\r\n // Otherwise, if content is still loading, assemble 4 topic listing icon cards containing skeleton content\r\n let cols = [];\r\n for(let curColNum = 0; curColNum < totalNumCols; curColNum++) {\r\n cols.push(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n // Add a row containing the assembled card columns\r\n rows.push(\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n \r\n // Render assembled topic listing icon card rows in a grid, with a top heading\r\n return (\r\n <>\r\n \r\n {rows}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default TopicListingIconCards;","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonCol, IonGrid, IonImg, IonRow, IonSkeletonText } from '@ionic/react';\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the app components that are used by this page content template */\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\nimport FeaturedTopics from '../components/FeaturedTopics';\r\nimport TopicListingIconCards from '../components/TopicListingIconCards';\r\nimport { SkeletonTextParagraphs } from '../components/SkeletonTextParagraphs';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtmlWithShortcodes } from '../helpers/sanitiseHtml';\r\n\r\n/* Import image file asset(s) used by this template */\r\nimport sectionRootPlaceholderImg from '../images/featured-img-default.jpg';\r\nimport stickFiguresImg from '../images/stick-figures-3.png';\r\n\r\nexport const SectionRootTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {page} = state;\r\n \r\n return (\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n } else {\r\n // Otherwise, if content is still loading, assemble 4 topic cards containing skeleton content\r\n let cols = [];\r\n for(let curTopicNum = 0; curTopicNum < totalNumCols; curTopicNum++) {\r\n cols.push(\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n \r\n // Render assembled topic card rows in a grid, surrounded by a full-width grey background, with a top heading\r\n return (\r\n \r\n \r\n \r\n { ! isLoading ? (\r\n \r\n \r\n { ! isLoading ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid } from '@ionic/react';\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the app components that are used by this page content template */\r\nimport TopicCards from '../components/TopicCards';\r\nimport { Quote } from '../components/Quote';\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\nimport { TopContent } from '../components/TopContent';\r\n\r\nexport const TopicListingTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {page} = state;\r\n \r\n return (\r\n \r\n \r\n );\r\n};\r\n","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid } from '@ionic/react';\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the app components that are used by this page content template */\r\nimport { SkeletonTextParagraphs } from '../components/SkeletonTextParagraphs';\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtmlWithShortcodes } from '../helpers/sanitiseHtml';\r\n\r\nexport const BasicTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {page} = state;\r\n \r\n return (\r\n \r\n {banners.map((banner, index) => {\r\n const topBannerImg = banner.banner_image ? banner.banner_image : topBannerPlaceholderImg;\r\n return (\r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\nimport React, { useContext } from 'react';\r\n\r\nimport topBannerPlaceholderImg from '../images/top-banner-default.jpg';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { TopBannerSlider } from './TopBannerSlider';\r\nimport { TopBanner } from './TopBanner';\r\n\r\nexport const TopBanners = () => {\r\n \r\n const { state } = useContext(AppContext);\r\n const { data } = state.page;\r\n \r\n const location = useLocation();\r\n if(location.pathname === '/' && state.config.data.homepage_banners.length > 0) {\r\n return \r\n \r\n );\r\n \r\n};","/**\r\n * This component renders a search bar, which is styled to reflect the type of device being used to access the PWA.\r\n * The search bar is expected to be displayed within the header. It includes the following special functionality:\r\n *\r\n * - On mobile devices, it is automatically shown or hidden via CSS styling (incorporating a transition effect),\r\n * depending on the current search bar visibility setting stored in the app state.\r\n * - After the user has entered some new search text, the entered search text is stored in the app state, and the\r\n * user is automatically taken to the 'search' page. A 'debounce' effect is used to ensure this only occurs after\r\n * the user has finished (or has briefly paused) typing.\r\n * - A URL-encoded version of the entered search text is included in a query string within the search page URL,\r\n * to allow this data to be preserved if the user subsequently reloads the search results page.\r\n * - The text displayed within the search bar is retrieved from the current app state.\r\n * - When the user is automatically taken to the search page, the search bar remains focused, so they can continue\r\n * typing if required.\r\n * - If the user is not currently on the search page but has previously entered some search text, they are\r\n * automatically taken back to this search page if they click/tap on the search bar, so they can view the search\r\n * results again, and/or amend their search query to see new results.\r\n *\r\n * The search bar is rendered using the IonSearchbar component (see https://ionicframework.com/docs/api/searchbar),\r\n * and is surrounded by a IonToolbar component (see https://ionicframework.com/docs/api/toolbar), so must only\r\n * be used in locations where these toolbars are allowed.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext, useRef } from 'react';\r\nimport {\r\n IonGrid,\r\n IonSearchbar,\r\n IonToolbar,\r\n useIonViewDidEnter\r\n} from '@ionic/react';\r\nimport { useHistory, useLocation } from 'react-router';\r\n\r\n/* Get app context and any associated action(s), so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\nimport { setSearchQuery } from '../data/search/search.actions';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './SearchBar.css';\r\n\r\nexport const SearchBar = () => {\r\n // Use app context to retrieve and update the current app search state as required\r\n const {state, dispatch} = useContext(AppContext);\r\n \r\n // Detect if we are currently on the 'Search' page\r\n const { pathname } = useLocation();\r\n const onSearchPage = pathname.substring(0, 7) === '/search';\r\n \r\n // Ensure the search bar stays focused after we have navigated to the 'Search' page\r\n const searchBarRef = useRef(null);\r\n useIonViewDidEnter(() => {\r\n if (onSearchPage &&\r\n searchBarRef.current &&\r\n typeof searchBarRef.current.setFocus !== 'undefined'\r\n ) {\r\n searchBarRef.current.setFocus();\r\n }\r\n });\r\n \r\n /* Handle changes to the text in the search bar (note the `debounce` property on the search bar means there may\r\n be a brief pause before this function gets executed, to allow the user to finish typing)\r\n */\r\n const history = useHistory();\r\n function onSearchBarTextChange(e) {\r\n const searchText = e.detail.value;\r\n \r\n // Don't perform any actions unless the search text has changed since it was last updated in the app state\r\n if(state.search.query === searchText) {\r\n return;\r\n }\r\n \r\n // Update the app state to store the new search text\r\n dispatch(setSearchQuery(searchText));\r\n \r\n // Update the browser URL, to point to the search page, and to include the new (URL-encoded) search text\r\n history.push('/search?query=' + encodeURIComponent(searchText));\r\n }\r\n \r\n // This runs when the search bar is focused; it returns the user back to the search page if required\r\n function onSearchBarFocus(e) {\r\n // Take user back to search page if they are not already on it, and they previously entered some search text\r\n if( ! onSearchPage && state.search.query.length > 0) {\r\n history.push('/search?query=' + encodeURIComponent(state.search.query));\r\n }\r\n }\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\nimport {\r\n IonButton,\r\n IonButtons,\r\n IonGrid,\r\n IonHeader,\r\n IonIcon,\r\n IonMenuButton,\r\n IonToolbar\r\n} from \"@ionic/react\";\r\nimport React, { useContext } from \"react\";\r\n\r\nimport {AppContext} from \"../data/AppContext\";\r\n\r\nimport './Header.css';\r\nimport { call, chatbubbles, mail, search } from 'ionicons/icons';\r\nimport { Link } from 'react-router-dom';\r\nimport { MenuHorizontal } from './MenuHorizontal';\r\n\r\nimport { hideSearchBar, showSearchBar } from '../data/search/search.actions';\r\nimport { SearchBar } from './SearchBar';\r\n\r\nimport { getContactEmailAddress, getContactPhoneNumber, getContactPhoneUrl } from '../helpers/getContactDetails';\r\nimport { openLiveChat } from '../helpers/openLiveChat';\r\n\r\nexport const Header = () => {\r\n const {state, dispatch} = useContext(AppContext);\r\n const {data} = state.config;\r\n \r\n const phone = getContactPhoneNumber(state);\r\n const phoneUrl = getContactPhoneUrl(state);\r\n const email = getContactEmailAddress(state);\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {state.search.showSearchBtn && (\r\n state.search.showSearchBar ?\r\n dispatch(hideSearchBar()) : dispatch(showSearchBar())}\r\n >\r\n openLiveChat(state)}>\r\n \r\n )}\r\n \r\n {data.display_phone !== 'no' &&\r\n phone && (\r\n window.open(phoneUrl, \"_blank\")}>\r\n \r\n )}\r\n \r\n {data.display_email !== 'no' &&\r\n email && (\r\n window.open('mailto:' + email, \"_blank\")}>\r\n \r\n )}\r\n \r\n \r\n \r\n {data.logo && ! data.logo_link_url && (\r\n \r\n 
\r\n \r\n )}\r\n {data.logo && data.logo_link_url && (\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 * @todo review & document\r\n */\r\n\r\nimport React, {useContext} from 'react';\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport {AppContext} from \"../data/AppContext\";\r\n\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\nimport { changePage } from '../helpers/changePage';\r\n\r\nexport const MenuVertical = ({\r\n heading,\r\n menuItems\r\n}) => {\r\n \r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n return (\r\n <>\r\n {menuItems.length > 0 && (\r\n \r\n \r\n )\r\n }\r\n \r\n return (\r\n \r\n {state.config.data.text.home_breadcrumb}\r\n \r\n {data.ancestor_pages.map((page, index) => {\r\n return (\r\n \r\n > \r\n changePage(page, state, dispatch)}>\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 * @todo review & document\r\n */\r\nimport { IonContent, IonPage } from '@ionic/react';\r\nimport React, { useContext } from 'react';\r\nimport { useLocation } from 'react-router';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\n\r\nimport { usePageData } from '../hooks/usePageData';\r\nimport { useAutoscrollToTopOnLoad } from '../hooks/useAutoscrollToTopOnLoad';\r\n\r\nimport { TemplateLoader } from '../templates/TemplateLoader';\r\n\r\nimport { TopBanners } from '../components/TopBanners';\r\nimport { Header } from '../components/Header';\r\nimport { Footer } from '../components/Footer';\r\nimport { Breadcrumbs } from '../components/Breadcrumbs';\r\n\r\nexport const Page = () => {\r\n // Get data to use for the page whenever the URL path changes\r\n usePageData();\r\n \r\n // Auto-scroll back to the top of the page content area when new content is being loaded\r\n const {state} = useContext(AppContext);\r\n const {contentRef, onScroll} = useAutoscrollToTopOnLoad(state.page.isLoading);\r\n \r\n // Don't render page if we're on the 'search' page (workaround for `IonRouterOutlet` not supporting `Switch`)\r\n const { pathname } = useLocation();\r\n if(pathname.substring(0, 7) === '/search') {\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\r\nexport default Page;\r\n","/**\r\n * Custom React hook to retrieve page data in JSON format from WP's REST API whenever the current URL path changes.\r\n *\r\n * This hook is intended for usage within page components (i.e. React components in the 'pages' folder) which need\r\n * to retrieve standard page data. No parameters need to be passed to this hook, so simply call 'usePageData()'\r\n * from each applicable page component. Also, because the data retrieval status (including the current URL path,\r\n * whether data is still being loaded, whether any errors were encountered, and the latest retrieved page data) is\r\n * stored within the overall application state (see 'data/state.js'), and can therefore be retrieved from anywhere\r\n * in the app, this hook does not return any values.\r\n *\r\n * Note that Ionic may not always remove inactive page components from the DOM when users navigate to a new page.\r\n * This hook therefore uses the 'useIonViewWillEnter' and 'useIonViewWillLeave' hooks to keep track of whether new\r\n * data may be loaded from the API (See https://ionicframework.com/docs/react/lifecycle#react-lifecycle-methods).\r\n * In addition, the current page path is stored in the overall application state, and new data is only retrieved\r\n * if this path appears to have changed since it was last updated. These measures are necessary to prevent\r\n * unexpected duplicate data requests from being sent to the API, and to ensure a request will correctly be sent\r\n * if a component is active and the path changes.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport { useState, useEffect, useContext } from 'react';\r\nimport { useLocation } from 'react-router';\r\nimport { useIonViewWillEnter, useIonViewWillLeave } from '@ionic/react';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\nimport { setCurrentPagePath } from '../data/page/page.actions';\r\nimport { fetchPageDataFromApi } from '../data/page/fetchPageDataFromApi';\r\nimport { getFullPagePathIncSlashes } from '../helpers/getPagePaths';\r\n\r\nexport const usePageData = () => {\r\n // Keep track of whether data is allowed to be loaded based on whether the current page component is active\r\n const [canLoadData, setCanLoadData] = useState(false);\r\n // Use app context to handle state management & updates\r\n const {state, dispatch} = useContext(AppContext);\r\n // Get current URL path\r\n const { pathname } = useLocation();\r\n \r\n // Check if data is allowed to be retrieved when the current URL path changes, and retrieve it from the API if so\r\n useEffect(() => {\r\n // Prepend and/or append '/' to page path if it is not present already, to ensure consistency\r\n const fullPagePath = getFullPagePathIncSlashes(pathname);\r\n \r\n // Don't retrieve page data if we're on a search page (a different API is used for that purpose)\r\n if(fullPagePath.substring(0, 7) === '/search') {\r\n return;\r\n }\r\n \r\n // Don't retrieve data unless current URL path has changed since it was last updated in application state\r\n if(state.page.path === fullPagePath) {\r\n return;\r\n }\r\n \r\n // Don't retrieve data unless we are currently allowed to, i.e. the current page component is active\r\n if( ! canLoadData) {\r\n return;\r\n }\r\n \r\n // Update the application state to store the new page URL path\r\n dispatch(setCurrentPagePath(fullPagePath));\r\n \r\n // Retrieve data for the current page from the API\r\n fetchPageDataFromApi(fullPagePath, state.user.data.token, state.config.data, dispatch);\r\n }, [pathname, canLoadData, dispatch, state.page.path, state.user.data.token, state.config.data]);\r\n \r\n // Allow data to be loaded when the current page component is active\r\n useIonViewWillLeave(() => {\r\n setCanLoadData(false);\r\n });\r\n \r\n // Stop allowing data to be loaded when the current page component is no longer active\r\n useIonViewWillEnter(() => {\r\n setCanLoadData(true);\r\n });\r\n};","/**\r\n * @todo review & document\r\n */\r\nimport { IonContent, IonPage, IonSpinner } from '@ionic/react';\r\nimport React, { useContext } from 'react';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\n\r\nexport const ConfigLoadingPage = () => {\r\n const {state} = useContext(AppContext);\r\n \r\n return (\r\n \r\n \r\n {state.config.isLoading &&\r\n \r\n \r\n );\r\n};\r\n","/**\r\n * This file contains functionality to extract raw search results JSON data (which has already been retrieved e.g.\r\n * from WP's REST API), converting it into a simpler format which can then be used throughout the app. If the raw\r\n * search results cannot be extracted/formatted correctly, an error will be thrown - this then needs to be handled\r\n * elsewhere in the app.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport { relatedPageInitialData } from '../page/pageData.init';\r\nimport { getPagePathFromUrl } from '../../helpers/getPagePaths';\r\nimport { extractFormattedPageTemplateName } from '../page/extractFormattedPageData';\r\nimport { extractStandardDataProperties } from '../general/extractStandardDataProperties';\r\n\r\n/**\r\n * This function extracts raw search results JSON data (which has already been retrieved e.g. from WP's REST API),\r\n * converting it into a simpler format which can then be used throughout the app.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {array} rawSearchResults\r\n * Raw search results in JSON format. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {Object}\r\n * Formatted search results which can be used throughout the app as required.\r\n *\r\n * @throws {Error}\r\n * If the search results cannot be extracted/formatted successfully\r\n */\r\nexport const extractFormattedSearchResults = (rawSearchResults) => {\r\n const formattedSearchResults = [];\r\n const skipProperties = ['id', 'title', 'link', 'template'];\r\n \r\n // Check if any search results have been retrieved. Return empty array if not.\r\n if( ! rawSearchResults || rawSearchResults.length === 0) {\r\n return formattedSearchResults;\r\n }\r\n \r\n // Loop through the retrieved search results, so data can be extracted for each search result\r\n for(let i = 0; i < rawSearchResults.length; i++) {\r\n // Get the raw data relating to the current retrieved search result\r\n let rawCurSearchResult = rawSearchResults[i];\r\n \r\n // Check that all the required search result properties exist in the raw data\r\n if( ! rawCurSearchResult.hasOwnProperty('id') || ! rawCurSearchResult.id) {\r\n throw new Error('Unexpected search result format: ID not specified.');\r\n }\r\n if( ! rawCurSearchResult.hasOwnProperty('title') ) {\r\n throw new Error('Unexpected search result format: Title not specified.');\r\n }\r\n if( ! rawCurSearchResult.hasOwnProperty('url') || ! rawCurSearchResult.url) {\r\n throw new Error('Unexpected search result format: URL not specified.');\r\n }\r\n \r\n /* Extract all of the standard search result properties supported by the app from the raw data,\r\n skipping those properties that require their own dedicated data extraction mechanism. */\r\n const formattedCurSearchResult = extractStandardDataProperties(\r\n rawCurSearchResult,\r\n relatedPageInitialData,\r\n skipProperties,\r\n 'wellonline_'\r\n );\r\n \r\n // Extract the relevant page ID and title as-is (these fields are not prefixed with 'wellonline_')\r\n formattedCurSearchResult.id = rawCurSearchResult.id;\r\n formattedCurSearchResult.title = rawCurSearchResult.title ? rawCurSearchResult.title : '';\r\n \r\n // Attempt to extract the page link path from the raw search result data\r\n formattedCurSearchResult.link = getPagePathFromUrl(rawCurSearchResult.url);\r\n \r\n // Extract the page template associated with this search result if available\r\n if(rawCurSearchResult.hasOwnProperty('wellonline_template')) {\r\n formattedCurSearchResult.template =\r\n extractFormattedPageTemplateName(rawCurSearchResult.wellonline_template);\r\n }\r\n \r\n formattedSearchResults.push(formattedCurSearchResult);\r\n }\r\n \r\n return formattedSearchResults;\r\n};","/**\r\n * This file implements functionality to retrieve search results in JSON format from WP's REST API.\r\n *\r\n * Information related to these search results (including whether the results are still being loaded, whether\r\n * any errors were encountered, and the latest retrieved results) is stored within the overall application\r\n * state (see 'data/state.js'), and can therefore be retrieved from anywhere in the app where needed.\r\n *\r\n * This functionality includes support for pagination of the retrieved search results; up to 10 results are returned\r\n * per search 'page' request - the results page number must be specified within the function call. The current page\r\n * number will be stored in the app state before the results are loaded. After a response is successfully retrieved,\r\n * the app state will be updated to store the total number of available results pages for the relevant search query.\r\n * If a page number of '1' is specified, it is assumed that this is a new search query, and all previously\r\n * retrieved results are discarded. Otherwise, any new search results are appended to the existing results.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport {\r\n initNewSearchResultsFetch,\r\n initSearchResultsPageFetch,\r\n setSearchResultsFetchError,\r\n setSearchResultsFetchSuccess\r\n} from './search.actions';\r\nimport { handleUserAuthenticationErrors } from '../../helpers/handleUserAuthenticationErrors';\r\nimport { extractFormattedSearchResults } from './extractFormattedSearchResults';\r\n\r\n/**\r\n * Asynchronous function to retrieve search results in JSON format from the WP REST API.\r\n *\r\n * @param {string} searchQuery\r\n * The search query entered by the user. Search results will be retrieved based on this query.\r\n * @param {number} pageNum\r\n * The number of the search results page to retrieve results for. Up to 10 results are returned per 'page'\r\n * (starting at page 1). If the page number is greater than 1, any new results will be appended to the\r\n * existing previously retrieved results; otherwise it is assumed that this is a new search query, and\r\n * any previous results will be discarded.\r\n * @param {string} userToken\r\n * JSON Web Token (JWT), to ensure user is allowed to access the search results\r\n * @param {function} dispatch\r\n * Dispatch function to use to update global application state when search result retrieval status changes\r\n *\r\n * @returns {Promise}\r\n */\r\nexport const fetchSearchResultsFromApi = async (searchQuery, pageNum, userToken, dispatch) => {\r\n // Set URL path for REST API request\r\n const apiUrlPath = '/wp-json/wp/v2/search/?search=';\r\n \r\n if(searchQuery === '') {\r\n return; // Don't fetch any search results if no query was specified\r\n }\r\n \r\n // Update app state to indicate that search result fetching is in progress\r\n if(pageNum === 1) {\r\n // If the specified page number is page 1, assume we're fetching results for a completely new search query\r\n dispatch(initNewSearchResultsFetch());\r\n } else {\r\n // Otherwise assume we're loading a new 'page' of results for a previous query\r\n dispatch(initSearchResultsPageFetch(pageNum));\r\n }\r\n \r\n try {\r\n // Wait for JSON data response to be retrieved from URL\r\n const response = await fetch(apiUrlPath + encodeURIComponent(searchQuery) + '&page=' + pageNum, {\r\n headers: {\r\n authorization: 'Bearer ' + userToken\r\n }\r\n });\r\n const result = await response.json();\r\n \r\n // Handle any errors relating to the authentication of the current user\r\n await handleUserAuthenticationErrors(result, dispatch);\r\n \r\n // Convert retrieved search results into expected format\r\n const searchResults = extractFormattedSearchResults(result);\r\n \r\n /* Find out how many pages of search results there are - see\r\n https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/ */\r\n const totalResultPages = response.headers.get('x-wp-totalpages');\r\n \r\n // Update app state to keep track of the successfully retrieved search results\r\n dispatch(setSearchResultsFetchSuccess(searchResults, totalResultPages));\r\n } catch (error) {\r\n // Update app state to indicate that errors occurred when retrieving the search results\r\n dispatch(setSearchResultsFetchError());\r\n // Log any search result retrieval errors to browser console\r\n console.error(error);\r\n }\r\n};","/**\r\n * This component renders 'cards' to display based on the retrieved search results. Each search result card includes\r\n * a title, brief excerpt, full-width image (a placeholder image is used if an image is not explicitly specified)\r\n * and button; and the card links to another page within the app. The cards are displayed within a 2 column grid\r\n * (the cards stretch horizontally to fit the available space if there are less than 2 cards in a column), which is\r\n * horizontally centred within the page content.\r\n *\r\n * A heading is displayed above the results, containing details of the current search query. If the search results\r\n * are still loading, 2 cards containing 'skeleton' content will be displayed instead. If no search results could\r\n * be retrieved, a message is displayed inviting the user to try entering a different search query.\r\n *\r\n * Cards are rendered using the IonCard component (see https://ionicframework.com/docs/api/card), and the\r\n * IonGrid component is used to render the grid and to centre this horizontally within the page content (see\r\n * https://ionicframework.com/docs/api/grid and https://ionicframework.com/docs/layout/grid).\r\n *\r\n * See the code comments below for details of the 'props' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid, IonRow } from '@ionic/react';\r\n\r\n/* Get app context and any associated action(s), so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get required custom app components */\r\nimport { TopicCard } from './TopicCard';\r\nimport { TopicCardLoading } from './TopicCardLoading';\r\n\r\n/* Get placeholder image asset(s) */\r\nimport searchResultPlaceholderImg from '../images/card-img-default.jpg';\r\n\r\n/**\r\n * The following 'props' must be passed to this component:\r\n *\r\n * @param {string} query\r\n * The search query entered by the user. This will be displayed in the heading and in any warning messages.\r\n * @param {array} results\r\n * Array of JSON objects containing the search results. Each search result includes the details to display in\r\n * the relevant card - including title, excerpt, page link path, image (if applicable), and content template\r\n * to use if navigating to a new page. For example:\r\n *\r\n * [\r\n * {\r\n * 'title': 'Bullying in the Workplace',\r\n * 'link': '/work-life/bullying/bullying-in-the-workplace/',\r\n * 'excerpt': 'Some excerpt text ...',\r\n * 'featured_image': 'https://www.example.com/image1.jpg',\r\n * 'template': 'page-topic'\r\n * },\r\n * {\r\n * 'title': 'A bully or a strong manager?',\r\n * 'link': '/work-life/bullying/a-bully-or-a-strong-manager/',\r\n * 'excerpt': 'Some other excerpt text ...',\r\n * 'featured_image': 'https://www.example.com/image2.jpg',\r\n * 'template': 'page-topic'\r\n * }\r\n * ]\r\n *\r\n * @param {boolean} isLoading\r\n * Are the search results still loading? If so, 2 cards containing 'skeleton' content will be displayed instead\r\n */\r\nexport const SearchResults = (\r\n {\r\n query,\r\n results,\r\n isLoading\r\n }\r\n) => {\r\n \r\n // Use app context to retrieve the current app state\r\n const {state} = useContext(AppContext);\r\n \r\n const totalNumCols = 2; const rows = [];\r\n \r\n // Assemble the search results to display if they are not still loading\r\n if( ! isLoading) {\r\n // Calculate the number of rows to render, based on the number of search results\r\n const totalNumRows = Math.ceil(results.length / totalNumCols);\r\n \r\n // Loop through each row and column, assembling the search result cards to render in each grid 'cell'\r\n let curResultNum = 0;\r\n for(let curRowNum = 0; curRowNum < totalNumRows; curRowNum++) {\r\n let cols = []; // Reset the content to render in the columns for the next row\r\n for(let curColNum = 0; curColNum < totalNumCols; curColNum++) {\r\n // Do not assemble any further cards if we have already assembled cards for all available search results\r\n if(curResultNum === results.length) {\r\n break;\r\n }\r\n \r\n // Get the next available search result\r\n let result = results[curResultNum];\r\n \r\n // Get featured image, or 'default' image if search result appears to have no featured image\r\n const featuredImg = result.featured_image ? result.featured_image : searchResultPlaceholderImg;\r\n \r\n // Assemble the next result card and add it to the array of assembled columns within the current row.\r\n cols.push(\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n } else {\r\n // Otherwise, if content is still loading, assemble 4 result cards containing skeleton content\r\n let cols = [];\r\n for(let curResultNum = 0; curResultNum < totalNumCols; curResultNum++) {\r\n cols.push(\r\n \r\n {cols}\r\n \r\n );\r\n }\r\n \r\n /* Render assembled search result rows in a grid, with a top heading containing the query.\r\n Display a warning message if no search results are available after loading has completed. */\r\n return (\r\n \r\n \r\n {rows}\r\n \r\n )}\r\n \r\n { ! isLoading && results.length === 0 && (\r\n \r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\nimport React, { useContext, useEffect, useRef } from 'react';\r\nimport {\r\n IonContent,\r\n IonGrid,\r\n IonInfiniteScroll,\r\n IonInfiniteScrollContent,\r\n IonPage,\r\n useIonViewDidEnter\r\n} from '@ionic/react';\r\nimport { useLocation } from 'react-router';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\nimport { setSearchQuery } from '../data/search/search.actions';\r\nimport { fetchSearchResultsFromApi } from '../data/search/fetchSearchResultsFromApi';\r\n\r\nimport { useAutoscrollToTopOnLoad } from '../hooks/useAutoscrollToTopOnLoad';\r\n\r\nimport { Header } from '../components/Header';\r\nimport { Footer } from '../components/Footer';\r\nimport { TopBanner } from '../components/TopBanner';\r\nimport { SearchResults } from '../components/SearchResults';\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\n\r\nimport { sanitise, sanitiseHtml } from '../helpers/sanitiseHtml';\r\n\r\nimport topBannerPlaceholderImg from '../images/top-banner-default.jpg';\r\n\r\nexport const SearchPage = () => {\r\n // Use app context to handle state management & updates\r\n const {state, dispatch} = useContext(AppContext);\r\n const {search} = state;\r\n \r\n // Update page title\r\n useIonViewDidEnter(() => {\r\n if(state.config.data.title && state.config.data.text.search_title) {\r\n // Use this method to ensure HTML entities are correctly decoded, whilst minimising security risks\r\n const pageTitle = state.config.data.title + ' - ' + state.config.data.text.search_title;\r\n document.querySelector('title').innerHTML = sanitise(pageTitle);\r\n }\r\n });\r\n \r\n \r\n /* If the search page URL includes a search query, but the app state does not yet, update the app state to\r\n include this search query text. This is to ensure that search results will be retrieved upon initial page\r\n load if necessary, based on the search query in the URL. It also ensures that the search bar text will be\r\n pre-populated to contain the relevant search text. This functionality is designed to only execute once\r\n if we are on a search page when the app first loads. */\r\n const location = useLocation();\r\n const searchQuery = decodeURIComponent(location.search.replace('?query=', ''));\r\n useEffect(() => {\r\n /* Only update app state if search text could be retrieved from the URL and the 'prepopulateQuery' option\r\n is switched on i.e. only upon initial app load. */\r\n if(searchQuery.length > 0 && search.prepopulateQuery) {\r\n dispatch(setSearchQuery(searchQuery));\r\n }\r\n }, [searchQuery, search.prepopulateQuery, dispatch]);\r\n \r\n // When the search query stored in the app state is changed, retrieve new search results from the WP REST API\r\n useEffect(() => {\r\n fetchSearchResultsFromApi(search.query, 1, state.user.data.token, dispatch);\r\n }, [search.query, state.user.data.token, dispatch]);\r\n \r\n // When the results for a new search query are being loaded, scroll back to the top of the results page\r\n const {contentRef} = useAutoscrollToTopOnLoad(search.isLoadingNewSearch);\r\n \r\n /* 'Infinite scroll' functionality: When the user reaches the bottom of the page, retrieve the next 'page'\r\n of results for this search query from the WP REST API */\r\n const infiniteScrollRef = useRef(null);\r\n function onInfiniteScroll(e) {\r\n fetchSearchResultsFromApi(search.query, search.pageNum + 1, state.user.data.token, dispatch);\r\n }\r\n \r\n // After the next 'page' of results has been successfully retrieved, hide the 'infinite scroll' animation\r\n useEffect(() => {\r\n if(\r\n ! search.isLoadingNextPage &&\r\n infiniteScrollRef.current &&\r\n typeof infiniteScrollRef.current.complete !== 'undefined'\r\n ) {\r\n infiniteScrollRef.current.complete();\r\n }\r\n }, [search.isLoadingNextPage]);\r\n \r\n // Load the default top banner image from the app config if available, or use a placeholder image if not\r\n const topBannerImg = state.config.data.banner_image ? state.config.data.banner_image : topBannerPlaceholderImg;\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n};","/**\r\n * @todo review & document\r\n */\r\nimport {\r\n IonContent,\r\n IonHeader,\r\n IonItem,\r\n IonLabel,\r\n IonList,\r\n IonMenu,\r\n IonMenuToggle,\r\n IonRippleEffect,\r\n IonTitle,\r\n IonToolbar\r\n} from '@ionic/react';\r\n\r\nimport React, {useContext} from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\nimport './Menu.css';\r\nimport { AppContext } from '../data/AppContext';\r\nimport { logoutUser } from '../data/user/logoutUser';\r\nimport { getMenuItems } from '../helpers/getMenu';\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\nimport { getSectionRootPath } from '../helpers/getPagePaths';\r\nimport { changePage } from '../helpers/changePage';\r\n\r\nexport const Menu = () => {\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n const location = useLocation();\r\n const sectionRootPath = getSectionRootPath(location.pathname);\r\n \r\n const menuItems = getMenuItems(state.config.data.menus, state.config.data.menu_locations.header);\r\n \r\n return (\r\n \r\n \r\n \r\n {state.config.data.text.main_menu_title} \r\n \r\n \r\n \r\n \r\n {menuItems.map((item, index) => {\r\n return (\r\n \r\n {item.type !== 'custom' && item.target !== '_blank' ? (\r\n changePage(item, state, dispatch)}\r\n routerLink={item.link}\r\n lines=\"full\"\r\n >\r\n window.open(item.link, \"_blank\")}\r\n lines=\"full\"\r\n >\r\n \r\n );\r\n })}\r\n \r\n logoutUser(dispatch)}\r\n lines=\"full\"\r\n >\r\n {state.config.data.text.logout} \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","/**\r\n * This component renders a 'Live Chat' icon on the bottom right of the screen. When this is icon tapped upon,\r\n * a new window/tab is opened, pointing to the URL of an external Live Chat provider. The icon is only made visible\r\n * if Live Chat is currently enabled upon the current site. If this component is no longer being rendered, the live\r\n * chat elements are removed from the screen automatically.\r\n *\r\n * This component also includes a `useEffect()` React hook, which automatically updates the app state to enable or\r\n * disable the Live Chat functionality throughout the app, whenever certain conditions, events or time intervals occur:\r\n *\r\n * - The app config data stored in the overall app state has changed, e.g. after it has been retrieved from the server.\r\n * - The current user login status has changed.\r\n * - The user has now gone offline or online.\r\n * - Once every minute (this allows the Live Chat to be enabled or disabled based on the current date or time).\r\n *\r\n * The use of event listeners and time intervals within the `useEffect()` hook is inspired by the approaches described\r\n * at https://www.pluralsight.com/guides/event-listeners-in-react-components and https://stackoverflow.com/a/65049865.\r\n * These event listeners and time intervals are automatically removed if this Live Chat component gets unmounted.\r\n *\r\n * If any of the above conditions, events or time intervals occur, the `updateLiveChatStatus()` function within the\r\n * `data/config/updateLiveChatStatus` file is called, which then performs a series of comprehensive checks to determine\r\n * whether the Live Chat should ultimately be enabled or disabled. This ensures that the Live Chat will *only* be\r\n * displayed if none of the potential reasons for hiding it are currently applicable.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext, useEffect } from 'react';\r\n\r\n/* Get app context and associated actions, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Import app helper function(s) */\r\nimport { openLiveChat, logLiveChatStatus } from '../helpers/openLiveChat';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './LiveChat.css';\r\nimport { updateLiveChatStatus } from '../data/config/updateLiveChatStatus';\r\n\r\nexport const LiveChat = () => {\r\n \r\n // Use app context to retrieve & update the app state as required\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n // Enable or disable Live Chat when certain conditions, events or time intervals occur:\r\n useEffect(() => {\r\n // Wrapper function to handle any updates that are needed to the Live Chat status:\r\n const handleLiveChatStatusUpdates = () => {\r\n // Perform some more comprehensive checks and then update the Live Chat status accordingly.\r\n updateLiveChatStatus(state.config.data, state.user.loggedIn, dispatch);\r\n };\r\n \r\n // Ensure Live Chat gets enabled/disabled upon initial render, or if app config or user login status changes.\r\n handleLiveChatStatusUpdates();\r\n \r\n // Set up time intervals and event listeners to enable/disable the Live Chat.\r\n const updateStatusEachMinute = setInterval(handleLiveChatStatusUpdates, 60000);\r\n window.addEventListener('online', handleLiveChatStatusUpdates);\r\n window.addEventListener('offline', handleLiveChatStatusUpdates);\r\n \r\n // If this component is unmounted, remove the time intervals and event listeners added above.\r\n return () => {\r\n clearInterval(updateStatusEachMinute);\r\n window.removeEventListener('online', handleLiveChatStatusUpdates)\r\n window.removeEventListener('online', handleLiveChatStatusUpdates);\r\n };\r\n \r\n }, [state.config.data, state.user.loggedIn, dispatch]); // Re-run if app config or user login status changes.\r\n \r\n // Don't load the Live Chat overlay button if the live chat functionality is not currently available on this site.\r\n if(!state.config.liveChatEnabled) {\r\n logLiveChatStatus('Not displaying main Live Chat overlay button, because Live Chat is currently disabled.');\r\n return null;\r\n } else {\r\n logLiveChatStatus('Displaying main Live Chat overlay button.');\r\n }\r\n \r\n return (\r\n }\r\n */\r\nexport const fetchAppConfig = async (dispatch) => {\r\n // Set URL path for REST API request\r\n const apiUrlPath = '/wp-json/wellonline/v1/config/';\r\n \r\n // Update app state to indicate that configuration data fetching is in progress\r\n dispatch(initConfigFetch());\r\n \r\n try {\r\n // Wait for JSON data response to be retrieved from URL\r\n const response = await fetch(apiUrlPath);\r\n const result = await response.json();\r\n \r\n // Convert retrieved data into expected format\r\n const config = extractFormattedConfig(result);\r\n \r\n // Update app state to keep track of the successfully retrieved data\r\n dispatch(setConfigFetchSuccess(config));\r\n \r\n // Set up the Google Analytics tracking mechanism, using the retrieved configuration data\r\n setUpGoogleAnalytics(config);\r\n \r\n // Update page title\r\n if(config.title) {\r\n // Use this method to ensure HTML entities are correctly decoded, whilst minimising security risks\r\n document.querySelector('title').innerHTML = sanitise(config.title);\r\n }\r\n } catch (error) {\r\n // Update app state to indicate that errors occurred when retrieving data\r\n dispatch(setConfigFetchError());\r\n // Log any data retrieval errors to browser console\r\n console.error(error);\r\n }\r\n};\r\n\r\n/**\r\n * Set up the Google Analytics tracking mechanism, using the GA tracking code retrieved from the configuration data.\r\n *\r\n * Browser console logging of the tracked data will be enabled if the 'REACT_APP_ENABLE_GOOGLE_ANALYTICS_LOGGING'\r\n * environment variable is set to '1'.\r\n *\r\n * The mechanism to actually send tracked data to Google Analytics (e.g. when pages are viewed) is\r\n * implemented elsewhere.\r\n *\r\n * @param {Object} config\r\n * Configuration object, previously retrieved from the WP REST API.\r\n */\r\nconst setUpGoogleAnalytics = (config) => {\r\n if( ! config.ga_code) {\r\n return;\r\n }\r\n \r\n let enableLogging = false;\r\n if(\r\n process.env.REACT_APP_ENABLE_GOOGLE_ANALYTICS_LOGGING &&\r\n process.env.REACT_APP_ENABLE_GOOGLE_ANALYTICS_LOGGING === \"1\"\r\n ) {\r\n enableLogging = true;\r\n }\r\n \r\n ReactGA.initialize(config.ga_code, { debug: enableLogging });\r\n}","/**\r\n * @todo review & document\r\n */\r\n\r\nimport { userLoggedIn } from './user.actions';\r\nimport { extractFormattedUserData } from './extractFormattedUserData';\r\nimport { getCookie } from '../general/cookieStorage';\r\n\r\nexport const loadStoredUserData = async (dispatch) => {\r\n try {\r\n const rawUserData = getCookie('wellonlinepwa_user');\r\n if( ! rawUserData) {\r\n logUserLoginStatus('User is not logged in.');\r\n return;\r\n }\r\n \r\n const user = JSON.parse(decodeURIComponent(rawUserData));\r\n \r\n if(\r\n ! user ||\r\n ! user.username ||\r\n user.username.length === 0 ||\r\n ! user.token ||\r\n user.token.length === 0\r\n ) {\r\n logUserLoginStatus('User is not logged in.');\r\n return;\r\n }\r\n \r\n // Convert retrieved data into expected format\r\n const userData = extractFormattedUserData(user.username, user);\r\n \r\n dispatch(userLoggedIn(userData));\r\n \r\n logUserLoginStatus('User is logged in.');\r\n } catch(error) {\r\n // Log any storage errors to browser console\r\n console.error(error);\r\n }\r\n};\r\n\r\n/**\r\n * Log the current user login status to the browser console, if this is enabled based on the configured\r\n * environment variables.\r\n *\r\n * @param {string} message\r\n * Current user login status message\r\n */\r\nconst logUserLoginStatus = (message) => {\r\n if(\r\n process.env.REACT_APP_ENABLE_LOGIN_STATUS_LOGGING &&\r\n process.env.REACT_APP_ENABLE_LOGIN_STATUS_LOGGING === \"1\"\r\n ) {\r\n console.log(message);\r\n }\r\n}","/**\r\n * The class and associated helper functions in this file provide a mechanism to automatically generate the colour\r\n * values of similar variants of a specified colour (including contrasting, tinted, and shaded versions of the\r\n * relevant colour), based on a supplied hex code for that colour. The resulting generated colour data can then\r\n * be retrieved in a variety of formats.\r\n *\r\n * Ultimately this colour data can be used to change the app colour scheme based on the supplied colours, by\r\n * updating the values of the relevant CSS variables globally. See the `updateAppColours()` helper function in\r\n * this app for an implementation of that functionality.\r\n *\r\n * All of the code in this file originates from:\r\n * https://github.com/ionic-team/ionic-docs/blob/master/src/components/color-gen/color.ts\r\n *\r\n * [The original version of that code was built for usage within the 'Ionic New Color Creator' (see\r\n * https://ionicframework.com/docs/theming/colors#new-color-creator) and other similar colour generators that\r\n * are provided within the official Ionic documentation, for the purposes of auto-generating the colour values\r\n * for output within some displayed Ionic CSS variables, based upon the specified colour hex code(s). In this\r\n * app, the functionality is used for a related purpose, as described above.]\r\n *\r\n * The code in this file is used as-is, without any modifications to the original 3rd party code referenced\r\n * in the file URL above (aside from the insertion of these header comments). If the relevant 3rd party code\r\n * is subsequently updated to include any bugfixes that remain compatible with the current Well Online app\r\n * functionality, this file should therefore be updated, to include any such code updates as required...\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * You can use this class by implementing code similar to the below:\r\n *\r\n * import { Color } from '../color';\r\n *\r\n * ...\r\n *\r\n * const colourVariants = new Color('#7FBC03');\r\n *\r\n * const colourRGB = colourVariants.rgb;\r\n *\r\n * const contrast = colourVariants.contrast();\r\n * const contrastHexCode = contrast.hex;\r\n * const contrastRGB = contrast.rgb;\r\n *\r\n * ...\r\n *\r\n * @author Ionic Docs Team\r\n * @link https://github.com/ionic-team/ionic-docs/blob/master/src/components/color-gen/color.ts\r\n */\r\n\r\nexport interface RGB {\r\n b: number;\r\n g: number;\r\n r: number;\r\n}\r\n\r\nexport interface HSL {\r\n h: number;\r\n l: number;\r\n s: number;\r\n}\r\n\r\nconst componentToHex = (c: number) => {\r\n const hex = c.toString(16);\r\n return hex.length === 1 ? `0${hex}` : hex;\r\n};\r\n\r\nconst expandHex = (hex: string): string => {\r\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\r\n hex = hex.replace(shorthandRegex, (_m, r, g, b) => {\r\n return r + r + g + g + b + b;\r\n });\r\n\r\n return `#${hex.replace('#', '')}`;\r\n};\r\n\r\nconst hexToRGB = (hex: string): RGB => {\r\n hex = expandHex(hex);\r\n hex = hex.replace('#', '');\r\n const intValue: number = parseInt(hex, 16);\r\n\r\n return {\r\n r: (intValue >> 16) & 255,\r\n g: (intValue >> 8) & 255,\r\n b: intValue & 255\r\n };\r\n};\r\n\r\nconst hslToRGB = ({ h, s, l }: HSL): RGB => {\r\n h = h / 360;\r\n s = s / 100;\r\n l = l / 100;\r\n if (s === 0) {\r\n l = Math.round(l * 255);\r\n return {\r\n r: l,\r\n g: l,\r\n b: l\r\n };\r\n }\r\n\r\n // tslint:disable-next-line:no-shadowed-variable\r\n const hue2rgb = (p: number, q: number, t: number) => {\r\n if (t < 0) { t += 1; }\r\n if (t > 1) { t -= 1; }\r\n if (t < 1 / 6) { return p + (q - p) * 6 * t; }\r\n if (t < 1 / 2) { return q; }\r\n if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; }\r\n return p;\r\n };\r\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\r\n const p = 2 * l - q;\r\n const r = hue2rgb(p, q, h + (1 / 3));\r\n const g = hue2rgb(p, q, h);\r\n const b = hue2rgb(p, q, h - (1 / 3));\r\n\r\n return {\r\n r: Math.round(r * 255),\r\n g: Math.round(g * 255),\r\n b: Math.round(b * 255)\r\n };\r\n};\r\n\r\nconst mixColors = (color: Color, mixColor: Color, weight = .5): RGB => {\r\n const colorRGB: RGB = color.rgb;\r\n const mixColorRGB: RGB = mixColor.rgb;\r\n const mixColorWeight = 1 - weight;\r\n\r\n return {\r\n r: Math.round(weight * mixColorRGB.r + mixColorWeight * colorRGB.r),\r\n g: Math.round(weight * mixColorRGB.g + mixColorWeight * colorRGB.g),\r\n b: Math.round(weight * mixColorRGB.b + mixColorWeight * colorRGB.b)\r\n };\r\n};\r\n\r\nconst rgbToHex = ({ r, g, b }: RGB) => {\r\n return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);\r\n};\r\n\r\nconst rgbToHSL = ({ r, g, b }: RGB): HSL => {\r\n r = Math.max(Math.min(r / 255, 1), 0);\r\n g = Math.max(Math.min(g / 255, 1), 0);\r\n b = Math.max(Math.min(b / 255, 1), 0);\r\n const max = Math.max(r, g, b);\r\n const min = Math.min(r, g, b);\r\n const l = Math.min(1, Math.max(0, (max + min) / 2));\r\n let d;\r\n let h;\r\n let s;\r\n\r\n if (max !== min) {\r\n d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n if (max === r) {\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n } else if (max === g) {\r\n h = (b - r) / d + 2;\r\n } else {\r\n h = (r - g) / d + 4;\r\n }\r\n h = h / 6;\r\n } else {\r\n h = s = 0;\r\n }\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100)\r\n };\r\n};\r\n\r\nconst rgbToYIQ = ({ r, g, b }: RGB): number => {\r\n return ((r * 299) + (g * 587) + (b * 114)) / 1000;\r\n};\r\n\r\nexport class Color {\r\n readonly hex: string;\r\n readonly hsl: HSL;\r\n readonly rgb: RGB;\r\n readonly yiq: number;\r\n\r\n constructor(value: string | RGB | HSL) {\r\n if (typeof(value) === 'string' && /rgb\\(/.test(value)) {\r\n const matches = /rgb\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3})\\)/.exec(value) ?? [];\r\n value = { r: parseInt(matches[0], 10), g: parseInt(matches[1], 10), b: parseInt(matches[2], 10) };\r\n } else if (typeof(value) === 'string' && /hsl\\(/.test(value)) {\r\n const matches = /hsl\\((\\d{1,3}), ?(\\d{1,3}%), ?(\\d{1,3}%)\\)/.exec(value) ?? [];\r\n value = { h: parseInt(matches[0], 10), s: parseInt(matches[1], 10), l: parseInt(matches[2], 10) };\r\n }\r\n\r\n if (typeof(value) === 'string') {\r\n value = value.replace(/\\s/g, '');\r\n this.hex = expandHex(value);\r\n this.rgb = hexToRGB(this.hex);\r\n this.hsl = rgbToHSL(this.rgb);\r\n } else if ('r' in value && 'g' in value && 'b' in value) {\r\n this.rgb = value as RGB;\r\n this.hex = rgbToHex(this.rgb);\r\n this.hsl = rgbToHSL(this.rgb);\r\n } else if ('h' in value && 's' in value && 'l' in value) {\r\n this.hsl = value as HSL;\r\n this.rgb = hslToRGB(this.hsl);\r\n this.hex = rgbToHex(this.rgb);\r\n } else {\r\n throw new Error('Incorrect value passed.');\r\n }\r\n\r\n this.yiq = rgbToYIQ(this.rgb);\r\n }\r\n\r\n static isColor(value: string): boolean {\r\n if (/rgb\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3})\\)/.test(value)) { return true; }\r\n\r\n return /(^#[0-9a-fA-F]+)/.test(value.trim());\r\n }\r\n\r\n contrast(threshold = 128): Color {\r\n return new Color((this.yiq >= threshold ? '#000' : '#fff'));\r\n }\r\n\r\n mix(from: string | RGB | HSL | Color, amount = .5): Color {\r\n const base: Color = from instanceof Color ? from : new Color(from);\r\n return new Color(mixColors(this, base, amount));\r\n }\r\n\r\n shade(weight = .12): Color {\r\n return this.mix({ r: 0, g: 0, b: 0 }, weight);\r\n }\r\n\r\n tint(weight = .1): Color {\r\n return this.mix({ r: 255, g: 255, b: 255 }, weight);\r\n }\r\n\r\n toList(): string {\r\n const { r, g, b }: RGB = this.rgb;\r\n return `${r},${g},${b}`;\r\n }\r\n}","import { Color } from './color';\r\n\r\n/**\r\n * The functions in this file change the current colour scheme that is used throughout the app, by updating the\r\n * values of the relevant CSS variables, to contain the new specified values.\r\n *\r\n * Portions of this functionality are based on some of the code used within the 'Ionic New Color Creator'\r\n * (see https://ionicframework.com/docs/theming/colors#new-color-creator) to generate the values of some\r\n * Ionic CSS variables, based upon a specified colour hex code.\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * 1. Import this function at the top of any React component file that needs to update the app colour scheme:\r\n *\r\n * import { updateAppColours } from '../helpers/updateAppColours';\r\n *\r\n * 2. Add code similar to this within the component (this code will update the app colours based on the current\r\n * colours stored in the app state, which can be retrieved from the AppContext):\r\n *\r\n * updateAppColours(state.config.data.colours);\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n *\r\n * @param {Object} colours\r\n * Object containing the 'keys' and associated new hex values of the colours in the app that need to be changed,\r\n * e.g. {primary: '#7FBC03', secondary: '#707070', ...}\r\n */\r\nexport function updateAppColours(colours) {\r\n // Update each of the specified colours (except for the default background colour, which is handled separately)\r\n for(let colourKey in colours) {\r\n if( ! colours.hasOwnProperty(colourKey) || colourKey === 'bg_default') {\r\n continue;\r\n }\r\n \r\n // Update the CSS variables corresponding to the current colour\r\n updateAppColour(colourKey, colours[colourKey]);\r\n }\r\n \r\n // Update the global Ionic CSS variable for the default background colour (if specified), to contain the new value\r\n if(colours.hasOwnProperty('bg_default')) {\r\n document.documentElement.style.setProperty('--ion-background-color', colours.bg_default);\r\n }\r\n \r\n // Update browser address bar colour in mobile Chrome browsers\r\n if(colours.hasOwnProperty('primary')) {\r\n document.querySelector('meta[name=\"theme-color\"]').setAttribute(\r\n 'content', colours.primary);\r\n }\r\n}\r\n\r\n/**\r\n * Update the global values of all of the CSS variables associated with the specified colour 'key', to contain the\r\n * corresponding hex code of the new colour (and/or the hex code(s) or RGB values of similar variant colours, which\r\n * are generated automatically based on the specified original colour hex code).\r\n *\r\n * Some of the code in this function is loosely based on the code in the `generateColor()` function in\r\n * https://github.com/ionic-team/ionic-docs/blob/master/src/components/color-gen/parse-css.ts, which is used by the\r\n * 'Ionic New Color Creator' (see https://ionicframework.com/docs/theming/colors#new-color-creator) to auto-generate\r\n * the colour values that will be output within some Ionic CSS variables, based upon a specified colour hex code.\r\n *\r\n * @param {string} colourKey\r\n * The colour 'key' that used to identify which CSS variables to update. For example: 'primary'\r\n * @param {string} colourHexCode\r\n * The value of all applicable colour CSS variables will be updated globally based on the specified hex colour\r\n * code. For example: '#7FBC03'\r\n */\r\nconst updateAppColour = (colourKey, colourHexCode) => {\r\n // Determine the base name of all applicable CSS variables, based on the specified colour key\r\n let baseColourCssVarName = '--ion-color-' + colourKey.replace('_', '-');\r\n \r\n // Auto-generate variants of the specified colour, based on the supplied colour hex code\r\n const colourVariants = new Color(colourHexCode);\r\n const contrast = colourVariants.contrast();\r\n const tint = colourVariants.tint();\r\n const shade = colourVariants.shade();\r\n \r\n /* Globally update the values of all applicable CSS variables, based on the supplied colour hex code\r\n and the auto-generated colour variants */\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName, colourHexCode);\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName + '-rgb', rgbToString(colourVariants.rgb));\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName + '-contrast', contrast.hex);\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName + '-contrast-rgb', rgbToString(contrast.rgb));\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName + '-shade', shade.hex);\r\n document.documentElement.style.setProperty(\r\n baseColourCssVarName + '-tint', tint.hex);\r\n};\r\n\r\n/**\r\n * Format the RGB values of the specified colour object, so that they can be used within a CSS variable.\r\n *\r\n * @param {{r: number, g: number, b: number}} c\r\n * Object containing red, green and blue colour values\r\n *\r\n * @returns {string}\r\n * Comma separated string containing the relevant red, green and blue colour values\r\n */\r\nconst rgbToString = (c) => {\r\n return `${c.r},${c.g},${c.b}`;\r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/React Router/Ionic dependencies */\r\nimport React, { useContext, useEffect } from 'react';\r\nimport { Route } from 'react-router-dom';\r\nimport { IonRouterOutlet } from '@ionic/react';\r\nimport { IonReactRouter } from \"@ionic/react-router\";\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from './data/AppContext';\r\n\r\n/* Get the app page components that are rendered depending on the current URL route and/or the app state */\r\nimport { LoginPage } from './pages/LoginPage';\r\nimport { Page } from \"./pages/Page\";\r\nimport { ConfigLoadingPage } from './pages/ConfigLoadingPage';\r\nimport { SearchPage } from './pages/SearchPage';\r\n\r\n/* Get required custom app components */\r\nimport { Menu } from './components/Menu';\r\nimport { LiveChat } from './components/LiveChat';\r\n\r\n/* Import data retrieval function(s) */\r\nimport { fetchAppConfig } from './data/config/fetchAppConfig';\r\nimport { loadStoredUserData } from './data/user/loadStoredUserData';\r\n\r\n/* Import app helper function(s) */\r\nimport { updateAppColours } from './helpers/updateAppColours';\r\n\r\nexport const PageRouter = () => {\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n useEffect(() => {\r\n fetchAppConfig(dispatch);\r\n loadStoredUserData(dispatch);\r\n }, [dispatch]);\r\n \r\n useEffect(() => {\r\n updateAppColours(state.config.data.colours);\r\n }, [state.config.data.colours]);\r\n \r\n if(state.config.isLoading || state.config.isError) {\r\n return \r\n \r\n \r\n \r\n \r\n );\r\n};","/**\r\n * This component renders the overall PWA, by loading the associated JavaScript and CSS dependencies,\r\n * and rendering the React sub-components used by this app.\r\n *\r\n * All app components are surrounded by the 'AppContextProvider', so that the app state can be retrieved\r\n * and updated where required throughout the app. See the files in the './data' sub-folder for more details\r\n * on how this works.\r\n *\r\n * The separate 'PageRouter' component is used to determine which app page to actually load; this varies\r\n * depending upon the current URL route and whether the user is logged in. This routing functionality\r\n * is located within a separate component, to ensure it has access to the app state via the 'AppContext'\r\n * (as described above), which is required to determine the current user log-in status.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React from 'react';\r\nimport { IonApp, setupConfig } from '@ionic/react';\r\n\r\n/* Surround app components with app context provider, so state can be retrieved & updated throughout app */\r\nimport { AppContextProvider } from './data/AppContext';\r\n\r\n/* Surround app components with Error Boundary component, so error page can be displayed if component errors occur */\r\nimport { ErrorBoundary } from './ErrorBoundary';\r\n\r\n/* Use page router component to determine the correct app page to load */\r\nimport { PageRouter } from './PageRouter';\r\n\r\n/* Core CSS required for Ionic components to work properly */\r\nimport '@ionic/react/css/core.css';\r\n\r\n/* Basic CSS for apps built with Ionic */\r\nimport '@ionic/react/css/normalize.css';\r\nimport '@ionic/react/css/structure.css';\r\nimport '@ionic/react/css/typography.css';\r\n\r\n/* Optional CSS utils that can be commented out */\r\nimport '@ionic/react/css/padding.css';\r\nimport '@ionic/react/css/float-elements.css';\r\nimport '@ionic/react/css/text-alignment.css';\r\n// import '@ionic/react/css/text-transformation.css';\r\nimport '@ionic/react/css/flex-utils.css';\r\nimport '@ionic/react/css/display.css';\r\n\r\n/* Theme variables and global styles */\r\nimport './theme/variables.css';\r\nimport './theme/global.css';\r\n\r\nconst App = () => {\r\n // Automatically switch the app to display in 'iOS' mode if the '?mode=ios' query string exists within the URL\r\n if(window.location.search && window.location.search === \"?mode=ios\") {\r\n setupConfig(\r\n {\r\n mode: 'ios'\r\n }\r\n );\r\n }\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\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\ntype Config = {\r\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\r\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\r\n};\r\n\r\nexport function register(config?: Config) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(\r\n process.env.PUBLIC_URL,\r\n window.location.href\r\n );\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n // Load the service worker file itself. The file is loaded dynamically when the relevant site root URL is\r\n // accessed; see the theme's functions.php file for the code which handles this special URL. This is to ensure\r\n // the scope of the service worker will apply to the entire site, rather than just to the theme folder.\r\n const swUrl = `/wo-service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl: string, config?: Config) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Show message to the user\r\n alert('New content or features are available! For the best experience, we recommend you now close ' +\r\n 'all tabs or windows relating to this site, and then re-open them.');\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' }\r\n })\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'typeface-source-sans-pro';\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nReactDOM.render(
\r\n *\r\n * \r\n * { // main page content components here... }\r\n * \r\n *
\r\n * \r\n * \r\n \r\n
\r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid } from '@ionic/react';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\n\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\n\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\n\r\nexport const ErrorTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","/**\r\n * This component renders a specified number of blocks containing skeleton text that are set up to resemble\r\n * paragraphs. This makes it straightforward to simulate large areas of text on a page while content is still\r\n * in the process of being loaded.\r\n *\r\n * Each block consists of multiple `IonSkeletonText` components of different widths (see\r\n * https://ionicframework.com/docs/api/skeleton-text), and an extra blank line is left between each\r\n * 'paragraph' block.\r\n *\r\n * See the code comments below for details of the 'prop(s)' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React from 'react';\r\nimport { IonSkeletonText } from '@ionic/react';\r\n\r\n/**\r\n * The following 'prop(s)' must be passed to this component:\r\n *\r\n * @param {number} number\r\n * Integer that specifies how many 'paragraphs' of skeleton text should be displayed.\r\n */\r\nexport const SkeletonTextParagraphs = ({number}) => {\r\n \r\n const paras = [];\r\n for(let curParaNum = 1; curParaNum <= number; curParaNum++) {\r\n paras.push(\r\n {state.config.data.text.page_load_error_title}
\r\n {state.config.data.text.page_load_error_message ?\r\n (\r\nApologies, this page did not load successfully. Please try the following steps:
\r\n \r\n1. Check whether you are currently connected to the internet. If not, connect now and then\r\n reload this page.
\r\n2. Please check if the page address looks correct. Let us know if you spot any errors.
\r\n3. If you still are unable to find the content you are looking for, try using the search bar\r\n at the top.
\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\n \r\n \r\n {cols}\r\n \r\n \r\n \r\n
\r\n );\r\n \r\n};\r\n\r\nexport default FeaturedTopics;","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid } from '@ionic/react';\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the app components that are used by this page content template */\r\nimport { BackgroundShape } from '../components/BackgroundShape';\r\nimport { TopContent } from '../components/TopContent';\r\nimport { HomeTopCTAs } from '../components/HomeTopCTAs';\r\nimport { HomeContactDetails } from '../components/HomeContactDetails';\r\nimport { HomeBottomContent } from '../components/HomeBottomContent';\r\nimport FeaturedTopics from '../components/FeaturedTopics';\r\n\r\nexport const HomeTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n const {page} = state;\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 * This component renders icon 'cards' which represent the specified topic listing pages. Each card is shaded in\r\n * grey, includes a title and prominent icon, and links to another page within the app. The cards are displayed\r\n * within a 4 column grid (the cards stretch horizontally to fit the available space if there are less than 4\r\n * cards in a column). A heading is displayed at the top, above the grid. If content is still loading, 4 cards\r\n * containing 'skeleton' content will be displayed instead.\r\n *\r\n * Cards are rendered using the IonCard component (see https://ionicframework.com/docs/api/card), and Ionicons\r\n * are used to display the icons (see: https://ionicons.com/). The IonGrid component is used to render the grid\r\n * (see https://ionicframework.com/docs/api/grid and https://ionicframework.com/docs/layout/grid).\r\n *\r\n * See the code comments below for details of the 'props' which must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport {\r\n IonCard,\r\n IonCardContent,\r\n IonCol,\r\n IonGrid,\r\n IonIcon,\r\n IonRow,\r\n IonSkeletonText\r\n} from '@ionic/react';\r\n\r\n/* Load all Ionicons */\r\nimport * as ionicons from 'ionicons/icons';\r\n\r\n/* Get app context and associated actions, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\nimport { changePage } from '../helpers/changePage';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './TopicListingIconCards.css';\r\n\r\n/**\r\n * The following 'props' must be passed to this component:\r\n *\r\n * @param {string} heading\r\n * The textual content to display in the top heading. This text can include basic HTML.\r\n * @param {array} topicListings\r\n * Array of JSON objects containing the details to display in each topic listing icon card - including\r\n * title, icon, page link path, and content template to use if navigating to a new page. For example:\r\n *\r\n * [\r\n * {\r\n * 'title': 'Bullying',\r\n * 'link': '/work-life/bullying/',\r\n * 'icon': 'handLeft',\r\n * 'template': 'page-topic-listing'\r\n * },\r\n * {\r\n * 'title': 'Communication',\r\n * 'link': '/work-life/communication/',\r\n * 'icon': 'chatbubbles',\r\n * 'template': 'page-topic-listing'\r\n * }\r\n * ]\r\n *\r\n * @param {boolean} isLoading\r\n * Is the page content still loading? If so, 4 cards containing 'skeleton' content will be displayed instead\r\n */\r\nconst TopicListingIconCards = (\r\n {\r\n heading,\r\n topicListings,\r\n isLoading\r\n }\r\n) => {\r\n \r\n // Use app context to dispatch app state updates\r\n const { state, dispatch } = useContext(AppContext);\r\n \r\n const totalNumCols = 4; const rows = [];\r\n \r\n // Assemble the topic listing icon cards to display if content is not still loading\r\n if( ! isLoading) {\r\n // Do not render any icon cards if there are no topic listings\r\n if(topicListings.length === 0) {\r\n return null;\r\n }\r\n \r\n // Calculate the number of rows to render, based on the number of topic listings\r\n const totalNumRows = Math.ceil(topicListings.length / totalNumCols);\r\n \r\n // Loop through each row and column, assembling the topic listing icon card to render in each grid 'cell'\r\n let curTopicListingNum = 0;\r\n for(let curRowNum = 0; curRowNum < totalNumRows; curRowNum++) {\r\n // Adjust width of cards at medium screen sizes, based on number of listings & if final row is being shown\r\n let sizeMd = 3;\r\n if((curRowNum + 1) === totalNumRows) {\r\n let numRemainingListings = (topicListings.length - curTopicListingNum);\r\n sizeMd = 12 / numRemainingListings;\r\n }\r\n \r\n let cols = []; // Reset the content to render in the columns for the next row\r\n for(let curColNum = 0; curColNum < totalNumCols; curColNum++) {\r\n // Adjust width of cards shown at small screen sizes, based on number of listings\r\n let sizeSm = 6; let numRemainingListings = (topicListings.length - curTopicListingNum);\r\n if(numRemainingListings <= 1) {\r\n sizeSm = topicListings.length % 2 === 0 ? 6 : 12;\r\n }\r\n \r\n // Do not assemble any further cards if we have already assembled cards for all available topic listings\r\n if(curTopicListingNum === topicListings.length) {\r\n break;\r\n }\r\n \r\n // Get the next available topic listing\r\n let topicListing = topicListings[curTopicListingNum];\r\n \r\n // // Get featured image, or 'default' image if topic appears to have no featured image\r\n const icon = (topicListing.icon && ionicons[topicListing.icon]) ?\r\n ionicons[topicListing.icon] :\r\n ionicons['addCircle'];\r\n \r\n // Assemble next topic listing icon card and add it to array of assembled columns within current row.\r\n cols.push(\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n { ! page.isLoading ? (\r\n \r\n ) : (\r\n \r\n \r\n \r\n { ! page.isLoading ? (\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n","/**\r\n * This component renders 'cards' to display for the specified topics. Each card includes a title, brief excerpt,\r\n * and button; and the card links to another page within the app. The cards are displayed within a 4 column grid\r\n * (the cards stretch horizontally to fit the available space if there are less than 4 cards in a column), which\r\n * is horizontally centred within the page content. This grid is surrounded by a full-width grey background, and\r\n * a heading is displayed at the top. If content is still loading, 4 cards containing 'skeleton' content will be\r\n * displayed instead.\r\n *\r\n * Cards are rendered using the IonCard component (see https://ionicframework.com/docs/api/card), and the\r\n * IonGrid component is used to render the grid and to centre this horizontally within the page content (see\r\n * https://ionicframework.com/docs/api/grid and https://ionicframework.com/docs/layout/grid).\r\n *\r\n * See the code comments below for details of the 'props' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React from 'react';\r\nimport { IonGrid, IonRow } from '@ionic/react';\r\n\r\n/* Get required custom app components */\r\nimport { TopicCard } from './TopicCard';\r\nimport { TopicCardLoading } from './TopicCardLoading';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\n\r\n/**\r\n * The following 'props' must be passed to this component:\r\n *\r\n * @param {string} heading\r\n * The textual content to display in the top heading. This text can include basic HTML.\r\n * @param {array} topics\r\n * Array of JSON objects containing the details to display in each topic card - including title, excerpt,\r\n * page link path, and content template to use if navigating to a new page. For example:\r\n *\r\n * [\r\n * {\r\n * 'title': 'Bullying in the Workplace',\r\n * 'link': '/work-life/bullying/bullying-in-the-workplace/',\r\n * 'excerpt': 'Some excerpt text ...',\r\n * 'template': 'page-topic'\r\n * },\r\n * {\r\n * 'title': 'A bully or a strong manager?',\r\n * 'link': '/work-life/bullying/a-bully-or-a-strong-manager/',\r\n * 'excerpt': 'Some other excerpt text ...',\r\n * 'template': 'page-topic'\r\n * }\r\n * ]\r\n *\r\n * @param {boolean} isLoading\r\n * Is the page content still loading? If so, 4 cards containing 'skeleton' content will be displayed instead\r\n */\r\nconst TopicCards = (\r\n {\r\n heading,\r\n topics,\r\n isLoading\r\n }\r\n) => {\r\n \r\n const totalNumCols = 4; const rows = [];\r\n \r\n // Assemble the topic cards to display if content is not still loading\r\n if( ! isLoading) {\r\n // Do not render any topic cards if there are no topics\r\n if(topics.length === 0) {\r\n return null;\r\n }\r\n \r\n // Calculate the number of rows to render, based on the number of topics\r\n const totalNumRows = Math.ceil(topics.length / totalNumCols);\r\n \r\n // Loop through each row and column, assembling the topic card to render in each grid 'cell'\r\n let curTopicNum = 0;\r\n for(let curRowNum = 0; curRowNum < totalNumRows; curRowNum++) {\r\n // Adjust topic card widths at medium screen sizes, based on number of topics & if final row is being shown\r\n let sizeMd = 3;\r\n if((curRowNum + 1) === totalNumRows) {\r\n let numRemainingTopics = (topics.length - curTopicNum);\r\n sizeMd = 12 / numRemainingTopics;\r\n }\r\n \r\n let cols = []; // Reset the content to render in the columns for the next row\r\n for(let curColNum = 0; curColNum < totalNumCols; curColNum++) {\r\n // Adjust width of topic cards shown at small screen sizes, based on number of remaining topics\r\n let sizeSm = 6; let numRemainingTopics = (topics.length - curTopicNum);\r\n if(numRemainingTopics <= 1) {\r\n sizeSm = topics.length % 2 === 0 ? 6 : 12;\r\n }\r\n \r\n // Do not assemble any further cards if we have already assembled cards for all available topics\r\n if(curTopicNum === topics.length) {\r\n break;\r\n }\r\n \r\n // Get the next available topic\r\n let topic = topics[curTopicNum];\r\n \r\n // Assemble the next topic card and add it to the array of assembled columns within the current row.\r\n cols.push(\r\n \r\n \r\n \r\n {rows}\r\n \r\n \r\n
\r\n );\r\n \r\n};\r\n\r\nexport default TopicCards;","/**\r\n * This component renders an inspirational quote, for display on an app page. This includes the HTML text content\r\n * to display the quote, as well as a circular quote image displayed on the left. A placeholder image is displayed\r\n * if no quote image was explicitly specified. If the quote content is still loading, 'skeleton' content based on\r\n * the anticipated final component layout will be displayed instead.\r\n *\r\n * This component uses the IonGrid components (see https://ionicframework.com/docs/api/grid and\r\n * https://ionicframework.com/docs/layout/grid) to display the quote, with 3 'columns' allocated for the image,\r\n * and 9 for the quote text. The maximum width of the grid is 720px, so it will be centred on larger screens.\r\n *\r\n * See the code comments below for details of the 'props' that must be passed to this component.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React from 'react';\r\nimport { IonCol, IonGrid, IonImg, IonRow, IonSkeletonText } from '@ionic/react';\r\n\r\n/* Get required custom app components */\r\nimport { SkeletonTextParagraphs } from './SkeletonTextParagraphs';\r\n\r\n/* Import app helper function(s) */\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './Quote.css';\r\n\r\n/* Import image file asset(s) used by this component */\r\nimport quotePlaceholderImg from '../images/quote-grey-default.png';\r\n\r\n/**\r\n * The following 'props' must be passed to this component:\r\n *\r\n * @param {string} quote\r\n * The textual quote content to display. Can contain special characters and basic HTML.\r\n * @param {string} image\r\n * The complete URL of an image to display on the left hand side of the quote. This is styled to always appear\r\n * as a circle/oval, even if the original image was square or rectangular. A placeholder image is displayed\r\n * if no image URL is specified.\r\n * @param {boolean} isLoading\r\n * Is the page content still loading? If so, 'skeleton' content for the quote text & image is displayed instead\r\n */\r\nexport const Quote = (\r\n {\r\n quote,\r\n image,\r\n isLoading\r\n }\r\n) => {\r\n \r\n // Don't display anything if no quote text was specified (unless content is still loading)\r\n if ( ! quote && ! isLoading) {\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 \r\n \r\n\r\n { ! page.isLoading && page.data.content.length > 0 && (\r\n \r\n\r\n
\r\n );\r\n};\r\n","/**\r\n * This component renders a helpsheet download button. This button is centred and includes a 'Download' icon.\r\n * When clicked upon, a PDF helpsheet is opened in a new tab/window, and helpsheet access stats are sent via\r\n * a request to the WP REST API. Details of the helpsheet to download are retrieved from the global app state\r\n * (accessible via the AppContext). The component is not rendered if a helpsheet is not available for the\r\n * current page.\r\n *\r\n * The button is rendered using the IonButton component (see https://ionicframework.com/docs/api/button),\r\n * and is enclosed within a \r\n \r\n
tag.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonButton, IonIcon } from '@ionic/react';\r\n\r\n/* Get app context and associated actions, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Import data handling function(s) */\r\nimport { sendStatsToApi } from '../data/general/sendStatsToApi';\r\n\r\n/* Load Ionicons */\r\nimport { download } from 'ionicons/icons';\r\n\r\n/* Get component stylesheet(s) */\r\nimport './HelpsheetDownloadButton.css';\r\n\r\nexport const HelpsheetDownloadButton = () => {\r\n \r\n // Use app context to retrieve and update the current page data as required\r\n const {state, dispatch} = useContext(AppContext);\r\n const {data} = state.page;\r\n \r\n // Don't render this component if no helpsheet is available, or if helpsheets are disabled on this page\r\n if( ! data.help_sheet || data.show_help_sheet === 'no') {\r\n return null;\r\n }\r\n \r\n // Handle clicks upon the helpsheet download button\r\n const onHelpsheetDownload = () => {\r\n // Open helpsheet in a new tab/window\r\n window.open(data.help_sheet, \"_blank\");\r\n \r\n // Send helpsheet access stats to the WP REST API\r\n const pageVisitData = {\r\n page_id: data.id\r\n }\r\n sendStatsToApi(pageVisitData, 'helpsheet', state.user.data.token, dispatch);\r\n }\r\n \r\n return (\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n { ! page.isLoading ? (\r\n \r\n ) : (\r\n \r\n \r\n { ! page.isLoading ? (\r\n <>\r\n \r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/Ionic dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { IonGrid, IonLoading } from '@ionic/react';\r\n\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the app components that are used by this page content template */\r\nimport { SkeletonTextParagraphs } from '../components/SkeletonTextParagraphs';\r\n\r\nexport const ContentIsLoadingTemplate = () => {\r\n \r\n // Use app context to retrieve the current page data\r\n const {state} = useContext(AppContext);\r\n \r\n return (\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n { ! page.isLoading ? (\r\n \r\n \r\n
\r\n );\r\n};\r\n","/**\r\n * @todo review & document\r\n */\r\n\r\n/* Get React/React Router dependencies */\r\nimport React, { useContext } from 'react';\r\nimport { useLocation } from 'react-router';\r\n\r\n/* Get app context, so the app state can be retrieved and/or updated as required */\r\nimport { AppContext } from '../data/AppContext';\r\n\r\n/* Get the page content template components */\r\nimport { ErrorTemplate } from './ErrorTemplate';\r\nimport { HomeTemplate } from './HomeTemplate';\r\nimport { SectionRootTemplate } from './SectionRootTemplate';\r\nimport { TopicListingTemplate } from './TopicListingTemplate';\r\nimport { TopicTemplate } from './TopicTemplate';\r\nimport { ContentIsLoadingTemplate } from './ContentIsLoadingTemplate';\r\nimport { BasicTemplate } from './BasicTemplate';\r\n\r\nexport const TemplateLoader = () => {\r\n const { state } = useContext(AppContext);\r\n const { page } = state;\r\n \r\n const { pathname } = useLocation();\r\n \r\n if(page.isError) {\r\n return - \r\n {menuItems.map((item, index) => {\r\n return (\r\n
- \r\n {item.type !== 'custom' && item.target !== '_blank' ? (\r\n
\r\n {state.config.liveChatEnabled && (\r\n openLiveChat(state)}>\r\n \r\n )}\r\n \r\n {data.display_phone !== 'no' &&\r\n phone && (\r\n window.open(phoneUrl, \"_blank\")}>\r\n \r\n )}\r\n \r\n {data.display_email !== 'no' &&\r\n email && (\r\n window.open('mailto:' + email, \"_blank\")}>\r\n \r\n )}\r\n
\r\n {heading}
\r\n )}\r\n- \r\n {menuItems.map((item, index) => {\r\n return (\r\n
- \r\n {item.type !== 'custom' && item.target !== '_blank' ? (\r\n
\r\n
\r\n );\r\n \r\n};","/**\r\n * @todo review & document\r\n */\r\n\r\nimport React, {useContext} from 'react';\r\n\r\nimport './Breadcrumbs.css';\r\n\r\nimport { IonGrid, IonSkeletonText } from \"@ionic/react\";\r\nimport {AppContext} from \"../data/AppContext\";\r\nimport { Link, useLocation } from \"react-router-dom\";\r\nimport { sanitiseHtml } from '../helpers/sanitiseHtml';\r\nimport { changePage } from '../helpers/changePage';\r\n\r\nexport const Breadcrumbs = () => {\r\n \r\n const { state, dispatch } = useContext(AppContext);\r\n const { data } = state.page;\r\n \r\n const location = useLocation();\r\n if(location.pathname === '/' || state.page.isError) {\r\n return null;\r\n }\r\n \r\n if(state.page.isLoading) {\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 {(state.config.data.display_phone !== 'no' && phone) ||\r\n (state.config.data.display_live_chat !== 'no') ||\r\n (state.config.data.display_email !== 'no' && email) ? (\r\n \r\n \r\n \r\n
\r\n \r\n {state.config.data.text.footer_contact_section_title}
\r\n ) : null }\r\n \r\n {state.config.data.display_phone !== 'no' &&\r\n phone && (\r\n\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n logoutUser(dispatch)}>{state.config.data.text.logout}\r\n \r\n \r\n \r\n {state.config.data.display_cic_logo === 'yes' && (\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 Loading Error
\r\nApologies, this page did not load successfully. Please check whether you are currently\r\n connected to the internet. If not, connect now, and then reload this page.
\r\nOtherwise, please contact us for further assistance...
\r\n\r\n {state.config.data.text.search_results_title.replace('[SEARCH_QUERY]', query)}\r\n
\r\n \r\n {rows.length > 0 && (\r\n\r\n {state.config.data.text.no_search_results_message.replace(\r\n '[SEARCH_QUERY]', query\r\n )}\r\n
\r\n )}\r\n \r\n\r\n \r\n = search.totalPages && ! search.isLoadingNextPage}\r\n >\r\n \r\n \r\n \r\n \r\n ) :\r\n search.query.length === 0 ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n \r\n \r\n {state.config.data.text.search_empty_field_title}
\r\n{state.config.data.text.search_empty_field_message}
\r\n{state.config.data.text.search_load_error_title}
\r\n {state.config.data.text.search_load_error_message ?\r\n (\r\n\r\n Apologies, the search results did not load successfully.\r\n Please try the following steps:\r\n
\r\n\r\n 1. Check whether you are currently connected to the internet.\r\n If not, connect now and then reload this page.\r\n
\r\n\r\n 2. Try searching for something different using the search bar\r\n at the top.\r\n
\r\n \r\n )}\r\n openLiveChat(state)}>\r\n \r\n
\r\n );\r\n};","/**\r\n * This function updates the status indicating whether the Live Chat functionality should currently be enabled or not.\r\n *\r\n * This status is stored within the global `state.config.liveChatEnabled` property, similar to other app state\r\n * properties. This property can then be used to conditionally render Live Chat-related components, depending on its\r\n * value. The live chat status is updated using the normal mechanisms to update the app state - i.e. by dispatching\r\n * the appropriate `setLiveChatDisabled()` or `setLiveChatEnabled()` actions, and then transforming the app state as\r\n * appropriate via the relevant reducer.\r\n *\r\n * Note that the Live Chat functionality may need to be disabled for a number of potential reasons, so this function\r\n * automatically disables the Live Chat if any of these reasons are currently applicable:\r\n *\r\n * - The Live Chat has been configured via the site settings not to appear on this site.\r\n * - The Live Chat provider URL (configured via the site settings) is not currently known.\r\n * - The user is not currently logged in.\r\n * - The user is currently offline.\r\n * - It is not currently a weekday (i.e. Monday - Friday).\r\n * - The current time of day is before the start time configured via the site settings.\r\n * - The current time of day is after the stop time configured via the site settings.\r\n *\r\n * If none of these reasons are currently applicable, the Live Chat is automatically enabled.\r\n *\r\n * If Live Chat logging is currently enabled within the relevant app environment, the reasons for disabling or enabling\r\n * the Live Chat will be logged to the browser console.\r\n *\r\n * ----------\r\n * - Usage: -\r\n * ----------\r\n *\r\n * 1. Import this function at the top of any file that needs to update the Live Chat status:\r\n *\r\n * import { updateLiveChatStatus } from '../data/config/updateLiveChatStatus';\r\n *\r\n * 2. Add code similar to this within the relevant file (note: this function could be potentially be called from within\r\n * a `useEffect()` React hook, to run the function only when certain conditions and/or events occur):\r\n *\r\n * updateLiveChatStatus(state.config.data, state.user.loggedIn, dispatch);\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\nimport { setLiveChatDisabled, setLiveChatEnabled } from './config.actions';\r\nimport { logLiveChatStatus } from '../../helpers/openLiveChat';\r\n\r\nexport const updateLiveChatStatus = (configData, userLoggedIn, dispatch) => {\r\n // Check if Live Chat is not available on this site:\r\n if(configData.display_live_chat === 'no') {\r\n logLiveChatStatus('Disabling Live Chat: This has been configured not to display on this site.');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Check if Live Chat provider URL is not known:\r\n if(configData.live_chat_url.length === 0) {\r\n logLiveChatStatus('Disabling Live Chat: Live Chat provider URL is not currently known.');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Check if user is not logged in:\r\n if(!userLoggedIn) {\r\n logLiveChatStatus('Disabling Live Chat: User is not currently logged in.');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Check if user is offline:\r\n if(!navigator.onLine) {\r\n logLiveChatStatus('Disabling Live Chat: User is currently offline.');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Extract dates/times, so that further checks can be performed:\r\n const curDateTime = new Date();\r\n const splitStartTime = configData.live_chat_start_time.split(':');\r\n const startTime = new Date();\r\n startTime.setHours(parseInt(splitStartTime[0]), parseInt(splitStartTime[1]),0);\r\n const stopTime = new Date();\r\n const splitStopTime = configData.live_chat_stop_time.split(':');\r\n stopTime.setHours(parseInt(splitStopTime[0]), parseInt(splitStopTime[1]),0);\r\n \r\n // Check if it is not a weekday:\r\n if(curDateTime.getDay() === 6 || curDateTime.getDay() === 0) {\r\n logLiveChatStatus('Disabling Live Chat: It is currently a Saturday or Sunday.');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Check if current time of day is before configured start time:\r\n if(curDateTime < startTime) {\r\n logLiveChatStatus('Disabling Live Chat: Current time (' + curDateTime + ') is before start time (' + startTime + ').');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // Check if current time of day is after configured stop time:\r\n if(curDateTime >= stopTime) {\r\n logLiveChatStatus('Disabling Live Chat: Current time (' + curDateTime + ') is after stop time (' + stopTime + ').');\r\n dispatch(setLiveChatDisabled());\r\n return;\r\n }\r\n \r\n // None of the checks have identified any reasons to disable the Live Chat, so it can now be enabled:\r\n logLiveChatStatus('Enabling Live Chat...');\r\n dispatch(setLiveChatEnabled());\r\n}","/**\r\n * This file contains JS functions to set up the action objects which describe what happens when the app state\r\n * relating to the current app configuration is changed, e.g. as a result of retrieving config data from the\r\n * WP REST API (see the fetchAppConfig() function). Each action object specifies the action type and the associated\r\n * data which will be used to update the state via the associated reducer (see the config.reducer.js file).\r\n *\r\n * This forms part of the simple Redux-like state management pattern for React which is implemented for this app\r\n * using hooks. This solution is based on Ionic's suggested mechanism for managing app state - see:\r\n * https://ionicframework.com/blog/a-state-management-pattern-for-ionic-react-with-react-hooks/\r\n *\r\n * The code below is based on a simplified version of the actions in the 'Ionic Conference App' template (see e.g.\r\n * https://github.com/ionic-team/ionic-react-conference-app/blob/master/src/data/user/user.actions.ts).\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nexport const initConfigFetch = () => (\r\n {\r\n type: 'CONFIG_FETCH_INIT'\r\n }\r\n);\r\n\r\nexport const setConfigFetchSuccess = (payload) => (\r\n {\r\n type: 'CONFIG_FETCH_SUCCESS',\r\n payload: payload\r\n }\r\n);\r\n\r\nexport const setConfigFetchError = () => (\r\n {\r\n type: 'CONFIG_FETCH_ERROR'\r\n }\r\n);\r\n\r\nexport const setLiveChatEnabled = () => (\r\n {\r\n type: 'CONFIG_LIVE_CHAT_ENABLED'\r\n }\r\n);\r\n\r\nexport const setLiveChatDisabled = () => (\r\n {\r\n type: 'CONFIG_LIVE_CHAT_DISABLED'\r\n }\r\n);","/**\r\n * This file contains functionality to extract raw app configuration-related JSON data (which has already been\r\n * retrieved e.g. from WP's REST API), converting it into a simpler format which can then be used throughout the app.\r\n * If the raw data cannot be extracted/formatted correctly, an error will be thrown - this then needs to be handled\r\n * elsewhere in the app.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport { configInitialState, homepageBannerInitialState, menuItemInitialState } from './config.init';\r\n\r\nimport { extractFormattedPageTemplateName, extractPagePath } from '../page/extractFormattedPageData';\r\nimport { extractStandardDataProperties } from '../general/extractStandardDataProperties';\r\nimport { getPagePathFromUrl } from '../../helpers/getPagePaths';\r\n\r\n/**\r\n * This function converts the raw app configuration-related JSON data which has already been retrieved\r\n * (e.g. from WP's REST API) into a simpler format which can then be used throughout the app.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {Object}\r\n * Formatted app configuration data, which can be used throughout the app as required.\r\n *\r\n * @throws {Error}\r\n * If the app configuration data cannot be formatted successfully\r\n */\r\nexport function extractFormattedConfig(rawConfig) {\r\n // Check if any app configuration data has been retrieved\r\n if( ! rawConfig || rawConfig.length === 0) {\r\n throw new Error('No app configuration data can be retrieved.');\r\n }\r\n \r\n /* Extract all of the standard configuration data properties supported by the app from the raw data,\r\n skipping those properties that require their own dedicated data extraction mechanism. */\r\n const skipProperties = ['menus', 'menu_locations', 'colours', 'text', 'homepage_banners'];\r\n const formattedConfig = extractStandardDataProperties(\r\n rawConfig, configInitialState.data, skipProperties\r\n );\r\n \r\n // Attempt to extract more complex config data - e.g. menus (including associated menu items), colours, etc\r\n formattedConfig.menus = extractMenus(rawConfig);\r\n formattedConfig.menu_locations = extractMenuLocations(rawConfig, formattedConfig.menu_locations);\r\n formattedConfig.colours = extractFormattedColours(rawConfig);\r\n formattedConfig.text = extractFormattedTextStrings(rawConfig);\r\n formattedConfig.homepage_banners = extractHomepageBanners(rawConfig);\r\n \r\n return formattedConfig;\r\n}\r\n\r\n/**\r\n * This function converts raw retrieved JSON data containing details about the app menus (including associated menu\r\n * items) into a simpler format which can then be used throughout the app as required.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {array}\r\n * Formatted app menus data (including details of associated menu items), which can be used throughout the app.\r\n *\r\n * @throws {Error}\r\n * If the app menus data cannot be formatted successfully\r\n */\r\nfunction extractMenus(rawConfig) {\r\n // Don't extract any formatted menus data if no data relating to the menus exists\r\n if( ! rawConfig.hasOwnProperty('menus') || ! rawConfig.menus || rawConfig.menus.length === 0) {\r\n return [];\r\n }\r\n \r\n // Get the raw data relating to the app menus\r\n const rawMenus = rawConfig.menus; const formattedMenus = [];\r\n \r\n // Loop through each retrieved menu, and extract corresponding raw data\r\n for(let i = 0; i < rawMenus.length; i++) {\r\n // Get the raw data relating to the current retrieved menu\r\n let curRawMenu = rawMenus[i]; let curFormattedMenu = {};\r\n \r\n // Attempt to extract the menu ID. This property is required for all menus.\r\n if( ! curRawMenu.hasOwnProperty('id') || ! curRawMenu.id) {\r\n throw new Error('Unexpected menu data format: ID not specified.');\r\n }\r\n curFormattedMenu.id = curRawMenu.id;\r\n \r\n // Attempt to extract the menu items associated with this menu. This data is required for all menus.\r\n if( ! curRawMenu.hasOwnProperty('items')) {\r\n throw new Error('Unexpected menu data format: Items not specified.');\r\n }\r\n if(curRawMenu.items.length === 0) {\r\n continue; // Skip any menus with no menu items\r\n }\r\n curFormattedMenu.items = extractMenuItems(curRawMenu.items);\r\n \r\n formattedMenus.push(curFormattedMenu);\r\n }\r\n \r\n return formattedMenus;\r\n}\r\n\r\n/**\r\n * This function converts raw retrieved JSON data containing details about the items in an app menu into a simpler\r\n * format which can then be used throughout the app as required.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {array} rawMenuItems\r\n * Array containing raw data about all the items in a menu. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {array}\r\n * Formatted menu items data, which can be used throughout the app as required.\r\n *\r\n * @throws {Error}\r\n * If the app menu items data cannot be formatted successfully\r\n */\r\nfunction extractMenuItems(rawMenuItems) {\r\n const skipProperties = ['link', 'template'];\r\n \r\n // Loop through each retrieved menu item, and extract corresponding raw data\r\n const formattedMenuItems = [];\r\n for(let i = 0; i < rawMenuItems.length; i++) {\r\n // Get the raw data relating to the current retrieved menu item\r\n let curRawMenuItem = rawMenuItems[i];\r\n \r\n // Check that all the required menu item data properties exist in the raw data\r\n if( ! curRawMenuItem.hasOwnProperty('id') || ! curRawMenuItem.id) {\r\n throw new Error('Unexpected menu item data format: ID not specified.');\r\n }\r\n if( ! curRawMenuItem.hasOwnProperty('link') || ! curRawMenuItem.link) {\r\n throw new Error('Unexpected menu item data format: Link URL not specified.');\r\n }\r\n if( ! curRawMenuItem.hasOwnProperty('title')) {\r\n throw new Error('Unexpected menu item data format: Title not specified.');\r\n }\r\n \r\n /* Extract all of the standard menu item properties supported by the app from the raw data,\r\n skipping those properties that require their own dedicated data extraction mechanism. */\r\n const curFormattedMenuItem = extractStandardDataProperties(\r\n curRawMenuItem, menuItemInitialState, skipProperties\r\n );\r\n \r\n // If this menu item is a custom link, extract the full link URL. Otherwise extract the relevant page path.\r\n if(curRawMenuItem.hasOwnProperty('type') && curRawMenuItem.type === 'custom') {\r\n curFormattedMenuItem.link = curRawMenuItem.link;\r\n } else {\r\n curFormattedMenuItem.link = extractPagePath(curRawMenuItem);\r\n }\r\n \r\n // Extract the template used to display the relevant page if available\r\n if(curRawMenuItem.hasOwnProperty('template')) {\r\n curFormattedMenuItem.template = extractFormattedPageTemplateName(curRawMenuItem.template);\r\n }\r\n \r\n formattedMenuItems.push(curFormattedMenuItem);\r\n }\r\n \r\n return formattedMenuItems;\r\n}\r\n\r\n/**\r\n * This function converts raw retrieved JSON data containing details about the app menu locations and associated menu\r\n * IDs into a simpler format which can then be used throughout the app as required.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @param {Object} initMenuLocations\r\n * Object containing properties corresponding to the initial standard menu locations supported by the app.\r\n * @returns {Object}\r\n * Formatted menu locations and corresponding menu IDs, which can be used throughout the app.\r\n *\r\n * @throws {Error}\r\n * If the app menu locations data cannot be formatted successfully\r\n */\r\nfunction extractMenuLocations(rawConfig, initMenuLocations) {\r\n // Just use the standard defined menu locations data if the raw data doesn't contain menu locations details\r\n if(\r\n ! rawConfig.hasOwnProperty('menu_locations') ||\r\n ! rawConfig.menu_locations ||\r\n rawConfig.menu_locations.length === 0\r\n ) {\r\n return initMenuLocations;\r\n }\r\n \r\n // Extract all of the standard menu locations supported by the app from the raw data\r\n return extractStandardDataProperties(\r\n rawConfig.menu_locations, initMenuLocations, []\r\n );\r\n}\r\n\r\n/**\r\n * This function converts the raw app colours JSON data which has already been retrieved\r\n * (e.g. from WP's REST API) into a simpler format which can then be used throughout the app.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {Object}\r\n * Formatted colours data, which can be used throughout the app as required.\r\n */\r\nexport function extractFormattedColours(rawConfig) {\r\n // Set up the default values to use for the formatted colours data\r\n const initialColours = {...configInitialState.data.colours};\r\n \r\n // Check if any colours data has been retrieved, use default colours if not\r\n if( ! rawConfig.hasOwnProperty('colours') || ! rawConfig.colours || rawConfig.colours.length === 0) {\r\n return initialColours;\r\n }\r\n \r\n // Extract all of the standard colours supported by the app from the raw data\r\n return extractStandardDataProperties(rawConfig.colours, initialColours, []);\r\n}\r\n\r\n/**\r\n * This function converts the raw configurable app text strings JSON data which has already been retrieved\r\n * (e.g. from WP's REST API) into a simpler format which can then be used throughout the app.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {Object}\r\n * Formatted configurable text strings data, which can be used throughout the app as required.\r\n */\r\nexport function extractFormattedTextStrings(rawConfig) {\r\n // Set up the default values to use for the formatted text strings data\r\n const initialTextStrings = {...configInitialState.data.text};\r\n \r\n // Check if any text strings data has been retrieved, use default text strings if not\r\n if( ! rawConfig.hasOwnProperty('text') || ! rawConfig.text || rawConfig.text.length === 0) {\r\n return initialTextStrings;\r\n }\r\n \r\n // Extract all of the standard text strings supported by the app from the raw data\r\n return extractStandardDataProperties(rawConfig.text, initialTextStrings, []);\r\n}\r\n\r\n/**\r\n * This function converts raw retrieved JSON data containing details about the homepage banners into a simpler\r\n * format which can then be used throughout the app as required.\r\n *\r\n * If the raw data cannot be extracted/formatted correctly, an error is thrown.\r\n *\r\n * @param {Object} rawConfig\r\n * JS object containing raw app configuration data. This may have been retrieved e.g. from WP's REST API.\r\n * @returns {array}\r\n * Formatted homepage banners data, which can be used throughout the app as required.\r\n */\r\nfunction extractHomepageBanners(rawConfig) {\r\n const skipProperties = ['page_link'];\r\n \r\n // Don't extract any formatted homepage banners data if no data relating to these banners exists\r\n if(\r\n ! rawConfig.hasOwnProperty('homepage_banners') ||\r\n ! rawConfig.homepage_banners ||\r\n rawConfig.homepage_banners.length === 0\r\n ) {\r\n return [];\r\n }\r\n \r\n // Loop through each retrieved homepage banner, and extract corresponding raw data\r\n const rawBanners = rawConfig.homepage_banners; const formattedBanners = [];\r\n for(let i = 0; i < rawBanners.length; i++) {\r\n // Get the raw data relating to the current retrieved homepage banner\r\n let curRawBanner = rawBanners[i];\r\n \r\n /* Extract all of the standard homepage banner properties supported by the app from the raw data,\r\n skipping those properties that require their own dedicated data extraction mechanism. */\r\n const curFormattedBanner = extractStandardDataProperties(\r\n curRawBanner, homepageBannerInitialState, skipProperties\r\n );\r\n \r\n // If a page link has been specified for this banner, extract the page path from this link\r\n if(curRawBanner.hasOwnProperty('page_link') && curRawBanner.page_link) {\r\n curFormattedBanner.link = getPagePathFromUrl(curRawBanner.page_link);\r\n }\r\n \r\n formattedBanners.push(curFormattedBanner);\r\n }\r\n \r\n return formattedBanners;\r\n}","/**\r\n * This file implements functionality to retrieve app configuration data in JSON format from WP's REST API.\r\n *\r\n * This configuration data (including details of whether data is still being loaded, whether any errors were\r\n * encountered, and the latest retrieved configuration details) is stored within the overall application state\r\n * (see 'data/state.js'), and can therefore be retrieved from anywhere in the app where needed.\r\n *\r\n * @category GenerateUK\r\n * @package wellonline-pwa\r\n * @author Patrick Hathway - Generate UK\r\n */\r\n\r\nimport { initConfigFetch, setConfigFetchError, setConfigFetchSuccess } from './config.actions';\r\n\r\nimport { extractFormattedConfig } from './extractFormattedConfig';\r\n\r\nimport ReactGA from 'react-ga';\r\nimport { sanitise } from '../../helpers/sanitiseHtml';\r\n\r\n/**\r\n * Asynchronous function to retrieve app configuration data in JSON format from the WP REST API.\r\n *\r\n * @param {function} dispatch\r\n * Dispatch function to use to update global application state when data retrieval status changes\r\n *\r\n * @returns {Promise