Choix d'intégration dans le pied de page: bibliothèque de calcul ou interface
Mael
Maël
parent
204f87a29d
commit
421c46af48
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
<Route path={sitePaths.privacy.index} component={PrivacyContent} />
|
||||
<Route path={sitePaths.integration.iframe} component={Iframe} />
|
||||
<Route path={sitePaths.integration.library} component={Library} />
|
||||
<Route exact path="/dev/sitemap" component={Sitemap} />
|
||||
<Route
|
||||
exact
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
import { ScrollToTop } from 'Components/utils/Scroll'
|
||||
import urssafLogo from 'Images/urssaf.svg'
|
||||
import React from 'react'
|
||||
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'
|
||||
|
||||
export default function Integration() {
|
||||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<section id="integration">
|
||||
<div>
|
||||
<h1>Intégrez le module Web</h1>
|
||||
<p>En ajoutant une ligne à votre page Web :</p>
|
||||
<IntegrationCode />
|
||||
<p>
|
||||
Vous pouvez <strong>choisir la couleur principale du module</strong>{' '}
|
||||
pour le fondre dans le thème visuel de votre page : changez
|
||||
simplement la valeur de <i>data-couleur</i> ci-dessus. Pour la
|
||||
choisir, utilisez notre{' '}
|
||||
<Link to="/dev/couleur">outil interactif</Link>.
|
||||
</p>
|
||||
<p>
|
||||
L'attribut <i>data-lang="en"</i> vous permet quand à lui de choisir
|
||||
l'anglais comme langue par défaut du simulateur (elle restera
|
||||
modifiable par l'utilisateur).
|
||||
</p>
|
||||
</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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<button onClick={() => setOpened(true)} className="ui__ link-button">
|
||||
Intégrer le simulateur
|
||||
Intégrer nos simulateurs
|
||||
</button>
|
||||
{opened && (
|
||||
<Overlay onClose={() => setOpened(false)} style={{ textAlign: 'left' }}>
|
||||
<ScrollToTop />
|
||||
<section id="integration">
|
||||
<div>
|
||||
<h1>Intégrez le module Web</h1>
|
||||
<p>En ajoutant une ligne à votre page Web :</p>
|
||||
<IntegrationCode />
|
||||
<h1>Intégrez nos simulateurs !</h1>
|
||||
<p>
|
||||
Vous pouvez{' '}
|
||||
<strong>choisir la couleur principale du module</strong> pour le
|
||||
fondre dans le thème visuel de votre page : changez simplement
|
||||
la valeur de <i>data-couleur</i> ci-dessus. Pour la choisir,
|
||||
utilisez notre{' '}
|
||||
<Link onClick={() => setOpened(false)} to="/dev/couleur">
|
||||
outil interactif
|
||||
</Link>
|
||||
.
|
||||
En fonction de vos besoins et de vos ressources techniques, deux
|
||||
options s'offrent à vous :{' '}
|
||||
</p>
|
||||
<p>
|
||||
L'attribut <i>data-lang="en"</i> vous permet quand à lui de
|
||||
choisir l'anglais comme langue par défaut du simulateur (elle
|
||||
restera modifiable par l'utilisateur).
|
||||
</p>
|
||||
</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>
|
||||
<Link
|
||||
className="ui__ button-choice "
|
||||
onClick={() => setOpened(false)}
|
||||
to={sitePaths.integration.iframe}>
|
||||
{emoji('📱')} <T>Intégrer l'interface de simulation</T>
|
||||
</Link>
|
||||
<Link
|
||||
className="ui__ button-choice "
|
||||
onClick={() => setOpened(false)}
|
||||
to={sitePaths.integration.library}>
|
||||
{emoji('🧰')} <T>Intégrer la bibliothèque de calcul</T>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</Overlay>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<h1>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">
|
||||
librairie 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.
|
||||
</p>
|
||||
A venir :
|
||||
<h2>Démo très simple brut -> net</h2>
|
||||
<h2>Démo de paie plus complète</h2>
|
||||
<h2>Démo de graphique économico-journalistique</h2>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue