Merge pull request #206 from sgmap/salaire-net

Add input salaire net - use new openfisca URL @ beta.gouv.fr

Author: laem

assets/embauche.html

@@ -1,6 +1,6 @@
 <div class="SGMAPembauche" lang="fr">
 	<section id="input">
-		<form action="https://openfisca-embauche.sgmap.fr/api/2/formula/accident_du_travail+famille+fnal+versement_transport+agff_salarie+agirc_salarie+agirc_gmp_salarie+apec_salarie+arrco_salarie+chomage_salarie+cotisation_exceptionnelle_temporaire_salarie+vieillesse_plafonnee_salarie+vieillesse_deplafonnee_salarie+mmid_salarie+csg_deductible_salaire+csg_imposable_salaire+crds_salaire+salaire_net_a_payer+salaire_super_brut+ags+agff_employeur+apec_employeur+arrco_employeur+chomage_employeur+cotisation_exceptionnelle_temporaire_employeur+vieillesse_deplafonnee_employeur+vieillesse_plafonnee_employeur+mmid_employeur+contribution_supplementaire_apprentissage+contribution_solidarite_autonomie+formation_professionnelle+participation_effort_construction+taxe_apprentissage+agirc_employeur+agirc_gmp_employeur+allegement_fillon+allegement_cotisation_allocations_familiales+exoneration_cotisations_employeur_apprenti+exoneration_cotisations_employeur_stagiaire+exoneration_cotisations_employeur_jei+credit_impot_competitivite_emploi+financement_organisations_syndicales+prevoyance_obligatoire_cadre+cout_du_travail+aide_premier_salarie+aide_embauche_pme+smic_proratise" method="GET">
+		<form action="https://embauche.beta.gouv.fr/openfisca/api/2/formula/accident_du_travail+famille+fnal+versement_transport+agff_salarie+agirc_salarie+agirc_gmp_salarie+apec_salarie+arrco_salarie+chomage_salarie+cotisation_exceptionnelle_temporaire_salarie+vieillesse_plafonnee_salarie+vieillesse_deplafonnee_salarie+mmid_salarie+csg_deductible_salaire+csg_imposable_salaire+crds_salaire+salaire_super_brut+ags+agff_employeur+apec_employeur+arrco_employeur+chomage_employeur+cotisation_exceptionnelle_temporaire_employeur+vieillesse_deplafonnee_employeur+vieillesse_plafonnee_employeur+mmid_employeur+contribution_supplementaire_apprentissage+contribution_solidarite_autonomie+formation_professionnelle+participation_effort_construction+taxe_apprentissage+agirc_employeur+agirc_gmp_employeur+allegement_fillon+allegement_cotisation_allocations_familiales+exoneration_cotisations_employeur_apprenti+exoneration_cotisations_employeur_stagiaire+exoneration_cotisations_employeur_jei+credit_impot_competitivite_emploi+financement_organisations_syndicales+prevoyance_obligatoire_cadre+cout_du_travail+aide_premier_salarie+aide_embauche_pme+smic_proratise" method="GET">
 			<div>
 				<select data-sets=".employer_type@textContent">
 					<option value="entreprise" selected>Mon entreprise</option>
@@ -30,9 +30,14 @@
 						&nbsp;€
 					</label>
 					<span class="input-help">Rémunération totale<br>
-						<em>(min. <span data-source="smic_proratise" data-round>1467</span>)</em>, dont primes.</span>
+						<em>(min. <span data-source="smic_proratise" data-round>1467</span>)</em>, dont primes.
+					</span>
+					<select id="select-salaire-entree" data-sets="#salaire@name">
+						<option value="salaire_de_base" selected>brut</option>
+						<option value="salaire_net_a_payer">net</option>
+					</select>
 					&nbsp;
-					<span>brut par mois</span>
+					<span>par mois</span>
 				</fieldset>
 				<br>
 				<label>à temps
@@ -104,7 +109,11 @@
 		</p>
 		<p>
 			Mon <span data-source="employee">salarié·e</span>
-			touchera <span data-source="salaire_net_a_payer" data-round title="Salaire net">…</span>&nbsp;€
+			touchera
+			<span id="salaire-calcule" data-source="salaire_net_a_payer" data-add-source-to-action data-round title="Salaire net">
+				…
+			</span>&nbsp;€
+			&nbsp;<span id="type-salaire-calcule">net</span>
 			par <span data-source="period">mois</span>.
 		</p>
 	</section>
