From 720c53b1af4b5daf32efe162c20c972afe785acc Mon Sep 17 00:00:00 2001
From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:06:31 -0500
Subject: [PATCH 1/5] OV-369: + add transition between components in
 create-avatar page

---
 .../common/components/stepper/stepper.tsx     |  4 +-
 .../components/upload-video/upload-video.tsx  | 11 +++-
 .../create-avatar/components/components.ts    |  1 +
 .../components/instruction/instruction.tsx    |  8 ++-
 .../create-avatar/pages/create-avatar.tsx     | 60 ++++++++++++++++++-
 .../create-avatar/pages/styles.module.css     |  6 +-
 6 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx
index 675bd5f7d..dc5c5a8db 100644
--- a/frontend/src/bundles/common/components/stepper/stepper.tsx
+++ b/frontend/src/bundles/common/components/stepper/stepper.tsx
@@ -19,9 +19,10 @@ import styles from './styles.module.css';
 type Properties = {
     steps: string[];
     currentStep: string;
+    onClickBack?: () => void;
 };
 
-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;
 
@@ -30,6 +31,7 @@ const Stepper: React.FC<Properties> = ({ steps, currentStep }) => {
             variant="ghostIcon"
             aria-label="back"
             icon={<Icon as={IconName.ARROW_BACK} boxSize={4} />}
+            onClick={onClickBack}
         />
     );
 
diff --git a/frontend/src/bundles/common/components/upload-video/upload-video.tsx b/frontend/src/bundles/common/components/upload-video/upload-video.tsx
index 179d6e778..261a64040 100644
--- a/frontend/src/bundles/common/components/upload-video/upload-video.tsx
+++ b/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>
diff --git a/frontend/src/bundles/create-avatar/components/components.ts b/frontend/src/bundles/create-avatar/components/components.ts
index db0a242a4..c9c506611 100644
--- a/frontend/src/bundles/create-avatar/components/components.ts
+++ b/frontend/src/bundles/create-avatar/components/components.ts
@@ -1 +1,2 @@
+export { Consent } from './consent/consent.js';
 export { Instruction } from './instruction/instruction.js';
diff --git a/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx b/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
index bd8675bd8..b96c3e780 100644
--- a/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
+++ b/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 InstructionProperties = {
+    onClickNext: () => void;
+};
+
+const Instruction: React.FC<InstructionProperties> = ({ 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>
     );
 };
