From ee6a0610362d3111f368b7cc2e2b83665a1c51ac Mon Sep 17 00:00:00 2001
From: Emile Bex <emile.bex@gmail.com>
Date: Fri, 18 Aug 2023 14:47:01 +0200
Subject: [PATCH] [EN-4026] chore(inputs): continue testing

---
 src/api/types.ts                              | 11 ++--
 .../backoffice/admin/AdminOpportunityList.tsx |  2 +-
 .../members/MemberDetails/EditMemberModal.tsx | 16 +++++-
 .../backoffice/admin/useOnMemberFormSubmit.ts |  4 +-
 .../SendMailModalContent.tsx                  |  8 +--
 src/components/cards/CandidatCard.js          | 32 +++--------
 src/components/cards/StoryProfileCard.tsx     |  6 +-
 .../CVCareerPathSentence.tsx                  |  4 +-
 .../CVCareerPathSentenceNew.tsx               |  8 +--
 src/components/cv/CVEditCareerPath.tsx        |  2 +-
 .../{CVEditReviews.js => CVEditReviews.tsx}   | 37 ++++++-------
 src/components/forms/FormWithValidation.tsx   |  8 +--
 .../FieldErrorMessage/FieldErrorMessage.tsx   | 12 +++-
 src/components/forms/fields/GenericField.tsx  | 25 +++++++--
 .../forms/schemas/formEditCareerPath.ts       | 50 +++++++++++++----
 .../forms/schemas/formEditTestimonial.ts      |  4 +-
 .../StepperModal/ModalShareCV/ModalShareCV.js |  1 +
 .../opportunities/OpportunityList.js          |  8 +--
 .../CVShareButtons/CVShareButtons.tsx         | 20 +++----
 .../utils/Inputs/CheckBox/CheckBox.tsx        |  1 +
 .../utils/Inputs/DatePicker/DatePicker.tsx    |  1 +
 src/components/utils/Inputs/Inputs.styles.ts  | 27 +++++++++
 src/components/utils/Inputs/Inputs.types.ts   |  4 +-
 .../utils/Inputs/PhoneInput/PhoneInput.tsx    |  2 +-
 .../utils/Inputs/Radio/Radio.styles.ts        |  2 +
 src/components/utils/Inputs/Radio/Radio.tsx   |  6 +-
 .../Inputs/SelectSimple/SelectSimple.tsx      |  2 +-
 .../utils/Inputs/Selects/Select/Select.tsx    |  2 +-
 .../Selects/SelectAsync/SelectAsync.tsx       |  4 +-
 .../SelectCreatable/SelectCreatable.tsx       |  2 +-
 .../utils/Inputs/Text/Text.styles.ts          | 10 ++++
 src/components/utils/Inputs/Text/Text.tsx     |  5 +-
 .../utils/Inputs/TextArea/TextArea.styles.tsx | 15 -----
 .../utils/Inputs/TextArea/TextArea.tsx        | 55 +++++++++++--------
 .../utils/Inputs/TextArea/useLineLimit.ts     | 19 ++-----
 .../Inputs/TextInput/TextInput.styles.ts      | 15 -----
 .../utils/Inputs/TextInput/TextInput.tsx      | 36 ++++++------
 src/hooks/useUpdateSharesCount.ts             | 16 +++---
 .../candidat/[candidateId]/suivi.tsx          | 43 +++++++--------
 src/pages/backoffice/parametres.tsx           |  2 +-
 src/pages/{contact.js => contact.tsx}         |  3 +-
 src/utils/Sorting.ts                          |  4 +-
 42 files changed, 294 insertions(+), 240 deletions(-)
 rename src/components/cv/{CVEditReviews.js => CVEditReviews.tsx} (84%)
 create mode 100644 src/components/utils/Inputs/Text/Text.styles.ts
 rename src/pages/{contact.js => contact.tsx} (98%)

diff --git a/src/api/types.ts b/src/api/types.ts
index cbffd7134..382174392 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -6,11 +6,12 @@ import {
   AmbitionsPrefixesType,
   BusinessLineValue,
   ExternalOfferOrigin,
+  HeardAboutValue,
 } from 'src/constants';
 import { AdminZone, Department } from 'src/constants/departements';
 import { AdminRole, Gender, UserRole } from 'src/constants/users';
 
