app/components/Layout/MobytStatus.vue

<template>
  <v-col cols="12" lg="12">
    <strong>{{ $t('remaining_sms_credit') }}</strong> -
    <span
      v-if="
        mobytPendingStatus == FETCHING_STATUS.SUCCESS &&
        mobytStatus !== null &&
        mobytStatus.active
      "
    >
      {{
        mobytStatus.money.toLocaleString($i18n.locale, {
          style: 'currency',
          currency: 'EUR',
        })
      }}
      {{
        i18n.t('convert_price_to_sms', {
          nb_sms: mobytStatus.amount,
        })
      }}
    </span>
  </v-col>
</template>

<script setup lang="ts">
import type { AsyncData } from '#app'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import MobytUserStatus from '~/models/Organization/MobytUserStatus'
import { FETCHING_STATUS } from '~/types/enum/data'

const { fetch } = useEntityFetch()
const i18n = useI18n()
const organizationProfile = useOrganizationProfileStore()

const { data: mobytStatus, status: mobytPendingStatus } = fetch(
  MobytUserStatus,
  organizationProfile.id,
) as AsyncData<MobytUserStatus | null, Error | null>
</script>

<style scoped lang="scss"></style>