Add footer (#35)

* Add footer

* Fix import

* Update links

* Feedback

.env

@@ -10,36 +10,30 @@ VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:[email protected]
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
 VITE_LINK_OUTLOOK_HOME=https://outlook.live.com/mail/
 VITE_LINK_SKILLS_FOR_THE_FUTURE=https://www.ocadogroup.com/sustainability/sustainability/
+VITE_LINK_FACEBOOK=https://www.facebook.com/codeforlifeuk
+VITE_LINK_INSTAGRAM=https://www.instagram.com/codeforlife_uk/
+VITE_LINK_LINKEDIN=https://www.linkedin.com/company/code-for-life-uk/
+VITE_LINK_X=https://x.com/codeforlifeuk
+VITE_LINK_YOUTUBE=https://www.youtube.com/@CodeForLife-uk
 VITE_LINK_PORTAL_GITHUB=https://github.com/ocadotechnology/codeforlife-portal
 VITE_LINK_CFL_DOCS=https://docs.codeforlife.education/become-a-contributor
 VITE_LINK_PRIMARY_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary
 VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip
 VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club
 VITE_LINK_PYTHON_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip
+VITE_LINK_IMPACT_REPORT_2023=https://storage.googleapis.com/codeforlife-assets/impact_reports/impact_report_2023.pdf
 
 # TODO: determine which of these we need.
 # REACT_APP_CONTAINER_MAX_WIDTH=lg
-# REACT_APP_FACEBOOK_HREF=https://www.facebook.com/codeforlifeuk
-# REACT_APP_TWITTER_HREF=https://twitter.com/codeforlifeuk
-# REACT_APP_INSTAGRAM_HREF=https://www.instagram.com/codeforlife_uk/
-# REACT_APP_OCADO_GROUP_HREF=https://www.ocadogroup.com/our-responsible-business/corporate-responsibility/skills-for-the-future
-# REACT_APP_PORTAL_GITHUB_HREF=https://github.com/ocadotechnology/codeforlife-portal
-# REACT_APP_CFL_DOCS_HREF=https://docs.codeforlife.education/
-# REACT_APP_PRIMARY_RESOURCE_HREF=https://code-for-life.gitbook.io/code-club-resources/
-# REACT_APP_PYTHON_RESOURCE_HREF=https://code-for-life.gitbook.io/code-club-resources-intermediate/
 # REACT_APP_IDEAS_BOX_HREF=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
 # REACT_APP_INDEPENDENT_BEGINNER_HREF=https://code-for-life.gitbook.io/independent-student-resources/beginner/
 # REACT_APP_INDEPENDENT_INTERMEDIATE_HREF=https://code-for-life.gitbook.io/independent-student-resources/intermediate/
 # REACT_APP_INDEPENDENT_ADVANCED_HREF=https://code-for-life.gitbook.io/independent-student-resources/advanced/
 # REACT_APP_API_BASE_URL=http://localhost:8000/api/
 # REACT_APP_RAPID_ROUTER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/w0Pw_XikQSs
-# REACT_APP_KURONO_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/m-JYukDZlL8
 # REACT_APP_BLOCKLY_GUIDE_SRC=https://docs.codeforlife.education/rapid-router/blockly-guide
 # REACT_APP_TEACHER_RESOURCES_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/tM5nKPYlz74
 # REACT_APP_RR_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/hv0fM0twrOE
-# REACT_APP_KURONO_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/6iiksCtIIGA
 # REACT_APP_INTRO_TO_CODING_ENGLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england
 # REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
-# REACT_APP_KURONO_AND_CURRICULUM=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/teacher-guides/kurono-and-the-national-curriculum-for-computing
 # REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router
-# REACT_APP_KURONO_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/

src/App.tsx

@@ -1,14 +1,15 @@
 import { type FC } from "react"
 import { App as _ } from "codeforlife/components"
 
+import Footer from "./features/footer/Footer.tsx"
 import routes from "./routes"
 import store from "./app/store"
 import theme from "./app/theme"
 
 export interface AppProps {}
 
 const App: FC<AppProps> = () => (
-  <_ store={store} theme={theme} routes={routes} />
+  <_ store={store} theme={theme} routes={routes} footer={<Footer />} />
 )
 
 export default App

src/api/user.ts

@@ -102,6 +102,9 @@ export type CreateIndependentUserArg = CreateArg<
 export type ValidatePasswordResult = null
 export type ValidatePasswordArg = Pick<User, "id" | "password">
 
+export type RegisterToNewsletterResult = null
+export type RegisterToNewsletterArg = Arg<User, "email">
+
 const userApi = api.injectEndpoints({
   endpoints: build => ({
     ...getReadUserEndpoints<
@@ -189,6 +192,16 @@ const userApi = api.injectEndpoints({
         body,
       }),
     }),
+    registerToNewsletter: build.mutation<
+      RegisterToNewsletterResult,
+      RegisterToNewsletterArg
+    >({
+      query: body => ({
+        url: urls.user.list + "register-to-newsletter/",
+        method: "POST",
+        body,
+      }),
+    }),
   }),
 })
 
