fix: gestion du jour d'échéance

Front-End/src/components/DateTab.js

@@ -1,12 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Check } from 'lucide-react';
 import Popup from '@/components/Popup';
 
-const DateTab = ({ dates, activeTab, handleDateChange, handleEdit, type, paymentPlanId }) => {
+const DateTab = ({ dates, activeTab, handleDateChange, handleEdit, type, paymentPlanId, resetModifiedDates }) => {
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupMessage, setPopupMessage] = useState("");
   const [modifiedDates, setModifiedDates] = useState({});
 
+  useEffect(() => {
+    if (resetModifiedDates) {
+      setModifiedDates({});
+    }
+  }, [resetModifiedDates]);
+
   const submit = (updatedData) => {
     const dataWithType = {
       ...updatedData,
@@ -52,13 +58,9 @@ const DateTab = ({ dates, activeTab, handleDateChange, handleEdit, type, payment
           </div>
         ))}
       </div>
-      <Popup
+      {popupVisible && (
-        visible={popupVisible}
+        <Popup message={popupMessage} onClose={() => setPopupVisible(false)} />
-        message={popupMessage}
+      )}
-        onConfirm={() => setPopupVisible(false)}
-        onCancel={() => setPopupVisible(false)}
-        uniqueConfirmButton={true}
-      />
     </div>
   );
 };

Front-End/src/components/InputTextIcon.js

@@ -1,4 +1,4 @@
-export default function InputTextIcon({name, type, IconItem, label, value, onChange, errorMsg, placeholder, className, min, max}) {
+export default function InputTextIcon({name, type, IconItem, label, value, onChange, errorMsg, placeholder, className}) {
     return (
         <>
             <div className={`${className}`}>
@@ -15,8 +15,6 @@ export default function InputTextIcon({name, type, IconItem, label, value, onCha
                         value={value}
                         onChange={onChange}
                         className="flex-1 px-3 py-2 block w-full rounded-r-md sm:text-sm border-none focus:ring-0 outline-none"
-                        min={min}
-                        max={max}
                     />
                 </div>
                 {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}

Front-End/src/components/PaymentPlanSelector.js

@@ -16,10 +16,12 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
   const [dates, setDates] = useState({});
   const [selectedFrequency, setSelectedFrequency] = useState(null);
   const [activeFrequencies, setActiveFrequencies] = useState([]);
-  const [defaultDay, setDefaultDay] = useState(new Date().getDate());
+  const [defaultDay, setDefaultDay] = useState('-');
   const [isDefaultDayModified, setIsDefaultDayModified] = useState(false);
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupMessage, setPopupMessage] = useState("");
+  const [errorMsg, setErrorMsg] = useState('');
+  const [resetModifiedDates, setResetModifiedDates] = useState(false);
 
   useEffect(() => {
     if (paymentPlans && paymentPlans.length > 0) {
@@ -46,6 +48,21 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
     }
   }, [paymentPlans]);
 
+  useEffect(() => {
+    updateDefaultDay();
+  }, [dates, selectedFrequency]);
+
+  const updateDefaultDay = () => {
+    const currentDates = dates[selectedFrequency];
+    if (currentDates && currentDates.length > 0) {
+      const days = currentDates.map(date => new Date(date).getDate());
+      const allSameDay = days.every(day => day === days[0]);
+      setDefaultDay(allSameDay ? days[0] : '-');
+    } else {
+      setDefaultDay('-');
+    }
+  };
+
   const handleActivationChange = (value) => {
     const selectedPlan = paymentPlans.find(plan => plan.frequency === paymentPlansOptions.find(p => p.id === value)?.frequency);
     if (!selectedPlan) return;
@@ -109,26 +126,33 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
   };
 
   const handleDefaultDayChange = (e) => {
-    const newDefaultDay = parseInt(e.target.value, 10);
+    const value = e.target.value;
-    if (newDefaultDay >= 1 && newDefaultDay <= 31) {
+    if (value === '') {
-      setDefaultDay(newDefaultDay);
+      setDefaultDay('-');
-      setIsDefaultDayModified(true);
+      setErrorMsg('');
-
+      setIsDefaultDayModified(false);
-      if (selectedFrequency !== null) {
+      return;
-        const frequencyValue = paymentPlansOptions.find(plan => plan.id === selectedFrequency)?.frequency || 1;
-        const newDates = Array(frequencyValue).fill('').map((_, index) => {
-          const newDate = new Date();
-          newDate.setDate(newDefaultDay);
-          if (selectedFrequency === 1) {
-            newDate.setMonth(newDate.getMonth() + index * 4); // Espacer de 4 mois pour le paiement en 3 fois
-          } else {
-            newDate.setMonth(newDate.getMonth() + index);
-          }
-          return newDate.toISOString().split('T')[0];
-        });
-        setDates(prevDates => ({ ...prevDates, [selectedFrequency]: newDates }));
-      }
     }
+
+    const day = parseInt(value, 10);
+    setDefaultDay(day);
+
+    if (day < 1 || day > 31) {
+      setErrorMsg('Le jour doit être compris entre 1 et 31.');
+      setIsDefaultDayModified(false);
+      return;
+    }
+
+    setErrorMsg('');
+    setIsDefaultDayModified(true);
+
+    // Mettre à jour les dates d'échéance en fonction du jour sélectionné
+    const updatedDates = dates[selectedFrequency].map(date => {
+      const newDate = new Date(date);
+      newDate.setDate(day);
+      return newDate.toISOString().split('T')[0];
+    });
+    setDates(prevDates => ({ ...prevDates, [selectedFrequency]: updatedDates }));
   };
 
   const handleSubmitDefaultDay = () => {
@@ -144,7 +168,9 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
       .then(() => {        
         setPopupMessage(`Mise à jour des dates d'échéances effectuée avec succès`);
         setPopupVisible(true);
-        setIsDefaultDayModified(false); // Réinitialiser l'état de modification après la soumission
+        setIsDefaultDayModified(false);
+        setResetModifiedDates(true);
+        setTimeout(() => setResetModifiedDates(false), 0);
       })
       .catch(error => {
         console.error(error);
@@ -207,9 +233,7 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
                   value={defaultDay}
                   onChange={handleDefaultDayChange}
                   placeholder="Jour d'échéance"
-                  errorMsg=""
+                  errorMsg={errorMsg}
-                  min={1}
-                  max={31}
                 />
               </div>
               {isDefaultDayModified && (
@@ -217,7 +241,7 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
                   type="button"
                   onClick={handleSubmitDefaultDay}
                   className="text-emerald-500 hover:text-emerald-700 ml-2 cursor-pointer"
-                  style={{ marginTop: '1.75rem' }} // Adjust this value to align with the input
+                  style={{ marginTop: errorMsg ? '3.5rem' : '1.75rem' }}
                 >
                   <Check className="w-5 h-5" />
                 </button>
@@ -230,6 +254,7 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type }
               handleEdit={handleEdit}
               type={type}
               paymentPlanId={selectedPaymentPlan.id}
+              resetModifiedDates={resetModifiedDates}
             />
           </div>
         )}