diff --git a/overrides/components/page-footer/component.tsx b/overrides/components/page-footer/component.tsx index 203be309f..cc29f4ca5 100644 --- a/overrides/components/page-footer/component.tsx +++ b/overrides/components/page-footer/component.tsx @@ -1,6 +1,9 @@ -import React from "$veda-ui/react"; +import React, { useState, useEffect, useCallback } from "$veda-ui/react"; +import { useLocation } from "$veda-ui/react-router-dom"; import styled from "$veda-ui/styled-components"; import { NavLink } from "$veda-ui/react-router-dom"; +import { Modal, ModalHeadline, ModalFooter } from "$veda-ui/@devseed-ui/modal"; +import { FormCheckable } from "$veda-ui/@devseed-ui/form"; import { themeVal, glsp, @@ -21,7 +24,7 @@ import { } from "$veda-ui-scripts/utils/routes"; import { useFeedbackModal } from "$veda-ui-scripts/components/common/layout-root"; import { useMediaQuery } from "$veda-ui-scripts/utils/use-media-query"; -import Partners from "../../home/partners" +import Partners from "../../home/partners"; const FooterInner = styled.div` display: flex; @@ -92,7 +95,51 @@ const TintBox = styled.div` ${media.smallDown` justify-content: center; `} -` +`; + +const ModalBodyInner = styled.div` + display: flex; + flex-flow: column nowrap; + gap: ${variableGlsp()}; +`; + +const DisclaimerModalFooter = styled(ModalFooter)` + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + margin-top: ${glsp(2)}; +`; + +const DISCLAIMER_MODALS_DISMISSED_KEY = "disclaimerModalsDismissedKey"; +const EXPLORE_PATH = "/explore"; + +const MODALS_CONTENT = { + [EXPLORE_PATH]: { + headline: "Disclaimer", + body: ( +

+ This US GHG Center Explore visualization environment is an interactive + space for users to explore center data within a mapping environment. + Currently only one dataset at a time can be used within the environment. + Users are advised to review the material on the Overview page to better + understand the documentation pertaining to the data they are viewing. +

+ ), + }, + [ANALYSIS_PATH]: { + headline: "Disclaimer", + body: ( +

+ This US GHG Center analysis environment is an interactive space for + users to review time series of basic statistics for each dataset. All + users are advised to review the information provided on the dataset + landing page to better understand the data they are viewing. This + environment is intended to provide a means to explore temporal patterns + and is not intended for use in rigorous scientific data analysis. +

+ ), + }, +}; export default function PageFooter(props) { const nowDate = new Date(); @@ -100,94 +147,182 @@ export default function PageFooter(props) { const { show } = useFeedbackModal(); + // Open that disclaimer modal here + const { pathname } = useLocation(); + const currentPage = (pathname.match(/\/[^/]+$/)?.[0] as string) || ""; + + const [modalRevealed, setModalRevealed] = useState(true); + useEffect(() => { + setModalRevealed(true); + }, [currentPage]); + const [dontShowAgain, setDontShowAgain] = useState(true); + const [modalsDismissed, setModalsDismissed] = useState({ + [EXPLORE_PATH]: false, + [ANALYSIS_PATH]: false, + }); + + useEffect(() => { + const modalsDismissedRaw = localStorage.getItem( + DISCLAIMER_MODALS_DISMISSED_KEY + ); + try { + if (modalsDismissedRaw) { + setModalsDismissed(JSON.parse(modalsDismissedRaw)); + } + } catch (e) { + /* eslint-disable-next-line no-console */ + console.error(e); + } + }, [currentPage]); + + const onConfirmClick = useCallback(() => { + setModalRevealed(false); + const newModalsDismissed = { + ...modalsDismissed, + [currentPage]: dontShowAgain, + }; + setModalsDismissed(newModalsDismissed); + localStorage.setItem( + DISCLAIMER_MODALS_DISMISSED_KEY, + JSON.stringify(newModalsDismissed) + ); + }, [modalRevealed, dontShowAgain, currentPage]); + + const showModal = modalRevealed && modalsDismissed[currentPage] === false; + return ( - - - + + +
+ + By US GHG Center on{" "} + -

- - - + {" • "} + + v{props.appVersion} + +
+ + + + +

+ U.S. Greenhouse Gas Center Responsible Official:{" "} + + Argyro Kavvada + +

+ + + + ); }