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.
 
 
 

571 lines
22 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 { Link } from "react-router-dom";
import { toast } from "react-toastify";
import { userFactor, userTransaction } from "../../redux/actions";
import errorIcon from "../../assets/img/error-icon.svg";
const PaymentBox = ({
setShowPaymentBox,
getFactorInfo,
factorInfo,
payment,
query,
addUserTransaction,
restartTransaction,
transactionSituation,
paymentError,
setPaymentError,
}) => {
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,
dueDateArray: 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,
dueDateArray: 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,
dueDateArray: 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) {
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);
if (window.innerWidth > 1000) {
payment({
price: item.amount,
redirectUrl: "https://api.andishmand.ir/services",
});
} else {
payment({
price: item.amount,
redirectUrl: "https://api.andishmand.ir/shoppingCart",
});
}
// 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 dueDateArray = [
Number(dateInfo[0].value),
Number(dateInfo[1].value),
Number(dateInfo[2].value),
Number(dateInfo[3].value),
Number(dateInfo[4].value),
];
//-----------------------------------------
let newList = paymentList;
newList[index].cardNumber = cardNumber;
newList[index].paidAt = dueDate;
newList[index].TracingNumber = TracingNumber;
newList[index].dueDateArray = dueDateArray;
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"
style={
window.innerWidth < 1000
? { width: "100vw", height: "100vh", top: "0px" }
: null
}
>
<div
className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2 relative"
style={
window.innerWidth < 1000 ? { padding: "10px", width: "90%" } : null
}
>
<div className="w-full flex items-center justify-between">
<div
className="w-full text-right text-2xl text-[#DF1452]"
style={window.innerWidth < 1000 ? { fontSize: "16px" } : null}
>
پرداخت و ثبت تراکنشها
</div>
<Link to={window.innerWidth < 1000 ? "/shoppingCart" : "/services"}>
<AiOutlineCloseCircle
className="text-4xl text-red-600 cursor-pointer"
onClick={() => setShowPaymentBox(false)}
/>
</Link>
</div>
<div className="payment-container w-full mt-6 max-h-[85%] overflow-y-auto">
{paymentList.map((item, index) => (
<div
key={index}
className="payment-container-item w-full mb-2 flex justify-between text-black pb-2 border-b"
>
{/* ----------choose-payment-type---------------------------------------- */}
<select
className="payment-container-item-cpt 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="payment-container-item-pi w-[58%]">
<div className="w-full h-10 flex box-border rounded overflow-hidden border">
<div className="pci-pi-badge 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="pci-pi-input 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="pci-pi-unit 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="pci-pi-card-badge 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="pci-pi-card-input w-[80%] h-10 px-1 outline-0 text-center"
maxLength={16}
style={
item.status !== null ? { pointerEvents: "none" } : null
}
value={item.cardNumber}
/>
</div>
)}
{/* - */}
{item.type === 2 && (
<div className="pci-pi-card-dt w-full h-10 flex items-center justify-between mt-1">
<div className="pci-pi-card-d w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="pci-pi-card-d-badge w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
تاریخ پرداخت
</div>
<div className="pci-pi-card-d-inputs 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}
style={
item.status !== null
? { pointerEvents: "none" }
: null
}
value={
item.dueDateArray !== null
? item.dueDateArray[0]
: null
}
/>
<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}
style={
item.status !== null
? { pointerEvents: "none" }
: null
}
value={
item.dueDateArray !== null
? item.dueDateArray[1]
: null
}
/>
<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}
style={
item.status !== null
? { pointerEvents: "none" }
: null
}
value={
item.dueDateArray !== null
? item.dueDateArray[2]
: null
}
/>
</div>
</div>
{/* ---- */}
<div className="pci-pi-card-t w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="pci-pi-card-t-badge w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
ساعت پرداخت
</div>
<div className="pci-pi-card-t-inputs 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}
style={
item.status !== null
? { pointerEvents: "none" }
: null
}
value={
item.dueDateArray !== null
? item.dueDateArray[3]
: null
}
/>
<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}
style={
item.status !== null
? { pointerEvents: "none" }
: null
}
value={
item.dueDateArray !== null
? item.dueDateArray[4]
: null
}
/>
</div>
</div>
</div>
)}
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="pci-pi-card-tc-badge 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="pci-pi-card-tc-input w-[80%] h-10 px-1 outline-0 text-center"
maxLength={30}
style={
item.status !== null ? { pointerEvents: "none" } : null
}
value={item.TracingNumber}
/>
</div>
)}
</div>
{/* ---------- pay and submit btn ---------------------------------------- */}
<div className="payment-container-item-pasb 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="payment-container-item-delete 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">
<Link
to="/services"
className="w-[30%] h-1/2 rounded flex items-center justify-center text-lg bg-[#DF1452] text-white cursor-pointer"
onClick={() => setShowPaymentBox(false)}
>
تایید
</Link>
</div>
{/* -------------payment-Error-box------------------------ */}
{paymentError && (
<div className="w-full h-full bg-[#F516164D] backdrop-blur absolute top-0 left-0 flex flex-col items-center justify-center">
<img
src={errorIcon}
alt="errorIcon"
className="w-[15%]"
style={window.innerWidth < 1000 ? { width: "30%" } : null}
/>
<div
className="w-4/5 text-center mt-2 text-xl"
style={
window.innerWidth < 1000
? { width: "90%", fontSize: "14px" }
: null
}
>
متاسفانه پرداخت شما انجام نشد
</div>
<div
className="w-4/5 text-center mt-2 text-xl"
style={
window.innerWidth < 1000
? { width: "90%", fontSize: "14px" }
: null
}
>
شماره پیگیری: {query?.authority}
</div>
<div
className="w-[20%] min-w-40 h-10 rounded flex items-center justify-center text-white bg-red-600 mt-2 cursor-pointer"
onClick={() => setPaymentError(false)}
style={
window.innerWidth < 1000
? { width: "50%", fontSize: "14px" }
: null
}
>
متوجه شدم
</div>
<AiOutlineCloseCircle
className="text-4xl text-red-600 cursor-pointer absolute top-5 left-5"
onClick={() => setPaymentError(false)}
/>
</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