Merge pull request #197 from scientist-softserv/316-cookie-policy

316-cookie-policy components

Author: alishaevn

src/components/CookiePreferences/CookiePreferencesCheck.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import Form from 'react-bootstrap/Form'
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+
+const CookiePreferencesCheck = ({ cookieConsentValue, disableCookies, enableCookies }) => {
+  // NOTE: the enable/disable cookies functions change the actual value.
+  // 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()
+    setAllowed(true)
+  }
+
+  const handleDisablingCookies = () => {
+    disableCookies()
+    setAllowed(false)
+  }
+
+  return (
+    <Form>
+      <Form.Check
+        inline
+        label='Allow Cookies'
+        name='Allow Cookies'
+        type='radio'
+        id='allow-cookies'
+        checked={allowed}
+        onChange={() => handleEnablingCookies()}
+      />
+      <Form.Check
+        inline
+        label='Disable Cookies'
+        name='Disable Cookies'
+        type='radio'
+        id='disable-cookies'
+        checked={!allowed}
+        onChange={() => handleDisablingCookies()}
+      />
+    </Form>
+  );
+}
+
+CookiePreferencesCheck.propTypes = {
+  cookieConsentValue: PropTypes.string.isRequired,
+  disableCookies: PropTypes.func.isRequired,
+  enableCookies: PropTypes.func.isRequired,
+}
+
+export default CookiePreferencesCheck

src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import CookiePreferencesCheck from './CookiePreferencesCheck'
+
+export default {
+  title: 'Components/CookiePreferencesCheck',
+  component: CookiePreferencesCheck,
+}
+
+const Template = (args) => <CookiePreferencesCheck {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  cookieConsentValue: false,
+  disableCookies: () => console.log('disable cookies'),
+  enableCookies: () => console.log('enable cookies'),
+}

src/components/CookiePreferences/CookiePreferencesModal.jsx

@@ -0,0 +1,54 @@
+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 = ({ getCookieConsent, disableCookies, enableCookies }) => {
+  const [show, setShow] = useState(getCookieConsent)
+  const handleClose = () => setShow(false)
+
+  const handleEnablingCookies = () => {
+    enableCookies()
+    handleClose()
+  }
+
+  const handleDisablingCookies = () => {
+    disableCookies()
+    handleClose()
+  }
+
+  return (
+    <Modal
+      show={show}
+      onHide={handleClose}
+      backdrop='static'
+      keyboard={false}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Cookie Preferences</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        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 <Link href='legal-notices/cookie-policy'>Cookie Policy</Link> page.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant='primary' onClick={handleEnablingCookies}>
+          Allow Cookies
+        </Button>
+        <Button variant='secondary' onClick={handleDisablingCookies}>
+          Disable Cookies
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+CookiePreferencesModal.propTypes = {
+  getCookieConsent: PropTypes.bool.isRequired,
+  disableCookies: PropTypes.func.isRequired,
+  enableCookies: PropTypes.func.isRequired,
+}
+
+export default CookiePreferencesModal

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) => <CookiePreferencesModal {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  getCookieConsent: true,
+  disableCookies: () => console.log('disable cookies'),
+  enableCookies: () => console.log('enable cookies'),
+}
+

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,