@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/DatePicker/composables/useMonthButtonCustomization.ts

@@ -0,0 +1,187 @@
+import { ref, nextTick, type Ref } from 'vue'
+
+/**
+ * Composable pour personnaliser les boutons du mois et de l'année dans les composants DatePicker
+ * @param isPickerVisibleGetter - Fonction qui retourne l'état de visibilité du DatePicker
+ * @param monthName - Référence au nom du mois à utiliser
+ * @param yearName - Référence au nom de l'année à utiliser
+ */
+export function useMonthButtonCustomization(
+	isPickerVisibleGetter: () => boolean,
+	monthName?: Ref<string | null>,
+	yearName?: Ref<string | null>,
+) {
+	const monthButtonText = ref('')
+	const yearText = ref('')
+
+	/**
+	 * Retourne un nom personnalisé pour le mois en fonction de sa valeur
+	 * @param monthName - Le nom du mois à personnaliser
+	 * @returns Le nom personnalisé du mois
+	 */
+	const getCustomMonthName = (monthName: string | null | undefined): string => {
+		if (!monthName) return ''
+
+		// Convertir en minuscules pour faciliter la comparaison
+		const lowerMonth = monthName.toLowerCase()
+
+		switch (lowerMonth) {
+			case 'january':
+			case 'janvier':
+				return 'Janv.'
+			case 'february':
+			case 'février':
+				return 'Févr.'
+			case 'march':
+			case 'mars':
+				return 'Mars'
+			case 'april':
+			case 'avril':
+				return 'Avr.'
+			case 'may':
+			case 'mai':
+				return 'Mai'
+			case 'june':
+			case 'juin':
+				return 'Juin'
+			case 'july':
+			case 'juillet':
+				return 'Juil.'
+			case 'august':
+			case 'août':
+				return 'Août'
+			case 'september':
+			case 'septembre':
+				return 'Sept.'
+			case 'october':
+			case 'octobre':
+				return 'Oct.'
+			case 'november':
+			case 'novembre':
+				return 'Nov.'
+			case 'december':
+			case 'décembre':
+				return 'Déc.'
+			default:
+				// Si le mois n'est pas reconnu, retourner le mois avec la première lettre en majuscule
+				return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+		}
+	}
+
+	/**
+	 * Récupère et modifie les boutons du mois et de l'année avec une icône SVG chevron-down
+	 */
+	const customizeMonthButton = () => {
+		if (isPickerVisibleGetter() || monthName?.value) {
+			nextTick(() => {
+				// Personnalisation des boutons du mois pour tous les DatePickers
+				const monthBtns = document.querySelectorAll('.v-date-picker-controls__month-btn')
+				if (monthBtns.length > 0) {
+					// Récupérer le texte original et le nettoyer du premier bouton pour référence
+					// Cela n'affectera pas la personnalisation des autres boutons
+					monthButtonText.value = monthBtns[0].textContent?.trim() || ''
+					const parts = monthButtonText.value.split(' ')
+					yearText.value = parts.length > 1 ? parts[1] : ''
+
+					// Appliquer la personnalisation à tous les boutons du mois
+					monthBtns.forEach((monthBtn) => {
+						// Extraire le mois et l'année pour ce bouton spécifique
+						const btnText = monthBtn.textContent?.trim() || ''
+						const btnParts = btnText.split(' ')
+						// Utiliser le monthName fourni s'il existe, sinon utiliser le texte extrait
+						const rawMonthText = monthName?.value || btnParts[0]
+						// Personnaliser le nom du mois avec notre fonction switch case
+						const monthText = getCustomMonthName(rawMonthText)
+
+						// Créer un bouton stylisé comme un VBtn avec une icône Material Design
+						const buttonHTML = `
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary); margin-left: -12px;" data-ripple="false">
+								<span class="v-btn__overlay"></span>
+								<span class="v-btn__underlay"></span>
+								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
+									<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-label="chevron-down"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+								</div>
+							</button>
+						`
+
+						// Remplacer le contenu du bouton original
+						monthBtn.innerHTML = buttonHTML
+					})
+
+					// Personnalisation des boutons d'année pour tous les DatePickers
+					const yearBtns = document.querySelectorAll('.v-date-picker-controls__mode-btn')
+					yearBtns.forEach((yearBtn) => {
+						// Trouver le parent DatePicker-controls pour ce bouton d'année
+						const parentControl = yearBtn.closest('.v-date-picker-controls')
+						if (!parentControl) return
+
+						// Trouver le bouton de mois correspondant dans le même contrôle
+						const siblingMonthBtn = parentControl.querySelector('.v-date-picker-controls__month-btn')
+						if (!siblingMonthBtn) return
+
+						// Extraire le texte du bouton de mois pour obtenir l'année
+						const monthBtnText = siblingMonthBtn.textContent?.trim() || ''
+						const monthBtnParts = monthBtnText.split(' ')
+
+						// Déterminer l'année à afficher selon les priorités
+						let displayedYear = ''
+						if (yearName?.value) {
+							displayedYear = yearName.value
+						}
+						else if (monthBtnParts.length > 1) {
+							displayedYear = monthBtnParts[1]
+						}
+						else if (yearText.value) {
+							displayedYear = yearText.value
+						}
+						else {
+							// Si aucune année n'est trouvée, utiliser l'année courante
+							displayedYear = new Date().getFullYear().toString()
+						}
+
+						// Créer un bouton stylisé pour l'année
+						const yearButtonHTML = `
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary);" data-ripple="false">
+								<span class="v-btn__overlay"></span>
+								<span class="v-btn__underlay"></span>
+								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
+									<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-label="chevron-down"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+								</div>
+							</button>
+						`
+
+						// Remplacer le contenu du bouton d'année
+						yearBtn.innerHTML = yearButtonHTML
+					})
+				}
+			})
+		}
+	}
+
+	/**
+	 * Configure des observateurs pour détecter les changements dans le DOM
+	 * et personnaliser les boutons du mois et de l'année automatiquement avec une icône SVG chevron-down
+	 * pour tous les DatePickers présents sur la page
+	 */
+	const setupMonthButtonObserver = () => {
+		nextTick(() => {
+			const targetNodes = document.querySelectorAll('.v-date-picker-controls')
+			if (targetNodes.length > 0) {
+				targetNodes.forEach((targetNode) => {
+					const observer = new MutationObserver(() => {
+						customizeMonthButton()
+					})
+					observer.observe(targetNode, { childList: true, subtree: true })
+				})
+			}
+		})
+	}
+
+	return {
+		monthButtonText,
+		customizeMonthButton,
+		setupMonthButtonObserver,
+	}
+}

