fix hydratation mismatches

components/Layout/Header.vue

@@ -46,7 +46,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
     <LayoutHeaderMenu name="Account" color="on-primary" icon="fas fa-sun" />
 
     <a
-      :href="runtimeConfig.supportUrl"
+      :href="runtimeConfig.supportUrl || runtimeConfig.public.supportUrl"
       class="text-body px-3 py-4 ml-2 theme-secondary text-decoration-none h-100"
       target="_blank"
     >

components/Layout/MainMenu.vue

@@ -8,21 +8,13 @@ Prend en paramètre une liste de ItemMenu et les met en forme
     v-model="displayMenu"
     :rail="isRail"
     :disable-resize-watcher="true"
+    style="z-index: 1006;"
     class="theme-secondary main-menu"
   >
-    <div
-      v-if="(organizationProfile.isArtistProduct || organizationProfile.isTrialActive) && (accessProfile.isCaMember || accessProfile.isAdmin)"
-      class="btn_trial"
-      :class="{['btn_mini'] : isRail}"
-      @click="trialAction()"
-    >
-      <v-icon icon="fa fa-ticket" />
-      <span v-if="organizationProfile.isTrialActive && !isRail"><strong>J-{{organizationProfile.trialCountDown}}</strong><br/></span>
-      <span v-if="!isRail">{{btnLabel}}</span>
-    </div>
+  <!-- Forcing z-index to avoid this : https://github.com/vuetifyjs/nuxt-module/issues/205 -->
 
     <template #prepend>
-      <slot name="title"></slot>
+      <slot name="prepend"></slot>
     </template>
 
     <v-list open-strategy="single" active-class="active" class="left-menu">
@@ -31,6 +23,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
         <!-- Cas 1 : l'item n'a pas d'enfants, c'est un lien (ou le menu est en mode réduit) -->
         <v-list-item
           v-if="!item.children || isRail"
+          :id="'main-menu-item' + item.label"
           :title="$t(item.label)"
           :prepend-icon="item.icon.name"
           :href="!isInternalLink(item) ? item.to : undefined"
@@ -50,6 +43,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
           <template #activator="{ props }">
             <v-list-item
               v-bind="props"
+              :id="'main-menu-item' + item.label"
               :prepend-icon="item.icon.name"
               :title="$t(item.label)"
               class="theme-secondary menu-item"
@@ -59,8 +53,9 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 
           <v-list-item
             v-for="child in item.children"
-            :key="$t(child.label)"
+            :key="child.label"
             :title="$t(child.label)"
+            :id="'main-menu-item' + item.label + '-' + child.label"
             :prepend-icon="child.icon.name"
             :href="!isInternalLink(child) ? child.to : undefined"
             :to="isInternalLink(child) ? child.to : undefined"
@@ -76,11 +71,6 @@ Prend en paramètre une liste de ItemMenu et les met en forme
       <slot name="foot"></slot>
     </template>
   </v-navigation-drawer>
-
-  <DialogTrialAllReadyDid
-    :show="showDialog"
-    @closeDialog = "showDialog = false"
-  />
 </template>
 
 <script setup lang="ts">
@@ -88,19 +78,15 @@ import { useMenu } from '~/composables/layout/useMenu'
 import { computed } from '@vue/reactivity'
 import { useDisplay } from 'vuetify'
 import type { MenuGroup, MenuItem } from '~/types/layout'
-import UrlUtils from "~/services/utils/urlUtils";
 import {useApiLegacyRequestService} from "~/composables/data/useApiLegacyRequestService";
 
-const runtimeConfig = useRuntimeConfig()
 const i18n = useI18n()
 const organizationProfile = useOrganizationProfileStore()
-const accessProfile = useAccessProfileStore()
 const { getMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } = useMenu()
-const { apiRequestService } = useApiLegacyRequestService()
+
 
 const { mdAndUp, lgAndUp } = useDisplay()
 
-const showDialog: Ref<boolean> = ref(false)
 const menu = getMenu('Main')
 
 // En vue lg+, on affiche toujours le menu
@@ -123,13 +109,6 @@ const isRail = computed(() => {
   )
 })
 
