feat: added v2 notice

Author: CodeDead

src/components/Layout/index.jsx

@@ -1,20 +1,27 @@
 import React, { useContext } from 'react';
-import { graphql, useStaticQuery, navigate } from 'gatsby';
+import { graphql, navigate, useStaticQuery } from 'gatsby';
 import { CssBaseline } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 import DefaultAppBar from '../DefaultAppBar';
 import Footer from '../Footer';
 import { MainContext } from '../../contexts/MainContextProvider';
 import ThemeSelector from '../../utils/ThemeSelector';
 import './index.css';
-import { setHasAcceptedCookieNotice } from '../../reducers/MainReducer/Actions';
+import { disableV2Notice, setHasAcceptedCookieNotice } from '../../reducers/MainReducer/Actions';
 
 const Layout = ({ children }) => {
   const [state, dispatch] = useContext(MainContext);
-  const { themeIndex, themeColorIndex, hasAcceptedCookieNotice } = state;
+  const {
+    themeIndex, themeColorIndex, hasAcceptedCookieNotice, hasTriedVersion2,
+  } = state;
   const data = useStaticQuery(graphql`query {
       site {
         siteMetadata {
@@ -41,15 +48,29 @@ const Layout = ({ children }) => {
   });
 
   /**
-   * Accept cookies
+   * Accept the cookie notice
    */
   const acceptCookies = () => {
     dispatch(setHasAcceptedCookieNotice(true));
   };
 
   /**
-   * Go to the GDPR site
+   * Disable the new version of the site
    */
+  const disableV2 = () => {
+    dispatch(disableV2Notice());
+  };
+
+  /**
+   * Go to the new version of the site
+   */
+  const tryV2 = () => {
+    window.location.href = window.location.href.replace('codedead.com', 'v2.codedead.com');
+  };
+
+  /**
+     * Go to the GDPR site
+     */
   const gotoGdpr = () => {
     navigate('https://commission.europa.eu/resources-partners/europa-web-guide_en');
   };
@@ -59,6 +80,35 @@ const Layout = ({ children }) => {
       <CssBaseline />
       <DefaultAppBar title={data.site.siteMetadata.title} />
       {children}
+      {!hasTriedVersion2 ? (
+        <Dialog
+          open={!hasTriedVersion2}
+          onClose={disableV2}
+          aria-labelledby="v2-alert-dialog-title"
+          aria-describedby="v2-alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">
+            New website design!
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText id="v2-alert-dialog-description">
+              We&apos;re redesigning our website to make it more user-friendly
+              and visually appealing.
+
+              Keep in mind that this is still a work in progress and some
+              features may not be available yet.
+
+              Would you like to try the new design?
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={disableV2}>No</Button>
+            <Button onClick={tryV2} autoFocus>
+              Yes please!
+            </Button>
+          </DialogActions>
+        </Dialog>
+      ) : null}
       {hasAcceptedCookieNotice ? null : (
         <Alert
           severity="warning"

src/contexts/MainContextProvider/index.jsx

@@ -16,6 +16,7 @@ const initState = {
   },
   blogLimit: 0,
   hasAcceptedCookieNotice,
+  hasTriedVersion2: false,
 };
 
 export const MainContext = createContext(initState);

src/reducers/MainReducer/Actions/actionTypes.js

@@ -2,3 +2,4 @@ export const SET_PAGE_INDEX = 'SET_PAGE_INDEX';
 export const SET_THEME_INDEX = 'SET_THEME_INDEX';
 export const SET_BLOG_LIMIT = 'SET_BLOG_LIMIT';
 export const SET_HAS_ACCEPTED_COOKIE_NOTICE = 'HAS_ACCEPTED_COOKIE_NOTICE';
+export const DISABLE_V2_NOTICE = 'DISABLE_V2_NOTICE';

src/reducers/MainReducer/Actions/index.js

@@ -1,4 +1,5 @@
 import {
+  DISABLE_V2_NOTICE,
   SET_BLOG_LIMIT,
   SET_HAS_ACCEPTED_COOKIE_NOTICE,
   SET_PAGE_INDEX,
@@ -24,3 +25,8 @@ export const setHasAcceptedCookieNotice = (hasAccepted) => ({
   type: SET_HAS_ACCEPTED_COOKIE_NOTICE,
   payload: hasAccepted,
 });
+
+export const disableV2Notice = () => ({
+  type: DISABLE_V2_NOTICE,
+  payload: true,
+});

src/reducers/MainReducer/index.jsx

@@ -1,4 +1,5 @@
 import {
+  DISABLE_V2_NOTICE,
   SET_BLOG_LIMIT,
   SET_HAS_ACCEPTED_COOKIE_NOTICE,
   SET_PAGE_INDEX,
@@ -29,6 +30,11 @@ const MainReducer = (state, action) => {
         ...state,
         hasAcceptedCookieNotice: action.payload,
       };
+    case DISABLE_V2_NOTICE:
+      return {
+        ...state,
+        hasTriedVersion2: action.payload,
+      };
     default:
       return state;
   }