You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

429 lines
16 KiB

import moment from "jalali-moment";
import { useEffect, useState } from "react";
import {
AiOutlinePlus,
AiFillDelete,
AiOutlineCloseCircle,
} from "react-icons/ai";
import { connect } from "react-redux";
import { toast } from "react-toastify";
import { userFactor,userTransaction } from "../../redux/actions";
const PaymentBox = ({
setShowPaymentBox,
getFactorInfo,
factorInfo,
payment,
query,
addUserTransaction,
restartTransaction,
transactionSituation
}) => {
useEffect(() => {
getFactorInfo();
}, []);
console.log("factorInfo:");
console.log(factorInfo);
//-------------------------------------------------
const [fake, setFake] = useState(0);
const [paymentList, setPaymentList] = useState([
{
id: 1,
amount: factorInfo?.payPrice,
status: null,
type: 1,
cardNumber: null,
paidAt: null,
TracingNumber: null,
},
]);
useEffect(() => {
if (localStorage.getItem("paymentList") && query.status) {
console.log("fnjwebfjkwbf:");
console.log(factorInfo);
let newList = JSON.parse(localStorage.getItem("paymentList"));
let lastPaymentIndex = localStorage.getItem("lastPaymentIndex");
let payPrice = localStorage.getItem("factorInfoPrice");
if (query.status === "OK") {
newList[lastPaymentIndex].status = 1;
if (newList.amount < payPrice) {
newList.push({
id: newList.length + 1,
amount: null,
status: null,
type: 1,
cardNumber: null,
paidAt: null,
TracingNumber: null,
});
}
} else {
newList[lastPaymentIndex].status = null;
}
localStorage.removeItem("paymentList");
localStorage.removeItem("lastPaymentIndex");
localStorage.removeItem("factorInfoPrice");
setPaymentList(newList);
setFake(fake + 1);
}
}, []);
//-----------------------------------------
const changeType = (e, index) => {
let newList = paymentList;
newList[index] = { ...newList[index], type: Number(e.target.value) };
console.log("g:");
console.log(newList[index]);
setPaymentList(newList);
setFake(fake + 1);
};
const addPaymentHandler = () => {
let newList = paymentList;
newList.push({
id: newList.length + 1,
amount: null,
status: null,
type: 1,
cardNumber: null,
paidAt: null,
TracingNumber: null,
});
setPaymentList(newList);
setFake(fake + 1);
};
const deletePayment = (index) => {
let newList = [];
for (let i = 0; i < paymentList.length; i++) {
if (i !== index) {
newList.push(paymentList[i]);
}
}
setPaymentList(newList);
setFake(fake + 1);
};
//changeAmount--------------------
const changeAmount = (e, index) => {
let newList = paymentList;
newList[index].amount = e.target.value;
setPaymentList(newList);
setFake(fake + 1);
};
//paymentStatuslists----------------------
let paymentStatusColorList = ["#FBBF24", "#84CC16"];
let paymentStatusTextList = ["در انتظار تایید", "پرداخت شده"];
//cardToCardCHeck-----------------------------------
console.log("transactionSituation:");
console.log(transactionSituation);
useEffect(()=>{
if(transactionSituation)
{
alert("hooooooooo");
let newList = paymentList;
newList[newList.length-1].status=0;
setPaymentList(newList);
setFake(fake+1)
restartTransaction()
}
},[transactionSituation])
//paymentHandler--------
const paymentHandler = (item, index) => {
console.log(item);
if (item.type === 1) {
localStorage.setItem("paymentList", JSON.stringify(paymentList));
localStorage.setItem("lastPaymentIndex", index);
localStorage.setItem("factorInfoPrice", factorInfo.payPrice);
// payment({
// price: item.amount,
// redirectUrl: "https://new.andishmand.ir/services",
// });
payment({
price: item.amount,
redirectUrl: "http://localhost:3000/services",
});
} else if (item.type === 2) {
let cardNumber = document.querySelector(
"#paymentBox-cardNumber-input"
).value;
let dateInfo = document.querySelectorAll(
".paymentBox-payment-date-input"
);
let TracingNumber = document.querySelector(
"#paymentBox-TracingNumber-input"
).value;
if (Number(dateInfo[0]) > 31) {
toast.error("تاریخ وارد شده معتبر نیست");
} else if (Number(dateInfo[1].value) > 12) {
toast.error("تاریخ وارد شده معتبر نیست");
} else if (Number(dateInfo[2].value) < 1401) {
toast.error("تاریخ وارد شده معتبر نیست");
} else if (Number(dateInfo[3].value) > 59) {
toast.error("ساعت وارد شده معتبر نیست");
} else if (Number(dateInfo[4].value) > 23) {
toast.error("ساعت وارد شده معتبر نیست");
} else if (cardNumber.length < 16) {
toast.error("کارت وارد شده نامعتبر است");
} else if (TracingNumber.length < 1) {
toast.error("شماره پیگیری را وارد کنید");
} else {
//create date-------------------------------------------
let dateString = `${Number(dateInfo[2].value)}/${Number(
dateInfo[1].value
)}/${Number(dateInfo[0].value)}`;
console.log(dateString);
let dueDate = moment
.from(
`${dateString} ${Number(dateInfo[4].value)}:${Number(
dateInfo[3].value
)}`,
"fa",
`YYYY/M/D HH:mm`
)
.format("YYYY-M-D HH:mm");
console.log(dueDate);
//-----------------------------------------
let newList = paymentList;
newList[index].cardNumber = cardNumber;
newList[index].paidAt = dueDate;
newList[index].TracingNumber = TracingNumber;
setPaymentList(newList);
setFake(fake + 1);
addUserTransaction({
price: item.amount,
dueDate: dueDate,
cardNumber,
followCode: TracingNumber,
type:5
});
}
}
};
return (
<div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center">
<div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2 relative">
<div className="w-full flex items-center justify-between">
<div className="w-full text-right text-2xl text-[#DF1452]">
پرداخت و ثبت تراکنشها
</div>
<AiOutlineCloseCircle
className="text-4xl text-red-600 cursor-pointer"
onClick={() => setShowPaymentBox(false)}
/>
</div>
<div className="payment-container w-full mt-6 max-h-[85%] overflow-y-auto">
{paymentList.map((item, index) => (
<div
key={index}
className="w-full mb-2 flex justify-between text-black pb-2 border-b"
>
{/* ----------choose-payment-type---------------------------------------- */}
<select
className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
onChange={(e) => changeType(e, index)}
style={item.status !== null ? { pointerEvents: "none" } : null}
>
{/* <option value={null}>نوع پرداخت</option> */}
<option value={1}>پرداخت اینترنتی</option>
<option value={2}>کارت به کارت</option>
{/* <option value={3}>پرداخت با چک</option>
<option value={4}>پرداخت نقدی</option> */}
</select>
{/* ---------- payment-info ---------------------------------------- */}
<div className="w-[58%]">
<div className="w-full h-10 flex box-border rounded overflow-hidden border">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
مبلغ
</div>
<input
type="text"
name="payment-box-amount-input"
id="payment-box-amount-input"
className="w-[70%] h-10 px-1 outline-0 text-center text-lg"
value={item.amount}
onChange={(e) => changeAmount(e, index)}
style={
item.status !== null ? { pointerEvents: "none" } : null
}
/>
<div className="w-[10%] h-full flex items-center justify-center text-sm">
تومان
</div>
</div>
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
شماره کارت
</div>
<input
type="text"
name="payment-box-amount-input"
id="paymentBox-cardNumber-input"
className="w-[80%] h-10 px-1 outline-0 text-center"
maxLength={16}
/>
</div>
)}
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex items-center justify-between mt-1">
<div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
تاریخ پرداخت
</div>
<div className="w-[60%] h-full flex items-center justify-between p-1">
<input
type="text"
className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
maxLength={2}
/>
<div className="h-full w-[5%] flex items-center justify-center">
/
</div>
<input
type="text"
className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
maxLength={2}
/>
<div className="h-full w-[5%] flex items-center justify-center">
/
</div>
<input
type="text"
className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
maxLength={4}
/>
</div>
</div>
{/* ---- */}
<div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
ساعت پرداخت
</div>
<div className="w-[60%] h-full flex justify-between items-center p-1">
<input
type="text"
className="paymentBox-payment-date-input w-[45%] h-full rounded border text-center text-sm"
maxLength={2}
/>
<div className="h-full w-[5%] flex items-center justify-center">
:
</div>
<input
type="text"
className="paymentBox-payment-date-input w-[45%] h-full rounded border text-center text-sm"
maxLength={2}
/>
</div>
</div>
</div>
)}
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
شماره پیگیری
</div>
<input
type="text"
name="payment-box-amount-input"
id="paymentBox-TracingNumber-input"
className="w-[80%] h-10 px-1 outline-0 text-center"
maxLength={30}
/>
</div>
)}
</div>
{/* ---------- pay and submit btn ---------------------------------------- */}
<div className="w-[17%] h-10">
{item.type === 1 && (
<div
className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"
style={
item.status !== null
? {
backgroundColor:
paymentStatusColorList[item.status],
pointerEvents: "none",
}
: null
}
onClick={() => paymentHandler(item, index)}
>
{item.status !== null
? paymentStatusTextList[item.status]
: "پرداخت"}
</div>
)}
{item.type === 2 && (
<div
className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"
style={
item.status !== null
? {
backgroundColor:
paymentStatusColorList[item.status],
pointerEvents: "none",
}
: null
}
onClick={() => paymentHandler(item, index)}
>
{item.status !== null
? paymentStatusTextList[item.status]
: "ثبت پرداخت"}
</div>
)}
</div>
{/* ------------------ */}
<div
className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white"
style={
index === 0
? { pointerEvents: "none", filter: "grayscale(100%)" }
: null
}
onClick={() => deletePayment(index)}
>
<AiFillDelete className="text-xl text-white" />
</div>
</div>
))}
</div>
<div className="w-full h-[15%] bg-white flex items-center justify-center absolute bottom-0 left-0">
<div
className="w-[30%] h-1/2 rounded flex items-center justify-center text-lg bg-[#DF1452] text-white cursor-pointer"
onClick={() => setShowPaymentBox(false)}
>
تایید
</div>
</div>
{/* <div
className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"
onClick={addPaymentHandler}
>
<AiOutlinePlus className="text-2xl text-[#DF1452]" />
</div> */}
</div>
</div>
);
};
const mapStateToProps = (state) => ({
factorInfo: state.userFactor.info,
transactionSituation: state.userTransaction.situation,
});
const mapDispatchToProps = {
getFactorInfo: userFactor.info,
payment: userFactor.payment,
addUserTransaction: userTransaction.add,
restartTransaction : userTransaction.restart
};
export default connect(mapStateToProps, mapDispatchToProps)(PaymentBox);
// ?status=OK&authority=000000000000000000000000000000831486