-const btnLabel = computed(() => {
-  if(organizationProfile.isTrialActive){
-    return i18n.t('trial_started')
-  }
-  return organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY' ? i18n.t('try_premium') : i18n.t('discover_offer')
-})
-
 const unwatch = watch(lgAndUp, (newValue, oldValue) => {
   // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
   if (process.client && menu !== null) {
@@ -141,30 +120,6 @@ onUnmounted(() => {
   unwatch()
 })
 
-/**
- * Lorsque l'on appuie sur le bouton pour démarrer l'essai / découvrir les offres
- */
-const trialAction = async () => {
-  const v1BaseURL = runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
-
-  if(organizationProfile.isTrialActive){
-    await navigateTo(UrlUtils.join(v1BaseURL, '#', 'subscribe'), {
-      external: true
-    })
-  }else if(organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY'){
-    try{
-      await apiRequestService.get('/trial/is_available')
-      await navigateTo(UrlUtils.join(v1BaseURL, '#', 'trial'), {
-        external: true
-      })
-    }catch(error){
-      showDialog.value = true
-    }
-  }else{
-    await navigateTo('/subscription')
-  }
-}
-
 /**
  * Récupère les menuItem disponibles
  * @param menu
@@ -179,6 +134,7 @@ function getItems(menu: MenuGroup|MenuItem|null) : Array<MenuGroup | MenuItem>{
   } else {
     items = [menu]
   }
+
   return items;
 }
 </script>
@@ -247,35 +203,4 @@ function getItems(menu: MenuGroup|MenuItem|null) : Array<MenuGroup | MenuItem>{
 :deep(.menu-item .fa) {
   text-align: center;
 }
-
-.btn_trial {
-  background-color: rgb(var(--v-theme-x-create-btn));
-  border-radius: 5px;
-  border: 1px solid #fff;
-  margin-left: 15px;
-  margin-right: 15px;
-  text-align: center;
-  color:#000;
-  margin-top: 5px;
-  padding: 5px 10px;
-  cursor: pointer;
-  white-space: pre-line;
-
-  .v-icon {
-    font-size: 15px;
-    color:#000;
-    padding-right: 5px;
-  }
-}
-
-.btn_mini {
-  font-size: 17px;
-  margin-left: 7px;
-  margin-right: 7px;
-  padding: 0;
-
-  .v-icon {
-    padding-right: 0;
-  }
-}
 </style>

components/Layout/Subheader.vue

@@ -93,7 +93,7 @@ const showDateTimeRange: Ref<boolean> = ref(
 
 <style scoped lang="scss">
 main {
-  font-size: 12px;
+  font-size: 13px;
 }
 
 #subheader {

components/Layout/UpgradePremiumButton.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-if="show">
+    <div
+      class="btn_trial"
+      :class="{['btn_mini'] : minimized}"
+      @click="trialAction()"
+    >
+      <v-icon icon="fa fa-ticket" />
+
+      <span v-if="organizationProfile.isTrialActive && !minimized">
+        <strong>J-{{organizationProfile.trialCountDown}}</strong>
+        <br/>
+      </span>
+
+      <span v-if="!minimized">{{ btnLabel }}</span>
+    </div>
+
+    <LayoutDialogTrialAlreadyDid
+      :show="showDialog"
+      @closeDialog = "showDialog = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UrlUtils from "~/services/utils/urlUtils";
+import {useApiLegacyRequestService} from '~/composables/data/useApiLegacyRequestService';
+import {computed} from '@vue/reactivity';
+
+const runtimeConfig = useRuntimeConfig()
+const accessProfile = useAccessProfileStore()
+const organizationProfile = useOrganizationProfileStore()
+const { apiRequestService } = useApiLegacyRequestService()
+const i18n = useI18n()
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  minimized: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+const showDialog: Ref<boolean> = ref(false)
+
+const btnLabel = computed(() => {
+  if(organizationProfile.isTrialActive){
+    return i18n.t('trial_started')
+  }
+  return organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY' ? i18n.t('try_premium') : i18n.t('discover_offer')
+})
+
+/**
+ * Lorsque l'on appuie sur le bouton pour démarrer l'essai / découvrir les offres
+ */
+const trialAction = async () => {
+  const v1BaseURL = runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
+
+  if(organizationProfile.isTrialActive){
+    await navigateTo(UrlUtils.join(v1BaseURL, '#', 'subscribe'), {
+      external: true
+    })
+  }else if(organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY'){
+    try{
+      await apiRequestService.get('/trial/is_available')
+      await navigateTo(UrlUtils.join(v1BaseURL, '#', 'trial'), {
+        external: true
+      })
+    }catch(error){
+      showDialog.value = true
+    }
+  }else{
+    await navigateTo('/subscription')
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.btn_trial {
+  background-color: rgb(var(--v-theme-x-create-btn));
+  border-radius: 5px;
+  border: 1px solid #fff;
+  margin-left: 15px;
+  margin-right: 15px;
+  text-align: center;
+  color:#000;
+  margin-top: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  white-space: pre-line;
+  font-size: 13px;
+
+  .v-icon {
+    font-size: 16px;
+    color:#000;
+    padding-right: 5px;
+    margin: 0 5px 4px 0;
+  }
+}
+
+.btn_mini {
+  font-size: 17px;
+  margin-left: 7px;
+  margin-right: 7px;
+  padding: 0;
+
+  .v-icon {
+    padding-right: 0;
+    margin: 0 0 3px 0;
+  }
+}
+</style>

components/Ui/ExpansionPanel.vue

@@ -5,9 +5,9 @@ Panneaux déroulants de type "accordéon"
 -->
 
 <template>
-  <v-expansion-panel :value="title">
+  <v-expansion-panel>
     <v-expansion-panel-title color="neutral">
-      <template v-slot:default="{ expanded }">
+      <template #default>
         <v-icon class="theme-primary icon">
           {{ icon }}
         </v-icon>
@@ -22,7 +22,7 @@ Panneaux déroulants de type "accordéon"
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   title: {
     type: String,
     required: true,

components/Ui/SystemBar.vue

@@ -8,8 +8,10 @@ System bars
     :class="
       'd-flex flex-row justify-center align-center text-center ' + classes
     "
+    style="z-index: 1006;"
     @click="onClick !== undefined ? onClick() : null"
   >
+  <!-- Forcing z-index to avoid this : https://github.com/vuetifyjs/nuxt-module/issues/205 -->
     <slot>
       <v-icon v-if="icon" small :icon="icon" />
       {{ text }}

layouts/default.vue

@@ -8,7 +8,13 @@
 
       <LayoutHeader />
 
-      <LayoutMainMenu />
+      <LayoutMainMenu>
+        <template #prepend>
+          <LayoutUpgradePremiumButton
+            :show="showUpgradePremiumButton"
+          />
+        </template>
+      </LayoutMainMenu>
 
       <v-main class="main">
         <LayoutSubheader />
@@ -29,4 +35,12 @@ import { useLayoutStore } from '~/stores/layout'
 
 const layoutStore = useLayoutStore()
 layoutStore.name = 'default'
+
+const accessProfile = useAccessProfileStore()
+const organizationProfile = useOrganizationProfileStore()
+
+const showUpgradePremiumButton: ComputedRef<boolean> = computed(() =>
+  ((organizationProfile.isArtistProduct || organizationProfile.isTrialActive) && (accessProfile.isCaMember || accessProfile.isAdmin)) ?? false
+)
+
 </script>

pages/subscription.vue

@@ -285,7 +285,7 @@ Page 'Mon abonnement'
 
   </LayoutContainer>
 
-  <LayoutDialogTrialAllReadyDid
+  <LayoutDialogTrialAlreadyDid
     :show="showDialogTrialAllReadyDid"
     @closeDialog = "showDialogTrialAllReadyDid = false"
   />
@@ -392,7 +392,7 @@ function initPanel(): Ref<Array<string>> {
   // TODO: quand le bug ci dessus est résolu, remplacer par `const openedPanels: Ref<Array<string>> = ref(['informations', 'bills', 'more_features'])`
   const openedPanels: Ref<Array<string>> = ref([])
   onMounted(() => {
-    openedPanels.value = [i18n.t('subscription_page'), i18n.t('opentalent_offer'), i18n.t('opentalent_options')]
+    openedPanels.value = [i18n.t('subscription_page'), i18n.t('opentalent_offers'), i18n.t('opentalent_options')]
   })
   return openedPanels
 }