{Object.keys(groupedMethods)?.map((type) => (
{type.charAt(0).toUpperCase() + type.slice(1)}
{groupedMethods[type]?.map((method, index) => {
const isDisabled = isMethodDisabled(method);
const isFocused = focusedTender === method.value;
const colors = getTenderColor(method.value, isFocused, isDisabled);
return (
);
})}
))}
obj.value==tenderSelected)?.key }
childComponent={POSTenderLine} show = {showModalTenderLine}
backdrop={"static"} fullscreen={true}
setShowForm={setShowModalTenderLine} setShow={setShowModalTenderLine} handleCloseModalTenderLine={()=>setShowModalTenderLine(false)}
setTendersApplied={setTendersApplied} tenderSelected={tenderSelected} baskets={baskets} handleCloseModalTender={handleCloseModalTender}
totalAmountRemain = {totalAmountRemain} setBaskets={setBaskets} userInfo = {userInfo}
carts = {carts} config = {config} custCode = {custCode} paymentType={paymentMethodList?.find(obj=>obj.value==tenderSelected)}
classNameCustom="modal-custom-2"
/>
);
};
const POSTenderLine=(props)=>{
const {tenderSelected, totalAmountRemain, handleCloseModalTenderLine, handleCloseModalTender,baskets, setBaskets, custCode, carts,userInfo, config,paymentType
} = props
const amountTenderPayRef = useRef(null);
const [amountTenderPay, setAmountTenderPay] = useState(0)
const { Row, Col } =ReactBootstrap
useEffect(() => {
// Đặt amountTenderPay thành totalAmountRemain khi component được mount
if (paymentType?.type=='voucher' || paymentType?.type=='payment' ){
setAmountTenderPay(0);
}else{
setAmountTenderPay(totalAmountRemain);
}
}, [totalAmountRemain]);
useEffect(() => {
if (amountTenderPayRef?.current){
amountTenderPayRef.current.focus();
amountTenderPayRef.current.select();
}
}, []);
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
//backdrop.classList.add('modal-backdrop-2');
}
const handlePayment = () => {
setBaskets(prev => {
let basket = prev || { basket: { tenders: [] } }; // Khởi tạo nếu prev là null
const existingTenderIndex = (basket?.basket?.tenders || [])?.findIndex(tender => tender.tender_code === tenderSelected);
if (existingTenderIndex !== -1) {
// Nếu tender đã tồn tại, cập nhật giá trị
const updatedTenders = [...basket.basket.tenders];
updatedTenders[existingTenderIndex].value = amountTenderPay; // Cập nhật giá trị collected
updatedTenders[existingTenderIndex].contribution = (tenderSelected!='C' ? amountTenderPay : (amountTenderPay>totalAmountRemain? totalAmountRemain:amountTenderPay)) ||0;
return {
...basket,
basket: {
...basket.basket,
tenders: updatedTenders
}
};
} else {
// Nếu tender chưa tồn tại, thêm mới vào danh sách
return {
...basket,
basket: {
...basket.basket,
tenders: [
...basket.basket.tenders || [],
{
tender_code: tenderSelected,
value: amountTenderPay,
contribution:( tenderSelected!='C' ? amountTenderPay : (amountTenderPay>totalAmountRemain? totalAmountRemain:amountTenderPay) ) || 0,
basket_id: basket?.basket.basket_id
}
]
}
};
}
});
// Đóng modal hoặc thực hiện hành động khác
handleCloseModalTenderLine();
if (totalAmountRemain <= amountTenderPay && handleCloseModalTender){
handleCloseModalTender()
}
};
const handleAmountTenderPayChange = (e) => {
const newValue = commonFunc.unFormatCurrency(e.target.value);
console.log(newValue); // Xem giá trị mới
setAmountTenderPay(newValue);
};
const texts = {
paymentRemaining: {
vi: "Còn lại:",
en: "Remaining:"
},
paymentAmount: {
vi: "Số tiền thanh toán:",
en: "Payment Amount:"
},
close: {
vi: "Đóng",
en: "Close"
},
pay: {
vi: "Thanh toán",
en: "Pay"
}
};
return (