fix(contacts): distinguish WhatsApp group contacts from real customer contacts (EVO-1018)

src/components/contacts/ContactForm.tsx

@@ -27,6 +27,7 @@ import {
   ShieldX,
   Building2,
   Briefcase,
+  Users,
 } from 'lucide-react';
 import { Contact, ContactFormData } from '@/types/contacts';
 import ContactLabels from './ContactLabels';
@@ -50,7 +51,7 @@ interface ContactFormProps {
 }
 
 interface FormData {
-  type: 'person' | 'company';
+  type: 'person' | 'company' | 'group';
   firstName: string;
   lastName: string;
   email: string;
@@ -291,8 +292,8 @@ export default function ContactForm({
 
     // Tax ID validation based on country
     if (formData.tax_id) {
-      if (!validateTaxId(formData.tax_id, phoneCountry, formData.type)) {
-        const taxIdLabel = getTaxIdLabel(phoneCountry, formData.type);
+      if (!validateTaxId(formData.tax_id, phoneCountry, taxIdType)) {
+        const taxIdLabel = getTaxIdLabel(phoneCountry, taxIdType);
         newErrors.tax_id = t('form.validation.taxIdInvalid', { type: taxIdLabel });
       }
     }
@@ -349,6 +350,7 @@ export default function ContactForm({
 
   const isCompany = formData.type === 'company';
   const isPerson = formData.type === 'person';
+  const taxIdType: 'person' | 'company' = formData.type === 'company' ? 'company' : 'person';
 
   // Detect country from phone number
   const handlePhoneChange = (value: string) => {
@@ -368,7 +370,7 @@ export default function ContactForm({
   };
 
   // Get Tax ID label based on detected country
-  const taxIdLabel = getTaxIdLabel(phoneCountry, formData.type);
+  const taxIdLabel = getTaxIdLabel(phoneCountry, taxIdType);
 
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
@@ -381,7 +383,7 @@ export default function ContactForm({
             </Label>
             <Select
               value={formData.type}
-              onValueChange={(value: 'person' | 'company') =>
+              onValueChange={(value: 'person' | 'company' | 'group') =>
                 setFormData(prev => ({ ...prev, type: value }))
               }
               disabled={loading}
@@ -421,6 +423,8 @@ export default function ContactForm({
           <div className="flex items-center gap-2">
             {formData.type === 'company' ? (
               <Building2 className="h-4 w-4 text-primary" />
+            ) : formData.type === 'group' ? (
+              <Users className="h-4 w-4 text-primary" />
             ) : (
               <User className="h-4 w-4 text-primary" />
             )}
@@ -431,6 +435,8 @@ export default function ContactForm({
               <span className="text-sm font-semibold">
                 {formData.type === 'company'
                   ? t('form.fields.type.company')
+                  : formData.type === 'group'
+                  ? t('type.group')
                   : t('form.fields.type.person')}
               </span>
             </div>
@@ -536,7 +542,7 @@ export default function ContactForm({
             <Label htmlFor="tax_id">{taxIdLabel}</Label>
             <TaxIdInput
               id="tax_id"
-              type={formData.type}
+              type={taxIdType}
               country={phoneCountry}
               value={formData.tax_id}
               onChange={value => handleInputChange('tax_id', value)}

src/components/contacts/ContactTypeBadge.tsx

@@ -1,24 +1,29 @@
 import { Badge } from '@evoapi/design-system';
-import { User, Building2 } from 'lucide-react';
+import { User, Building2, Users, LucideIcon } from 'lucide-react';
 import { useLanguage } from '@/hooks/useLanguage';
 
 interface ContactTypeBadgeProps {
-  type: 'person' | 'company';
+  type: 'person' | 'company' | 'group';
   className?: string;
 }
 
+type BadgeVariant = 'secondary' | 'default' | 'outline';
+
+const TYPE_CONFIG: Record<string, { icon: LucideIcon; variant: BadgeVariant; labelKey: string }> = {
+  person:  { icon: User,      variant: 'secondary', labelKey: 'type.person' },
+  company: { icon: Building2, variant: 'default',   labelKey: 'type.company' },
+  group:   { icon: Users,     variant: 'outline',   labelKey: 'type.group' },
+};
+
 export default function ContactTypeBadge({ type, className = '' }: ContactTypeBadgeProps) {
   const { t } = useLanguage('contacts');
-  const isPerson = type === 'person';
+  const config = TYPE_CONFIG[type] ?? TYPE_CONFIG.person;
+  const Icon = config.icon;
 
   return (
-    <Badge
-      variant={isPerson ? 'secondary' : 'default'}
-      className={`gap-1 ${className}`}
-    >
-      {isPerson ? <User className="h-3 w-3" /> : <Building2 className="h-3 w-3" />}
-      {isPerson ? t('type.person') : t('type.company')}
+    <Badge variant={config.variant} className={`gap-1 ${className}`}>
+      <Icon className="h-3 w-3" />
+      {t(config.labelKey)}
     </Badge>
   );
 }
-

src/i18n/locales/en/contacts.json

@@ -347,7 +347,8 @@
   },
   "type": {
     "person": "Person",
-    "company": "Company"
+    "company": "Company",
+    "group": "Group"
   },
   "filter": {
     "title": "Filter Contacts",

src/i18n/locales/es/contacts.json

@@ -339,7 +339,8 @@
   },
   "type": {
     "person": "Persona",
-    "company": "Empresa"
+    "company": "Empresa",
+    "group": "Grupo"
   },
   "filter": {
     "title": "Filtrar Contactos",

src/i18n/locales/fr/contacts.json

@@ -339,7 +339,8 @@
   },
   "type": {
     "person": "Personne",
-    "company": "Entreprise"
+    "company": "Entreprise",
+    "group": "Groupe"
   },
   "filter": {
     "title": "Filtrer les Contacts",

src/i18n/locales/it/contacts.json

@@ -339,7 +339,8 @@
   },
   "type": {
     "person": "Persona",
-    "company": "Azienda"
+    "company": "Azienda",
+    "group": "Gruppo"
   },
   "filter": {
     "title": "Filtra Contatti",

src/i18n/locales/pt-BR/contacts.json

@@ -347,7 +347,8 @@
   },
   "type": {
     "person": "Pessoa",
-    "company": "Empresa"
+    "company": "Empresa",
+    "group": "Grupo"
   },
   "filter": {
     "title": "Filtrar Contatos",

src/i18n/locales/pt/contacts.json

@@ -347,7 +347,8 @@
   },
   "type": {
     "person": "Pessoa",
-    "company": "Empresa"
+    "company": "Empresa",
+    "group": "Grupo"
   },
   "filter": {
     "title": "Filtrar Contatos",

src/types/contacts/contact.ts

@@ -112,7 +112,7 @@ export interface ContactPipelineInfo {
 export interface Contact {
   id: string;
   name: string;
-  type: 'person' | 'company';
+  type: 'person' | 'company' | 'group';
   email: string;
   phone_number: string;
   thumbnail: string;
@@ -210,7 +210,8 @@ export interface ContactsListParams {
   order?: 'asc' | 'desc';
   labels?: string[];
   q?: string;
-  type?: 'person' | 'company';
+  type?: 'person' | 'company' | 'group';
+  include_groups?: boolean;
   company_id?: string;
   include_contact_inboxes?: boolean;
   created_after?: string;
@@ -224,7 +225,7 @@ export interface ContactsSearchParams {
   page?: number;
   per_page?: number;
   sort?: string;
-  type?: 'person' | 'company';
+  type?: 'person' | 'company' | 'group';
   labels?: string[];
   include_contact_inboxes?: boolean;
 }
@@ -236,7 +237,7 @@ export interface ContactsFilterParams {
 
 export interface ContactCreateData {
   name: string;
-  type: 'person' | 'company';
+  type: 'person' | 'company' | 'group';
   email?: string;
   phone_number?: string;
   identifier?: string;