Rename integration route to developer on site

Add api documentation

api/source/openapi.yaml

@@ -6,6 +6,6 @@ info:
   description: Cet API expose les règles Publicodes de [mon-entreprise](https://mon-entreprise.urssaf.fr/).
 
 servers:
-  - url: https://test-api.osc-fr1.scalingo.io/api/v1/
+  - url: https://mon-entreprise-api.osc-fr1.scalingo.io/api/v1/
 
 paths: {}

site/netlify.toml

@@ -3,11 +3,10 @@ for = "/*"
 [headers.values]
 Content-Security-Policy = "default-src 'self' mon-entreprise.fr; style-src 'self' 'unsafe-inline' mon-entreprise.zammad.com; connect-src 'self' *.incubateur.net raw.githubusercontent.com tm.urssaf.fr mon-entreprise.zammad.com api.recherche-entreprises.fabrique.social.gouv.fr geo.api.gouv.fr *.algolia.net *.algolianet.com; form-action 'self' *.sibforms.com *.incubateur.net mon-entreprise.zammad.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' tm.urssaf.fr *.incubateur.net stonly.com code.jquery.com mon-entreprise.zammad.com polyfill.io; img-src 'self' data: tm.urssaf.fr user-images.githubusercontent.com; frame-src 'self' https://www.youtube-nocookie.com https://codesandbox.io https://place-des-entreprises.beta.gouv.fr https://reso-staging.osc-fr1.scalingo.io"
 
-
-## API proxy
+## Scalingo proxy for API
 [[redirects]]
   from = "/api/*"
-  to = "https://test-api.osc-fr1.scalingo.io/api/:splat" 
+  to = "https://mon-entreprise-api.osc-fr1.scalingo.io/api/:splat"
   status = 200
 
 ## Twemoji proxy for client privacy #1219
@@ -76,10 +75,21 @@ Content-Security-Policy = "default-src 'self' mon-entreprise.fr; style-src 'self
 
 # EN | sasu-chairman -> sasu
 [[redirects]]
-  from=":SITE_FR/simulateurs/sasu-chairman"
-  to=":SITE_FR/simulateurs/sasu"
+  from=":SITE_EN/simulateurs/sasu-chairman"
+  to=":SITE_EN/simulateurs/sasu"
   status = 301
 
+# FR | intégration -> développeur
+[[redirects]]
+  from=":SITE_FR/intégration/*"
+  to=":SITE_FR/développeur/:splat"
+  status = 301
+
+# EN | integration -> developer
+[[redirects]]
+  from=":SITE_EN/integration/*"
+  to=":SITE_EN/developer/:splat"
+  status = 301
 
 
 ############

site/scripts/preCommit/index.ts

@@ -1,7 +1,6 @@
 import { execOnFileChange } from './execOnFileChange.js'
 
-console.log('Search for changed file.')
-console.time('Done in')
+console.log('Search for changed file...')
 
 const results = await execOnFileChange({
 	basePath: './',
@@ -30,5 +29,3 @@ results
 			console.error(result.stderr)
 		}
 	})
-
-console.timeEnd('Done in')

site/source/App.tsx

