Review Modal

Installation

Structure des fichiers

Ce composant inclut les fichiers suivants :

• index.tsx : Composant principal
• hooks/use-review-modal.ts : Hook pour gérer l'état de la modal

Utilisation

import { ReviewModal } from '@/blocks/review-modal';
 
export default function Example() {
  return (
    <ReviewModal firstName="John" />
  );
}

Props

interface Props {
  firstName?: string;
}

Dépendances

Ce composant nécessite les dépendances suivantes :

• https://reddot.dottools.xyz/r/modal-switch.json
• https://reddot.dottools.xyz/r/trustpilot-modal.json

Hook personnalisé

Le composant utilise le hook useReviewModal pour gérer l'état de la modal via les paramètres de l'URL :

import { useReviewModal } from './hooks/use-review-modal';
 
function Component() {
  const { isOpen, setIsOpen, handleOpen, handleClose } = useReviewModal();
  
  return (
    <button onClick={handleOpen}>
      Ouvrir la modal de review
    </button>
  );
}

Exemple

Voici un exemple d'utilisation du composant Review Modal :

import { ReviewModal } from '@/blocks/review-modal';
import { useReviewModal } from '@/blocks/review-modal/hooks/use-review-modal';
 
export default function ExamplePage() {
  const { handleOpen } = useReviewModal();
 
  return (
    <div className="p-4">
      <button 
        className="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={handleOpen}
      >
        Leave a Review
      </button>
 
      <ReviewModal firstName="John" />
    </div>
  );
}

Comportement

La modal présente 4 options de notation :

• Disappointing (Décevant)
• Average (Moyen)
• Good (Bon)
• Excellent (Excellent)

Lorsque l'utilisateur sélectionne "Good" ou "Excellent", il est automatiquement redirigé vers la modal Trustpilot pour laisser un avis public.

Pour les autres notes ("Disappointing" ou "Average"), la modal se ferme simplement.

Notes

• Ce composant block fait partie du système de design
• Peut être utilisé comme composant autonome ou intégré dans des pages complexes
• Respecte les conventions de style et d'accessibilité
• Utilise le système de gestion d'état via les paramètres URL avec nuqs
• Les icônes de notation doivent être présentes dans /assets/review-modal/
• S'intègre avec la modal Trustpilot pour les avis positifs