feat(front) : onglet contact prestataire (ERP-142) (#104)

Empilée sur ERP-141 (#103). ## Périmètre ERP-142 Onglet **Contact** de l'écran `/providers/new` — saisie multi-contacts (blocs ajoutables) via la sous-ressource contacts. - **`ProviderContactBlock.vue`** (miroir `SupplierContactBlock`) : Nom / Prénom / Fonction / Email / Téléphone (x1, +1 révélable, **max 2**), erreurs 422 par champ (prop `:errors`). - **`useProviderForm`** étendu : état `contacts`, `canAddContact` (RG-3.04), `addContact`/`removeContact`, `submitContacts` (POST `/providers/{id}/contacts` pour les nouveaux, PATCH `/provider_contacts/{id}` pour les existants, groupe `provider:write:contacts`), `submitRows` (erreurs collectées **par ligne**, non bloquant). - **RG-3.04** : « + Nouveau contact » désactivé tant que le bloc courant est vide (≥1 champ parmi prénom/nom/fonction/tél/email — aligné back). - **RG-3.12** : onglet non validable vide ; une amorce vide est soumise pour déclencher la 422 `firstName` inline. - Suppression d'un bloc → modal de confirmation. - Helpers purs `utils/forms/providerContact.ts` (`isProviderContactBlank`, `buildProviderContactPayload`). - i18n `technique.providers.form.contact/confirmDelete` + `toast.updateSuccess`. ## Vérifications - Vitest : 418/418 (16 nouveaux : helpers, bloc, workflow contacts). - ESLint : OK. - `nuxi typecheck` : 0 erreur sur les fichiers source du ticket. - Golden path navigateur : bloc Contact rendu, « Nouveau contact » désactivé tant que vide puis activé après saisie, révélation du 2e téléphone (max 2). Reviewed-on: #104 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-15 09:05:07 +00:00
parent a6f01400ba
commit c1e45cd582
9 changed files with 709 additions and 6 deletions
@@ -406,12 +406,30 @@
                "errors": {
                    "siteRequired": "Sélectionnez au moins un site.",
                    "categoryRequired": "Sélectionnez au moins une catégorie."
+                },
+                "contact": {
+                    "lastName": "Nom",
+                    "firstName": "Prénom",
+                    "jobTitle": "Fonction",
+                    "email": "Email",
+                    "phonePrimary": "Téléphone",
+                    "phoneSecondary": "Téléphone (2)",
+                    "addPhone": "Ajouter un numéro",
+                    "remove": "Supprimer le contact",
+                    "add": "Nouveau contact"
+                },
+                "confirmDelete": {
+                    "title": "Confirmer la suppression",
+                    "cancel": "Annuler",
+                    "confirm": "Supprimer",
+                    "contact": "Supprimer ce contact ?"
                }
            },
            "toast": {
                "error": "Une erreur est survenue. Réessayez.",
                "exportError": "L'export du répertoire prestataires a échoué. Réessayez.",
-                "createSuccess": "Prestataire créé avec succès"
+                "createSuccess": "Prestataire créé avec succès",
+                "updateSuccess": "Prestataire mis à jour avec succès"
            }
        }
    },
