\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n media: selectors.media(state),\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n setMedia: (media) => dispatch(setMedia(media)),\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContributionImage);\r\n","import { DateTime } from \"luxon\";\r\n\r\nexport function FormattedDateTime(dateTime) {\r\n return `\r\n ${DateTime.fromISO(dateTime).toLocaleString({\r\n day: \"2-digit\",\r\n month: \"long\",\r\n year: \"numeric\",\r\n })} \r\n at \r\n ${DateTime.fromISO(dateTime).toLocaleString({\r\n hour: \"numeric\",\r\n minute: \"numeric\",\r\n })}`;\r\n}\r\n","import React from \"react\";\r\n\r\nfunction ConfirmCloseModal(props) {\r\n //We have two separate click handlers, one for the yes and one for the no button\r\n //On yes click, we set showConfirmCloseModal to false to close the confirmation message modal and the call the\r\n // props.closeRootModal method which closes the parent modal On no click, we set showConfirmCloseModal to false to\r\n // close the confirmation message modal, but set the confirmCloseModalIsOpen variable to false to know it has closed.\r\n // we do not call props.closeRootModal so the parent modal stays open\r\n function yesClickHandler() {\r\n props.setShowConfirmCloseModal(false);\r\n props.setConfirmCloseModalIsOpen(false);\r\n props.closeRootModal();\r\n }\r\n\r\n function noClickHandler() {\r\n props.setShowConfirmCloseModal(false);\r\n props.setConfirmCloseModalIsOpen(false);\r\n // reset focus to the parent modal\r\n props.setResetFocus(true);\r\n }\r\n\r\n return (\r\n
\r\n );\r\n}\r\n\r\nexport default ConfirmCloseModal;\r\n","import { isTab } from \"./keyHelper\";\r\nconst focusableElements =\r\n 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type=\"text\"]:not([disabled]), input[type=\"radio\"]:not([disabled]), input[type=\"checkbox\"]:not([disabled]), input[type=\"file\"]:not([disabled]), label[tabIndex]:not([disabled]), select:not([disabled])';\r\n\r\n/**\r\n * Function for trapping focus within an element\r\n * Lets a user tab between the first and last element in a circular fashion\r\n * @param {HTMLElement} element the element to trap focus in\r\n */\r\nexport function trapFocus(element) {\r\n // get all focusable elements in the provided element\r\n const focusableEls = element.querySelectorAll(focusableElements);\r\n const firstEl = focusableEls[0];\r\n const lastEl = focusableEls[focusableEls.length - 1];\r\n\r\n // listen for key presses\r\n element.addEventListener(\"keydown\", (e) => {\r\n // if the tab key is pressed\r\n if (isTab(e)) {\r\n // if going back up the dom, check if we're already on the first element\r\n if (e.shiftKey) {\r\n if (document.activeElement === firstEl) {\r\n lastEl.focus();\r\n e.preventDefault();\r\n }\r\n //if going forwards through the dom, check we're not on the last element\r\n } else {\r\n if (document.activeElement === lastEl) {\r\n firstEl.focus();\r\n e.preventDefault();\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Function for assigning focus to the first focusable element in an element\r\n * @param {HTMLElement} element the element to search for focusable elements in\r\n */\r\nexport function focusFirstElement(element) {\r\n const focusableEl = element.querySelector(focusableElements);\r\n focusableEl.focus();\r\n}\r\n","import React, { cloneElement, useState, useEffect, useRef } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport ConfirmCloseModal from \"../Modals/ConfirmCloseModal\";\r\nimport { trapFocus, focusFirstElement } from \"../../helpers/focusHelper\";\r\nimport PropTypes from \"prop-types\";\r\nimport { isEsc } from \"../../helpers/keyHelper\";\r\n\r\nconst modalRoot = document.getElementById(\"modal-container\");\r\n\r\nfunction createModal(props) {\r\n /**\r\n *\r\n * Handles the click event for the \"X\" (Close) button on a modal, it checks if the modal being shown (e.g\r\n * AddContributionModal) should show a confirm close message when trying to close it\r\n If the \"confirmClose\" prop is true then we set showConfirmCloseModal to true which displays the ConfirmCloseModal, and sets \"confirmCloseModelisOpen\" to true so that we know the confirm close modal is displayed on screen\r\n If the \"confirmClose\" prop is false, we do not need to show a confirm close message, so both are set to false\r\n * @param {boolean} confirmClose Boolean to state whether a modal should have a confirm close message modal\r\n * @param {Function} closeRootModal This is the function to close the parent modal of the close message modal\r\n * @param {Function} dismissError This is the function to dismiss all errors when the modal is closed\r\n * @param {Event} [e=null] The event which occurs on click, used to stop event bubbling\r\n */\r\n const handleCloseButtonClick = (\r\n confirmClose,\r\n closeRootModal,\r\n dismissError,\r\n e = null\r\n ) => {\r\n if (dismissError !== undefined) {\r\n dismissError();\r\n }\r\n\r\n if (e) {\r\n //Stops the event bubbling\r\n e.preventDefault();\r\n }\r\n if (confirmClose === true) {\r\n props.setShowConfirmCloseModal(true);\r\n props.setConfirmCloseModalIsOpen(true);\r\n } else {\r\n props.setShowConfirmCloseModal(false);\r\n props.setConfirmCloseModalIsOpen(false);\r\n closeRootModal();\r\n }\r\n };\r\n\r\n return (\r\n
\r\n \r\n );\r\n}\r\n\r\nModal.propTypes = {\r\n maxChars: PropTypes.number,\r\n closeRootModal: PropTypes.func,\r\n confirmClose: PropTypes.bool,\r\n showConfirmCloseModal: PropTypes.bool,\r\n setShowConfirmCloseModal: PropTypes.func,\r\n confirmCloseModalIsOpen: PropTypes.bool,\r\n setConfirmCloseModalIsOpen: PropTypes.func,\r\n isSmallModal: PropTypes.bool,\r\n dismissError: PropTypes.func\r\n};\r\n\r\nfunction Modal(props) {\r\n /** @type {boolean} Used to show and hide the \"ConfirmCloseModal\" when trying to close the parent modal */\r\n const [showConfirmCloseModal, setShowConfirmCloseModal] = useState(\r\n !!props.showConfirmCloseModal\r\n );\r\n\r\n const [resetFocus, setResetFocus] = useState(!!props.resetFocus);\r\n\r\n /** @type {boolean} Used to determine whether or not the \"ConfirmCloseModal is currently displayed on screen or not*/\r\n const [confirmCloseModalIsOpen, setConfirmCloseModalIsOpen] = useState(\r\n !!props.confirmCloseModalIsOpen\r\n );\r\n\r\n const node = useRef(null);\r\n\r\n useEffect(() => {\r\n trapFocus(node.current);\r\n focusFirstElement(node.current);\r\n setResetFocus(false);\r\n\r\n const handleEsc = (e) => {\r\n if (isEsc(e)) {\r\n // If the id of the target is \"closeModal\" then trigger the click\r\n // If it isn't (i.e. the user has focused on another element in the modal) find the button and then trigger the\r\n // click\r\n if (e.target.id === \"closeModal\") {\r\n e.target.click();\r\n } else {\r\n // Check if the target is the link for the help text, and find the button to close that modal (the button\r\n // will have a data attribute of moreinformation) We do this so it only closes the one modal and doesn't\r\n // trigger the 'confirm close' modal\r\n const closeModalButton = e.target.id === \"altTextHelpLink\" ? document.querySelector(\"[data-moreinformation='true']\") : document.getElementById(\"closeModal\");\r\n closeModalButton?.click();\r\n }\r\n }\r\n };\r\n window.addEventListener(\"keydown\", handleEsc);\r\n\r\n return () => {\r\n window.removeEventListener(\"keydown\", handleEsc);\r\n };\r\n }, [props.confirmCloseModalIsOpen, props.showConfirmCloseModal, resetFocus]);\r\n\r\n return createPortal(\r\n createModal({\r\n ...props,\r\n showConfirmCloseModal,\r\n setShowConfirmCloseModal,\r\n confirmCloseModalIsOpen,\r\n setConfirmCloseModalIsOpen,\r\n node,\r\n setResetFocus,\r\n }),\r\n modalRoot\r\n );\r\n}\r\n\r\nexport default Modal;","/**\r\n * Method for converting form data to json\r\n * @param {HTMLFormElement} form\r\n * @returns {} containing the form data as json\r\n */\r\nexport function getFormData(form) {\r\n const formData = [...form.elements].reduce((acc, el) => {\r\n //if an element with the same name has already been read convert it into an array\r\n if (acc[el.name] != null) {\r\n //strings spread as a char array so we need to handle them separately.\r\n if (typeof acc[el.name] === \"string\") {\r\n let oldValue = acc[el.name]; //store the old value\r\n acc[el.name] = [oldValue]; // convert to an array containing the old value.\r\n }\r\n acc[el.name] = [...acc[el.name], el.value]; // add the new value.\r\n } else if (el.name) {\r\n acc[el.name] = el.value; //if not an element name we have seen before, just store it.\r\n }\r\n return acc;\r\n }, {});\r\n return formData;\r\n}\r\n","import React from \"react\"; \r\nimport PropTypes from \"prop-types\";\r\nimport { ItemPropType } from \"../../PropTypes\";\r\nimport { connect } from \"react-redux\";\r\nimport { selectors } from \"../../app/slices/itemSlice\";\r\nimport { Duration } from \"luxon\";\r\n\r\nfunction ThankYouModal(props) {\r\n const { REACT_APP_CORPORATE_SITE_PROFILE_BASEURL } = process.env;\r\n const {\r\n item,\r\n user,\r\n closeRootModal\r\n } = props;\r\n\r\n let hasProfilePageLink = false;\r\n let thanksMessage = item.implementation.thanksMessage;\r\n let splitThanksMessage = \"\";\r\n\r\n let username = user.isOrganisation\r\n ? user.organisationName.split(\" \").join(\"\")\r\n : user.firstName + user.lastName;\r\n\r\n if (thanksMessage.includes(\"{moderationTime\")) {\r\n thanksMessage = thanksMessage.replace(\r\n \"{moderationTime}\",\r\n Duration.fromObject({\r\n minutes: item.implementation.moderationTimeInMinutes,\r\n }).toFormat(\"hh\")\r\n );\r\n }\r\n\r\n if (thanksMessage.includes(\"{profilePage}\")) {\r\n hasProfilePageLink = true;\r\n splitThanksMessage = thanksMessage.split(\"{profilePage}\");\r\n }\r\n\r\n return (\r\n