Migrated all pages

frontend/src/components/atoms/inputs/TextAreaInput.tsx

@@ -4,7 +4,7 @@ import Label from './Label';
 
 interface TextAreaInputProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label: string;
+  label: string | React.ReactNode;
   helper?: string;
   meta?: string;
   ariaLabel?: string;

frontend/src/components/molecules/FileInput/index.tsx

@@ -26,7 +26,7 @@ type Props = {
   documentType: string;
   disabled: boolean;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  mimeTypes: string;
+  mimeTypes?: string;
   meta?: string;
   documentsToUpload: DocumentToUpload[];
   uploadedDocuments: Document[];

frontend/src/components/organisms/form-sections/CadreJuridiqueSection.js → frontend/src/components/organisms/form-sections/CadreJuridiqueSection.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { ScrollablePanel } from '../Scrollable';
 import { FormContext } from '../../templates/Form';
 import OrWrapper from '../../atoms/inputs/OrWrapper';
@@ -13,7 +12,17 @@ import Link from '../../atoms/hyperTexts/Link';
 const SECTION_LABEL = 'Le cadre juridique';
 const SECTION_ID = encodeURIComponent(SECTION_LABEL);
 
-const CadreJuridiqueSection = ({
+type CadreJuridiqueSectionProps = {
+  CadreJuridiqueDescription?: React.ComponentType;
+  defaultFondementJuridiqueTitle?: string;
+  defaultFondementJuridiqueUrl?: string;
+};
+
+interface CadreJuridiqueSectionType
+  extends React.FC<CadreJuridiqueSectionProps> {
+  sectionLabel: string;
+}
+const CadreJuridiqueSection: CadreJuridiqueSectionType = ({
   CadreJuridiqueDescription,
   defaultFondementJuridiqueTitle,
   defaultFondementJuridiqueUrl,
@@ -130,8 +139,4 @@ const CadreJuridiqueSection = ({
 
 CadreJuridiqueSection.sectionLabel = SECTION_LABEL;
 
-CadreJuridiqueSection.propTypes = {
-  CadreJuridiqueDescription: PropTypes.func,
-};
-
 export default CadreJuridiqueSection;

frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionReadOnly.js → frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionReadOnly.tsx

@@ -6,8 +6,12 @@ import { useAuth } from '../../AuthContext';
 import { findModifiedFields, findModifiedScopes } from '../../../../lib';
 import './DemarcheSectionReadOnly.css';
 import WarningEmoji from '../../../atoms/icons/WarningEmoji';
+import { ScopeConfiguration } from '../DonneesSection/Scopes';
 
-const valueToLabel = (key, scopesConfiguration) => {
+const valueToLabel = (
+  key: string,
+  scopesConfiguration: ScopeConfiguration[]
+) => {
   const scope = find(scopesConfiguration, { value: key });
   if (scope) {
     return scope.label;
@@ -16,18 +20,20 @@ const valueToLabel = (key, scopesConfiguration) => {
   }
 };
 
-export const DemarcheSectionReadOnly = ({
-  scrollableId,
-  scopesConfiguration,
-}) => {
+type DemarcheSectionReadOnlyProps = {
+  scrollableId: string;
+  scopesConfiguration: ScopeConfiguration[];
+};
+
+export const DemarcheSectionReadOnly: React.FC<
+  DemarcheSectionReadOnlyProps
+> = ({ scrollableId, scopesConfiguration }) => {
   const { enrollment, demarches } = useContext(FormContext);
 
   const { demarche: selectedDemarcheId } = enrollment;
-  const {
-    user: { roles },
-  } = useAuth();
+  const { user } = useAuth();
 
-  const [modifiedFields, setModifiedFields] = useState([]);
+  const [modifiedFields, setModifiedFields] = useState<any[]>([]);
   const [modifiedScopes, setModifiedScopes] = useState({});
 
   useEffect(() => {
@@ -63,7 +69,7 @@ export const DemarcheSectionReadOnly = ({
                     selectedDemarcheId}
                 </i>
               </p>
-              {!isEmpty(roles) && !isEmpty(modifiedFields) && (
+              {!isEmpty(user?.roles) && !isEmpty(modifiedFields) && (
                 <p>
                   Certaines des sections pré-remplies par le cas d’usage ont été
                   modifiées.

frontend/src/components/organisms/form-sections/DemarcheSection/index.js → frontend/src/components/organisms/form-sections/DemarcheSection/index.tsx

@@ -2,11 +2,24 @@ import React, { useContext } from 'react';
 import DemarcheSectionReadOnly from './DemarcheSectionReadOnly';
 import DemarcheSectionSelect from './DemarcheSectionSelect';
 import { FormContext } from '../../../templates/Form';
+import { ScopeConfiguration } from '../DonneesSection/Scopes';
 
 const SECTION_LABEL = 'Les modèles pré-remplis';
 const SECTION_ID = encodeURIComponent(SECTION_LABEL);
 
-export const DemarcheSection = ({ body, scopesConfiguration }) => {
+type DemarcheSectionProps = {
+  body?: React.ReactNode;
+  scopesConfiguration?: ScopeConfiguration[];
+};
+
+interface DemarcheSectionType extends React.FC<DemarcheSectionProps> {
+  sectionLabel: string;
+}
+
+export const DemarcheSection: DemarcheSectionType = ({
+  body,
+  scopesConfiguration,
+}) => {
   const { disabled } = useContext(FormContext);
 
   return (

frontend/src/components/organisms/form-sections/OrganisationSection/index.js → frontend/src/components/organisms/form-sections/OrganisationSection/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { isEmpty } from 'lodash';
 import { CardContainer } from '../../../molecules/Card';
 import { ScrollablePanel } from '../../Scrollable';
@@ -8,7 +9,19 @@ import TechnicalTeamCard from './TechnicalTeamCard';
 const SECTION_LABEL = 'L’organisation';
 const SECTION_ID = encodeURIComponent(SECTION_LABEL);
 
-const OrganisationSection = ({ editorList = [], sectionIndex }) => (
+type OrganisationSectionProps = {
+  editorList?: { siret: string; name: string }[];
+  sectionIndex?: number;
+};
+
+interface OrganisationSectionType extends React.FC<OrganisationSectionProps> {
+  sectionLabel: string;
+}
+
+const OrganisationSection: OrganisationSectionType = ({
+  editorList = [],
+  sectionIndex,
+}) => (
   <ScrollablePanel scrollableId={SECTION_ID}>
     <h2>L’organisation</h2>
     <CardContainer>

frontend/src/pages/ApiEntreprise/index.js → frontend/src/pages/ApiEntreprise/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Form from '../../components/templates/Form';
 import OrganisationSection from '../../components/organisms/form-sections/OrganisationSection';
 import DemarcheSection from '../../components/organisms/form-sections/DemarcheSection';
@@ -14,6 +13,7 @@ import ÉquipeSection, {
 import { DATA_PROVIDER_CONFIGURATIONS } from '../../config/data-provider-configurations';
 import WarningEmoji from '../../components/atoms/icons/WarningEmoji';
 import Link from '../../components/atoms/hyperTexts/Link';
+import { ScopeWarningModalType } from '../../config/scope-warning-modal-configuration';
 
 const DonneesDescription = () => (
   <>
@@ -60,7 +60,7 @@ const scopesConfiguration = [
     label: 'Effectifs - GIP-MDS',
     link: 'https://entreprise.api.gouv.fr/catalogue/?APIEntreprise_Endpoint%5Bquery%5D=effectif%20gip',
     triggerWarning: true,
-    warningType: 'apientreprise_sensitive_effectifs',
+    warningType: ScopeWarningModalType.apientreprise_sensitive_effectifs,
   },
   {
     value: 'mandataires_sociaux_infogreffe',
@@ -76,14 +76,14 @@ const scopesConfiguration = [
     value: 'bilans_bdf',
     label: '3 derniers bilans annuels - Banque de France',
     triggerWarning: true,
-    warningType: 'apientreprise_sensitive',
+    warningType: ScopeWarningModalType.apientreprise_sensitive,
     link: 'https://entreprise.api.gouv.fr/catalogue/banque_de_france/bilans',
   },
   {
     value: 'liasses_fiscales_dgfip',
     label: 'Liasses fiscales - DGFIP',
     triggerWarning: true,
-    warningType: 'apientreprise_sensitive',
+    warningType: ScopeWarningModalType.apientreprise_sensitive,
     link: 'https://entreprise.api.gouv.fr/catalogue/dgfip/liasses_fiscales',
   },
   {

frontend/src/pages/DgfipPages/api-impot-particulier-common.js → frontend/src/pages/DgfipPages/api-impot-particulier-common.tsx

@@ -159,7 +159,7 @@ export const fcDemarches = {
 };
 
 export const demarches = fcDemarches;
-demarches.default.state.scopes['dgfip_IndLep'] = false;
+(demarches.default.state.scopes as any).dgfip_IndLep = false;
 
 export const fcScopesConfiguration = [
   {

frontend/src/pages/FranceConnect.js → frontend/src/pages/FranceConnect.tsx

@@ -10,6 +10,7 @@ import CguSection from '../components/organisms/form-sections/CguSection';
 import { DATA_PROVIDER_CONFIGURATIONS } from '../config/data-provider-configurations';
 import DemarcheSection from '../components/organisms/form-sections/DemarcheSection';
 import Link from '../components/atoms/hyperTexts/Link';
+import { ScopeWarningModalType } from '../config/scope-warning-modal-configuration';
 
 const DonneesDescription = () => (
   <>
@@ -185,7 +186,7 @@ export const scopesConfiguration = [
     value: 'preferred_username',
     label: 'Nom d’usage',
     triggerWarning: true,
-    warningType: 'fc_incomplete',
+    warningType: ScopeWarningModalType.fc_incomplete,
   },
   {
     value: 'email',

frontend/src/pages/demarches.test.js → frontend/src/pages/demarches.test.ts

@@ -1,20 +1,59 @@
-const getDemarchesFiles = function (dir, demarches = {}, directory = '') {
-  const fs = require('fs');
+import fs from 'fs';
 
+// Typage pour la structure de demarches.json basé sur l'exemple que vous avez fourni précédemment.
+type Demarche = {
+  label: string;
+  about?: string;
+  state: {
+    intitule?: string;
+    description?: string;
+    fondement_juridique_title?: string;
+    fondement_juridique_url?: string;
+    data_retention_period?: string;
+    data_recipients?: string;
+    scopes: { [key: string]: boolean };
+    [key: string]: any; // pour permettre des clés supplémentaires
+  };
+  team_members?: {
+    responsable_technique?: {
+      given_name: string;
+      family_name: string;
+      email: string;
+      phone_number: string;
+    };
+    contact_metier?: {
+      given_name: string;
+      family_name: string;
+      email: string;
+      phone_number: string;
+    };
+  };
+  [key: string]: any; // pour permettre des clés supplémentaires
+};
+
+type Demarches = { [directory: string]: Demarche };
+
+const getDemarchesFiles = function (
+  dir: string,
+  demarches: Demarches = {},
+  directory = ''
+): Demarches {
   const files = fs.readdirSync(dir);
   files.forEach(function (file) {
     if (fs.statSync(dir + file).isDirectory()) {
       getDemarchesFiles(dir + file + '/', demarches, file);
     } else {
       if (file === 'demarches.json') {
-        var demarche = fs.readFileSync(dir + file, { encoding: 'utf-8' });
+        const demarche = fs.readFileSync(dir + file, { encoding: 'utf-8' });
         demarches[directory] = JSON.parse(demarche);
       }
     }
   });
   return demarches;
 };
 
+// Vos tests restent les mêmes
+
 describe('demarches', () => {
   const allDemarches = getDemarchesFiles('./src/pages/');
   describe('Sanity checks on demarches object', () => {

frontend/tsconfig.json

@@ -5,6 +5,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "downlevelIteration": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,