main
alireza khaji 2 years ago
parent bce548d063
commit 7db282d71d
  1. 2
      src/App.js
  2. BIN
      src/assets/img/blackboard.png
  3. BIN
      src/assets/img/books.png
  4. BIN
      src/assets/img/buildings.png
  5. BIN
      src/assets/img/diploma.png
  6. 11
      src/assets/img/error-icon.svg
  7. BIN
      src/assets/img/research.png
  8. BIN
      src/assets/img/thinking.png
  9. 35
      src/components/Product/index.js
  10. 33
      src/components/ShoppingCart/index.js
  11. 6
      src/components/header/Header.js
  12. 112
      src/components/header/MobileSideMenu/index.js
  13. 127
      src/components/nav/Nav.js
  14. 12
      src/view/dashboard2/Games.js
  15. 63
      src/view/my-services/MyServices.js
  16. 6
      src/view/register/index.js
  17. 95
      src/view/services/PaymentBox.js
  18. 227
      src/view/services/index.js
  19. 2
      src/view/services/service/index.js

@ -739,7 +739,7 @@ function App() {
<Route path="/messages" element={<Messages />} />
<Route path="/messages/:id" element={<ChatPage />} />
<Route path="/services" element={<Services />} />
<Route path="shoppingCart" element={<ShoppingCart />} />
<Route path="/shoppingCart" element={<ShoppingCart />} />
{/* <Route path="/dashboard" element={ <Dashboard
ActiveUserFullInfo={ActiveUserFullInfo}
UserFullInfoData={UserFullInfoData}

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<g id="error-icon" transform="translate(-631 -296)">
<circle id="Ellipse_110" data-name="Ellipse 110" cx="100" cy="100" r="100" transform="translate(631 296)" fill="#ffd6d6"/>
<g id="Group_1862" data-name="Group 1862" transform="translate(-728.078 159.5)">
<g id="Group_1861" data-name="Group 1861" transform="translate(1433.078 210.5)">
<path id="Vector" d="M0,51.66,51.66,0" fill="none" stroke="#f51616" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
<path id="Vector-2" data-name="Vector" d="M51.66,51.66,0,0" fill="none" stroke="#f51616" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

@ -1,3 +1,4 @@
import moment from "jalali-moment";
import React, { useState } from "react";
import { BsExclamationSquareFill } from "react-icons/bs";
@ -5,6 +6,8 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom";
import imgPlaceHolder from "../../assets/img/photo-placeholder.png";
let groupType = ["A","B","AB","AB1"];
const ProductDesign = ({
colors,
likeBtn,
@ -79,6 +82,7 @@ const ProductDesign = ({
},
];
let weekday =["شنبه","یکشنبه","دوشنبه","سهشنبه","چهارشنبه","پنچشنبه","جمعه"]
let description = "دستشویی,کتابخانه,آزمایشگاه";
if (catId == 3) {
return (
@ -88,7 +92,7 @@ const ProductDesign = ({
>
<div className="border-b border-red82OP pb-2 px-4 ">
<h1 className="text-red52 text-lg font-bold">{productName}</h1>
<p
{/* <p
className="text-red26 text-sm my-2 h-10 w-full overflow-hidden text-ellipsis"
style={{
WebkitLineClamp: "2",
@ -97,7 +101,28 @@ const ProductDesign = ({
}}
>
{product?.description}
</p>
</p> */}
<div className="w-full py-1 mt-1 tet-right text-xs">
شروع از{" "}
{moment(product?.courseStartDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")}{" "}
، پایان در{" "}
{moment(product?.courseEndDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")}
</div>
<div className="w-full py-1 mt-1 tet-right text-xs flex items-center">
روزهای برگزاری:
<div className="flex items-center gap-x-1 mr-1">
{product?.courseDay.split(",")?.map((item, index) => (
<div key={index}>{weekday[item]}،</div>
))}
</div>
</div>
<div className="w-full py-1 mt-1 tet-right text-xs">
ساعت کلاس: از {product?.courseStartTime} تا {product?.courseEndTime}
</div>
</div>
<div className="flex border-b border-red82OP px-4 py-2">
@ -111,7 +136,7 @@ const ProductDesign = ({
className="flex border-b border-red82OP px-4 py-2 text-red26"
// onClick={onClick}
>
<h1>نوع گروه : {product?.productType===4 ?"حضوری":"آنلاین"}</h1>
<h1>نوع گروه : {groupType[product?.categoryId - 1]}</h1>
</div>
<div className="flex p-4 justify-between items-center">
@ -150,10 +175,10 @@ const ProductDesign = ({
}
if (catId == 5) {
return (
<div className="w-full flex justify-center px-6">
<div className="w-full flex justify-center px-6" style={isMobile?{padding:"0px 5px"}:null}>
<div
className={`flex ${
isMobile ? "flex-col w-11/12 border-red52" : "border-red82OP pt-4"
isMobile ? "flex-col w-full border-red52" : "border-red82OP pt-4"
} border my-4 rounded-lg `}
style={{ width: !isMobile && "100%" }}
>

@ -42,29 +42,17 @@ function ShoppingCart({
//handle payment response------------
let search = useLocation().search;
let query = Object.fromEntries(new URLSearchParams(search));
const [paymentError, setPaymentError] = useState(false);
useEffect(() => {
if (query.status && window.innerWidth<1000) {
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);
}
@ -129,7 +117,7 @@ function ShoppingCart({
className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg text-sm font-semibold"
onClick={() =>
paySchool({
redirectUrl: "http://localhost:3000/myServices",
redirectUrl: "https://new.andishmand.ir/services",
})
}
>
@ -236,7 +224,12 @@ function ShoppingCart({
</div>
{/* --------------payment-box------------------------------------- */}
{showPaymentBoxM && (
<PaymentBox setShowPaymentBox={setShowPaymentBoxM} query={query} />
<PaymentBox
setShowPaymentBox={setShowPaymentBoxM}
query={query}
paymentError={paymentError}
setPaymentError={setPaymentError}
/>
)}
</div>
) : (

@ -61,13 +61,13 @@ const Header = ({
{UserData?.displayName || "نامشخص"} ({" "}
{UserData?.job || "دانش آموز"} )
</div>
<Link
{/* <Link
to="/adminpanel"
onClick={() => setSubMenu(false)}
className="w-full text-right border-b border-gray-200 py-2"
>
ورود به پنل ادمین
</Link>
</Link> */}
{/* <Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون
</Link> */}
@ -117,7 +117,7 @@ const Header = ({
/>
</svg>
</div>
<Link to="/">
<Link to="/myServices">
{" "}
<img src={logoIcon} className="h-10" />{" "}
</Link>

@ -34,62 +34,62 @@ const MobileSideMenu = ({
const options = [
{
icon: profileIcon,
activeIcon: profileIconActive,
title: 'مشخصات',
link: '/'
},
{
icon: elementIcon,
activeIcon: elementIconActive,
title: 'انتخاب خدمات',
link: '/services'
},
{
icon: taskIcon,
activeIcon: taskIconActive,
title: 'آزمون های من',
link: ''
},
{
icon: bookIcon,
activeIcon: bookIconActive,
title: 'وبلاگ',
link: ''
},
{
icon: elementIcon,
activeIcon: elementIconActive,
title: 'خدمات من',
link: ''
},
{
icon: smsIcon,
activeIcon: smsIconActive,
title: 'پشتیبانی',
link: '/messages'
},
{
icon: mapIcon,
activeIcon: mapIconActive,
title: 'اطلاعات تماس',
link: '/contacts'
},
{
icon: radarIcon,
activeIcon: radarIconActive,
title: 'گزارش ایراد یا نقص فنی',
link: ''
},
{
icon: exitIcon,
activeIcon: exitIcon,
title: 'خروج',
link: '',
onClick: () => logOut()
},
]
{
icon: profileIcon,
activeIcon: profileIconActive,
title: "مشخصات",
link: "/register",
},
{
icon: elementIcon,
activeIcon: elementIconActive,
title: "انتخاب خدمات",
link: "/services",
},
// {
// icon: taskIcon,
// activeIcon: taskIconActive,
// title: "آزمون های من",
// link: "",
// },
// {
// icon: bookIcon,
// activeIcon: bookIconActive,
// title: "وبلاگ",
// link: "",
// },
{
icon: elementIcon,
activeIcon: elementIconActive,
title: "خدمات من",
link: "/myServices",
},
{
icon: smsIcon,
activeIcon: smsIconActive,
title: "پشتیبانی",
link: "/messages",
},
{
icon: mapIcon,
activeIcon: mapIconActive,
title: "اطلاعات تماس",
link: "/contacts",
},
// {
// icon: radarIcon,
// activeIcon: radarIconActive,
// title: "گزارش ایراد یا نقص فنی",
// link: "",
// },
{
icon: exitIcon,
activeIcon: exitIcon,
title: "خروج",
link: "",
onClick: () => logOut(),
},
];
return (
<div className="flex flex-col w-4/5 h-screen top-0 rtl right-0 fixed bg-white z-50">
<div className="w-full mt-6 px-2 h-2/12 flex items-start justify-between">

@ -22,44 +22,45 @@ import navIcon4_w from "../../assets/img/vuesax-linear-map2.svg";
// let oldNavItemId = 1;
const Nav = ({
logOut,
isMobile,
isLogin,
logout
}) => {
const Nav = ({ logOut, isMobile, isLogin, logout }) => {
let locationL = useLocation();
let location = locationL.pathname;
const [type, setType] = useState('default');
const [type, setType] = useState("default");
const location2 = useLocation();
useEffect(() => {
if(location2.pathname.includes('adminpanel')){
setType('minimal');
}
else{
setType('default')
}
}, [location2.pathname])
useEffect(() => {
if (location2.pathname.includes("adminpanel")) {
setType("minimal");
} else {
setType("default");
}
}, [location2.pathname]);
let initai_navId = 1;
if(isMobile){
// if(isMobile){
useEffect(()=>{
if (location.includes("services")) {
initai_navId = 2;
} else if (location.includes("exams")) {
initai_navId = 3;
}
else if(location.includes('dashboard')){
initai_navId = 4;
initai_navId = 1;
} else if (location.includes("myServices")) {
setNavId(2);
let top = 100 / 6 + ((((2 - 1) * 100) / 6) * 3) / 4;
document.querySelector(".back-item-img").style.top = `${top}%`;
} else if (location.includes("contacts")) {
setNavId(4);
let top = 100 / 6 + ((((4 - 1) * 100) / 6) * 3) / 4;
document.querySelector(".back-item-img").style.top = `${top}%`;
} else if (location.includes("messages")) {
setNavId(3);
let top = 100 / 6 + ((((3 - 1) * 100) / 6) * 3) / 4;
document.querySelector(".back-item-img").style.top = `${top}%`;
}
}else{
if (location.includes("accounting")) {
initai_navId = 2;
} else if (location.includes("messages")) {
initai_navId = 5;
}
}
},[])
// }else{
// if (location.includes("accounting")) {
// initai_navId = 2;
// } else if (location.includes("messages")) {
// initai_navId = 3;
// }
// }
const mobileOptions = [
{
title: "صفحه اصلی",
@ -184,49 +185,57 @@ useEffect(() => {
const [navId, setNavId] = useState(initai_navId);
const chaneNav = (id) => {
setNavId(id);
let top = 100 / 6 + (id - 1) * 100 / 6 * 3 / 4;
console.log(top)
let top = 100 / 6 + ((((id - 1) * 100) / 6) * 3) / 4;
console.log(top);
document.querySelector(".back-item-img").style.top = `${top}%`;
};
if (isMobile) {
return (
location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') || location2.pathname.includes('register') ? null :
return location2.pathname.includes("azmoon_list") ||
location2.pathname.includes("messages") ||
location2.pathname.includes("shoppingCart") ||
location2.pathname.includes("register") ? null : (
<div className="w-full flex fixed bg-white justify-center z-20 h-20 bottom-0">
<div className="flex w-11/12 h-full bg-white justify-between rtl border border-red82OP rounded-xl">
{
mobileOptions.map(
(item, index) => (
<Link key={`MOBILE_NAV_ITEM__${index}`} to={item.link} className={`flex flex-col items-center pt-2 mx-1 w-1/4 pb-0 text-sm ${navId == index + 1 ? 'text-red52' : 'text-gray-500'} font-bold`} onClick={() => setNavId(index + 1)}>
<div className="p-2 z-20" style={{ stroke: navId == index + 1 ? '#df1452' : '#818181' }}>
{item.icon}
</div>
<h2 className="pb-2 z-20">{item.title}</h2>
{ navId == index + 1 &&
<div className="h-10 bg-green-200 w-full rounded-t-full -mt-10 z-10" style={{filter: 'blur(12px)', background: 'linear-gradient(0deg, rgba(223,20,82,1) 0%, rgba(253,187,45,0) 100%)'}}>
</div>
}
</Link>
)
)
}
{mobileOptions.map((item, index) => (
<Link
key={`MOBILE_NAV_ITEM__${index}`}
to={item.link}
className={`flex flex-col items-center pt-2 mx-1 w-1/4 pb-0 text-sm ${
navId == index + 1 ? "text-red52" : "text-gray-500"
} font-bold`}
onClick={() => setNavId(index + 1)}
>
<div
className="p-2 z-20"
style={{ stroke: navId == index + 1 ? "#df1452" : "#818181" }}
>
{item.icon}
</div>
<h2 className="pb-2 z-20">{item.title}</h2>
{navId == index + 1 && (
<div
className="h-10 bg-green-200 w-full rounded-t-full -mt-10 z-10"
style={{
filter: "blur(12px)",
background:
"linear-gradient(0deg, rgba(223,20,82,1) 0%, rgba(253,187,45,0) 100%)",
}}
></div>
)}
</Link>
))}
</div>
</div>
)
);
} else {
return type === "default" ? (
<div className="nav h-full w-[6.5%] fixed top-0 right-0 z-20 overflow-hidden bg-grayEC border-l border-l-color1">
<div className="h-1/6 flex items-center">
<img src={logo} alt="logo" className="logo w-full" />
</div>
<div
className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300"
></div>
<div className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300"></div>
{/* ------------ */}
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0">

@ -1,10 +1,10 @@
import { useState } from "react";
import img1 from "../../assets/img/Group 1344.svg";
import img2 from "../../assets/img/Group 1345.svg";
import img3 from "../../assets/img/Group 1349.svg";
import img4 from "../../assets/img/Group 1364.svg";
import img5 from "../../assets/img/Group 1357.svg";
import img6 from "../../assets/img/Group 1362.svg";
import img1 from "../../assets/img/blackboard.png";
import img2 from "../../assets/img/buildings.png";
import img3 from "../../assets/img/diploma.png";
import img4 from "../../assets/img/books.png";
import img5 from "../../assets/img/research.png";
import img6 from "../../assets/img/thinking.png";
import { HiCheck } from "react-icons/hi";
import { connect } from "react-redux";

@ -9,21 +9,28 @@ import ResultExams from "./ResultExams";
import Calendar2 from "../../components/Calendar2/Calendar2";
import { toast } from "react-toastify";
import { useLocation } from "react-router-dom";
import errorIcon from "../../assets/img/error-icon.svg";
import {
AiOutlinePlus,
AiFillDelete,
AiOutlineCloseCircle,
} from "react-icons/ai";
const MyServices=()=>{
//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} میباشد`
);
// toast.error(
// `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد`
// );
setPaymentError(true);
}
}
}, []);
@ -109,6 +116,54 @@ const MyServices=()=>{
)}
</div>
)}
{/* ----------payment-Error-box------------------ */}
{paymentError && (
<div className="w-full h-full absolute top-0 left-0 flex items-center justify-center bg-[#F516164D] backdrop-blur">
<div className="w-4/5 h-4/5 bg-white rounded-lg flex flex-col items-center justify-center relative">
<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>
)}
</div>
);
}

@ -53,6 +53,10 @@ const Register = ({
if (user?.firstName !== null) {
setUserInfo(user);
}
if(user?.rulesAccepted){
setActiveStep([true, true, true, true]);
setSteps(3);
}
}, [user]);
useEffect(() => {
window.scrollTo(0, 0);
@ -170,7 +174,7 @@ const Register = ({
},
{
title: "تاریخ تولد",
value: userInfo?.birthDate?.toLocaleDateString("fa-IR"),
// value: userInfo?.birthDate?.toLocaleDateString("fa-IR"),
},
{
title: "نام مدرسه ",

@ -8,7 +8,8 @@ import {
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import { userFactor,userTransaction } from "../../redux/actions";
import { userFactor, userTransaction } from "../../redux/actions";
import errorIcon from "../../assets/img/error-icon.svg";
const PaymentBox = ({
setShowPaymentBox,
@ -18,7 +19,9 @@ const PaymentBox = ({
query,
addUserTransaction,
restartTransaction,
transactionSituation
transactionSituation,
paymentError,
setPaymentError,
}) => {
useEffect(() => {
getFactorInfo();
@ -36,7 +39,7 @@ const PaymentBox = ({
cardNumber: null,
paidAt: null,
TracingNumber: null,
dueDateArray:null
dueDateArray: null,
},
]);
useEffect(() => {
@ -57,7 +60,7 @@ const PaymentBox = ({
cardNumber: null,
paidAt: null,
TracingNumber: null,
dueDateArray:null
dueDateArray: null,
});
}
} else {
@ -90,7 +93,7 @@ const PaymentBox = ({
cardNumber: null,
paidAt: null,
TracingNumber: null,
dueDateArray:null
dueDateArray: null,
});
setPaymentList(newList);
setFake(fake + 1);
@ -122,16 +125,15 @@ const PaymentBox = ({
//cardToCardCHeck-----------------------------------
console.log("transactionSituation:");
console.log(transactionSituation);
useEffect(()=>{
if(transactionSituation)
{
useEffect(() => {
if (transactionSituation) {
let newList = paymentList;
newList[newList.length-1].status=0;
newList[newList.length - 1].status = 0;
setPaymentList(newList);
setFake(fake+1)
restartTransaction()
setFake(fake + 1);
restartTransaction();
}
},[transactionSituation])
}, [transactionSituation]);
//paymentHandler--------
const paymentHandler = (item, index) => {
console.log(item);
@ -139,14 +141,21 @@ const PaymentBox = ({
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://new.andishmand.ir/services",
});
} else {
payment({
price: item.amount,
redirectUrl: "https://new.andishmand.ir/shoppingCart",
});
}
// payment({
// price: item.amount,
// redirectUrl: "https://new.andishmand.ir/services",
// redirectUrl: "http://localhost:3000/services",
// });
payment({
price: item.amount,
redirectUrl: "http://localhost:3000/services",
});
} else if (item.type === 2) {
let cardNumber = document.querySelector(
"#paymentBox-cardNumber-input"
@ -199,7 +208,7 @@ const PaymentBox = ({
newList[index].cardNumber = cardNumber;
newList[index].paidAt = dueDate;
newList[index].TracingNumber = TracingNumber;
newList[index].dueDateArray=dueDateArray;
newList[index].dueDateArray = dueDateArray;
setPaymentList(newList);
setFake(fake + 1);
addUserTransaction({
@ -207,7 +216,7 @@ const PaymentBox = ({
dueDate: dueDate,
cardNumber,
followCode: TracingNumber,
type:5
type: 5,
});
}
}
@ -488,6 +497,52 @@ const PaymentBox = ({
تایید
</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}
@ -508,7 +563,7 @@ const mapDispatchToProps = {
getFactorInfo: userFactor.info,
payment: userFactor.payment,
addUserTransaction: userTransaction.add,
restartTransaction : userTransaction.restart
restartTransaction: userTransaction.restart,
};
export default connect(mapStateToProps, mapDispatchToProps)(PaymentBox);

@ -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]);
}
}}
>
<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"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
))}
<div className="flex items-center mx-6 pl-6 border-l-2 border-gray-300">
<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(4)
? { borderColor: "#DF1452", color: "#DF1452" }
: null
}
onClick={() => fliterHandler(4)}
>
<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)}
>
<div>حضوری</div>
<BsFillCheckCircleFill />
</div>
</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 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>
</div>
)}
@ -300,38 +306,44 @@ const Services = ({
{books
?.filter((itm) => selectedProductTypes.includes(itm.productType))
.map((product, index) => (
<div
// to={"/class/" + product?.id}
className="w-[30%]"
key={`PRODUCT__${gameId}__${index}`}
style={gameId === 5 ? { width: "100%" } : null}
>
{(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && (
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={separate(product?.price)}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=""
productHolderHoverBorder="shadow-md"
teacher={product.vodTeacher}
catId={gameId}
userInfo={userInfo}
onClick={() => {
productClickhandler(product);
}}
btnOnClick={() => {
AddToCartHandler(product);
}}
/>
<React.Fragment key={index}>
{(gameId !== 3 ||
(!fliterList.includes(product?.productType - 1) &&
!fliterList.includes(product?.gender))) && (
<div
// to={"/class/" + product?.id}
className="w-[30%]"
key={`PRODUCT__${gameId}__${index}`}
style={gameId === 5 ? { width: "100%" } : null}
>
{(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && (
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
productName={`${product?.name}`}
productCat={`پایه ${grades[product?.gradeId]}`}
productPrice={separate(product?.price)}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards={160}
productHolderBorder=""
productHolderHoverBorder="shadow-md"
teacher={product.vodTeacher}
catId={gameId}
userInfo={userInfo}
onClick={() => {
productClickhandler(product);
}}
btnOnClick={() => {
AddToCartHandler(product);
}}
/>
)}
</div>
)}
</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>
);

@ -109,7 +109,7 @@ const servicePopUp = ({
زمان کلاس
</div>
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
{content.classHour} ساعت
{content.classHour} دقیقه
</div>
</div>
</div>

Loading…
Cancel
Save