From 16438fa228fe6a8c7b25deaaf61b0b68b858683a Mon Sep 17 00:00:00 2001 From: Alisha Evans Date: Mon, 27 Nov 2023 16:18:30 -0600 Subject: [PATCH 1/4] create the CookiePreferences components the modal will show the next time a user visits any page the check is for the cookie policy page. so that a user can update their preference. ref: https://github.com/scientist-softserv/webstore/issues/316 --- .../CookiePreferencesCheck.jsx | 50 ++++++++++++++++ .../CookiePreferencesCheck.stories.jsx | 17 ++++++ .../CookiePreferencesModal.jsx | 58 +++++++++++++++++++ .../CookiePreferencesModal.stories.jsx | 17 ++++++ src/components/index.js | 4 ++ 5 files changed, 146 insertions(+) create mode 100644 src/components/CookiePreferences/CookiePreferencesCheck.jsx create mode 100644 src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx create mode 100644 src/components/CookiePreferences/CookiePreferencesModal.jsx create mode 100644 src/components/CookiePreferences/CookiePreferencesModal.stories.jsx diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.jsx new file mode 100644 index 00000000..eb735a6c --- /dev/null +++ b/src/components/CookiePreferences/CookiePreferencesCheck.jsx @@ -0,0 +1,50 @@ +import React from 'react' +import Form from 'react-bootstrap/Form' +import PropTypes from 'prop-types' +import { useState } from 'react' + +const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies }) => { + console.log('CookiePreferencesCheck', { cookieConsent, disableCookies, enableCookies }) + const [allowed, setAllowed] = useState(cookieConsent) + + const handleEnablingCookies = () => { + enableCookies() + setAllowed('true') + } + + const handleDisablingCookies = () => { + disableCookies() + setAllowed('false') + } + + return ( +
+ handleEnablingCookies()} + /> + handleDisablingCookies()} + /> + + ); +} + +CookiePreferencesCheck.propTypes = { + cookieConsent: PropTypes.string.isRequired, + disableCookies: PropTypes.func.isRequired, + enableCookies: PropTypes.func.isRequired, +} + +export default CookiePreferencesCheck diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx new file mode 100644 index 00000000..66db204e --- /dev/null +++ b/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import CookiePreferencesCheck from './CookiePreferencesCheck' + +export default { + title: 'Components/CookiePreferencesCheck', + component: CookiePreferencesCheck, +} + +const Template = (args) => + +export const Default = Template.bind({}) +Default.args = { + cookieConsent: 'false', + disableCookies: () => console.log('disable cookies'), + enableCookies: () => console.log('enable cookies'), +} + diff --git a/src/components/CookiePreferences/CookiePreferencesModal.jsx b/src/components/CookiePreferences/CookiePreferencesModal.jsx new file mode 100644 index 00000000..1a4e1ff9 --- /dev/null +++ b/src/components/CookiePreferences/CookiePreferencesModal.jsx @@ -0,0 +1,58 @@ +import React from 'react' +import Link from 'next/link' +import PropTypes from 'prop-types' +import Button from 'react-bootstrap/Button' +import Modal from 'react-bootstrap/Modal' +import { useState } from 'react' + +const CookiePreferencesModal = ({ cookieConsent, disableCookies, enableCookies }) => { + const [show, setShow] = useState(false) + const handleClose = () => setShow(false) + const handleShow = () => setShow(true) + console.log('CookiePreferencesModal', { cookieConsent }) + + const handleEnablingCookies = () => { + enableCookies() + handleClose() + } + + const handleDisablingCookies = () => { + disableCookies() + handleClose() + } + + if (!show && (cookieConsent === undefined)) return handleShow() + + return ( + + + Cookie Preferences + + + Please provide your consent below to our use of non-essential cookies on our site. + You may withdraw your consent at any point by visiting our Cookie Policy page. + + + + + + + ) +} + +CookiePreferencesModal.propTypes = { + cookieConsent: PropTypes.string.isRequired, + disableCookies: PropTypes.func.isRequired, + enableCookies: PropTypes.func.isRequired, +} + +export default CookiePreferencesModal diff --git a/src/components/CookiePreferences/CookiePreferencesModal.stories.jsx b/src/components/CookiePreferences/CookiePreferencesModal.stories.jsx new file mode 100644 index 00000000..cf70648f --- /dev/null +++ b/src/components/CookiePreferences/CookiePreferencesModal.stories.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import CookiePreferencesModal from './CookiePreferencesModal' + +export default { + title: 'Components/CookiePreferencesModal', + component: CookiePreferencesModal, +} + +const Template = (args) => + +export const Default = Template.bind({}) +Default.args = { + cookieConsent: undefined, + disableCookies: () => console.log('disable cookies'), + enableCookies: () => console.log('enable cookies'), +} + diff --git a/src/components/index.js b/src/components/index.js index 20088648..5bde7dce 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,6 +7,8 @@ import AdditionalInfo from './AdditionalInfo/AdditionalInfo' import BlankRequestForm from './BlankRequestForm/BlankRequestForm' import Button from './Button/Button' import CollapsibleSection from './CollapsibleSection/CollapsibleSection' +import CookiePreferencesCheck from './CookiePreferences/CookiePreferencesCheck' +import CookiePreferencesModal from './CookiePreferences/CookiePreferencesModal' import Image from './Image/Image' import Link from './Link/Link' import Loading from './Loading/Loading' @@ -23,6 +25,8 @@ export { BlankRequestForm, Button, CollapsibleSection, + CookiePreferencesCheck, + CookiePreferencesModal, Image, Link, Loading, From dded4bf26e786c87ccedd2b0bec1169da02c5c00 Mon Sep 17 00:00:00 2001 From: Alisha Evans Date: Mon, 27 Nov 2023 16:23:26 -0600 Subject: [PATCH 2/4] remove console logs and add a comment. --- src/components/CookiePreferences/CookiePreferencesCheck.jsx | 3 ++- src/components/CookiePreferences/CookiePreferencesModal.jsx | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.jsx index eb735a6c..1959f064 100644 --- a/src/components/CookiePreferences/CookiePreferencesCheck.jsx +++ b/src/components/CookiePreferences/CookiePreferencesCheck.jsx @@ -4,7 +4,8 @@ import PropTypes from 'prop-types' import { useState } from 'react' const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies }) => { - console.log('CookiePreferencesCheck', { cookieConsent, disableCookies, enableCookies }) + // NOTE: the enable/disable cookies functions change the actual value. + // the variable below is so the radio buttons update after being clicked. const [allowed, setAllowed] = useState(cookieConsent) const handleEnablingCookies = () => { diff --git a/src/components/CookiePreferences/CookiePreferencesModal.jsx b/src/components/CookiePreferences/CookiePreferencesModal.jsx index 1a4e1ff9..6c981e79 100644 --- a/src/components/CookiePreferences/CookiePreferencesModal.jsx +++ b/src/components/CookiePreferences/CookiePreferencesModal.jsx @@ -9,7 +9,6 @@ const CookiePreferencesModal = ({ cookieConsent, disableCookies, enableCookies } const [show, setShow] = useState(false) const handleClose = () => setShow(false) const handleShow = () => setShow(true) - console.log('CookiePreferencesModal', { cookieConsent }) const handleEnablingCookies = () => { enableCookies() From ce051b7f98ad63c717fb7c3aeb806b7a35276ed2 Mon Sep 17 00:00:00 2001 From: Alisha Evans Date: Tue, 28 Nov 2023 11:49:08 -0600 Subject: [PATCH 3/4] refactor the cookie preferences components move logic on whether to show the modal to the webstore. change the user decision of accepting or denying cookies to a boolean. --- .../CookiePreferences/CookiePreferencesCheck.jsx | 14 +++++++------- .../CookiePreferencesCheck.stories.jsx | 3 +-- .../CookiePreferences/CookiePreferencesModal.jsx | 8 +++----- .../CookiePreferencesModal.stories.jsx | 2 +- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.jsx index 1959f064..c1c4a2d5 100644 --- a/src/components/CookiePreferences/CookiePreferencesCheck.jsx +++ b/src/components/CookiePreferences/CookiePreferencesCheck.jsx @@ -3,19 +3,19 @@ import Form from 'react-bootstrap/Form' import PropTypes from 'prop-types' import { useState } from 'react' -const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies }) => { +const CookiePreferencesCheck = ({ cookieConsentValue, disableCookies, enableCookies }) => { // NOTE: the enable/disable cookies functions change the actual value. // the variable below is so the radio buttons update after being clicked. - const [allowed, setAllowed] = useState(cookieConsent) + const [allowed, setAllowed] = useState(cookieConsentValue) const handleEnablingCookies = () => { enableCookies() - setAllowed('true') + setAllowed(true) } const handleDisablingCookies = () => { disableCookies() - setAllowed('false') + setAllowed(false) } return ( @@ -26,7 +26,7 @@ const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies } name='Allow Cookies' type='radio' id='allow-cookies' - checked={allowed === 'true'} + checked={allowed} onChange={() => handleEnablingCookies()} /> handleDisablingCookies()} /> @@ -43,7 +43,7 @@ const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies } } CookiePreferencesCheck.propTypes = { - cookieConsent: PropTypes.string.isRequired, + cookieConsentValue: PropTypes.bool.isRequired, disableCookies: PropTypes.func.isRequired, enableCookies: PropTypes.func.isRequired, } diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx index 66db204e..2d6494ee 100644 --- a/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx +++ b/src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx @@ -10,8 +10,7 @@ const Template = (args) => export const Default = Template.bind({}) Default.args = { - cookieConsent: 'false', + cookieConsentValue: false, disableCookies: () => console.log('disable cookies'), enableCookies: () => console.log('enable cookies'), } - diff --git a/src/components/CookiePreferences/CookiePreferencesModal.jsx b/src/components/CookiePreferences/CookiePreferencesModal.jsx index 6c981e79..1037a358 100644 --- a/src/components/CookiePreferences/CookiePreferencesModal.jsx +++ b/src/components/CookiePreferences/CookiePreferencesModal.jsx @@ -5,8 +5,8 @@ import Button from 'react-bootstrap/Button' import Modal from 'react-bootstrap/Modal' import { useState } from 'react' -const CookiePreferencesModal = ({ cookieConsent, disableCookies, enableCookies }) => { - const [show, setShow] = useState(false) +const CookiePreferencesModal = ({ getCookieConsent, disableCookies, enableCookies }) => { + const [show, setShow] = useState(getCookieConsent) const handleClose = () => setShow(false) const handleShow = () => setShow(true) @@ -20,8 +20,6 @@ const CookiePreferencesModal = ({ cookieConsent, disableCookies, enableCookies } handleClose() } - if (!show && (cookieConsent === undefined)) return handleShow() - return ( export const Default = Template.bind({}) Default.args = { - cookieConsent: undefined, + getCookieConsent: true, disableCookies: () => console.log('disable cookies'), enableCookies: () => console.log('enable cookies'), } From 81a848fb54d194eea4a5fd5b49b362c2c8fa8325 Mon Sep 17 00:00:00 2001 From: Alisha Evans Date: Wed, 29 Nov 2023 16:35:14 -0600 Subject: [PATCH 4/4] some more cleanup --- .../CookiePreferences/CookiePreferencesCheck.jsx | 8 +++++--- .../CookiePreferences/CookiePreferencesModal.jsx | 1 - 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/CookiePreferences/CookiePreferencesCheck.jsx b/src/components/CookiePreferences/CookiePreferencesCheck.jsx index c1c4a2d5..97b8aa6a 100644 --- a/src/components/CookiePreferences/CookiePreferencesCheck.jsx +++ b/src/components/CookiePreferences/CookiePreferencesCheck.jsx @@ -5,8 +5,10 @@ import { useState } from 'react' const CookiePreferencesCheck = ({ cookieConsentValue, disableCookies, enableCookies }) => { // NOTE: the enable/disable cookies functions change the actual value. - // the variable below is so the radio buttons update after being clicked. - const [allowed, setAllowed] = useState(cookieConsentValue) + // the state variable below is so the radio buttons update after being clicked. + // NOTE: cookie values are strings. we are parsing it in state so we don't have to + // do strict evaluations (===) with strings in the code below. + const [allowed, setAllowed] = useState(JSON.parse(cookieConsentValue)) const handleEnablingCookies = () => { enableCookies() @@ -43,7 +45,7 @@ const CookiePreferencesCheck = ({ cookieConsentValue, disableCookies, enableCook } CookiePreferencesCheck.propTypes = { - cookieConsentValue: PropTypes.bool.isRequired, + cookieConsentValue: PropTypes.string.isRequired, disableCookies: PropTypes.func.isRequired, enableCookies: PropTypes.func.isRequired, } diff --git a/src/components/CookiePreferences/CookiePreferencesModal.jsx b/src/components/CookiePreferences/CookiePreferencesModal.jsx index 1037a358..942d8b94 100644 --- a/src/components/CookiePreferences/CookiePreferencesModal.jsx +++ b/src/components/CookiePreferences/CookiePreferencesModal.jsx @@ -8,7 +8,6 @@ import { useState } from 'react' const CookiePreferencesModal = ({ getCookieConsent, disableCookies, enableCookies }) => { const [show, setShow] = useState(getCookieConsent) const handleClose = () => setShow(false) - const handleShow = () => setShow(true) const handleEnablingCookies = () => { enableCookies()