finalize subscription page

components/Ui/ExpansionPanel.vue

@@ -5,7 +5,7 @@ Panneaux déroulants de type "accordéon"
 -->
 
 <template>
-  <v-expansion-panel>
+  <v-expansion-panel :value="title">
     <v-expansion-panel-title color="ot-light-grey">
       <template v-slot:default="{ expanded }">
         <v-icon class="text-ot-white bg-ot-green icon">

nuxt.config.ts

@@ -83,6 +83,7 @@ export default defineNuxtConfig({
         '@pinia-orm/nuxt',
         'nuxt-lodash',
         '@nuxtjs/i18n',
+        '@nuxt/image-edge',
     ],
     typescript: {
         strict: true

package.json

@@ -53,7 +53,7 @@
     "@casl/vue": "^2.2.0",
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@mdi/font": "^7.0.96",
-    "@nuxt/image": "^0.7.1",
+    "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
     "@nuxtjs/i18n": "^8.0.0-beta.7",
     "@pinia-orm/nuxt": "^1.1.4",
     "@pinia/nuxt": "^0.4.3",

pages/subscription.vue

@@ -99,16 +99,16 @@ Page 'Mon abonnement'
                   <tbody>
                   <tr class="center-td-content">
                     <td v-if="organizationProfile.isArtistProduct">
-                      <v-img src="/images/Artist-Square.jpg" ratio="1/1" width="240" />
+                      <nuxt-img src="/images/Artist-Square.jpg" />
                     </td>
                     <td v-if="organizationProfile.isArtist">
-                      <v-img src="/images/School-Square.jpg" ratio="1/1" width="240" />
+                      <nuxt-img src="/images/School-Square.jpg" />
                     </td>
                     <td>
-                      <v-img src="/images/sms_big.png" ratio="1/1" width="240" />
+                      <nuxt-img src="/images/sms_big.png" />
                     </td>
                     <td>
-                      <v-img src="/images/nom-de-domaine.jpg" ratio="1/1" width="240" />
+                      <nuxt-img src="/images/nom-de-domaine.jpg" />
                     </td>
                   </tr>
                   <tr>
@@ -119,7 +119,7 @@ Page 'Mon abonnement'
                       </p>
 
                       <!-- Cmf member -->
-                      <div v-if="organizationProfile.isCmf()">
+                      <div v-if="organizationProfile.isCmf">
                         <p>
                           <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }} *</b>
                         </p>
@@ -145,7 +145,7 @@ Page 'Mon abonnement'
                         </a>
                       </p>
 
-                      <p v-if="organizationProfile.isCmf()" class="mt-3">
+                      <p v-if="organizationProfile.isCmf" class="mt-3">
                         <a href="/resources/BDC_Artist_Premium_CMF.pdf">
                           <b>{{ $t('download_cmf_order_form') }}</b>
                         </a>
@@ -236,7 +236,7 @@ Page 'Mon abonnement'
                       <table>
                         <tbody>
                         <tr>
-                          <td style="width: 150px;">
+                          <td style="width: 190px;">
                             {{ $t('domain_name') }} :
                           </td>
                           <td>
@@ -286,7 +286,10 @@ Page 'Mon abonnement'
   // })
 
   const showDolibarrPanel = computed(() => !dolibarrPending.value && dolibarrAccount.value && dolibarrAccount.value.bills.length > 0)
-  const openedPanels: Ref<Array<number>> = ref([0, 1, 2])
+  const openedPanels: Ref<Array<string>> = ref([])
+  onMounted(() => {
+    openedPanels.value = ['informations', 'bills', 'more_features']
+  })
 
   const i18n = useI18n()
   const organizationProfile = useOrganizationProfileStore()
@@ -300,12 +303,6 @@ Page 'Mon abonnement'
 
   const { data: mobytStatus, pending: mobytPending } = fetch(MobytUserStatus, organizationProfile.id)
 
-  onMounted(() => {
-    if (!showDolibarrPanel) {
-      openedPanels.value = [0, 1]
-    }
-  })
-
   const formatCurrency = (value: Number, currency: string): string => {
     return value.toLocaleString(i18n.locale.value, { style: 'currency', currency: currency })
   }
@@ -331,6 +328,14 @@ Page 'Mon abonnement'
   vertical-align: top;
 }
 
+#products-section p {
+  margin-bottom: 12px;
+}
+
+#products-section ul {
+  padding-left: 24px;
+}
+
 .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
   background:none;
 }