|
|
|
|
@ -5,6 +5,7 @@ import { connect } from "react-redux"; |
|
|
|
|
import { Link, useLocation } from "react-router-dom"; |
|
|
|
|
import Product from "../../components/Product"; |
|
|
|
|
import { CgDanger } from "react-icons/cg"; |
|
|
|
|
import { BsFillCheckCircleFill } from "react-icons/bs"; |
|
|
|
|
import filterIcon from "../../assets/img/vuesax-linear-filter-tick.svg"; |
|
|
|
|
// import ScrollContainer from 'react-indiana-drag-scroll'
|
|
|
|
|
|
|
|
|
|
@ -42,6 +43,26 @@ const Services = ({ |
|
|
|
|
useEffect(()=>{ |
|
|
|
|
getUserInfo(); |
|
|
|
|
},[]) |
|
|
|
|
//------------------------------------
|
|
|
|
|
const [fliterList,setFilterList]=useState([]); |
|
|
|
|
const [fake,setFake]=useState(0); |
|
|
|
|
const fliterHandler=(index)=>{ |
|
|
|
|
let list = fliterList; |
|
|
|
|
if(fliterList.includes(index)){ |
|
|
|
|
let newList = []; |
|
|
|
|
for(let i=0;i<list.length;i++){ |
|
|
|
|
if(list[i]!==index){ |
|
|
|
|
newList.push(list[i]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
setFilterList(newList); |
|
|
|
|
}else{ |
|
|
|
|
let newList = fliterList; |
|
|
|
|
newList.push(index); |
|
|
|
|
setFilterList(newList); |
|
|
|
|
} |
|
|
|
|
setFake(fake+1); |
|
|
|
|
} |
|
|
|
|
//-------------------------------------------------------------
|
|
|
|
|
const [filterCheck, setFilterCheck] = useState([ |
|
|
|
|
{ |
|
|
|
|
@ -75,29 +96,16 @@ const Services = ({ |
|
|
|
|
//handle payment response------------
|
|
|
|
|
let search = useLocation().search; |
|
|
|
|
let query = Object.fromEntries(new URLSearchParams(search)); |
|
|
|
|
|
|
|
|
|
const [paymentError,setPaymentError]=useState(false); |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (query.status) { |
|
|
|
|
if (query.status === "OK") { |
|
|
|
|
toast.success("پرداخت با موفقیت انجام شد"); |
|
|
|
|
} else { |
|
|
|
|
toast.error( |
|
|
|
|
`عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد` |
|
|
|
|
); |
|
|
|
|
// fireAlert({
|
|
|
|
|
// title: "پرداخت ناموفق",
|
|
|
|
|
// text: `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد`,
|
|
|
|
|
// confirmButtonText: "توضیح بیشتر",
|
|
|
|
|
// showCancelButton: true,
|
|
|
|
|
// cancelButtonText: "متوجه شدم",
|
|
|
|
|
// showCloseButton: false,
|
|
|
|
|
// customClass: {
|
|
|
|
|
// title: "title-error-7",
|
|
|
|
|
// closeButton: "close-button-7",
|
|
|
|
|
// confirmButton: "confirm-button-7",
|
|
|
|
|
// cancelButton: "cancle-button7",
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// toast.error(
|
|
|
|
|
// `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد`
|
|
|
|
|
// );
|
|
|
|
|
setPaymentError(true); |
|
|
|
|
} |
|
|
|
|
setShowPaymentBox(true); |
|
|
|
|
} |
|
|
|
|
@ -223,7 +231,7 @@ const Services = ({ |
|
|
|
|
// style={{ paddingTop:'5.5%', height: '100vh' }}
|
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="h-48 w-full border-b border-red82OP my-4 px-6" |
|
|
|
|
className="h-40 w-full border-b border-red82OP my-4 px-6" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
> |
|
|
|
|
<Games |
|
|
|
|
@ -233,65 +241,63 @@ const Services = ({ |
|
|
|
|
setTypes={(val) => setSelectedProductTypes(val)} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
{/* filters */} |
|
|
|
|
{gameId != 6 && ( |
|
|
|
|
{/* filters-------------------------------------- */} |
|
|
|
|
{gameId === 3 && ( |
|
|
|
|
<div className="flex mx-6 justify-start"> |
|
|
|
|
<div className="flex items-center "> |
|
|
|
|
<img src={filterIcon} alt="filterIcon" className="w-9" /> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex items-center mx-6 pl-6 border-l-2 border-gray-300"> |
|
|
|
|
{filterCheck.map((filter) => ( |
|
|
|
|
<div |
|
|
|
|
key={`FILTER_${filter.id}`} |
|
|
|
|
className={`flex w-32 border-2 p-2 px-4 mx-2 justify-center items-center rounded-md cursor-pointer
|
|
|
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5
|
|
|
|
|
${ |
|
|
|
|
selectedFilters.includes(filter.id) |
|
|
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
|
|
: "border-gray200 text-gray-400" |
|
|
|
|
}`}
|
|
|
|
|
onClick={(prevState) => { |
|
|
|
|
if (selectedFilters.includes(filter.id)) { |
|
|
|
|
setSelectedFilters( |
|
|
|
|
selectedFilters.filter((itm) => itm !== filter.id) |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
setSelectedFilters([...selectedFilters, filter.id]); |
|
|
|
|
className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center ml-2 cursor-pointer gap-x-1" |
|
|
|
|
style={ |
|
|
|
|
!fliterList.includes(4) |
|
|
|
|
? { borderColor: "#DF1452", color: "#DF1452" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
onClick={() => fliterHandler(4)} |
|
|
|
|
> |
|
|
|
|
<h3>{filter.title}</h3> |
|
|
|
|
{selectedFilters.includes(filter.id) && ( |
|
|
|
|
<div className="flex w-full" style={{ direction: "ltr" }}> |
|
|
|
|
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52"> |
|
|
|
|
<svg |
|
|
|
|
width="37" |
|
|
|
|
height="37" |
|
|
|
|
viewBox="0 0 24 24" |
|
|
|
|
fill="none" |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
<div>آنلاین</div> |
|
|
|
|
<BsFillCheckCircleFill /> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center cursor-pointer gap-x-1" |
|
|
|
|
style={ |
|
|
|
|
!fliterList.includes(3) |
|
|
|
|
? { borderColor: "#DF1452", color: "#DF1452" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
onClick={() => fliterHandler(3)} |
|
|
|
|
> |
|
|
|
|
<path |
|
|
|
|
d="M7.75 12L10.58 14.83L16.25 9.17004" |
|
|
|
|
stroke="#fff" |
|
|
|
|
strokeWidth="1.5" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
/> |
|
|
|
|
</svg> |
|
|
|
|
<div>حضوری</div> |
|
|
|
|
<BsFillCheckCircleFill /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div className="flex items-center "> |
|
|
|
|
<div |
|
|
|
|
className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center ml-2 cursor-pointer gap-x-1" |
|
|
|
|
style={ |
|
|
|
|
!fliterList.includes(1) |
|
|
|
|
? { borderColor: "#DF1452", color: "#DF1452" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
onClick={() => fliterHandler(1)} |
|
|
|
|
> |
|
|
|
|
<div>پسرانه</div> |
|
|
|
|
<BsFillCheckCircleFill /> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
<div |
|
|
|
|
className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center cursor-pointer gap-x-1" |
|
|
|
|
style={ |
|
|
|
|
!fliterList.includes(2) |
|
|
|
|
? { borderColor: "#DF1452", color: "#DF1452" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
onClick={() => fliterHandler(2)} |
|
|
|
|
> |
|
|
|
|
<div>دخترانه</div> |
|
|
|
|
<BsFillCheckCircleFill /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="flex items-center mx-4 pl-6"> |
|
|
|
|
<select className="bg-white border-2 border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52"> |
|
|
|
|
{services.map((item, index) => ( |
|
|
|
|
<option key={`Grade__${index}`}>{item.title}</option> |
|
|
|
|
))} |
|
|
|
|
</select> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
@ -300,6 +306,10 @@ const Services = ({ |
|
|
|
|
{books |
|
|
|
|
?.filter((itm) => selectedProductTypes.includes(itm.productType)) |
|
|
|
|
.map((product, index) => ( |
|
|
|
|
<React.Fragment key={index}> |
|
|
|
|
{(gameId !== 3 || |
|
|
|
|
(!fliterList.includes(product?.productType - 1) && |
|
|
|
|
!fliterList.includes(product?.gender))) && ( |
|
|
|
|
<div |
|
|
|
|
// to={"/class/" + product?.id}
|
|
|
|
|
className="w-[30%]" |
|
|
|
|
@ -332,6 +342,8 @@ const Services = ({ |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</React.Fragment> |
|
|
|
|
))} |
|
|
|
|
{!selectedProductTypes.includes(4) && |
|
|
|
|
!selectedProductTypes.includes(7) && |
|
|
|
|
@ -386,7 +398,12 @@ const Services = ({ |
|
|
|
|
)} |
|
|
|
|
{/* --------------payment-box------------------------------------- */} |
|
|
|
|
{showPaymentBox && ( |
|
|
|
|
<PaymentBox setShowPaymentBox={setShowPaymentBox} query={query} /> |
|
|
|
|
<PaymentBox |
|
|
|
|
setShowPaymentBox={setShowPaymentBox} |
|
|
|
|
query={query} |
|
|
|
|
paymentError={paymentError} |
|
|
|
|
setPaymentError={setPaymentError} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
|