@@ -130,7 +130,7 @@ const App = () => {
 						path={sitePaths.documentation.index}
 						component={Documentation}
 					/>
-					<Route path={sitePaths.integration.index} component={Integration} />
+					<Route path={sitePaths.développeur.index} component={Integration} />
 					<Route path={sitePaths.nouveautés} component={Nouveautés} />
 					<Route path={sitePaths.stats} component={Stats} />
 					<Route path={sitePaths.budget} component={Budget} />

site/source/components/layout/Footer/Footer.tsx

@@ -88,7 +88,7 @@ export default function Footer() {
 							<FooterColumn>
 								<ul>
 									<li>
-										<Link to={sitePaths.integration.index}>
+										<Link to={sitePaths.développeur.index}>
 											<Trans>Intégrer nos simulateurs</Trans>
 										</Link>
 									</li>

site/source/pages/Simulateurs/Home.tsx

@@ -131,7 +131,7 @@ export default function Simulateurs() {
 						<Li>
 							<Strong>Intégrables facilement et gratuitement</Strong> sur
 							n'importe quel site internet.{' '}
-							<Link to={sitePaths.integration.iframe}>En savoir plus</Link>.
+							<Link to={sitePaths.développeur.iframe}>En savoir plus</Link>.
 						</Li>
 					</Ul>
 				</Trans>

site/source/pages/integration/API.tsx

@@ -0,0 +1,142 @@
+import Emoji from '@/components/utils/Emoji'
+import { ScrollToTop } from '@/components/utils/Scroll'
+import { H1, H2, H3 } from '@/design-system/typography/heading'
+import { Link } from '@/design-system/typography/link'
+import { Body } from '@/design-system/typography/paragraphs'
+import { Trans } from 'react-i18next'
+
+const js = `
+async function salaireNetEnBrutMensuel(net) {
+  const body = {
+    situation: {
+      "contrat salarié . rémunération . net": net + " €",
+    },
+    expressions: [
+      "contrat salarié . rémunération . brut de base",
+      "contrat salarié . prix du travail",
+    ],
+  };
+
+  const response = await fetch(
+    "https://2138--mon-entreprise.netlify.app/api/v1/evaluate",
+    {
+      method: "post",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    }
+  );
+
+  console.log(response);
+
+  const json = await response.json();
+
+  console.log(response.status);
+  console.log(json);
+
+  return json.evaluate.map(({ nodeValue }) => nodeValue);
+}
+
+const [brut, superBrut] = await salaireNetEnBrutMensuel(3500);
+
+console.log(brut, superBrut);
+`
+
+export default function API() {
+	return (
+		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+			<ScrollToTop />
+			<Trans i18nKey="pages.dévelopeurs.api">
+				<H1>Utiliser notre API REST</H1>
+				<Body>
+					Si votre site ou service requiert de faire des calculs de salaire, par
+					exemple passer du salaire brut au salaire net, bonne nouvelle : tous
+					les calculs de cotisations et impôts qui sont derrière mon-entreprise
+					sont libres et utilisé via notre{' '}
+					<Link href="/api/v1/doc/">API REST</Link>.
+					<Link href="https://docs.google.com/spreadsheets/d/1wbfxRdmEbUBgsXbGVc0Q6uqAV4IfLvux6oUJXJLhlaU/edit?usp=sharing">
+						Google Sheets
+					</Link>
+				</Body>
+				<H2>Comment utiliser cette API ?</H2>
+
+				<Body>
+					Toutes nos règles de calculs sont écrites en `publicodes`, un language
+					déclaratif développé par beta.gouv.fr et l'Urssaf pour encoder des
+					algorithmes d'intérêt public.{' '}
+					<Link href="https://publi.codes">En savoir plus sur publicodes</Link>
+				</Body>
+
+				<Body></Body>
+				{/* <H3>Installation</H3> */}
+				<pre>
+					<code>{js}</code>
+				</pre>
+
+				<div
+					className="ui__ full-width"
+					css={`
+						text-align: center;
+					`}
+				>
+					<iframe
+						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+						src="https://stackblitz.com/edit/vitejs-vite-hgagfj?ctl=1&embed=1&file=main.js"
+					></iframe>
+				</div>
+
+				<H3>Lancer le calcul</H3>
+				<Body>
+					Il ne vous reste plus qu'à paramétrer le moteur avec les règles du
+					paquet `modele-social` et à appeler la fonction `evaluate` sur la
+					règle que dont vous souhaitez la valeur. Voici un exemple pour le
+					calcul brut / net
+				</Body>
+				<H2>Paramétrer le calcul</H2>
+				<Body>
+					Vous l'aurez constaté dans l'exemple précédent, la recette d'un calcul
+					est simple : des variables d'entrée (le salaire brut), une ou
+					plusieurs variables de sorties (le salaire net).
+				</Body>
+				<Body>
+					Le calcul est cependant paramétrable avec toutes les possibilités
+					permise dans la legislation.
+				</Body>
+				<Body>
+					Toutes ces variables sont listées et expliquées sur la{' '}
+					<Link target="_blank" rel="noreferrer" href="/documentation">
+						documentation en ligne
+					</Link>
+					. Cette documentation est auto-générée depuis les fichiers de règles
+					publicodes, elle est donc constamment à jour.
+				</Body>
+				<Body>
+					Lançons un calcul plus proche d'une fiche de paie : voici une
+					description de la situation d'entrée annotée de liens vers les pages
+					correspondantes de la documentation :
+				</Body>
+				<blockquote>
+					<Body>
+						{' '}
+						Un{' '}
+						<Link href="https://mon-entreprise.urssaf.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre">
+							cadre
+						</Link>{' '}
+						gagnant{' '}
+						<Link href="https://mon-entreprise.urssaf.fr/documentation/contrat-salarié/rémunération/brut-de-base">
+							3 400€ bruts
+						</Link>{' '}
+						, qui bénéficie de{' '}
+						<Link href="https://mon-entreprise.urssaf.fr/documentation/contrat-salari%C3%A9/frais-professionnels/titres%E2%80%91restaurant">
+							titres-restaurant
+						</Link>{' '}
+						et qui travaille dans une entreprise de{' '}
+						<Link href="https://mon-entreprise.urssaf.fr/documentation/entreprise/effectif">
+							22 salariés
+						</Link>
+						.
+					</Body>
+				</blockquote>
+			</Trans>
+		</div>
+	)
+}

site/source/pages/integration/Library.tsx

@@ -26,7 +26,7 @@ export default function Library() {
 				<Body>
 					Toutes nos règles de calculs sont écrites en `publicodes`, un language
 					déclaratif développé par beta.gouv.fr et l'Urssaf pour encoder des
-					algorithme d'intérêt public.{' '}
+					algorithmes d'intérêt public.{' '}
 					<Link href="https://publi.codes">En savoir plus sur publicodes</Link>
 				</Body>
 				<Body>

site/source/pages/integration/Options.tsx

@@ -40,14 +40,14 @@ export default function Options() {
 				</Intro>
 			</PageHeader>
 			<Grid container spacing={2}>
-				<Grid item xs={12} md={6} xl={3}>
+				<Grid item xs={12} md={6} lg={4}>
 					<Card
 						icon={<Emoji emoji="📱" />}
 						title={t(
 							'pages.développeurs.home.choice.iframe.title',
 							'Intégrer un simulateur'
 						)}
-						to={sitePaths.integration.iframe}
+						to={sitePaths.développeur.iframe}
 						ctaLabel={t(
 							'pages.développeurs.home.choice.iframe.cta',
 							'Commencer'
@@ -61,24 +61,27 @@ export default function Options() {
 						</Body>
 					</Card>
 				</Grid>
-				<Grid item xs={12} md={6} xl={3}>
+
+				<Grid item xs={12} md={6} lg={4}>
 					<Card
-						icon={<Emoji emoji="🧰" />}
+						icon={<Emoji emoji="👩‍💻" />}
 						title={t(
-							'pages.développeurs.choice.library.title',
-							'Libraire de calcul'
+							'pages.développeurs.home.choice.api.title',
+							'Utiliser notre API REST'
 						)}
-						to={sitePaths.integration.library}
-						ctaLabel={t('pages.développeurs.choice.library.cta', 'Commencer')}
+						to={sitePaths.développeur.api}
+						ctaLabel={t('pages.développeurs.home.choice.api.cta', 'Commencer')}
 					>
-						<Trans i18nKey="pages.développeurs.choice.library.body">
-							L'intégralité du moteur de calcul socio-fiscal développé par
-							l'Urssaf, mis à disposition librement sous forme de bibliothèque
-							NPM.
-						</Trans>
+						<Body>
+							<Trans i18nKey="pages.développeurs.home.choice.api.body">
+								Utiliser nos simulateurs via notre API ouverte aussi bien sur
+								votre serveur que dans vos fichier Excel/GSheets.
+							</Trans>
+						</Body>
 					</Card>
 				</Grid>
-				<Grid item xs={12} md={6} xl={3}>
+
+				<Grid item xs={12} md={6} lg={4}>
 					<Card
 						icon={
 							<svg
@@ -108,7 +111,25 @@ export default function Options() {
 					</Card>
 				</Grid>
 
-				<Grid item xs={12} md={6} xl={3}>
+				<Grid item xs={12} md={6} lg={4}>
+					<Card
+						icon={<Emoji emoji="🧰" />}
+						title={t(
+							'pages.développeurs.choice.library.title',
+							'Libraire de calcul'
+						)}
+						to={sitePaths.développeur.library}
+						ctaLabel={t('pages.développeurs.choice.library.cta', 'Commencer')}
+					>
+						<Trans i18nKey="pages.développeurs.choice.library.body">
+							L'intégralité du moteur de calcul socio-fiscal développé par
+							l'Urssaf, mis à disposition librement sous forme de bibliothèque
+							NPM.
+						</Trans>
+					</Card>
+				</Grid>
+
+				<Grid item xs={12} md={6} lg={4}>
 					<Card
 						icon={<Emoji emoji="📚" />}
 						title={t(

site/source/pages/integration/index.tsx

@@ -1,16 +1,17 @@
 import Emoji from '@/components/utils/Emoji'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
+import jobOffers from '@/data/job-offers.json'
+import { Banner, InnerBanner } from '@/design-system/banner'
 import { Link } from '@/design-system/typography/link'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { Route, Switch, useLocation } from 'react-router-dom'
 import { TrackChapter } from '../../ATInternetTracking'
+import API from './API'
 import Iframe from './Iframe'
 import Library from './Library'
 import Options from './Options'
-import jobOffers from '@/data/job-offers.json'
-import { Banner, InnerBanner } from '@/design-system/banner'
 
 type JobOffer = {
 	title: string
@@ -27,10 +28,10 @@ export default function Integration() {
 		<TrackChapter chapter1="integration">
 			<ScrollToTop />
 
-			{pathname !== sitePaths.integration.index && (
+			{pathname !== sitePaths.développeur.index && (
 				<Link
 					className="ui__ simple small push-left button"
-					to={sitePaths.integration.index}
+					to={sitePaths.développeur.index}
 				>
 					← <Trans>Outils pour les développeurs</Trans> <Emoji emoji="👨‍💻" />
 				</Link>
@@ -49,9 +50,10 @@ export default function Integration() {
 				</Banner>
 			)}
 			<Switch>
-				<Route exact path={sitePaths.integration.index} component={Options} />
-				<Route path={sitePaths.integration.iframe} component={Iframe} />
-				<Route path={sitePaths.integration.library} component={Library} />
+				<Route exact path={sitePaths.développeur.index} component={Options} />
+				<Route path={sitePaths.développeur.iframe} component={Iframe} />
+				<Route path={sitePaths.développeur.library} component={Library} />
+				<Route path={sitePaths.développeur.api} component={API} />
 			</Switch>
 		</TrackChapter>
 	)

site/source/sitePaths.ts

@@ -83,10 +83,11 @@ const rawSitePathsFr = {
 	stats: '/stats',
 	accessibilité: '/accessibilité',
 	budget: '/budget',
-	integration: {
-		index: '/intégration',
+	développeur: {
+		index: '/développeur',
 		iframe: '/iframe',
 		library: '/bibliothèque-de-calcul',
+		api: '/api',
 	},
 	documentation: {
 		index: '/documentation',
@@ -159,11 +160,11 @@ const rawSitePathsEn = {
 	},
 	nouveautés: '/news',
 	accessibilité: '/accessibility',
-
-	integration: {
-		...rawSitePathsFr.integration,
-		index: '/integration',
+	développeur: {
+		...rawSitePathsFr.développeur,
+		index: '/developer',
 		library: '/library',
+		api: '/api',
 	},
 } as const
 

site/vite.config.ts

@@ -76,6 +76,9 @@ export default defineConfig(({ command }) => ({
 				'!**/node_modules/publicodes-react/**',
 			],
 		},
+		proxy: {
+			'/api': 'http://localhost:3004',
+		},
 	},
 	optimizeDeps: {
 		entries: ['./source/entry-fr.tsx', './source/entry-en.tsx'],