feat: added a warning modal for the testing/staging site (#51421)

Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

client/i18n/locales/english/translations.json

@@ -927,5 +927,12 @@
     "p2": "This action will sign you out of your account on this device and browser session only. Please confirm if you would like to proceed.",
     "certain": "Yes, sign out of my account",
     "nevermind": "Nevermind, I don't want to sign out"
+  },
+  "staging-warning": {
+    "heading": "Warning: This is an Early Access - Test Deployment",
+    "p1": "We welcome you to test this release in a test-only mode and get early access to upcoming platform features. Sometimes these changes are referred to as next, beta, staging, etc. interchangeably.",
+    "p2": "We thank you for reporting bugs that you encounter and help in making freeCodeCamp.org better.",
+    "p3": "Your progress MAY NOT be saved on your next visit, and any certifications claimed on this deployment are not valid. Learn more by <0>following this link</0>.",
+    "certain": "Accept and Dismiss"
   }
 }

client/src/components/layouts/default.tsx

@@ -40,10 +40,12 @@ import BreadCrumb from '../../templates/Challenges/components/bread-crumb';
 import Flash from '../Flash';
 import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
 import SignoutModal from '../signout-modal';
+import StagingWarningModal from '../staging-warning-modal';
 import Footer from '../Footer';
 import Header from '../Header';
 import OfflineWarning from '../OfflineWarning';
 import { Loader } from '../helpers';
+import envData from '../../../../config/env.json';
 
 // preload common fonts
 import './fonts.css';
@@ -169,6 +171,8 @@ function DefaultLayout({
   } else {
     return (
       <div className='page-wrapper'>
+        {envData.deploymentEnv === 'staging' &&
+          envData.environment === 'production' && <StagingWarningModal />}
         <Helmet
           bodyAttributes={{
             class: useSystemTheme

client/src/components/staging-warning-modal/index.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Trans, useTranslation } from 'react-i18next';
+
+import store from 'store';
+import { Spacer } from '../helpers';
+
+function StagingWarningModal(): JSX.Element {
+  const { t } = useTranslation();
+  const [show, setShow] = useState(!store.get('acceptedStagingWarning'));
+  const handleModalHide = () => {
+    setShow(false);
+  };
+  const handleClick = () => {
+    store.set('acceptedStagingWarning', true);
+    setShow(false);
+  };
+  return (
+    <Modal
+      aria-labelledby='modal-title'
+      backdrop={true}
+      bsSize='lg'
+      className='text-center'
+      keyboard={true}
+      onHide={handleModalHide}
+      onClose={handleModalHide}
+      show={show}
+      data-testid={'staging-warning-modal'}
+    >
+      <Modal.Header closeButton={true}>
+        <Modal.Title id='modal-title' bsSize='lg'>
+          <span style={{ fontWeight: 'bold' }}>
+            {t('staging-warning.heading')}
+          </span>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p className='text-justify'>{t('staging-warning.p1')}</p>
+        <p className='text-justify'>{t('staging-warning.p2')}</p>
+        <p className='text-justify'>
+          <Trans i18nKey='staging-warning.p3'>
+            <a
+              href='https://contribute.freecodecamp.org/#/devops?id=known-limitations'
+              target='_blank'
+              rel='noopener noreferrer nofollow'
+            >
+              link
+            </a>
+          </Trans>
+        </p>
+        <hr />
+        <Button
+          block={true}
+          bsStyle='danger'
+          data-testid='accepts-warning'
+          className='btn-invert'
+          onClick={handleClick}
+          type='button'
+        >
+          {t('staging-warning.certain')}
+        </Button>
+        <Spacer size='small' />
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+export default StagingWarningModal;

client/src/components/staging-warning-modal/staging-warning-modal.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import store from 'store';
+import StagingWarningModal from '.';
+
+describe('StagingWarningModal', () => {
+  it('renders the modal successfully', () => {
+    render(<StagingWarningModal />);
+    expect(screen.getByTestId('staging-warning-modal')).toBeInTheDocument();
+    expect(screen.getByTestId('staging-warning-modal')).toHaveClass('in');
+  });
+
+  it('closes the modal when clicking the close button', () => {
+    render(<StagingWarningModal />);
+    fireEvent.click(screen.getByText('Close'));
+    expect(screen.getByTestId('staging-warning-modal')).not.toHaveClass('in');
+  });
+
+  it('displays the correct modal content', () => {
+    render(<StagingWarningModal />);
+    const modalContent = screen.getByTestId('staging-warning-modal');
+    expect(modalContent).toHaveTextContent('staging-warning.heading');
+    expect(modalContent).toHaveTextContent('staging-warning.p1');
+    expect(modalContent).toHaveTextContent('staging-warning.p2');
+    expect(modalContent).toHaveTextContent('link');
+  });
+
+  it('accepts Warning, stores acceptance key in local storage, and closes the modal', () => {
+    render(<StagingWarningModal />);
+    fireEvent.click(screen.getByTestId('accepts-warning'));
+    expect(store.get('acceptedStagingWarning')).toBe(true);
+    expect(screen.queryByTestId('staging-warning-modal')).not.toHaveClass('in');
+  });
+});