From 0123dc7a86ec1f41935236f33b6e823bebcda38e Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Wed, 22 Jan 2020 16:33:33 +0100 Subject: [PATCH] =?UTF-8?q?:alien:=20ajoute=20les=20traductions=20pour=20l?= =?UTF-8?q?es=20pages=20d'int=C3=A9gration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/locales/en.yaml | 34 +- .../pages/integration/Iframe.tsx | 99 +++--- .../pages/integration/Library.tsx | 299 +++++++++--------- .../pages/integration/Options.tsx | 6 +- .../pages/integration/index.tsx | 11 +- 5 files changed, 239 insertions(+), 210 deletions(-) diff --git a/source/locales/en.yaml b/source/locales/en.yaml index 8512c3f31..4afeb17ff 100644 --- a/source/locales/en.yaml +++ b/source/locales/en.yaml @@ -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<1>Integrate one of our simulators in + one click into your website, via a turnkey script. + library: >- + <0>Using the calculation engine<1>The entire socio-fiscal + calculation engine developed by URSSAF, freely available in the form + of an NPM library. + 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<1>Integrate one of our simulators in one - click into your website, via a turnkey script. library: >- <0>Using the calculation engine<1>The entire socio-fiscal calculation engine developed by URSSAF, freely available in the form of an NPM library. - 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<1>By adding a line to your web page + :<2><3>You can <2>choose the main color of the module to blend + it into the visual theme of your page: just change the <4>data-color + value above. To choose it, use our <7>interactive tool.<4>The + attribute <1>data-lang="en" allows you to choose English as the + default language of the simulator (it will remain modifiable by the + user). + dévelopeurs: + bibliothèque: "<0>Integrate our calculation library<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>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.<3>This library is a common digital library developed by the State and ACOSS. It is based on a new programming language, <2>publicodes.<4>How to use it?<5>The following examples show you how to use the library on a very simple ReactJs site.<6>1) Make a very simple calculation: from gross to net<7><0><8>2) Browse online documentation<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).<10>All these variables are listed and explained in our <2>online documentation.<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.<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 :<13> An <3>executive earning <7>€3,400 gross, who benefits from the<10> bicycle mileage allowance and works in a company with <14>12 employees.<14>The calculation for this more complete example is as follows:<15><0><16>{emoji('ℹ️ ')} Note that in the previous example we have to specify the transport payment rate ourselves.<17>Whereas in the <2>employee 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 to switch from the commune name to the common code. Then the<7> transport payout API, 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, a component that also uses the common API.<18>Making economic charts{emoji(' \U0001F4C8')}<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.<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.<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 in these demos.<22><0>" Montant des cotisations: Amount of contributions +Quelques intégrations: Some integrations diff --git a/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx b/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx index 5400e6bf7..bf8b56d61 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx @@ -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 ( <> -
-
+
+

Intégrez le module Web

En ajoutant une ligne à votre page Web :

@@ -30,53 +31,55 @@ export default function Integration() { l'anglais comme langue par défaut du simulateur (elle restera modifiable par l'utilisateur).

+ +
+
+ ) } diff --git a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx index 00bb2328f..ea60ddc8d 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx @@ -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 (
-

Intégrez notre bibliothèque de calcul

-

- 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{' '} - - intégrables sous forme d'une{' '} - - bibliothèque NPM + +

Intégrez notre bibliothèque de calcul

+

+ 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{' '} + + intégrables sous forme d'une{' '} + + bibliothèque NPM + + + . +

+

+ 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. +

+

+ Cette bibliothèque est un commun numérique développé par l'Etat et + l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '} + publicodes. +

+

Comment l'utiliser ?

+

+ Les exemples suivants vous montrent comment utiliser la bibliothèque + sur un site ReactJs très simple. +

+

1) Faire un calcul très simple : du brut au net

+
+ +
+

2) Parcourir la documentation en ligne

+

+ 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). +

+

+ Toutes ces variables sont listées et expliquées sur notre{' '} + + documentation en ligne - - . -

-

- 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. -

-

- Cette bibliothèque est un commun numérique développé par l'Etat et - l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '} - publicodes. -

-

Comment l'utiliser ?

-

- Les exemples suivants vous montrent comment utiliser la bibliothèque sur - un site ReactJs très simple. -

-

1) Faire un calcul très simple : du brut au net

-
- -
-

2) Parcourir la documentation en ligne

-

- 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). -

-

- Toutes ces variables sont listées et expliquées sur notre{' '} - - documentation en ligne - - . -

+ . +

-

- 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. -

-

- 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 : -

+

+ 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. +

+

+ 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 : +

-

- {' '} - Un{' '} - - cadre - {' '} - gagnant{' '} - - 3 400€ bruts - {' '} - , qui bénéficie de l' - - indemnité kilométrique vélo - {' '} - et qui travaille dans une entreprise de{' '} - - 12 salariés - - . -

-

Voici ce que donne le calcul pour cet exemple plus complet :

-
- -
-

- {emoji('ℹ️ ')} - Notez que dans l'exemple précédent nous devons spécifier nous-même le - taux de versement transport. -

-

- Alors que dans le simulateur{' '} - salarié, 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' - - API Géo - communes - {' '} - pour passer du nom de la commune au code commune. Puis l' - API versement transport, développé et maintenu par nos - soins, qui n'est pas documenté mais son utilisation est très simple et - compréhensible{' '} - - dans ce composant React qui l'appelle - - , composant qui fait aussi appel à l'API commune. -

-

Faire des graphiques économiques{emoji(' 📈')}

-

- 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. -

-

- 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. -

-

- {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{' '} - - pour l'instant - {' '} - dans ces démos. -

-
- -
+

+ {' '} + Un{' '} + + cadre + {' '} + gagnant{' '} + + 3 400€ bruts + {' '} + , qui bénéficie de l' + + indemnité kilométrique vélo + {' '} + et qui travaille dans une entreprise de{' '} + + 12 salariés + + . +

+

Voici ce que donne le calcul pour cet exemple plus complet :

+
+ +
+

+ {emoji('ℹ️ ')} + Notez que dans l'exemple précédent nous devons spécifier nous-même le + taux de versement transport. +

+

+ Alors que dans le simulateur{' '} + salarié, + 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' + + API Géo - communes + {' '} + pour passer du nom de la commune au code commune. Puis l' + API versement transport, développé et maintenu par nos + soins, qui n'est pas documenté mais son utilisation est très simple et + compréhensible{' '} + + dans ce composant React qui l'appelle + + , composant qui fait aussi appel à l'API commune. +

+

Faire des graphiques économiques{emoji(' 📈')}

+

+ 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. +

+

+ 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. +

+

+ {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{' '} + + pour l'instant + {' '} + dans ces démos. +

+
+ +
+
) } diff --git a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx index c7a39541d..679116dc4 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx @@ -10,7 +10,7 @@ export default function Options() { return ( <>

- + Intégrez le droit de la sécurité sociale au coeur de vos outils

@@ -18,7 +18,7 @@ export default function Options() {

- + 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} >

{emoji('📱')}
- +

Intégrer un simulateur

Intégrer l'un de nos simulateurs en un clic dans votre site Web, diff --git a/source/sites/mon-entreprise.fr/pages/integration/index.tsx b/source/sites/mon-entreprise.fr/pages/integration/index.tsx index d77bf0948..dce81bcfd 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/index.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/index.tsx @@ -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 ( <> -

- Outils pour les développeurs +
+

+ 🛠{' '} + + Outils pour les développeurs + {' '} + 🛠 +