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: scientist-hq/webstore#316

Author: alishaevn

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 (
+    <Form>
+      <Form.Check
+        inline
+        label='Allow Cookies'
+        name='Allow Cookies'
+        type='radio'
+        id='allow-cookies'
+        checked={allowed === 'true'}
+        onChange={() => handleEnablingCookies()}
+      />
+      <Form.Check
+        inline
+        label='Disable Cookies'
+        name='Disable Cookies'
+        type='radio'
+        id='disable-cookies'
+        checked={allowed === 'false'}
+        onChange={() => handleDisablingCookies()}
+      />
+    </Form>
+  );
+}
+
+CookiePreferencesCheck.propTypes = {
+  cookieConsent: PropTypes.string.isRequired,
+  disableCookies: PropTypes.func.isRequired,
+  enableCookies: PropTypes.func.isRequired,
+}
+
+export default CookiePreferencesCheck

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

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 (
+    <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 = {
+  cookieConsent: PropTypes.string.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 = {
+  cookieConsent: undefined,
+  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,