Make marketing email checkbox as optional

app/src/client/App.tsx

@@ -57,7 +57,7 @@ export default function App({ children }: { children: ReactNode }) {
   useEffect(() => {
     if (user) {
       if (!user.isSignUpComplete) {
-        if (user.hasAcceptedTos && user.hasSubscribedToMarketingEmails) {
+        if (user.hasAcceptedTos) {
           updateCurrentUser({
             isSignUpComplete: true,
           });
@@ -67,13 +67,13 @@ export default function App({ children }: { children: ReactNode }) {
             localStorage.getItem('hasAcceptedTos') === 'true';
           const hasSubscribedToMarketingEmails =
             localStorage.getItem('hasSubscribedToMarketingEmails') === 'true';
-          if (!hasAcceptedTos || !hasSubscribedToMarketingEmails) {
+          if (!hasAcceptedTos) {
             setShowTosAndMarketingEmailsModal(true);
           } else {
             updateCurrentUser({
               isSignUpComplete: true,
-              hasAcceptedTos: true,
-              hasSubscribedToMarketingEmails: true,
+              hasAcceptedTos: hasAcceptedTos,
+              hasSubscribedToMarketingEmails: hasSubscribedToMarketingEmails,
             });
             setShowTosAndMarketingEmailsModal(false);
           }

app/src/client/auth/LoginSignupForm.tsx

@@ -45,7 +45,7 @@ const googleSignInUrl = `${config.apiUrl}/auth/google/login`;
 
 export const checkBoxErrMsg = {
   title:
-    'To proceed, please ensure you have accepted the Terms & Conditions, Privacy Policy, and opted to receive marketing emails.',
+    "To proceed, please ensure you've accepted our Terms & Conditions and Privacy Policy.",
   description: '',
 };
 
@@ -88,10 +88,10 @@ export const LoginSignupForm = ({
   } = hookForm;
 
   useEffect(() => {
-    if (tocChecked && marketingEmailsChecked) {
+    if (tocChecked) {
       setErrorMessage(null);
     }
-  }, [tocChecked, marketingEmailsChecked]);
+  }, [tocChecked]);
 
   const handleTocChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTocChecked(event.target.checked);
@@ -122,7 +122,7 @@ export const LoginSignupForm = ({
       updateLocalStorage();
       window.location.href = googleSignInUrl;
     } else {
-      if (tocChecked && marketingEmailsChecked) {
+      if (tocChecked) {
         updateLocalStorage();
         window.location.href = googleSignInUrl;
       } else {

app/src/client/components/TosAndMarketingEmailsModal.tsx

@@ -12,6 +12,9 @@ export type ErrorMessage = {
   description?: string;
 };
 
+export const notificationMsg =
+  'Before accessing the application, please confirm your agreement to the Terms & Conditions and Privacy Policy.';
+
 const TosAndMarketingEmailsModal = () => {
   const history = useHistory();
   const { isLoading, setSuccessMessage, setIsLoading } =
@@ -22,10 +25,10 @@ const TosAndMarketingEmailsModal = () => {
   const [marketingEmailsChecked, setMarketingEmailsChecked] = useState(false);
 
   useEffect(() => {
-    if (tocChecked && marketingEmailsChecked) {
+    if (tocChecked) {
       setErrorMessage(null);
     }
-  }, [tocChecked, marketingEmailsChecked]);
+  }, [tocChecked]);
 
   const handleTocChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTocChecked(event.target.checked);
@@ -39,12 +42,14 @@ const TosAndMarketingEmailsModal = () => {
 
   const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
-    if (tocChecked && marketingEmailsChecked) {
+    if (tocChecked) {
       setErrorMessage(null);
       updateCurrentUser({
         isSignUpComplete: true,
         hasAcceptedTos: tocChecked,
-        hasSubscribedToMarketingEmails: marketingEmailsChecked,
+        ...(marketingEmailsChecked && {
+          hasSubscribedToMarketingEmails: marketingEmailsChecked,
+        }),
       });
       history.push('/chat');
     } else {
@@ -66,18 +71,14 @@ const TosAndMarketingEmailsModal = () => {
 
       <div className='flex items-center justify-center z-50 p-16 backdrop-blur-sm bg-captn-light-cream/30 mt-16'>
         <div
-          className='toc-marketing-container bg-captn-dark-blue rounded-lg shadow-lg p-8 m-4 max-w-3xl mx-auto'
+          className='toc-marketing-container bg-captn-dark-blue rounded-lg shadow-lg p-8 m-4 max-w-xl mx-auto'
           style={customStyle}
         >
           <div className='inner-wrapper'>
             <h2 className='text-xl font-bold mb-4 text-captn-light-cream'>
               Almost there...
             </h2>
-            <p className='text-captn-light-cream'>
-              Before accessing the application, please confirm your agreement to
-              the Terms & Conditions, Privacy Policy, and consent to receiving
-              marketing emails by checking the boxes below
-            </p>
+            <p className='text-captn-light-cream'>{notificationMsg}</p>
             <TosAndMarketingEmails
               tocChecked={tocChecked}
               handleTocChange={handleTocChange}

app/src/client/tests/TosAndMarketingEmailsModal.test.tsx

@@ -4,7 +4,9 @@ import { fireEvent, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 
-import TosAndMarketingEmailsModal from '../components/TosAndMarketingEmailsModal';
+import TosAndMarketingEmailsModal, {
+  notificationMsg,
+} from '../components/TosAndMarketingEmailsModal';
 
 describe('TosAndMarketingEmailsModal', () => {
   test('renders TosAndMarketingEmailsModal component', async () => {
@@ -55,9 +57,7 @@ describe('TosAndMarketingEmailsModal', () => {
   test('renders error message when save button is clicked and checkboxes are not checked', async () => {
     renderInContext(<TosAndMarketingEmailsModal />);
     fireEvent.click(screen.getByText('Save'));
-    const errorItems = await screen.findAllByText(
-      'Before accessing the application, please confirm your agreement to the Terms & Conditions, Privacy Policy, and consent to receiving marketing emails by checking the boxes below'
-    );
+    const errorItems = await screen.findAllByText(notificationMsg);
     expect(errorItems).toHaveLength(1);
   });
 });