kemenaran / cout-embauche Goto Github PK

A widget to estimate the price of hiring in France : social security contributions minus national exemptions.

Module Web d'estimation du prix d'une embauche en France. Ce document est technique, et donc rédigé en anglais pour favoriser la réutilisation.

Online demo.

If you want to create your own specific interface, have a look at the API documentation.

Include this line where you want the widget to appear in your page:

 <script id="script-simulateur-embauche" src="dist/simulateur.js" data-couleur="#4A89DC"></script>

It will add an iframe to your page, containing the simulation interface.

Reminder: this widget is in beta and may be updated at any time. Please send an email to contact[AT]embauche.beta.gouv.fr to request being sent potentially breaking update notices.

The widget's style is deliberately simple and used only one color. Set your own color as an attribute to the script tag above to blend it in your page's visual theme.

For a deeper style personnalisation, or to be able to use the JS API (see its documentation at ./js-API.md) the widget can be integrated as a no-iframe script. Learn how by reading ./iframe.html page or contacting us at contact[AT]embauche.beta.gouv.fr.

Run :

npm i
npm start

and open localhost:3000.

The widget is tested with Enzyme in a headless browser environment.

npm run test

This command also runs the js and css linters.

The development version is heavy and slow. Use this in production :

npm run compile

The app is built with React, Redux and Redux-forms. Read the Redux introduction before going further. The computations rely on the OpenFisca /formula API through a dedicated instance.

The app can be in 3 different states. The Summary component is always visible to give a live summary of the results.

• basic input, the inital app state, providing you with a fast estimation before your water is boiled. It is displayed in a "cloze test" design.
• advanced input to go further, ~10 questions while your tea infuses, displayed in a conversational design.
• a detailed view that dissects the results

When the user fills the forms :

• Redux-forms updates the state with raw inputs
• sagas watch the form update action and triggers, if needed, a simulation API call with the app state, reprocessed. The simulation results are stored in the app state too.
• The React components, notably the Summary and Details views use the app state to display the results to the user.

The Conversation component handles the advanced form. The conversation is composed of form components, augmented with the formDecorator higher order component (read about it).

• IE11 / Edge
• All latest versions of
  • Safari
  • Firefox
  • Chrome