diff --git a/Front-End/src/components/DateTab.js b/Front-End/src/components/DateTab.js index 958c584..99f7293 100644 --- a/Front-End/src/components/DateTab.js +++ b/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 ))} - setPopupVisible(false)} - onCancel={() => setPopupVisible(false)} - uniqueConfirmButton={true} - /> + {popupVisible && ( + setPopupVisible(false)} /> + )} ); }; diff --git a/Front-End/src/components/InputTextIcon.js b/Front-End/src/components/InputTextIcon.js index 447e7bc..25aeb94 100644 --- a/Front-End/src/components/InputTextIcon.js +++ b/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 ( <>
@@ -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} />
{errorMsg &&

{errorMsg}

} diff --git a/Front-End/src/components/PaymentPlanSelector.js b/Front-End/src/components/PaymentPlanSelector.js index 8c8eb21..dfa5aa9 100644 --- a/Front-End/src/components/PaymentPlanSelector.js +++ b/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} /> {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' }} > @@ -230,6 +254,7 @@ const PaymentPlanSelector = ({ paymentPlans, setPaymentPlans, handleEdit, type } handleEdit={handleEdit} type={type} paymentPlanId={selectedPaymentPlan.id} + resetModifiedDates={resetModifiedDates} /> )}