From 59fb10753d42c5122d95608491b319a68a18f1c0 Mon Sep 17 00:00:00 2001
From: Du Peng <gnepud@gmail.com>
Date: Wed, 28 Jun 2023 18:23:07 +0200
Subject: [PATCH] (feat) some improvements for family account

---
 .../javascript/components/family-account/child-form.tsx  | 1 +
 .../javascript/components/family-account/child-modal.tsx | 9 +++++----
 .../components/family-account/child-validation.tsx       | 6 +++---
 .../src/javascript/components/user/members-list-item.tsx | 9 ++++++++-
 app/frontend/src/javascript/controllers/admin/members.js | 1 -
 app/frontend/templates/admin/events/monitoring.html      | 8 ++++----
 app/frontend/templates/admin/events/reservations.html    | 8 ++++----
 app/frontend/templates/events/show.html                  | 6 +++---
 config/locales/app.admin.en.yml                          | 3 ++-
 config/locales/app.admin.fr.yml                          | 3 ++-
 config/locales/app.public.en.yml                         | 2 +-
 config/locales/app.public.fr.yml                         | 5 +++--
 config/locales/fr.yml                                    | 2 +-
 13 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/app/frontend/src/javascript/components/family-account/child-form.tsx b/app/frontend/src/javascript/components/family-account/child-form.tsx
