app_vue2/components/Ui/Template/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.active">
    {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
    {{ $t('convert_price_to_sms', { nb_sms: mobytStatus.amount }) }}
  </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 (_, {emit}) {
    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
        if(!mobytStatus.value?.active) emit('disabled_sms_row')
      } catch (Error) {
        // eslint-disable-next-line no-console
        console.error('Error: Mobyt status not found')
      }
    })

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