@@ -199,8 +208,8 @@
 				<td><span data-source="financement_organisations_syndicales"></span>&nbsp;€</td>
 			</tr>
 			<tr>
-			    <th>Prévoyance obligatoire cadre</th>
-			    <td><span data-source="prevoyance_obligatoire_cadre"></span>&nbsp;€</td>
+				<th>Prévoyance obligatoire cadre</th>
+				<td><span data-source="prevoyance_obligatoire_cadre"></span>&nbsp;€</td>
 			</tr>
 			<tr>
 				<th>Versement transport</th>

dist/cout-embauche-widget.js

@@ -10,20 +10,20 @@ let buffer
 function bindToForm(form) {
 	form.addEventListener('change', UI.reflectParameterChange)
 
-	const handleBasicFormChanges = debounce(openFiscaRequestBuilder(form), 300)
+	const handleBasicFormChanges = debounce(openFiscaRequestBuilder(form), 500)
 
+	// Trigger the first request
 	handleBasicFormChanges()
 
 	const handleFormChanges = event => {
-		switch (event.target.name) {
-		case 'code_postal_entreprise':
-			handleCodePostalInput(event.target.value, handleBasicFormChanges)
-			break
-		case 'contrat_de_travail':
-			handleTempsPartielSelect(event.target.value, handleBasicFormChanges)
-			break
-		default: handleBasicFormChanges()
-		}
+		const {name, id} = event.target
+		if (name === 'code_postal_entreprise')
+			return handleCodePostalInput(event.target.value, handleBasicFormChanges)
+		if (name === 'contrat_de_travail')
+			return handleTempsPartielSelect(event.target.value, handleBasicFormChanges)
+		if (id === 'select-salaire-entree')
+			return handleSalaireSelect(event.target.value, handleBasicFormChanges)
+		return handleBasicFormChanges()
 	}
 
 	form.addEventListener('change', handleFormChanges)
@@ -94,6 +94,21 @@ function handleTempsPartielSelect(contrat, next) {
 	next()
 }
 
+function handleSalaireSelect(selectedSalaire, next) {
+	const outputSalaireValue = document.querySelector('#salaire-calcule'),
+		outputSalaireType = document.querySelector('#type-salaire-calcule'),
+		correspondence = {
+			'salaire_de_base': [ 'salaire_net_a_payer', 'net' ],
+			'salaire_net_a_payer': [ 'salaire_de_base', 'brut' ],
+		},
+		[ source, type ] = correspondence[selectedSalaire]
+
+	outputSalaireValue.dataset.source = source
+	outputSalaireType.textContent = type
+
+	next()
+}
+
 bindToForm(UI.getForm());
 
 [ ...document.querySelectorAll('.SGMAPembauche .js-only') ]

js/index.js

@@ -21,24 +21,25 @@ const serializeObject = source =>
 */
 function request(input, baseUrl, callback) {
 
-	const url = baseUrl + '?' + serializeObject(input)
+	const url = baseUrl + '?' + serializeObject(input),
+		headers = input['salaire_net_a_payer'] ? {
+			'x-OpenFisca-Extensions': 'de_net_a_brut',
+		} : {}
 
 	if (!callback)
 		return url
 
-	fetch(url)
-		.then( response => {
+	fetch(url, {headers})
+		.then(response => {
 			if (!response.ok) {
 				const error = new Error(response.statusText)
 				error.response = response
 				throw error
 			}
 			return response.json()
 		})
-		.then( json => callback(false, json.values, json))
-		.catch( error => {
-			callback(error)
-		})
+		.then(json => callback(false, json.values, json))
+		.catch(callback)
 }
 
 /** API function

js/openfisca.js

@@ -2,7 +2,16 @@ import transForms from './transForms.js'
 
 const getForm = () => document.querySelector('.SGMAPembauche form')
 
-const getOutputVariables = () => getForm().action
+function getOutputVariables() {
+	const baseUrl = getForm().action,
+		// some of the output variables are chosen dynamically
+		sourcesToAdd =
+			[ ...document.querySelectorAll('[data-add-source-to-action]') ]
+				.map(element => element.dataset.source)
+				.join('+')
+
+	return `${baseUrl}+${sourcesToAdd}`
+}
 
 function collectInput(form) {
 	const input = collectFormFields(form)