feat: 2056 terms of use page (#31)

* ForAdults

* ForChildren

* Merge branch 'main' into 2056-terms-of-use-page

* update page tab bar

* use relative reference

* Fixed styling

* For adults

* Fo children

* tweak and reuse table of contents

Co-Authored-By: SKairinos <stefan.kairinos@ocado.com>

frontend/src/components/PageTabBar.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  Tabs,
+  Tab,
+  Typography,
+  useTheme
+} from '@mui/material';
+
+import PageSection from './PageSection';
+
+const PageTabBar: React.FC<{
+  title: string
+  tabs: Array<{ label: string, element: React.ReactElement }>
+}> = ({ title, tabs }) => {
+  const theme = useTheme();
+  const [value, setValue] = React.useState(0);
+
+  return <>
+    <PageSection
+      bgcolor={theme.palette.primary.main}
+      className='flex-center'
+      py={false}
+    >
+      <Typography
+        textAlign='center'
+        variant='h2'
+        style={{
+          color: 'white',
+          margin: '100px 0px'
+        }}
+      >
+        {title}
+      </Typography>
+    </PageSection>
+    <PageSection
+      bgcolor={theme.palette.primary.light}
+      className='flex-center'
+    >
+      <Tabs
+        value={value}
+        onChange={(_, value) => { setValue(value); }}
+        TabIndicatorProps={{
+          style: { display: 'none' }
+        }}
+      >
+        {tabs.map((tab, index) => (
+          <Tab
+            key={index}
+            label={tab.label}
+            style={{
+              marginRight: index !== tabs.length - 1 ? 30 : 0,
+              textTransform: 'none',
+              fontSize: theme.typography.body2.fontSize
+            }}
+          />
+        ))}
+      </Tabs>
+    </PageSection>
+    <PageSection>
+      {tabs[value].element}
+    </PageSection>
+  </>;
+};
+
+export default PageTabBar;

frontend/src/components/TableOfContents.tsx

@@ -9,15 +9,19 @@ import {
 } from '@mui/material';
 
 export interface TableOfContentsProps {
-  contents: Array<{ header: string, element: React.ReactElement }>
+  description?: React.ReactNode;
+  contents: Array<{ header: string, element: React.ReactElement }>;
 }
 
 export const ids = {
   leftLinkStack: 'left-link-stack',
   rightLinkStack: 'right-link-stack'
 };
 
