Trustpilot Modal

Installation

Structure des fichiers

Ce composant inclut les fichiers suivants :

• index.tsx : Composant principal
• hooks/use-trustpilot-modal.ts : Hook pour gérer l'état de la modal
• types/index.ts : Définitions des types TypeScript

Utilisation

import { TrustpilotModal } from '@/blocks/trustpilot-modal';
 
export default function Example() {
  return (
    <TrustpilotModal locale="en" />
  );
}

Props

interface ModalProps {
  locale: Locale;
}
 
// Locale should actually be a union of your locals
type Locale = string;

Dépendances

Ce composant nécessite les dépendances suivantes :

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

Hook personnalisé

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

import { useTrustpilotModal } from './hooks/use-trustpilot-modal';
 
function Component() {
  const { isOpen, setIsOpen, handleOpen, handleClose } = useTrustpilotModal();
  
  return (
    <button onClick={handleOpen}>
      Laisser un avis sur Trustpilot
    </button>
  );
}

Configuration API

Le composant nécessite :

• Un endpoint API /api/feedback/trustpilot qui retourne les paramètres Trustpilot
• Une variable d'environnement NEXT_PUBLIC_TRUSTPILOT_DOMAIN avec votre domaine Trustpilot

Locales supportées

Le composant supporte les locales suivantes :

• fr - Français
• en - Anglais
• es - Espagnol
• de - Allemand
• it - Italien
• nl - Néerlandais
• pt - Portugais
• da - Danois
• no - Norvégien

Exemple

Voici un exemple d'utilisation du composant Trustpilot Modal :

import { TrustpilotModal } from '@/blocks/trustpilot-modal';
import { useTrustpilotModal } from '@/blocks/trustpilot-modal/hooks/use-trustpilot-modal';
 
export default function ExamplePage() {
  const { handleOpen } = useTrustpilotModal();
  const locale = 'en'; // or get from your i18n context
 
  return (
    <div className="p-4">
      <button 
        className="px-4 py-2 bg-green-500 text-white rounded"
        onClick={handleOpen}
      >
        Leave a Trustpilot Review
      </button>
 
      <TrustpilotModal locale={locale} />
    </div>
  );
}

Types TypeScript

// TrustPilot API Request Success response
interface TrustpilotApiSuccessResponse {
  a: string;
  b: string;
  c: string;
  e: string;
}
 
interface TrustpilotApiErrorResponse {
  error: string;
}
 
type TrustpilotApiResponse =
  | TrustpilotApiSuccessResponse
  | TrustpilotApiErrorResponse;

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
• Affiche un iframe Trustpilot en plein écran
• Gère automatiquement le chargement des paramètres via l'API
• S'adapte à la langue de l'utilisateur via la prop locale
• Le bouton de fermeture est stylisé en blanc pour une meilleure visibilité