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.

Author: alishaevn

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()}
       />
       <Form.Check
@@ -35,15 +35,15 @@ const CookiePreferencesCheck = ({ cookieConsent, disableCookies, enableCookies }
         name='Disable Cookies'
         type='radio'
         id='disable-cookies'
-        checked={allowed === 'false'}
+        checked={!allowed}
         onChange={() => handleDisablingCookies()}
       />
     </Form>
   );
 }
 
 CookiePreferencesCheck.propTypes = {
-  cookieConsent: PropTypes.string.isRequired,
+  cookieConsentValue: PropTypes.bool.isRequired,
   disableCookies: PropTypes.func.isRequired,
   enableCookies: PropTypes.func.isRequired,
 }

src/components/CookiePreferences/CookiePreferencesCheck.stories.jsx

@@ -10,8 +10,7 @@ const Template = (args) => <CookiePreferencesCheck {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  cookieConsent: 'false',
+  cookieConsentValue: false,
   disableCookies: () => console.log('disable cookies'),
   enableCookies: () => console.log('enable cookies'),
 }
-

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 (
     <Modal
       show={show}
@@ -49,7 +47,7 @@ const CookiePreferencesModal = ({ cookieConsent, disableCookies, enableCookies }
 }
 
 CookiePreferencesModal.propTypes = {
-  cookieConsent: PropTypes.string.isRequired,
+  getCookieConsent: PropTypes.bool.isRequired,
   disableCookies: PropTypes.func.isRequired,
   enableCookies: PropTypes.func.isRequired,
 }

src/components/CookiePreferences/CookiePreferencesModal.stories.jsx

@@ -10,7 +10,7 @@ const Template = (args) => <CookiePreferencesModal {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  cookieConsent: undefined,
+  getCookieConsent: true,
   disableCookies: () => console.log('disable cookies'),
   enableCookies: () => console.log('enable cookies'),
 }