fix: add message about third-party cookies (freeCodeCamp#45672)

Author: moT01

client/i18n/locales/english/intro.json

@@ -768,6 +768,7 @@
     "viewing-upcoming-change": "You are looking at a beta page. ",
     "go-back-to-learn": "Go back to the stable version of the curriculum.",
     "read-database-cert-article": "Please read this forum post before proceeding.",
+    "enable-cookies": "You must enable third-party cookies before starting.",
     "english-only": "The courses in this section are only available in English. We are only able to translate the titles and introductions at the moment, not the lessons themselves."
   }
 }

client/i18n/locales/english/translations.json

@@ -68,8 +68,8 @@
     "ask-later": "Ask me later",
     "start-coding": "Start coding!",
     "go-to-settings": "Go to settings to claim your certification",
-    "click-start-course": "Click here to start the course",
-    "click-start-project": "Click here to start the project"
+    "click-start-course": "Start the course",
+    "click-start-project": "Start the project"
   },
   "landing": {
     "big-heading-1": "Learn to code — for free.",

client/src/components/settings/user-token.tsx

@@ -42,6 +42,7 @@ class UserToken extends Component<UserTokenProps> {
                 bsSize='lg'
                 bsStyle='danger'
                 className='btn-info'
+                data-cy='delete-user-token'
                 onClick={this.deleteToken}
                 type='button'
               >

client/src/templates/Challenges/codeally/show.tsx

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Grid, Col, Row, Button } from '@freecodecamp/react-bootstrap';
+import { Alert, Grid, Col, Row, Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -300,9 +300,14 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                       : ''
                   }`}
                 >
+                  <Alert id='codeally-cookie-warning' bsStyle='info'>
+                    <p>{t(`intro:misc-text.enable-cookies`)}</p>
+                  </Alert>
                   <Button
+                    aria-describedby='codeally-cookie-warning'
                     block={true}
                     bsStyle='primary'
+                    data-cy='start-codeally'
                     onClick={tryToShowCodeAlly}
                   >
                     {challengeType === challengeTypes.codeAllyCert

cypress/integration/settings/user-token.js

@@ -7,6 +7,7 @@ describe('User token widget on settings page,', function () {
     });
 
     it('should not render', function () {
+      // make sure 'Danger Zone' is there so we know the page has rendered
       cy.contains('Danger Zone');
       cy.get('.user-token').should('not.exist');
     });
@@ -19,18 +20,19 @@ describe('User token widget on settings page,', function () {
       cy.visit(
         '/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate'
       );
-      cy.contains('Click here to start the course').click();
+      cy.get('[data-cy=start-codeally]').click();
       cy.wait(2000);
       cy.visit('/settings');
     });
 
     it('should render', function () {
+      // make sure 'Danger Zone' is there so we know the page has rendered
       cy.contains('Danger Zone');
       cy.get('.user-token').should('have.length', 1);
     });
 
     it('should allow you to delete your token', function () {
-      cy.contains('Delete my user token').click();
+      cy.get('[data-cy=delete-user-token]').click();
       cy.contains('Your user token has been deleted.');
     });
   });