index bc7ab29c1..f9e9b4a53 100644
--- a/app/frontend/src/javascript/components/family-account/child-form.tsx
+++ b/app/frontend/src/javascript/components/family-account/child-form.tsx
@@ -116,6 +116,7 @@ export const ChildForm: React.FC<ChildFormProps> = ({ child, onSubmit, supportin
                               defaultFile={sf as FileType}
                               id={`supporting_document_files_attributes.${index}`}
                               accept="application/pdf"
+                              rules={{ required: true }}
                               setValue={setValue}
                               label={getSupportingDocumentsTypeName(sf.supporting_document_type_id)}
                               showRemoveButton={false}
diff --git a/app/frontend/src/javascript/components/family-account/child-modal.tsx b/app/frontend/src/javascript/components/family-account/child-modal.tsx
index f950e207e..942dc60a2 100644
--- a/app/frontend/src/javascript/components/family-account/child-modal.tsx
+++ b/app/frontend/src/javascript/components/family-account/child-modal.tsx
@@ -28,14 +28,15 @@ export const ChildModal: React.FC<ChildModalProps> = ({ child, isOpen, toggleMod
    * Save the child to the API
    */
   const handleSaveChild = async (data: Child): Promise<void> => {
+    let c: Child = data;
     try {
       if (child?.id) {
-        await ChildAPI.update(data);
+        c = await ChildAPI.update(data);
       } else {
-        await ChildAPI.create(data);
+        c = await ChildAPI.create(data);
       }
       toggleModal();
-      onSuccess(data, '');
+      onSuccess(c, '');
     } catch (error) {
       onError(error);
     }
@@ -56,7 +57,7 @@ export const ChildModal: React.FC<ChildModalProps> = ({ child, isOpen, toggleMod
         onSubmit={handleSaveChild}
         supportingDocumentsTypes={supportingDocumentsTypes}
         operator={operator}
-        onSuccess={onSuccess}
+        onSuccess={(msg) => onSuccess(child, msg)}
         onError={onError}
       />
     </FabModal>
diff --git a/app/frontend/src/javascript/components/family-account/child-validation.tsx b/app/frontend/src/javascript/components/family-account/child-validation.tsx
index 1705ad6cf..92f6db8db 100644
--- a/app/frontend/src/javascript/components/family-account/child-validation.tsx
+++ b/app/frontend/src/javascript/components/family-account/child-validation.tsx
@@ -9,7 +9,7 @@ import { TDateISO } from '../../typings/date-iso';
 
 interface ChildValidationProps {
   child: Child
-  onSuccess: (message: string) => void,
+  onSuccess: (child: Child, msg: string) => void;
   onError: (message: string) => void,
 }
 
@@ -37,8 +37,8 @@ export const ChildValidation: React.FC<ChildValidationProps> = ({ child, onSucce
       _child.validated_at = null;
     }
     ChildAPI.validate(_child)
-      .then(() => {
-        onSuccess(t(`app.admin.child_validation.${_value ? 'validate' : 'invalidate'}_child_success`));
+      .then((c) => {
+        onSuccess(c, t(`app.admin.child_validation.${_value ? 'validate' : 'invalidate'}_child_success`));
       }).catch(err => {
         setValue(!_value);
         onError(t(`app.admin.child_validation.${_value ? 'validate' : 'invalidate'}_child_error`) + err);
diff --git a/app/frontend/src/javascript/components/user/members-list-item.tsx b/app/frontend/src/javascript/components/user/members-list-item.tsx
index 4d0bea4f0..51b2458af 100644
--- a/app/frontend/src/javascript/components/user/members-list-item.tsx
+++ b/app/frontend/src/javascript/components/user/members-list-item.tsx
@@ -30,8 +30,15 @@ export const MembersListItem: React.FC<MembersListItemProps> = ({ member, onErro
     window.location.href = `/#!/admin/members/${memberId}/edit`;
   };
 
+  /**
+   * member and all his children are validated
+   */
+  const memberIsValidated = (): boolean => {
+    return member.validated_at && member.children.every((child) => child.validated_at);
+  };
+
   return (
-    <div key={member.id} className={`members-list-item ${member.validated_at ? 'is-validated' : ''} ${member.need_completion ? 'is-incomplet' : ''}`}>
+    <div key={member.id} className={`members-list-item ${memberIsValidated() ? 'is-validated' : ''} ${member.need_completion ? 'is-incomplet' : ''}`}>
       <div className="left-col">
         <div className='status'>
           {(member.children.length > 0)
diff --git a/app/frontend/src/javascript/controllers/admin/members.js b/app/frontend/src/javascript/controllers/admin/members.js
index e7b388827..e5593977d 100644
--- a/app/frontend/src/javascript/controllers/admin/members.js
+++ b/app/frontend/src/javascript/controllers/admin/members.js
@@ -322,7 +322,6 @@ Application.Controllers.controller('AdminMembersController', ['$scope', '$sce',
             }
             return c;
           });
-          console.log(member.children);
           return member;
         }
         return member;
diff --git a/app/frontend/templates/admin/events/monitoring.html b/app/frontend/templates/admin/events/monitoring.html
index 01d8e9285..ed4aa9d61 100644
--- a/app/frontend/templates/admin/events/monitoring.html
+++ b/app/frontend/templates/admin/events/monitoring.html
@@ -50,10 +50,10 @@
     </td>
 
     <td>
-      <span ng-if="event.event_type === 'standard'" class="v-middle badge text-base bg-stage" translate="">{{ 'app.admin.events.event_type.standard' }}</span>
-      <span ng-if="event.event_type === 'nominative'" class="v-middle badge text-base bg-event" translate="">{{ 'app.admin.events.event_type.nominative' }}</span>
-      <span ng-if="event.event_type === 'family'" class="v-middle badge text-base bg-atelier" translate="">{{ 'app.admin.events.event_type.family' }}</span>
-      <span ng-if="event.pre_registration" class="v-middle badge text-base bg-info" translate="">{{ 'app.admin.events.pre_registration' }}</span>
+      <span ng-if="event.event_type === 'standard'" class="v-middle badge text-sm bg-stage" translate="">{{ 'app.admin.events.event_type.standard' }}</span>
+      <span ng-if="event.event_type === 'nominative'" class="v-middle badge text-sm bg-event" translate="">{{ 'app.admin.events.event_type.nominative' }}</span>
+      <span ng-if="event.event_type === 'family'" class="v-middle badge text-sm bg-atelier" translate="">{{ 'app.admin.events.event_type.family' }}</span>
+      <span ng-if="event.pre_registration" class="v-middle badge text-sm bg-info" translate="">{{ 'app.admin.events.pre_registration' }}</span>
     </td>
 
 	<td style="vertical-align:middle">
diff --git a/app/frontend/templates/admin/events/reservations.html b/app/frontend/templates/admin/events/reservations.html
index 02fc0b260..b2dad5e8d 100644
--- a/app/frontend/templates/admin/events/reservations.html
+++ b/app/frontend/templates/admin/events/reservations.html
@@ -46,10 +46,10 @@
               <span ng-repeat="ticket in reservation.tickets_attributes">{{ticket.event_price_category.price_category.name}} : {{ticket.booked}}</span>
             </td>
             <td ng-if="event.pre_registration">
-              <span ng-if="!isValidated(reservation) && !isCancelled(reservation) && !reservation.is_paid" class="v-middle badge text-base bg-info" translate="">{{ 'app.admin.event_reservations.event_status.pre_registered' }}</span>
-              <span ng-if="isValidated(reservation) && !isCancelled(reservation) && !reservation.is_paid" class="v-middle badge text-base bg-stage" translate="">{{ 'app.admin.event_reservations.event_status.to_pay' }}</span>
-              <span ng-if="reservation.is_paid && !isCancelled(reservation)" class="v-middle badge text-base bg-success" translate="">{{ 'app.admin.event_reservations.event_status.paid' }}</span>
-              <span ng-if="isCancelled(reservation)" class="v-middle badge text-base bg-event" translate="">{{ 'app.admin.event_reservations.event_status.canceled' }}</span>
+              <span ng-if="!isValidated(reservation) && !isCancelled(reservation) && !reservation.is_paid" class="v-middle badge text-sm bg-info" translate="">{{ 'app.admin.event_reservations.event_status.pre_registered' }}</span>
+              <span ng-if="isValidated(reservation) && !isCancelled(reservation) && !reservation.is_paid" class="v-middle badge text-sm bg-stage" translate="">{{ 'app.admin.event_reservations.event_status.to_pay' }}</span>
+              <span ng-if="reservation.is_paid && !isCancelled(reservation)" class="v-middle badge text-sm bg-success" translate="">{{ 'app.admin.event_reservations.event_status.paid' }}</span>
+              <span ng-if="isCancelled(reservation)" class="v-middle badge text-sm bg-event" translate="">{{ 'app.admin.event_reservations.event_status.canceled' }}</span>
             </td>
             <td ng-if="event.pre_registration">
               <button class="btn btn-default" ng-click="validateReservation(reservation)" ng-if="!isValidated(reservation) && !isCancelled(reservation) && !reservation.is_paid" translate>
diff --git a/app/frontend/templates/events/show.html b/app/frontend/templates/events/show.html
index 9145c51e0..81827e975 100644
--- a/app/frontend/templates/events/show.html
+++ b/app/frontend/templates/events/show.html
@@ -73,9 +73,9 @@
 
       <div class="panel-content wrapper">
         <div>
-          <span ng-if="event.event_type === 'nominative'" class="v-middle badge text-base bg-event" translate="">{{ 'app.public.events_show.event_type.nominative' }}</span>
-          <span ng-if="event.event_type === 'family'" class="v-middle badge text-base bg-event" translate="">{{ 'app.public.events_show.event_type.family' }}</span>
-          <span ng-if="event.pre_registration" class="v-middle badge text-base bg-info" translate="">{{ 'app.public.events_show.pre_registration' }}</span>
+          <span ng-if="event.event_type === 'nominative'" class="v-middle badge text-xs bg-event" translate="">{{ 'app.public.events_show.event_type.nominative' }}</span>
+          <span ng-if="event.event_type === 'family'" class="v-middle badge text-xs bg-event" translate="">{{ 'app.public.events_show.event_type.family' }}</span>
+          <span ng-if="event.pre_registration" class="v-middle badge text-xs bg-info" translate="">{{ 'app.public.events_show.pre_registration' }}</span>
         </div>
 
         <dl class="text-sm">
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index a7f5ea76c..670227373 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -1824,8 +1824,9 @@ en:
         public_registrations: "Public registrations"
         show_username_in_admin_list: "Show the username in the list"
         family_account: "family account"
-        family_account_info_html: "By activating this option, you offer your members the possibility to add their child(ren) to their own account. You can also request proof if you wish to validate them."
+        family_account_info_html: "The Family account allows your members to add their children under 18 years old to their own account and directly register them for Family events. You can also request supporting documents for each child and validate their account."
         enable_family_account: "Enable the Family Account option"
+        child_validation_required: "the account validation option for children"
         child_validation_required_label: "Activate the account validation option for children"
         overlapping_options:
           training_reservations: "Trainings"
diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml
index 48787f54b..a1e0d39b7 100644
--- a/config/locales/app.admin.fr.yml
+++ b/config/locales/app.admin.fr.yml
@@ -1816,8 +1816,9 @@ fr:
         public_registrations: "Inscriptions publiques"
         show_username_in_admin_list: "Afficher le nom d'utilisateur dans la liste"
         family_account: "Compte famille"
-        family_account_info_html: "En activant cette option, vous offrez à vos membres la possibilité d'ajouter sur leur propre compte leur(s) enfants. Vous pouvez aussi demander un justificatif si vous souhaitez les valider."
+        family_account_info_html: "Le compte Famille permet à vos membres d'ajouter leurs enfants de moins de 18 ans sur leur propre compte et de les inscrire directement aux évènements de type Famille. Vous pouvez aussi demander des justificatifs pour chaque enfant et valider leur compte."
         enable_family_account: "Activer l'option Compte Famille"
+        child_validation_required: "l'option de validation des comptes enfants"
         child_validation_required_label: "Activer l'option de validation des comptes enfants"
         overlapping_options:
           training_reservations: "Formations"
diff --git a/config/locales/app.public.en.yml b/config/locales/app.public.en.yml
index a7ea3ec94..ca82f3256 100644
--- a/config/locales/app.public.en.yml
+++ b/config/locales/app.public.en.yml
@@ -494,7 +494,7 @@ en:
         edit_child: "Edit child"
         new_child: "New child"
       child_form:
-        child_form_info: "Please note that you can only add a child under the age of 18. Supporting documents are requested by your administrator, they will be useful to validate your child's account and authorize the reservation of events."
+        child_form_info: "Only children under 18 years old can be added to your Family account. Supporting documents may be requested to validate your child's account and allow you to register them for events."
         first_name: "First name"
         last_name: "Last name"
         birthday: "Birthday"
diff --git a/config/locales/app.public.fr.yml b/config/locales/app.public.fr.yml
index 303b3ca8b..3f924f60e 100644
--- a/config/locales/app.public.fr.yml
+++ b/config/locales/app.public.fr.yml
@@ -487,13 +487,14 @@ fr:
         select_a_member: "Sélectionnez un membre"
         start_typing: "Commencez à écrire..."
       children_dashboard:
-        heading: "Mes enfants"
+        heading: "Enfants"
+        member_heading: "Mes enfants"
         add_child: "Ajouter un enfant"
       child_modal:
         edit_child: "Modifier un enfant"
         new_child: "Ajouter un enfant"
       child_form:
-        child_form_info: "Notez que vous ne pouvez ajouter que vos enfants de moins de 18 ans. Des pièces justificatives sont demandés par votre administrateur, elles lui seront utiles pour valider le compte de votre enfant et ainsi autoriser la réservation d'événements."
+        child_form_info: "Seuls les enfants de moins de 18 ans peuvent être ajoutés au sein de votre compte Famille. Des justificatifs peuvent être demandés afin de valider le compte de votre enfant et de vous permettre ensuite de l'inscrire à des évènements."
         first_name: "Prénom"
         last_name: "Nom"
         birthday: "Date de naissance"
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index f1446c56d..de6e9d8ec 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -317,7 +317,7 @@ fr:
       notify_admin_when_user_is_created:
         a_new_user_account_has_been_created_NAME_EMAIL_html: "Un nouveau compte utilisateur vient d'être créé : <strong><em>%{NAME} &lt;%{EMAIL}&gt;</strong></em>."
       notify_admin_child_created:
-        a_new_child_has_been_created_NAME_html: "Un nouveau enfant vient d'être créé : <strong><em>%{NAME}</em></strong>."
+        a_new_child_has_been_created_NAME_html: "Un nouvel enfant vient d'être créé : <strong><em>%{NAME}</em></strong>."
       notify_admin_when_user_is_imported:
         a_new_user_account_has_been_imported_from_PROVIDER_UID_html: "Un nouveau compte utilisateur vient d'être importé depuis : <strong><em>%{PROVIDER}</strong> (%{UID})</em>."
       notify_member_create_reservation: