refactor(client): cleanup honesty policy section (#49003)

Co-authored-by: Bruce B <bbsmooth@gmail.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Co-authored-by: sidemt <25644062+sidemt@users.noreply.github.com>
Co-authored-by: Mrugesh Mohapatra <hi@mrugesh.dev>
Co-authored-by: Quincy Larson <QuincyLarson@users.noreply.github.com>

client/i18n/locales/english/translations.json

@@ -15,8 +15,8 @@
     "show-cert": "Show Certification",
     "claim-cert": "Claim Certification",
     "save-progress": "Save Progress",
-    "accepted-honesty": "You have accepted our Academic Honesty Policy.",
-    "agree": "Agree",
+    "accepted-honesty": "You have agreed to our Academic Honesty Policy.",
+    "agree-honesty": "I agree to freeCodeCamp's Academic Honesty Policy.",
     "save-portfolio": "Save this portfolio item",
     "remove-portfolio": "Remove this portfolio item",
     "add-portfolio": "Add a new portfolio Item",
@@ -517,7 +517,7 @@
     "opens-new-window": "Opens in new window"
   },
   "flash": {
-    "honest-first": "To claim a certification, you must first accept our academic honesty policy",
+    "honest-first": "To claim a certification, you must first agree to our academic honesty policy",
     "really-weird": "Something really weird happened, if it happens again, please consider raising an issue on https://github.com/freeCodeCamp/freeCodeCamp/issues/new",
     "not-right": "Something is not quite right. A report has been generated and the freeCodeCamp.org team have been notified",
     "went-wrong": "Something went wrong, please check and try again",

client/src/components/settings/__snapshots__/Honesty.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = `
 <section
-  className="honesty-policy"
   id="honesty-policy"
 >
   <SectionHeader>
@@ -14,16 +13,16 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] =
     >
       <HonestyPolicy />
     </Uncontrolled(Panel)>
-    <br />
     <Button
       active={false}
+      aria-disabled={false}
       block={true}
       bsClass="btn"
       bsStyle="primary"
       disabled={false}
       onClick={[Function]}
     >
-      buttons.agree
+      buttons.agree-honesty
     </Button>
   </FullWidthRow>
 </section>
@@ -31,7 +30,6 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] =
 
 exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = `
 <section
-  className="honesty-policy"
   id="honesty-policy"
 >
   <SectionHeader>
@@ -43,18 +41,16 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted
     >
       <HonestyPolicy />
     </Uncontrolled(Panel)>
-    <br />
     <Button
       active={false}
+      aria-disabled={true}
       block={true}
       bsClass="btn"
       bsStyle="primary"
-      className="disabled-agreed"
-      disabled={true}
+      disabled={false}
+      onClick={[Function]}
     >
-      <p>
-        buttons.accepted-honesty
-      </p>
+      buttons.accepted-honesty
     </Button>
   </FullWidthRow>
 </section>

client/src/components/settings/honesty.css

@@ -1,3 +1,14 @@
+#honesty-policy
+  :is(
+    button[aria-disabled='true'],
+    button[aria-disabled='true']:is(:focus, :hover)
+  ) {
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .honesty-panel p {
   margin-inline: 10px;
   font-family: 'Lato', sans-serif;
@@ -7,11 +18,6 @@
   padding-top: 15px;
 }
 
-.honesty-policy .disabled-agreed p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .honesty-panel .btn-invert {
   color: var(--primary-background);
 }

client/src/components/settings/honesty.tsx

@@ -15,33 +15,25 @@ type HonestyProps = {
 
 const Honesty = ({ isHonest, updateIsHonest }: HonestyProps): JSX.Element => {
   const { t } = useTranslation();
-  const button = isHonest ? (
-    <Button
-      block={true}
-      bsStyle='primary'
-      className='disabled-agreed'
-      disabled={true}
-    >
-      <p>{t('buttons.accepted-honesty')}</p>
-    </Button>
-  ) : (
-    <Button
-      block={true}
-      bsStyle='primary'
-      onClick={() => updateIsHonest({ isHonest: true })}
-    >
-      {t('buttons.agree')}
-    </Button>
-  );
+  const buttonText = isHonest
+    ? t('buttons.accepted-honesty')
+    : t('buttons.agree-honesty');
+
   return (
-    <section className='honesty-policy' id='honesty-policy'>
+    <section id='honesty-policy'>
       <SectionHeader>{t('settings.headings.honesty')}</SectionHeader>
       <FullWidthRow>
         <Panel className='honesty-panel'>
           <HonestyPolicy />
         </Panel>
-        <br />
-        {button}
+        <Button
+          block={true}
+          bsStyle='primary'
+          aria-disabled={isHonest}
+          onClick={() => !isHonest && updateIsHonest({ isHonest: true })}
+        >
+          {buttonText}
+        </Button>
       </FullWidthRow>
     </section>
   );

client/src/resources/honesty-policy.tsx

@@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 const HonestyPolicy = (): JSX.Element => {
   const { t } = useTranslation();
-  const email = 'team@freecodecamp.org';
+  const email = 'support@freecodecamp.org';
 
   return (
     <>

cypress/e2e/default/settings/certifications.ts

@@ -13,10 +13,10 @@ describe('Settings certifications area', () => {
         expect($btns).to.have.length(16);
       });
       cy.findByText('Show Certification').should('not.exist');
-      cy.contains('Agree');
+      cy.contains(`I agree to freeCodeCamp's Academic Honesty Policy.`);
       cy.contains('Claim Certification').click();
       cy.contains(
-        'To claim a certification, you must first accept our academic honesty policy'
+        'To claim a certification, you must first agree to our academic honesty policy'
       );
     });
   });
@@ -29,8 +29,8 @@ describe('Settings certifications area', () => {
 
     it('Should update the user as they try to claim their certifications', () => {
       cy.visit('/settings');
-      cy.contains('Agree').click();
-      cy.contains('You have accepted our Academic Honesty Policy.');
+      cy.contains(`I agree to freeCodeCamp's Academic Honesty Policy.`).click();
+      cy.contains('You have agreed to our Academic Honesty Policy.');
       cy.contains('Claim Certification').click();
       cy.contains(
         'It looks like you have not completed the necessary steps. Please complete the required projects to claim the Responsive Web Design Certification'

cypress/support/commands.ts

@@ -21,7 +21,7 @@ const setPrivacyTogglesToPublic = () => {
     });
   cy.get('[data-cy=save-privacy-settings]').click();
   cy.get('#honesty-policy').find('button').click();
-  cy.contains('You have accepted our Academic Honesty Policy');
+  cy.contains('You have agreed to our Academic Honesty Policy');
 };
 
 const goToSettings = () => {