@@ -0,0 +1,108 @@
+<template>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+             non supprimable (1er bloc) ou en lecture seule. -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('technique.providers.form.contact.remove') }"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('technique.providers.form.contact.lastName')"
+            :readonly="readonly"
+            :error="errors?.lastName"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('technique.providers.form.contact.firstName')"
+            :readonly="readonly"
+            :error="errors?.firstName"
+            @update:model-value="(v: string) => update('firstName', v)"
+        />
+        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
+             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
+             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.jobTitle"
+                :label="t('technique.providers.form.contact.jobTitle')"
+                :readonly="readonly"
+                :error="errors?.jobTitle"
+                @update:model-value="(v: string) => update('jobTitle', v)"
+            />
+        </div>
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('technique.providers.form.contact.email')"
+            :readonly="readonly"
+            :lowercase="true"
+            :error="errors?.email"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('technique.providers.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :error="errors?.phonePrimary"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('technique.providers.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <!-- 2e numero : revele a la demande (max 2 telephones par contact). -->
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('technique.providers.form.contact.phoneSecondary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :error="errors?.phoneSecondary"
+            @update:model-value="(v: string) => update('phoneSecondary', v)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
+
+// Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste serveur).
+const PHONE_MASK = '## ## ## ## ##'
+
+const props = defineProps<{
+    /** Brouillon du contact (v-model). */
+    modelValue: ProviderContactFormDraft
+    /** Affiche l'icone de suppression (1er bloc non supprimable). */
+    removable?: boolean
+    /** Bloc en lecture seule (onglet valide). */
+    readonly?: boolean
+    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
+    errors?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: ProviderContactFormDraft]
+    'remove': []
+}>()
+
+const { t } = useI18n()
+
+// Alias local pour la lisibilite du template.
+const model = computed(() => props.modelValue)
+
+/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
+function update<K extends keyof ProviderContactFormDraft>(field: K, value: ProviderContactFormDraft[K]): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+/** Revele le 2e numero (max 1 secondaire, le « + » disparait). */
+function revealSecondaryPhone(): void {
+    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
+}
+</script>
@@ -0,0 +1,55 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, ref, computed } from 'vue'
+import { emptyProviderContact } from '~/modules/technique/types/providerForm'
+import ProviderContactBlock from '../ProviderContactBlock.vue'
+
+// Auto-imports Nuxt/Vue utilises sans import explicite par le composant.
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('ref', ref)
+vi.stubGlobal('computed', computed)
+
+/** Stub d'un champ Malio qui re-expose la prop `error` recue dans un data-* attribut. */
+function errorProbe(testid: string) {
+    return defineComponent({
+        name: `Probe-${testid}`,
+        props: {
+            modelValue: { type: [String, Number, null], default: undefined },
+            error: { type: String, default: '' },
+            label: { type: String, default: '' },
+            readonly: { type: Boolean, default: false },
+        },
+        setup(props) {
+            return () => h('div', { 'data-testid': testid, 'data-error': props.error })
+        },
+    })
+}
+
+function mountBlock(errors?: Record<string, string>) {
+    return mount(ProviderContactBlock, {
+        props: {
+            modelValue: emptyProviderContact(),
+            ...(errors ? { errors } : {}),
+        },
+        global: {
+            stubs: {
+                MalioButtonIcon: true,
+                MalioInputPhone: true,
+                MalioInputText: errorProbe('contact-text'),
+                MalioInputEmail: errorProbe('contact-email'),
+            },
+        },
+    })
+}
+
+describe('ProviderContactBlock — mapping erreur par champ (ERP-101)', () => {
+    it('affiche l\'erreur serveur sur le champ email via la prop errors', () => {
+        const wrapper = mountBlock({ email: 'L\'adresse email n\'est pas valide.' })
+        expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('L\'adresse email n\'est pas valide.')
+    })
+
+    it('laisse les champs sans erreur quand errors est absent', () => {
+        const wrapper = mountBlock()
+        expect(wrapper.find('[data-testid="contact-email"]').attributes('data-error')).toBe('')
+    })
+})
@@ -41,10 +41,17 @@ vi.stubGlobal('usePermissions', () => ({
 }))

 const { useProviderForm, buildProviderCreateTabKeys } = await import('../useProviderForm')
+const { emptyProviderContact } = await import('~/modules/technique/types/providerForm')
+type ProviderForm = ReturnType<typeof useProviderForm>

 const SITE_86 = '/api/sites/1'
 const CAT_MAINT = '/api/categories/7'

