feat: afficher le NIR dans les informations personnelles

gip-inclusion · Aug 7, 2023 · c1f57ef · c1f57ef
1 parent 2208e0a
commit c1f57ef
Show file tree

Hide file tree

Showing 15 changed files with 325 additions and 129 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -52,6 +52,7 @@
 		"@babel/core": "7.21.4",
 		"@babel/preset-env": "7.21.4",
 		"@babel/preset-typescript": "7.21.4",
+		"@faker-js/faker": "^8.0.2",
 		"@graphql-codegen/cli": "3.2.2",
 		"@graphql-codegen/typed-document-node": "3.0.2",
 		"@graphql-codegen/typescript": "3.0.2",
@@ -70,6 +71,7 @@
 		"@tailwindcss/typography": "^0.5.0",
 		"@testing-library/jest-dom": "^5.16.1",
 		"@testing-library/svelte": "^3.0.3",
+		"@testing-library/user-event": "^14.4.3",
 		"@types/cookie": "^0.5.0",
 		"@types/jsonwebtoken": "9.0.1",
 		"@types/nodemailer": "^6.4.4",

diff --git a/app/src/lib/helpers.ts b/app/src/lib/helpers.ts
@@ -22,6 +22,11 @@ export const pluck = function pluck<T>(
 	return result;
 };
 
+export function trimToNull(arg0: string): string {
+	const trimmed = arg0.trim();
+	return trimmed === '' ? null : trimmed;
+}
+
 export function filterFalsyProps(obj: Record<string, unknown>): Record<string, unknown> {
 	const result = {};
 	for (const [k, v] of Object.entries(obj)) {

diff --git a/app/src/lib/ui/ProBeneficiaryUpdate/ProBeneficiaryUpdateFields.svelte b/app/src/lib/ui/ProBeneficiaryUpdate/ProBeneficiaryUpdateFields.svelte
@@ -2,6 +2,7 @@
 	export type Field =
 		| 'firstname'
 		| 'lastname'
+		| 'nir'
 		| 'dateOfBirth'
 		| 'rightRsa'
 		| 'rightAre'
@@ -16,14 +17,9 @@
 	import { Checkbox, Radio } from '../forms';
 
 	export let disabledFields: Field[];
-	// We can by default edit any field
-
-	function isFieldDisabled(fieldName: Field) {
-		return disabledFields.includes(fieldName);
-	}
 
 	function titleForField(fieldName: Field) {
-		return isFieldDisabled(fieldName)
+		return disabledFields.includes(fieldName)
 			? 'Ce champ n‘est pas modifiable. Si toutefois vous devez y apporter une modification, merci de nous contacter par chat.'
 			: '';
 	}
@@ -34,7 +30,7 @@
 	placeholder="Jean-Baptiste"
 	name="firstname"
 	required
-	disabled={isFieldDisabled('firstname')}
+	disabled={disabledFields.includes('firstname')}
 	title={titleForField('firstname')}
 />
 
@@ -43,10 +39,20 @@
 	placeholder="Poquelin"
 	name="lastname"
 	required
-	disabled={isFieldDisabled('lastname')}
+	disabled={disabledFields.includes('lastname')}
 	title={titleForField('lastname')}
 />
 
+<Input
+	inputLabel="NIR"
+	placeholder="1234567890123"
+	type="text"
+	pattern={'[0-9]{13}'}
+	name="nir"
+	disabled={disabledFields.includes('nir')}
+	title={titleForField('nir')}
+/>
+
 <Input
 	class="max-w-max"
 	type="date"
@@ -55,7 +61,7 @@
 	inputHint="Format JJ/MM/AAAA"
 	name="dateOfBirth"
 	required
-	disabled={isFieldDisabled('dateOfBirth')}
+	disabled={disabledFields.includes('dateOfBirth')}
 	title={titleForField('dateOfBirth')}
 />
 
@@ -78,19 +84,23 @@
 		legend="Revenu de solidarité active (RSA)"
 		name="rightRsa"
 		options={rsaRightKeys.options}
-		disabled={isFieldDisabled('rightRsa')}
+		disabled={disabledFields.includes('rightRsa')}
 	/>
 </div>
 
 <div class="fr-fieldset">
 	<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Autres aides</legend>
 	<div class="fr-fieldset__element">
-		<Checkbox name="rightAre" label="ARE" disabled={isFieldDisabled('rightAre')} />
+		<Checkbox name="rightAre" label="ARE" disabled={disabledFields.includes('rightAre')} />
 	</div>
 	<div class="fr-fieldset__element">
-		<Checkbox name="rightAss" label="ASS" disabled={isFieldDisabled('rightAss')} />
+		<Checkbox name="rightAss" label="ASS" disabled={disabledFields.includes('rightAss')} />
 	</div>
 	<div class="fr-fieldset__element">
-		<Checkbox name="rightBonus" label="Prime d'activité" disabled={isFieldDisabled('rightBonus')} />
+		<Checkbox
+			name="rightBonus"
+			label="Prime d'activité"
+			disabled={disabledFields.includes('rightBonus')}
+		/>
 	</div>
 </div>
diff --git a/app/src/lib/ui/ProBeneficiaryUpdate/beneficiary.schema.ts b/app/src/lib/ui/ProBeneficiaryUpdate/beneficiary.schema.ts
@@ -3,6 +3,7 @@ import {
 	nullifyEmptyString,
 	validateCodePostal,
 	validateDateInput,
+	validateNir,
 	validatePhoneNumber,
 } from '$lib/validation';
 import * as yup from 'yup';
@@ -17,6 +18,17 @@ const beneficiaryAccountSchemaObject = {
 		.test('is-date-valid', 'Le format de la date est incorrect', validateDateInput)
 		.required(),
 
+	nir: yup
+		.string()
+		.trim()
+		.test(
+			'is-nir-valid',
+			'Le NIR doit être composé de 13 chiffres',
+			(value) => !value || validateNir(value)
+		)
+		.transform(nullifyEmptyString)
+		.nullable(),
+
 	mobileNumber: yup
 		.string()
 		.trim()
@@ -58,6 +70,7 @@ export const beneficiaryAccountPartialSchema = yup.object().shape({
 	firstname: beneficiaryAccountSchemaObject.firstname.optional(),
 	lastname: beneficiaryAccountSchemaObject.lastname.optional(),
 	dateOfBirth: beneficiaryAccountSchemaObject.dateOfBirth.optional(),
+	nir: beneficiaryAccountSchemaObject.nir.optional(),
 });
 
 export type BeneficiaryAccountInput = yup.InferType<typeof beneficiaryAccountSchema>;

diff --git a/app/src/lib/ui/ProNotebookPersonalInfo/ProNotebookPersonalInfoUpdate.svelte b/app/src/lib/ui/ProNotebookPersonalInfo/ProNotebookPersonalInfoUpdate.svelte
@@ -1,83 +1,28 @@
 <script lang="ts">
-	import {
-		type Beneficiary,
-		UpdateBeneficiaryPersonalInfoDocument,
-	} from '$lib/graphql/_gen/typed-document-nodes';
+	import { UpdateBeneficiaryPersonalInfoDocument } from '$lib/graphql/_gen/typed-document-nodes';
 	import { accountData, openComponent } from '$lib/stores';
 	import { mutation, operationStore } from '@urql/svelte';
-	import { Button } from '$lib/ui/base';
-	import {
-		type BeneficiaryAccountInput,
-		beneficiaryAccountPartialSchema,
-		beneficiaryAccountSchema,
-	} from '$lib/ui/ProBeneficiaryUpdate/beneficiary.schema';
-	import Form from '$lib/ui/forms/Form.svelte';
-	import ProBeneficiaryUpdateFields from '$lib/ui/ProBeneficiaryUpdate/ProBeneficiaryUpdateFields.svelte';
-	import type { Field } from '$lib/ui/ProBeneficiaryUpdate/ProBeneficiaryUpdateFields.svelte';
-	import Input from '$lib/ui/forms/Input.svelte';
+	import type { BeneficiaryAccountInput } from '$lib/ui/ProBeneficiaryUpdate/beneficiary.schema';
 	import { trackEvent } from '$lib/tracking/matomo';
 
-	import { RoleEnum } from '$lib/graphql/_gen/typed-document-nodes';
-
-	export let beneficiary: Pick<
-		Beneficiary,
-		| 'id'
-		| 'firstname'
-		| 'lastname'
-		| 'dateOfBirth'
-		| 'mobileNumber'
-		| 'email'
-		| 'address1'
-		| 'address2'
-		| 'postalCode'
-		| 'city'
-		| 'peNumber'
-		| 'cafNumber'
-		| 'rightRsa'
-		| 'rightAre'
-		| 'rightAss'
-		| 'rightBonus'
-	>;
+	import ProNotebookPersonalInfoUpdateView, {
+		type FormBeneficiary,
+	} from './ProNotebookPersonalInfoUpdateView.svelte';
 
+	export let beneficiary: FormBeneficiary;
 	export let canEditDetailedInfo = false;
 
 	const update = mutation(operationStore(UpdateBeneficiaryPersonalInfoDocument));
 
-	const initialValues = {
-		firstname: beneficiary.firstname,
-		lastname: beneficiary.lastname,
-		dateOfBirth: beneficiary.dateOfBirth,
-		mobileNumber: beneficiary.mobileNumber,
-		email: beneficiary.email,
-		address1: beneficiary.address1,
-		address2: beneficiary.address2,
-		postalCode: beneficiary.postalCode,
-		city: beneficiary.city,
-		peNumber: beneficiary.peNumber,
-		cafNumber: beneficiary.cafNumber,
-		rightRsa: beneficiary.rightRsa,
-		rightAre: beneficiary.rightAre,
-		rightAss: beneficiary.rightAss,
-		rightBonus: beneficiary.rightBonus,
-	};
-
-	const isPartialUpdate = $accountData.type !== RoleEnum.Manager;
-
-	const validationSchema = isPartialUpdate
-		? beneficiaryAccountPartialSchema
-		: beneficiaryAccountSchema;
-
-	const partialUpdateDisabledFields: Field[] = isPartialUpdate
-		? ['firstname', 'lastname', 'dateOfBirth']
-		: [];
-
-	const disabledFields: Field[] = partialUpdateDisabledFields.concat(
-		canEditDetailedInfo ? [] : ['rightRsa', 'rightAre', 'rightAss', 'rightBonus']
-	);
-
-	async function updateBeneficiary(values: BeneficiaryAccountInput) {
+	const onSubmit = async (isPartialUpdate: boolean, values: BeneficiaryAccountInput) => {
 		const partialUpdatePayload = isPartialUpdate
-			? { ...values, firstname: undefined, lastname: undefined, dateOfBirth: undefined }
+			? {
+					...values,
+					firstname: undefined,
+					lastname: undefined,
+					dateOfBirth: undefined,
+					nir: undefined,
+			  }
 			: { ...values };
 
 		const payload = canEditDetailedInfo
@@ -99,33 +44,12 @@
 			payload,
 		});
 		openComponent.close();
-	}
-
-	function onCancel() {
-		openComponent.close();
-	}
+	};
 </script>
 
-<section>
-	<h1>Informations personnelles</h1>
-	<Form {initialValues} {validationSchema} onSubmit={updateBeneficiary}>
-		<ProBeneficiaryUpdateFields {disabledFields} />
-		<Input
-			name="peNumber"
-			placeholder={'123456789A'}
-			class="pt-6"
-			inputLabel={'Identifiant Pôle emploi'}
-			disabled={!canEditDetailedInfo}
-		/>
-		<Input
-			name="cafNumber"
-			placeholder={'123456789A'}
-			inputLabel={'Identifiant CAF/MSA'}
-			disabled={!canEditDetailedInfo}
-		/>
-		<div class="flex flex-row gap-6 pt-4 pb-12">
-			<Button type="submit">Enregistrer</Button>
-			<Button outline on:click={onCancel}>Annuler</Button>
-		</div>
-	</Form>
-</section>
+<ProNotebookPersonalInfoUpdateView
+	{beneficiary}
+	role={$accountData.type}
+	{onSubmit}
+	onCancel={openComponent.close}
+/>