add the MobytStatus component

components/Layout/MobytStatus.vue

@@ -0,0 +1,45 @@
+<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>

pages/subscription.vue

@@ -41,26 +41,7 @@ Page 'Mon abonnement'
                 {{ $d(line.dateEnd) }}
               </v-col>
 
-              <v-col v-if="ability.can('display', 'subscription_page_sms_section')" 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>
+              <LayoutMobytStatus v-if="ability.can('display', 'subscription_page_sms_section')" />
             </v-row>
           </v-container>
         </UiExpansionPanel>
@@ -488,12 +469,12 @@ import type { AsyncData } from '#app'
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
 import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import DolibarrAccount from '~/models/Organization/DolibarrAccount'
-import MobytUserStatus from '~/models/Organization/MobytUserStatus'
 import UrlUtils from '~/services/utils/urlUtils'
 import { useDownloadFromRoute } from '~/composables/utils/useDownloadFromRoute'
 import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'
 import { usePageStore } from '~/stores/page'
 import { DOLIBARR_BILLING_DOC_TYPE } from '~/types/enum/enums'
+import LayoutMobytStatus from '~/components/Layout/MobytStatus.vue'
 
 // meta
 definePageMeta({
@@ -514,7 +495,6 @@ const showDialogTrialStopConfirmation: Ref<boolean> = ref(false)
 const openedPanels: Ref<Array<string>> = initPanel()
 const organizationProfile = getOrganizationProfile()
 const accessProfileStore = useAccessProfileStore()
-const { mobytStatus, mobytPending } = getMobytInformations()
 
 const { data: dolibarrAccount, pending: dolibarrPending } = fetch(
   DolibarrAccount,
@@ -601,27 +581,6 @@ function getOrganizationProfile() {
   return organizationProfile
 }
 
-/**
- * Récupération des informations Mobyt
- */
-function getMobytInformations(): {
-  mobytStatus: Ref<MobytUserStatus | null>
-  mobytPending: Ref<boolean>
-} {
-  const mobytStatus: Ref<MobytUserStatus | null> = ref(null)
-  const mobytPending: Ref<boolean> = ref(false)
-
-  if (ability.can('display', 'subscription_page_sms_section')) {
-    const { data, pending } = fetch(
-      MobytUserStatus,
-      organizationProfile!.id!,
-    ) as AsyncData<MobytUserStatus | null, Error | null>
-    mobytStatus.value = data
-    mobytPending.value = pending
-  }
-
-  return { mobytStatus, mobytPending }
-}
 
 /**
  * Action lorsque l'on souhaite démarrer l'essai