feat: add percentage on project creation

web-marketplace/src/components/molecules/ProjectPageFooter.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 import SaveFooter from 'web-components/lib/components/fixed-footer/SaveFooter';
 
+import { getProjectCreationPercentage } from 'pages/ProjectCreate/ProjectCreate.utils';
+
 import { useProjectEditContext } from '../../pages/ProjectEdit';
 import { EditProjectPageFooter } from './EditProjectPageFooter';
 
@@ -25,6 +28,9 @@ const ProjectPageFooter: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const { isEdit } = useProjectEditContext();
   const saveDisabled = !isValid || isSubmitting;
+  const { pathname } = useLocation();
+  const currentStep = pathname.substring(pathname.lastIndexOf('/') + 1);
+  const percentage = getProjectCreationPercentage({ currentStep });
 
   return isEdit ? (
     <EditProjectPageFooter
@@ -40,7 +46,7 @@ const ProjectPageFooter: React.FC<React.PropsWithChildren<Props>> = ({
       onNext={props.onNext}
       hideProgress={false} // TODO
       saveDisabled={saveDisabled}
-      percentComplete={0} // TODO
+      percentComplete={percentage}
     />
   );
 };

web-marketplace/src/pages/ProjectCreate/ProjectCreate.constants.ts

@@ -0,0 +1,11 @@
+export const PROJECT_CREATION_STEPS = [
+  'basic-info',
+  'location',
+  'roles',
+  'description',
+  'media',
+  'metadata',
+  'review',
+];
+
+export const PROJECT_STEPS_COUNT = PROJECT_CREATION_STEPS.length;

web-marketplace/src/pages/ProjectCreate/ProjectCreate.utils.ts

@@ -0,0 +1,19 @@
+import {
+  PROJECT_CREATION_STEPS,
+  PROJECT_STEPS_COUNT,
+} from './ProjectCreate.constants';
+
+type GetProjectCreationPercentageParams = {
+  currentStep: string;
+};
+
+export const getProjectCreationPercentage = ({
+  currentStep,
+}: GetProjectCreationPercentageParams) => {
+  const currentIndex = PROJECT_CREATION_STEPS.findIndex(
+    step => step === currentStep,
+  );
+  const percentage = ((currentIndex + 1) / PROJECT_STEPS_COUNT) * 100;
+
+  return percentage;
+};