create-crm-tmp 1.1.3 → 2.1.0

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

@@ -0,0 +1,451 @@
+'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 MetaLeadConfig {
+  id: string;
+  name: string;
+  pageId: string;
+  verifyToken: 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 MetaLeadFormData {
+  name: string;
+  active: boolean;
+  pageId: string;
+  accessToken: string;
+  verifyToken: string;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+}
+
+const EMPTY_FORM: MetaLeadFormData = {
+  name: '',
+  active: true,
+  pageId: '',
+  accessToken: '',
+  verifyToken: '',
+  defaultStatusId: null,
+  defaultAssignedUserId: null,
+};
+
+interface MetaLeadIntegrationProps {
+  readonly statuses: ReadonlyArray<{ id: string; name: string; color: string }>;
+  readonly users: ReadonlyArray<{ id: string; name: string; email: string }>;
+  readonly onOpenLogs: (configId: string, configName: string) => void;
+}
+
+export function MetaLeadIntegration({ statuses, users, onOpenLogs }: MetaLeadIntegrationProps) {
+  const toast = useAppToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [configs, setConfigs] = useState<MetaLeadConfig[]>([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<string | null>(null);
+  const [formData, setFormData] = useState<MetaLeadFormData>(EMPTY_FORM);
+
+  const loadConfigs = useCallback(async () => {
+    try {
+      const res = await fetch('/api/settings/meta-leads');
+      if (res.ok) {
+        const data = await res.json();
+        setConfigs(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      toast.error('Impossible de charger les configurations Meta. Veuillez rafraîchir la page.');
+    } finally {
+      setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    loadConfigs();
+  }, [loadConfigs]);
+
+  const resetForm = () => {
+    setShowModal(false);
+    setEditingConfig(null);
+    setFormData(EMPTY_FORM);
+  };
+
+  const handleOpenAdd = () => {
+    setEditingConfig(null);
+    setFormData(EMPTY_FORM);
+    setShowModal(true);
+  };
+
+  const handleEdit = (config: MetaLeadConfig) => {
+    setEditingConfig(config.id);
+    setFormData({
+      name: config.name,
+      active: config.active,
+      pageId: config.pageId,
+      accessToken: '',
+      verifyToken: config.verifyToken,
+      defaultStatusId: config.defaultStatusId,
+      defaultAssignedUserId: config.defaultAssignedUserId,
+    });
+    setShowModal(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const url = editingConfig
+        ? `/api/settings/meta-leads/${editingConfig}`
+        : '/api/settings/meta-leads';
+      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 Meta');
+      }
+
+      toast.success(
+        editingConfig
+          ? 'Configuration Meta Lead Ads mise à jour avec succès'
+          : 'Configuration Meta Lead Ads créée avec succès',
+      );
+      resetForm();
+      await loadConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de sauvegarder la configuration Meta. Veuillez réessayer.', error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    const confirmed = await confirm({
+      title: 'Supprimer la configuration Meta Lead',
+      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/meta-leads/${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 loadConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de supprimer la configuration. Veuillez réessayer.', error));
+    }
+  };
+
+  const getWebhookUrl = () => {
+    const origin = globalThis.window?.location.origin ?? '';
+    return `${origin}/api/webhooks/meta-leads`;
+  };
+
+  const handleCopyWebhook = () => {
+    const url = getWebhookUrl();
+    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 Meta Lead Ads</h2>
+            <p className="mt-1 text-sm text-gray-600">
+              Recevez automatiquement les leads depuis Facebook Lead Ads.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={handleOpenAdd}
+            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 Meta Lead 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">Page ID: {config.pageId}</p>
+                  <p className="mt-0.5 text-xs text-gray-400">Webhook : {getWebhookUrl()}</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={handleCopyWebhook}
+                    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={() => handleEdit(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">
+            <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 Meta Lead Ads
+                </h2>
+                <button
+                  type="button"
+                  onClick={resetForm}
+                  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="meta-lead-form"
+              onSubmit={handleSubmit}
+              className="flex-1 space-y-4 overflow-y-auto pt-4"
+            >
+              <div>
+                <label htmlFor="meta-lead-name" className="block text-sm font-medium text-gray-700">
+                  Nom de la configuration *
+                </label>
+                <input
+                  id="meta-lead-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:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Ex: Facebook Lead Ads"
+                />
+              </div>
+
+              <div className="flex items-center">
+                <input
+                  id="meta-lead-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="meta-lead-active"
+                  className="ml-2 text-sm font-medium text-gray-700"
+                >
+                  Activer l&apos;intégration Meta Lead Ads
+                </label>
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-page-id" className="block text-sm font-medium text-gray-700">Page ID *</label>
+                <input
+                  id="meta-lead-page-id"
+                  type="text"
+                  required
+                  value={formData.pageId}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, pageId: e.target.value }))}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Page ID Facebook"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-access-token" className="block text-sm font-medium text-gray-700">Access Token *</label>
+                <input
+                  id="meta-lead-access-token"
+                  type="password"
+                  autoComplete="off"
+                  required
+                  value={formData.accessToken}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, accessToken: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Access Token"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-verify-token" className="block text-sm font-medium text-gray-700">Verify Token *</label>
+                <input
+                  id="meta-lead-verify-token"
+                  type="text"
+                  required
+                  value={formData.verifyToken}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, verifyToken: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Verify Token"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label htmlFor="meta-lead-assigned-user" className="block text-sm font-medium text-gray-700">
+                    Utilisateur assigné par défaut (optionnel)
+                  </label>
+                  <select
+                    id="meta-lead-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:ring-2 focus:ring-gray-400/30 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="meta-lead-default-status" className="block text-sm font-medium text-gray-700">
+                    Statut par défaut
+                  </label>
+                  <StatusSelect
+                    id="meta-lead-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={resetForm}
+                  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="meta-lead-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 />
+    </>
+  );
+}