package/src/components/DatePicker/composables/useTodayButton.ts

@@ -0,0 +1,43 @@
+import { computed, type ComputedRef } from 'vue'
+import dayjs from 'dayjs'
+import { type DateObjectValue } from '../types'
+
+export interface TodayButtonProps {
+	displayTodayButton?: boolean
+	displayRange?: boolean
+}
+
+export interface TodayButtonReturn {
+	todayInString: ComputedRef<string>
+	selectToday: (selectedDates: { value: DateObjectValue }) => void
+}
+
+/**
+ * Composable pour gérer le bouton "Aujourd'hui" dans le DatePicker
+ */
+export function useTodayButton(props: TodayButtonProps): TodayButtonReturn {
+	// Computed pour le format de la date du jour
+	const todayInString = computed(() => {
+		return dayjs().locale('fr').format('dddd D MMMM').replace(/\b\w/g, l => l.toUpperCase())
+	})
+
+	// Fonction pour sélectionner la date du jour
+	const selectToday = (selectedDates: { value: DateObjectValue }) => {
+		const today = new Date()
+		if (props.displayRange) {
+			// Si c'est une plage de dates, on définit le même jour pour début et fin
+			selectedDates.value = [today, today]
+		}
+		else {
+			// Sinon, on sélectionne simplement aujourd'hui
+			selectedDates.value = today
+		}
+		// Le watcher sur selectedDates dans le composant parent se chargera de mettre à jour l'affichage
+		// et d'émettre l'événement update:modelValue
+	}
+
+	return {
+		todayInString,
+		selectToday,
+	}
+}

package/src/components/DatePicker/composables/useWeekendDays.ts

@@ -0,0 +1,21 @@
+import { computed, type ComputedRef } from 'vue'
+
+export interface WeekendDaysProps {
+	displayWeekendDays?: boolean
+}
+
+export interface WeekendDaysReturn {
+	displayWeekendDays: ComputedRef<boolean>
+}
+
+/**
+ * Composable pour gérer l'affichage des jours de weekend dans le DatePicker
+ */
+export function useWeekendDays(props: WeekendDaysProps): WeekendDaysReturn {
+	// Computed pour l'affichage des jours de weekend
+	const displayWeekendDays = computed(() => props.displayWeekendDays ?? true)
+
+	return {
+		displayWeekendDays,
+	}
+}

package/src/components/DatePicker/constants/messages.ts

@@ -0,0 +1,50 @@
+/**
+ * Fichier contenant toutes les constantes de textes utilisées dans les composants/composables DatePicker
+ */
+
+export const DATE_PICKER_MESSAGES = {
+	// Labels et placeholders
+	LABEL_DEFAULT: 'Date',
+	PLACEHOLDER_DEFAULT: 'Sélectionner une date',
+
+	// Messages d'erreur
+	ERROR_REQUIRED: 'La date est requise.',
+	ERROR_INVALID_FORMAT: 'Le format de la date est invalide.',
+	ERROR_INVALID_DATE: 'La date saisie est invalide.',
+	ERROR_INCOMPLETE_DATE: 'La date est incomplète.',
+	ERROR_INVALID_RANGE: 'La plage de dates est invalide.',
+	ERROR_START_DATE_MISSING: 'La date de début est manquante.',
+	ERROR_END_DATE_MISSING: 'La date de fin est manquante.',
+	ERROR_END_BEFORE_START: 'La date de fin doit être postérieure à la date de début.',
+	ERROR_INVALID_FORMAT_START: 'Format de date invalide pour la date de début',
+	ERROR_INVALID_FORMAT_END: 'Format de date invalide pour la date de fin',
+
+	// Messages de succès
+	SUCCESS_VALID_DATE: 'La date est valide.',
+
+	// Messages d'accessibilité
+	ARIA_DATE_INPUT: 'Date en cours de saisie',
+	ARIA_CALENDAR_BUTTON: 'Ouvrir le calendrier',
+	ARIA_TODAY_BUTTON: 'Sélectionner aujourd\'hui',
+
+	// Boutons et actions
+	BUTTON_TODAY: 'Aujourd\'hui',
+	BUTTON_CLEAR: 'Effacer',
+	BUTTON_CLOSE: 'Fermer',
+
+	// Formats de date
+	FORMAT_DEFAULT: 'DD/MM/YYYY',
+
+	// Descriptions des mois pour l'accessibilité
+	MONTH_NAMES: [
+		'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+		'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre',
+	],
+
+	// Descriptions des jours pour l'accessibilité
+	DAY_NAMES: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+
+	// Autres messages
+	DATE_SEPARATOR: '/',
+	RANGE_SEPARATOR: ' - ',
+}

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 	import { ref, computed, watch } from 'vue'
-	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
 	import { useDateFormat } from '@/composables/date/useDateFormat'
 
 	const { parseDate } = useDateFormat()
@@ -157,15 +157,15 @@
 			Validation bidirectionnelle entre deux DatePickers
 		</h1>
 
-		<p class="text-body-2 mb-4">
+		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
-			<ul>
+			<ul class="ml-4">
 				<li>La date de fin doit être postérieure ou égale à la date de début</li>
 				<li>La date de début doit être antérieure ou égale à la date de fin</li>
 				<li>Lorsque la date de début change, la validation de la date de fin est mise à jour</li>
 				<li>Lorsque la date de fin change, la validation de la date de début est mise à jour</li>
 			</ul>
-		</p>
+		</div>
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">

package/src/components/DatePicker/docExamples/DatePickerValidationExamples.vue

@@ -1,6 +1,6 @@
 <script setup>
 	import { ref } from 'vue'
-	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
 
 	// Exemple 1: Validation de base (required)
 	const date1 = ref('')

package/src/components/DatePicker/playground/ComplexDatePickerPlayground.vue

@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
+
+	// Valeurs pour les différents exemples
+	const standardDate = ref<string | null>(null)
+	const americanDate = ref<string | null>(null)
+	const isoDate = ref<string | null>(null)
+	const dotDate = ref<string | null>(null)
+	const requiredDate = ref<string | null>(null)
+	const dateRange = ref<[string, string] | null>(null)
+	const birthDate = ref<string | null>(null)
+	const formattedDate = ref<string | null>(null)
+</script>
+
+<template>
+	<div class="playground-container">
+		<h1>ComplexDatePicker Playground</h1>
+
+		<div class="demo-section">
+			<h2>Format standard (DD/MM/YYYY)</h2>
+			<ComplexDatePicker
+				v-model="standardDate"
+				placeholder="Date standard"
+				format="DD/MM/YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ standardDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format américain (MM/DD/YYYY)</h2>
+			<ComplexDatePicker
+				v-model="americanDate"
+				placeholder="Date américaine"
+				format="MM/DD/YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ americanDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format ISO (YYYY-MM-DD)</h2>
+			<ComplexDatePicker
+				v-model="isoDate"
+				placeholder="Date ISO"
+				format="YYYY-MM-DD"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ isoDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format avec séparateur point (DD.MM.YYYY)</h2>
+			<ComplexDatePicker
+				v-model="dotDate"
+				placeholder="Date avec points"
+				format="DD.MM.YYYY"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ dotDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Champ requis</h2>
+			<ComplexDatePicker
+				v-model="requiredDate"
+				placeholder="Date requise"
+				format="DD/MM/YYYY"
+				required
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ requiredDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Plage de dates</h2>
+			<ComplexDatePicker
+				v-model="dateRange"
+				placeholder="Plage de dates"
+				format="DD/MM/YYYY"
+				display-range
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ dateRange ? JSON.stringify(dateRange) : 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Date de naissance (année d'abord)</h2>
+			<ComplexDatePicker
+				v-model="birthDate"
+				placeholder="Date de naissance"
+				format="DD/MM/YYYY"
+				is-birth-date
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ birthDate || 'Non définie' }}
+			</div>
+		</div>
+
+		<div class="demo-section">
+			<h2>Format d'affichage vs format de retour</h2>
+			<ComplexDatePicker
+				v-model="formattedDate"
+				placeholder="Date avec format de retour"
+				format="DD/MM/YYYY"
+				date-format-return="YYYY-MM-DD"
+				class="date-picker"
+			/>
+			<div class="value-display">
+				Valeur: {{ formattedDate || 'Non définie' }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.playground-container {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+	font-family: Roboto, sans-serif;
+}
+
+h1 {
+	text-align: center;
+	margin-bottom: 30px;
+	color: #2c3e50;
+}
+
+h2 {
+	color: #2c3e50;
+	font-size: 1.2rem;
+	margin-bottom: 10px;
+}
+
+.demo-section {
+	margin-bottom: 30px;
+	padding: 20px;
+	border-radius: 8px;
+	background-color: #f8f9fa;
+	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.date-picker {
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+.value-display {
+	margin-top: 10px;
+	padding: 10px;
+	background-color: #e9ecef;
+	border-radius: 4px;
+	font-family: monospace;
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+</style>

package/src/components/DatePicker/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Types pour les composants DatePicker
+ */
+
+/**
+ * Type représentant une valeur de date qui peut être une Date, un tableau de Dates ou null
+ * Utilisé pour les opérations internes du DatePicker avec des objets Date
+ */
+export type DateObjectValue = Date | (Date | null)[] | null
+
+/**
+ * Alias pour maintenir la compatibilité avec le code existant
+ * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateValue depuis useDateInitializationDayjs pour les chaînes
+ */
+export type DateValue = DateObjectValue

package/src/components/DiacriticPicker/DiacriticPicker.stories.ts

@@ -51,6 +51,7 @@ export const Default: Story = {
       label="Nom avec accents"
       color="primary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -110,6 +111,7 @@ export const Default: Story = {
 							label="Nom avec accents"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -130,6 +132,7 @@ export const WithTextarea: Story = {
       v-model="adresse"
       label="Adresse"
       color="primary"
+      bg-color="white"
       variant="outlined"
       auto-grow
     />
@@ -190,6 +193,7 @@ export const WithTextarea: Story = {
 							v-model="value"
 							label="Adresse"
 							color="primary"
+							bg-color="white"
 							variant="outlined"
 							auto-grow
 						/>
@@ -213,6 +217,7 @@ export const CustomDiacritics: Story = {
       label="Texte avec accents personnalisés"
       color="primary"
       variant="outlined"
+				bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -265,6 +270,7 @@ export const CustomDiacritics: Story = {
 							label="Texte avec accents personnalisés"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -286,6 +292,7 @@ export const CustomButtonTitle: Story = {
       label="Texte avec bouton personnalisé"
       color="primary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -345,6 +352,7 @@ export const CustomButtonTitle: Story = {
 							label="Texte avec bouton personnalisé"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -379,6 +387,7 @@ export const Customization: Story = {
       label="Options Vuetify personnalisées"
       color="secondary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -437,6 +446,7 @@ export const Customization: Story = {
 							label="Options Vuetify personnalisées"
 							color="secondary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>

package/src/components/DialogBox/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/DownloadBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ErrorPage/Accessibilite.stories.ts

@@ -181,6 +181,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/ErrorPage.xlsx" style="color:#0C41BD;">Voir le
+						rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a
+						href="https://github.com/assurance-maladie-digital/design-system-v3/issues/652" target="_blank"
+						style="color:#0C41BD;"
+					>issue #652</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/ErrorPage/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ErrorPage/ErrorPage.vue

@@ -3,6 +3,12 @@
 	import { locales } from './locales'
 	import PageContainer from '../PageContainer/PageContainer.vue'
 
+	// Fonction pour formater le message et ajouter des liens tel: aux numéros de téléphone
+	const formatMessage = (message: string): string => {
+		// Regex pour détecter les numéros de téléphone comme 3646
+		return message.replace(/\b(3646|\d{10})\b/g, '<a href="tel:$1">$1</a>')
+	}
+
 	withDefaults(defineProps<{
 		pageTitle?: string
 		message?: string
@@ -44,16 +50,17 @@
 						{{ code }}
 					</div>
 
-					<h2
+					<h1
 						v-if="pageTitle"
 						class="mb-2 font-weight-bold text-h5 mb-4"
 					>
 						{{ pageTitle }}
-					</h2>
+					</h1>
 
-					<p v-if="message">
-						{{ message }}
-					</p>
+					<p
+						v-if="message"
+						v-html="formatMessage(message)"
+					/>
 
 					<slot name="additional-content" />
 
@@ -63,7 +70,6 @@
 							:to="btnLink"
 							:href="btnHref"
 							color="primary"
-							exact
 							class="mt-6"
 						>
 							{{ btnText }}