|
|
import moment from "jalali-moment"; |
|
|
import React, { useState } from "react"; |
|
|
import { BsExclamationSquareFill } from "react-icons/bs"; |
|
|
|
|
|
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, |
|
|
discount, |
|
|
discountPricePercent, |
|
|
discountPrice, |
|
|
productContent, |
|
|
star, |
|
|
productTags, |
|
|
priceDirection, |
|
|
productTitleAlignment, |
|
|
priceHolder, |
|
|
productHolderBorder, |
|
|
productHolderBorderColor, |
|
|
productTitleColor, |
|
|
productExcerptTextColor, |
|
|
productCat, |
|
|
productCatTextColor, |
|
|
rangeHolder, |
|
|
verticalImg, |
|
|
horizontalImg, |
|
|
rangeWidth, |
|
|
addToCartHolder, |
|
|
productName, |
|
|
productPrice, |
|
|
productImg, |
|
|
writeGHEIMAT, |
|
|
numberOfRegards, |
|
|
productHolderHoverBorder, |
|
|
hoverMode, |
|
|
teacher, |
|
|
btnOnClick, |
|
|
catId, |
|
|
isMobile, |
|
|
onClick, |
|
|
product, |
|
|
userInfo, |
|
|
}) => { |
|
|
const [isHovering, setIsHovering] = useState(false); |
|
|
// alert(catId); |
|
|
console.log("userInfo:*******************************************************"); |
|
|
console.log(userInfo); |
|
|
let rulesAccepted = userInfo.rulesAccepted; |
|
|
const emkanat = [ |
|
|
{ |
|
|
title: "دستشویی", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "آب خوری", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "تخته هوشمند", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "کامپیوتر", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "کتابخانه", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "مشاوره تحصیلی", |
|
|
isActive: true, |
|
|
}, |
|
|
{ |
|
|
title: "آزمایشگاه", |
|
|
isActive: false, |
|
|
}, |
|
|
]; |
|
|
|
|
|
let weekday =["شنبه","یکشنبه","دوشنبه","سهشنبه","چهارشنبه","پنچشنبه","جمعه"] |
|
|
let description = "دستشویی,کتابخانه,آزمایشگاه"; |
|
|
if (catId == 3) { |
|
|
return ( |
|
|
<div |
|
|
className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full mt-3 border border-red82OP`} |
|
|
style={{ width: !isMobile && "100%", direction: "rtl" }} |
|
|
> |
|
|
<div className="border-b border-red82OP pb-2 px-4 "> |
|
|
<h1 className="text-red52 text-lg font-bold">{productName}</h1> |
|
|
{/* <p |
|
|
className="text-red26 text-sm my-2 h-10 w-full overflow-hidden text-ellipsis" |
|
|
style={{ |
|
|
WebkitLineClamp: "2", |
|
|
WebkitBoxOrient: "vertical", |
|
|
display: "-webkit-box", |
|
|
}} |
|
|
> |
|
|
{product?.description} |
|
|
</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"> |
|
|
<div> |
|
|
<h1 className="font-bold text-red26"> |
|
|
استاد : {product?.teacherName} |
|
|
</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
className="flex border-b border-red82OP px-4 py-2 text-red26" |
|
|
// onClick={onClick} |
|
|
> |
|
|
<h1>نوع گروه : {groupType[product?.categoryId - 1]}</h1> |
|
|
</div> |
|
|
|
|
|
<div className="flex p-4 justify-between items-center"> |
|
|
<h1 className="font-black text-xl text-red52"> |
|
|
{productPrice} تومان |
|
|
</h1> |
|
|
<div className="flex flex-col items-center justify-center"> |
|
|
{!rulesAccepted && ( |
|
|
<Link |
|
|
to="/register" |
|
|
className="w-36 py-2 px-1 rounded-md text-white bg-[#F2F9FF] text-[#4C7FE3] flex items-center justify-center cursor-pointer text-xs text-center border-2 border-[#4C7FE3]" |
|
|
> |
|
|
تکمیل اطلاعات کاربری و افزودن به سبد خرید |
|
|
</Link> |
|
|
)} |
|
|
{rulesAccepted && ( |
|
|
<div |
|
|
className={`bg-pinkF5 text-red26 rounded-md w-36 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white |
|
|
`} |
|
|
> |
|
|
<button className="" onClick={btnOnClick}> |
|
|
افزودن به سبد خرید |
|
|
</button> |
|
|
</div> |
|
|
)} |
|
|
<div |
|
|
className="w-36 py-2 px-1 rounded-md text-white bg-[#DF1452] text-white flex items-center justify-center cursor-pointer text-xs text-center border-2 border-pinkF5 mt-2" |
|
|
onClick={onClick} |
|
|
> |
|
|
اطلاعات بیشتر |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
if (catId == 5) { |
|
|
return ( |
|
|
<div className="w-full flex justify-center px-6" style={isMobile?{padding:"0px 5px"}:null}> |
|
|
<div |
|
|
className={`flex ${ |
|
|
isMobile ? "flex-col w-full border-red52" : "border-red82OP pt-4" |
|
|
} border my-4 rounded-lg `} |
|
|
style={{ width: !isMobile && "100%" }} |
|
|
> |
|
|
<div |
|
|
className={` ${ |
|
|
isMobile |
|
|
? "w-full h-24 " |
|
|
: "w-60 p-4 flex items-center justify-center" |
|
|
}`} |
|
|
> |
|
|
{/* image */} |
|
|
<img |
|
|
src={ |
|
|
product?.fileId |
|
|
? `https://new.andishmand.ir/api/v1/file/${product?.fileId}` |
|
|
: imgPlaceHolder |
|
|
} |
|
|
className={` rounded-md w-full ${ |
|
|
isMobile |
|
|
? "rounded-b-none w-full h-full object-none" |
|
|
: " bg-green-500" |
|
|
} `} |
|
|
/> |
|
|
</div> |
|
|
<div |
|
|
className="flex flex-col text-right" |
|
|
style={!isMobile ? { width: "calc(100% - 15rem)" } : null} |
|
|
> |
|
|
<h1 className="font-bold text-red52 border-b border-red82OP p-2 "> |
|
|
{product?.name} |
|
|
</h1> |
|
|
<p |
|
|
className={`font-bold ${ |
|
|
isMobile ? "text-xs text-right px-2" : "text-sm " |
|
|
} text-red26 border-b border-red82OP py-2`} |
|
|
> |
|
|
آدرس: {product?.address} |
|
|
</p> |
|
|
<div className="flex justify-between border-b border-red82OP "> |
|
|
<div |
|
|
className={`border-l font-bold text-red26 ${ |
|
|
isMobile |
|
|
? "flex px-2 items-center w-full text-xs" |
|
|
: " w-1/4 p-2 pr-0 text-sm" |
|
|
} border-red82OP `} |
|
|
> |
|
|
شماره تلفن: {product?.phone} |
|
|
</div> |
|
|
<div |
|
|
className={`${ |
|
|
isMobile ? "text-xs " : "border-l text-sm" |
|
|
} font-bold flex justify-center w-1/2 text-red26 border-red82OP p-2 `} |
|
|
> |
|
|
<p> |
|
|
{!isMobile && " آدرس وبسایت : "} |
|
|
{product?.url} |
|
|
</p> |
|
|
</div> |
|
|
{!isMobile && ( |
|
|
<div className="text-sm font-bold text-red26 p-2 w-1/4 text-center"> |
|
|
آدرس بروی نقشه |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
<div className={`flex w-full ${isMobile && "flex-col"}`}> |
|
|
{isMobile && ( |
|
|
<h1 className="text-red52 text-sm font-bold p-2 pb-0"> |
|
|
امکانات{" "} |
|
|
</h1> |
|
|
)} |
|
|
<div |
|
|
className={`w-3/5 pb-6" |
|
|
flex flex-wrap border-l border-red82OP`} |
|
|
style={ |
|
|
isMobile ? { width: "100%", paddingBottom: "0px" } : null |
|
|
} |
|
|
> |
|
|
{!isMobile && "امکانات :"} |
|
|
|
|
|
{product?.description?.split(",").map((item, index) => ( |
|
|
<div |
|
|
className={`flex ${ |
|
|
isMobile |
|
|
? "w-1/2 justify-start text-xs font-bold" |
|
|
: "justify-center text-sm" |
|
|
} items-center p-1 px-2`} |
|
|
key={`SCHOOL_SPE__${index}`} |
|
|
> |
|
|
<div |
|
|
className={`${ |
|
|
isMobile ? "w-4 h-4" : "w-6 h-6" |
|
|
} text-white ml-1 rounded-full flex justify-center items-center ${"bg-green17"}`} |
|
|
> |
|
|
<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> |
|
|
<p>{item}</p> |
|
|
</div> |
|
|
))} |
|
|
{isMobile && ( |
|
|
<div className="w-full border-t border-red82OP flex items-center justify-center h-16"> |
|
|
<h1 className="font-black text-sm text-red26 "> |
|
|
مشاهده آدرس بروی نقشه |
|
|
</h1> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
<div |
|
|
className={`flex px-4 ${ |
|
|
isMobile ? "w-full border-red82OP border-t px-1" : "w-2/5 py-4" |
|
|
} justify-between items-center`} |
|
|
> |
|
|
<h1 |
|
|
className={`${ |
|
|
isMobile && |
|
|
"w-1/2 h-full flex items-center py-4 border-l border-red82OP" |
|
|
} font-black text-xl text-red52`} |
|
|
> |
|
|
{productPrice} تومان |
|
|
</h1> |
|
|
<div style={isMobile ? {width:"100%",display:'flex',justifyContent:'center'}:null}> |
|
|
{!rulesAccepted && ( |
|
|
<Link |
|
|
to="/register" |
|
|
className="w-36 py-2 px-1 rounded-md text-white bg-[#F2F9FF] text-[#4C7FE3] flex items-center justify-center cursor-pointer text-xs text-center border-2 border-[#4C7FE3]" |
|
|
> |
|
|
تکمیل اطلاعات کاربری و رزرو پیش ثبت نام |
|
|
</Link> |
|
|
)} |
|
|
{rulesAccepted && ( |
|
|
<div |
|
|
className={`bg-pinkF5 rounded-md text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white |
|
|
`} |
|
|
> |
|
|
<button onClick={btnOnClick}> رزرو پیش ثبت نام </button> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
if (catId == 2) { |
|
|
return ( |
|
|
<div |
|
|
className={`flex cursor-pointer flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${ |
|
|
isMobile && "w-11/12" |
|
|
}`} |
|
|
style={{ width: !isMobile && "375px", direction: "rtl" }} |
|
|
> |
|
|
<div className="border-b border-red82OP pb-2 px-4" onClick={onClick}> |
|
|
<h1 className="text-red52 text-lg font-bold">آزمون {productName}</h1> |
|
|
<p className="text-red26 text-sm my-2"> |
|
|
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط |
|
|
در این قسمت قرار میگیرد |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div |
|
|
className="flex border-b border-red82OP text-center" |
|
|
onClick={onClick} |
|
|
> |
|
|
<div className="w-1/2 border-l border-red82OP py-2 "> |
|
|
<h1 className="font-bold text-red26">نوع آزمون : آنلاین</h1> |
|
|
</div> |
|
|
<div className="w-1/2 py-2 " onClick={onClick}> |
|
|
<h1 className="font-bold text-red26">بودجه بندی آزمون</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
className="flex border-b border-red82OP text-center text-xs" |
|
|
onClick={onClick} |
|
|
> |
|
|
<div |
|
|
className="w-1/2 border-l border-red82OP py-2 " |
|
|
onClick={onClick} |
|
|
> |
|
|
<h1 className="font-bold text-red26">تاریخ برگزاری : 1400/02/13</h1> |
|
|
</div> |
|
|
<div className="w-1/2 py-2 " onClick={onClick}> |
|
|
<h1 className="font-bold text-red26">تعداد آزمون : 18</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="flex p-4 justify-between items-center"> |
|
|
<h1 className="font-black text-xl text-red52"> |
|
|
{productPrice} تومان |
|
|
</h1> |
|
|
<div |
|
|
className={`bg-pinkF5 text-red26 w-32 border-2 rounded-md border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white |
|
|
`} |
|
|
> |
|
|
<button onClick={btnOnClick}>افزودن به سبد خرید</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
if (catId == 1) { |
|
|
return ( |
|
|
<div |
|
|
className={`flex flex-col cursor-pointer text-right rounded-xl justify-start w-full m-4 border border-red82OP ${ |
|
|
isMobile && "w-11/12" |
|
|
}`} |
|
|
style={{ width: !isMobile && "375px", direction: "rtl" }} |
|
|
> |
|
|
<img |
|
|
src="https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" |
|
|
className="rounded-t-xl" |
|
|
onClick={onClick} |
|
|
/> |
|
|
|
|
|
<div |
|
|
className={`border-b border-red82OP py-2 px-4 ${ |
|
|
isMobile ? "bg-blueFF text-right" : "text-center " |
|
|
}`} |
|
|
onClick={onClick} |
|
|
> |
|
|
<h1 |
|
|
className={`text-${ |
|
|
isMobile ? "blueE3" : "blue-5F" |
|
|
} text-lg font-bold`} |
|
|
> |
|
|
کتاب {productName} |
|
|
</h1> |
|
|
<p className="text-blue7E text-sm mb-2"> |
|
|
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط |
|
|
در این قسمت قرار میگیرد |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div className="flex justify-between px-4 items-center"> |
|
|
<h1 |
|
|
className={`font-black text-xl py-4 text-red52 ${ |
|
|
isMobile && "w-1/2 border-l border-red82OP text-center" |
|
|
}`} |
|
|
> |
|
|
{productPrice} تومان |
|
|
</h1> |
|
|
|
|
|
<div |
|
|
className={`bg-${ |
|
|
isMobile |
|
|
? "blueFF border-blueDF rounded-lg py-3 hover:bg-blueDF" |
|
|
: "pinkF5 border-red52 py-2 hover:bg-red52" |
|
|
} rounded-md text-red26 w-32 border-2 px-1 text-xs flex justify-center hover:text-white |
|
|
`} |
|
|
> |
|
|
<button onClick={btnOnClick}>افزودن به سبد خرید</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} else { |
|
|
return <div></div>; |
|
|
} |
|
|
}; |
|
|
const mapStateToProps = (state) => ({ |
|
|
isMobile: state.publicApi.isMobile, |
|
|
}); |
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ProductDesign); |
|
|
|
|
|
ProductDesign.defaultProps = { |
|
|
// icons on product image |
|
|
colors: false, |
|
|
likeBtn: false, |
|
|
discount: false, |
|
|
discountPricePercent: false, |
|
|
// product price |
|
|
discountPrice: false, |
|
|
priceHolder: true, |
|
|
|
|
|
productContent: false, |
|
|
star: true, |
|
|
productTags: [], |
|
|
productCat: true, |
|
|
rangeHolder: true, |
|
|
|
|
|
// دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع |
|
|
verticalImg: true, |
|
|
horizontalImg: false, |
|
|
|
|
|
addToCartHolder: false, |
|
|
|
|
|
productTitleColor: "text-productTitle", |
|
|
|
|
|
productExcerptTextColor: "text-productContent", |
|
|
|
|
|
productCatTextColor: "text-darkCrimsonTextColor", |
|
|
// برای درصد دادن به عرض رنج |
|
|
rangeWidth: "w-44", |
|
|
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم |
|
|
productHolderBorder: "border", |
|
|
productHolderBorderColor: "border-grayBorderColor", |
|
|
|
|
|
productTitleAlignment: "text-justify", |
|
|
//میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم |
|
|
priceDirection: "flex-row", |
|
|
// productImg: book, |
|
|
writeGHEIMAT: false, |
|
|
};
|
|
|
|