+/** Accede a un bloc contact (cast : sous noUncheckedIndexedAccess l'index est optionnel). */
+function contactAt(form: ProviderForm, index = 0) {
+    return form.contacts.value[index] ?? emptyProviderContact()
+}
+
 describe('useProviderForm', () => {
    beforeEach(() => {
        mockPost.mockReset()
@@ -190,3 +197,110 @@ describe('useProviderForm', () => {
        expect(mockPatch).toHaveBeenCalledWith('/providers/9', { siren: '123456789' }, { toast: false })
    })
 })
+
+describe('useProviderForm — onglet Contact (ERP-142)', () => {
+    beforeEach(() => {
+        mockPost.mockReset()
+        mockPatch.mockReset()
+        permState.accountingView = false
+    })
+
+    /** Place le formulaire en etat « prestataire cree » (onglet Contact accessible). */
+    function createdForm() {
+        const form = useProviderForm()
+        form.providerId.value = 7
+        return form
+    }
+
+    it('RG-3.04 : « + Nouveau contact » desactive tant que le dernier bloc est vide', () => {
+        const form = createdForm()
+        expect(form.canAddContact.value).toBe(false)
+
+        // addContact est un no-op tant que le bloc est vide.
+        form.addContact()
+        expect(form.contacts.value).toHaveLength(1)
+
+        contactAt(form).lastName = 'Doe'
+        expect(form.canAddContact.value).toBe(true)
+        form.addContact()
+        expect(form.contacts.value).toHaveLength(2)
+    })
+
+    it('removeContact retire le bloc et son erreur de ligne', () => {
+        const form = createdForm()
+        contactAt(form).lastName = 'Doe'
+        form.addContact()
+        form.contactErrors.value = [{}, { lastName: 'x' }]
+
+        form.removeContact(1)
+        expect(form.contacts.value).toHaveLength(1)
+        expect(form.contactErrors.value).toHaveLength(1)
+    })
+
+    it('submitContacts : POST des nouveaux, capture id + IRI, finalise l\'onglet', async () => {
+        mockPost.mockResolvedValueOnce({ '@id': '/api/provider_contacts/55', id: 55 })
+        const form = createdForm()
+        contactAt(form).lastName = 'Doe'
+
+        const ok = await form.submitContacts(vi.fn())
+
+        expect(ok).toBe(true)
+        const [url, body, opts] = mockPost.mock.calls[0] ?? []
+        expect(url).toBe('/providers/7/contacts')
+        expect(body).toMatchObject({ lastName: 'Doe' })
+        expect(opts).toMatchObject({ toast: false, headers: { Accept: 'application/ld+json' } })
+        expect(contactAt(form).id).toBe(55)
+        expect(contactAt(form).iri).toBe('/api/provider_contacts/55')
+        expect(form.isValidated('contact')).toBe(true)
+    })
+
+    it('submitContacts : PATCH des contacts existants sur /provider_contacts/{id}', async () => {
+        mockPatch.mockResolvedValueOnce({})
+        const form = createdForm()
+        contactAt(form).id = 55
+        contactAt(form).lastName = 'Doe'
+
+        await form.submitContacts(vi.fn())
+
+        expect(mockPost).not.toHaveBeenCalled()
+        expect(mockPatch).toHaveBeenCalledWith('/provider_contacts/55', expect.objectContaining({ lastName: 'Doe' }), { toast: false })
+    })
+
+    it('RG-3.12 : onglet vide -> soumet l\'amorce pour declencher la 422 firstName inline', async () => {
+        mockPost.mockRejectedValueOnce({
+            response: {
+                status: 422,
+                _data: { violations: [{ propertyPath: 'firstName', message: 'Au moins un champ du contact est obligatoire.' }] },
+            },
+        })
+        const form = createdForm()
+
+        const ok = await form.submitContacts(vi.fn())
+
+        expect(ok).toBe(false)
+        expect(mockPost).toHaveBeenCalledTimes(1)
+        expect(form.contactErrors.value[0]?.firstName).toBe('Au moins un champ du contact est obligatoire.')
+        expect(form.isValidated('contact')).toBe(false)
+    })
+
+    it('mappe les erreurs 422 PAR LIGNE (le bloc 2 echoue, le bloc 1 passe)', async () => {
+        mockPost
+            .mockResolvedValueOnce({ '@id': '/api/provider_contacts/1', id: 1 })
+            .mockRejectedValueOnce({
+                response: {
+                    status: 422,
+                    _data: { violations: [{ propertyPath: 'email', message: 'L\'adresse email n\'est pas valide.' }] },
+                },
+            })
+        const form = createdForm()
+        contactAt(form).lastName = 'Doe'
+        form.addContact()
+        contactAt(form, 1).email = 'invalide'
+
+        const ok = await form.submitContacts(vi.fn())
+
+        expect(ok).toBe(false)
+        expect(form.contactErrors.value[0]).toBeUndefined()
+        expect(form.contactErrors.value[1]?.email).toBe('L\'adresse email n\'est pas valide.')
+    })
+})
@@ -1,10 +1,18 @@
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, type Ref } from 'vue'
 import { useFormErrors } from '~/shared/composables/useFormErrors'
+import { mapViolationsToRecord } from '~/shared/utils/api'
 import {
+    emptyProviderContact,
    emptyProviderMain,
+    type ProviderContactFormDraft,
+    type ProviderContactResponse,
    type ProviderMainDraft,
    type ProviderMainResponse,
 } from '~/modules/technique/types/providerForm'
+import {
+    buildProviderContactPayload,
+    isProviderContactBlank,
+} from '~/modules/technique/utils/forms/providerContact'

 /**
 * Workflow de l'ecran « Ajouter un prestataire » (M3 Technique, ERP-141) —
@@ -182,6 +190,114 @@ export function useProviderForm() {
        return false
    }

+    /**
+     * Soumet TOUS les blocs d'une collection en collectant les erreurs PAR INDEX :
+     * on n'arrete pas au premier bloc en echec (decision ERP-101). Reinitialise la
+     * cible, tente chaque ligne via `saveRow`, mappe les 422 inline ou delegue le
+     * fallback a `onUnmappedError`. `shouldSkip` ignore les amorces vides. Retourne
+     * true si au moins un bloc a echoue. Miroir de `useSupplierFormErrors.submitRows`.
+     */
+    async function submitRows<T>(
+        rows: T[],
+        target: Ref<Record<string, string>[]>,
+        saveRow: (row: T, index: number) => Promise<void>,
+        onUnmappedError: (error: unknown, index: number) => void,
+        shouldSkip?: (row: T, index: number) => boolean,
+    ): Promise<boolean> {
+        target.value = []
+        let hasError = false
+        for (let index = 0; index < rows.length; index++) {
+            const row = rows[index] as T
+            if (shouldSkip?.(row, index)) {
+                continue
+            }
+            try {
+                await saveRow(row, index)
+            }
+            catch (error) {
+                const response = (error as { response?: { status?: number, _data?: unknown } })?.response
+                const mapped = response?.status === 422 ? mapViolationsToRecord(response._data) : {}
+                if (Object.keys(mapped).length > 0) {
+                    target.value[index] = mapped
+                }
+                else {
+                    onUnmappedError(error, index)
+                }
+                hasError = true
+            }
+        }
+        return hasError
+    }
+
+    // ── Onglet Contact (ERP-142) ──────────────────────────────────────────────
+    const contacts = ref<ProviderContactFormDraft[]>([emptyProviderContact()])
+    // Erreurs 422 par ligne (alignees sur l'index du v-for), peuplees par submitRows.
+    const contactErrors = ref<Record<string, string>[]>([])
+
+    // « + Nouveau contact » desactive tant que le dernier bloc est vide (RG-3.04).
+    const canAddContact = computed(() => {
+        const last = contacts.value[contacts.value.length - 1]
+        return last !== undefined && !isProviderContactBlank(last)
+    })
+
+    function addContact(): void {
+        if (canAddContact.value) {
+            contacts.value.push(emptyProviderContact())
+        }
+    }
+
+    function removeContact(index: number): void {
+        contacts.value.splice(index, 1)
+        contactErrors.value.splice(index, 1)
+    }
+
+    /**
+     * Valide l'onglet Contact : POST des nouveaux contacts sur
+     * /providers/{id}/contacts, PATCH des existants sur /provider_contacts/{id}
+     * (sous-ressource, groupe provider:write:contacts). RG-3.12 : au moins un bloc
+     * valide. Si l'onglet ne contient QUE des amorces vides, on les soumet pour
+     * declencher la 422 RG-3.04 inline (sur `firstName`) plutot que de finaliser un
+     * onglet vide. Retourne true si l'onglet a ete valide (avance/termine).
+     */
+    async function submitContacts(onError: (error: unknown) => void): Promise<boolean> {
+        if (providerId.value === null || tabSubmitting.value) {
+            return false
+        }
+        tabSubmitting.value = true
+        try {
+            const hasSubmittable = contacts.value.some(c => c.id !== null || !isProviderContactBlank(c))
+            const hasError = await submitRows(
+                contacts.value,
+                contactErrors,
+                async (contact) => {
+                    const body = buildProviderContactPayload(contact)
+                    if (contact.id === null) {
+                        const created = await api.post<ProviderContactResponse>(
+                            `/providers/${providerId.value}/contacts`,
+                            body,
+                            { headers: { Accept: 'application/ld+json' }, toast: false },
+                        )
+                        contact.id = created.id
+                        contact.iri = created['@id'] ?? null
+                    }
+                    else {
+                        await api.patch(`/provider_contacts/${contact.id}`, body, { toast: false })
+                    }
+                },
+                onError,
+                contact => hasSubmittable && contact.id === null && isProviderContactBlank(contact),
+            )
+            if (hasError) {
+                return false
+            }
+            completeTab('contact')
+            return true
+        }
+        finally {
+            tabSubmitting.value = false
+        }
+    }
+
    return {
        // etat
        main,
@@ -197,11 +313,19 @@ export function useProviderForm() {
        unlockedIndex,
        validated,
        isValidated,
+        // contacts
+        contacts,
+        contactErrors,
+        canAddContact,
+        addContact,
+        removeContact,
+        submitContacts,
        // actions
        validateMainFront,
        buildMainPayload,
        submitMain,
        patchProvider,
        completeTab,
+        submitRows,
    }
 }
@@ -57,23 +57,77 @@
        </div>

        <!-- ── Onglets a validation incrementale ─────────────────────────────
-             Le contenu des onglets (Contact / Adresse / Comptabilite) arrive aux
-             tickets ERP-142 → 144 : placeholders « A venir » pour l'instant. -->
+             Onglet Contact actif (ERP-142) ; Adresse / Comptabilite arrivent aux
+             tickets ERP-143 / 144 : placeholders « A venir » pour l'instant. -->
        <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
-            <template #contact><ComingSoonPlaceholder /></template>
+            <!-- Onglet Contact : saisie multi-contacts (blocs ajoutables). -->
+            <template #contact>
+                <div class="mt-12 flex flex-col gap-6">
+                    <ProviderContactBlock
+                        v-for="(contact, index) in contacts"
+                        :key="index"
+                        :model-value="contact"
+                        :removable="index > 0"
+                        :readonly="isValidated('contact')"
+                        :errors="contactErrors[index]"
+                        @update:model-value="(v) => contacts[index] = v"
+                        @remove="askRemoveContact(index)"
+                    />
+                    <div v-if="!isValidated('contact')" class="flex justify-center gap-6">
+                        <MalioButton
+                            variant="secondary"
+                            icon-name="mdi:add-bold"
+                            icon-position="left"
+                            :label="t('technique.providers.form.contact.add')"
+                            :disabled="!canAddContact"
+                            @click="addContact"
+                        />
+                        <MalioButton
+                            variant="primary"
+                            :label="t('technique.providers.form.submit')"
+                            :disabled="tabSubmitting"
+                            @click="onSubmitContacts"
+                        />
+                    </div>
+                </div>
+            </template>
            <template #address><ComingSoonPlaceholder /></template>
            <template v-if="canAccountingView" #accounting><ComingSoonPlaceholder /></template>
        </MalioTabList>
+
+        <!-- Modal de confirmation generique (suppression d'un bloc contact). -->
+        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
+            <template #header>
+                <h2 class="text-[24px] font-bold">{{ t('technique.providers.form.confirmDelete.title') }}</h2>
+            </template>
+            <p>{{ confirmModal.message }}</p>
+            <template #footer>
+                <MalioButton
+                    variant="secondary"
+                    button-class="flex-1"
+                    :label="t('technique.providers.form.confirmDelete.cancel')"
+                    @click="confirmModal.open = false"
+                />
+                <MalioButton
+                    variant="danger"
+                    button-class="flex-1"
+                    :label="t('technique.providers.form.confirmDelete.confirm')"
+                    @click="runConfirm"
+                />
+            </template>
+        </MalioModal>
    </div>
 </template>

 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { useProviderReferentials } from '~/modules/technique/composables/useProviderReferentials'
 import { useProviderForm } from '~/modules/technique/composables/useProviderForm'
+import { extractApiErrorMessage } from '~/shared/utils/api'

 const { t } = useI18n()
 const router = useRouter()
+const toast = useToast()
 const { can } = usePermissions()

 useHead({ title: t('technique.providers.form.title') })
@@ -97,6 +151,14 @@ const {
    activeTab,
    unlockedIndex,
    submitMain,
+    tabSubmitting,
+    isValidated,
+    contacts,
+    contactErrors,
+    canAddContact,
+    addContact,
+    removeContact,
+    submitContacts,
 } = useProviderForm()

 /** Retour vers le repertoire prestataires (fleche d'en-tete). */
@@ -104,6 +166,50 @@ function goBack(): void {
    router.push('/providers')
 }

+/**
+ * Message d'erreur a afficher dans un toast a partir d'une erreur d'API. Retourne
+ * TOUJOURS une chaine (le composant de toast plante sur `undefined`).
+ */
+function apiErrorMessage(error: unknown): string {
+    const data = (error as { response?: { _data?: unknown } })?.response?._data
+    return extractApiErrorMessage(data) || t('technique.providers.toast.error')
+}
+
+// ── Onglet Contact ──────────────────────────────────────────────────────────
+/** Valide l'onglet Contact ; toast de succes si l'onglet a ete finalise. */
+async function onSubmitContacts(): Promise<void> {
+    const ok = await submitContacts(error => toast.error({
+        title: t('technique.providers.toast.error'),
+        message: apiErrorMessage(error),
+    }))
+    if (ok) {
+        toast.success({ title: t('technique.providers.toast.updateSuccess') })
+    }
+}
+
+function askRemoveContact(index: number): void {
+    askConfirm(t('technique.providers.form.confirmDelete.contact'), () => removeContact(index))
+}
+
+// ── Modal de confirmation generique ─────────────────────────────────────────
+const confirmModal = reactive({
+    open: false,
+    message: '',
+    action: null as null | (() => void),
+})
+
+function askConfirm(message: string, action: () => void): void {
+    confirmModal.message = message
+    confirmModal.action = action
+    confirmModal.open = true
+}
+
+function runConfirm(): void {
+    confirmModal.action?.()
+    confirmModal.action = null
+    confirmModal.open = false
+}
+
 // Icone (Iconify) affichee dans l'onglet, par cle.
 const TAB_ICONS: Record<string, string> = {
    contact: 'mdi:account-box-plus-outline',
@@ -39,3 +39,45 @@ export interface ProviderMainResponse {
    /** Nom renvoye normalise (UPPERCASE) par le serveur, reaffiche en lecture seule. */
    companyName: string | null
 }
+
+/**
+ * Un contact du prestataire (onglet Contact, ERP-142). Miroir de
+ * `SupplierContactFormDraft` (M2). Tous les champs sont nullable cote ORM ; la
+ * validite (RG-3.04) tient a la presence d'AU MOINS un champ rempli parmi
+ * prenom / nom / fonction / telephone principal / email (cf. back).
+ */
+export interface ProviderContactFormDraft {
+    /** Id serveur une fois le contact cree (null tant que non persiste). */
+    id: number | null
+    /** IRI Hydra du contact cree — servira au rattachement M2M cote adresse (ERP-143). */
+    iri: string | null
+    firstName: string | null
+    lastName: string | null
+    jobTitle: string | null
+    phonePrimary: string | null
+    phoneSecondary: string | null
+    email: string | null
+    /** UI : le 2e numero a ete revele via le bouton « + » (max 2 telephones). */
+    hasSecondaryPhone: boolean
+}
+
+/** Fabrique un contact vierge. */
+export function emptyProviderContact(): ProviderContactFormDraft {
+    return {
+        id: null,
+        iri: null,
+        firstName: null,
+        lastName: null,
+        jobTitle: null,
+        phonePrimary: null,
+        phoneSecondary: null,
+        email: null,
+        hasSecondaryPhone: false,
+    }
+}
+
+/** Reponse du POST /providers/{id}/contacts (groupe provider:item:read + IRI Hydra). */
+export interface ProviderContactResponse {
+    '@id'?: string
+    id: number
+}
@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest'
+import {
+    buildProviderContactPayload,
+    hasAtLeastOneFilledContact,
+    isProviderContactBlank,
+} from '../providerContact'
+import { emptyProviderContact } from '~/modules/technique/types/providerForm'
+
+/**
+ * Helpers purs de l'onglet Contact prestataire (ERP-142). On verifie la
+ * definition de « bloc vide » (RG-3.04, alignee sur le back) et la construction
+ * du payload de sous-ressource.
+ */
+describe('providerContact helpers', () => {
+    describe('isProviderContactBlank (RG-3.04)', () => {
+        it('un bloc vierge est vide', () => {
+            expect(isProviderContactBlank(emptyProviderContact())).toBe(true)
+        })
+
+        it('un seul champ rempli parmi nom/prenom/fonction/tel/email suffit a le rendre non vide', () => {
+            for (const field of ['firstName', 'lastName', 'jobTitle', 'phonePrimary', 'email'] as const) {
+                const contact = { ...emptyProviderContact(), [field]: 'x' }
+                expect(isProviderContactBlank(contact)).toBe(false)
+            }
+        })
+
+        it('ignore les espaces (trim) — un champ blanc ne compte pas', () => {
+            expect(isProviderContactBlank({ ...emptyProviderContact(), lastName: '   ' })).toBe(true)
+        })
+
+        it('un 2e telephone seul NE suffit PAS (exclu, comme le back)', () => {
+            const contact = { ...emptyProviderContact(), hasSecondaryPhone: true, phoneSecondary: '0102030405' }
+            expect(isProviderContactBlank(contact)).toBe(true)
+        })
+    })
+
+    describe('hasAtLeastOneFilledContact (RG-3.12)', () => {
+        it('false si tous les blocs sont vides', () => {
+            expect(hasAtLeastOneFilledContact([emptyProviderContact(), emptyProviderContact()])).toBe(false)
+        })
+
+        it('true des qu\'un bloc porte une donnee', () => {
+            expect(hasAtLeastOneFilledContact([
+                emptyProviderContact(),
+                { ...emptyProviderContact(), email: 'a@b.fr' },
+            ])).toBe(true)
+        })
+    })
+
+    describe('buildProviderContactPayload', () => {
+        it('mappe les champs et envoie null pour les vides', () => {
+            const payload = buildProviderContactPayload({ ...emptyProviderContact(), lastName: 'Doe' })
+            expect(payload).toEqual({
+                firstName: null,
+                lastName: 'Doe',
+                jobTitle: null,
+                phonePrimary: null,
+                phoneSecondary: null,
+                email: null,
+            })
+        })
+
+        it('n\'envoie le 2e telephone que si revele (max 2)', () => {
+            const masque = buildProviderContactPayload({
+                ...emptyProviderContact(),
+                phoneSecondary: '0102030405',
+                hasSecondaryPhone: false,
+            })
+            expect(masque.phoneSecondary).toBeNull()
+
+            const revele = buildProviderContactPayload({
+                ...emptyProviderContact(),
+                phoneSecondary: '0102030405',
+                hasSecondaryPhone: true,
+            })
+            expect(revele.phoneSecondary).toBe('0102030405')
+        })
+    })
+})
@@ -0,0 +1,57 @@
+/**
+ * Helpers purs de l'onglet Contact prestataire (M3 Technique, ERP-142) — miroir
+ * reduit de `supplierFormRules.ts` / `supplierEdit.ts` (M2). Testables sans Vue
+ * ni API : detection de bloc vide (RG-3.04) et construction du payload de
+ * sous-ressource contacts.
+ */
+
+import type { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
+
+/** Vrai si une chaine porte au moins un caractere non-espace. */
+function isFilled(value: string | null | undefined): boolean {
+    return value !== null && value !== undefined && value.trim() !== ''
+}
+
+/**
+ * RG-3.04 : un bloc Contact est VIDE tant qu'aucun des champs comptant pour la
+ * validite n'est rempli — prenom / nom / fonction / telephone principal / email.
+ *
+ * `phoneSecondary` est volontairement EXCLU : le back (CHECK
+ * `chk_provider_contact_name` + `ProviderContactProcessor`) ne le compte pas non
+ * plus, un bloc ne portant qu'un 2e numero reste invalide. Garder la meme
+ * definition cote front evite tout drift (un bloc « vide » front == bloc rejete
+ * back).
+ */
+export function isProviderContactBlank(contact: ProviderContactFormDraft): boolean {
+    return ![
+        contact.firstName,
+        contact.lastName,
+        contact.jobTitle,
+        contact.phonePrimary,
+        contact.email,
+    ].some(isFilled)
+}
+
+/**
+ * RG-3.12 : l'onglet Contact ne peut etre finalise que s'il reste au moins un
+ * bloc non vide (au moins un contact valide).
+ */
+export function hasAtLeastOneFilledContact(contacts: ProviderContactFormDraft[]): boolean {
+    return contacts.some(contact => !isProviderContactBlank(contact))
+}
+
+/**
+ * Payload de la sous-ressource contacts (groupe `provider:write:contacts`). Les
+ * chaines vides sont envoyees a null (le serveur normalise/trim de toute facon).
+ * `phoneSecondary` n'est envoye que si le 2e numero a ete revele (max 2 tel).
+ */
+export function buildProviderContactPayload(contact: ProviderContactFormDraft): Record<string, unknown> {
+    return {
+        firstName: contact.firstName || null,
+        lastName: contact.lastName || null,
+        jobTitle: contact.jobTitle || null,
+        phonePrimary: contact.phonePrimary || null,
+        phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
+        email: contact.email || null,
+    }
+}