add carousel

beyondessential · Dec 16, 2024 · 5966834 · 5966834
1 parent 0b35c62
commit 5966834
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 47 deletions.
diff --git a/packages/datatrak-web/src/features/WelcomeScreens/CarouselDots.tsx b/packages/datatrak-web/src/features/WelcomeScreens/CarouselDots.tsx
@@ -0,0 +1,39 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+`;
+
+const Dot = styled.button<{ $active: boolean }>`
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: ${({ theme, $active }) =>
+    $active ? theme.palette.primary.main : theme.palette.divider};
+  border: none;
+  cursor: pointer;
+  padding: 0;
+`;
+
+interface CarouselDotsProps {
+  maxSteps: number;
+  activeStep: number;
+  onClick: (index: number) => void;
+}
+
+export const CarouselDots: React.FC<CarouselDotsProps> = ({ maxSteps, activeStep, onClick }) => {
+  return (
+    <Container>
+      {Array.from({ length: maxSteps }, (_, i) => (
+        <Dot key={i} $active={i === activeStep} onClick={() => onClick(i)} />
+      ))}
+    </Container>
+  );
+};
diff --git a/packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx b/packages/datatrak-web/src/features/WelcomeScreens/WelcomeScreens.tsx
@@ -4,39 +4,35 @@
  */
 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 { Typography, Button as MuiButton } from '@material-ui/core';
 import SwipeableViews from 'react-swipeable-views';
+import { CarouselDots } from './CarouselDots';
 
 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',
+    title: 'Welcome to Tupaia DataTrak!',
+    text: "If you're here from MediTrak, welcome! Rest assured that you have all the same functionality as MediTrak, only better. Come for a quick tour of what's new.",
+    imgPath: 'images/data-collection-woman.svg',
   },
   {
-    label: 'Bird',
-    imgPath:
-      'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
+    title: 'Sync Status',
+    text: 'See your last sync and which surveys are pending sync on your home page. Use the sync button on the top right to manually sync your device.',
+    imgPath: 'images/pig-on-beach.svg',
   },
   {
-    label: 'Bali, Indonesia',
-    imgPath:
-      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',
+    title: 'Submission history',
+    text: 'Quickly see and access your recently submitted surveys under the ‘Submission history’ section on the dashboard',
+    imgPath: 'images/digital-update.svg',
   },
   {
-    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',
+    title: 'Projects',
+    text: "From the home screen you can see which project you're in. Click on the project to swap to a different project.",
+    imgPath: 'images/data-collection-man.svg',
   },
 ];
 
 const Container = styled.div`
+  text-align: center;
   padding: 2rem;
 `;
 
@@ -61,48 +57,27 @@ const Button = styled(MuiButton)`
 
 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}>
+          <div key={step.title}>
             {Math.abs(activeStep - index) <= 2 ? (
-              <Image src={step.imgPath} alt={step.label} />
+              <Image src={step.imgPath} alt={step.title} />
             ) : null}
           </div>
         ))}
       </SwipeableViews>
-      <MobileStepper
-        steps={maxSteps}
-        position="static"
-        variant="text"
+      <Title>{tutorialSteps[activeStep].title}</Title>
+      <Text>{tutorialSteps[activeStep].text}</Text>
+      <CarouselDots
+        maxSteps={tutorialSteps.length}
         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>
-        }
+        onClick={handleStepChange}
       />
     </Container>
   );