From ceb3fe8eee35ac17403f927331f248eb51a0aa25 Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@protonmail.com>
Date: Wed, 8 May 2024 16:39:43 +0200
Subject: [PATCH] Fix icon button position in FieldWithButton when on error

---
 .../ControlUnitContactList/Form/FieldWithButton.tsx  | 11 +++++++++--
 .../ControlUnitContactList/Form/FormikEmailField.tsx |  4 ++--
 .../ControlUnitContactList/Form/FormikPhoneField.tsx | 12 +++++++-----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx
index d27b43610..1bb43d9e0 100644
--- a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx
+++ b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FieldWithButton.tsx
@@ -1,14 +1,21 @@
 import { IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
-const BareFieldWithIconButton = styled.div`
-  display: flex;
+// TODO Replace this dirty hack with an `IconButton` prop in some monitor-ui fields.
+const BareFieldWithIconButton = styled.div<{
+  $hasError: boolean
+}>`
   align-items: flex-end;
+  display: flex;
 
   > *:first-child {
     flex-grow: 1;
     margin-right: 4px;
   }
+
+  > .Element-IconButton {
+    margin-bottom: ${p => (p.$hasError ? '22px' : 0)};
+  }
 `
 
 const IconButtonOff = styled(IconButton)`
diff --git a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx
index 0ebfc5530..a85375122 100644
--- a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx
+++ b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikEmailField.tsx
@@ -11,7 +11,7 @@ type FormikIsEmailSubscriptionContactToggleProps = {
   controlUnit: ControlUnit.ControlUnit
 }
 export function FormikEmailField({ controlUnit }: FormikIsEmailSubscriptionContactToggleProps) {
-  const { setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
+  const { errors, setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
 
   const [isConfirmationMessageOpened, setIsConfirmationMessageOpened] = useState(false)
   const [otherContactSubscribedEmail, setOtherContactSubscribedEmail] = useState<string | undefined>(undefined)
@@ -48,7 +48,7 @@ export function FormikEmailField({ controlUnit }: FormikIsEmailSubscriptionConta
 
   return (
     <>
-      <FieldWithButton>
+      <FieldWithButton $hasError={!!errors.email}>
         <FormikTextInput isLight label="Adresse mail" name="email" type="email" />
         {values.isEmailSubscriptionContact ? (
           <FieldWithButton.IconButtonOn
diff --git a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx
index 1f211e766..0dbe8b3e6 100644
--- a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx
+++ b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Form/FormikPhoneField.tsx
@@ -1,20 +1,22 @@
 import { FormikTextInput, Icon } from '@mtes-mct/monitor-ui'
-import { useField } from 'formik'
+import { useFormikContext } from 'formik'
 
 import { FieldWithButton } from './FieldWithButton'
 
+import type { ControlUnitContactFormValues } from '../types'
+
 export function FormikPhoneField() {
-  const [input, , props] = useField<boolean>('isSmsSubscriptionContact')
+  const { errors, setFieldValue, values } = useFormikContext<ControlUnitContactFormValues>()
 
   const toggleSubscription = () => {
-    props.setValue(!input.value)
+    setFieldValue('isSmsSubscriptionContact', !values.isSmsSubscriptionContact)
   }
 
   return (
-    <FieldWithButton>
+    <FieldWithButton $hasError={!!errors.phone}>
       <FormikTextInput isLight label="Numéro de téléphone" name="phone" type="tel" />
 
-      {input.value ? (
+      {values.isSmsSubscriptionContact ? (
         <FieldWithButton.IconButtonOn
           Icon={Icon.Subscription}
           onClick={toggleSubscription}