move mobytStatus display in a dedicated component

components/Ui/Display/MobytStatus.vue

@@ -0,0 +1,47 @@
+<!--
+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
+        })
+        console.log(response)
+        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>

pages/subscription.vue

@@ -36,11 +36,10 @@ Page 'Mon abonnement'
                       </div>
                     </td>
                   </tr>
-                  <tr v-if="mobytStatus && mobytStatus.active">
+                  <tr>
                     <td>{{ $t('remaining_sms_credit') }}</td>
                     <td>
-                      {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
-                      ({{ mobytStatus.amount }} SMS)
+                      <UiDisplayMobytStatus />
                     </td>
                   </tr>
                   <tr v-if="organizationProfile.isCmf && organizationProfile.isArtistProduct">
@@ -138,7 +137,7 @@ Page 'Mon abonnement'
                         <!-- Cmf member -->
                         <div v-if="organizationProfile.isCmf">
                           <p>
-                            {{ $t('for_only_x_eur_ttc_by_month', { price: '6,33' }) }} *
+                            {{ $t('for_only_x_eur_ttc_by_month', { price: '6.33' }) }} *
                           </p>
                           <p>
                             <i>
@@ -186,19 +185,19 @@ Page 'Mon abonnement'
 
                         <!-- Cmf member -->
                         <div v-if="organizationProfile.isCmf">
-                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '16,45' }) }} *</p>
+                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '16.45' }) }} *</p>
                           <p>
                             <i>
                               * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '198' }) }}
                               {{ $t('version_x_up_to_x_students', { product: 'Opentalent School Standard', max_students: '69' }) }}
                               {{ $t('excluding_license_and_training_fees') }}.
-                              {{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: '358,80' }) }})
+                              {{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: '358.80' }) }})
                             </i>
                           </p>
                         </div>
                         <!-- Not a cmf member -->
                         <div v-else>
-                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '29,90' }) }} *</p>
+                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: '29.90' }) }} *</p>
                           <p>
                             <i>
                               * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: '358' }) }}
@@ -277,7 +276,7 @@ Page 'Mon abonnement'
 
                         <!-- Cmf member -->
                         <div v-if="organizationProfile.isCmf">
-                          <p>{{ $t('starting_from_x_eur_ttc_per_sms', { price: '0,10' }) }} *</p>
+                          <p>{{ $t('starting_from_x_eur_ttc_per_sms', { price: '0.10' }) }} *</p>
                           <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
 
                           <p>
@@ -288,7 +287,7 @@ Page 'Mon abonnement'
                         </div>
                         <!-- Not cmf member -->
                         <div v-else>
-                          <p>{{ $t('starting_from_x_eur_ttc_per_sms', { price: '0,12' }) }} *</p>
+                          <p>{{ $t('starting_from_x_eur_ttc_per_sms', { price: '0.12' }) }} *</p>
                           <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
 
                           <p>
@@ -339,8 +338,7 @@ Page 'Mon abonnement'
 import { defineComponent, useFetch, useContext, ref, Ref } from '@nuxtjs/composition-api'
 import { $organizationProfile } from '~/services/profile/organizationProfile'
 import { QUERY_TYPE } from '~/types/enums'
-import { ApiResponse, DolibarrAccount, MobytUserStatus } from '~/types/interfaces'
-import '@/lang/content/subscription/fr-FR'
+import { ApiResponse, DolibarrAccount } from '~/types/interfaces'
 
 export default defineComponent({
   name: 'Subscription',
@@ -349,12 +347,11 @@ export default defineComponent({
     const organizationProfile = $organizationProfile(store)
     const id: number = store.state.profile.organization.id
     const dolibarrAccount: Ref<DolibarrAccount | null> = ref(null)
-    const mobytStatus: Ref<MobytUserStatus | null> = ref(null)
 
     // fetch the dolibarr account's data
     const { fetchState } = useFetch(async () => {
       try {
-        const response:ApiResponse = await $dataProvider.invoke({
+        const response: ApiResponse = await $dataProvider.invoke({
           type: QUERY_TYPE.DEFAULT,
           url: '/api/dolibarr/account/' + id
         })
@@ -365,24 +362,9 @@ export default defineComponent({
       }
     })
 
-    // fetch the mobyt status
-    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 {
       organizationProfile,
       dolibarrAccount,
-      mobytStatus,
       dolibarrAccountFetch: fetchState
     }
   }