👽 ajoute les traductions pour les pages d'intégration
Johan Girod
parent
7dca202015
commit
0123dc7a86
|
|
@ -1135,20 +1135,36 @@ simlateurs:
|
|||
impôt: tax
|
||||
Revenu (incluant les dépenses liées à l'activité): Revenue (including expenses related to the activity)
|
||||
Outils pour les développeurs: Tools for developers
|
||||
page:
|
||||
développeurs:
|
||||
titre: Integrate social security law at the heart of your tools
|
||||
pages:
|
||||
développeurs:
|
||||
home:
|
||||
titre: Integrate social security law at the heart of your tools
|
||||
choice:
|
||||
iframe: >-
|
||||
<0>Integrating a simulator</0><1>Integrate one of our simulators in
|
||||
one click into your website, via a turnkey script.</1>
|
||||
library: >-
|
||||
<0>Using the calculation engine</0><1>The entire socio-fiscal
|
||||
calculation engine developed by URSSAF, freely available in the form
|
||||
of an NPM library.</1>
|
||||
description: >-
|
||||
In addition to the site mon-entreprise.fr, we develop free and open
|
||||
source tools to be integrated seemlessly in the usual journey of your
|
||||
users.
|
||||
choice:
|
||||
iframe: >-
|
||||
<0>Integrating a simulator</0><1>Integrate one of our simulators in one
|
||||
click into your website, via a turnkey script.</1>
|
||||
library: >-
|
||||
<0>Using the calculation engine</0><1>The entire socio-fiscal
|
||||
calculation engine developed by URSSAF, freely available in the form of
|
||||
an NPM library.</1>
|
||||
description: >-
|
||||
In addition to the site mon-entreprise.fr, we develop free and open source
|
||||
tools to be integrated seemlessly in the usual journey of your users.
|
||||
iframe: >-
|
||||
<0>Integrate the Web module</0><1>By adding a line to your web page
|
||||
:</1><2></2><3>You can <2>choose the main color of the module</2> to blend
|
||||
it into the visual theme of your page: just change the <4>data-color</4>
|
||||
value above. To choose it, use our <7>interactive tool</7>.</3><4>The
|
||||
attribute <1>data-lang="en"</1> allows you to choose English as the
|
||||
default language of the simulator (it will remain modifiable by the
|
||||
user).</4>
|
||||
dévelopeurs:
|
||||
bibliothèque: "<0>Integrate our calculation library</0><1>If you think that your site or service would benefit from displaying salary calculations, for example switching from gross salary to net salary, good news: all the contribution and tax calculations behind my-company.fr are free and <2>can be integrated in the form of an <2>NPM library</2></2>.</1><2>Put simply, your team's developers are able to integrate the calculation into your interface in 5 minutes{emoji('⌚')}, without having to deal with the complexity of payroll and the regular updating of calculation rules.</2><3>This library is a common digital library developed by the State and ACOSS. It is based on a new programming language, <2>publicodes</2>.</3><4>How to use it?</4><5>The following examples show you how to use the library on a very simple ReactJs site.</5><6>1) Make a very simple calculation: from gross to net</6><7><0></0></7><8>2) Browse online documentation</8><9>As you can see from the previous example, the recipe for a calculation is simple: input variables (gross wage), one or more output variables (net wage).</9><10>All these variables are listed and explained in our <2>online documentation</2>.</10><11>Use the search engine to find the right variable, then click on \"View source code\" to get all the documentation: default value, possible values when it's an enumeration of choice, unit when it's a number, description, associated user question, etc.</11><12>Let's run a calculation closer to a payslip: Here is a description of the input situation with links to the corresponding pages of the documentation :</12><13> An <3>executive</3> earning <7>€3,400 gross</7>, who benefits from the<10> bicycle mileage allowance</10> and works in a company with <14>12 employees</14>.</13><14>The calculation for this more complete example is as follows:</14><15><0></0></15><16>{emoji('ℹ️ ')} Note that in the previous example we have to specify the transport payment rate ourselves.</16><17>Whereas in the <2>employee</2> simulator, it is sufficient to fill in the municipality and the corresponding rate is automatically determined. It's intentional: to keep the library (and the site) light, we use two online APIs. The<4> Geo API - communes</4> to switch from the commune name to the common code. Then the<7> transport payout API</7>, developed and maintained by us, which is not documented but its use is very simple and understandable <10>in this React component that calls it</10>, a component that also uses the common API.</17><18>Making economic charts{emoji(' \U0001F4C8')}</18><19>It is also possible to use the library for economic or political analysis calculations. Here, the price of labour and the net wage is plotted against the gross wage.</19><20>We can see the progressiveness of the total wage, which is in percent lower for a minimum wage than for a high income. In other words, high-wage earners pay part of the social security contributions of low-wage earners.</20><21>{emoji('⚠️ ')}Beware, this example does a lot of calculations in one go, which can block your browser for a few seconds. To overcome this problem, you would have to call the library in a Web Worker, but this is not possible for the <3>moment</3> in these demos.</21><22><0></0></22>"
|
||||
Montant des cotisations: Amount of contributions
|
||||
Quelques intégrations: Some integrations
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ScrollToTop } from 'Components/utils/Scroll'
|
||||
import urssafLogo from 'Images/urssaf.svg'
|
||||
import React from 'react'
|
||||
import { Trans } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { IntegrationCode } from '../Dev/IntegrationTest'
|
||||
import './iframe.css'
|
||||
|
|
@ -13,8 +14,8 @@ export default function Integration() {
|
|||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<section id="integration">
|
||||
<div>
|
||||
<div>
|
||||
<Trans i18nKey="pages.développeurs.iframe">
|
||||
<h1>Intégrez le module Web</h1>
|
||||
<p>En ajoutant une ligne à votre page Web :</p>
|
||||
<IntegrationCode />
|
||||
|
|
@ -30,53 +31,55 @@ export default function Integration() {
|
|||
l'anglais comme langue par défaut du simulateur (elle restera
|
||||
modifiable par l'utilisateur).
|
||||
</p>
|
||||
</Trans>
|
||||
</div>
|
||||
<div className="blocks" id="integrations">
|
||||
<h1>
|
||||
<Trans>Quelques intégrations</Trans>
|
||||
</h1>
|
||||
<div id="integrationList">
|
||||
<article>
|
||||
<a href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs">
|
||||
<img src={urssafLogo} alt="urssaf.fr" />
|
||||
<h2>Urssaf</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="http://les-aides.fr/embauche">
|
||||
<img src={cciLogo} alt="Les-aides.fr" />
|
||||
<h2>CCI de France</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche">
|
||||
<img src={apecLogo} alt="" />
|
||||
<h2>APEC</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="http://travail-emploi.gouv.fr/emploi/accompagnement-des-tpe-pme/tpe-pme/article/le-simulateur-du-cout-d-embauche">
|
||||
<img src={minTraLogo} alt="Ministère du travail" />
|
||||
<h2>Ministère du travail</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="https://entreprise.pole-emploi.fr/cout-salarie/">
|
||||
<img src={poleEmploiLogo} alt="Pôle Emploi" />
|
||||
<h2>Pôle Emploi</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation">
|
||||
<span className="question-mark">?</span>
|
||||
<h2>
|
||||
Une idée ?
|
||||
<br />
|
||||
Contactez-nous !
|
||||
</h2>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div className="blocks" id="integrations">
|
||||
<h1>Quelques intégrations</h1>
|
||||
<div id="integrationList">
|
||||
<article>
|
||||
<a href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs">
|
||||
<img src={urssafLogo} alt="urssaf.fr" />
|
||||
<h2>Urssaf</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="http://les-aides.fr/embauche">
|
||||
<img src={cciLogo} alt="Les-aides.fr" />
|
||||
<h2>CCI de France</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche">
|
||||
<img src={apecLogo} alt="" />
|
||||
<h2>APEC</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="http://travail-emploi.gouv.fr/emploi/accompagnement-des-tpe-pme/tpe-pme/article/le-simulateur-du-cout-d-embauche">
|
||||
<img src={minTraLogo} alt="Ministère du travail" />
|
||||
<h2>Ministère du travail</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="https://entreprise.pole-emploi.fr/cout-salarie/">
|
||||
<img src={poleEmploiLogo} alt="Pôle Emploi" />
|
||||
<h2>Pôle Emploi</h2>
|
||||
</a>
|
||||
</article>
|
||||
<article>
|
||||
<a href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation">
|
||||
<span className="question-mark">?</span>
|
||||
<h2>
|
||||
Une idée ?
|
||||
<br />
|
||||
Contactez-nous !
|
||||
</h2>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,162 +1,165 @@
|
|||
import { ScrollToTop } from 'Components/utils/Scroll'
|
||||
import React from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
import { Trans } from 'react-i18next'
|
||||
|
||||
export default function Library() {
|
||||
return (
|
||||
<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
|
||||
<ScrollToTop />
|
||||
<h1>Intégrez notre bibliothèque de calcul</h1>
|
||||
<p>
|
||||
Si vous pensez que votre site ou service gagnerait à afficher 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.fr sont libres et{' '}
|
||||
<b>
|
||||
intégrables sous forme d'une{' '}
|
||||
<a href="https://www.npmjs.com/package/mon-entreprise">
|
||||
bibliothèque NPM
|
||||
<Trans i18nKey="pages.dévelopeurs.bibliothèque">
|
||||
<h1>Intégrez notre bibliothèque de calcul</h1>
|
||||
<p>
|
||||
Si vous pensez que votre site ou service gagnerait à afficher 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.fr sont libres et{' '}
|
||||
<b>
|
||||
intégrables sous forme d'une{' '}
|
||||
<a href="https://www.npmjs.com/package/mon-entreprise">
|
||||
bibliothèque NPM
|
||||
</a>
|
||||
</b>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Dit plus simplement, les développeurs de votre équipe sont en mesure
|
||||
d'intégrer le calcul dans votre interface en 5 minutes
|
||||
{emoji('⌚')}, sans avoir à gérer la complexité de la paie et la mise
|
||||
à jour régulière des règles de calcul.
|
||||
</p>
|
||||
<p>
|
||||
Cette bibliothèque est un commun numérique développé par l'Etat et
|
||||
l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '}
|
||||
<a href="https://publi.codes">publicodes</a>.
|
||||
</p>
|
||||
<h2>Comment l'utiliser ?</h2>
|
||||
<p>
|
||||
Les exemples suivants vous montrent comment utiliser la bibliothèque
|
||||
sur un site ReactJs très simple.
|
||||
</p>
|
||||
<h3>1) Faire un calcul très simple : du brut au net</h3>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/damp-bird-0m8gl?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 1"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
<h3>2) Parcourir la documentation en ligne</h3>
|
||||
<p>
|
||||
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).
|
||||
</p>
|
||||
<p>
|
||||
Toutes ces variables sont listées et expliquées sur notre{' '}
|
||||
<a target="_blank" href="/documentation">
|
||||
documentation en ligne
|
||||
</a>
|
||||
</b>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Dit plus simplement, les développeurs de votre équipe sont en mesure
|
||||
d'intégrer le calcul dans votre interface en 5 minutes
|
||||
{emoji('⌚')}, sans avoir à gérer la complexité de la paie et la mise à
|
||||
jour régulière des règles de calcul.
|
||||
</p>
|
||||
<p>
|
||||
Cette bibliothèque est un commun numérique développé par l'Etat et
|
||||
l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '}
|
||||
<a href="https://publi.codes">publicodes</a>.
|
||||
</p>
|
||||
<h2>Comment l'utiliser ?</h2>
|
||||
<p>
|
||||
Les exemples suivants vous montrent comment utiliser la bibliothèque sur
|
||||
un site ReactJs très simple.
|
||||
</p>
|
||||
<h3>1) Faire un calcul très simple : du brut au net</h3>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/damp-bird-0m8gl?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 1"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
<h3>2) Parcourir la documentation en ligne</h3>
|
||||
<p>
|
||||
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).
|
||||
</p>
|
||||
<p>
|
||||
Toutes ces variables sont listées et expliquées sur notre{' '}
|
||||
<a target="_blank" href="/documentation">
|
||||
documentation en ligne
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Utilisez le moteur de recherche pour trouver la bonne variable, puis
|
||||
cliquez sur "Voir le code source" pour obtenir l'ensemble de la
|
||||
documentation : valeur par défaut, valeurs possibles quand c'est une
|
||||
énumération de choix, unité quand c'est un nombre, description, question
|
||||
utilisateur associée, etc.
|
||||
</p>
|
||||
<p>
|
||||
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 :
|
||||
</p>
|
||||
<p>
|
||||
Utilisez le moteur de recherche pour trouver la bonne variable, puis
|
||||
cliquez sur "Voir le code source" pour obtenir l'ensemble de la
|
||||
documentation : valeur par défaut, valeurs possibles quand c'est une
|
||||
énumération de choix, unité quand c'est un nombre, description,
|
||||
question utilisateur associée, etc.
|
||||
</p>
|
||||
<p>
|
||||
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 :
|
||||
</p>
|
||||
|
||||
<p css="background: #eee">
|
||||
{' '}
|
||||
Un{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre">
|
||||
cadre
|
||||
</a>{' '}
|
||||
gagnant{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/rémunération/brut-de-base">
|
||||
3 400€ bruts
|
||||
</a>{' '}
|
||||
, qui bénéficie de l'
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/indemnité-kilométrique-vélo/active">
|
||||
indemnité kilométrique vélo
|
||||
</a>{' '}
|
||||
et qui travaille dans une entreprise de{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/entreprise/effectif">
|
||||
12 salariés
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>Voici ce que donne le calcul pour cet exemple plus complet :</p>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/mon-entreprise-2-60d6d?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 2"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
<p>
|
||||
{emoji('ℹ️ ')}
|
||||
Notez que dans l'exemple précédent nous devons spécifier nous-même le
|
||||
taux de versement transport.
|
||||
</p>
|
||||
<p>
|
||||
Alors que dans le simulateur{' '}
|
||||
<a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>, il
|
||||
suffit de renseigner la commune et le taux correspondant est
|
||||
automatiquement déterminé. C'est voulu : pour garder la bibliothèque (et
|
||||
le site) légers, nous utilisons deux API en ligne. L'
|
||||
<a href="https://api.gouv.fr/api/api-geo.html#doc_tech">
|
||||
API Géo - communes
|
||||
</a>{' '}
|
||||
pour passer du nom de la commune au code commune. Puis l'
|
||||
<a href="">API versement transport</a>, développé et maintenu par nos
|
||||
soins, qui n'est pas documenté mais son utilisation est très simple et
|
||||
compréhensible{' '}
|
||||
<a href="https://github.com/betagouv/mon-entreprise/blob/f3e79f42516c0822e8c6d8f6e9fc5646c82fd018/source/components/conversation/select/SelectGéo.js#L7-L14">
|
||||
dans ce composant React qui l'appelle
|
||||
</a>
|
||||
, composant qui fait aussi appel à l'API commune.
|
||||
</p>
|
||||
<h2>Faire des graphiques économiques{emoji(' 📈')}</h2>
|
||||
<p>
|
||||
Il est aussi possible d'utiliser la bibliothèque pour des calculs
|
||||
d'analyse économique ou politique. Ici, on trace le prix du travail et
|
||||
le salaire net en fonction du brut.
|
||||
</p>
|
||||
<p css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem">
|
||||
On peut constater la progressivité du salaire total, qui est en pourcent
|
||||
plus faible pour un SMIC que pour un haut revenu. Autrement dit, les
|
||||
hauts salaires paient une partie des cotisations sociales des bas
|
||||
salaires.
|
||||
</p>
|
||||
<p>
|
||||
{emoji('⚠️ ')}Attention, cet exemple fait pas mal de calculs d'un coup,
|
||||
ce qui peut bloquer votre navigateur quelques secondes. Pour palier à ce
|
||||
problème, il faudrait faire l'appel à la bibliothèque dans un Web
|
||||
Worker, mais ça n'est pas possible{' '}
|
||||
<a href="https://github.com/facebook/create-react-app/pull/5886">
|
||||
pour l'instant
|
||||
</a>{' '}
|
||||
dans ces démos.
|
||||
</p>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/mon-entreprise-3-248rg?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 2"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
<p css="background: #eee">
|
||||
{' '}
|
||||
Un{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre">
|
||||
cadre
|
||||
</a>{' '}
|
||||
gagnant{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/rémunération/brut-de-base">
|
||||
3 400€ bruts
|
||||
</a>{' '}
|
||||
, qui bénéficie de l'
|
||||
<a href="https://mon-entreprise.fr/documentation/contrat-salarié/indemnité-kilométrique-vélo/active">
|
||||
indemnité kilométrique vélo
|
||||
</a>{' '}
|
||||
et qui travaille dans une entreprise de{' '}
|
||||
<a href="https://mon-entreprise.fr/documentation/entreprise/effectif">
|
||||
12 salariés
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>Voici ce que donne le calcul pour cet exemple plus complet :</p>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/mon-entreprise-2-60d6d?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 2"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
<p>
|
||||
{emoji('ℹ️ ')}
|
||||
Notez que dans l'exemple précédent nous devons spécifier nous-même le
|
||||
taux de versement transport.
|
||||
</p>
|
||||
<p>
|
||||
Alors que dans le simulateur{' '}
|
||||
<a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>,
|
||||
il suffit de renseigner la commune et le taux correspondant est
|
||||
automatiquement déterminé. C'est voulu : pour garder la bibliothèque
|
||||
(et le site) légers, nous utilisons deux API en ligne. L'
|
||||
<a href="https://api.gouv.fr/api/api-geo.html#doc_tech">
|
||||
API Géo - communes
|
||||
</a>{' '}
|
||||
pour passer du nom de la commune au code commune. Puis l'
|
||||
<a href="">API versement transport</a>, développé et maintenu par nos
|
||||
soins, qui n'est pas documenté mais son utilisation est très simple et
|
||||
compréhensible{' '}
|
||||
<a href="https://github.com/betagouv/mon-entreprise/blob/f3e79f42516c0822e8c6d8f6e9fc5646c82fd018/source/components/conversation/select/SelectGéo.js#L7-L14">
|
||||
dans ce composant React qui l'appelle
|
||||
</a>
|
||||
, composant qui fait aussi appel à l'API commune.
|
||||
</p>
|
||||
<h2>Faire des graphiques économiques{emoji(' 📈')}</h2>
|
||||
<p>
|
||||
Il est aussi possible d'utiliser la bibliothèque pour des calculs
|
||||
d'analyse économique ou politique. Ici, on trace le prix du travail et
|
||||
le salaire net en fonction du brut.
|
||||
</p>
|
||||
<p css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem">
|
||||
On peut constater la progressivité du salaire total, qui est en
|
||||
pourcent plus faible pour un SMIC que pour un haut revenu. Autrement
|
||||
dit, les hauts salaires paient une partie des cotisations sociales des
|
||||
bas salaires.
|
||||
</p>
|
||||
<p>
|
||||
{emoji('⚠️ ')}Attention, cet exemple fait pas mal de calculs d'un
|
||||
coup, ce qui peut bloquer votre navigateur quelques secondes. Pour
|
||||
palier à ce problème, il faudrait faire l'appel à la bibliothèque dans
|
||||
un Web Worker, mais ça n'est pas possible{' '}
|
||||
<a href="https://github.com/facebook/create-react-app/pull/5886">
|
||||
pour l'instant
|
||||
</a>{' '}
|
||||
dans ces démos.
|
||||
</p>
|
||||
<div className="ui__ full-width">
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/mon-entreprise-3-248rg?fontsize=14&hidenavigation=1"
|
||||
title="mon-entreprise 2"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
</div>
|
||||
</Trans>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default function Options() {
|
|||
return (
|
||||
<>
|
||||
<h1 css="margin-bottom: 0">
|
||||
<Trans i18nKey="page.développeurs.titre">
|
||||
<Trans i18nKey="pages.développeurs.home.titre">
|
||||
Intégrez le droit de la sécurité sociale au coeur de vos outils
|
||||
</Trans>
|
||||
</h1>
|
||||
|
|
@ -18,7 +18,7 @@ export default function Options() {
|
|||
<img css="height: 250px" src={illustration} />
|
||||
</div>
|
||||
<p>
|
||||
<Trans i18nKey="pages.développeurs.description">
|
||||
<Trans i18nKey="pages.développeurs.home.description">
|
||||
En plus du site mon-entreprise.fr, nous développons des outils
|
||||
gratuits et libres à intégrer directement chez vous, dans les parcours
|
||||
habituels de vos utilisateurs.
|
||||
|
|
@ -31,7 +31,7 @@ export default function Options() {
|
|||
to={sitePaths.integration.iframe}
|
||||
>
|
||||
<div className="ui__ big box-icon">{emoji('📱')}</div>
|
||||
<Trans i18nKey="pages.développeurs.choice.iframe">
|
||||
<Trans i18nKey="pages.développeurs.home.choice.iframe">
|
||||
<h3>Intégrer un simulateur</h3>
|
||||
<p className="ui__ notice" css="flex: 1">
|
||||
Intégrer l'un de nos simulateurs en un clic dans votre site Web,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { SitePathsContext } from 'Components/utils/withSitePaths'
|
|||
import React, { useContext } from 'react'
|
||||
import { Trans } from 'react-i18next'
|
||||
import { Route, Switch } from 'react-router'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Iframe from './Iframe'
|
||||
import Library from './Library'
|
||||
import Options from './Options'
|
||||
|
|
@ -12,8 +13,14 @@ export default function Integration() {
|
|||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<div css="color: white; padding: .2rem 0 .1rem .6rem; border-radius: .3rem; background: linear-gradient(135deg,#1A237E, #9198e5); font-weight: 500; margin-bottom: -.6rem">
|
||||
<Trans>Outils pour les développeurs</Trans>
|
||||
<div className="ui__ plain card" css="text-align: center">
|
||||
<h2>
|
||||
🛠{' '}
|
||||
<Link className="ui__ simple button" to={sitePaths.integration.index}>
|
||||
<Trans>Outils pour les développeurs</Trans>
|
||||
</Link>{' '}
|
||||
🛠
|
||||
</h2>
|
||||
</div>
|
||||
<Switch>
|
||||
<Route exact path={sitePaths.integration.index} component={Options} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue