✨ Save popup on changing documents in deed types

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -30,6 +30,7 @@ export default function DeedTypesInformations(props: IProps) {
 	const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
 
 	const [isDeleteModalOpened, setIsDeleteModalOpened] = useState<boolean>(false);
+	const [isSaveModalOpened, setIsSaveModalOpened] = useState<boolean>(false);
 
 	const openDeleteModal = useCallback(() => {
 		setIsDeleteModalOpened(true);
@@ -39,6 +40,14 @@ export default function DeedTypesInformations(props: IProps) {
 		setIsDeleteModalOpened(false);
 	}, []);
 
+	const openSaveModal = useCallback(() => {
+		setIsSaveModalOpened(true);
+	}, []);
+
+	const closeSaveModal = useCallback(() => {
+		setIsSaveModalOpened(false);
+	}, []);
+
 	const deleteDeedType = useCallback(async () => {
 		await DeedTypes.getInstance().put(
 			deedTypeUid as string,
@@ -81,14 +90,19 @@ export default function DeedTypesInformations(props: IProps) {
 
 	const onSubmitHandler = useCallback(
 		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
-			await DeedTypes.getInstance().put(deedTypeUid as string, {
+			openSaveModal();
-				uid: deedTypeUid as string,
-				document_types: selectedDocuments.map((document) => DocumentType.hydrate<DocumentType>({ uid: document.value as string })),
-			});
 		},
-		[deedTypeUid, selectedDocuments],
+		[openSaveModal],
 	);
 
+	const saveDocumentTypes = useCallback(async () => {
+		await DeedTypes.getInstance().put(deedTypeUid as string, {
+			uid: deedTypeUid as string,
+			document_types: selectedDocuments.map((document) => DocumentType.hydrate<DocumentType>({ uid: document.value as string })),
+		});
+		closeSaveModal();
+	}, [closeSaveModal, deedTypeUid, selectedDocuments]);
+
 	const onDocumentChangeHandler = useCallback((values: MultiValue<IOption>) => {
 		setSelectedDocuments(values as IOption[]);
 	}, []);
@@ -171,6 +185,20 @@ export default function DeedTypesInformations(props: IProps) {
 						</Typography>
 					</div>
 				</Confirm>
+				<Confirm
+					isOpen={isSaveModalOpened}
+					onClose={closeSaveModal}
+					onAccept={saveDocumentTypes}
+					closeBtn
+					header={"Enregistrer les modifications ?"}
+					confirmText={"Enregistrer"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Les documents seront associés à ce type d'acte.
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultDeedTypesDashboard>
 	);