From 3ef35f1ec1f54d2002109f995966e545e9f45f4f Mon Sep 17 00:00:00 2001 From: Anna Hughes Date: Tue, 24 Oct 2023 22:38:11 +0100 Subject: [PATCH] Add prettier formatting + hotjar tracking and NPS form styles (#210) * add hotjar * add prettier --- .eslintrc.yml | 1 + .prettierrc | 5 + package.json | 3 + src/pages/_app.js | 99 +++++++++---------- src/styles/hotjarNPS.css | 205 +++++++++++++++++++++++++++++++++++++++ yarn.lock | 15 +++ 6 files changed, 279 insertions(+), 49 deletions(-) create mode 100644 .prettierrc create mode 100644 src/styles/hotjarNPS.css diff --git a/.eslintrc.yml b/.eslintrc.yml index a7822544..c4bb74ac 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -7,6 +7,7 @@ root: true extends: - "plugin:react/recommended" - airbnb + - prettier globals: Atomics: readonly SharedArrayBuffer: readonly diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..5e2863a1 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 100, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/package.json b/package.json index e7796e13..e9912ac6 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@material-ui/icons": "^4.9.1", "add": "^2.0.6", "axios": "^0.21.0", + "eslint-config-prettier": "^9.0.0", "firebase": "^9.9.4", "firebaseui": "^6.0.1", "html-to-pdfmake": "^2.1.2", @@ -41,12 +42,14 @@ "md5": "^2.3.0", "next": "11", "pdfmake": "^0.1.68", + "prettier": "^3.0.3", "prop-types": "^15.7.2", "react": "17.0.2", "react-cookie-consent": "^6.1.0", "react-device-detect": "^1.14.0", "react-dom": "17.0.2", "react-firebase-hooks": "^2.2.0", + "react-hotjar": "^5.5.0", "react-html-parser": "^2.0.2", "react-player": "^2.6.2", "react-redux": "^7.2.1", diff --git a/src/pages/_app.js b/src/pages/_app.js index ecfcb03c..2a058b00 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,6 +1,4 @@ -import { - Box, Button, makeStyles, Typography, -} from '@material-ui/core'; +import { Box, Button, makeStyles, Typography } from '@material-ui/core'; import CssBaseline from '@material-ui/core/CssBaseline'; import LinkUi from '@material-ui/core/Link'; import { ThemeProvider } from '@material-ui/core/styles'; @@ -10,8 +8,9 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; import React, { useEffect, useRef, useState } from 'react'; -import CookieConsent from 'react-cookie-consent'; +import CookieConsent, { getCookieConsentValue } from 'react-cookie-consent'; import { useAuthState } from 'react-firebase-hooks/auth'; +import { hotjar } from 'react-hotjar'; import { Provider } from 'react-redux'; import Head from '../components/Head'; import Header from '../components/Header'; @@ -22,32 +21,27 @@ import { axiosGet } from '../shared/axios'; import isBrowser from '../shared/browserCheck'; import useWindowDimensions from '../shared/dimensions'; import { useStore } from '../store/store'; +import '../styles/hotjarNPS.css'; import theme from '../styles/theme'; -const Footer = dynamic( - () => import('../components/Footer'), - { ssr: false }, -); +const Footer = dynamic(() => import('../components/Footer'), { ssr: false }); const useStyles = makeStyles({ screenContainer: { - margin: 0, [theme.breakpoints.up('sm')]: { height: '100vh', }, }, - desktopScreenContainer: { - - }, + desktopScreenContainer: {}, backgroundBlue: { - background: 'url(\'/backgroundBlue.png\')', + background: "url('/backgroundBlue.png')", backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }, backgroundPeach: { - background: 'url(\'/backgroundPeach.png\')', + background: "url('/backgroundPeach.png')", backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }, @@ -58,7 +52,6 @@ const useStyles = makeStyles({ }, cookieButtonContainer: { display: 'flex', - }, cookieButton: { margin: 5, @@ -98,12 +91,11 @@ function App({ Component, pageProps }) { // or if the router changes (i.e the user navigates) const checkTermsAcceptance = async (u) => { const idToken = await u.getIdToken(); - const serverUser = await axiosGet('/profile', - { - headers: { - authorization: `Bearer ${idToken}`, - }, - }); + const serverUser = await axiosGet('/profile', { + headers: { + authorization: `Bearer ${idToken}`, + }, + }); return serverUser.termsAccepted; }; if (user && user.emailVerified) { @@ -112,6 +104,12 @@ function App({ Component, pageProps }) { if (!termsAccepted) { router.push('/sign-in'); } + if ( + process.env.NEXT_PUBLIC_ENV === 'production' && + getCookieConsentValue('ConsentToCookie') === 'true' + ) { + hotjar.identify('USER_ID', { userProperty: user.id }); + } }); } else if (user && !user.emailVerified) { // If there is a user but they aren't verified log them out @@ -130,6 +128,10 @@ function App({ Component, pageProps }) { router.events.on('routeChangeError', () => { setIsLoading(false); }); + + if (process.env.NEXT_PUBLIC_ENV === 'production') { + hotjar.initialize(Number(process.env.NEXT_PUBLIC_HOTJAR_ID), 5); + } }, []); useEffect(() => { @@ -148,9 +150,7 @@ function App({ Component, pageProps }) { return ( <> - + @@ -161,8 +161,16 @@ function App({ Component, pageProps }) { alignItems="center" justifyContent="center" > - - + - We use cookies on YSM for a number of reasons that include making - our sites secure, robust and analysing how our site is being used, - which allows us to create more diverse content. - {' '} + We use cookies on YSM for a number of reasons that include making our sites + secure, robust and analysing how our site is being used, which allows us to + create more diverse content.{' '} - Learn More. + + Learn More. + - You can choose to accept or reject this kind of tracking. - We love you either way. + You can choose to accept or reject this kind of tracking. We love you either + way. - {process.env.NEXT_PUBLIC_ENV === 'staging' - ? ( - - You are currently viewing the staging environment. - - ) : null } + {process.env.NEXT_PUBLIC_ENV === 'staging' ? ( + + + You are currently viewing the staging environment. + + + ) : null}
- { - isLoading ? - : ( - - ) - } + {isLoading ? : }