set up welcome pages

packages/datatrak-web/package.json

@@ -39,6 +39,7 @@
     "react-leaflet": "^3.2.1",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
+    "react-swipeable-views": "^0.14.0",
     "react-table": "^7.8.0",
     "styled-components": "^5.1.0",
     "workbox-precaching": "^7.1.0",

packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx

@@ -0,0 +1,109 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { MobileStepper, Typography, Button as MuiButton } from '@material-ui/core';
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
+import SwipeableViews from 'react-swipeable-views';
+
+const tutorialSteps = [
+  {
+    label: 'San Francisco – Oakland Bay Bridge, United States',
+    imgPath:
+      'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
+  },
+  {
+    label: 'Bird',
+    imgPath:
+      'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
+  },
+  {
+    label: 'Bali, Indonesia',
+    imgPath:
+      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',
+  },
+  {
+    label: 'NeONBRAND Digital Marketing, Las Vegas, United States',
+    imgPath:
+      'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60',
+  },
+  {
+    label: 'Goč, Serbia',
+    imgPath:
+      'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',
+  },
+];
+
+const Container = styled.div`
+  padding: 2rem;
+`;
+
+const Title = styled(Typography).attrs({
+  variant: 'h1',
+})`
+  font-size: 1rem;
+  margin-bottom: 1rem;
+`;
+
+const Text = styled(Typography)`
+  font-size: 0.875rem;
+`;
+
+const Image = styled.img`
+  max-width: 100%;
+`;
+
+const Button = styled(MuiButton)`
+  width: 100%;
+`;
+
+export const WelcomeScreens = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const maxSteps = tutorialSteps.length;
+
+  const handleNext = () => {
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1);
+  };
+
+  const handleStepChange = step => {
+    setActiveStep(step);
+  };
+  return (
+    <Container>
+      <Typography>{tutorialSteps[activeStep].label}</Typography>
+      <SwipeableViews index={activeStep} onChangeIndex={handleStepChange} enableMouseEvents>
+        {tutorialSteps.map((step, index) => (
+          <div key={step.label}>
+            {Math.abs(activeStep - index) <= 2 ? (
+              <Image src={step.imgPath} alt={step.label} />
+            ) : null}
+          </div>
+        ))}
+      </SwipeableViews>
+      <MobileStepper
+        steps={maxSteps}
+        position="static"
+        variant="text"
+        activeStep={activeStep}
+        nextButton={
+          <Button size="small" onClick={handleNext} disabled={activeStep === maxSteps - 1}>
+            Next
+            <KeyboardArrowLeft />
+          </Button>
+        }
+        backButton={
+          <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
+            <KeyboardArrowRight />
+            Back
+          </Button>
+        }
+      />
+    </Container>
+  );
+};

packages/datatrak-web/src/features/WelcomeScreens/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+export { WelcomeScreens } from './WelcomeScreens';

packages/datatrak-web/src/routes/Routes.tsx

@@ -23,6 +23,7 @@ import {
   TaskDetailsPage,
   NotAuthorisedPage,
 } from '../views';
+import { WelcomeScreens } from '../features/WelcomeScreens';
 import { useCurrentUserContext } from '../api';
 import { ROUTES } from '../constants';
 import { useFromLocation } from '../utils';
@@ -55,13 +56,16 @@ const AuthViewLoggedInRedirect = ({ children }) => {
  * This Router is using [version 6.3]{@link https://reactrouter.com/en/v6.3.0}, as later versions are not supported by our TS setup. See [this issue here]{@link https://github.com/remix-run/react-router/discussions/8364}
  * This means the newer 'createBrowserRouter' and 'RouterProvider' can't be used here.
  **/
+
 export const Routes = () => {
+  const welcomeScreensCompleted = false;
+  const LandingPageView = welcomeScreensCompleted ? LandingPage : WelcomeScreens;
   return (
     <RouterRoutes>
       <Route path="/" element={<MainPageLayout />}>
         {/* PRIVATE ROUTES */}
         <Route path="/" element={<PrivateRoute />}>
-          <Route index element={<LandingPage />} />
+          <Route index element={<LandingPageView />} />
           <Route path={ROUTES.ACCOUNT_SETTINGS} element={<AccountSettingsPage />} />
           <Route element={<TasksLayout />}>
             <Route path={ROUTES.TASKS} element={<TasksDashboardPage />} />