fix: solved reactivity problem in currencyFormat provide (#725)

Author: jonathanMM97

src/App.vue

@@ -127,7 +127,7 @@ const isTeleportViewMode = computed(() =>
 )
 
 const currencyFormat = computed(() => currencies[snippetConfig.currency!])
-provide<string>('currencyFormat', currencyFormat.value)
+provide('currencyFormat', currencyFormat)
 
 const queriesPreviewInfo = computed(() => snippetConfig.queriesPreview ?? [])
 provide<ComputedRef<QueryPreviewInfo[]> | undefined>('queriesPreviewInfo', queriesPreviewInfo)

src/components/results/result.vue

@@ -56,9 +56,14 @@
         <span class="x-text2 x-text-lead-50">{{ result.brand }}</span>
       </template>
       <div class="x-flex x-flex-wrap x-gap-8">
-        <BaseResultCurrentPrice :result="result" class="x-text2 x-text2-lg x-font-bold" />
+        <BaseResultCurrentPrice
+          :result="result"
+          :format="currencyFormat"
+          class="x-text2 x-text2-lg x-font-bold"
+        />
         <BaseResultPreviousPrice
           :result="result"
+          :format="currencyFormat"
           class="x-text2 x-leading-[1.7] x-text-neutral-75 x-line-through"
         />
       </div>
@@ -70,6 +75,7 @@
 <script setup lang="ts">
 import type { SnippetConfig } from '@empathyco/x-components'
 import type { Result } from '@empathyco/x-types'
+import type { ComputedRef } from 'vue'
 import {
   BaseEventButton,
   BaseFallbackImage,
@@ -97,6 +103,8 @@ const props = withDefaults(defineProps<Props>(), {
   showAddToCart: true,
 })
 
+const currencyFormat = inject<ComputedRef<string>>('currencyFormat')!
+
 const events = { UserClickedResultWithVariants: props.result }
 const onWishlistClickEvents = { UserClickedResultWishlist: props.result }