-export type SocialMedia = 'facebook' | 'linkedin' | 'twitter';
+export type SocialMedia = 'facebook' | 'linkedin' | 'twitter' |'whatsapp' | 'other';
 
 export const APIRoutes = {
   USERS: 'user',
@@ -125,7 +126,7 @@ export interface CV {
   }[];
   transport: string;
   skills: {
-    id: string;
+    id?: string;
     name: string;
     order: number;
   }[];
@@ -134,7 +135,7 @@ export interface CV {
     order: number;
   }[];
   reviews: {
-    id: string;
+    id?: string;
     name: string;
     text: string;
     status: string;
@@ -143,7 +144,7 @@ export interface CV {
     description: string;
     order: number;
     skills: {
-      id: string;
+      id?: string;
       name: string;
       order: number;
     }[];
@@ -376,7 +377,7 @@ export type ContactContactUs = {
   email: string;
   structure: string;
   message: string;
-  heardAbout: object;
+  heardAbout: HeardAboutValue;
   cgu: boolean;
 };
 
diff --git a/src/components/backoffice/admin/AdminOpportunityList.tsx b/src/components/backoffice/admin/AdminOpportunityList.tsx
index 97d1641ed..3d083cac5 100644
--- a/src/components/backoffice/admin/AdminOpportunityList.tsx
+++ b/src/components/backoffice/admin/AdminOpportunityList.tsx
@@ -115,7 +115,7 @@ export const AdminOpportunityList = ({
         </ButtonMultiple>
       </HeaderBackoffice>
       <OpportunityList
-        listRef={opportunityListRef}
+        innerRef={opportunityListRef}
         tabFilters={tabFilters}
         setTabFilters={setTabFilters}
         search={search}
diff --git a/src/components/backoffice/admin/members/MemberDetails/EditMemberModal.tsx b/src/components/backoffice/admin/members/MemberDetails/EditMemberModal.tsx
index 4ef2a61bf..2ea0d7765 100644
--- a/src/components/backoffice/admin/members/MemberDetails/EditMemberModal.tsx
+++ b/src/components/backoffice/admin/members/MemberDetails/EditMemberModal.tsx
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import UIkit from 'uikit';
+import { ExtractFormSchemaValidation } from '../../../../forms/FormSchema';
 import { Api } from 'src/api';
 import { User, UserDto } from 'src/api/types';
 import { useOnMemberFormSubmit } from 'src/components/backoffice/admin/useOnMemberFormSubmit';
@@ -52,12 +53,18 @@ export function EditMemberModal({ user, setUser }: EditMemberModal) {
   }, Actions.UPDATE);
 
   const handleMemberUpdateSubmit = useCallback(
-    async (fields, closeModal) => {
+    async (
+      fields: ExtractFormSchemaValidation<typeof formAddUser>,
+      closeModal
+    ) => {
       const updatedUser = await onSubmit(fields, closeModal);
       try {
+        const userToLinkId = Array.isArray(fields.userToLinkId)
+          ? fields.userToLinkId.map(({ value }) => value)
+          : fields.userToLinkId?.value;
         const { data: updatedUserWithLinkedMember } = await Api.putLinkUser(
           user.id,
-          fields.userToLinkId || null
+          userToLinkId || null
         );
 
         setUser(updatedUserWithLinkedMember);
@@ -81,7 +88,10 @@ export function EditMemberModal({ user, setUser }: EditMemberModal) {
       description:
         'Merci de modifier les informations que vous souhaitez concernant le membre.',
       submitText: 'Modifier le membre',
-      onSubmit: async (fields, closeModal) => {
+      onSubmit: async (
+        fields: ExtractFormSchemaValidation<typeof formAddUser>,
+        closeModal
+      ) => {
         if (fields.role !== user.role) {
           openModal(
             <ModalConfirm
diff --git a/src/components/backoffice/admin/useOnMemberFormSubmit.ts b/src/components/backoffice/admin/useOnMemberFormSubmit.ts
index e5b05fd75..f5ccbe94a 100644
--- a/src/components/backoffice/admin/useOnMemberFormSubmit.ts
+++ b/src/components/backoffice/admin/useOnMemberFormSubmit.ts
@@ -31,9 +31,7 @@ export function useOnMemberFormSubmit(
         fields.organizationId?.value === CREATE_NEW_ORGANIZATION_VALUE;
 
       try {
-        let {
-          organizationId: { value: organizationId },
-        } = fields;
+        let organizationId = fields.organizationId?.value;
 
         if (shouldTryToCreateOrganization) {
           const organizationFields = {
diff --git a/src/components/backoffice/opportunities/OpportunitiesContainer/OpportunityDetails/CandidateOpportunityDetails/SendMailModalContent/SendMailModalContent.tsx b/src/components/backoffice/opportunities/OpportunitiesContainer/OpportunityDetails/CandidateOpportunityDetails/SendMailModalContent/SendMailModalContent.tsx
index d0447c77c..e107c3cdc 100644
--- a/src/components/backoffice/opportunities/OpportunitiesContainer/OpportunityDetails/CandidateOpportunityDetails/SendMailModalContent/SendMailModalContent.tsx
+++ b/src/components/backoffice/opportunities/OpportunitiesContainer/OpportunityDetails/CandidateOpportunityDetails/SendMailModalContent/SendMailModalContent.tsx
@@ -32,14 +32,12 @@ export const SendMailModalContent = ({
     fetchOpportunities
   );
   const { onClose } = useModalContext();
-  const [textAreaContent, setTextAreaContent] = useState();
-  const handleDescription = (e) => {
-    setTextAreaContent(e.target.value);
-  };
+  const [textAreaContent, setTextAreaContent] = useState<string>();
 
   const object = relance
     ? 'Relance - demande de contact'
     : 'Demande de contact';
+
   const description = relance ? (
     <>
       Vous pouvez ci-dessous envoyer un mail de relance pour le poste de
@@ -149,7 +147,7 @@ export const SendMailModalContent = ({
         <div className="textarea-container">
           <TextArea
             title="Ajouter un message personnel"
-            onChange={handleDescription}
+            onChange={setTextAreaContent}
             value={textAreaContent}
             name="contact-description"
             id="contact-description"
diff --git a/src/components/cards/CandidatCard.js b/src/components/cards/CandidatCard.js
index 4462a46af..68fccaa0b 100644
--- a/src/components/cards/CandidatCard.js
+++ b/src/components/cards/CandidatCard.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import {
   FacebookShareButton,
@@ -10,15 +10,14 @@ import {
   TwitterShareButton,
 } from 'react-share';
 
-import { Api } from 'src/api';
 import { openModal } from 'src/components/modals/Modal';
 import { ModalShareCV } from 'src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV';
 import { Grid, Img, SimpleLink, Icon } from 'src/components/utils';
 import { AMBITIONS_PREFIXES, BUSINESS_LINES } from 'src/constants';
 import { FB_TAGS, GA_TAGS } from 'src/constants/tags';
+import { useUpdateSharesCount } from 'src/hooks';
 import { fbEvent } from 'src/lib/fb';
 import { gaEvent } from 'src/lib/gtag';
-import { SharesCountContext } from 'src/store/SharesCountProvider';
 import {
   buildBusinessLineForSentence,
   findConstantFromValue,
@@ -55,25 +54,12 @@ export const CandidatCard = ({
   const sharedDescription = `La précarité n'exclut pas les compétences\xa0! Avec LinkedOut, aidons ${firstName} à retrouver un emploi en lui proposant un job ou en diffusant son CV\xa0!`;
   const title = `LinkedOut\xa0: Aidez ${firstName} à retrouver un emploi`;
 
-  const { incrementSharesCount } = useContext(SharesCountContext);
+  const updateSharesCount = useUpdateSharesCount();
 
   const openNewsletterModal = () => {
     openModal(<ModalShareCV firstName={firstName} />);
   };
 
-  const updateShareCount = (candidateId, type) => {
-    Api.postCVCount({
-      candidateId,
-      type,
-    })
-      .then(() => {
-        incrementSharesCount();
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
   const linkToCV = `/cv/${url}?hideShareOptions=${!showShareOptions}`;
 
   const sortedAmbitions =
@@ -292,14 +278,14 @@ export const CandidatCard = ({
             <ul className="uk-iconnav">
               <li>
                 <LinkedinShareButton
-                  onShareWindowClose={() => {
+                  onShareWindowClose={async () => {
                     gaEvent(
                       isCandidatsPage
                         ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_LINKEDIN_CLIC
                         : GA_TAGS.HOME_PARTAGE_CV_LINKEDIN_CLIC
                     );
                     fbEvent(FB_TAGS.SHARE_CV_SEND);
-                    updateShareCount(id, 'linkedin');
+                    await updateSharesCount(id, 'linkedin');
                     openNewsletterModal();
                   }}
                   onClick={() => {
@@ -320,14 +306,14 @@ export const CandidatCard = ({
               </li>
               <li>
                 <FacebookShareButton
-                  onShareWindowClose={() => {
+                  onShareWindowClose={async () => {
                     gaEvent(
                       isCandidatsPage
                         ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_FACEBOOK_CLIC
                         : GA_TAGS.HOME_PARTAGE_CV_FACEBOOK_CLIC
                     );
                     fbEvent(FB_TAGS.SHARE_CV_SEND);
-                    updateShareCount(id, 'facebook');
+                    await updateSharesCount(id, 'facebook');
                     openNewsletterModal();
                   }}
                   onClick={() => {
@@ -348,14 +334,14 @@ export const CandidatCard = ({
               </li>
               <li>
                 <TwitterShareButton
-                  onShareWindowClose={() => {
+                  onShareWindowClose={async () => {
                     gaEvent(
                       isCandidatsPage
                         ? GA_TAGS.PAGE_GALERIE_PARTAGE_CV_TWITTER_CLIC
                         : GA_TAGS.HOME_PARTAGE_CV_TWITTER_CLIC
                     );
                     fbEvent(FB_TAGS.SHARE_CV_SEND);
-                    updateShareCount(id, 'twitter');
+                    await updateSharesCount(id, 'twitter');
                     openNewsletterModal();
                   }}
                   onClick={() => {
diff --git a/src/components/cards/StoryProfileCard.tsx b/src/components/cards/StoryProfileCard.tsx
index d655706b9..045c53da5 100644
--- a/src/components/cards/StoryProfileCard.tsx
+++ b/src/components/cards/StoryProfileCard.tsx
@@ -10,7 +10,7 @@ export const StoryProfileCard = ({
   onChange,
 }: {
   description?: string;
-  onChange?: (arg1: { story: string }) => void; // to be typed
+  onChange: (updatedStory: { story: string }) => void;
 }) => {
   return (
     <div className="uk-card uk-card-default uk-card-body">
@@ -27,9 +27,9 @@ export const StoryProfileCard = ({
                   title="Édition - Mon histoire"
                   formSchema={formEditStory}
                   defaultValues={{ story: description }}
-                  onSubmit={async (fields, closeModal) => {
+                  onSubmit={(fields, closeModal) => {
                     closeModal();
-                    await onChange({ ...fields });
+                    onChange(fields);
                   }}
                 />
               );
diff --git a/src/components/cv/CVCareerPathSentence/CVCareerPathSentence.tsx b/src/components/cv/CVCareerPathSentence/CVCareerPathSentence.tsx
index 8a2bf8975..bb3ffac08 100644
--- a/src/components/cv/CVCareerPathSentence/CVCareerPathSentence.tsx
+++ b/src/components/cv/CVCareerPathSentence/CVCareerPathSentence.tsx
@@ -50,7 +50,7 @@ export const CVCareerPathSentence = ({
               fontSize: 'inherit',
             }}
           >
-            {sortedAmbitions[0].name || sortedAmbitions[0]}
+            {sortedAmbitions[0].name}
           </span>
           {sortedAmbitions.length > 1 && (
             <>
@@ -63,7 +63,7 @@ export const CVCareerPathSentence = ({
                   fontSize: 'inherit',
                 }}
               >
-                {sortedAmbitions[1].name || sortedAmbitions[1]}
+                {sortedAmbitions[1].name}
               </span>
             </>
           )}
diff --git a/src/components/cv/CVCareerPathSentence/CVCareerPathSentenceNew.tsx b/src/components/cv/CVCareerPathSentence/CVCareerPathSentenceNew.tsx
index c03b526b2..a1afc7a4d 100644
--- a/src/components/cv/CVCareerPathSentence/CVCareerPathSentenceNew.tsx
+++ b/src/components/cv/CVCareerPathSentence/CVCareerPathSentenceNew.tsx
@@ -44,15 +44,11 @@ export const CVCareerPathSentenceNew = ({
           J&apos;aimerais travailler{' '}
           {sortedAmbitions[0].prefix ||
             AMBITIONS_PREFIXES[0].label.toLowerCase()}{' '}
-          <span className="orange">
-            {sortedAmbitions[0].name || sortedAmbitions[0]}
-          </span>
+          <span className="orange">{sortedAmbitions[0].name}</span>
           {sortedAmbitions.length > 1 && (
             <>
               {getAmbitionsLinkingSentence(sortedAmbitions)}
-              <span className="orange">
-                {sortedAmbitions[1].name || sortedAmbitions[1]}
-              </span>
+              <span className="orange">{sortedAmbitions[1].name}</span>
             </>
           )}
         </>
diff --git a/src/components/cv/CVEditCareerPath.tsx b/src/components/cv/CVEditCareerPath.tsx
index c0e94893a..c152519b6 100644
--- a/src/components/cv/CVEditCareerPath.tsx
+++ b/src/components/cv/CVEditCareerPath.tsx
@@ -77,7 +77,7 @@ export const CVEditCareerPath = ({
               openModal(
                 <ModalEdit
                   title="Édition - Projet professionnel"
-                  description="J'aimerais travailler dans ..."
+                  description="J'aimerais travailler ..."
                   formSchema={formEditCareerPath}
                   defaultValues={defaultValues}
                   onSubmit={async (
diff --git a/src/components/cv/CVEditReviews.js b/src/components/cv/CVEditReviews.tsx
similarity index 84%
rename from src/components/cv/CVEditReviews.js
rename to src/components/cv/CVEditReviews.tsx
index 86dde6680..fa342d754 100644
--- a/src/components/cv/CVEditReviews.js
+++ b/src/components/cv/CVEditReviews.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { formEditTestimonial } from 'src/components/forms/schemas/formEditTestimonial';
 import { openModal } from 'src/components/modals/Modal';
@@ -7,7 +6,17 @@ import { ModalEdit } from 'src/components/modals/Modal/ModalGeneric/ModalEdit';
 import { Grid, ButtonIcon, Icon } from 'src/components/utils';
 import { formatParagraph, sortByName } from 'src/utils';
 
-export const CVEditReviews = ({ reviews, onChange }) => {
+interface Review {
+  name: string;
+  text: string;
+  status: string;
+}
+
+interface CVEditReviewsProps {
+  reviews: Review[];
+  onChange: (updatedCV: { reviews: Review[] }) => void;
+}
+export const CVEditReviews = ({ reviews, onChange }: CVEditReviewsProps) => {
   const MAX_REVIEWS = 3;
 
   const sortedReviews = sortByName(reviews);
@@ -25,9 +34,9 @@ export const CVEditReviews = ({ reviews, onChange }) => {
                 <ModalEdit
                   title="Ajout - Ils me recommandent"
                   formSchema={formEditTestimonial}
-                  onSubmit={async (fields, closeModal) => {
+                  onSubmit={(fields, closeModal) => {
                     closeModal();
-                    await onChange({
+                    onChange({
                       reviews: [...reviews, fields],
                     });
                   }}
@@ -42,7 +51,7 @@ export const CVEditReviews = ({ reviews, onChange }) => {
         {sortedReviews.length > 0 ? (
           sortedReviews.map((review, i) => {
             return (
-              <li id={i} key={i} className="">
+              <li id={i.toString()} key={i} className="">
                 <Grid
                   eachWidths={['auto', 'expand']}
                   className="uk-padding-small uk-padding-remove-horizontal"
@@ -67,10 +76,10 @@ export const CVEditReviews = ({ reviews, onChange }) => {
                               title="Édition - Ils me recommandent"
                               formSchema={formEditTestimonial}
                               defaultValues={{ ...review }}
-                              onSubmit={async (fields, closeModal) => {
+                              onSubmit={(fields, closeModal) => {
                                 closeModal();
                                 sortedReviews[i] = fields;
-                                await onChange({ reviews: sortedReviews });
+                                onChange({ reviews: sortedReviews });
                               }}
                             />
                           );
@@ -106,17 +115,3 @@ export const CVEditReviews = ({ reviews, onChange }) => {
     </div>
   );
 };
-CVEditReviews.propTypes = {
-  reviews: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired,
-    })
-  ),
-  onChange: PropTypes.func,
-};
-CVEditReviews.defaultProps = {
-  reviews: [],
-  onChange: null,
-};
diff --git a/src/components/forms/FormWithValidation.tsx b/src/components/forms/FormWithValidation.tsx
index 386a022de..8409a835a 100644
--- a/src/components/forms/FormWithValidation.tsx
+++ b/src/components/forms/FormWithValidation.tsx
@@ -31,7 +31,7 @@ interface FormWithValidationProps<S extends FormSchema<AnyCantFix>> {
   submitText?: string;
   cancelText?: string;
   enterToSubmit?: boolean;
-  ref?: Ref<{ resetForm: () => void }>;
+  innerRef?: Ref<{ resetForm: () => void }>;
 }
 
 export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
@@ -43,7 +43,7 @@ export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
   onCancel,
   enterToSubmit = false,
   onError,
-  ref,
+  innerRef,
 }: FormWithValidationProps<S>) {
   const { id: formId, fields } = formSchema;
 
@@ -63,9 +63,9 @@ export function FormWithValidation<S extends FormSchema<AnyCantFix>>({
       shouldUnregister: true,
     });
 
-  useImperativeHandle(ref, () => {
+  useImperativeHandle(innerRef, () => {
     return {
-      resetForm: reset,
+      resetForm: () => reset({} as ExtractFormSchemaValidation<S>),
     };
   });
 
diff --git a/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx b/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx
index ba7754093..b5cd17b98 100644
--- a/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx
+++ b/src/components/forms/fields/FieldErrorMessage/FieldErrorMessage.tsx
@@ -4,11 +4,19 @@ import { StyledErrorMessage } from './FieldErrorMessage.styles';
 
 interface FieldErrorMessageProps {
   error?: FieldError;
+  className?: string;
 }
 
-export const FieldErrorMessage = ({ error }: FieldErrorMessageProps) => {
+export const FieldErrorMessage = ({
+  error,
+  className,
+}: FieldErrorMessageProps) => {
   if (error?.message) {
-    return <StyledErrorMessage>{error.message}</StyledErrorMessage>;
+    return (
+      <StyledErrorMessage className={className}>
+        {error.message}
+      </StyledErrorMessage>
+    );
   }
   return null;
 };
diff --git a/src/components/forms/fields/GenericField.tsx b/src/components/forms/fields/GenericField.tsx
index 3f9218b19..b595070d2 100644
--- a/src/components/forms/fields/GenericField.tsx
+++ b/src/components/forms/fields/GenericField.tsx
@@ -75,7 +75,12 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
     rules: {
       required: field.isRequired ? 'Obligatoire' : false,
       ...(isFormFieldTextInput(field) && field.maxLength
-        ? { maxLength: field.maxLength }
+        ? {
+            maxLength: {
+              value: field.maxLength,
+              message: `${field.maxLength} caractères maximum`,
+            },
+          }
         : {}),
       validate: rules || {},
     },
@@ -88,7 +93,7 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
       if (isFormFieldSelect(field) || isFormFieldSelectRequest(field)) {
         if (field.fieldsToReset) {
           for (let i = 0; i < field.fieldsToReset.length; i += 1) {
-            resetField(field.fieldsToReset[i]);
+            resetField(field.fieldsToReset[i], { defaultValue: null });
           }
         }
       }
@@ -136,7 +141,13 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
   }
 
   if (field.component === 'text-input') {
-    return <TextInput {...commonProps} type={field.type} />;
+    return (
+      <TextInput
+        {...commonProps}
+        type={field.type}
+        maxLength={field.maxLength}
+      />
+    );
   }
 
   if (field.component === 'tel-input') {
@@ -144,7 +155,13 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
   }
 
   if (field.component === 'textarea') {
-    return <TextArea {...commonProps} maxLines={field.maxLines} />;
+    return (
+      <TextArea
+        {...commonProps}
+        maxLines={field.maxLines}
+        maxLength={field.maxLength}
+      />
+    );
   }
 
   if (field.component === 'checkbox') {
diff --git a/src/components/forms/schemas/formEditCareerPath.ts b/src/components/forms/schemas/formEditCareerPath.ts
index 6b658b8c8..8ae9c55dd 100644
--- a/src/components/forms/schemas/formEditCareerPath.ts
+++ b/src/components/forms/schemas/formEditCareerPath.ts
@@ -10,6 +10,25 @@ export const formEditCareerPath: FormSchema<{
 }> = {
   id: 'form-career-path',
   fields: [
+    {
+      id: 'carreerPathText0',
+      name: 'carreerPathText0',
+      component: 'fieldgroup',
+      fields: [
+        {
+          id: 'linkWordIn0',
+          name: 'linkWordIn0',
+          component: 'text',
+          title: 'dans',
+        },
+        {
+          id: 'linkWordLike0',
+          name: 'linkWordLike0',
+          component: 'text',
+          title: 'comme',
+        },
+      ],
+    },
     {
       id: 'carreerPath0',
       name: 'carreerPath0',
@@ -23,12 +42,6 @@ export const formEditCareerPath: FormSchema<{
           options: BUSINESS_LINES,
           isRequired: true,
         },
-        {
-          id: 'linkWord0',
-          name: 'linkWord0',
-          component: 'text',
-          title: 'comme',
-        },
         {
           id: 'ambition0',
           name: 'ambition0',
@@ -37,6 +50,25 @@ export const formEditCareerPath: FormSchema<{
         },
       ],
     },
+    {
+      id: 'carreerPathText1',
+      name: 'carreerPathText1',
+      component: 'fieldgroup',
+      fields: [
+        {
+          id: 'linkWordIn1',
+          name: 'linkWordIn1',
+          component: 'text',
+          title: 'dans',
+        },
+        {
+          id: 'linkWordLike1',
+          name: 'linkWordLike1',
+          component: 'text',
+          title: 'comme',
+        },
+      ],
+    },
     {
       id: 'carreerPath1',
       name: 'carreerPath1',
@@ -57,12 +89,6 @@ export const formEditCareerPath: FormSchema<{
             },
           ],
         },
-        {
-          id: 'linkWord1',
-          name: 'linkWord1',
-          component: 'text',
-          title: 'comme',
-        },
         {
           id: 'ambition1',
           name: 'ambition1',
diff --git a/src/components/forms/schemas/formEditTestimonial.ts b/src/components/forms/schemas/formEditTestimonial.ts
index 3b5f1cf3b..2f170bdd0 100644
--- a/src/components/forms/schemas/formEditTestimonial.ts
+++ b/src/components/forms/schemas/formEditTestimonial.ts
@@ -21,7 +21,7 @@ export const formEditTestimonial: FormSchema<{
       component: 'text-input',
       title: 'Statut *',
       isRequired: true,
-      maxLength: 4000,
+      maxLength: 80,
     },
     {
       id: 'text',
@@ -29,7 +29,7 @@ export const formEditTestimonial: FormSchema<{
       component: 'textarea',
       title: 'Votre recommandation*',
       isRequired: true,
-      maxLength: 80,
+      maxLength: 4000,
     },
   ],
 };
diff --git a/src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV/ModalShareCV.js b/src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV/ModalShareCV.js
index 863b8bb7f..a0da9f2c8 100644
--- a/src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV/ModalShareCV.js
+++ b/src/components/modals/Modal/ModalGeneric/StepperModal/ModalShareCV/ModalShareCV.js
@@ -27,6 +27,7 @@ export const ModalShareCV = ({ firstName }) => {
                 <br />
                 Vous souhaitez être informé(e) de la suite pour {firstName} ? Et
                 du projet LinkedOut ?<br />
+                <br />
                 Laissez-nous votre adresse mail :
               </p>
               <FormWithValidation
diff --git a/src/components/opportunities/OpportunityList.js b/src/components/opportunities/OpportunityList.js
index e3cedebdb..8b3ee301a 100644
--- a/src/components/opportunities/OpportunityList.js
+++ b/src/components/opportunities/OpportunityList.js
@@ -163,7 +163,7 @@ export const OpportunityList = ({
   resetFilters,
   tabFilters,
   setTabFilters,
-  listRef,
+  innerRef,
 }) => {
   const {
     push,
@@ -220,7 +220,7 @@ export const OpportunityList = ({
     return filter.active;
   })?.tag;
 
-  useImperativeHandle(listRef, () => {
+  useImperativeHandle(innerRef, () => {
     return {
       fetchData: () => {
         return fetchData(role, search, tabFilterTag, filters, candidateId);
@@ -512,9 +512,9 @@ OpportunityList.propTypes = {
   resetFilters: PropTypes.func,
   tabFilters: PropTypes.arrayOf(PropTypes.shape({})),
   setTabFilters: PropTypes.func,
-  listRef: PropTypes.exact({
+  innerRef: PropTypes.exact({
     current: PropTypes.exact({ fetchData: PropTypes.func }),
-  }).isRequired,
+  }),
 };
 
 OpportunityList.defaultProps = {
diff --git a/src/components/partials/CV/CVCallToActions/CVShareButtons/CVShareButtons.tsx b/src/components/partials/CV/CVCallToActions/CVShareButtons/CVShareButtons.tsx
index 69a867241..e37b5b708 100644
--- a/src/components/partials/CV/CVCallToActions/CVShareButtons/CVShareButtons.tsx
+++ b/src/components/partials/CV/CVCallToActions/CVShareButtons/CVShareButtons.tsx
@@ -22,7 +22,7 @@ import {
   StyledCVShareButtonsContainer,
 } from './CVShareButtons.styles';
 
-interface CVCallToActionsProps {
+interface CVShareButtonsProps {
   cv: CV;
   actionDisabled?: boolean;
 }
@@ -30,7 +30,7 @@ interface CVCallToActionsProps {
 export const CVShareButtons = ({
   cv,
   actionDisabled = false,
-}: CVCallToActionsProps) => {
+}: CVShareButtonsProps) => {
   const updateSharesCount = useUpdateSharesCount();
 
   const openNewsletterModal = useCallback(() => {
@@ -59,10 +59,10 @@ export const CVShareButtons = ({
         onClick={() => {
           fbEvent(FB_TAGS.SHARE_CV_OPEN);
         }}
-        onShareWindowClose={() => {
+        onShareWindowClose={async () => {
           gaEvent(GA_TAGS.PAGE_CV_PARTAGE_CV_LINKEDIN_CLIC);
           fbEvent(FB_TAGS.SHARE_CV_SEND);
-          updateSharesCount(cv.UserId, 'linkedin');
+          await updateSharesCount(cv.UserId, 'linkedin');
           openNewsletterModal();
         }}
         url={link}
@@ -78,10 +78,10 @@ export const CVShareButtons = ({
         onClick={() => {
           fbEvent(FB_TAGS.SHARE_CV_OPEN);
         }}
-        onShareWindowClose={() => {
+        onShareWindowClose={async () => {
           gaEvent(GA_TAGS.PAGE_CV_PARTAGE_CV_FACEBOOK_CLIC);
           fbEvent(FB_TAGS.SHARE_CV_SEND);
-          updateSharesCount(cv.UserId, 'facebook');
+          await updateSharesCount(cv.UserId, 'facebook');
           openNewsletterModal();
         }}
         url={link}
@@ -97,10 +97,10 @@ export const CVShareButtons = ({
         onClick={() => {
           fbEvent(FB_TAGS.SHARE_CV_OPEN);
         }}
-        onShareWindowClose={() => {
+        onShareWindowClose={async () => {
           gaEvent(GA_TAGS.PAGE_CV_PARTAGE_CV_TWITTER_CLIC);
           fbEvent(FB_TAGS.SHARE_CV_SEND);
-          updateSharesCount(cv.UserId, 'twitter');
+          await updateSharesCount(cv.UserId, 'twitter');
           openNewsletterModal();
         }}
         url={link}
@@ -117,10 +117,10 @@ export const CVShareButtons = ({
         onClick={() => {
           fbEvent(FB_TAGS.SHARE_CV_OPEN);
         }}
-        onShareWindowClose={() => {
+        onShareWindowClose={async () => {
           gaEvent(GA_TAGS.PAGE_CV_PARTAGE_CV_WHATSAPP_CLIC);
           fbEvent(FB_TAGS.SHARE_CV_SEND);
-          updateSharesCount(cv.UserId, 'whatsapp');
+          await updateSharesCount(cv.UserId, 'whatsapp');
           openNewsletterModal();
         }}
         url={link}
diff --git a/src/components/utils/Inputs/CheckBox/CheckBox.tsx b/src/components/utils/Inputs/CheckBox/CheckBox.tsx
index b1e396759..7f555345e 100644
--- a/src/components/utils/Inputs/CheckBox/CheckBox.tsx
+++ b/src/components/utils/Inputs/CheckBox/CheckBox.tsx
@@ -26,6 +26,7 @@ export function CheckBox({
 
   return (
     <StyledCheckbox
+      disabled={disabled}
       removeMargin={removeMargin}
       onClick={(e) => {
         e.stopPropagation();
diff --git a/src/components/utils/Inputs/DatePicker/DatePicker.tsx b/src/components/utils/Inputs/DatePicker/DatePicker.tsx
index 6ee84320c..25b6294b9 100644
--- a/src/components/utils/Inputs/DatePicker/DatePicker.tsx
+++ b/src/components/utils/Inputs/DatePicker/DatePicker.tsx
@@ -31,6 +31,7 @@ export function DatePicker({
 
   return (
     <StyledDatePickerContainer
+      disabled={disabled}
       className={`${hidden ? 'uk-hidden' : ''}`}
       onClick={(e) => {
         e.stopPropagation();
diff --git a/src/components/utils/Inputs/Inputs.styles.ts b/src/components/utils/Inputs/Inputs.styles.ts
index c32740a0f..f1dadeb90 100644
--- a/src/components/utils/Inputs/Inputs.styles.ts
+++ b/src/components/utils/Inputs/Inputs.styles.ts
@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import { FieldErrorMessage } from '../../forms/fields/FieldErrorMessage/FieldErrorMessage';
+import { StyledErrorMessage } from '../../forms/fields/FieldErrorMessage/FieldErrorMessage.styles';
 import { COLORS } from 'src/constants/styles';
 
 export const commonMenuOptionStyles = css`
@@ -24,6 +26,7 @@ export const commonInputContainerStyles = css`
   flex-direction: column;
   position: relative;
   min-height: 30px;
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
 `;
 export const commonInputStyles = css`
   font-family: Poppins, sans-serif;
@@ -50,3 +53,27 @@ export const StyledInputLabel = styled.label`
   font-family: Poppins, sans-serif;
   display: inline-block;
 `;
+
+export const StyledAnnotations = styled.div`
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 12px;
+  width: 100%;
+  align-items: center;
+`;
+
+export const StyledAnnotationsErrorMessage = styled(FieldErrorMessage)`
+  position: relative !important;
+  bottom: 0 !important;
+`;
+
+export const StyledLimit = styled.div`
+  color: ${({ warning }) => {
+    return warning ? COLORS.noRed : COLORS.darkGray;
+  }};
+  font-size: 12px;
+  line-height: 12px;
+  text-align: right;
+  align-self: flex-end;
+`;
diff --git a/src/components/utils/Inputs/Inputs.types.ts b/src/components/utils/Inputs/Inputs.types.ts
index b8c7c9122..7746b43e9 100644
--- a/src/components/utils/Inputs/Inputs.types.ts
+++ b/src/components/utils/Inputs/Inputs.types.ts
@@ -1,4 +1,4 @@
-import { Component, Ref } from 'react';
+import { Component, RefCallback } from 'react';
 import { FieldError } from 'react-hook-form';
 import { AnyCantFix } from 'src/utils/Types';
 
@@ -17,5 +17,5 @@ export interface CommonInputProps<
   hidden?: boolean;
   showLabel?: boolean;
   placeholder?: string;
-  inputRef?: Ref<K>;
+  inputRef?: RefCallback<K>;
 }
diff --git a/src/components/utils/Inputs/PhoneInput/PhoneInput.tsx b/src/components/utils/Inputs/PhoneInput/PhoneInput.tsx
index ec73ee8c9..1b6bbe60e 100644
--- a/src/components/utils/Inputs/PhoneInput/PhoneInput.tsx
+++ b/src/components/utils/Inputs/PhoneInput/PhoneInput.tsx
@@ -38,7 +38,7 @@ export function PhoneInput({
   }
 
   return (
-    <StyledPhoneInput>
+    <StyledPhoneInput disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
diff --git a/src/components/utils/Inputs/Radio/Radio.styles.ts b/src/components/utils/Inputs/Radio/Radio.styles.ts
index dfeb45dce..71976b432 100644
--- a/src/components/utils/Inputs/Radio/Radio.styles.ts
+++ b/src/components/utils/Inputs/Radio/Radio.styles.ts
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { COLORS } from 'src/constants/styles';
 
 export const StyledRadioContainer = styled.div`
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+
   font-family: Poppins, sans-serif;
 
   legend {
diff --git a/src/components/utils/Inputs/Radio/Radio.tsx b/src/components/utils/Inputs/Radio/Radio.tsx
index 37e0d9170..2324b7aa9 100644
--- a/src/components/utils/Inputs/Radio/Radio.tsx
+++ b/src/components/utils/Inputs/Radio/Radio.tsx
@@ -50,7 +50,11 @@ export function Radio({
   }
 
   return (
-    <StyledRadioContainer id={id} data-testid={`test-${id}`}>
+    <StyledRadioContainer
+      id={id}
+      data-testid={`test-${id}`}
+      disabled={disabled}
+    >
       {typeof options === null ? (
         <legend>{errorMessage}</legend>
       ) : (
diff --git a/src/components/utils/Inputs/SelectSimple/SelectSimple.tsx b/src/components/utils/Inputs/SelectSimple/SelectSimple.tsx
index fb33bc5c4..fa5b78143 100644
--- a/src/components/utils/Inputs/SelectSimple/SelectSimple.tsx
+++ b/src/components/utils/Inputs/SelectSimple/SelectSimple.tsx
@@ -49,7 +49,7 @@ export function SelectSimple<T extends string | number | boolean>({
   }
 
   return (
-    <StyledSelectContainer id={selectId}>
+    <StyledSelectContainer id={selectId} disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
diff --git a/src/components/utils/Inputs/Selects/Select/Select.tsx b/src/components/utils/Inputs/Selects/Select/Select.tsx
index 18ee7fa2d..6393d1f76 100644
--- a/src/components/utils/Inputs/Selects/Select/Select.tsx
+++ b/src/components/utils/Inputs/Selects/Select/Select.tsx
@@ -41,7 +41,7 @@ export function Select<T extends FilterConstant | FilterConstant[]>({
   }
 
   return (
-    <StyledSelectContainer>
+    <StyledSelectContainer disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
diff --git a/src/components/utils/Inputs/Selects/SelectAsync/SelectAsync.tsx b/src/components/utils/Inputs/Selects/SelectAsync/SelectAsync.tsx
index 5bb7d8ac7..479bcd5a5 100644
--- a/src/components/utils/Inputs/Selects/SelectAsync/SelectAsync.tsx
+++ b/src/components/utils/Inputs/Selects/SelectAsync/SelectAsync.tsx
@@ -72,8 +72,10 @@ export function SelectAsync<T extends FilterConstant | FilterConstant[]>({
     return null;
   }
 
+  console.log('value', name, value);
+
   return (
-    <StyledSelectContainer>
+    <StyledSelectContainer disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
diff --git a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
index f2a18b6a5..fb36328a5 100644
--- a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
+++ b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
@@ -40,7 +40,7 @@ export function SelectCreatable<T extends FilterConstant | FilterConstant[]>({
   }
 
   return (
-    <StyledSelectContainer>
+    <StyledSelectContainer disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
diff --git a/src/components/utils/Inputs/Text/Text.styles.ts b/src/components/utils/Inputs/Text/Text.styles.ts
new file mode 100644
index 000000000..3be6b6494
--- /dev/null
+++ b/src/components/utils/Inputs/Text/Text.styles.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { COLORS } from 'src/constants/styles';
+
+export const StyledText = styled.p`
+  font-style: italic;
+  color: ${COLORS.darkGrayFont};
+  margin-top: 0;
+  font-size: 14px;
+  margin-bottom: 30px;
+`;
diff --git a/src/components/utils/Inputs/Text/Text.tsx b/src/components/utils/Inputs/Text/Text.tsx
index a81449ca4..1b7154fce 100644
--- a/src/components/utils/Inputs/Text/Text.tsx
+++ b/src/components/utils/Inputs/Text/Text.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyledText } from './Text.styles';
 
 interface TextProps {
   id: string;
@@ -6,8 +7,8 @@ interface TextProps {
 }
 export function Text({ id, title }: TextProps) {
   return (
-    <p id={id} data-testid={id}>
+    <StyledText id={id} data-testid={id}>
       {title}
-    </p>
+    </StyledText>
   );
 }
diff --git a/src/components/utils/Inputs/TextArea/TextArea.styles.tsx b/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
index 9ad21dd2f..ac84a8454 100644
--- a/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
+++ b/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
@@ -44,18 +44,3 @@ export const StyledTextAreaScrollContainer = styled.div`
   }};
   min-width: 300px;
 `;
-
-export const StyledAnnotations = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const StyledLineLimit = styled.div`
-  color: ${({ warning }) => {
-    return warning ? COLORS.noRed : COLORS.darkGray;
-  }};
-  font-size: 12px;
-  text-align: right;
-  align-self: flex-end;
-  transform: translate(0, -30px);
-`;
diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx
index 68e4fc475..7a7f91e03 100644
--- a/src/components/utils/Inputs/TextArea/TextArea.tsx
+++ b/src/components/utils/Inputs/TextArea/TextArea.tsx
@@ -1,12 +1,15 @@
-import React, { ChangeEvent, MutableRefObject } from 'react';
-import { StyledInputLabel } from '../Inputs.styles';
+import React, { ChangeEvent, RefCallback } from 'react';
+import { StyledErrorMessage } from '../../../forms/fields/FieldErrorMessage/FieldErrorMessage.styles';
+import {
+  StyledAnnotations,
+  StyledAnnotationsErrorMessage,
+  StyledInputLabel,
+  StyledLimit,
+} from '../Inputs.styles';
 import { CommonInputProps } from '../Inputs.types';
-import { StyledLengthLimit } from '../TextInput/TextInput.styles';
 import { FieldErrorMessage } from 'src/components/forms/fields/FieldErrorMessage/FieldErrorMessage';
 import { useIsMobile } from 'src/hooks/utils';
 import {
-  StyledAnnotations,
-  StyledLineLimit,
   StyledTextArea,
   StyledTextAreaContainer,
   StyledTextAreaScrollContainer,
@@ -42,7 +45,6 @@ export function TextArea({
     value,
     name,
     onChange,
-    inputRef as MutableRefObject<HTMLTextAreaElement>,
     maxLines?.lines
   );
 
@@ -55,7 +57,7 @@ export function TextArea({
   const remainingCharacters = (maxLength || 0) - (value || '').length;
 
   return (
-    <StyledTextAreaContainer>
+    <StyledTextAreaContainer disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
@@ -71,7 +73,10 @@ export function TextArea({
           isMobile={isMobile}
           hasLineLimit={!!maxLines}
           width={maxLinesWidth}
-          ref={textAreaRef}
+          ref={(e) => {
+            if (inputRef) inputRef(e);
+            textAreaRef.current = e;
+          }}
           name={name}
           id={id}
           rows={rows || 5}
@@ -85,21 +90,25 @@ export function TextArea({
           value={value || ''}
         />
       </StyledTextAreaScrollContainer>
-      <StyledAnnotations>
-        <div>
-          <FieldErrorMessage error={error} />
-        </div>
-        {maxLines && (
-          <StyledLineLimit warning={remainingLines === 0}>
-            {remainingLines} ligne(s) restante(s)
-          </StyledLineLimit>
-        )}
-        {!maxLines && maxLength && (
-          <StyledLengthLimit warning={remainingCharacters === 0}>
-            {remainingCharacters} caractère(s) restant(s)
-          </StyledLengthLimit>
-        )}
-      </StyledAnnotations>
+      {maxLines || maxLength ? (
+        <StyledAnnotations>
+          <div>
+            <StyledAnnotationsErrorMessage error={error} />
+          </div>
+          {maxLines && (
+            <StyledLimit warning={remainingLines === 0}>
+              {remainingLines} ligne(s) restante(s)
+            </StyledLimit>
+          )}
+          {!maxLines && maxLength && (
+            <StyledLimit warning={remainingCharacters === 0}>
+              {remainingCharacters} caractère(s) restant(s)
+            </StyledLimit>
+          )}
+        </StyledAnnotations>
+      ) : (
+        <FieldErrorMessage error={error} />
+      )}
     </StyledTextAreaContainer>
   );
 }
diff --git a/src/components/utils/Inputs/TextArea/useLineLimit.ts b/src/components/utils/Inputs/TextArea/useLineLimit.ts
index ab5a6c62b..6cbb3261f 100644
--- a/src/components/utils/Inputs/TextArea/useLineLimit.ts
+++ b/src/components/utils/Inputs/TextArea/useLineLimit.ts
@@ -1,6 +1,5 @@
 import { useWindowWidth } from '@react-hook/window-size';
 import {
-  MutableRefObject,
   useCallback,
   useEffect,
   useRef,
@@ -13,7 +12,6 @@ export function useLineLimit(
   value: string,
   name: string,
   onChange: (updatedValue: string) => void,
-  inputRef?: MutableRefObject<HTMLTextAreaElement>,
   maxLines?: number
 ) {
   const windowWidth = useWindowWidth();
@@ -22,7 +20,6 @@ export function useLineLimit(
   const [textAreaWidth, setTextAreaWidth] = useState(0);
 
   const ref = useRef<HTMLTextAreaElement>();
-  const refToUse = inputRef || ref;
 
   const prevValue: string = usePrevious(value);
 
@@ -64,8 +61,8 @@ export function useLineLimit(
     maxLines - numberOfLines < 0 ? 0 : maxLines - numberOfLines;
 
   useEffect(() => {
-    if (maxLines && refToUse && refToUse.current && value !== prevValue) {
-      const ta = refToUse.current;
+    if (maxLines && ref && ref.current && value !== prevValue) {
+      const ta = ref.current;
 
       const style = window.getComputedStyle
         ? window.getComputedStyle(ta)
@@ -93,15 +90,7 @@ export function useLineLimit(
         setNumberOfLines(!value ? 0 : nbOfLines);
       }
     }
-  }, [
-    calculateContentHeight,
-    maxLines,
-    name,
-    onChange,
-    prevValue,
-    refToUse,
-    value,
-  ]);
+  }, [calculateContentHeight, maxLines, name, onChange, prevValue, ref, value]);
 
   useEffect(() => {
     const modal = document.getElementById('modal-screen')
@@ -132,5 +121,5 @@ export function useLineLimit(
     }
   }, [windowWidth]);
 
-  return { remainingLines, textAreaRef: refToUse, textAreaWidth };
+  return { remainingLines, textAreaRef: ref, textAreaWidth };
 }
diff --git a/src/components/utils/Inputs/TextInput/TextInput.styles.ts b/src/components/utils/Inputs/TextInput/TextInput.styles.ts
index 3cbffb193..ab2e73ad2 100644
--- a/src/components/utils/Inputs/TextInput/TextInput.styles.ts
+++ b/src/components/utils/Inputs/TextInput/TextInput.styles.ts
@@ -26,18 +26,3 @@ export const StyledTextInputContainer = styled.div`
     }
   }
 `;
-
-export const StyledAnnotations = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const StyledLengthLimit = styled.div`
-  color: ${({ warning }) => {
-    return warning ? COLORS.noRed : COLORS.darkGray;
-  }};
-  font-size: 12px;
-  text-align: right;
-  align-self: flex-end;
-  transform: translate(0, -30px);
-`;
diff --git a/src/components/utils/Inputs/TextInput/TextInput.tsx b/src/components/utils/Inputs/TextInput/TextInput.tsx
index b93d67731..75895c0ad 100644
--- a/src/components/utils/Inputs/TextInput/TextInput.tsx
+++ b/src/components/utils/Inputs/TextInput/TextInput.tsx
@@ -1,12 +1,14 @@
 import React, { ChangeEvent } from 'react';
-import { StyledInputLabel } from '../Inputs.styles';
-import { CommonInputProps } from '../Inputs.types';
-import { FieldErrorMessage } from 'src/components/forms/fields/FieldErrorMessage/FieldErrorMessage';
+import { StyledErrorMessage } from '../../../forms/fields/FieldErrorMessage/FieldErrorMessage.styles';
 import {
   StyledAnnotations,
-  StyledLengthLimit,
-  StyledTextInputContainer,
-} from './TextInput.styles';
+  StyledAnnotationsErrorMessage,
+  StyledInputLabel,
+  StyledLimit,
+} from '../Inputs.styles';
+import { CommonInputProps } from '../Inputs.types';
+import { FieldErrorMessage } from 'src/components/forms/fields/FieldErrorMessage/FieldErrorMessage';
+import { StyledTextInputContainer } from './TextInput.styles';
 
 interface TextInputProps extends CommonInputProps<string, HTMLInputElement> {
   maxLength?: number;
@@ -38,7 +40,7 @@ export function TextInput({
   const remainingCharacters = (maxLength || 0) - (value || '').length;
 
   return (
-    <StyledTextInputContainer>
+    <StyledTextInputContainer disabled={disabled}>
       {showLabel && (
         <StyledInputLabel htmlFor={`form-input-${name}`}>
           {title}
@@ -60,16 +62,18 @@ export function TextInput({
         id={id}
         data-testid={id}
       />
-      <StyledAnnotations>
-        <div>
-          <FieldErrorMessage error={error} />
-        </div>
-        {maxLength && (
-          <StyledLengthLimit warning={remainingCharacters === 0}>
+      {maxLength ? (
+        <StyledAnnotations>
+          <div>
+            <StyledAnnotationsErrorMessage error={error} />
+          </div>
+          <StyledLimit warning={remainingCharacters === 0}>
             {remainingCharacters} caractère(s) restant(s)
-          </StyledLengthLimit>
-        )}
-      </StyledAnnotations>
+          </StyledLimit>
+        </StyledAnnotations>
+      ) : (
+        <FieldErrorMessage error={error} />
+      )}
     </StyledTextInputContainer>
   );
 }
diff --git a/src/hooks/useUpdateSharesCount.ts b/src/hooks/useUpdateSharesCount.ts
index b46a41d76..8d66db833 100644
--- a/src/hooks/useUpdateSharesCount.ts
+++ b/src/hooks/useUpdateSharesCount.ts
@@ -1,19 +1,19 @@
 import { useCallback, useContext } from 'react';
 import { Api } from 'src/api';
+import { SocialMedia } from 'src/api/types';
 import { SharesCountContext } from 'src/store/SharesCountProvider';
 
 export function useUpdateSharesCount() {
   const { incrementSharesCount } = useContext(SharesCountContext);
 
   return useCallback(
-    (candidateId, type) => {
-      Api.postCVCount(candidateId, type)
-        .then(() => {
-          incrementSharesCount();
-        })
-        .catch((err) => {
-          console.error(err);
-        });
+    async (candidateId: string, type: SocialMedia) => {
+      try {
+        await Api.postCVCount(candidateId, type);
+        incrementSharesCount();
+      } catch (err) {
+        console.error(err);
+      }
     },
     [incrementSharesCount]
   );
diff --git a/src/pages/backoffice/candidat/[candidateId]/suivi.tsx b/src/pages/backoffice/candidat/[candidateId]/suivi.tsx
index fdcfb8f19..d58172a3f 100644
--- a/src/pages/backoffice/candidat/[candidateId]/suivi.tsx
+++ b/src/pages/backoffice/candidat/[candidateId]/suivi.tsx
@@ -22,7 +22,7 @@ const Suivi = () => {
   const { user } = useContext(UserContext);
   const [userCandidat, setUserCandidat] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [value, setValue] = useState();
+  const [value, setValue] = useState<string>();
   const candidateId = useCandidateId();
 
   const prevUser = usePrevious(user);
@@ -36,22 +36,25 @@ const Suivi = () => {
       ? "Ici, vous pouvez prendre des notes sur la progression de vos recherches, noter vos différents rendez-vous, etc. et échanger avec votre coach. Profitez de cet espace d'écriture libre qui vous est dédié !"
       : "Ici, vous pouvez suivre la progression de votre candidat.e grâce à ses notes, et échanger avec lui/elle. Profitez de cet espace d'échange libre qui vous est dédié !";
 
-  const updateValue = (text) => {
+  const updateValue = useCallback((text) => {
     setValue(text || '');
-  };
+  }, []);
 
-  const updateSuivi = (note) => {
-    Api.putCandidate(userCandidat.candidat.id, {
-      note,
-    })
-      .then(() => {
-        setUserCandidat({ ...userCandidat, note });
+  const updateSuivi = useCallback(
+    async (note) => {
+      try {
+        await Api.putCandidate(userCandidat.candidat.id, {
+          note,
+        });
+        setUserCandidat((prevUserCandidat) => ({ ...prevUserCandidat, note }));
         UIkit.notification('Suivi sauvegardé', 'success');
-      })
-      .catch(() => {
+      } catch (err) {
+        console.error(err);
         UIkit.notification('Erreur lors de la mise à jour du suivi', 'danger');
-      });
-  };
+      }
+    },
+    [userCandidat]
+  );
 
   const sendNoteHasBeenRead = useCallback(async () => {
     if (user && user.role !== USER_ROLES.ADMIN && userCandidat?.candidat?.id) {
@@ -61,7 +64,7 @@ const Suivi = () => {
         console.error(err);
       }
     }
-  }, [user, userCandidat?.candidat?.id]);
+  }, [user, userCandidat]);
 
   useEffect(() => {
     if (user && user !== prevUser) {
@@ -85,7 +88,7 @@ const Suivi = () => {
           return setLoading(false);
         });
     }
-  }, [prevUser, sendNoteHasBeenRead, user, candidateId]);
+  }, [prevUser, sendNoteHasBeenRead, user, candidateId, updateValue]);
 
   let content;
   if (loading || !user) {
@@ -117,9 +120,7 @@ const Suivi = () => {
             name="textarea-suivi"
             rows={10}
             value={value}
-            onChange={(updatedValue) => {
-              return updateValue(updatedValue);
-            }}
+            onChange={updateValue}
             showLabel
             placeholder="Tapez votre texte"
             title={title}
@@ -129,7 +130,7 @@ const Suivi = () => {
           <Button
             style="default"
             onClick={() => {
-              return updateValue(userCandidat.note);
+              updateValue(userCandidat.note);
             }}
             disabled={value === userCandidat.note}
           >
@@ -137,9 +138,7 @@ const Suivi = () => {
           </Button>
           <Button
             style="default"
-            onClick={() => {
-              return updateSuivi(value);
-            }}
+            onClick={() => updateSuivi(value)}
             disabled={value === userCandidat.note}
           >
             Sauvegarder
diff --git a/src/pages/backoffice/parametres.tsx b/src/pages/backoffice/parametres.tsx
index 5bc1aa684..efbaa9b69 100644
--- a/src/pages/backoffice/parametres.tsx
+++ b/src/pages/backoffice/parametres.tsx
@@ -432,7 +432,7 @@ const Parametres = () => {
               </Grid>
               <PasswordCriterias />
               <FormWithValidation
-                ref={form}
+                innerRef={form}
                 submitText="Modifier"
                 formSchema={formChangePassword}
                 onSubmit={async (
diff --git a/src/pages/contact.js b/src/pages/contact.tsx
similarity index 98%
rename from src/pages/contact.js
rename to src/pages/contact.tsx
index 1913f8386..e287568e5 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.tsx
@@ -31,7 +31,7 @@ const Contact = () => {
           avez des questions sur le projet&nbsp;?
         </h4>
         <FormWithValidation
-          ref={form}
+          innerRef={form}
           submitText="Envoyer"
           formSchema={formInterestLinkedOut}
           onSubmit={(fields) => {
@@ -72,7 +72,6 @@ const Contact = () => {
                   <SimpleLink
                     className="uk-link"
                     href={`tel:${contactPerCity[contact]}`}
-                    newTab
                     isExternal
                   >
                     {contactPerCity[contact]}
diff --git a/src/utils/Sorting.ts b/src/utils/Sorting.ts
index 3b97d2c9e..e86b524f6 100644
--- a/src/utils/Sorting.ts
+++ b/src/utils/Sorting.ts
@@ -1,5 +1,5 @@
 export function sortByOrder<T extends { order: number }[]>(list: T) {
-  const listToSort = JSON.parse(JSON.stringify(list));
+  const listToSort: T = JSON.parse(JSON.stringify(list));
   listToSort.sort((a, b) => {
     return a.order < b.order ? -1 : 1;
   });
@@ -7,7 +7,7 @@ export function sortByOrder<T extends { order: number }[]>(list: T) {
 }
 
 export function sortByName<T extends { name: string }[]>(list: T) {
-  const listToSort = JSON.parse(JSON.stringify(list));
+  const listToSort: T = JSON.parse(JSON.stringify(list));
   listToSort.sort((a, b) => {
     return a.name.localeCompare(b.name) < 0 ? -1 : 1;
   });