diff --git a/frontend/src/bundles/create-avatar/pages/create-avatar.tsx b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
index 13200ba99..e8eec11c9 100644
--- a/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
+++ b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
@@ -1,13 +1,67 @@
-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 styles from './styles.module.css';
 
 const CreateAvatar: React.FC = () => {
+    const steps = useMemo(() => ['Instructions', 'Upload', 'Consent'], []);
+    const [step, setStep] = useState<string>('Instructions');
+
+    const renderStepContent = (step: string): JSX.Element | null => {
+        switch (step) {
+            case 'Instructions': {
+                return <Instruction onClickNext={nextStep} />;
+            }
+            case 'Upload': {
+                return <UploadVideo onClickNext={nextStep} />;
+            }
+            case '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>
     );
diff --git a/frontend/src/bundles/create-avatar/pages/styles.module.css b/frontend/src/bundles/create-avatar/pages/styles.module.css
index a3372b450..e60a542c7 100644
--- a/frontend/src/bundles/create-avatar/pages/styles.module.css
+++ b/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;
 }

From 9fa778d2a8c60e72527309e6f94cbe35b90abc67 Mon Sep 17 00:00:00 2001
From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:15:31 -0500
Subject: [PATCH 2/5] OV-369: + make equal containers

---
 .../create-avatar/components/consent/styles.module.css |  8 +++++++-
 .../components/instruction/styles.module.css           | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/bundles/create-avatar/components/consent/styles.module.css b/frontend/src/bundles/create-avatar/components/consent/styles.module.css
index 86d9e8bc5..c81e6fdd7 100644
--- a/frontend/src/bundles/create-avatar/components/consent/styles.module.css
+++ b/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 {
diff --git a/frontend/src/bundles/create-avatar/components/instruction/styles.module.css b/frontend/src/bundles/create-avatar/components/instruction/styles.module.css
index 8df595397..4bc3f2bb3 100644
--- a/frontend/src/bundles/create-avatar/components/instruction/styles.module.css
+++ b/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;

From a6ee73fb24208c16320ab953cdacc41ea4ae6936 Mon Sep 17 00:00:00 2001
From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com>
Date: Thu, 26 Sep 2024 09:49:05 -0500
Subject: [PATCH 3/5] OV-369: + add constants

---
 .../common/components/stepper/stepper.tsx        |  4 +++-
 .../src/bundles/create-avatar/enums/steps.ts     |  7 +++++++
 .../create-avatar/pages/create-avatar.tsx        | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/bundles/create-avatar/enums/steps.ts

diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx
index dc5c5a8db..ae9160274 100644
--- a/frontend/src/bundles/common/components/stepper/stepper.tsx
+++ b/frontend/src/bundles/common/components/stepper/stepper.tsx
@@ -24,7 +24,9 @@ type Properties = {
 
 const Stepper: React.FC<Properties> = ({ steps, currentStep, onClickBack }) => {
     const activeStepIndex = steps.indexOf(currentStep);
-    const progressPercent = (activeStepIndex / (steps.length - 1)) * 100;
+    const MAX_PERCENT = 100;
+    const progressPercent =
+        (activeStepIndex / (steps.length - 1)) * MAX_PERCENT;
 
     const backButton = (
         <IconButton
diff --git a/frontend/src/bundles/create-avatar/enums/steps.ts b/frontend/src/bundles/create-avatar/enums/steps.ts
new file mode 100644
index 000000000..99768ae7f
--- /dev/null
+++ b/frontend/src/bundles/create-avatar/enums/steps.ts
@@ -0,0 +1,7 @@
+const Steps = {
+    INSTRUCTIONS: 'Instructions',
+    UPLOAD: 'Upload',
+    CONSENT: 'Consent',
+} as const;
+
+export { Steps };
diff --git a/frontend/src/bundles/create-avatar/pages/create-avatar.tsx b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
index e8eec11c9..684a9da10 100644
--- a/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
+++ b/frontend/src/bundles/create-avatar/pages/create-avatar.tsx
@@ -10,21 +10,27 @@ import {
 } from '~/bundles/common/hooks/hooks.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(() => ['Instructions', 'Upload', 'Consent'], []);
-    const [step, setStep] = useState<string>('Instructions');
+    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 'Instructions': {
+            case Steps.INSTRUCTIONS: {
                 return <Instruction onClickNext={nextStep} />;
             }
-            case 'Upload': {
+            case Steps.UPLOAD: {
                 return <UploadVideo onClickNext={nextStep} />;
             }
-            case 'Consent': {
+            case Steps.CONSENT: {
                 return <Consent />;
             }
             default: {

From 2874d6c9ba0d21e0b4ab3dae855de8653b94c138 Mon Sep 17 00:00:00 2001
From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:48:25 -0500
Subject: [PATCH 4/5] OV-369: + move MAX_PERCENT  outside of the component

---
 frontend/src/bundles/common/components/stepper/stepper.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/bundles/common/components/stepper/stepper.tsx b/frontend/src/bundles/common/components/stepper/stepper.tsx
index ae9160274..8dd8b9c5c 100644
--- a/frontend/src/bundles/common/components/stepper/stepper.tsx
+++ b/frontend/src/bundles/common/components/stepper/stepper.tsx
@@ -21,10 +21,11 @@ type Properties = {
     currentStep: string;
     onClickBack?: () => void;
 };
+const MAX_PERCENT = 100;
 
 const Stepper: React.FC<Properties> = ({ steps, currentStep, onClickBack }) => {
     const activeStepIndex = steps.indexOf(currentStep);
-    const MAX_PERCENT = 100;
+
     const progressPercent =
         (activeStepIndex / (steps.length - 1)) * MAX_PERCENT;
 

From b31643e890443ce5388b3a7d90967a6e8f0b41d0 Mon Sep 17 00:00:00 2001
From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com>
Date: Fri, 27 Sep 2024 05:00:40 -0500
Subject: [PATCH 5/5] OV-369: * change properties name in instructions.tsx

---
 .../create-avatar/components/instruction/instruction.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx b/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
index b96c3e780..741d26bce 100644
--- a/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
+++ b/frontend/src/bundles/create-avatar/components/instruction/instruction.tsx
@@ -22,11 +22,11 @@ const avoidListItems = [
     'Hand gestures above the chest or pointing gestures',
 ];
 
-type InstructionProperties = {
+type Properties = {
     onClickNext: () => void;
 };
 
-const Instruction: React.FC<InstructionProperties> = ({ onClickNext }) => {
+const Instruction: React.FC<Properties> = ({ onClickNext }) => {
     return (
         <Flex className={styles['flex-container']}>
             <Flex className={styles['inner-flex']}>