@ -6,6 +6,7 @@ import {
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" ;
@ -212,26 +213,43 @@ const PaymentBox = ({
}
} ;
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-[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]" >
< div
className = "w-full text-right text-2xl text-[#DF1452]"
style = { window . innerWidth < 1000 ? { fontSize : "16px" } : null }
>
پرداخت و ثبت تراکنش ها
< / d i v >
< AiOutlineCloseCircle
className = "text-4xl text-red-600 cursor-pointer"
onClick = { ( ) => setShowPaymentBox ( false ) }
/ >
< Link to = { window . innerWidth < 1000 ? "/shoppingCart" : "/services" } >
< AiOutlineCloseCircle
className = "text-4xl text-red-600 cursor-pointer"
onClick = { ( ) => setShowPaymentBox ( false ) }
/ >
< / L i n k >
< / d i v >
< 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"
className = "payment-container-item 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"
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 }
>
@ -242,37 +260,37 @@ const PaymentBox = ({
< option value = { 4 } > پرداخت نقدی < /option> */ }
< / s e l e c t >
{ /* ---------- payment-info ---------------------------------------- */ }
< div className = "w-[58%]" >
< div className = "payment-container-item-pi 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 className = "pci-pi-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r" >
مبلغ
< / d i v >
< 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"
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 = "w-[10%] h-full flex items-center justify-center text-sm" >
< div className = "pci-pi-unit w-[10%] h-full flex items-center justify-center text-sm" >
تومان
< / d i v >
< / d i v >
{ /* - */ }
{ 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 className = "pci-pi-card-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r" >
شماره کارت
< / d i v >
< input
type = "text"
name = "payment-box-amount-input"
id = "paymentBox-cardNumber-input"
className = "w-[80%] h-10 px-1 outline-0 text-center"
className = "pci-pi-card-input w-[80%] h-10 px-1 outline-0 text-center"
maxLength = { 16 }
style = {
item . status !== null ? { pointerEvents : "none" } : null
@ -283,12 +301,12 @@ const PaymentBox = ({
) }
{ /* - */ }
{ 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 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" >
تاریخ پرداخت
< / d i v >
< div className = "w-[60%] h-full flex items-center justify-between p-1" >
< 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"
@ -343,11 +361,11 @@ const PaymentBox = ({
< / d i v >
< / d i v >
{ /* ---- */ }
< 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 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" >
ساعت پرداخت
< / d i v >
< div className = "w-[60%] h-full flex justify-between items-center p-1" >
< 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"
@ -388,14 +406,14 @@ const PaymentBox = ({
{ /* - */ }
{ 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 className = "pci-pi-card-tc-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r" >
شماره پیگیری
< / d i v >
< input
type = "text"
name = "payment-box-amount-input"
id = "paymentBox-TracingNumber-input"
className = "w-[80%] h-10 px-1 outline-0 text-center"
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
@ -406,7 +424,7 @@ const PaymentBox = ({
) }
< / d i v >
{ /* ---------- pay and submit btn ---------------------------------------- */ }
< div className = "w-[17%] h-10" >
< 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"
@ -448,7 +466,7 @@ const PaymentBox = ({
< / d i v >
{ /* ------------------ */ }
< div
className = "w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white"
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%)" }
@ -462,12 +480,13 @@ const PaymentBox = ({
) ) }
< / d i v >
< div className = "w-full h-[15%] bg-white flex items-center justify-center absolute bottom-0 left-0" >
< div
< 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 ) }
>
تایید
< / d i v >
< / L i n k >
< / d i v >
{ / * < d i v
className = "w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"