feat: add steps

app/javascript/v3/views/auth/start/FounderNote.vue

@@ -1,5 +1,8 @@
 <template>
-  <modal-layout :title="$t('ONBOARDING.FOUNDERS_NOTE.TITLE')">
+  <modal-layout
+    :title="$t('ONBOARDING.FOUNDERS_NOTE.TITLE')"
+    current-step="founders-note"
+  >
     <template #body>
       <section class="mt-4 space-y-3 text-sm leading-relaxed">
         <p>👋 Hey {{ user.name }},</p>

app/javascript/v3/views/auth/start/SetupCompany.vue

@@ -2,6 +2,7 @@
   <modal-layout
     :title="$t('ONBOARDING.COMPANY.TITLE')"
     :body="$t('ONBOARDING.COMPANY.BODY')"
+    current-step="company"
   >
     <form class="space-y-8">
       <div class="space-y-3">

app/javascript/v3/views/auth/start/SetupProfile.vue

@@ -2,6 +2,7 @@
   <modal-layout
     :title="$t('ONBOARDING.PROFILE.TITLE')"
     :body="$t('ONBOARDING.PROFILE.BODY')"
+    current-step="profile"
   >
     <form class="mt-8 space-y-8">
       <div class="space-y-3">

app/javascript/v3/views/auth/start/components/ModalLayout.vue

@@ -12,9 +12,12 @@
         >
           Get Started
         </h6>
-        <modal-step is-active title="Setup Profile" :step-number="1" />
-        <modal-step title="Setup Company" :step-number="2" />
-        <modal-step title="Invite your team" :step-number="3" />
+        <modal-step
+          v-for="(step, index) in steps"
+          :key="step.name"
+          v-bind="step"
+          :step-number="index + 1"
+        />
       </div>
       <div
         id="modal-body"
@@ -41,6 +44,34 @@
 <script>
 import ModalStep from './ModalStep.vue';
 
+const UISteps = [
+  {
+    name: 'profile',
+    title: 'Setup Profile',
+    isActive: false,
+    isComplete: false,
+  },
+  {
+    name: 'company',
+    title: 'Setup Company',
+    isActive: false,
+    isComplete: false,
+  },
+  {
+    name: 'invite',
+    title: 'Invite your team',
+    isActive: false,
+    isComplete: false,
+  },
+  {
+    name: 'founders-note',
+    title: "Founder's Note",
+    hidden: true,
+    isActive: false,
+    isComplete: false,
+  },
+];
+
 export default {
   components: {
     ModalStep,
@@ -54,6 +85,27 @@ export default {
       type: String,
       default: '',
     },
+    currentStep: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    steps() {
+      let foundCurrentStep = false;
+
+      return UISteps.map(step => {
+        if (step.name === this.currentStep) {
+          foundCurrentStep = true;
+        }
+
+        return {
+          ...step,
+          isActive: step.name === this.currentStep,
+          isComplete: !foundCurrentStep,
+        };
+      });
+    },
   },
 };
 </script>

app/javascript/v3/views/auth/start/components/ModalStep.vue

@@ -1,9 +1,11 @@
 <template>
   <div
+    v-if="!hidden"
     class="flex items-center gap-2 p-2 text-sm"
     :class="{
       'text-slate-100 bg-slate-800 rounded': isActive,
       'opacity-50': !isActive && !isComplete,
+      hidden: hidden,
     }"
   >
     <div
@@ -49,6 +51,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
     isComplete: {
       type: Boolean,
       default: false,