app_vue2/components/Ui/Display/MobytStatus.vue

<!--
Texte descriptif du statut Mobyt de la structure

@see https://vuetifyjs.com/en/components/text-fields/
-->

<template>
  <span v-if="mobytStatus && !mobytStatusFetch.pending">
    {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
    ({{ mobytStatus.amount }} SMS)
  </span>
</template>

<script lang="ts">

import { defineComponent, ref, Ref, useContext, useFetch } from '@nuxtjs/composition-api'
import { ApiResponse, MobytUserStatus } from '~/types/interfaces'
import { QUERY_TYPE } from '~/types/enums'

export default defineComponent({
  setup () {
    const { store, $dataProvider } = useContext()
    const id: number = store.state.profile.organization.id
    const mobytStatus: Ref<MobytUserStatus | null> = ref(null)

    // fetch the mobyt status
    const { fetchState } = useFetch(async () => {
      try {
        const response:ApiResponse = await $dataProvider.invoke({
          type: QUERY_TYPE.DEFAULT,
          url: '/api/mobyt/status/' + id
        })
        mobytStatus.value = response.data as MobytUserStatus
      } catch (Error) {
        // eslint-disable-next-line no-console
        console.error('Error: Mobyt status not found')
      }
    })

    return {
      mobytStatus,
      mobytStatusFetch: fetchState
    }
  }
})
</script>