(feat) confirmation required for delete child

app/frontend/src/javascript/components/family-account/child-item.tsx

@@ -3,18 +3,39 @@ import { Child } from '../../models/child';
 import { useTranslation } from 'react-i18next';
 import { FabButton } from '../base/fab-button';
 import FormatLib from '../../lib/format';
+import { DeleteChildModal } from './delete-child-modal';
+import ChildAPI from '../../api/child';
 
 interface ChildItemProps {
   child: Child;
   onEdit: (child: Child) => void;
-  onDelete: (child: Child) => void;
+  onDelete: (error: string) => void;
+  onError: (error: string) => void;
 }
 
 /**
  * A child item.
  */
-export const ChildItem: React.FC<ChildItemProps> = ({ child, onEdit, onDelete }) => {
+export const ChildItem: React.FC<ChildItemProps> = ({ child, onEdit, onDelete, onError }) => {
   const { t } = useTranslation('public');
+  const [isOpenDeleteChildModal, setIsOpenDeleteChildModal] = React.useState<boolean>(false);
+
+  /**
+   * Toggle the delete child modal
+   */
+  const toggleDeleteChildModal = () => setIsOpenDeleteChildModal(!isOpenDeleteChildModal);
+
+  /**
+   * Delete a child
+   */
+  const deleteChild = () => {
+    ChildAPI.destroy(child.id).then(() => {
+      toggleDeleteChildModal();
+      onDelete(t('app.public.child_item.deleted'));
+    }).catch(() => {
+      onError(t('app.public.child_item.unable_to_delete'));
+    });
+  };
 
   return (
     <div className="child-item">
@@ -32,7 +53,8 @@ export const ChildItem: React.FC<ChildItemProps> = ({ child, onEdit, onDelete })
       </div>
       <div className="actions">
         <FabButton icon={<i className="fa fa-edit" />} onClick={() => onEdit(child)} className="edit-button" />
-        <FabButton icon={<i className="fa fa-trash" />} onClick={() => onDelete(child)} className="delete-button" />
+        <FabButton icon={<i className="fa fa-trash" />} onClick={toggleDeleteChildModal} className="delete-button" />
+        <DeleteChildModal isOpen={isOpenDeleteChildModal} toggleModal={toggleDeleteChildModal} child={child} onDelete={deleteChild} />
       </div>
     </div>
   );

app/frontend/src/javascript/components/family-account/children-list.tsx

@@ -69,10 +69,9 @@ export const ChildrenList: React.FC<ChildrenListProps> = ({ user, operator, onEr
   /**
    * Delete a child
    */
-  const deleteChild = (child: Child) => {
-    ChildAPI.destroy(child.id).then(() => {
-      ChildAPI.index({ user_id: user.id }).then(setChildren);
-    });
+  const handleDeleteChildSuccess = (msg: string) => {
+    ChildAPI.index({ user_id: user.id }).then(setChildren);
+    onSuccess(msg);
   };
 
   /**
@@ -105,7 +104,7 @@ export const ChildrenList: React.FC<ChildrenListProps> = ({ user, operator, onEr
 
       <div className="children-list">
         {children.map(child => (
-          <ChildItem key={child.id} child={child} onEdit={editChild} onDelete={deleteChild} />
+          <ChildItem key={child.id} child={child} onEdit={editChild} onDelete={handleDeleteChildSuccess} onError={onError} />
         ))}
       </div>
       <ChildModal child={child} isOpen={isOpenChildModal} toggleModal={() => setIsOpenChildModal(false)} onSuccess={handleSaveChildSuccess} onError={onError} supportingDocumentsTypes={supportingDocumentsTypes} operator={operator} />

app/frontend/src/javascript/components/family-account/delete-child-modal.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FabModal } from '../base/fab-modal';
+import { Child } from '../../models/child';
+
+interface DeleteChildModalProps {
+  isOpen: boolean,
+  toggleModal: () => void,
+  child: Child,
+  onDelete: (child: Child) => void,
+}
+
+/**
+ * Modal dialog to remove a requested child
+ */
+export const DeleteChildModal: React.FC<DeleteChildModalProps> = ({ isOpen, toggleModal, onDelete, child }) => {
+  const { t } = useTranslation('public');
+
+  /**
+   * Callback triggered when the child confirms the deletion
+   */
+  const handleDeleteChild = () => {
+    onDelete(child);
+  };
+
+  return (
+    <FabModal title={t('app.public.delete_child_modal.confirmation_required')}
+      isOpen={isOpen}
+      toggleModal={toggleModal}
+      closeButton={true}
+      confirmButton={t('app.public.delete_child_modal.confirm')}
+      onConfirm={handleDeleteChild}
+      className="delete-child-modal">
+      <p>{t('app.public.delete_child_modal.confirm_delete_child')}</p>
+    </FabModal>
+  );
+};

config/locales/app.public.en.yml

@@ -503,6 +503,12 @@ en:
         first_name: "First name of the child"
         last_name: "Last name of the child"
         birthday: "Birthday"
+        deleted: "The child has been deleted."
+        unable_to_delete: "Unable to delete the child."
+      delete_child_modal:
+        confirmation_required: "Confirmation required"
+        confirm: "Confirm"
+        confirm_delete_child: "Do you really want to remove this child?"
       tour:
         conclusion:
           title: "Thank you for your attention"

config/locales/app.public.fr.yml

@@ -503,6 +503,12 @@ fr:
         first_name: "Prénom de l'enfant"
         last_name: "Nom de l'enfant"
         birthday: "Date de naissance"
+        deleted: "L'enfant a bien été supprimée."
+        unable_to_delete: "Impossible de supprimer la demande de l'enfant."
+      delete_child_modal:
+        confirmation_required: "Confirmation requise"
+        confirm: "Valider"
+        confirm_delete_child: "Êtes-vous sûr de vouloir supprimer la demande de cet enfant ?"
       tour:
         conclusion:
           title: "Merci de votre attention"