@@ -208,4 +221,5 @@ export const {
   useLazyListUsersQuery,
   useValidatePasswordQuery,
   useLazyValidatePasswordQuery,
+  useRegisterToNewsletterMutation,
 } = userApi

src/app/env.ts

@@ -12,9 +12,15 @@ export const GMAIL_FILTERS_EMAIL_VERIFICATION =
 export const LINK_FEMALE_GRADUATES_IN_CS = env.VITE_LINK_FEMALE_GRADUATES_IN_CS
 export const LINK_OUTLOOK_HOME = env.VITE_LINK_OUTLOOK_HOME
 export const LINK_SKILLS_FOR_THE_FUTURE = env.VITE_LINK_SKILLS_FOR_THE_FUTURE
+export const LINK_FACEBOOK = env.VITE_LINK_FACEBOOK
+export const LINK_INSTAGRAM = env.VITE_LINK_INSTAGRAM
+export const LINK_LINKEDIN = env.VITE_LINK_LINKEDIN
+export const LINK_X = env.VITE_LINK_X
+export const LINK_YOUTUBE = env.VITE_LINK_YOUTUBE
 export const LINK_PORTAL_GITHUB = env.VITE_LINK_PORTAL_GITHUB
 export const LINK_CFL_DOCS = env.VITE_LINK_CFL_DOCS
 export const LINK_PRIMARY_PACK_GITBOOK = env.VITE_LINK_PRIMARY_PACK_GITBOOK
 export const LINK_PRIMARY_PACK_DOWNLOAD = env.VITE_LINK_PRIMARY_PACK_DOWNLOAD
 export const LINK_PYTHON_PACK_GITBOOK = env.VITE_LINK_PYTHON_PACK_GITBOOK
 export const LINK_PYTHON_PACK_DOWNLOAD = env.VITE_LINK_PYTHON_PACK_DOWNLOAD
+export const LINK_IMPACT_REPORT_2023 = env.VITE_LINK_IMPACT_REPORT_2023

src/features/footer/Footer.tsx

@@ -0,0 +1,70 @@
+import {
+  Container,
+  Unstable_Grid2 as Grid,
+  Stack,
+  Typography,
+} from "@mui/material"
+import { type FC } from "react"
+import { Image } from "codeforlife/components"
+import { ThemedBox } from "codeforlife/theme"
+import { primary } from "codeforlife/theme/colors"
+
+import CflLogoPowered from "../../images/logo_cfl_powered.svg"
+import { LINK_SKILLS_FOR_THE_FUTURE } from "../../app/env"
+import Links from "./Links"
+import RegisterToNewsletterForm from "./RegisterToNewsletterForm.tsx"
+import SocialMediaIcons from "./SocialMediaIcons"
+import TenYearAnniversary from "../../images/10_years_anniversary.png"
+import { themeOptions } from "../../app/theme"
+
+export interface FooterProps {}
+
+const Footer: FC<FooterProps> = () => {
+  return (
+    <ThemedBox
+      id="footer"
+      userType="teacher"
+      options={themeOptions}
+      bgcolor={primary[500]}
+    >
+      <Container>
+        <Grid container columnSpacing={10} rowSpacing={5}>
+          <Grid xs={12} sm={8}>
+            <Stack spacing={5}>
+              <Links />
+              <RegisterToNewsletterForm />
+              <SocialMediaIcons />
+            </Stack>
+          </Grid>
+          <Grid xs={12} sm={4}>
+            <Stack
+              direction="column"
+              width="100%"
+              spacing={{ xs: 5, sm: 10 }}
+              alignItems={"center"}
+            >
+              <Image
+                alt="Code for Life and Ocado Group logos"
+                src={CflLogoPowered}
+                href={LINK_SKILLS_FOR_THE_FUTURE}
+                hrefInNewTab
+              />
+              <Image
+                alt="10 year anniversary"
+                src={TenYearAnniversary}
+                maxWidth={{ xs: "60%", sm: "85%" }}
+              />
+            </Stack>
+          </Grid>
+          <Grid xs={12}>
+            <Typography textAlign="center" variant="body2">
+              © Ocado Group {new Date().getFullYear()}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Container>
+    </ThemedBox>
+  )
+}
+
+export default Footer

src/features/footer/Links.tsx

