mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
feat: Mise en place des paiements en plusieurs fois (partie BACK) [#25]
This commit is contained in:
N3WT DE COMPET
248
Front-End/src/components/PaymentPlanSelector.js
Normal file
248
Front-End/src/components/PaymentPlanSelector.js
Normal file
@ -0,0 +1,248 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Calendar, Eye, EyeOff, Clock, Check } from 'lucide-react';
|
||||
import Table from '@/components/Table';
|
||||
import DateTab from '@/components/DateTab';
|
||||
import InputTextIcon from '@/components/InputTextIcon';
|
||||
import Popup from '@/components/Popup';
|
||||
|
||||
const paymentPlansOptions = [
|
||||
{ id: 0, name: '1 fois', frequency: 1 },
|
||||
{ id: 1, name: '3 fois', frequency: 3 },
|
||||
{ id: 2, name: '10 fois', frequency: 10 },
|
||||
{ id: 3, name: '12 fois', frequency: 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 [isDefaultDayModified, setIsDefaultDayModified] = useState(false);
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [popupMessage, setPopupMessage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (paymentPlans && paymentPlans.length > 0) {
|
||||
const activePlans = paymentPlans.filter(plan => plan.is_active);
|
||||
const frequencies = activePlans.map(plan => {
|
||||
const paymentPlanOption = paymentPlansOptions.find(p => p.frequency === plan.frequency);
|
||||
return paymentPlanOption ? paymentPlanOption.id : null;
|
||||
}).filter(id => id !== null);
|
||||
setActiveFrequencies(frequencies);
|
||||
|
||||
if (activePlans.length > 0) {
|
||||
const firstDueDate = new Date(activePlans[0].due_dates[0]);
|
||||
setDefaultDay(firstDueDate.getDate());
|
||||
}
|
||||
|
||||
const initialDates = {};
|
||||
paymentPlans.forEach(plan => {
|
||||
const paymentPlanOption = paymentPlansOptions.find(p => p.frequency === plan.frequency);
|
||||
if (paymentPlanOption) {
|
||||
initialDates[paymentPlanOption.id] = plan.due_dates;
|
||||
}
|
||||
});
|
||||
setDates(initialDates);
|
||||
}
|
||||
}, [paymentPlans]);
|
||||
|
||||
const handleActivationChange = (value) => {
|
||||
const selectedPlan = paymentPlans.find(plan => plan.frequency === paymentPlansOptions.find(p => p.id === value)?.frequency);
|
||||
if (!selectedPlan) return;
|
||||
|
||||
const updatedData = {
|
||||
...selectedPlan,
|
||||
is_active: !selectedPlan.is_active
|
||||
};
|
||||
|
||||
handleEdit(selectedPlan.id, updatedData)
|
||||
.then(() => {
|
||||
setPaymentPlans(prevPlans => prevPlans.map(plan =>
|
||||
plan.id === selectedPlan.id ? { ...plan, is_active: updatedData.is_active } : plan
|
||||
));
|
||||
setActiveFrequencies(prevFrequencies => {
|
||||
if (updatedData.is_active) {
|
||||
setPopupMessage(`L'option de paiement en ${paymentPlansOptions.find(p => p.id === value).name} a été activée.`);
|
||||
setPopupVisible(true);
|
||||
return [...prevFrequencies, value];
|
||||
} else {
|
||||
setPopupMessage(`L'option de paiement en ${paymentPlansOptions.find(p => p.id === value).name} a été désactivée.`);
|
||||
setPopupVisible(true);
|
||||
return prevFrequencies.filter(item => item !== value);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRowClick = (row) => {
|
||||
const value = row.id;
|
||||
if (selectedFrequency === value) {
|
||||
setSelectedFrequency(null); // Désélectionner l'onglet si la ligne est déjà sélectionnée
|
||||
} else {
|
||||
setSelectedFrequency(value);
|
||||
if (!dates[value]) {
|
||||
const frequencyValue = paymentPlansOptions.find(plan => plan.id === value)?.frequency || 1;
|
||||
const newDates = Array(frequencyValue).fill('').map((_, index) => {
|
||||
const newDate = new Date();
|
||||
newDate.setDate(defaultDay);
|
||||
if (value === 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, [value]: newDates }));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateChange = (planId, index, date) => {
|
||||
setDates((prevDates) => {
|
||||
const newDates = { ...prevDates };
|
||||
newDates[planId][index] = date;
|
||||
return newDates;
|
||||
});
|
||||
};
|
||||
|
||||
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 handleSubmitDefaultDay = () => {
|
||||
const selectedPlan = paymentPlans.find(plan => plan.frequency === paymentPlansOptions.find(p => p.id === selectedFrequency)?.frequency);
|
||||
if (!selectedPlan) return;
|
||||
|
||||
const updatedData = {
|
||||
...selectedPlan,
|
||||
due_dates: dates[selectedFrequency]
|
||||
};
|
||||
|
||||
handleEdit(selectedPlan.id, updatedData)
|
||||
.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
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ name: 'OPTIONS', label: 'Option' },
|
||||
{ name: 'ACTIONS', label: 'Action' },
|
||||
];
|
||||
|
||||
const renderCell = (row, column) => {
|
||||
switch (column) {
|
||||
case 'OPTIONS':
|
||||
return <span className="text-sm font-medium text-gray-900">{row.name}</span>;
|
||||
case 'ACTIONS':
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleActivationChange(row.id);
|
||||
}}
|
||||
className={activeFrequencies.includes(row.id) ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
|
||||
>
|
||||
{activeFrequencies.includes(row.id) ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
|
||||
</button>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const selectedPaymentPlan = paymentPlans.find(plan => plan.frequency === paymentPlansOptions.find(p => p.id === selectedFrequency)?.frequency);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center mb-4">
|
||||
<Calendar className="w-6 h-6 text-emerald-500 mr-2" />
|
||||
<h2 className="text-xl font-semibold">Paiement en plusieurs fois</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Table
|
||||
data={paymentPlansOptions}
|
||||
columns={columns}
|
||||
renderCell={renderCell}
|
||||
isSelectable={true}
|
||||
onRowClick={handleRowClick}
|
||||
selectedRows={selectedFrequency !== null ? [selectedFrequency] : []}
|
||||
/>
|
||||
{selectedFrequency !== null && selectedPaymentPlan && (
|
||||
<div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex-grow">
|
||||
<InputTextIcon
|
||||
name="defaultDay"
|
||||
type="number"
|
||||
IconItem={Clock}
|
||||
label="Jour d'échéance"
|
||||
value={defaultDay}
|
||||
onChange={handleDefaultDayChange}
|
||||
placeholder="Jour d'échéance"
|
||||
errorMsg=""
|
||||
min={1}
|
||||
max={31}
|
||||
/>
|
||||
</div>
|
||||
{isDefaultDayModified && (
|
||||
<button
|
||||
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
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<DateTab
|
||||
dates={dates}
|
||||
activeTab={selectedFrequency}
|
||||
handleDateChange={handleDateChange}
|
||||
handleEdit={handleEdit}
|
||||
type={type}
|
||||
paymentPlanId={selectedPaymentPlan.id}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Popup
|
||||
visible={popupVisible}
|
||||
message={popupMessage}
|
||||
onConfirm={() => setPopupVisible(false)}
|
||||
onCancel={() => setPopupVisible(false)}
|
||||
uniqueConfirmButton={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentPlanSelector;
|
||||
Reference in New Issue
Block a user