diff --git a/source/locales/en.yaml b/source/locales/en.yaml index 6cb74af8b..ac822bd1c 100644 --- a/source/locales/en.yaml +++ b/source/locales/en.yaml @@ -521,6 +521,10 @@ path: exemples: '/examples' privacy: index: '/privacy' + integration: + index: '/integration' + iframe: '/iframe' + library: '/library' économieCollaborative: index: '/sharing-economy' @@ -572,7 +576,9 @@ siteName: My company in France Faire une simulation: Launch a simulation Exemples: Examples -Intégrer le simulateur: Integrate the simulator +Intégrer nos simulateurs: Integrate our simulators +Intégrer l'interface de simulation: Integrate the simulation interface +Intégrer la bibliothèque de calcul: Integrate the calculation library # Landing infrance Que désirez-vous faire ?: What do you want to do? diff --git a/source/sites/mon-entreprise.fr/App.js b/source/sites/mon-entreprise.fr/App.js index 179046680..519dc4c5f 100644 --- a/source/sites/mon-entreprise.fr/App.js +++ b/source/sites/mon-entreprise.fr/App.js @@ -23,6 +23,8 @@ import { inIframe, setToSessionStorage } from '../../utils' import './App.css' import Footer from './layout/Footer/Footer' import { PrivacyContent } from './layout/Footer/Privacy' +import Library from './layout/Footer/Library' +import Iframe from './layout/Footer/Iframe' import Header from './layout/Header/Header' import Navigation from './layout/Navigation/Navigation' import trackSimulatorActions from './middlewares/trackSimulatorActions' @@ -125,6 +127,8 @@ const App = compose(withSitePaths)(({ sitePaths }) => { component={Documentation} /> + + + +
+
+

Intégrez le module Web

+

En ajoutant une ligne à votre page Web :

+ +

+ Vous pouvez choisir la couleur principale du module{' '} + pour le fondre dans le thème visuel de votre page : changez + simplement la valeur de data-couleur ci-dessus. Pour la + choisir, utilisez notre{' '} + outil interactif. +

+

+ L'attribut data-lang="en" vous permet quand à lui de choisir + l'anglais comme langue par défaut du simulateur (elle restera + modifiable par l'utilisateur). +

+
+ +
+ + ) +} diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Integration.js b/source/sites/mon-entreprise.fr/layout/Footer/Integration.js index 4511d8e5e..9479434ac 100644 --- a/source/sites/mon-entreprise.fr/layout/Footer/Integration.js +++ b/source/sites/mon-entreprise.fr/layout/Footer/Integration.js @@ -1,100 +1,45 @@ import Overlay from 'Components/Overlay' import { ScrollToTop } from 'Components/utils/Scroll' -import urssafLogo from 'Images/urssaf.svg' import React, { useState } from 'react' +import { T } from 'Components' import { Link } from 'react-router-dom' -import apecLogo from './images/apec.png' -import cciLogo from './images/cci.png' -import minTraLogo from './images/min-tra.jpg' -import poleEmploiLogo from './images/pole-emploi.png' import './Integration.css' -import { IntegrationCode } from '../../pages/Dev/IntegrationTest' +import withSitePaths from 'Components/utils/withSitePaths' +import emoji from 'react-easy-emoji' -export default function Integration() { +export default withSitePaths(function Integration({ sitePaths }) { const [opened, setOpened] = useState(false) return ( <> {opened && ( setOpened(false)} style={{ textAlign: 'left' }}>
-

Intégrez le module Web

-

En ajoutant une ligne à votre page Web :

- +

Intégrez nos simulateurs !

- Vous pouvez{' '} - choisir la couleur principale du module pour le - fondre dans le thème visuel de votre page : changez simplement - la valeur de data-couleur ci-dessus. Pour la choisir, - utilisez notre{' '} - setOpened(false)} to="/dev/couleur"> - outil interactif - - . + En fonction de vos besoins et de vos ressources techniques, deux + options s'offrent à vous :{' '}

-

- L'attribut data-lang="en" vous permet quand à lui de - choisir l'anglais comme langue par défaut du simulateur (elle - restera modifiable par l'utilisateur). -

-
-
-

Quelques intégrations

- - + setOpened(false)} + to={sitePaths.integration.iframe}> + {emoji('📱')} Intégrer l'interface de simulation + + setOpened(false)} + to={sitePaths.integration.library}> + {emoji('🧰')} Intégrer la bibliothèque de calcul +
)} ) -} +}) diff --git a/source/sites/mon-entreprise.fr/layout/Footer/Library.js b/source/sites/mon-entreprise.fr/layout/Footer/Library.js new file mode 100644 index 000000000..d8048f88b --- /dev/null +++ b/source/sites/mon-entreprise.fr/layout/Footer/Library.js @@ -0,0 +1,43 @@ +import { T } from 'Components' +import React from 'react' +import { useTranslation } from 'react-i18next' +import { ScrollToTop } from 'Components/utils/Scroll' +import emoji from 'react-easy-emoji' + +export default function Privacy() { + const { i18n } = useTranslation() + return ( + <> + +

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{' '} + + librairie 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. +

+ A venir : +

Démo très simple brut -> net

+

Démo de paie plus complète

+

Démo de graphique économico-journalistique

+ + ) +} diff --git a/source/sites/mon-entreprise.fr/sitePaths.js b/source/sites/mon-entreprise.fr/sitePaths.js index ea2bfd771..9508f491e 100644 --- a/source/sites/mon-entreprise.fr/sitePaths.js +++ b/source/sites/mon-entreprise.fr/sitePaths.js @@ -114,6 +114,11 @@ export const constructLocalizedSitePath = (language: string) => { }, privacy: { index: t('path.privacy.index', '/vie-privée') + }, + integration: { + index: t('path.integration.index', '/intégration'), + iframe: t('path.integration.iframe', '/iframe'), + library: t('path.integration.library', '/bibliothèque-de-calcul') } }) }