reza added filter to desktop

temp
Reza_ashrafi 3 years ago
parent 503687754c
commit 48a7083099
  1. 14
      src/App.scss
  2. 6
      src/assets/icons/alert.svg
  3. 2
      src/assets/icons/dropdown-blue.svg
  4. 18
      src/components/Button/index.js
  5. 6
      src/components/Checkbox/index.css
  6. 2
      src/components/CourseChapter/index.css
  7. 46
      src/components/CourseChapter/index.js
  8. 20
      src/components/Footer/index.js
  9. 2
      src/components/Input/index.scss
  10. 8
      src/components/Navbar/cart-blue.svg
  11. 7
      src/components/Navbar/index.js
  12. 32
      src/components/Product/index.js
  13. 12
      src/components/ProductStatusCard/arrow-icon.svg
  14. 16
      src/components/ProductStatusCard/delivery-icon.svg
  15. 13
      src/components/ProductStatusCard/icon-shop.svg
  16. 6
      src/components/ProductStatusCard/index.js
  17. 6
      src/components/ProductStatusCard/info-circle.svg
  18. 4
      src/components/ProductStatusCard/shield-tick.svg
  19. 10
      src/components/ProductTab/index.js
  20. 6
      src/components/ProductTab/table/index.css
  21. 7
      src/components/ProductTab/table/index.js
  22. 4
      src/components/Progress/index.js
  23. 8
      src/components/Switch/index.js
  24. 24
      src/components/Switch/index.scss
  25. 4
      src/components/Textarea/index.js
  26. 6
      src/components/VerticalExpandableProductFilter/index.js
  27. 12
      src/components/VodProduct/index.js
  28. 8
      src/redux/actions/book.js
  29. 6
      src/redux/actions/index.js
  30. 9
      src/redux/actions/public.js
  31. 17
      src/redux/actions/transport.js
  32. 71
      src/redux/reducers/book.js
  33. 1
      src/redux/reducers/index.js
  34. 28
      src/redux/reducers/transport.js
  35. 61
      src/utils/filter.js
  36. 4
      src/views/Activation/components/Header.js
  37. 60
      src/views/Address/index.js
  38. 6
      src/views/Auth/Desktop/index.js
  39. 6
      src/views/Auth/SignUp/index.js
  40. 10
      src/views/Contact/index.js
  41. 18
      src/views/DeliveryForm/Address/index.js
  42. 14
      src/views/DeliveryForm/TransportDate/index.js
  43. 85
      src/views/DeliveryForm/TransportMethod/index.js
  44. 2
      src/views/DeliveryForm/index.js
  45. 10
      src/views/Faq/components/NotFound.js
  46. 29
      src/views/Faq/components/Question.js
  47. 13
      src/views/Faq/index.js
  48. 61
      src/views/Home/Desktop/Part2/index.js
  49. 58
      src/views/Home/Desktop/Part4/index.js
  50. 24
      src/views/Home/Desktop/SalesContainer/index.js
  51. 1
      src/views/Home/Desktop/index.js
  52. 10
      src/views/Order/components/Book.js
  53. 56
      src/views/Order/index.js
  54. 17
      src/views/Orders/components/Order.js
  55. 45
      src/views/Product/Desktop/ProductOverAll/index.js
  56. 2
      src/views/Product/index.js
  57. 2
      src/views/Products/index.js
  58. 222
      src/views/Products/layouts/Main.js
  59. 137
      src/views/Products/layouts/Sidebar.js
  60. 8
      src/views/ShoppingCart/Product/index.js
  61. 30
      src/views/ShoppingCart/index.js
  62. 9
      src/views/Video/components/Desktop/Table.js
  63. 41
      src/views/Video/components/Desktop/Videos.js
  64. 14
      src/views/Video/components/Season.js
  65. 33
      src/views/Video/index.js
  66. 2
      src/views/VideoDisplay/index.js
  67. 39
      tailwind.config.js

