OV-369: Implement create avatar flow

frontend/src/bundles/common/components/stepper/stepper.tsx

@@ -19,17 +19,22 @@ import styles from './styles.module.css';
 type Properties = {
     steps: string[];
     currentStep: string;
+    onClickBack?: () => void;
 };
+const MAX_PERCENT = 100;
 
-const Stepper: React.FC<Properties> = ({ steps, currentStep }) => {
+const Stepper: React.FC<Properties> = ({ steps, currentStep, onClickBack }) => {
     const activeStepIndex = steps.indexOf(currentStep);
-    const progressPercent = (activeStepIndex / (steps.length - 1)) * 100;
+
+    const progressPercent =
+        (activeStepIndex / (steps.length - 1)) * MAX_PERCENT;
 
     const backButton = (
         <IconButton
             variant="ghostIcon"
             aria-label="back"
             icon={<Icon as={IconName.ARROW_BACK} boxSize={4} />}
+            onClick={onClickBack}
         />
     );
 

frontend/src/bundles/common/components/upload-video/upload-video.tsx

@@ -5,7 +5,10 @@ import { VideoPlayer } from '../video-player/video-player.js';
 import { CheckboxForm, VideoDropzone } from './components/components.js';
 import styles from './styles.module.css';
 
-const UploadVideo: React.FC = () => {
+type UploadVideoProperties = {
+    onClickNext: () => void;
+};
+const UploadVideo: React.FC<UploadVideoProperties> = ({ onClickNext }) => {
     const [videoSource, setVideoSource] = useState<string | null>(null);
 
     const handleRemoveVideo = useCallback(() => {
@@ -38,7 +41,11 @@ const UploadVideo: React.FC = () => {
                         onRemoveVideo={handleRemoveVideo}
                         onSetVideo={handleSetVideo}
                     />
-                    <Button width="222px" label="Next step" />
+                    <Button
+                        width="222px"
+                        label="Next step"
+                        onClick={onClickNext}
+                    />
                 </>
             )}
         </Flex>

frontend/src/bundles/create-avatar/components/components.ts

@@ -1 +1,2 @@
+export { Consent } from './consent/consent.js';
 export { Instruction } from './instruction/instruction.js';

frontend/src/bundles/create-avatar/components/consent/styles.module.css

@@ -1,10 +1,16 @@
 .flex-container {
     flex-direction: column;
     background-color: white;
-    padding: 30px;
     border-radius: 10px;
     align-items: center;
+    justify-content: center;
     padding-bottom: 80px;
+    gap: 20px;
+    max-width: 864px;
+    width: 100%;
+    min-height: 550px;
+    border-radius: 12px;
+    padding: 20px 20px 50px;
 }
 
 .inner-flex {

frontend/src/bundles/create-avatar/components/instruction/instruction.tsx

@@ -22,7 +22,11 @@ const avoidListItems = [
     'Hand gestures above the chest or pointing gestures',
 ];
 
-const Instruction: React.FC = () => {
+type Properties = {
+    onClickNext: () => void;
+};
+
+const Instruction: React.FC<Properties> = ({ onClickNext }) => {
     return (
         <Flex className={styles['flex-container']}>
             <Flex className={styles['inner-flex']}>
@@ -37,7 +41,7 @@ const Instruction: React.FC = () => {
                     title={'Things to avoid'}
                 />
             </Flex>
-            <Button label="Next step" width="220px" />
+            <Button label="Next step" width="220px" onClick={onClickNext} />
         </Flex>
     );
 };

frontend/src/bundles/create-avatar/components/instruction/styles.module.css

@@ -1,15 +1,21 @@
 .flex-container {
     flex-direction: column;
     background-color: white;
-    padding: 30px;
     border-radius: 10px;
     align-items: center;
-    gap: 50px;
+    justify-content: center;
     padding-bottom: 80px;
+    gap: 20px;
+    max-width: 864px;
+    width: 100%;
+    min-height: 550px;
+    border-radius: 12px;
+    padding: 20px 20px 50px;
 }
 
 .inner-flex {
     color: var(--chakra-colors-typography-600);
+    background-color: white;
     font-size: 14px;
     justify-content: center;
     gap: 40px;

frontend/src/bundles/create-avatar/enums/steps.ts

@@ -0,0 +1,7 @@
+const Steps = {
+    INSTRUCTIONS: 'Instructions',
+    UPLOAD: 'Upload',
+    CONSENT: 'Consent',
+} as const;
+
+export { Steps };

frontend/src/bundles/create-avatar/pages/create-avatar.tsx

@@ -1,13 +1,73 @@
-import { Box } from '~/bundles/common/components/components.js';
+import {
+    Box,
+    Stepper,
+    UploadVideo,
+} from '~/bundles/common/components/components.js';
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
 
-import { Instruction } from '../components/components.js';
+import { Consent, Instruction } from '../components/components.js';
+import { Steps } from '../enums/steps.js';
 import styles from './styles.module.css';
 
 const CreateAvatar: React.FC = () => {
+    const steps = useMemo(
+        () => [Steps.INSTRUCTIONS, Steps.UPLOAD, Steps.CONSENT],
+        [],
+    );
+    const [step, setStep] = useState<(typeof Steps)[keyof typeof Steps]>(
+        Steps.INSTRUCTIONS,
+    );
+
+    const renderStepContent = (step: string): JSX.Element | null => {
+        switch (step) {
+            case Steps.INSTRUCTIONS: {
+                return <Instruction onClickNext={nextStep} />;
+            }
+            case Steps.UPLOAD: {
+                return <UploadVideo onClickNext={nextStep} />;
+            }
+            case Steps.CONSENT: {
+                return <Consent />;
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    const nextStep = useCallback((): void => {
+        const currentIndex = steps.indexOf(step);
+        if (currentIndex < steps.length - 1) {
+            const nextStep = steps[currentIndex + 1];
+            if (nextStep) {
+                setStep(nextStep);
+            }
+        }
+    }, [step, steps]);
+
+    const previousStep = useCallback((): void => {
+        const currentIndex = steps.indexOf(step);
+        if (currentIndex > 0) {
+            const previousStep = steps[currentIndex - 1];
+            if (previousStep) {
+                setStep(previousStep);
+            }
+        }
+    }, [step, steps]);
+
     return (
         <Box className={styles['container']}>
+            <Stepper
+                steps={steps}
+                currentStep={step}
+                onClickBack={previousStep}
+            />
             <Box className={styles['inner-container']}>
-                <Instruction />
+                {renderStepContent(step)}
             </Box>
         </Box>
     );

frontend/src/bundles/create-avatar/pages/styles.module.css

@@ -1,11 +1,13 @@
 .container {
     background-color: var(--chakra-colors-background-50);
-    height: calc(100vh - 75px);
-    padding: 50px;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
 }
 
 .inner-container {
     max-width: 870px;
     margin-left: auto;
     margin-right: auto;
+    padding-top: 10vh;
 }