fix: gestion du jour d'échéance

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);
-    if (newDefaultDay >= 1 && newDefaultDay <= 31) {
-      setDefaultDay(newDefaultDay);
-      setIsDefaultDayModified(true);
-
-      if (selectedFrequency !== null) {
-        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 value = e.target.value;
+    if (value === '') {
+      setDefaultDay('-');
+      setErrorMsg('');
+      setIsDefaultDayModified(false);
+      return;
     }
+
+    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=""
-                  min={1}
-                  max={31}
+                  errorMsg={errorMsg}
                 />
               </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>
         )}