ContactSupportModal

Composant modal réutilisable permettant d'afficher les informations de contact du support.

Emplacement

app/components/shared/ContactSupportModal.vue

Description

Ce composant affiche une modal avec :

• Les coordonnées de contact (email et téléphone)
• Des boutons pour copier facilement les informations
• Les horaires d'ouverture du support
• Un feedback visuel lors de la copie

Utilisation

Le composant utilise le pattern de slot pour intégrer le bouton déclencheur. La modal gère automatiquement son propre état via Nuxt UI.

Utilisation basique

<template>
  <ContactSupportModal>
    <UButton 
      label="Nous contacter" 
      icon="i-heroicons-phone"
      color="neutral"
      variant="outline"
    />
  </ContactSupportModal>
</template>

Le bouton placé dans le slot par défaut devient automatiquement le déclencheur de la modal. Aucune gestion d'état n'est nécessaire.

Props

Le composant n'a pas de props spécifiques. Il hérite des props de UModal de Nuxt UI si nécessaire.

Fonctionnalités

1. Ouverture automatique : Le bouton dans le slot ouvre automatiquement la modal
2. Copie dans le presse-papier : Les boutons "Copier" permettent de copier l'email ou le téléphone
3. Feedback visuel : Le bouton change de couleur et de texte après la copie
4. Toast de confirmation : Une notification confirme la copie réussie
5. Données dynamiques : Les informations sont récupérées depuis l'API via useParameter()

Données de contact

Les informations de contact sont récupérées via le composable useParameter :

• Email : Paramètre contact_email
• Téléphone : Paramètre contact_phone

Valeurs par défaut si l'API échoue :

• Email : contact@save-france.fr
• Téléphone : +33 1 23 45 67 89

Exemples d'utilisation

Dans une page de paiement

<template>
  <div class="flex gap-4">
    <UButton @click="downloadContract" label="Télécharger" />
    
    <ContactSupportModal>
      <UButton 
        color="neutral"
        variant="outline"
        icon="i-heroicons-phone"
        label="Nous contacter"
      />
    </ContactSupportModal>
  </div>
</template>

Dans une page de contrat

<template>
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
    <UButton
      @click="downloadSignedContract"
      color="neutral"
      variant="outline"
      icon="i-heroicons-document-arrow-down"
      label="Télécharger le contrat"
    />

    <ContactSupportModal>
      <UButton
        color="neutral"
        variant="outline"
        icon="i-heroicons-phone"
        label="Nous contacter"
      />
    </ContactSupportModal>
  </div>
</template>

Personnalisation du bouton

Vous pouvez personnaliser complètement le bouton déclencheur :

<template>
  <ContactSupportModal>
    <UButton
      size="lg"
      color="primary"
      icon="i-heroicons-chat-bubble-left-right"
      label="Besoin d'aide ?"
    />
  </ContactSupportModal>
</template>

Utilisation dans un layout responsive

<template>
  <div class="flex flex-col sm:flex-row gap-4">
    <!-- Autres actions -->
    <UButton @click="handleAction" label="Action principale" />
    
    <!-- Support -->
    <ContactSupportModal>
      <UButton
        class="w-full sm:w-auto"
        color="neutral"
        variant="outline"
        icon="i-heroicons-phone"
        label="Nous contacter"
      />
    </ContactSupportModal>
  </div>
</template>

Dépendances

• Nuxt UI : UModal, UCard, UIcon, UInput, UButton
• Composable : useParameter() pour récupérer les données de contact
• Composable : useToast() pour les notifications

Configuration backend

Le composant nécessite que les paramètres suivants soient configurés dans le backend :

• contact_email : Email de contact du support
• contact_phone : Numéro de téléphone du support

Ces paramètres sont accessibles via l'endpoint :

GET /api/parameters/{code}

Personnalisation

Horaires d'ouverture

Les horaires d'ouverture sont actuellement codés en dur dans le composant :

Lundi - Vendredi : 9h00 - 18h00
Samedi : 9h00 - 12h00

Pour les rendre dynamiques :

1. Ajouter un paramètre opening_hours dans le backend
2. Récupérer ce paramètre via useParameter() dans le composant
3. Afficher les horaires dynamiquement dans la modal

Style du bouton déclencheur

Le bouton déclencheur peut être entièrement personnalisé puisqu'il est passé via le slot :

<ContactSupportModal>
  <!-- Bouton compact -->
  <UButton 
    size="sm"
    icon="i-heroicons-phone" 
    square 
    color="neutral"
    variant="ghost"
  />
</ContactSupportModal>

<ContactSupportModal>
  <!-- Lien texte -->
  <button class="text-primary hover:underline">
    Nous contacter
  </button>
</ContactSupportModal>

<ContactSupportModal>
  <!-- Badge cliquable -->
  <UBadge color="primary" variant="subtle" class="cursor-pointer">
    Support
  </UBadge>
</ContactSupportModal>

Notes techniques

• Le composant est auto-importé par Nuxt (pas besoin d'import explicite)
• La modal utilise le système de portal de Nuxt UI (prop portal à true par défaut)
• La copie dans le presse-papier utilise l'API native navigator.clipboard
• Le feedback visuel de copie dure 2 secondes
• Les données de contact sont chargées au montage du composant
• Le composant est entièrement accessible (ARIA)

Limitations

• Le composant nécessite que JavaScript soit activé (pas de fallback SSR pour la modal)
• La copie dans le presse-papier nécessite un contexte sécurisé (HTTPS)
• Les informations de contact doivent être configurées dans le backend
• Le composant ne supporte pas le contrôle externe de l'état (pas de v-model:open)

Migration depuis l'ancien pattern

Si vous utilisiez auparavant le pattern avec v-model:open, voici comment migrer :

Avant (ancien pattern)

<template>
  <div>
    <UButton @click="isOpen = true" label="Contact" />
    <ContactSupportModal v-model:open="isOpen" />
  </div>
</template>

<script setup>
const isOpen = ref(false);
</script>

Après (pattern actuel)

<template>
  <ContactSupportModal>
    <UButton label="Contact" />
  </ContactSupportModal>
</template>

Le nouveau pattern est plus simple et laisse Nuxt UI gérer l'état de la modal automatiquement.