-[x] WIP Issues Solving

-[x] Fix Completed State Not Removing

public/mix-manifest.json

@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=76de2771fdad95b74d3c56b7c7d8c2d1",
+    "/js/app.js": "/js/app.js?id=807216b29543c3df8fbc14506c3dd65f",
     "/js/script.js": "/js/script.js?id=486f329f14e1f080305e7c109ca928ac",
     "/js/webportal-script.js": "/js/webportal-script.js?id=fd5980061c5c73a9d216570039251afa",
     "/js/formbuilder.js": "/js/formbuilder.js?id=85537cfbc99853ea9793f54c417c10f9",
     "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
-    "/css/webportal-app.css": "/css/webportal-app.css?id=52bf88fab3324c68accb313bf823516f",
-    "/css/app.css": "/css/app.css?id=f10cf606cbab2a8d14a07f43772310e3",
+    "/css/webportal-app.css": "/css/webportal-app.css?id=806655c0e789c19af0f0fc9c1c01575c",
+    "/css/app.css": "/css/app.css?id=13336f9fc3d6bba1d52d36fa3a9e7b3c",
     "/js/vendor.js": "/js/vendor.js?id=fd88a53589d5bef5911c2bfa2da9fc92"
 }

resources/assets/js/components/StepBar.vue

@@ -4,18 +4,21 @@
       v-for="(step, index) in props.steps"
       :key="index"
       :class="[
-        'step-bar-item flex items-center gap-[6px] py-[6px]',
+        'step-bar-item flex cursor-pointer items-center gap-[6px] py-[6px]',
         { active: index + 1 === props.currentStep },
         { completed: step.complete },
       ]"
+      @click="emit('change-step', index + 1)"
     >
       <div class="step-outer-circle">
         <div class="step-inner-circle">
-          <span v-if="step.complete"><svg-vue icon="step-tick" /></span>
+          <span v-if="step.complete"
+            ><svg-vue icon="step-tick" class="text-xl"
+          /></span>
           <span v-else>{{ step.step }}</span>
         </div>
       </div>
-      <div>
+      <div class="">
         <p class="text-[10px] leading-[15px] tracking-[-2%]">
           Step {{ step.step }}
         </p>
@@ -39,7 +42,7 @@
 
 <script setup lang="ts">
 import axios from 'axios';
-import { defineProps, ref, watch } from 'vue';
+import { defineProps, ref, watch, defineEmits } from 'vue';
 
 const props = defineProps({
   currentStep: {
@@ -56,6 +59,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change-step']);
+
 const checkMark = ref(false);
 
 watch(checkMark, async (newVal) => {

resources/assets/js/views/activity/onboarding/OnBoardingIndex.vue

@@ -10,29 +10,40 @@
         <div class="max-w-[365px] bg-bluecoral px-[35px] py-12 text-white">
           <h3 class="text-[28px] font-bold leading-9">
             Welcome to <br />
-            IATI Publisher 👋
+            <span class="flex items-center">
+              <span> IATI Publisher </span>
+              <span>
+                <svg-vue icon="hand-wave" />
+              </span>
+            </span>
           </h3>
-          <p>
+          <p class="pt-[2px] text-xs">
             To get you started with publishing, there are a few key steps you
             need to complete. Let's walk through them!
           </p>
-          <StepBar :current-step="step" :steps="organizationSteps" />
+          <StepBar
+            :current-step="step"
+            :steps="organizationSteps"
+            @change-step="changeStep"
+          />
         </div>
         <!-- Right -->
         <div
           class="relative flex w-[900px] items-center justify-center px-[40px]"
         >
           <Transition mode="out-in">
-            <div v-if="step === 1">
+            <div v-if="step === 1" class="h-full">
               <PublishingSettingsStep
                 :publisher-id="props.organization.publisher_id"
                 :organization-id="props.organization.id"
+                :registration-type="props.organization.registration_type"
                 :publisher-setting="publisherSetting"
                 :fetch-data="fetchData"
                 :initial-render="initialRender"
                 @proceed-step="proceedStep"
                 @change-render="handleChangeRender"
                 @complete-step="completeStep"
+                @remove-completed-step="removeCompletedStep"
               />
             </div>
 
@@ -50,6 +61,7 @@
                 @proceed-step="proceedStep"
                 @previous-step="previousStep"
                 @complete-step="completeStep"
+                @remove-completed-step="removeCompletedStep"
               />
             </div>
 
@@ -61,10 +73,11 @@
                 @proceed-step="proceedStep"
                 @previous-step="previousStep"
                 @complete-step="completeStep"
+                @remove-completed-step="removeCompletedStep"
               />
             </div>
 
-            <div v-else>
+            <div v-else class="h-full self-start">
               <ActivityStep
                 @proceed-step="proceedStep"
                 @previous-step="previousStep"
@@ -205,6 +218,14 @@ const completeStep = (step: number) => {
   organizationSteps.value[step - 1].complete = true;
 };
 
+const removeCompletedStep = (step: number) => {
+  organizationSteps.value[step - 1].complete = false;
+};
+
+const changeStep = (index: number) => {
+  step.value = index;
+};
+
 onMounted(() => {
   fetchData();
 });