@ -22,6 +22,20 @@
display: none;
}
.bold{
font-family: ExtraBold;
}
.shadow-all{
box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
}
//slider
.styles-module_item-tracker__3bypy{
padding-top : 20px;
// transform: translateY(-20px) !important;
}
@font-face {
font-family: Black;
src: url("./assets/font/IranSansX/Farsi/Black.ttf");

@ -1,9 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<g id="vuesax_linear_info-circle" data-name="vuesax/linear/info-circle" transform="translate(-364 -252)">
<g id="info-circle" transform="translate(364 252)">
<path id="Vector" d="M7.917,15.833A7.917,7.917,0,1,0,0,7.917,7.94,7.94,0,0,0,7.917,15.833Z" transform="translate(1.583 1.583)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0V3.958" transform="translate(9.5 6.333)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.007" transform="translate(9.496 12.667)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector" d="M7.917,15.833A7.917,7.917,0,1,0,0,7.917,7.94,7.94,0,0,0,7.917,15.833Z" transform="translate(1.583 1.583)" fill="none" stroke="rgb(18, 207, 127)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0V3.958" transform="translate(9.5 6.333)" fill="none" stroke="rgb(18, 207, 127)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.007" transform="translate(9.496 12.667)" fill="none" stroke="rgb(18, 207, 127)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-4" data-name="Vector" d="M0,0H19V19H0Z" fill="none" opacity="0"/>
</g>
</g>

Before

Width:  |  Height:  |  Size: 966 B

After

Width:  |  Height:  |  Size: 996 B

@ -1,6 +1,6 @@
<svg id="vuesax_linear_arrow-down" data-name="vuesax/linear/arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="arrow-down">
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 516 B

After

Width:  |  Height:  |  Size: 525 B

@ -13,19 +13,22 @@ export default function Button({
active,
borderType,
loading,
disabled,
}) {
return (
<button
className={`rounded-md flex py-3 justify-center text-sm lg:text-tiny cursor-pointer lg:py-4 ${
className={`rounded-md flex py-3 justify-center text-sm lg:text-tiny ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} font-bold lg:py-4 ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-blue-100" : bgOpacity) : bgOpacity
} ${selectable ? (active ? "text-green7B" : color) : color} ${
selectable ? (active ? "bg-blueC0 bg-opacity-5" : bgOpacity) : bgOpacity
} `}
style={{
border: `${
selectable ? (active ? "2px" : border.width) : border.width
} ${borderType ? borderType : 'solid'} ${
selectable ? (active ? "#196EC0" : border.color) : border.color
} ${borderType ? borderType : "solid"} ${
selectable ? (active ? "#12CF7F" : border.color) : border.color
}`,
width: width,
}}
@ -36,5 +39,6 @@ export default function Button({
);
}
Button.defaultProps = {
color: "",
};

@ -77,12 +77,12 @@
}
.checkbox:hover span:first-child {
border-color: #0077ff;
border-color: #06BAC0;
}
.checkbox-input:checked + .checkbox span:first-child {
background: #0077ff;
border-color: #0077ff;
background: #06BAC0;
border-color: #06BAC0;
animation: zoom-in-out 0.3s ease;
}

@ -7,7 +7,7 @@
}
.hasScrollbar::-webkit-scrollbar-thumb{
background:#196EC0;
background:rgb(18, 207, 127);
border-radius: 10px;
height: 20px;
}

@ -26,35 +26,43 @@ const CourseChapter = ({
};
return (
<section
className="bg-blueFF1 py-5 pr-5 overflow-hidden flex flex-col"
className={`bg-green1 bg-opacity-10 shadow-md py-5 pr-5 overflow-hidden flex flex-col rounded-md`}
style={{
width: "calc(100% / 12 * 3.5)",
minWidth: "calc(100% / 12 * 3.5)",
height: "calc(100vh - 300px)",
}}
>
<div className="flex flex-row w-full items-center justify-between">
<div>
<h2 className="text-blue-800 text-base font-semibold">سرفصل دوره</h2>
<h2 className="text-green7B bg-opacity-5 text-base font-semibold">
سرفصل دوره
</h2>
</div>
<div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2">
<span className="text-blue-800 text-sm px-2">{book?.name}</span>
<span className="text-blue-800 text-sm px-2">
<span className="text-green7B text-sm px-2">{book?.name}</span>
<span className="text-green7B text-sm px-2">
{"پایه" + " " + grades[book?.gradeId]}
</span>
</div>
</div>
<span className="w-full h-px bg-blue-200 my-4"></span>
<div className="overflow-y-scroll w-full hasScrollbar flex-1 flex flex-col">
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between mb-2">
{/* <p className="text-sm text-white">
{(seasons.length > 0 && playList.length > 0) &&
<div className="bg-blueC0 rounded-sm p-4 flex flex-row items-center justify-between mb-2">
<p className="text-tiny font-bold text-white">
{seasons?.length > 0 &&
playList?.length > 0 &&
seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0]
?.name}
</p> */}
</p>
{/* <span className="text-sm text-white">{video?.duration}</span> */}
</div>
{playList?.map((video, index) => (
<div className="flex flex-col pl-4" key={index}>
<div
className={`flex flex-col pl-4 ${
video?.isFreeVod ? "cursor-pointer" : "cursor-not-allowed"
}`}
key={index}
>
<div
className="flex flex-row items-center justify-around"
key={index}
@ -84,8 +92,8 @@ const CourseChapter = ({
className={`w-full bg-white flex flex-col transition duration-400 hover:scale-95 shadow-md transform rounded-md
${
selectedVideo?.id === video?.id
? "bg-blue-600 text-white-700"
: "text-blue-500"
? "bg-blueC0 text-white"
: "text-blueC0"
}
`}
onClick={() =>
@ -96,19 +104,19 @@ const CourseChapter = ({
disabled={true}
>
{/* top */}
<div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-blue-300">
<div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-green-200">
<p
className={`text-tiny
className={`text-tiny font-bold
${selectedVideo?.id === video?.id ? "text-white" : ""}`}
>
{video?.name}
</p>
<span
className={`text-sm border-r border-solid border-blue-200 pr-1
className={`text-tiny border-r border-solid border-blue-200 pr-1
${
selectedVideo?.id === video?.id
? "text-white"
: "text-blue-500"
: "text-blueC0"
}`}
>
{duration(video?.duration)}
@ -122,14 +130,14 @@ const CourseChapter = ({
></div>
{/* bottom */}
<span
className={`text-tiny text-center p-3
className={`text-tiny text-center font-medium p-3
${
selectedVideo?.id === video?.id
? "text-white"
: "text-blue-500"
: "text-blueC0"
}`}
>
پخش
{selectedVideo?.id === video?.id ? "در حال پخش" : "پخش"}
</span>
</div>
</div>

@ -1,8 +1,8 @@
import React from "react";
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import _ from "lodash";
// import enamadlogo from './enamad-pic.svg';
import enamadlogo from "./enamad-pic.svg";
import callIcon from "../../assets/icons/vuesax-linear-call-calling.svg";
import samandehi from "./samandehi-pic.svg";
import iosIcon from "./IOS.svg";
@ -11,6 +11,9 @@ import bazarIcon from "./Bazar.svg";
import lightBlueLine from "./light-blue-line.svg";
const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
useEffect(() => {
console.log(window.location.host);
}, []);
const enamad =
'<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
return (
@ -57,7 +60,11 @@ const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
<ul className="flex flex-col mt-0">
{item.links.map((link, index) => (
<li className="mt-6">
<Link className="text-gray70 text-base" to={link.link} key={index}>
<Link
className="text-gray70 text-base"
to={link.link}
key={index}
>
{link.name}
</Link>
</li>
@ -67,16 +74,21 @@ const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
))}
</div>
<div className="flex items-center justify-between mt-10 md:mt-0">
{window.location.host === "www.danovin.ir" ? (
<div
dangerouslySetInnerHTML={{
__html: enamad,
}}
className="w-28 p-2 rounded-md bg-gray-300 mx-6"
></div>
) : (
<img src={enamadlogo} alt="" className="w-32" />
)}
<img
src={samandehi}
alt=""
className="w-28 p-2 rounded-md bg-gray-300 mr-6"
className="w-32 p-2 rounded-md bg-gray-300 mr-6"
/>
</div>
</div>

@ -1,4 +1,4 @@
$primary: #196EC0;
$primary: #23C933;
$gray: #dbdbdb;
$danger: #E00A0A;
$success: #23C933;

@ -1,9 +1,9 @@
<svg id="vuesax_linear_bag-2" data-name="vuesax/linear/bag-2" xmlns="http://www.w3.org/2000/svg" width="45.23" height="45.23" viewBox="0 0 45.23 45.23">
<g id="bag-2" transform="translate(0 0)">
<path id="Vector" d="M0,10.67V8.842C0,4.6,3.411.437,7.651.041a8.481,8.481,0,0,1,9.31,8.443v2.6" transform="translate(14.134 3.785)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M10.838,26.384H22.145c7.576,0,8.933-3.034,9.329-6.728L32.887,8.349C33.4,3.75,32.077,0,24.03,0H8.953C.906,0-.413,3.75.1,8.349L1.509,19.656C1.9,23.35,3.262,26.384,10.838,26.384Z" transform="translate(6.123 15.077)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.511" transform="translate(28.708 22.115)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.511" transform="translate(15.514 22.115)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector" d="M0,10.67V8.842C0,4.6,3.411.437,7.651.041a8.481,8.481,0,0,1,9.31,8.443v2.6" transform="translate(14.134 3.785)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M10.838,26.384H22.145c7.576,0,8.933-3.034,9.329-6.728L32.887,8.349C33.4,3.75,32.077,0,24.03,0H8.953C.906,0-.413,3.75.1,8.349L1.509,19.656C1.9,23.35,3.262,26.384,10.838,26.384Z" transform="translate(6.123 15.077)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.511" transform="translate(28.708 22.115)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.511" transform="translate(15.514 22.115)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H45.23V45.23H0Z" fill="none" opacity="0"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -195,7 +195,8 @@ function Navbar({
</div>
) : (
<header
className={`rounded-b-md w-full border-b border-gray-200 border-solid fixed top-0 right-0 shadow-md bg-white z-20`}
className={`w-full border-b border-gray-200 border-solid fixed top-0 right-0 bg-white z-20`}
style={{boxShadow : '0px 0px 10px rgba(0,0,0,0.1)'}}
>
<div className={`w-11/12 mx-auto flex flex-col`}>
<div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
@ -212,7 +213,7 @@ function Navbar({
<li key={index}>
<Link
to={page.link}
className="text-tiny font-medium text-blue5F py-2 px-4 mx-4"
className="text-tiny font-medium text-blue3D py-2 px-4 mx-4"
>
{page.name}
</Link>
@ -227,7 +228,7 @@ function Navbar({
>
<div className="relative w-full h-full">
<div
className="flex flex-col w-full absolute left-1/2 top-8 transform -translate-x-1/2 z-50 rounded-md"
className="flex flex-col w-full absolute left-1/2 top-16 transform -translate-x-1/2 z-50 rounded-md"
style={{ maxWidth: "calc(100vw / 3)" }}
onClick={(e) => e.stopPropagation()}
>

@ -18,47 +18,36 @@ import discountImg from "./discount.png";
const ProductDesign = ({
grades,
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
product,
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
productCatTextColor,
rangeHolder,
verticalImg,
rangeWidth,
addToCartHolder,
productName,
productPrice,
writeGHEIMAT,
numberOfRegards,
productHolderHoverBorder,
hoverMode,
starRate,
imageSize,
type
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<Link
to={"/products/" + product.id}
className={`flex flex-wrap sm:flex-nowrap justify-around group`}
className={`flex flex-wrap sm:flex-nowrap justify-around transition-all group`}
style={{ direction: "rtl" }}
>
<div className="w-full flex flex-wrap items-center justify-around ">
<div
className={`w-full sm:w-60 md:w-72 rounded-lg p-2 my-3 hover:bg-grayF4 transition-all duration-500`}
className={`w-full sm:w-60 md:w-72 rounded-lg p-2 my-3 transform hover:-translate-y-5 transition-all duration-500 border border-solid border-gray-200 hover:border-greenB9 hover:border-2`}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
@ -86,10 +75,10 @@ const ProductDesign = ({
</div>
{/* img */}
<div
className={`w-full flex bg-grayF4 p-0 justify-center rounded-lg group`}
className={`w-full flex bg-greenD8 p-0 justify-center rounded-lg group`}
>
<img
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
src={`https://dnvn.ir/api/v1/file/${product?.fileIds}`}
alt=""
style={{
height: `calc(100vh / ${imageSize})`,
@ -101,11 +90,11 @@ const ProductDesign = ({
</div>
{/* product content */}
<div className="w-full px-2">
<div className="w-full mt-4">
<div className="w-full mt-4 font-semibold text-base">
<h2
className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`}
>
{product?.product[1]?.name}
{product?.product[type]?.name}
</h2>
{productContent && (
<p
@ -117,7 +106,7 @@ const ProductDesign = ({
)}
{productCat && (
<span className={`text-sm py-1 font-normal text-blueC0`}>
{"پایه" + " " + grades[product.gradeId]}
{"پایه" + " " + grades[product?.gradeId]}
</span>
)}
</div>
@ -151,8 +140,8 @@ const ProductDesign = ({
</p>
)}
</div>
<p className="text-lg text-productPrice font-semibold inline text-blue5F">
{separate(product?.product[1]?.price)} <span>تومان</span>
<p className="text-lg text-productPrice font-semibold inline text-green4F">
{separate(product.product[type]?.price)} <span>تومان</span>
</p>
</div>
{/* add to cart */}
@ -219,6 +208,7 @@ export default connect(mapStateToProps)(ProductDesign);
ProductDesign.defaultProps = {
// icons on product image
type : 0,
colors: false,
likeBtn: false,
discount: false,

@ -1,11 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="41.268" height="41.268" viewBox="0 0 41.268 41.268">
<path id="Vector" d="M0,0H17.195" transform="translate(20.634 9.56)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(20.634 3.439)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H17.195" transform="translate(3.439 29.334)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(3.439 23.213)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector" d="M0,0H17.195" transform="translate(20.634 9.56)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(20.634 3.439)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H17.195" transform="translate(3.439 29.334)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M3.817,0h9.56c3.061,0,3.817.757,3.817,3.783V10.85c0,3.026-.757,3.783-3.817,3.783H3.817C.757,14.633,0,13.876,0,10.85V3.783C0,.757.757,0,3.817,0Z" transform="translate(3.439 23.213)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<g id="Group-2" data-name="Group" transform="translate(3.439 3.439)">
<path id="Vector-5" data-name="Vector" d="M12.036,0A12.028,12.028,0,0,1,0,12.036L1.805,9.027" transform="translate(22.353 22.353)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,12.036A12.028,12.028,0,0,1,12.036,0L10.231,3.009" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M12.036,0A12.028,12.028,0,0,1,0,12.036L1.805,9.027" transform="translate(22.353 22.353)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,12.036A12.028,12.028,0,0,1,12.036,0L10.231,3.009" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
<path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -1,11 +1,11 @@
<svg id="group" xmlns="http://www.w3.org/2000/svg" width="51.463" height="51.463" viewBox="0 0 51.463 51.463">
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector" d="M20.349,25.732h2.144a4.3,4.3,0,0,0,4.289-4.289V0H7.484A8.569,8.569,0,0,0,0,4.4" transform="translate(5.382 4.289)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,25.732a6.424,6.424,0,0,0,6.433,6.433H8.577a4.289,4.289,0,0,1,8.577,0h8.577a4.289,4.289,0,0,1,8.577,0h2.144a6.424,6.424,0,0,0,6.433-6.433V19.3H36.453a2.151,2.151,0,0,1-2.144-2.144V10.722a2.151,2.151,0,0,1,2.144-2.144h2.766L35.553,2.166A4.324,4.324,0,0,0,31.822,0H27.876V15.01A4.3,4.3,0,0,1,23.587,19.3H21.443" transform="translate(4.289 10.722)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(12.866 38.598)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M8.577,4.289A4.289,4.289,0,1,1,4.289,0,4.289,4.289,0,0,1,8.577,4.289Z" transform="translate(30.02 38.598)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M8.577,6.433v4.289H2.144A2.151,2.151,0,0,1,0,8.577V2.144A2.151,2.151,0,0,1,2.144,0H4.91Z" transform="translate(38.598 19.299)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H12.866" transform="translate(4.289 17.154)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H8.577" transform="translate(4.289 23.587)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H4.289" transform="translate(4.289 30.02)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -1,12 +1,11 @@
<svg id="Group_207" data-name="Group 207" xmlns="http://www.w3.org/2000/svg" width="45.601" height="45.601" viewBox="0 0 45.601 45.601">
<g id="Path_95" data-name="Path 95" transform="translate(0 0)" fill="#fff">
<path d="M 33.83258438110352 44.8504524230957 L 11.76785469055176 44.8504524230957 C 8.824884414672852 44.8504524230957 6.058054447174072 43.70439529418945 3.977064371109009 41.62339401245117 C 1.896064281463623 39.54239273071289 0.7500042915344238 36.77556610107422 0.7500042915344238 33.83258438110352 L 0.7500042915344238 8.825894355773926 C 0.7500042915344238 4.372834205627441 4.372834205627441 0.7500042915344238 8.825894355773926 0.7500042915344238 L 36.77455520629883 0.7500042915344238 C 41.24808502197266 0.7500042915344238 44.8504524230957 6.086584091186523 44.8504524230957 10.50503444671631 L 44.8504524230957 33.83258438110352 C 44.8504524230957 36.77556610107422 43.70439529418945 39.54239273071289 41.62339401245117 41.62339401245117 C 39.54239273071289 43.70439529418945 36.77556610107422 44.8504524230957 33.83258438110352 44.8504524230957 Z" stroke="none"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="#3fa7ce"/>
<path d="M 8.825893402099609 1.499996185302734 C 4.786384582519531 1.499996185302734 1.499996185302734 4.786384582519531 1.499996185302734 8.825893402099609 L 1.499996185302734 33.83258438110352 C 1.499996185302734 39.49430465698242 6.106132507324219 44.10044479370117 11.76785278320312 44.10044479370117 L 33.83258438110352 44.10044479370117 C 39.49430465698242 44.10044479370117 44.10044479370117 39.49430465698242 44.10044479370117 33.83258438110352 L 44.10044479370117 10.50503540039062 C 44.10044479370117 8.442455291748047 43.25521469116211 6.143684387207031 41.83945465087891 4.355815887451172 C 40.994873046875 3.289253234863281 39.21379470825195 1.499996185302734 36.77455520629883 1.499996185302734 L 8.825893402099609 1.499996185302734 M 8.825893402099609 -3.814697265625e-06 L 36.77455520629883 -3.814697265625e-06 C 41.64896392822266 -3.814697265625e-06 45.60044479370117 5.630622863769531 45.60044479370117 10.50503540039062 L 45.60044479370117 33.83258438110352 C 45.60044479370117 40.33179473876953 40.33179473876953 45.60044479370117 33.83258438110352 45.60044479370117 L 11.76785278320312 45.60044479370117 C 5.268653869628906 45.60044479370117 -3.814697265625e-06 40.33179473876953 -3.814697265625e-06 33.83258438110352 L -3.814697265625e-06 8.825893402099609 C -3.814697265625e-06 3.951484680175781 3.951484680175781 -3.814697265625e-06 8.825893402099609 -3.814697265625e-06 Z" stroke="none" fill="rgb(19, 123, 79)"/>
</g>
<path id="Path_94" data-name="Path 94" d="M0,0S12.538,4.734,23.6,4.734A52.3,52.3,0,0,0,44.245,0" transform="translate(0.355 11.893)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_201" data-name="Line 201" x1="4.702" y1="14.752" transform="translate(26.924 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_202" data-name="Line 202" x1="4.759" y2="14.752" transform="translate(12.503 0.693)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<path id="Path_93" data-name="Path 93" d="M0,4.009S-2.153-10.205,7.212-10.538,14.377,4.009,14.377,4.009" transform="translate(16.048 40.303)" fill="none" stroke="#3fa7ce" stroke-width="1.5"/>
<line id="Line_203" data-name="Line 203" x1="12.209" transform="translate(16.696 21.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
<line id="Line_204" data-name="Line 204" x1="12.209" transform="translate(16.696 25.742)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-width="1"/>
<path id="Path_94" data-name="Path 94" d="M0,0S12.538,4.734,23.6,4.734A52.3,52.3,0,0,0,44.245,0" transform="translate(0.355 11.893)" fill="none" stroke="rgb(19, 123, 79)" stroke-width="1.5"/>
<line id="Line_201" data-name="Line 201" x1="4.702" y1="14.752" transform="translate(26.924 0.693)" fill="none" stroke="rgb(19, 123, 79)" stroke-width="1.5"/>
<line id="Line_202" data-name="Line 202" x1="4.759" y2="14.752" transform="translate(12.503 0.693)" fill="none" stroke="rgb(19, 123, 79)" stroke-width="1.5"/>
<path id="Path_93" data-name="Path 93" d="M0,4.009S-2.153-10.205,7.212-10.538,14.377,4.009,14.377,4.009" transform="translate(16.048 40.303)" fill="none" stroke="rgb(19, 123, 79)" stroke-width="1.5"/>
<line id="Line_203" data-name="Line 203" x1="12.209" transform="translate(16.696 21.329)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-width="1"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -53,7 +53,7 @@ const ProductStatusCard = ({
</div>
))}
<div className="flex flex-col items-center py-3">
<p className="text-xl text-blue-600">
<p className="text-xl text-green4F">
{separate(price)}
<span className="text-sm text-gray-700 font-light">تومان</span>
</p>
@ -66,7 +66,7 @@ const ProductStatusCard = ({
<Button
title="اضافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%"
color={"text-white"}
selectable={true}
@ -87,7 +87,7 @@ const ProductStatusCard = ({
<img src={arrow} alt="" className="w-20 h-20" />
</div>
<div className="flex flex-col mr-5">
<h2 className="text-sm font-bold text-blue-900">
<h2 className="text-sm font-bold text-green-900">
بازگشت بی چون و چرا
</h2>
<p className="text-xs mt-2 leading-5 text-justify">

@ -1,6 +1,6 @@
<svg id="info-circle" xmlns="http://www.w3.org/2000/svg" width="31.269" height="31.269" viewBox="0 0 31.269 31.269">
<path id="Vector" d="M13.029,26.057A13.029,13.029,0,1,0,0,13.029,13.067,13.067,0,0,0,13.029,26.057Z" transform="translate(2.606 2.606)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.514" transform="translate(15.634 10.423)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.012" transform="translate(15.627 20.846)" fill="none" stroke="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector" d="M13.029,26.057A13.029,13.029,0,1,0,0,13.029,13.067,13.067,0,0,0,13.029,26.057Z" transform="translate(2.606 2.606)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0V6.514" transform="translate(15.634 10.423)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H.012" transform="translate(15.627 20.846)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H31.269V31.269H0Z" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 856 B

@ -1,5 +1,5 @@
<svg id="shield-tick" xmlns="http://www.w3.org/2000/svg" width="52.115" height="52.115" viewBox="0 0 52.115 52.115">
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector" d="M15.374.5,4.538,4.587A7.535,7.535,0,0,0,0,11.123V27.257a10.557,10.557,0,0,0,3.757,7.47l9.337,6.97a9.883,9.883,0,0,0,11.161,0l9.337-6.97a10.557,10.557,0,0,0,3.757-7.47V11.123a7.54,7.54,0,0,0-4.538-6.558L21.975.5A11.041,11.041,0,0,0,15.374.5Z" transform="translate(7.405 4.337)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,5.841l3.5,3.5L12.833,0" transform="translate(19.652 19.934)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H52.115V52.115H0Z" transform="translate(52.115 52.115) rotate(180)" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 864 B

After

Width:  |  Height:  |  Size: 882 B

@ -2,7 +2,7 @@ import React, { useState } from "react";
import Table from "./table";
const ProductTab = ({ tabs }) => {
const [selectedTab, setSelectedTab] = useState(tabs[1]);
const [selectedTab, setSelectedTab] = useState(tabs[0]);
return (
<section className="mt-10 flex flex-col w-full">
@ -10,8 +10,8 @@ const ProductTab = ({ tabs }) => {
<ul className="flex flex-row justify-center gap-16">
{tabs.map((tab, index) => (
<li
className={`text-sm cursor-pointer hover:text-blue-400 py-4 transition-all duration-500 ${
selectedTab?.title === tab?.title ? "text-blue-600 border-b-4 border-solid border-blueC0" : "border-b-4 border-solid border-transparent"
className={`text-tiny font-semibold cursor-pointer hover:text-blueC0 py-4 transition-all duration-500 ${
selectedTab?.title === tab?.title ? "text-blueC0 border-b-4 border-solid border-blueC0" : "border-b-4 border-solid border-transparent"
}`}
onClick={() => setSelectedTab(tab)}
key={index}
@ -38,11 +38,11 @@ ProductTab.defaultProps = {
},
{
title: "پرسش",
components: "نقد و بررسی",
components: <div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">این بخش فعلا قابل دسترسی نیست.</div>,
},
{
title: "سوال",
components: "پرسش و پاسخ",
components: <div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">این بخش فعلا قابل دسترسی نیست.</div>,
},
],
};

@ -1,6 +0,0 @@
.specifications-li:hover div{
background-color: rgba(25,110,192,0.15);
}
.specifications-li div{
transition: all 0.2s;
}

@ -1,5 +1,4 @@
import React, { useState } from "react";
import './index.css';
const persian = {
weight: "وزن",
@ -17,14 +16,14 @@ const Table = ({ specifications }) => {
return (
<ul className={`w-full`} >
{Object.keys(specifications).map((specification, index) => (
<li className={`flex my-3 cursor-pointer specifications-li`} >
<li className={`flex my-3 cursor-pointer group`}>
<div
className={` bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm`}
className={` bg-grayF9 rounded px-3 py-4 ml-2 text-greenBA text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10`}
style={{ flex: 2 }}
>
{persian[specification]}
</div>
<div className={`bg-grayF9 rounded p-3 text-sm`} style={{ flex: 8 }}>
<div className={`bg-grayF9 rounded px-3 py-4 text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10`} style={{ flex: 8 }}>
{specifications[specification]}
</div>
</li>

@ -8,9 +8,9 @@ function Progress({ percent, deskTop }) {
}, 1000);
}, [percent]);
return (
<div className={`flex-1 ${deskTop ? 'h-3' : 'h-1.5'} rounded-full overflow-hidden my-3`} style={{ backgroundColor: '#D3E9FF' }}>
<div className={`flex-1 ${deskTop ? 'h-3' : 'h-1.5'} rounded-full overflow-hidden my-3 bg-blueC0 bg-opacity-10`}>
<div
className="h-full bg-blueEB float-left transition-all duration-500 rounded-full"
className="h-full bg-blueC0 float-left transition-all duration-500 rounded-full"
style={{ width: delayPercent + "%" }}
></div>
</div>

@ -1,11 +1,11 @@
import React from "react";
import "./index.scss";
export default function index() {
export default function Switch({checked}) {
return (
<div className="switch">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<div className="switchbox transition-all">
<input className="transition-all" type="checkbox" id="toggle" checked={checked} />
<label className="transition-all" for="toggle"></label>
</div>
);
}

@ -9,26 +9,28 @@
// justify-content: center;
// }
.switch {
.switchbox {
position: relative;
input[type="checkbox"] {
visibility: hidden;
position: absolute;
&:checked + label {
transform: rotate(0deg);
background-color: #000;
background-color: rgb(18, 207, 127);
border-color: rgb(18, 207, 127) !important;
&:before {
transform: translateX(35.5px);
transform: translateX(24px);
background-color: #fff;
border-color: rgb(18, 207, 127) !important;
}
}
}
label {
display: flex;
width: 70px;
height: 34px;
border: 3px solid;
width: 50px;
height: 25px;
border: 3px solid #aaa;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
@ -41,12 +43,12 @@
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #000;
width: 17px;
height: 17px;
background-color: #aaa;
border-radius: 50%;
top: 2px;
left: 3px;
top: 1px;
left: 1px;
}
}
}

@ -8,8 +8,8 @@ export default function Textarea({ placeholder, theme, backgroundColor }) {
<textarea
className={_.join(
[
"my-2 border border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 focus:border",
backgroundColor,
"my-2 border border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
// backgroundColor,
],
" "
)}

@ -23,7 +23,7 @@ export default function VerticalExpandableProductFilter(props) {
return (
<div className="flex flex-col w-full border border-solid border-gray-100 rounded-md pt-6 bg-transparent max-h-screen bg-white my-3">
<strong className="text-md text-gray-500 w-full mb-3 text-right px-3">
<strong className="text-tiny text-greenBA w-full mb-3 text-right px-3">
{props.title}
</strong>
{props.searchAble && (
@ -66,14 +66,14 @@ export default function VerticalExpandableProductFilter(props) {
<div className="flex flex-row items-center">
<Checkbox
name={`ch${name}_${i}`}
checked={false}
checked={true}
onclick={(e) => {
checkedBox[i] = !checkedBox[i];
setChecked(checkedBox);
}}
onChange={() => props.onChange(name, item1.name)}
/>
<strong className="text-xs font-light text-gray-500">
<strong className=" text-greenBA text-sm rounded py-1 px-0 font-light">
{props.preName
? props.preName + " " + item1.name
: item1}

@ -80,7 +80,7 @@ const VodProduct = ({
<div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${videoImages[Number(index)]})`,
backgroundImage: `url(https://dnvn.ir/api/v1/file/${video?.fileIds})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
height: height,
@ -139,14 +139,13 @@ const VodProduct = ({
{/* content */}
<div className="mt-4 flex flex-col">
<div className={`flex justify-between `}>
<h2
className={`leading-4 text-tiny mb-2 font-normal text-blue5F text-right`}
>
<h2 className={`leading-4 font-semibold text-base mb-4`}>
{"دوره ویدیویی" + " " + video?.name}
</h2>
{console.log(video?.gradeId)}
<span className={`text-sm font-light text-blueC0`}>
<span className={`text-tiny font-light text-green7B`}>
{"پایه" + " " + grades[video?.gradeId]}
{/* {video.grade} */}
</span>
</div>
{productContent && (
@ -184,9 +183,10 @@ const VodProduct = ({
)} */}
</div>
<p
className={`text-base font-semibold text-left`}
className={`text-lg text-productPrice font-semibold inline text-blue5F`}
>
{separate(video?.product[2]?.price) + ' '}
{/* {video.price} */}
<span>تومان</span>
</p>
</div>

@ -14,7 +14,9 @@ const book = {
await dispatch({ type: "book/gradeFilter", data: data }),
sortFilter: (data) => async (dispatch) =>
await dispatch({ type: "book/sortFilter", data: data }),
setFilterOptions: (data) => async (dispatch) => {
dispatch({ type: "book/setFilterOptions", data: data })
}
// update:
// (data = {}, data2 = {}) =>
// async (dispatch : Dispatch) => {
@ -36,9 +38,7 @@ const book = {
// searchBook: (data) => async (dispatch) => {
// dispatch({ type: "book/search", data: data });
// },
// filterBook: (data) => async (dispatch) => {
// dispatch({ type: "book/filter", data: data });
// },
};
export default book;

@ -7,13 +7,9 @@ export { default as product } from "./product";
export { default as userFactor } from "./userFactor";
export { default as userProduct } from "./userProduct";
export { default as userAddress } from "./userAddress";
export { default as transport } from "./transport";
export { default as content } from "./content";
export { default as faq } from "./faq";
export { default as file } from "./file";
export {default as scrollAction} from "./scroll";
export {default as qr} from "./qr";

@ -14,9 +14,12 @@ const publicApi = {
setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data }),
bookInfo:
(data = {}) =>
async (dispatch) =>
await proxy.get("public/vod/bookCourse", data, { dispatch }),
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.get("public/vod/bookCourse", data, { dispatch });
await proxy.get("book/info", data2, { dispatch });
},
bookSection:
(data = {}) =>
async (dispatch) =>

@ -0,0 +1,17 @@
import proxy from "../proxy";
const transport = {
list:
(data = {}) =>
async (dispatch) => {
await proxy.get("transport/list", data, { dispatch });
},
set:
(data = {}, data2 = {}, data3 = {}) =>
async (dispatch) => {
await proxy.post("transport/setTransport", data, { dispatch });
await proxy.get("userFactor/info", data2, { dispatch });
await proxy.get("transport/list", data3, { dispatch });
},
};
export default transport;

@ -1,4 +1,5 @@
import { toast } from "react-toastify";
import filter from "../../utils/filter";
const initialState = {
loading: false,
@ -9,12 +10,25 @@ const initialState = {
filterResult: [],
subjects: [],
levels: [],
sortFilters: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
sortMethods: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
selectedVideo: null,
gradeFilterBooks: null,
sortFilterCourse: null,
selectedGrade: null,
selectedSort: "پربازدید ترین ها",
productTypes : [
"کتاب فیزیکی",
"کتاب دیجیتال",
"دوره ویدئویی",
"بسته های آموزشی",
],
filterOptions : {
grade: '',
subject: '',
productType: null,
available : false,
sort: null,
}
};
const grades = [
@ -104,59 +118,8 @@ export default function book(state = initialState, action) {
// return { ...state, loading: false, error: null };
// case "book/search":
// return { ...state };
// case "book/filter":
// const realList = state.list;
// const level = data.level;
// const subject = data.subject;
// const sort = data.sort;
// const search = data.search;
// if (level.length > 0 || subject.length > 0 || sort || search) {
// localStorage.setItem("filter", "ON");
// }
// let finalSort;
// let byLevelFilter = [];
// if (level.length > 0) {
// level.map((item1) => {
// for (let i = 0; i < realList.length; i++) {
// if (grades[realList[i].gradeId] === item1) {
// byLevelFilter.push(realList[i]);
// }
// }
// });
// } else {
// byLevelFilter = realList;
// }
// let bySubjectFilter = [];
// if (subject.length > 0) {
// subject.map((item1) => {
// for (let i = 0; i < byLevelFilter.length; i++) {
// if (byLevelFilter[i].name === item1) {
// bySubjectFilter.push(byLevelFilter[i]);
// }
// }
// });
// } else {
// bySubjectFilter = byLevelFilter;
// }
// const bySearchFilter = search
// ? bySubjectFilter.filter((item1) => item1.name.indexOf(search) !== -1)
// : bySubjectFilter;
// if (sort === "گران ترین") {
// finalSort = bySearchFilter.sort((item1, item2) => {
// return item1.product[0].price - item2.product[0].price;
// });
// } else {
// finalSort = bySearchFilter;
// }
// return {
// ...state,
// loading: false,
// error: null,
// filterResult: finalSort,
// };
case "book/setFilterOptions":
return { ...state, loading: false, error: null, filterOptions : data};
case "book/loading":
return { ...state, loading: true };
case "book/error":

@ -6,6 +6,7 @@ export { default as blog } from "./blog";
export { default as product } from "./product";
export { default as content } from "./content";
export { default as userAddress } from "./userAddress";
export { default as transport } from "./transport";
export { default as faq } from "./faq";
export { default as file } from "./file";
export { default as userFactor } from "./userFactor";

@ -0,0 +1,28 @@
import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
list: [],
};
export default function transport(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "transport/list":
return {
...state,
loading: false,
list: data,
error: null,
};
case "transport/info":
return { ...state, loading: false, error: null};
case "transport/loading":
return { ...state, loading: true };
case "transport/error":
toast.error(data.message);
return { ...state, loading: false, error: data.message };
default:
return state;
}
}

@ -0,0 +1,61 @@
const grades = [
"پیش دبستان",
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
class filter {
productsPage = (products, options) => {
const { grade, subject, sort } = options;
if (grade.length > 0 || subject.length > 0 || sort) {
localStorage.setItem("filter", "ON");
}
let finalSort;
let byGradeFilter = [];
if (grade.length > 0) {
grade.map((item1) => {
for (let i = 0; i < products.length; i++) {
if (grades[products[i].gradeId] === item1) {
byGradeFilter.push(products[i]);
}
}
});
} else {
byGradeFilter = products;
}
let bySubjectFilter = [];
if (subject.length > 0) {
subject.map((item1) => {
for (let i = 0; i < byGradeFilter.length; i++) {
if (byGradeFilter[i].name === item1) {
bySubjectFilter.push(byGradeFilter[i]);
}
}
});
} else {
bySubjectFilter = byGradeFilter;
}
if (sort === "گران ترین") {
finalSort = bySubjectFilter.sort((item1, item2) => {
return item1.product[0].price - item2.product[0].price;
});
} else {
finalSort = bySubjectFilter;
}
};
}
const _filter = new filter();
export default _filter;

@ -2,9 +2,9 @@ import React from "react";
function Header({ bg, title }) {
return (
<div className="w-full flex flex-col items-center justify-end bg-blueFD1 transform -translate-y-16 dark:bg-opacity-5" style={{ height : '29%', minHeight : 180}}>
<div className="w-full flex flex-col items-center justify-end bg-blueC0 bg-opacity-5 transform -translate-y-16 dark:bg-opacity-5" style={{ height : '29%', minHeight : 180}}>
<img src={bg} alt="" className="w-4/5 h-3/4 absolute" style={{left : '8%'}} />
<h1 className="text-lg lg:text-2xl text-blueC0 absolute left-1/2 transform -translate-x-1/2 bottom-4 lg:bottom-6 font-semibold">
<h1 className="text-lg lg:text-2xl text-blue-500 absolute left-1/2 transform -translate-x-1/2 bottom-4 lg:bottom-6 font-semibold">
{title}
</h1>
</div>

@ -194,12 +194,6 @@ export const Address = ({
// style={{ minHeight: "calc(100vh - 500px)" }}
>
<div className="flex flex-col w-1/2 px-4">
<div
className="w-full overflow-hidden rounded-md mb-6"
style={{ height: "calc(100vh / 2)" }}
>
<ReverseMap setAddress={(val) => setMapAddress(val)} />
</div>
<Input
width="100%"
label={"ادرس انتخاب شده در نقشه"}
@ -210,6 +204,36 @@ export const Address = ({
align="text-right"
direction="rtl"
/>
<div
className="w-full overflow-hidden rounded-md mt-6"
style={{ height: "calc(100vh / 2)" }}
>
<ReverseMap setAddress={(val) => setMapAddress(val)} />
</div>
<div className="flex w-full items-end mt-8 flex-col">
<div className="flex flex-col items-cente w-2/5">
<Button
loading={loading}
title="ثبت آدرس"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={() => submit()}
/>
<button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
onClick={() => setPhase("deliveryForm")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button>
</div>
</div>
</div>
<div className="flex flex-col w-1/2 pl-4">
<Header
@ -300,30 +324,6 @@ export const Address = ({
direction="ltr"
maxLength={10}
/>
<div className="flex w-full items-end mt-8 flex-col">
<div className="flex flex-col items-cente w-2/5">
<Button
loading={loading}
title="ثبت آدرس"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={() => submit()}
/>
<button
className="bg-transparent mt-4 text-tiny text-blueC0 py-3 flex flex-row justify-center items-center"
onClick={() => setPhase("deliveryForm")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-4 transform rotate-90"
/>
</button>
</div>
</div>
</div>
{dialog.open && <Dialog dialog={dialog} />}
</div>

@ -8,7 +8,7 @@ import Button from "../../../components/Button";
//assets
import logoIcon from "../SignUp/assets/logo.svg";
import bgImage from "./bg.svg";
import arrowIcon from "./back.svg";
import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
export const Desktop = ({setHeaderOptions}) => {
const [phase, setPhase] = useState("manage");
@ -41,7 +41,7 @@ export const Desktop = ({setHeaderOptions}) => {
<Button
title="ثبت نام"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={() => setPhase("signup")}
@ -79,7 +79,7 @@ export const Desktop = ({setHeaderOptions}) => {
setPhase(() => (phase === "manage" ? navigate("/") : "manage"))
}
>
<img src={arrowIcon} />
<img src={arrowIcon} className="transform rotate-90" />
</button>
{phases[phase]}
</div>

@ -130,7 +130,7 @@ function SignUp({
useEffect(() => {
if (loginFlag) {
navigate("/");
// navigate("/");
}
}, [loginFlag]);
const light = theme === "light";
@ -164,7 +164,7 @@ function SignUp({
<Button
title="ادامه"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={(e) => checkPhoneNumber(e)}
@ -252,7 +252,7 @@ function SignUp({
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={(e) =>

@ -25,18 +25,18 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
const Ticket = ({}) => {
return (
<div className="flex flex-col flex-1">
<Input width="55%" label="نام شما" backgroundColor="bg-grayF9" />
<Input width="55%" label="شماره تماس" backgroundColor="bg-grayF9" />
<Input width="85%" label="موضوع" backgroundColor="bg-grayF9" />
<Input width="55%" label="نام شما" backgroundColor="" />
<Input width="55%" label="شماره تماس" backgroundColor="" />
<Input width="85%" label="موضوع" backgroundColor="" />
<Textarea
backgroundColor="bg-grayF9"
backgroundColor=""
placeholder="پیام خود را اینجا بنویسید"
/>
<br />
<Button
title="ارسال پیام"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%"
color={"text-white"}
selectable={true}

@ -40,30 +40,30 @@ function Address({ addresses, isDark, isMobile, setPhase }) {
</button>
) : (
<button
className={`flex flex-row border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${
className={`flex flex-row border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 gap-10 dark:bg-opacity-5 ${
activeAddress === address
? "bg-blueFD border-blueC0"
? "bg-blueC0 bg-opacity-5 border-blueC0"
: "bg-grayF9 border-gray45"
}`}
onClick={() => setActiveAddress(address)}
>
<div className="flex flex-row gap-3 flex-1">
<div className="flex flex-row flex-8 gap-4">
<Radio active={active} />
<div className="flex flex-1 flex-col">
<li className="text-right text-sm text-blue52 dark:text-white leading-4">
<div className="flex flex-col">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
آدرس:&nbsp;{address.address}
</li>
<li className="text-right text-sm text-blue52 dark:text-white mt-3">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3">
کد پستی:&nbsp;{address.postalCode}
</li>
</div>
</div>
<div className="flex flex-col">
<li className="text-right text-sm text-blue52 dark:text-white">
<div className="flex flex-col flex-5">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
نام تحویل گیرنده:&nbsp;{address.firstName + ' ' + address.lastName}
</li>
<li className="text-right text-sm text-blue52 dark:text-white mt-3">
<li className="text-right text-tiny leading-6 text-blue52 dark:text-white mt-3">
شماره تماس:&nbsp;{address.cellphone}
</li>
</div>

@ -34,24 +34,24 @@ function TransportDate({ transportDate, isDark, isMobile }) {
</button>
) : (
<button
className={`flex flex-col border border-solid items-center mx-1 px-3 py-4 rounded-md mt-4 relative transition-all duration-500 w-1/5 ${
className={`flex flex-col border border-solid items-center mx-1 px-3 py-4 rounded-md mt-4 relative transition-all duration-500 w-1/5 cursor-not-allowed ${
activeDate === time
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => setActiveDate(time)}
onClick={() => {}}
>
<strong
className={`text-sm transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52"
className={`text-tiny transition-all duration-500 dark:text-white ${
activeDate === time ? "text-green7B" : "text-blue52"
}`}
>
{time.time}
</strong>
{time.status === "completed" && (
<span
className={`text-xs transition-all duration-500 dark:text-white mt-1 ${
activeDate === time ? "text-blueC0" : "text-blue52"
className={`text-sm transition-all duration-500 dark:text-white mt-1 ${
activeDate === time ? "text-green7B" : "text-blue52"
}`}
>
تکمیل ظرفیت

@ -1,15 +1,32 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import separate from "../../../utils/separate";
import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
import { transport } from "../../../redux/actions";
import Loading from "../../../components/Loading";
function TransportMethod({
list,
isDark,
isMobile,
setTransport,
getList,
factorInfo,
userId,
loading,
}) {
const [activeMethod, setActiveMethod] = useState(list[0]);
useEffect(() => {
if (list.length === 0) {
getList();
}
}, []);
function TransportMethod({ transportMethods, isDark, isMobile }) {
const [activeMethod, setActiveMethod] = useState(transportMethods[0]);
const Method = ({ method }) => {
return isMobile ? (
<button
className={`flex flex-col border border-solid items-center w-full px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
activeMethod === method
factorInfo?.transportId === method?.id
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
@ -42,35 +59,50 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
) : (
<button
className={`flex flex-col border border-solid items-center px-2 py-3 rounded-md mt-4 relative transition-all duration-500 w-2/5 ${
activeMethod === method
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
factorInfo?.transportId === method?.id
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => setActiveMethod(method)}
onClick={() =>
factorInfo?.transportId !== method?.id
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
{}
)
: {}
}
>
{loading ? (
<Loading
size={4}
color={
factorInfo?.transportId === method?.id
? "bg-green-500"
: "bg-gray-500"
}
/>
) : (
<strong
className={`text-tiny transition-all duration-500 ${
activeMethod === method
? "text-blueC0 dark:text-white"
factorInfo?.transportId === method?.id
? "text-green7B dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
{method.name}
</strong>
)}
<span
className={`text-sm transition-all duration-500 mt-2 ${
activeMethod === method
? "text-blueC0 dark:text-white"
factorInfo?.transportId === method?.id
? "text-green7B dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
هزینه ارسال &nbsp; {method.cost}
هزینه ارسال &nbsp; {separate(method.price)}
</span>
<img
src={method.icon}
alt={method.name}
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/>
</button>
);
};
@ -80,7 +112,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
لطفا یک روش ارسال انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-col">
{transportMethods.map((method, index) => (
{list.map((method, index) => (
<Method method={method} key={index} />
))}
</ul>
@ -91,7 +123,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
لطفا یک روش ارسال انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap">
{transportMethods.map((method, index) => (
{list.map((method, index) => (
<Method method={method} key={index} />
))}
</ul>
@ -100,8 +132,17 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
}
const mapStateToProps = (state) => ({
list: state.transport.list,
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
factorInfo: state.userFactor.info,
userId: state.user.status?.id,
loading: state.transport.loading,
});
export default connect(mapStateToProps)(TransportMethod);
const mapDispatchToProps = {
getList: transport.list,
setTransport: transport.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);

@ -91,7 +91,7 @@ export const DeliveryForm = ({
<span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
2
</span>
<TransportMethod transportMethods={form.transportMethods} />
<TransportMethod />
</div>
<div className="w-full flex flex-row gap-5 mt-8">
<span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">

@ -2,23 +2,23 @@ import React from "react";
import { Link } from "react-router-dom";
//assets
import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg";
import arrowLeftWhite from "../../../assets/icons/dropdown-blue.svg";
function NotFound({ title, subTitle, link }) {
return (
<Link
to={link}
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 mt-4 self-end lg:self-auto lg:ml-1/2 w-full lg:w-auto"
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 bg-opacity-10 mt-4 self-end lg:self-auto lg:ml-1/2 w-full lg:w-auto"
>
<div className="flex flex-col w-full lg:w-full">
{title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
{title && <strong className="text-xs text-green4F text-opacity-70 lg:text-tiny">{title}</strong>}
<span
className={`text-xs text-white font-light lg:text-sm leading-5 ${title ? "mt-2 lg:mt-3" : ""}`}
className={`text-xs text-green4F font-light lg:text-sm text-opacity-70 leading-5 ${title ? "mt-2 lg:mt-3" : ""}`}
>
{subTitle}
</span>
</div>
<img src={arrowLeftWhite} alt="" className="w-7 lg:mr-6" />
<img src={arrowLeftWhite} alt="" className="w-6 lg:mr-6 transform rotate-90" />
</Link>
);
}

@ -1,20 +1,23 @@
import React, { useState } from "react";
function Qurestion({}) {
const [active, setActive] = useState(false);
//assets
import arrow from '../../../assets/icons/dropdown-blue.svg';
function Question({item, selectFaq}) {
return (
<div
onClick={() => setActive(() => !active)}
className="w-full flex flex-col my-1.5 rounded-sm px-4 py-3 bg-grayF9 dark:bg-opacity-5 lg:my-3 lg:py-5 cursor-pointer"
onClick={() => selectFaq(item.id)}
className="w-full flex flex-col my-1.5 lg:mt-4 rounded-sm px-4 py-3 bg-blueC0 bg-opacity-10 dark:bg-opacity-5 lg:my-3 lg:py-5 cursor-pointer shadow-md"
style={{
border: `1px ${!active ? "#DBDBDB99" : "#196EC0"} solid`
// border: `1px ${!item.active ? "#DBDBDB99" : "#196EC0"} solid`
// transition : 'all 0.5s'
}}
>
<div className="flex flex-row justify-between items-center">
<strong className="flex-1 text-blueC0 text-xs dark:text-white lg:text-sm font-medium">
نحوه خرید از سایت چگونه است ؟
<strong className="flex-1 text-green4F text-xs lg:text-tiny dark:text-white font-medium">
{item.title}
</strong>
<img src={arrow} alt="" />
</div>
<div
className={`w-full flex overflow-hidden`}
@ -23,22 +26,18 @@ function Qurestion({}) {
}}
>
<p
className={`text-right text-blueC0 text-xs dark:text-white lg:text-sm lg:leading-6 ${
active ? "h-auto opacity-100 pt-2" : "pt-0 h-0 opacity-0"
className={`text-right text-blueC0 lg:text-green4F text-xs dark:text-white lg:text-tiny lg:leading-6 ${
item.active ? "h-auto opacity-100 pt-2" : "pt-0 h-0 opacity-0"
}`}
style={{
transition: "all 0.5s",
}}
>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دستاندازی میکند پس
میزند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد
بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن
بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و
دلواپسی
{item.description}
</p>
</div>
</div>
);
}
export default Qurestion;
export default Question;

@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import { faq, publicApi } from "../../redux/actions";
import Header from "../Activation/components/Header";
import Question from "./components/Question";
@ -12,9 +12,10 @@ import faqBgImage from "./faq-bg.svg";
import desktopFaqBgImage from "./desktop-faq-bg.svg";
import searchLight from "../../assets/icons/search-light.svg";
function Faq({ headerOptions, setHeaderOptions, isMobile }) {
function Faq({ headerOptions, setHeaderOptions, isMobile, list, getList, selectFaq }) {
useEffect(() => {
setHeaderOptions(headerOptions);
getList();
}, []);
return (
<div
@ -36,8 +37,8 @@ function Faq({ headerOptions, setHeaderOptions, isMobile }) {
icon={searchLight}
/>
)}
{[0, 1, 2, 3, 4].map((item, index) => (
<Question key={index} />
{list?.map((item, index) => (
<Question key={index} item={item} selectFaq={selectFaq} />
))}
</div>
<div className="w-full flex flex-row lg:w-4/5 justify-end">
@ -54,9 +55,13 @@ function Faq({ headerOptions, setHeaderOptions, isMobile }) {
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
list : state.faq.list,
active : state.faq.active
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getList: faq.list,
selectFaq: faq.selectFaq
};
export default connect(mapStateToProps, mapDispatchToProps)(Faq);

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { book } from "../../../../redux/actions";
import { Carousel } from "@trendyol-js/react-carousel";
import arrow from "../../../../assets/icons/slider-arrow.svg";
import arrow from "../../../../assets/icons/dropdown-blue.svg";
import { Link } from "react-router-dom";
import Product from "../../../../components/Product";
import Button from "../../../../components/Button";
@ -26,25 +26,46 @@ const Part2 = ({ books, grades }) => {
>
<div className="w-full flex justify-between items-center mb-4">
<div className="flex items-center text-4xl font-black text-blue52">
<div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">کتاب های جدید</h1>
<div className="w-6 h-6 bg-greenDD ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">کتابهای جدید</h1>
</div>
<div>
<Link to="/products">
<Button
title="مشاهده لیست محصولات"
backgroundColor="bg-blue-100"
border={{
color: "#196EC055",
width: "0px",
}}
width="100%"
selectable={true}
color="text-blueC0"
onClick={() => null}
radius={false}
twPaddings="py-4 px-12 rounded"
<Link
to="/products"
className="py-3 px-4 rounded bg-grayF4 text-blue3D text-tiny flex flex-row items-center"
>
مشاهده بیشتر
<div className="transform rotate-90 translate-y-px mr-1">
<svg
id="vuesax_linear_arrow-down"
data-name="vuesax/linear/arrow-down"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<g id="arrow-down">
<path
id="Vector"
d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0"
transform="translate(4.08 8.95)"
fill="none"
stroke="#55A630"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,0H24V24H0Z"
transform="translate(24 24) rotate(180)"
fill="none"
opacity="0"
/>
</g>
</svg>
</div>
</Link>
</div>
</div>
@ -58,16 +79,18 @@ const Part2 = ({ books, grades }) => {
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
>

@ -2,7 +2,10 @@ import React from "react";
import Button from "../../../../components/Button";
import VodProduct from "../../../../components/VodProduct";
import { Link } from "react-router-dom";
//assets
import posterImage from "../../../../assets/images/poster.svg";
const Part4 = ({ books, grades }) => {
const videosData = [
{
@ -59,25 +62,46 @@ const Part4 = ({ books, grades }) => {
<div className="w-full my-6">
<div className="w-full flex justify-between items-center">
<div className="flex items-center text-4xl font-black text-blue52">
<div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">جدیدترین دوره های ویدیویی</h1>
<div className="w-6 h-6 bg-greenDD ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">جدیدترین دورههای ویدئویی</h1>
</div>
<div>
<Link to="/products">
<Button
title="مشاهده لیست محصولات"
backgroundColor="bg-blue-100"
border={{
color: "#196EC055",
width: "0px",
}}
width="100%"
selectable={true}
color="text-blueC0"
onClick={() => null}
radius={false}
twPaddings="py-4 px-12"
<Link
to="/products"
className="py-3 px-4 rounded bg-grayF4 text-blue3D text-tiny flex flex-row items-center"
>
مشاهده بیشتر
<div className="transform rotate-90 translate-y-px mr-1">
<svg
id="vuesax_linear_arrow-down"
data-name="vuesax/linear/arrow-down"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<g id="arrow-down">
<path
id="Vector"
d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0"
transform="translate(4.08 8.95)"
fill="none"
stroke="#55A630"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,0H24V24H0Z"
transform="translate(24 24) rotate(180)"
fill="none"
opacity="0"
/>
</g>
</svg>
</div>
</Link>
</div>
</div>
@ -86,7 +110,7 @@ const Part4 = ({ books, grades }) => {
style={{}}
>
<ul className="flex flex-wrap justify-center ">
{books.slice(0, 6).map((video, index) => (
{books?.slice(0,6)?.map((video, index) => (
<li
className={`flex flex-col border-solid border-gray-200 ${
index != 3 && index != 4 && index != 5 ? "border-b" : null

@ -3,11 +3,14 @@ import { connect } from "react-redux";
import { book, publicApi } from "../../../../redux/actions";
// import ScrollContainer from "react-indiana-drag-scroll";
import { Carousel } from "@trendyol-js/react-carousel";
import arrow from "../../../../assets/icons/slider-arrow.svg";
import arrow from "../../../../assets/icons/dropdown-blue.svg";
import { Link } from "react-router-dom";
import Product from "../../../../components/Product";
import "./index.css";
//assets
import bookImage from "../../../../assets/images/olum-1.svg";
const SalesContainer = ({ books }) => {
const [filter, setFilter] = useState({
search: "",
@ -20,9 +23,12 @@ const SalesContainer = ({ books }) => {
<div className="flex flex-row items-center pl-4">
{/* <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */}
<div className="text-3xl leading-normal">
<h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3>
<h3 className=" bg-blueC0 text-white text-center bold text-7xl">
{" "}
دوشنبه{" "}
</h3>
<h3
className="mr-4 text-center"
className="mr-4 text-center font-semibold px-2 transform -translate-x-4 text-7xl"
style={{ background: "#EFFF00" }}
>
{" "}
@ -31,11 +37,13 @@ const SalesContainer = ({ books }) => {
</div>
</div>
<div className="flex items-center">
<p className="text-md flex">بیش از ۵۰ کتاب تخفیف خورده&nbsp;</p>
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"></div>
<p className="text-md flex text-lg font-bold">
بیش از ۵۰ کتاب تخفیف خورده&nbsp;
</p>
<div className="w-6 h-6 bg-greenDD mr-4 rounded-full"></div>
</div>
<span className="flex-1 h-0.5 bg-gray-200 mr-10"></span>
<span className="flex-1 h-0.5 bg-gray-200 mr-2"></span>
</div>
{books.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}>
@ -47,7 +55,7 @@ const SalesContainer = ({ books }) => {
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
@ -55,7 +63,7 @@ const SalesContainer = ({ books }) => {
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}

@ -87,7 +87,6 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = {
getBooks: book.list,
gradeFilter: book.gradeFilter,
setHeaderOptions: publicApi.setHeaderOptions,
};

@ -11,16 +11,16 @@ export default function Book({ book }) {
style={{ width: 60, height: 90 }}
/>
<div className="flex flex-col mr-2">
<strong className="text-xs text-blue5 dark:text-white">علوم اجتماعی</strong>
<span className="mt-2 text-xs text-gray70 dark:text-greenBA">پایه دوم</span>
<span className="mt-1 text-xs text-blue5F dark:text-white">نسخه دیجیتال</span>
<strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">علوم اجتماعی</strong>
<span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">پایه دوم</span>
<span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">نسخه دیجیتال</span>
</div>
</div>
<div className="flex flex-row items-center">
<span className="py-1 px-2 rounded-sm text-blue52 text-sm bg-grayF9 dark:bg-gray-500 dark:text-white">
<span className="py-1 px-2 rounded-sm text-green4F2 text-sm lg:text-base bg-grayF9 dark:bg-gray-500 dark:text-white">
1
</span>
<div className="mr-3 text-blue52 text-xs dark:text-white">126.000 تومان</div>
<div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">126.000 تومان</div>
</div>
</div>
);

@ -24,13 +24,13 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
setHeaderOptions(headerOptions);
},[]);
return (
<div className="px-4 flex flex-col py-5">
<div className="flex flex-row w-full justify-between items-center p-3 bg-blueFF1 rounded-t-md dark:bg-blueC0 dark:bg-opacity-10">
<strong className="font-medium text-sm text-blue52 dark:text-white">
<div className="px-4 flex flex-col py-5 lg:pt-24 lg:w-3/5 lg:mx-auto">
<div className="flex flex-row w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 rounded-t-md dark:bg-blueC0 dark:bg-opacity-10">
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
{_.join(["شماره سفارش:", order.number], " ")}
</strong>
<div className="flex flex-row items-center">
<span className="text-xs font-light text-blue52 dark:text-white">
<span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
{status[order.status]}
</span>
<div
@ -39,31 +39,31 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
></div>
</div>
</div>
<div className="w-full flex flex-row py-4 border-b border-solid border-blueFF1 dark:border-gray45">
<strong className="text-xs text-blue5F dark:text-white">آدرس تحویل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<div className="w-full flex flex-row items-center py-4 border-b border-solid border-blueFF1 dark:border-gray45">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">آدرس تحویل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.address}
</span>
</div>
<div className="w-full flex flex-row justify-between py-0 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">مشخصات تحویل گیرنده:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">مشخصات تحویل گیرنده:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.name}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">شماره موبایل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">شماره موبایل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.cellphone}
</span>
</div>
</div>
<div className="w-full rounded-md flex flex-col p-4 mt-2 bg-blueFF1 dark:bg-blueC0 dark:bg-opacity-20 dark:border-blueC0 dark:border dark:border-solid">
<strong className="text-xs text-blue5F dark:text-white">
<div className="w-full rounded-md flex flex-col p-4 mt-2 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-20 dark:border-blueC0 dark:border dark:border-solid">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">
{_.join(["کد تحویل", order.receiveCode], " ")}
</strong>
<p className="font-light text-right mt-1 text-xs text-blue5F dark:text-white">
<p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
</p>
</div>
@ -74,50 +74,50 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">مبلغ سبد خرید:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">مبلغ سبد خرید:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.shoppingCardPrice, "تومان"], " ")}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">تخفیف:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">تخفیف:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.discountPrice, "تومان"], " ")}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white"> هزینه ارسال کالا:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> هزینه ارسال کالا:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.sendPrice, "تومان"], " ")}
</span>
</div>
<div className="flex flex-row py-4 border">
<strong className="text-xs text-blue5F dark:text-white">جمع هزینه پرداختی:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">جمع هزینه پرداختی:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{_.join([order.totalPrice, "تومان"], " ")}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">نحوه پرداخت:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">نحوه پرداخت:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.payMethod}
</span>
</div>
<div className="flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white"> شماره تراکنش:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white"> شماره تراکنش:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.transactionNumber}
</span>
</div>
</div>
<div className="w-full flex flex-row justify-between py-2">
<div className="w-full flex flex-row py-4">
<strong className="text-xs text-blue5F dark:text-white">تاریخ تحویل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs text-blue5F dark:text-white">
<strong className="text-xs lg:text-tiny text-green4F dark:text-white">تاریخ تحویل:</strong>
<span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
{order.date}
</span>
</div>

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import leftArrowIcon from "../assets/leftArrow.png";
import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
import _ from "lodash";
const colors = {
@ -20,13 +20,13 @@ const status = {
function Order({ order, isMobile }) {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueFF1 dark:border-bluec0 dark:border-opacity-10 lg:w-3/5 mx-auto">
<div className="flex flex-row w-full justify-between items-center p-3 bg-blueFF1 dark:bg-blueC0 dark:bg-opacity-10">
<strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
<div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-10 dark:border-blueC0 dark:border-opacity-10 lg:w-3/5 mx-auto">
<div className="flex flex-row w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10">
<strong className="font-medium text-sm lg:text-tiny text-green4F dark:text-white">
{_.join(["شماره سفارش:", order.number], " ")}
</strong>
<div className="flex flex-row items-center">
<span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
<span className="text-xs lg:text-tiny font-light text-green4F dark:text-white">
{status[order.status]}
</span>
<div
@ -83,7 +83,7 @@ function Order({ order, isMobile }) {
<div className="flex flex-col items-center mr-4">
<div className="hidden lg:flex w-full">
<div
className="py-4 rounded-md text-center text-xs dark:bg-gray-400 dark:text-white text-blue5 w-full"
className="py-4 rounded-md text-center text-sm dark:bg-gray-400 dark:text-white text-blue5 w-full"
style={{
fontFamily: "bold",
backgroundColor : '#F0FFF1'
@ -102,12 +102,13 @@ function Order({ order, isMobile }) {
</strong>
<Link
to="/orders/order"
className="rounded-md flex flex-row justify-center px-5 py-2.5 border border-solid border-blueC01 text-blueC0 bg-blueFF1"
className="rounded-md flex flex-row justify-center px-5 py-2.5 border border-solid border-blueC0 text-green4F bg-blueC0 bg-opacity-10"
>
جزئیات سفارش
<img
src={leftArrowIcon}
style={{ width: 18, height: 18, marginRight: 10 }}
style={{ width: 18}}
className="transform rotate-90"
/>
</Link>
<span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden">

@ -3,32 +3,15 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../../../redux/actions";
import proxy from "../../../../redux/proxy";
import location from "../../../../utils/location";
import Button from "../../../../components/Button";
import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating";
import AddToCartCard from "../../../../components/AddToCart";
import logo from "../../../../assets/images/user.png";
import ProductTab from "../../../../components/ProductTab";
import ProductImages from "../../../../components/ProductImage";
import ProductStatusCard from "../../../../components/ProductStatusCard";
import ProductSuggestions from "../../../../components/ProductSuggestion";
export const ProductOverAll = ({
productType,
getInfo,
book,
grades,
isDark,
userId,
pushToCart,
headerOptions,
setHeaderOptions,
loading,
}) => {
//assets
import arrow from "../../../../assets/icons/dropdown-blue.svg";
export const ProductOverAll = ({ book, grades, isDark, loading }) => {
const [type, setType] = useState("1");
return (
<div className="w-full">
@ -54,7 +37,7 @@ export const ProductOverAll = ({
<div className="py-4">
<div className="w-full flex items-center pb-2">
<h1 className="text-base font-bold">نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">
<p className=" text-xs px-4 text-blueC0">
به من کمک کن انتخاب کنم
</p>
</div>
@ -63,11 +46,11 @@ export const ProductOverAll = ({
title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
color: isDark ? "#ffffff55" : "#aaa",
width: "1px",
}}
width="38%"
color={isDark ? "text-white" : "text-blueC0"}
color={isDark ? "text-white" : "text-green7B"}
active={type === "1"}
selectable={true}
onClick={() => setType("1")}
@ -86,7 +69,7 @@ export const ProductOverAll = ({
width="38%"
selectable={true}
active={type === "0"}
color={isDark ? "text-white" : "text-blueC0"}
color={isDark ? "text-white" : "text-green7B"}
onClick={() => setType("0")}
borderType="dashed"
radius={false}
@ -104,20 +87,26 @@ export const ProductOverAll = ({
twPaddings="py-4 px-6"
color={isDark ? "text-white" : "font-bold text-red19"}
onClick={() => {}}
disabled={true}
/>
</div>
</div>
<div className="flex py-4">
<Link
to={"/videos/" + book?.id}
className="bg-blueFF1 text-blueC0 text-tiny rounded-sm border border-solid border-blueC0 w-2/3 py-4 text-center"
className="bg-blueC0 text-green7B bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-2/3 py-4 text-center flex flex-row items-center justify-center"
>
مشاهده دوره ویدیویی این محصول
<img src={arrow} alt="" className="mr-2 transform rotate-90 w-5" />
</Link>
</div>
</div>
<div className="flex flex-col w-1/3">
<ProductStatusCard price={book?.product[type]?.price} id={book?.product[type]?.id} loading={loading} />
<ProductStatusCard
price={book?.product[type]?.price}
id={book?.product[type]?.id}
loading={loading}
/>
</div>
</header>
</div>
@ -129,7 +118,7 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
loading : state.userProduct.loading
loading: state.userProduct.loading,
});
const mapDispatchToProps = {

@ -26,7 +26,7 @@ export const Product = ({
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
useEffect(() => {
getInfo({ id: location.getId() });
getInfo({ id: location.getId(), vod : true });
setHeaderOptions(headerOptions);
if (!isMobile) {
window.addEventListener("scroll", () => {

@ -157,7 +157,7 @@ export const Products = ({
<div
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`}
>
<div className="w-11/12 flex flex-row gap-5">
<div className="w-11/12 flex flex-row gap-5 justify-end">
<Sidebar onChange={onChange} />
<Main
filter={filter}

@ -8,120 +8,202 @@ import Product from "../../../components/Product";
import VodProduct from "../../../components/VodProduct";
import { book, publicApi, product } from "../../../redux/actions";
import posterImage from "../../../assets/images/poster.svg";
import arrow from "../../../assets/icons/slider-arrow.svg";
import arrow from "../../../assets/icons/dropdown-blue.svg";
export const Main = ({
books,
grades,
gradeFilter,
selectedGrade,
gradeFilterBooks,
setHeaderOptions,
headerOptions,
videos,
filter,
sortMethods,
filterOptions,
}) => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const filteringNavItems = [
{
title: "بیشترین بازدید",
},
{
title: "پرفروش ترین",
},
{
title: "کمترین قیمت",
},
{
title: "بیشترین قیمت",
},
{
title: "محبوب ترین",
},
];
const Items = (type) => {
const { grade, subject, available, sort, productType } = filterOptions;
let byGradeFilter;
let bySubjectFilter;
let byAvailableFilter;
if (grade) {
byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade);
} else {
byGradeFilter = books;
}
if (subject) {
bySubjectFilter = byGradeFilter?.filter(
(book) => book?.product[type]?.name?.indexOf(subject) !== -1
);
} else {
bySubjectFilter = byGradeFilter;
}
if (available) {
byAvailableFilter = bySubjectFilter?.filter(
(book) => book.product[type].price
);
} else {
byAvailableFilter = bySubjectFilter;
}
return type === 2
? byAvailableFilter?.map((item, index) => (
<VodProduct
video={item}
key={index}
index={index}
height={"calc(100vh / 5)"}
grades={grades}
/>
))
: byAvailableFilter?.map((product, index) => (
<>
{(productType ? productType === "کتاب دیجیتال" : true) && (
<Link
to={"/products/" + product?.id}
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5"
>
<Product
key={index}
product={product}
index={Number(index)}
grades={grades}
imageSize={4.5}
type={0}
/>
</Link>
)}
{(productType ? productType === "کتاب فیزیکی" : true) && (
<Link
to={"/products/" + product?.id}
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5"
>
<Product
key={index}
product={product}
index={Number(index)}
grades={grades}
imageSize={4.5}
type={1}
/>
</Link>
)}
</>
));
};
return (
<div className="flex flex-col w-3/4 p-4 pb-20">
<div className="flex flex-col w-3/4 p-4 pb-20 min-h-screen">
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
<div className="flex text-xs items-center mx-4">
<img src={filterIcon} />
<span>مرتب سازی بر اساس</span>
<div className="flex text-sm items-center mx-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g
id="vuesax_linear_filter-tick"
data-name="vuesax/linear/filter-tick"
transform="translate(-620 -700)"
>
<g id="filter-tick">
<path
id="Vector"
d="M9.5,4.75A4.678,4.678,0,0,1,8.82,7.2,4.735,4.735,0,0,1,4.75,9.5a4.62,4.62,0,0,1-2.56-.77A4.481,4.481,0,0,1,.69,7.2,4.686,4.686,0,0,1,0,4.75,4.754,4.754,0,0,1,4.75,0,4.421,4.421,0,0,1,5.79.12,4.74,4.74,0,0,1,9.5,4.75Z"
transform="translate(632.13 710)"
fill="none"
stroke="rgba(6, 186, 206"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,1.17,1.17,2.34,3.7,0"
transform="translate(635.03 713.58)"
fill="none"
stroke="rgba(6, 186, 206"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H24V24H0Z"
transform="translate(644 724) rotate(180)"
fill="none"
opacity="0"
/>
<g id="Group">
<path
id="Vector-4"
data-name="Vector"
d="M17.38,2.02V4.24a3.825,3.825,0,0,1-1.01,2.33L14.61,8.12A4.421,4.421,0,0,0,13.57,8a4.754,4.754,0,0,0-4.75,4.75,4.686,4.686,0,0,0,.69,2.45,4.481,4.481,0,0,0,1.5,1.53v.34a2.23,2.23,0,0,1-.91,1.72l-1.41.91a2.058,2.058,0,0,1-3.13-1.72V12.63a3.91,3.91,0,0,0-.81-2.12L.91,6.47A3.407,3.407,0,0,1,0,4.45V2.12A2.051,2.051,0,0,1,2.02,0H15.36A2.027,2.027,0,0,1,17.38,2.02Z"
transform="translate(623.31 702)"
fill="none"
stroke="rgba(6, 186, 206"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</g>
</g>
</g>
</svg>
<span className="text-tiny text-greenBA font-bold">
{"مرتب سازی" + "" + ":"}
</span>
</div>
<ul className="flex justify-between w-3/4 px-4 py-0 ">
{filteringNavItems.map((e) => (
<ul className="flex py-0 flex-1 gap-4">
{sortMethods.map((item) => (
<li
className="text-sm rounded py-2 px-6 transition-all duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer"
className="text-sm rounded py-2 px-3 transition-all duration-700 hover:bg-greenBA hover:bg-opacity-5 hover:text-greenBA cursor-pointer"
onClick={() => console.log("a")}
>
{e.title}
{item}
</li>
))}
</ul>
</div>
{books?.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}>
{books?.length > 0 &&
(filterOptions?.productType
? filterOptions.productType === "دوره ویدئویی"
: true) && (
<div className="relative " style={{ direction: "ltr" }}>
<Carousel
show={Math.round(window.innerWidth / 500)}
slide={2}
swiping={true}
useArrowKeys={true}
infinite={true}
transition={0.5}
className="flex flex-row"
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
src={arrow}
alt=""
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
/>
}
>
{books?.map((video, index) => (
<VodProduct
video={video}
key={index}
index={index}
height={"calc(100vh / 5)"}
grades={grades}
/>
))}
{Items(2)}
</Carousel>
</div>
)}
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-evenly">
{selectedGrade
? gradeFilterBooks?.map((product, index) => (
<Product
key={index}
product={product}
index={Number(index)}
grades={grades}
imageSize={4.5}
/>
))
: books?.map((product, index) => (
<Link
to={"/products/" + product?.id}
className="w-full lg:w-1/3 xl:w-1/4 2xl:w-1/5"
>
<Product
product={product}
index={Number(index)}
imageSize={4.5}
grades={grades}
/>
</Link>
))}
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
{Items(1)}
</div>
</div>
);
@ -134,11 +216,13 @@ Main.defaultProps = {
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
sortMethods: state.book.sortMethods,
filterOptions: state.book.filterOptions,
filterResult: state.book.filterResult,
});
const mapDispatchToProps = {
getList: book.list,
gradeFilter: book.gradeFilter,
setHeaderOptions: publicApi.setHeaderOptions,
};

@ -1,36 +1,131 @@
import React from "react";
import React, { useState, useMemo } from "react";
import { connect } from "react-redux";
import { book } from "../../../redux/actions";
import Checkbox from "../../../components/Checkbox";
import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
export const Sidebar = ({ onChange, grades }) => {
const categories = [
"کتاب فیزیکی",
"کتاب دیجیتال",
"دوره ویدیویی",
"بسته های آموزشی",
];
import Switch from "../../../components/Switch";
//assets
import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
export const Sidebar = ({
onChange,
levels,
subjects,
productTypes,
setFilterOptions,
filterOptions,
}) => {
const [toggleList, setToggleList] = useState({
subject: false,
grade: false,
productType: false,
});
const Dropdown = ({ list, title, name, active }) => {
return (
<div className="flex flex-col w-1/4 p-4">
<VerticalExpandableProductFilter
onChange={onChange}
<div className="flex flex-col">
<div
className="flex flex-row justify-between items-center py-5 cursor-pointer"
onClick={() =>
setToggleList({ ...toggleList, [name]: !toggleList[name] })
}
>
<strong className="font-semibold text-tiny text-green4F">
{title}
</strong>
<img
src={dropdownIcon}
alt=""
className={`w-4 transform transition-all ${
toggleList[name] ? "rotate-180" : ""
}`}
/>
</div>
<ul
className={`list-none p-0 mt-2 mb-0 mx-0 flex overflow-x-hidden flex-col transition-all`}
style={{
maxHeight: !toggleList[name] ? 0 : "calc(100vh / 2.2)",
overflowY: !toggleList[name] ? "hidden" : "scroll",
}}
>
{list.map((item, index) => (
<li
key={index}
className="flex flex-row items-center mb-3"
onClick={() =>
active !== item
? setFilterOptions({ ...filterOptions, [name]: item })
: setFilterOptions({ ...filterOptions, [name]: null })
}
>
<Checkbox checked={active === item} />
<span className="text-tiny font-medium">{item}</span>
</li>
))}
</ul>
</div>
);
};
const CkeckItem = ({ title, name }) => {
return (
<div
className="flex flex-row justify-between items-center py-4"
onClick={() =>
setFilterOptions({
...filterOptions,
[name]: !filterOptions.available,
})
}
>
<span className="font-semibold text-tiny text-green4F">{title}</span>
<Switch checked={filterOptions.available} />
</div>
);
};
return (
<div
className="flex flex-col w-1/4 px-4 pt-5 pb-2 bg-gray-50 transform translate-y-5 border border-solid border-gray-200 rounded-md"
style={{
height: "fit-content",
}}
>
<strong className="text-lg text-green4F mb-10">فیلترها</strong>
<div className="flex flex-col divide-y divide-solid divide-gray-200">
<Dropdown
list={productTypes}
title="نوع محصول"
name="productType"
active={filterOptions.productType}
/>
<Dropdown
list={Object.values(levels)}
title={"پایه تحصیلی"}
name="grade"
list={Object.values(grades)}
title="پایه تحصیلی"
active={filterOptions.grade}
/>
<VerticalExpandableProductFilter
name="category"
list={categories}
title="دسته بندی"
<Dropdown
list={subjects}
title={"عنوان کتاب"}
name="subject"
active={filterOptions.subject}
/>
<CkeckItem title="فقط کالاهای موجود" name={"available"} />
</div>
</div>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
levels: state.book.levels,
subjects: state.book.subjects,
productTypes: state.book.productTypes,
filterOptions: state.book.filterOptions,
});
const mapDispatchToProps = {};
const mapDispatchToProps = {
setFilterOptions: book.setFilterOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

@ -1,4 +1,4 @@
import React from "react";
import React, {useState} from "react";
import { connect } from "react-redux";
import { userProduct } from "../../../redux/actions";
import separate from "../../../utils/separate";
@ -119,7 +119,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
</div>
<div className="w-1/4 flex flex-row items-center">
<button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg ffont-bold"
onClick={() =>
pushToCart({
productId: product?.productId,
@ -130,7 +130,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
>
+
</button>
<span className="mx-2.5 font-semibold text-lg text-blueC0 w-8 flex justify-center">
<span className="mx-2.5 font-semibold text-lg text-green4F w-8 flex justify-center">
{loading ? <Loading size={2} color="bg-green-500" /> : product.count}
</span>
{
@ -154,7 +154,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
/>
) : (
<button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0 text-lg"
className="rounded-md pt-2 pb-1.5 font-bold px-3.5 border border-solid border-blueC0 text-blueC0 dark:border-blueC0 dark:text-blueC0 text-lg"
onClick={() =>
pushToCart({
productId: product?.productId,

@ -94,19 +94,19 @@ function ShoppingCart({
</div>
) : (
<div className="w-full flex flex-row justify-between py-4">
<strong className="font-light text-tiny dark:text-white text-blue5F">
<strong className="font-semibold text-tiny dark:text-white text-blue5F">
{name}
</strong>
<span
className="font-medium text-lg dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
color: !isDark ? (type === "error" ? "#F1420D" : "rgb(6, 186, 206)") : "",
}}
>
{separate(value)}
<span
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
}}
className="text-sm mr-2"
>
@ -185,34 +185,34 @@ function ShoppingCart({
<div className="flex flex-col flex-1">{layouts[phase]}</div>
{phase !== "address" && (
<div
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
className="flex flex-col w-1/4 p-10 bg-white shadow-all rounded-md px-4 py-4"
style={{ height: "fit-content", minWidth: 350}}
>
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
<PriceStatus
name="مبلغ سبد خرید"
value={productsLength ? factorInfo?.sumPrice : 0}
value={productsLength ? factorInfo?.sumPrice : 384000}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={productsLength ? factorInfo?.offPrice : 0}
value={productsLength ? factorInfo?.offPrice : 384000}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={
productsLength ? Math.floor(factorInfo?.sumPrice * 0.009) : 0
productsLength ? Math.floor(factorInfo?.sumPrice * 0.009) : 384000
}
type="error"
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
<strong className="font-medium text-tiny text-blue5F dark:text-white">
<strong className="font-semibold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xl dark:text-white">
{separate(productsLength ? factorInfo?.payPrice : 0)}
<p className="font-medium text-greenBA text-lg dark:text-white">
{separate(productsLength ? factorInfo?.payPrice : 384000)}
<span className="font-medium text-greenBA text-sm mr-2">
تومان
</span>
@ -220,11 +220,11 @@ function ShoppingCart({
</div>
{phase === "products" && (
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-5 mb-4"
style={{ backgroundColor: "#DEFFF188" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
<p className="text-xs text-green71 dark:text-white text-justify font-medium">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
@ -258,7 +258,7 @@ function ShoppingCart({
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={next[phase]}
@ -266,7 +266,7 @@ function ShoppingCart({
/>
{phase === "deliveryForm" && (
<button
className="bg-transparent mt-4 text-tiny text-blueC0 py-3 flex flex-row justify-center items-center"
className="bg-transparent mt-4 text-tiny border border-solid border-blueC0 text-green7B rounded-full py-3 flex flex-row justify-center items-center"
onClick={() => setPhase("products")}
>
بازگشت

@ -15,14 +15,17 @@ const Table = ({ specifications }) => {
return (
<ul className="w-full">
{Object.keys(specifications).map((specification, index) => (
<li className="flex my-3">
<li className="flex my-3 cursor-pointer group">
<div
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm"
className=" bg-grayF9 rounded px-3 py-4 ml-2 text-greenBA text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10"
style={{ flex: 2 }}
>
{persian[specification]}
</div>
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}>
<div
className="bg-grayF9 rounded px-3 py-4 text-sm group-hover:bg-blueC0 group-hover:bg-opacity-10"
style={{ flex: 8 }}
>
{specifications[specification]}
</div>
</li>

@ -18,45 +18,14 @@ const Videos = ({ videos }) => {
}, [videos]);
return (
<div className="flex flex-row gap-5">
<div
className="flex flex-col items-start justify-between"
// style={{ height: "calc(100vh / 2 * 9 / 16)" }}
>
{list?.slice(0, 4).map((video, index) => (
<div
className={`relative rounded-md flex justify-center items-center ${activeVideo === video ? 'bg-green-200' : 'bg-gray-200'}`}
style={{
width: "calc(100vh / 5.5 - 8px)",
height: "calc(100vh / 5.5 - 8px)",
}}
key={index}
>
<img
key={index}
src={`https://dnvn.ir/api/v1/file/${video}`}
alt=""
className={`rounded-sm w-full h-full`}
style={{
width: "calc(100vh / 5.5 * 2 / 3 - 12px)",
height: "calc(100vh / 5.5 - 20px)",
}}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {videos.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img
<div className="flex flex-row w-full bg-gray-300" style={{height : 'calc(100vh / 1.5)'}}>
{/* <img
src={productImg}
alt=""
style={{ height: "calc(100vh * 9 / 16)", width: "calc(100vh)" }}
style={{ height: "calc(100vh)", width: "w-full" }}
className="rounded-md"
/>
/> */}
</div>
);
};

@ -81,7 +81,7 @@ const Season = ({
// }
>
<div className="flex items-center justify-between w-full">
<h5>{unit.name}</h5>
<h5 className="text-tiny text-green7B">{unit.name}</h5>
<div className="flex items-center gap-4">
<Link
to={
@ -91,9 +91,9 @@ const Season = ({
}
className={`bg-white border border-solid ${
Number(index) === 0
? "border-blue-300 text-blueC0"
: "border-gray-300 text-gray70"
} py-2.5 w-24 text-center text-tiny rounded-sm shadow-sm`}
? "border-green-300 text-greenBA"
: "border-gray-300 text-gray70 cursor-not-allowed"
} py-2.5 w-24 text-center text-tiny rounded-sm shadow-md`}
onClick={() => setCategory(season[0].categoryId, unit.name)}
>
{Number(index) === 0 ? "تماشا" : "قفل"}
@ -128,12 +128,12 @@ const Season = ({
season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div>
) : (
<li className="w-full flex flex-col bg-blueFF1 rounded-md overflow-hidden shadow-md">
<li className="w-full flex flex-col bg-blueC0 bg-opacity-10 rounded-md overflow-hidden shadow-md">
<header
className="w-full flex flex-row justify-between items-center py-3 px-6"
onClick={() => toggle(season[0].categoryId)}
>
<strong className="text-tiny text-blueC0 font-medium">
<strong className="text-tiny text-green7B font-medium">
{
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
@ -148,7 +148,7 @@ const Season = ({
/>
</header>
<ul
className={`w-full flex flex-col px-4 divide-y-2 divide-solid transform origin-bottom transition-all divide-blue-100 overflow-hidden`}
className={`w-full flex flex-col px-4 divide-y-2 divide-solid transform origin-bottom transition-all divide-green-100 overflow-hidden`}
style={{
height: isMobile
? "auto"

@ -1,9 +1,10 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import {toast} from 'react-toastify';
import { toast } from "react-toastify";
import { Link } from "react-router-dom";
import { publicApi, userProduct } from "../../redux/actions";
import location from "../../utils/location";
import separate from "../../utils/separate";
import Divider from "../../components/Divider";
import Season from "./components/Season";
import Videos from "./components/Desktop/Videos";
@ -15,6 +16,7 @@ import Table from "./components/Desktop/Table";
//assets
import poster from "../../assets/images/poster.svg";
import tickIcon from "../../components/ProductStatusCard/tick-circle.svg";
import arrow from "../../assets/icons/dropdown-blue.svg";
function Video({
isLogin,
@ -68,7 +70,7 @@ function Video({
const [type, setType] = useState(0);
useEffect(() => {
getBook({ bookId: location.getId() });
getBook({ bookId: location.getId() }, { id: location.getId(), vod: true });
setHeaderOptions(headerOptions);
}, []);
return isMobile ? (
@ -113,6 +115,7 @@ function Video({
<header className="w-full flex flex-row gap-12">
<div className="w-9/12">
<Videos videos={book?.fileIds} />
{seasons?.length > 0 && (
<ProductTab
tabs={[
{
@ -131,19 +134,28 @@ function Video({
},
{
title: "نقد و بررسی",
components: "",
components: (
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
این بخش فعلا قابل دسترسی نیست.
</div>
),
},
{
title: "پرسش و پاسخ",
components: "",
components: (
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
این بخش فعلا قابل دسترسی نیست.
</div>
),
},
]}
/>
)}
</div>
<div className="w-3/12 flex flex-col">
<div className="w-full flex flex-col pr-2 py-2 border-0">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{'دوره ویدئویی' + ' ' + book?.name}
{"دوره ویدئویی" + " " + book?.name}
</h1>
<div className="text-blueC0 text-sm dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
@ -166,7 +178,9 @@ function Video({
</div>
<div className="flex flex-col w-full py-4 px-4">
<div className="flex flex-row items-center justify-center gap-2">
<strong className="text-blueC0 text-xl">{book?.price}</strong>
<strong className="text-blueC0 text-xl">
{separate(book?.price)}
</strong>
<span className="text-sm text-gray-500">تومان</span>
</div>
<p className="text-gray-500 text-xs text-center mt-2 mb-4">
@ -177,7 +191,7 @@ function Video({
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
width: "0px",
}}
width="100%"
color={"text-white"}
@ -196,9 +210,10 @@ function Video({
</div>
<Link
to={"/products/" + book?.id}
className="bg-blueFF1 text-blueC0 text-sm rounded-md border border-solid border-blueC01 w-full py-4 text-center"
className="bg-blueC0 text-green7B bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-full py-4 text-center flex flex-row items-center justify-center"
>
مشاهده کتاب این محصول
<img src={arrow} alt="" className="mr-2 transform rotate-90 w-5" />
</Link>
</div>
</header>
@ -209,7 +224,7 @@ function Video({
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
isDark: state.publicApi.isDark,
book: state.publicApi.bookInfo,
book: state.book.info?.product[2],
seasons: state.publicApi.categories,
grades: state.publicApi.grades,
isLogin: state.user.status,

@ -59,7 +59,7 @@ function VideoDisplay({
8,
window.location.pathname.lastIndexOf("/")
);
getBook({bookId : id});
getBook({bookId : id}, {id});
setHeaderOptions(headerOptions);
const cat = localStorage.getItem("season")?.split(",");
getSeason({ bookId: cat[0], categoryId: cat[1] });

@ -4,8 +4,8 @@ module.exports = {
theme: {
backgroundColor: (theme) => ({
...theme("colors"),
blueC0: "#196EC0", //در سبد خرید - دکمه ادامه فرآیند
blueB0: "#517AB0", // صفحه هوم دسکتاپ - زیر اسلایدر متن لیست محصولات
blueC0: "#12CF7F", //در سبد خرید - دکمه ادامه فرآیند
blueB0: "#000000", // صفحه هوم دسکتاپ - زیر اسلایدر متن لیست محصولات
blue90: "#235A90", // نقطه های مشخص کننده صفحه در دسکتاپ انیمیشن حالت خاموش
blueCB: "#98B2CB", // صفحه فعال سازی کتاب دیجیتال دکمه فعال سازی با کد QR
blueEB: "#2B8DEB", // نوار پروگرس مقدار داخلی که داره پر میشه
@ -19,37 +19,43 @@ module.exports = {
red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
yellow2: "#FDFFDA", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن پس زمینه لینک ها
yellow3: "#EFFF00", // خط زیر متن یادگیری در دیزاین موبایل پابلیک صفحه هوم
gray36: "#363636", // در حالت دارک صفحه موبایل پس زمینه دکمه های کیو آر و ای آز در هدر
gray36: "#52796f", // در حالت دارک صفحه موبایل پس زمینه دکمه های کیو آر و ای آز در هدر
orange1: "#FF6600", // خط زیر متن کنارتونیم در دیزاین موبایل پابلیک صفحه هوم
greenBA: "#06BACE", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
greenBA: "#06BAC0", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
green1: "#00FF80", // خط زیر متن یادگیری جذاب در دیزاین موبایل پابلیک صفحه هوم
gray20: "#202020", // هیچ جا
gray2077: "#20202077", // در صفحه محصولات حالت دارک صفحه محصولات پس زمینه سرچ
gray2077: "#2F3E46", // در صفحه محصولات حالت دارک صفحه محصولات پس زمینه سرچ
gray2C: "#2C2C2C", // هیچ جا
gray50: "#505050", // در صفحه اسکن کیو آر رنگ پس زمینه ی روی عکس
gray50: "#99D98C", // در صفحه اسکن کیو آر رنگ پس زمینه ی روی عکس
grayE3: "#E3E3E3", // رنگ پس زمینه لپ تاپ در صفحه هوم موبایل که نشون دهنده ریسپانسیو بودن سایت ماست
grayEE: "#EEEEEE", // رنگ پس زمینه موبایل در صفحه هوم موبایل که نشون دهنده ریسپانسیو بودن سایت ماس
grayEE: "#76C893", // رنگ پس زمینه موبایل در صفحه هوم موبایل که نشون دهنده ریسپانسیو بودن سایت ماس
grayF9: "#F9F9F9", // رنگ پس زمینه قیمت محصول و گارنتی و فلان در سبد خرید
grayF4: "#EBF0F4", // در صفحه محصولات رنگ پس زمینه عکس کتاب
grayF7: "#F7F7F7" // رنگ پس زمینه باکس اضافه کردن به سبد خرید در صفحه محصول
grayF4: "#DEFFF1", // در صفحه محصولات رنگ پس زمینه عکس کتاب
grayF7: "#12cf7f",
greenDD: '#D5DDBC', // رنگ پس زمینه باکس اضافه کردن به سبد خرید در صفحه محصول
greenD8: '#F8F9FA',
greenF1 : '#9CF1FA',
}),
textColor: (theme) => ({
...theme("colors"),
primary: "#235A90",
blueC0: "#196EC0", //در سبد خرید - دکمه ادامه فرآیند
blueC0: "#12CF7F", //در سبد خرید - دکمه ادامه فرآیند
blueC01: "#1999C0", // هیچ جا
blueE8: "#2E81E8", // در صفحه محصول متن به من کمک کن انتخاب کنم
blue52: "#132F52", // در باکس اضافه کردن به سبد خرید رنگ متن با خرید این محصول فلان تومن سود کن
blue5F: "#05335F", // رنگ لینکها در هدر بالای سایت
blueE8: "#52796F", // در صفحه محصول متن به من کمک کن انتخاب کنم
blue52: "#354F52", // در باکس اضافه کردن به سبد خرید رنگ متن با خرید این محصول فلان تومن سود کن
blue5F: "#2F3E46", // رنگ لینکها در هدر بالای سایت
blueB9: "#86A0B9", // در موبایل تب پایین صفحه رنگ متن صفحات
blue3D: '14213D',
green71: "#067182", // در دسکتاپ انیمیشن قسمت برگزاری آزمون تکست زمان بافیمانده
greenBA: "#06BACE", // در سرچ اصلی سایت رنگ تکست تایتل محصولات و صفحات
red5F: "#5F1A05", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن متن پی دی اف
red5F: "#5F1A05", // در انیمیشن موبایل که میاد کد رو اسکن کنه نتیجه اسکن متن پی دی اف,
green4F: '#354F52',
red19: "#C01919", // در صفحه محصول رنگ متن مشاهده نمونه
yellow1: "#5F5F05", // در انیمیشن موبایل که برای اسکن کد میاد نتیجه اسکن رنگ متن لینک ه
gray1: "#333333", // رنگ متن سرچ در صفحه محصولات موبایل
gray70: "#707070", // رنگ متن تایتل لیست لینک ها در فوتر سایت
grayDB: "#DBDBDB", // در دراور موبایل رنگ متن شماره موبایل کاربر در حالت دارک
green7B: '#137B4F'
}),
// height: (theme) =>( {
// sm: '8px',
@ -61,14 +67,15 @@ module.exports = {
// }),
borderColor: (theme) => ({
...theme("colors"),
blueC0: "#196EC0",
blueC0: "#12CF7F",
blueC01: "#1999C0",
blueFE: "#C1E0FE",
blueFE: "#E8FCFF",
blueFF1: "#E9F0FF",
blueB9: '#86A0B9',
grayDB: "#DBDBDB",
gray45: "#454545",
red19: "#C01919",
greenB9: '#80B918'
}),
fill: (theme) => ({

Loading…
Cancel
Save