119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import {
|
|
CONTACTS_HEADING_TEXT,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_PAGE_CARD_CLASS,
|
|
CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS,
|
|
CONTACTS_PAGE_LINK_BTN_CLASS,
|
|
CONTACTS_PAGE_SECTION_TITLE_CLASS,
|
|
CONTACTS_PRIMARY_BTN_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function AddCoordinatesView() {
|
|
const { getCoordinateSuggestions, updateContact } = useContactsStore()
|
|
const suggestions = useMemo(() => getCoordinateSuggestions(), [getCoordinateSuggestions])
|
|
const [dismissed, setDismissed] = useState<Set<string>>(new Set())
|
|
|
|
const visible = suggestions.filter((s) => !dismissed.has(s.contact.id))
|
|
|
|
function handleAdd(contactId: string, field: string, value: string) {
|
|
updateContact(contactId, { [field]: value })
|
|
setDismissed((s) => new Set(s).add(contactId))
|
|
}
|
|
|
|
function handleIgnore(contactId: string) {
|
|
setDismissed((s) => new Set(s).add(contactId))
|
|
}
|
|
|
|
function handleAddAll() {
|
|
for (const s of visible) {
|
|
updateContact(s.contact.id, { [s.suggestedField]: s.suggestedValue })
|
|
}
|
|
setDismissed(new Set(suggestions.map((s) => s.contact.id)))
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h3 className={CONTACTS_PAGE_SECTION_TITLE_CLASS}>
|
|
Ajouter des coordonnées ({visible.length})
|
|
</h3>
|
|
{visible.length > 0 && (
|
|
<Button onClick={handleAddAll} className={CONTACTS_PRIMARY_BTN_CLASS}>
|
|
Ajouter tous les détails
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{visible.length === 0 && (
|
|
<p className={cn("py-8 text-center text-sm", CONTACTS_MUTED_TEXT)}>
|
|
Aucune suggestion disponible
|
|
</p>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
{visible.map((suggestion) => {
|
|
const { contact, suggestedField, suggestedValue } = suggestion
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || "?"
|
|
const color = avatarColor(name)
|
|
const initial = senderInitial(name)
|
|
|
|
return (
|
|
<div key={contact.id} className={CONTACTS_PAGE_CARD_CLASS}>
|
|
<p className={cn("mb-2 text-xs font-medium", CONTACTS_MUTED_TEXT)}>Contact à modifier</p>
|
|
<div className="flex items-start gap-3">
|
|
{contact.avatarUrl ? (
|
|
<img src={contact.avatarUrl} alt={name} className="h-10 w-10 rounded-full object-cover" />
|
|
) : (
|
|
<div
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-medium text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className={cn("truncate text-sm font-medium", CONTACTS_HEADING_TEXT)}>{name}</p>
|
|
{contact.emails[0] && (
|
|
<p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>{contact.emails[0].value}</p>
|
|
)}
|
|
{contact.phones[0] && (
|
|
<p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>
|
|
{contact.phones[0].value} ({contact.phones[0].label})
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS}>
|
|
<p className={cn("text-xs font-medium", CONTACTS_MUTED_TEXT)}>Détails à ajouter</p>
|
|
<p className={cn("mt-1 text-sm", CONTACTS_HEADING_TEXT)}>{suggestedValue}</p>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center justify-end gap-3">
|
|
<button type="button" onClick={() => handleIgnore(contact.id)} className={CONTACTS_PAGE_LINK_BTN_CLASS}>
|
|
Ignorer
|
|
</button>
|
|
<Button
|
|
onClick={() => handleAdd(contact.id, suggestedField, suggestedValue)}
|
|
className={CONTACTS_PRIMARY_BTN_CLASS}
|
|
>
|
|
Ajouter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|