app/components/Layout/MobytStatus.vue

<template>
  <v-col cols="12" lg="12">
    <strong>{{ $t('remaining_sms_credit') }}</strong> -
    <span v-if="!mobytPending && 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 { Ref } from 'vue'
import type { AsyncData } from '#app'
import { useAbility } from '@casl/vue'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import MobytUserStatus from '~/models/Organization/MobytUserStatus'

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

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

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