-const TableOfContents: React.FC<TableOfContentsProps> = ({ contents }) => {
+const TableOfContents: React.FC<TableOfContentsProps> = ({
+  description,
+  contents
+}) => {
   const headerRefs = contents.map(() => React.useRef<HTMLSpanElement>(null));
   const halfLength = Math.ceil(contents.length / 2);
 
@@ -32,7 +36,7 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({ contents }) => {
     sliceEnd: number
   ): React.ReactElement {
     return (
-      <Stack id={stackId}>
+      <Stack id={stackId} gap={2}>
         {contents.slice(sliceStart, sliceEnd).map((content, index) => {
           index += sliceStart;
           return (
@@ -55,20 +59,25 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({ contents }) => {
 
   return (
     <Grid container spacing={0}>
-      <Grid id={ids.leftLinkStack} xs={12} sm={6}>
-        {generateLinkStack(ids.leftLinkStack, 0, halfLength)}
-      </Grid>
-      <Grid id={ids.rightLinkStack} xs={12} sm={6}>
-        {generateLinkStack(ids.rightLinkStack, halfLength, contents.length)}
+      {description !== undefined &&
+        <Grid xs={12} mb={5}>
+          {description}
+        </Grid>
+      }
+      <Grid container xs={12} spacing={2}>
+        <Grid id={ids.leftLinkStack} xs={12} sm={6}>
+          {generateLinkStack(ids.leftLinkStack, 0, halfLength)}
+        </Grid>
+        <Grid id={ids.rightLinkStack} xs={12} sm={6}>
+          {generateLinkStack(ids.rightLinkStack, halfLength, contents.length)}
+        </Grid>
       </Grid>
       {contents.map((content, index) => (
-        <Grid key={index} xs={12}>
+        <Grid key={index} xs={12} mt={index === 0 ? 2 : 0}>
           <Divider sx={{ my: 2 }} />
           <Typography
             ref={headerRefs[index]}
-            variant='h6'
-            fontWeight='bold'
-            mb={3}
+            variant='h5'
           >
             {index + 1}. {content.header}
           </Typography>

frontend/src/pages/privacyNotice/PrivacyNotice.tsx

@@ -1,32 +1,27 @@
 import React from 'react';
-import {
-  Unstable_Grid2 as Grid
-} from '@mui/material';
 
 import BasePage from '../../pages/BasePage';
-import TabBar from '../../components/TabBar';
+import PageTabBar from '../../components/PageTabBar';
 
 import ForAdults from './ForAdults/ForAdults';
 import ForChildren from './ForChildren/ForChildren';
 
 const PrivacyNotice: React.FC = () => {
   return (
     <BasePage>
-      <Grid xs={12}>
-        <TabBar
-          title='Privacy notice'
-          tabs={[
-            {
-              label: 'Privacy notice',
-              element: <ForAdults />
-            },
-            {
-              label: 'Child-friendly',
-              element: <ForChildren />
-            }
-          ]}
-        />
-      </Grid>
+      <PageTabBar
+        title='Privacy notice'
+        tabs={[
+          {
+            label: 'Privacy notice',
+            element: <ForAdults />
+          },
+          {
+            label: 'Child-friendly',
+            element: <ForChildren />
+          }
+        ]}
+      />
     </BasePage>
   );
 };

frontend/src/pages/termsOfUse/ForAdults/Alerting.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Stack,
+  Link,
+  Typography
+} from '@mui/material';
+
+const Alerting: React.FC = () => {
+  // TODO: setup contact us link.
+  return (
+    <Stack>
+      <Typography>
+        If you see anything on the Code for Life portal which appears to infringe any part of the Terms & Conditions, then please inform us via the <Link href='' color='inherit' underline='always'>Contact Us</Link> section of this site.
+      </Typography>
+      <Typography>
+        We do not endorse or take responsibility for the content of any third party sites that link to or from Code for Life.
+      </Typography>
+    </Stack>
+  );
+};
+
+export default Alerting;

frontend/src/pages/termsOfUse/ForAdults/ForAdults.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  Typography,
+  Stack
+} from '@mui/material';
+
+import TableOfContents from '../../../components/TableOfContents';
+import Introduction from './Introduction';
+import RegistrationAndMembership from './RegistrationAndMembership';
+import Misuse from './Misuse';
+import Prohibitions from './Prohibitions';
+import Alerting from './Alerting';
+import IP from './IP';
+import Liability from './Liability';
+import Misc from './Misc';
+
+const ForAdults: React.FC = () => {
+  return (
+    <Stack>
+      <Typography
+        variant='h4'
+        textAlign='center'
+        marginTop={2}
+      >
+        Terms of Use
+      </Typography>
+      <TableOfContents contents={[
+        {
+          header: 'Introduction',
+          element: <Introduction />
+        },
+        {
+          header: 'Registration and Types of Membership',
+          element: <RegistrationAndMembership />
+        },
+        {
+          header: 'Misuse of Code for Life site',
+          element: <Misuse />
+        },
+        {
+          header: 'Prohibitions',
+          element: <Prohibitions />
+        },
+        {
+          header: 'Alerting Code for Life',
+          element: <Alerting />
+        },
+        {
+          header: 'Intellectual Property',
+          element: <IP />
+        },
+        {
+          header: 'Our Liability',
+          element: <Liability />
+        },
+        {
+          header: 'Miscellaneous',
+          element: <Misc />
+        }
+      ]} />
+    </Stack>
+  );
+};
+
+export default ForAdults;

frontend/src/pages/termsOfUse/ForAdults/IP.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+  Typography
+} from '@mui/material';
+
+const IP: React.FC = () => {
+  return (
+    <Typography>
+      You acknowledge that all copyright, trademarks, and other intellectual property rights in and relating to Code for Life (including all content of the Code for Life website, the Rapid Router application, the Kurono application, related software (including any drawn and/or animated avatars, whether or not such avatars have any modifications) and any other games, applications or any other content that we make available from time to time) are owned by Ocado Innovation Limited. These rights protect all of the applications, games, products and services you see on the Code for Life website from time to time, including the graphics of those games, their structure, gameplay and their “look and feel”. It is easy to copy material which appears on websites, but this does not mean it is legal. Therefore, no-one may copy, modify, distribute, show in public or create any derivative work from the Code for Life portal, or any part of the games or other material which is found on the Code for Life unless properly licensed to do so by us.
+    </Typography>
+  );
+};
+
+export default IP;

frontend/src/pages/termsOfUse/ForAdults/Introduction.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Divider,
+  Unstable_Grid2 as Grid,
+  Typography
+} from '@mui/material';
+
+const Introduction: React.FC = () => {
+  return (
+    <Grid container columnSpacing={3}>
+      <Grid xs={12} md={6}>
+        <Typography>
+          Ocado Innovation Limited (as “Ocado Technology”), the division that powers Ocado.com, the world’s largest online-only grocery retailer, has launched Code for Life. Code for Life is a nationwide corporate social responsibility initiative to help support primary and secondary school teachers deliver the new computer science curriculum. The aim of the initiative is to equip every child in the country with the “coding survival skills” that will enable them to flourish in an increasingly digital world.
+        </Typography>
+        <Typography>
+          Ocado Innovation Limited is committed to protecting any data that we collect concerning you. By using our services on this website you are agreeing to the use of the data that we collect in accordance with the Privacy Notice and the Terms of Use (together, the “Terms & Conditions”), so please read these carefully.
+        </Typography>
+      </Grid>
+      <Grid xs={12} md={6}>
+        <Typography>
+          Ocado Innovation Limited is committed to providing a valuable source of supporting materials for teachers to deliver the current primary school curriculum, as well as a fun, educational web application from which students can learn. The Terms & Conditions form a legal document which sets out your rights and obligations, and those of Ocado Innovation Limited, a company registered in England under registered company number 08813912 with its registered office at Buildings One & Two Trident Place, Mosquito Way, Hatfield, Hertfordshire, United Kingdom, AL10 9UL (“Ocado Innovation Limited”, “we”, “our” or “us” as appropriate in the context), in relation to the entire contents of the Code for Life website and the games, platforms and other products or services offered by Ocado Technology from time to time (collectively, “Code for Life”).
+        </Typography>
+      </Grid>
+      <Grid xs={12}>
+        <Divider style={{ marginTop: 2, marginBottom: 18 }} />
+      </Grid>
+      <Grid xs={12} md={6}>
+        <Typography fontWeight='bold'>
+          Important: If you are under 13 years of age you must have your parent, guardian or carer’s consent to register for a Code for Life account, and to use their email address. If you are using this at school, you must first have your teacher’s permission to use this site. These Terms of Use were most recently updated on 11th July 2022.
+        </Typography>
+        <Typography>
+          Code for Life includes all versions of “Rapid Router”, “Kurono” and any other games, platforms and other products or services released by us (whether online or otherwise), from time to time, including all Code for Life websites used to play the games, platforms and any other products or services that we make available. “Code for Life” and “Rapid Router” are registered UK trade marks of Ocado Innovation Limited.
+        </Typography>
+        <Typography>
+          You must take the time to read and understand the Terms of Use and the Privacy Notice before registering for Code for Life.
+        </Typography>
+      </Grid>
+      <Grid xs={12} md={6}>
+        <Typography fontWeight='bold'>
+          By registering, you accept that you are entering into a contract with us in accordance with the Terms & Conditions and the Privacy Notice. Visitors to the Code for Life portal who do not register to become a User, similarly affirm that they are bound by the Terms & Conditions and the Privacy Notice each time they access the Code for Life site. We reserve the right to update the Terms of Use at any time, so please check them periodically, as all changes will be binding on you provided that you use the website after they have been made. To assist you in determining whether the Terms & Conditions have changed since your most recent visit to the website, we will display the date when the Terms of Use and Privacy Notice were most recently updated.
+        </Typography>
+        <Typography fontWeight='bold'>
+          Important: You must ensure that any email address we hold for you is kept up-to-date and that you have full access to it. Important notifications are sent to the email address you provide. Failure to keep this information updated can result in your Code for Life account being deleted and/or restricted.
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Introduction;