enhancement: Add interactive spare to config (Ina) + format

src/App.vue

@@ -2,7 +2,7 @@
 import NavBarComponent from '@/components/NavBarComponent.vue'
 import { RouterView, useRoute } from 'vue-router'
 import { computed } from 'vue'
-import HelpComponent from "@/components/HelpComponent.vue";
+import HelpComponent from '@/components/HelpComponent.vue'
 
 const route = useRoute()
 
@@ -35,47 +35,77 @@ const helpMessages = computed(() => {
         messages.push('Du kan legge til sparemål og spareutfordringer!')
         messages.push('Sammen kan vi spare penger og nå dine mål! 🚀')
     } else if (route.path == '/profil') {
-        messages.push( 'Du har kommet til profilen din 🐷')
+        messages.push('Du har kommet til profilen din 🐷')
         messages.push('Her kan du se en oversikt over dine profilinstillinger ⚙️')
         messages.push('Du kan også se dine fullførte sparemål og utfordringer!')
         messages.push('Du kan redigere profilen din ved å trykke på "Rediger bruker" 💎')
     } else if (route.path == '/profil/rediger') {
-        messages.push( '️Her kan du se og redigere dine profil-instillinger 🪄')
+        messages.push('️Her kan du se og redigere dine profil-instillinger 🪄')
         messages.push('For å lagre endringene dine, trykk på "Lagre endringer" i høyre hjørne')
-        messages.push('Husk at passordet ditt må være minst 8 tegn langt, og inneholde minst ett tall, en stor bokstav, en liten bokstav, og et spesialtegn')
+        messages.push(
+            'Husk at passordet ditt må være minst 8 tegn langt, og inneholde minst ett tall, en stor bokstav, en liten bokstav, og et spesialtegn'
+        )
     } else if (route.path == '/sparemaal') {
         messages.push('Du har kommet til sparemålene dine 🎯')
-        messages.push('Et sparemål kan være noe du ønsker å spare penger til, for eksempel en ferie 🏖️ eller en ny sykkel 🚴🏻')
-        messages.push('Du kan lage nye sparemål ved å trykke på knappen "Opprett et nytt sparemål".')
-        messages.push('Du kan også endre rekkefølgen på sparemålene dine ved å trykke på "Endre rekkefølge".')
-        messages.push('Når du har fullført et sparemål, vil det dukke opp under "Fullførte sparemål".')
+        messages.push(
+            'Et sparemål kan være noe du ønsker å spare penger til, for eksempel en ferie 🏖️ eller en ny sykkel 🚴🏻'
+        )
+        messages.push(
+            'Du kan lage nye sparemål ved å trykke på knappen "Opprett et nytt sparemål".'
+        )
+        messages.push(
+            'Du kan også endre rekkefølgen på sparemålene dine ved å trykke på "Endre rekkefølge".'
+        )
+        messages.push(
+            'Når du har fullført et sparemål, vil det dukke opp under "Fullførte sparemål".'
+        )
         messages.push('Lykke til med målene dine! 🎀')
     } else if (route.path == '/spareutfordringer') {
         messages.push('Du har kommet til spareutfordringene dine 💰')
-        messages.push('En spareutfordring er en måte å bli kvitt dårlige vaner, samtidig spare penger for å nå dine mål ✨')
+        messages.push(
+            'En spareutfordring er en måte å bli kvitt dårlige vaner, samtidig spare penger for å nå dine mål ✨'
+        )
         messages.push('Du kan opprette en ny utfordring ved å trykke på "Opprett en ny utfordring"')
-        messages.push('Du kan også endre rekkefølgen på utfordringene dine ved å trykke på "Endre rekkefølge".')
-        messages.push('Når du har fullført en utfordring, vil den dukke opp under "Fullførte utfordringer".')
+        messages.push(
+            'Du kan også endre rekkefølgen på utfordringene dine ved å trykke på "Endre rekkefølge".'
+        )
+        messages.push(
+            'Når du har fullført en utfordring, vil den dukke opp under "Fullførte utfordringer".'
+        )
         messages.push('Lykke til med utfordringene dine 🏆')
-    } else if (route.path.startsWith('/sparemaal/oversikt')){
+    } else if (route.path.startsWith('/sparemaal/oversikt')) {
         messages.push('Her har du en oversikt over sparemålet ditt 🗽')
         messages.push('Du kan redigere målet, markere det som ferdig eller slette det')
-        messages.push('Du kan også se hvor mye du har spart av målet ditt, og hvor mye du har igjen')
-    } else if (route.path.startsWith('/spareutfordringer/oversikt')){
+        messages.push(
+            'Du kan også se hvor mye du har spart av målet ditt, og hvor mye du har igjen'
+        )
+    } else if (route.path.startsWith('/spareutfordringer/oversikt')) {
         messages.push('Her har du en oversikt over spareutfordringen din 🏔️')
         messages.push('Du kan redigere utfordringen, markere det som ferdig eller slette det')
-        messages.push('Du kan også se hvor mye du har spart av utfordringen din, og hvor mye du har igjen')
+        messages.push(
+            'Du kan også se hvor mye du har spart av utfordringen din, og hvor mye du har igjen'
+        )
     } else if (route.path.startsWith('/sparemaal/rediger')) {
         messages.push('Her kan du opprette et nytt sparemål 🌸')
-        messages.push('Tittel er navnet på sparemålet, og beskrivelse er en kort forklaring på hva sparemålet går ut på.')
-        messages.push('Kroner spart er hvor mye du har spart til nå, og av målbeløp er hvor mye du ønsker å spare.')
+        messages.push(
+            'Tittel er navnet på sparemålet, og beskrivelse er en kort forklaring på hva sparemålet går ut på.'
+        )
+        messages.push(
+            'Kroner spart er hvor mye du har spart til nå, og av målbeløp er hvor mye du ønsker å spare.'
+        )
         messages.push('Forfallsdato er datoen du ønsker å ha nådd sparemålet ditt.')
         messages.push('Lykke til med sparingen! 🌴')
-    } else if(route.path.startsWith('/spareutfordring/rediger')) {
+    } else if (route.path.startsWith('/spareutfordring/rediger')) {
         messages.push('Her kan du opprette en ny utfordring ☕️')
-        messages.push('Tittel er navnet på utfordringen, og beskrivelse er en kort forklaring på hva utfordringen går ut på.')
-        messages.push('Pris per sparing er hvor mye du sparer hver gang du sparer, og antall sparinger er hvor mange ganger du har spart.')
-        messages.push('Av målbeløp er hvor mye du har spart til nå, og forfallsdato er når utfordringen skal være fullført.')
+        messages.push(
+            'Tittel er navnet på utfordringen, og beskrivelse er en kort forklaring på hva utfordringen går ut på.'
+        )
+        messages.push(
+            'Pris per sparing er hvor mye du sparer hver gang du sparer, og antall sparinger er hvor mange ganger du har spart.'
+        )
+        messages.push(
+            'Av målbeløp er hvor mye du har spart til nå, og forfallsdato er når utfordringen skal være fullført.'
+        )
         messages.push('Du kan selvsagt endre på dette senere!')
         messages.push('Lykke til med utfordringen din! 🎉')
     } else {

src/components/HelpComponent.vue

@@ -2,39 +2,38 @@
     <div class="fixed bottom-5 left-5">
         <div @click="isModalOpen = true" class="hover:cursor-pointer">
             <img
-                 alt="Hjelp"
-                 class="w-1/12 transition-transform duration-300 ease-in-out hover:scale-110"
-                 src="@/assets/hjelp.png"
+                alt="Hjelp"
+                class="w-1/12 transition-transform duration-300 ease-in-out hover:scale-110"
+                src="@/assets/hjelp.png"
             />
         </div>
     </div>
-  <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
-    <InteractiveSpare
-        :speech="speech"
-        :png-size="15"
-        direction="right"
-        @emit:close="isModalOpen = false"
-    />
+    <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
+        <InteractiveSpare
+            :speech="speech"
+            :png-size="15"
+            direction="right"
+            @emit:close="isModalOpen = false"
+        />
 
-    <div class="-mb-5 mt-8 text-xs text-gray-500">
-      <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
-      <a
-          @click="isModalOpen = false"
-          class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
-      >
-        Skip
-      </a>
-    </div>
-  </ModalComponent>
+        <div class="-mb-5 mt-8 text-xs text-gray-500">
+            <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
+            <a
+                @click="isModalOpen = false"
+                class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
+            >
+                Skip
+            </a>
+        </div>
+    </ModalComponent>
 </template>
 
 <script setup lang="ts">
 import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import { ref } from 'vue'
-import ModalComponent from "@/components/ModalComponent.vue";
+import ModalComponent from '@/components/ModalComponent.vue'
 
 const isModalOpen = ref(false)
 
 defineProps(['speech'])
-
 </script>

src/components/InteractiveSpare.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, defineProps, ref} from 'vue'
+import { computed, defineProps, ref } from 'vue'
 import spareImageSrc from '@/assets/spare.png'
 
 interface Props {
@@ -62,7 +62,6 @@ const imageClass = computed(() => {
 const bubbleDirection = computed(() => {
     return props.direction === 'right' ? 'btm-left-in' : 'btm-right-in'
 })
-
 </script>
 <style scoped>
 /* CSS talk bubble */

src/components/ModalComponent.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted} from "vue";
+import { onMounted } from 'vue'
 
 defineProps({
     title: String,

src/components/SpareComponent.vue

@@ -19,22 +19,22 @@
 
         <!-- InteractiveSpare modal component -->
         <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
-          <InteractiveSpare
-              :speech="speech"
-              :png-size="pngSize"
-              :direction="direction"
-              @emit:close="isModalOpen = false"
-          />
+            <InteractiveSpare
+                :speech="speech"
+                :png-size="pngSize"
+                :direction="direction"
+                @emit:close="isModalOpen = false"
+            />
 
-          <div class="-mb-5 mt-8 text-xs text-gray-500">
-            <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
-            <a
-                @click="isModalOpen = false"
-                class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
-            >
-              Skip
-            </a>
-          </div>
+            <div class="-mb-5 mt-8 text-xs text-gray-500">
+                <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
+                <a
+                    @click="isModalOpen = false"
+                    class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
+                >
+                    Skip
+                </a>
+            </div>
         </ModalComponent>
     </div>
 </template>
@@ -42,7 +42,7 @@
 <script setup lang="ts">
 import InteractiveSpare from '@/components/InteractiveSpare.vue'
 import { defineProps, ref, watchEffect } from 'vue'
-import ModalComponent from "@/components/ModalComponent.vue";
+import ModalComponent from '@/components/ModalComponent.vue'
 
 const isModalOpen = ref(false)
 
@@ -57,7 +57,7 @@ const props = defineProps({
         required: false
     }
 })
-watchEffect(() => { isModalOpen.value = props.show
+watchEffect(() => {
+    isModalOpen.value = props.show
 })
-
-</script>
+</script>
\ No newline at end of file

src/views/ConfigAccountNumberView.vue

@@ -5,6 +5,20 @@
         <h1 class="mb-8 lg:mb-12 text-4xl font-bold">
             Legg til kontonummer for sparekonto og brukskonto
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her skriver du inn kontonummer for sparekonto og brukskonto. 🪩',
+                    'Sparekonto er kontoen du vil legge alle dine oppsparte penger på!',
+                    'Brukskonto er kontoen du ønsker at pangene skal gå ut fra',
+                    'Du kan endre dette senere hvis du ønsker det!'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div
             class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
         >
@@ -50,6 +64,7 @@ import { computed, ref } from 'vue'
 import { useAccountStore } from '@/stores/accountStore'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const MAX_DIGITS = 11
 const accountStore = useAccountStore()

src/views/ConfigFamiliarWithSavingsView.vue

@@ -3,6 +3,17 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor kjent er du med sparing fra før?
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du fylle inn hvor kjent du er med sparing fra før, slik at vi kan hjelpe deg på best mulig måte! 💡'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
             <div
                 :class="{
@@ -51,6 +62,7 @@ import { ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const selectedOption = ref<string | null>(null)
 const userConfigStore = useUserConfigStore()

src/views/ConfigHabitChangeView.vue

@@ -3,6 +3,17 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor store vaneedringer er du villig til å gjøre?
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du velge hvor mye innsats du er villig til å legge inn for å endre vanene dine! 📚'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
             <div
                 :class="{
@@ -51,6 +62,7 @@ import { ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const selectedOption = ref<string | null>(null)
 const userConfigStore = useUserConfigStore()

src/views/ConfigSpendingItemsAmountView.vue

@@ -3,6 +3,18 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor mye bruker du per kjøp på ...
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du skrive inn hvor mye penger du bruker per kjøp på ulike ting. 🍔',
+                    'For eksempel koster en kopp kaffe ☕️ kanskje 30 kr, mens en kinobillett 🎟️ koster 100 kr.'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="w-full flex justify-center">
             <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
@@ -79,6 +91,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 

src/views/ConfigSpendingItemsTotalAmountView.vue

@@ -3,6 +3,18 @@
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
             Hvor mye bruker du per uke på ...
         </h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her skal du skrive inn hvor mye du bruker per uke på ulike kategorier. 🗓️',
+                    'Hvis du kjøper kaffe hver dag, kan du skrive inn hvor mye du bruker på kaffe per uke.'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="w-full flex justify-center">
             <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
@@ -79,6 +91,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 

src/views/ConfigSpendingItemsView.vue

 <template>
     <div class="flex flex-col items-center justify-center min-h-screen text-center">
         <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">Hva bruker du mye penger på?</h1>
+        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
+            <SpareComponent
+                :speech="[
+                    'Her kan du velge hva du bruker mye penger på, slik at vi kan hjelpe deg med å spare penger! 💸',
+                    'Hvis du ikke finner noe som passer, kan du skrive inn egne kategorier i \'Annet ...\' feltet',
+                    'Du må minst velge en kategori!'
+                ]"
+                :png-size="10"
+                :direction="'right'"
+                :imageDirection="'right'"
+            ></SpareComponent>
+            <p class="text-xs absolute left-0 md:ml-3 ml-1 mt-2">Trykk på meg for hjelp ❗️</p>
+        </div>
         <div class="flex flex-wrap justify-center gap-8 mb-8">
             <div
                 class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
@@ -68,6 +81,7 @@ import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
+import SpareComponent from '@/components/SpareComponent.vue'
 
 const userConfigStore = useUserConfigStore()
 const selectedOptions = ref<string[]>([])

src/views/EditProfileView.vue

@@ -251,4 +251,4 @@ const saveChanges = async () => {
             </div>
         </div>
     </div>
-</template>
+</template>
\ No newline at end of file

src/views/HomeView.vue

@@ -9,7 +9,9 @@
                 :imageDirection="'right'"
                 class="mt-24"
             ></SpareComponent>
-            <div class="flex flex-row gap-2 items-center mx-auto mt-4 mb-20 md:flex-col md:gap-4 md:m-8">
+            <div
+                class="flex flex-row gap-2 items-center mx-auto mt-4 mb-20 md:flex-col md:gap-4 md:m-8"
+            >
                 <ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" />
                 <ButtonAddGoalOrChallenge
                     :buttonText="'Legg til spareutfordring'"
@@ -62,4 +64,4 @@ const firstLoggedInSpeech = () => {
         router.replace({ name: 'home', query: { firstLogin: 'false' } })
     }
 }
-</script>
+</script>
\ No newline at end of file

src/views/UserGoalsView.vue

@@ -96,4 +96,4 @@ const changeOrder = async () => {
             :total-pages="totalPages"
         />
     </div>
-</template>
+</template>
\ No newline at end of file