fix: update InteractiveSpare modal

src/views/EditProfileView.vue

@@ -27,6 +27,7 @@ const profile = ref<Profile>({
 const updatePassword = ref<boolean>(false)
 const confirmPassword = ref<string>('')
 const errorMessage = ref<string>('')
+const isModalOpen = ref(false)
 
 const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{1,29}$/
 const emailRegex =
@@ -51,6 +52,10 @@ const isSavingAccountValid = computed(() =>
     accountNumberRegex.test(profile.value.savingAccount.accNumber?.toString() || '')
 )
 
+const openInteractiveSpare = () => {
+  isModalOpen.value = true // Open the modalReset the flag since the speech will now be displayed
+}
+
 const isFormInvalid = computed(
     () =>
         [
@@ -210,6 +215,7 @@ const saveChanges = async () => {
                     :png-size="10"
                     :speech="['Her kan du endre på profilen din!']"
                     direction="left"
+                    :isModalOpen="openInteractiveSpare"
                 />
 
                 <CardTemplate>

src/views/HomeView.vue

@@ -30,9 +30,8 @@
         :speech="speech"
         :direction="'right'"
         :pngSize="15"
-        :is-modal-open="isModalOpen"
+        :isModalOpen="isModalOpen"
         class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
-        v-if="isModalOpen"
     ></InteractiveSpare>
     <div class="fixed bottom-5 left-5">
         <div @click="openHelp" class="hover:cursor-pointer">

src/views/ProfileView.vue

@@ -12,6 +12,7 @@ import router from '@/router'
 const profile = ref<Profile>()
 const completedGoals = ref<Goal[]>([])
 const completedChallenges = ref<Challenge[]>([])
+const isModalOpen = ref(false)
 
 onMounted(async () => {
     await authInterceptor('/profile')
@@ -43,6 +44,11 @@ onMounted(async () => {
 const welcome = computed(() => {
     return [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`]
 })
+
+const openInteractiveSpare = () => {
+    isModalOpen.value = true
+}
+
 </script>
 
 <template>
@@ -87,7 +93,21 @@ const welcome = computed(() => {
             </div>
 
             <div class="flex flex-col">
-                <InteractiveSpare :png-size="10" :speech="welcome" direction="left" />
+                <InteractiveSpare
+                    :png-size="10"
+                    :speech="welcome"
+                    direction="left"
+                    :isModalOpen="isModalOpen"
+                />
+                <div class="flex items-center">
+                  <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
+                    <img
+                        alt="Spare"
+                        class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+                        src="@/assets/spare.png"
+                    />
+                  </a>
+                </div>
                 <div class="flex flex-row justify-between mx-4">
                     <p class="font-bold">Fullførte sparemål</p>
                     <a class="hover:p-0 cursor-pointer" v-text="'Se alle'" />

src/views/ViewChallengeView.vue

@@ -29,6 +29,8 @@ const isCompleted = computed(() => challengeInstance.value.completedOn != null)
 
 const motivation = ref<string[]>([])
 
+const isModalOpen = ref(false)
+
 const calculateSpeech = () => {
     if (completion.value === 0) {
         return motivation.value.push(
@@ -140,7 +142,12 @@ const completeChallenge = () => {
                 </button>
             </div>
         </div>
-        <InteractiveSpare :png-size="10" :speech="motivation" direction="left" />
+        <InteractiveSpare
+            :png-size="10"
+            :speech="motivation"
+            direction="left"
+            :isModalOpen="isModalOpen"
+        />
     </div>
 </template>
 

src/views/ViewGoalView.vue

@@ -20,6 +20,11 @@ const completion = computed(() => (goalInstance.value.saved / goalInstance.value
 const isCompleted = computed(() => goalInstance.value.completedOn != null)
 
 const motivation = ref<string[]>([])
+const isModalOpen = ref(false)
+
+const openInteractiveSpare = () => {
+    isModalOpen.value = true
+}
 
 const calculateSpeech = () => {
     if (completion.value === 0) {
@@ -126,7 +131,21 @@ const completeGoal = () => {
                 </button>
             </div>
         </div>
-        <InteractiveSpare :png-size="10" :speech="motivation" direction="left" />
+        <div class="flex items-center">
+          <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
+            <img
+                alt="Spare"
+                class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+                src="@/assets/spare.png"
+            />
+          </a>
+        </div>
+        <InteractiveSpare
+            :png-size="10"
+            :speech="motivation"
+            direction="left"
+            :isModalOpen="isModalOpen"
+        />
     </div>
 </template>