@@ -0,0 +1,77 @@
+import {
+  Unstable_Grid2 as Grid,
+  Link as MuiLink,
+  Stack,
+  type SxProps,
+} from "@mui/material"
+// import {
+//   useFreshworksWidget,
+//   useOneTrustInfoToggle
+// } from 'codeforlife/hooks';
+import { type FC } from "react"
+import { LINK_IMPACT_REPORT_2023 } from "../../app/env"
+import { Link } from "codeforlife/components/router"
+
+import { paths } from "../../routes"
+
+const LINK_STYLE: SxProps = {
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline",
+  },
+}
+
+const FooterLink: FC<{
+  to: string
+  children: string
+  newTab?: boolean
+}> = ({ to, children, newTab }) => {
+  return (
+    <Link to={to} target={newTab ? "_blank" : "_self"} sx={LINK_STYLE}>
+      {children}
+    </Link>
+  )
+}
+
+export interface LinksProps {}
+
+const Links: FC<LinksProps> = () => {
+  return (
+    <Grid
+      container
+      spacing={1}
+      sx={{
+        color: "white !important",
+        fontWeight: "bold",
+      }}
+    >
+      <Grid xs={12} sm={4}>
+        <Stack spacing={1}>
+          <FooterLink to={paths.aboutUs._}>About us</FooterLink>
+          {/*TODO: Use Freshdesk hook*/}
+          <MuiLink sx={LINK_STYLE}>Help and support</MuiLink>
+          <FooterLink to={LINK_IMPACT_REPORT_2023} newTab={true}>
+            Impact Report 2023
+          </FooterLink>
+        </Stack>
+      </Grid>
+      <Grid xs={12} sm={4}>
+        <Stack spacing={1}>
+          <FooterLink to={paths.privacyNotice._}>Privacy notice</FooterLink>
+          <FooterLink to={paths.termsOfUse._}>Terms of use</FooterLink>
+          {/*TODO: Use OneTrust banner hook*/}
+          <MuiLink sx={LINK_STYLE}>Cookie settings</MuiLink>
+        </Stack>
+      </Grid>
+      <Grid xs={12} sm={4}>
+        <Stack spacing={1}>
+          <FooterLink to={paths.homeLearning._}>Home learning</FooterLink>
+          <FooterLink to={paths.getInvolved._}>Get involved</FooterLink>
+          <FooterLink to={paths.codingClubs._}>Coding clubs</FooterLink>
+        </Stack>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Links

src/features/footer/RegisterToNewsletterForm.tsx

@@ -0,0 +1,87 @@
+import * as forms from "codeforlife/components/form"
+import { FormHelperText, Stack, useMediaQuery, useTheme } from "@mui/material"
+import { type FC } from "react"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "react-router-dom"
+
+import { useRegisterToNewsletterMutation } from "../../api/user"
+
+export interface RegisterToNewsletterFormProps {}
+
+const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
+  const theme = useTheme()
+  const onlyXS = useMediaQuery(theme.breakpoints.only("xs"))
+  const [registerToNewsletter] = useRegisterToNewsletterMutation()
+  const navigate = useNavigate()
+
+  return (
+    <Stack>
+      <FormHelperText>
+        Sign up to receive updates about Code for Life games and teaching
+        resources.
+      </FormHelperText>
+      <forms.Form
+        initialValues={{
+          email: "",
+          over18: false,
+        }}
+        onSubmit={submitForm(registerToNewsletter, {
+          exclude: ["over18"],
+          then: () => {
+            navigate(".", {
+              state: {
+                notifications: [
+                  {
+                    props: {
+                      children: "Thank you for signing up! 🎉",
+                    },
+                  },
+                ],
+              },
+            })
+          },
+          catch: () => {
+            navigate(".", {
+              state: {
+                notifications: [
+                  {
+                    props: {
+                      children: "Failed to subscribe you to our newsletter.",
+                      error: true,
+                    },
+                  },
+                ],
+              },
+            })
+          },
+        })}
+      >
+        <Stack spacing={2}>
+          <forms.EmailField
+            FormHelperTextProps={{ style: { color: "white" } }}
+            required
+          />
+          <Stack
+            spacing="auto"
+            direction={{ xs: "column", sm: "row" }}
+            alignItems={{ sm: "center" }}
+          >
+            {/*TODO: Make the helper text white*/}
+            <forms.CheckboxField
+              required
+              name="over18"
+              formControlLabelProps={{
+                label: "Please confirm that you are over 18.",
+              }}
+            />
+            <forms.SubmitButton sx={{ width: onlyXS ? "100%" : undefined }}>
+              Sign up
+            </forms.SubmitButton>
+          </Stack>
+        </Stack>
+      </forms.Form>
+    </Stack>
+  )
+}
+
+export default RegisterToNewsletterForm