add mobyt status fetching and typing

lang/layout/fr-FR.js

@@ -118,7 +118,9 @@ export default (context, locale) => {
     taxExcludedAmount: 'Montant H.T.',
     taxIncludedAmount: 'Montant TTC',
     status: 'Statut',
+    remaining_sms_credit: 'Crédit SMS restant',
     paying_structure: 'Établissement payeur',
+    no_bill_to_display: 'Aucune facture à afficher',
     my_account: 'Mon compte',
     my_schedule_page: 'Mon planning',
     attendance_bookings_menu: 'Gestion des absences & fiches de présence',

pages/subscription.vue

@@ -34,7 +34,14 @@ Page 'Mon abonnement'
                       </div>
                     </td>
                   </tr>
-                  <tr v-if="organizationProfile.isCmf() && organizationProfile.isArtistProduct()">
+                  <tr v-if="mobytStatus && mobytStatus.active">
+                    <td>{{ $t('remaining_sms_credit') }}</td>
+                    <td>
+                      {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
+                      ({{ mobytStatus.amount }} SMS)
+                    </td>
+                  </tr>
+                  <tr v-if="organizationProfile.isCmf && organizationProfile.isArtistProduct">
                     <td>{{ $t('paying_structure') }}</td>
                     <td>
                       CMF
@@ -49,7 +56,7 @@ Page 'Mon abonnement'
         <UiExpansionPanel id="bills" icon="fa-file">
           <v-container fluid class="container">
             <v-row>
-              <v-simple-table>
+              <v-simple-table v-if="dolibarrAccount.bills.length > 0">
                 <thead>
                   <tr>
                     <th>{{ $t('reference') }}</th>
@@ -70,6 +77,9 @@ Page 'Mon abonnement'
                   </tr>
                 </tbody>
               </v-simple-table>
+              <div v-else class="ma-2">
+                <i>{{ $t('no_bill_to_display') }}</i>
+              </div>
             </v-row>
           </v-container>
         </UiExpansionPanel>
@@ -81,13 +91,13 @@ Page 'Mon abonnement'
                 <template #default>
                   <thead>
                     <tr>
-                      <th v-if="organizationProfile.isArtistProduct()">
+                      <th v-if="organizationProfile.isArtistProduct">
                         Opentalent Artist Premium
                       </th>
-                      <th v-if="organizationProfile.isArtist()">
+                      <th v-if="organizationProfile.isArtist">
                         Opentalent School
                       </th>
-                      <th v-if="organizationProfile.isSchoolProduct()">
+                      <th v-if="organizationProfile.isSchoolProduct">
                         Opentalent School Premium
                       </th>
                       <th>
@@ -99,14 +109,14 @@ Page 'Mon abonnement'
                     </tr>
                   </thead>
                   <tbody>
-                    <tr>
-                      <td v-if="organizationProfile.isArtistProduct()">
+                    <tr class="center-td-content">
+                      <td v-if="organizationProfile.isArtistProduct">
                         <nuxt-img src="/images/Artist-Square.jpg" />
                       </td>
-                      <td v-if="organizationProfile.isArtist()">
+                      <td v-if="organizationProfile.isArtist">
                         <nuxt-img src="/images/School-Square.jpg" />
                       </td>
-                      <td v-if="organizationProfile.isSchoolProduct()">
+                      <td v-if="organizationProfile.isSchoolProduct">
                         <nuxt-img src="/images/School-Square.jpg" />
                       </td>
                       <td>
@@ -118,7 +128,7 @@ Page 'Mon abonnement'
                     </tr>
                     <tr>
                       <!-- Opentalent Artist Premium -->
-                      <td v-if="organizationProfile.isArtistProduct()">
+                      <td v-if="organizationProfile.isArtistProduct">
                         <p>
                           Bénéficiez de plus de fonctionnalités avec la version
                           <b>Opentalent Artist Premium</b>
@@ -168,7 +178,7 @@ Page 'Mon abonnement'
                       </td>
 
                       <!-- Opentalent School -->
-                      <td v-if="organizationProfile.isArtist()">
+                      <td v-if="organizationProfile.isArtist">
                         <p>
                           Une solution économique adaptée à votre établissement d'enseignement
                           artistique
@@ -215,7 +225,7 @@ Page 'Mon abonnement'
                       </td>
 
                       <!-- Opentalent School Premium -->
-                      <td v-if="organizationProfile.isSchoolProduct()">
+                      <td v-if="organizationProfile.isSchoolProduct">
                         <p>
                           Passez à la version <b>Opentalent School Premium</b> et bénéficiez:
                         </p>
@@ -295,15 +305,20 @@ Page 'Mon abonnement'
                         </p>
 
                         <p>Exemple:</p>
-
                         <table>
                           <tr>
-                            <td>Nom de domaine</td>
-                            <td>ma-structure.fr</td>
+                            <td style="width: 200px;">
+                              Nom de domaine:
+                            </td>
+                            <td>
+                              <i>ma-structure.fr</i>
+                            </td>
                           </tr>
                           <tr>
-                            <td>Adresse email associée</td>
-                            <td>contact@NomDeMaStructure.fr</td>
+                            <td>Adresse email associée: </td>
+                            <td>
+                              <i>contact@NomDeMaStructure.fr</i>
+                            </td>
                           </tr>
                         </table>
                       </td>
@@ -320,27 +335,50 @@ Page 'Mon abonnement'
 </template>
 
 <script lang="ts">
-import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api'
+import { defineComponent, useFetch, useContext, ref, Ref } from '@nuxtjs/composition-api'
 import { $organizationProfile } from '~/services/profile/organizationProfile'
 import { QUERY_TYPE } from '~/types/enums'
+import { DolibarrAccount, MobytUserStatus } from '~/types/interfaces'
 
 export default defineComponent({
   name: 'Subscription',
   setup () {
     const { store, $dataProvider } = useContext()
     const organizationProfile = $organizationProfile(store)
-    // const id: number = store.state.profile.organization.id
-
-    const dolibarrAccount = useAsync(
-      () => $dataProvider.invoke({
-        type: QUERY_TYPE.DEFAULT,
-        url: 'dolibarr/account/498'
-      })
-    )
+    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
+    useFetch(async () => {
+      try {
+        dolibarrAccount.value = await $dataProvider.invoke({
+          type: QUERY_TYPE.DEFAULT,
+          url: 'dolibarr/account/' + id
+        })
+      } catch (Error) {
+        // eslint-disable-next-line no-console
+        console.error('Error: Dolibarr account not found')
+      }
+    })
+
+    // fetch the mobyt status
+    useFetch(async () => {
+      try {
+        mobytStatus.value = await $dataProvider.invoke({
+          type: QUERY_TYPE.DEFAULT,
+          url: 'mobyt/status/' + id
+        })
+      } catch (Error) {
+        // eslint-disable-next-line no-console
+        console.error('Error: Mobyt status not found')
+      }
+    })
 
     return {
       organizationProfile,
-      dolibarrAccount
+      dolibarrAccount,
+      mobytStatus
     }
   }
 })
@@ -357,7 +395,7 @@ export default defineComponent({
     max-width: 100%;
   }
 
-  #products-section tr:first-child td {
+  #products-section tr.center-td-content td {
     text-align: center;
   }
 

types/interfaces.d.ts

@@ -192,3 +192,44 @@ interface Denormalizer {
   denormalize(data: any): any,
 }
 
+interface DolibarrContractLine {
+  id: number,
+  contractId: number,
+  dateStart: Date,
+  dateEnd: Date,
+  serviceRef: string,
+  serviceLabel: string
+}
+
+interface DolibarrContract {
+  ref: string,
+  socId: number,
+  lines: Array<DolibarrContractLine>
+}
+
+interface DolibarrBill {
+  id: number,
+  ref: string,
+  socId: number,
+  date: Date,
+  taxExcludedAmount: number,
+  taxIncludedAmount: number,
+  paid: boolean
+}
+
+interface DolibarrAccount {
+  organizationId: number,
+  socId: number,
+  clientNumber: string,
+  product: 'PRODUCT_ARTIST' | 'PRODUCT_ARTIST_PREMIUM' | 'PRODUCT_SCHOOL' |
+           'PRODUCT_SCHOOL_PREMIUM' | 'PRODUCT_MANAGER',
+  contract: DolibarrContract,
+  bills: Array<DolibarrBill>
+}
+
+interface MobytUserStatus {
+  organizationId: number,
+  active: boolean,
+  amount: number,
+  money: number
+}