create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/settings/integrations/GoogleAdsIntegration.tsx

@@ -0,0 +1,428 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { useConfirm } from '@/hooks/use-confirm';
+import { StatusSelect } from '@/components/ui/status-select';
+import { devToast } from '@/lib/utils';
+
+
+interface GoogleAdsConfig {
+  id: string;
+  name: string;
+  webhookKey: string;
+  active: boolean;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+  defaultStatus: { id: string; name: string; color: string } | null;
+  defaultAssignedUser: { id: string; name: string; email: string } | null;
+}
+
+interface GoogleAdsFormData {
+  name: string;
+  active: boolean;
+  webhookKey: string;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+}
+
+interface GoogleAdsIntegrationProps {
+  statuses: Array<{ id: string; name: string; color: string }>;
+  users: Array<{ id: string; name: string; email: string }>;
+  onOpenLogs: (configId: string, configName: string) => void;
+}
+
+const defaultFormData: GoogleAdsFormData = {
+  name: '',
+  active: true,
+  webhookKey: '',
+  defaultStatusId: null,
+  defaultAssignedUserId: null,
+};
+
+export function GoogleAdsIntegration({
+  statuses,
+  users,
+  onOpenLogs,
+}: Readonly<GoogleAdsIntegrationProps>) {
+  const toast = useAppToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [configs, setConfigs] = useState<GoogleAdsConfig[]>([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<string | null>(null);
+  const [formData, setFormData] = useState<GoogleAdsFormData>(defaultFormData);
+
+  const fetchConfigs = useCallback(async () => {
+    try {
+      const res = await fetch('/api/settings/google-ads');
+      if (res.ok) {
+        const data = await res.json();
+        setConfigs(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      toast.error('Impossible de charger les configurations Google Ads. Veuillez rafraîchir la page.');
+    } finally {
+      setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    fetchConfigs();
+  }, [fetchConfigs]);
+
+  const openAddModal = () => {
+    setEditingConfig(null);
+    setFormData(defaultFormData);
+    setShowModal(true);
+  };
+
+  const openEditModal = (config: GoogleAdsConfig) => {
+    setEditingConfig(config.id);
+    setFormData({
+      name: config.name,
+      active: config.active,
+      webhookKey: config.webhookKey,
+      defaultStatusId: config.defaultStatusId,
+      defaultAssignedUserId: config.defaultAssignedUserId,
+    });
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingConfig(null);
+    setFormData(defaultFormData);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const url = editingConfig
+        ? `/api/settings/google-ads/${editingConfig}`
+        : '/api/settings/google-ads';
+      const method = editingConfig ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(
+          data.error || 'Erreur lors de la sauvegarde de la configuration Google Ads',
+        );
+      }
+
+      toast.success(
+        editingConfig
+          ? 'Configuration Google Ads mise à jour avec succès'
+          : 'Configuration Google Ads créée avec succès',
+      );
+      closeModal();
+      await fetchConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de sauvegarder la configuration Google Ads. Veuillez réessayer.', error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    const confirmed = await confirm({
+      title: 'Supprimer la configuration Google Ads',
+      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+
+    if (!confirmed) return;
+
+    try {
+      const response = await fetch(`/api/settings/google-ads/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Erreur lors de la suppression');
+      }
+
+      toast.success('Configuration supprimée avec succès');
+      await fetchConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de supprimer la configuration. Veuillez réessayer.', error));
+    }
+  };
+
+  const copyWebhookUrl = (config: GoogleAdsConfig) => {
+    const origin = globalThis.window?.location.origin ?? '';
+    const url = `${origin}/api/webhooks/google-ads`;
+    navigator.clipboard?.writeText(url).then(() => toast.success('Lien webhook copié'));
+  };
+
+  return (
+    <>
+      <div className="rounded-lg bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Intégration Google Ads</h2>
+            <p className="mt-1 text-sm text-gray-600">
+              Recevez automatiquement les leads depuis Google Ads Lead Forms.
+            </p>
+          </div>
+          <button
+            onClick={openAddModal}
+            className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+          >
+            + Ajouter
+          </button>
+        </div>
+
+        {loading && (
+          <div className="mt-6 text-center text-gray-500">Chargement...</div>
+        )}
+
+        {!loading && configs.length === 0 && (
+          <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
+            <p className="text-sm text-gray-600">Aucune configuration Google Ads</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Cliquez sur &quot;+ Ajouter&quot; pour créer votre première configuration
+            </p>
+          </div>
+        )}
+
+        {!loading && configs.length > 0 && (
+          <div className="mt-6 space-y-3">
+            {configs.map((config) => (
+              <div
+                key={config.id}
+                className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-gray-900">{config.name}</h3>
+                    {config.active ? (
+                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                        Actif
+                      </span>
+                    ) : (
+                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
+                        Inactif
+                      </span>
+                    )}
+                  </div>
+                  <p className="mt-1 text-xs text-gray-500">
+                    Webhook Key: {config.webhookKey}
+                  </p>
+                  <p className="mt-0.5 text-xs text-gray-400">
+                    Webhook :{' '}
+                    {globalThis.window?.location.origin
+                      ? `${globalThis.window.location.origin}/api/webhooks/google-ads`
+                      : '/api/webhooks/google-ads'}
+                  </p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onOpenLogs(config.id, config.name)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Voir les logs
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => copyWebhookUrl(config)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Copier le lien webhook
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => openEditModal(config)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Modifier
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(config.id)}
+                    className="cursor-pointer rounded-lg border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
+                  >
+                    Supprimer
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showModal && (
+        <div className="ui-fade-in fixed inset-0 z-50 flex min-h-dvh items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="ui-scale-in flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8 overscroll-contain">
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  {editingConfig ? 'Modifier' : 'Ajouter'} une configuration Google Ads
+                </h2>
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                >
+                  <svg
+                    className="h-6 w-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <form
+              id="google-ads-form"
+              onSubmit={handleSubmit}
+              className="flex-1 space-y-4 overflow-y-auto pt-4"
+            >
+              <div>
+                <label htmlFor="gads-name" className="block text-sm font-medium text-gray-700">
+                  Nom de la configuration *
+                </label>
+                <input
+                  id="gads-name"
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, name: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Ex: Google Ads Lead Forms"
+                />
+              </div>
+
+              <div className="flex items-center">
+                <input
+                  id="google-ads-active"
+                  type="checkbox"
+                  checked={formData.active}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, active: e.target.checked }))
+                  }
+                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
+                />
+                <label
+                  htmlFor="google-ads-active"
+                  className="ml-2 text-sm font-medium text-gray-700"
+                >
+                  Activer l&apos;intégration Google Ads
+                </label>
+              </div>
+
+              <div>
+                <label htmlFor="gads-webhook-key" className="block text-sm font-medium text-gray-700">
+                  Webhook Key *
+                </label>
+                <input
+                  id="gads-webhook-key"
+                  type="text"
+                  required
+                  value={formData.webhookKey}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, webhookKey: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Webhook Key"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label htmlFor="gads-assigned-user" className="block text-sm font-medium text-gray-700">
+                    Utilisateur assigné par défaut (optionnel)
+                  </label>
+                  <select
+                    id="gads-assigned-user"
+                    value={formData.defaultAssignedUserId || ''}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultAssignedUserId: e.target.value || null,
+                      }))
+                    }
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  >
+                    <option value="">Aucun utilisateur par défaut</option>
+                    {users.map((user) => (
+                      <option key={user.id} value={user.id}>
+                        {user.name} ({user.email})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="gads-default-status" className="block text-sm font-medium text-gray-700">
+                    Statut par défaut
+                  </label>
+                  <StatusSelect
+                    id="gads-default-status"
+                    statuses={statuses}
+                    value={formData.defaultStatusId || ''}
+                    onChange={(v) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultStatusId: v || null,
+                      }))
+                    }
+                    placeholder="Aucun statut par défaut"
+                    className="mt-1"
+                  />
+                </div>
+              </div>
+            </form>
+
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="google-ads-form"
+                  disabled={saving}
+                  className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                >
+                  {saving ? 'Enregistrement...' : 'Enregistrer'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ConfirmDialog />
+    </>
+  );
+}