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. 20
      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. 32
      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. 34
      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. 8
      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. 99
      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. 63
      src/views/Home/Desktop/Part2/index.js
  49. 60
      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. 268
      src/views/Products/layouts/Main.js
  59. 143
      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. 81
      src/views/Video/index.js
  66. 2
      src/views/VideoDisplay/index.js
  67. 39
      tailwind.config.js

@ -22,6 +22,20 @@
display: none; 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-face {
font-family: Black; font-family: Black;
src: url("./assets/font/IranSansX/Farsi/Black.ttf"); 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"> <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="vuesax_linear_info-circle" data-name="vuesax/linear/info-circle" transform="translate(-364 -252)">
<g id="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" 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="#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="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="#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="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"/> <path id="Vector-4" data-name="Vector" d="M0,0H19V19H0Z" fill="none" opacity="0"/>
</g> </g>
</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"> <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"> <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"/> <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 516 B

After

Width:  |  Height:  |  Size: 525 B

@ -13,28 +13,32 @@ export default function Button({
active, active,
borderType, borderType,
loading, loading,
disabled,
}) { }) {
return ( return (
<button <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 ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${ } ${selectable ? (active ? "text-green7B" : color) : color} ${
selectable ? (active ? "bg-blue-100" : bgOpacity) : bgOpacity selectable ? (active ? "bg-blueC0 bg-opacity-5" : bgOpacity) : bgOpacity
} `} } `}
style={{ style={{
border: `${ border: `${
selectable ? (active ? "2px" : border.width) : border.width selectable ? (active ? "2px" : border.width) : border.width
} ${borderType ? borderType : 'solid'} ${ } ${borderType ? borderType : "solid"} ${
selectable ? (active ? "#196EC0" : border.color) : border.color selectable ? (active ? "#12CF7F" : border.color) : border.color
}`, }`,
width: width, width: width,
}} }}
onClick={() => onClick()} onClick={() => onClick()}
> >
{loading ? <Loading size={2} color="bg-green-500" /> : title} {loading ? <Loading size={2} color="bg-green-500" /> : title}
</button> </button>
); );
} }
Button.defaultProps = {
color: "",
};

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

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

@ -26,35 +26,43 @@ const CourseChapter = ({
}; };
return ( return (
<section <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={{ style={{
width: "calc(100% / 12 * 3.5)", minWidth: "calc(100% / 12 * 3.5)",
height: "calc(100vh - 300px)", height: "calc(100vh - 300px)",
}} }}
> >
<div className="flex flex-row w-full items-center justify-between"> <div className="flex flex-row w-full items-center justify-between">
<div> <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>
<div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2"> <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-green7B text-sm px-2">{book?.name}</span>
<span className="text-blue-800 text-sm px-2"> <span className="text-green7B text-sm px-2">
{"پایه" + " " + grades[book?.gradeId]} {"پایه" + " " + grades[book?.gradeId]}
</span> </span>
</div> </div>
</div> </div>
<span className="w-full h-px bg-blue-200 my-4"></span> <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="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"> <div className="bg-blueC0 rounded-sm p-4 flex flex-row items-center justify-between mb-2">
{/* <p className="text-sm text-white"> <p className="text-tiny font-bold text-white">
{(seasons.length > 0 && playList.length > 0) && {seasons?.length > 0 &&
playList?.length > 0 &&
seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0] seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0]
?.name} ?.name}
</p> */} </p>
{/* <span className="text-sm text-white">{video?.duration}</span> */} {/* <span className="text-sm text-white">{video?.duration}</span> */}
</div> </div>
{playList?.map((video, index) => ( {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 <div
className="flex flex-row items-center justify-around" className="flex flex-row items-center justify-around"
key={index} 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 className={`w-full bg-white flex flex-col transition duration-400 hover:scale-95 shadow-md transform rounded-md
${ ${
selectedVideo?.id === video?.id selectedVideo?.id === video?.id
? "bg-blue-600 text-white-700" ? "bg-blueC0 text-white"
: "text-blue-500" : "text-blueC0"
} }
`} `}
onClick={() => onClick={() =>
@ -96,19 +104,19 @@ const CourseChapter = ({
disabled={true} disabled={true}
> >
{/* top */} {/* 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 <p
className={`text-tiny className={`text-tiny font-bold
${selectedVideo?.id === video?.id ? "text-white" : ""}`} ${selectedVideo?.id === video?.id ? "text-white" : ""}`}
> >
{video?.name} {video?.name}
</p> </p>
<span <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 selectedVideo?.id === video?.id
? "text-white" ? "text-white"
: "text-blue-500" : "text-blueC0"
}`} }`}
> >
{duration(video?.duration)} {duration(video?.duration)}
@ -122,14 +130,14 @@ const CourseChapter = ({
></div> ></div>
{/* bottom */} {/* bottom */}
<span <span
className={`text-tiny text-center p-3 className={`text-tiny text-center font-medium p-3
${ ${
selectedVideo?.id === video?.id selectedVideo?.id === video?.id
? "text-white" ? "text-white"
: "text-blue-500" : "text-blueC0"
}`} }`}
> >
پخش {selectedVideo?.id === video?.id ? "در حال پخش" : "پخش"}
</span> </span>
</div> </div>
</div> </div>

@ -1,8 +1,8 @@
import React from "react"; import React, { useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import _ from "lodash"; 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 callIcon from "../../assets/icons/vuesax-linear-call-calling.svg";
import samandehi from "./samandehi-pic.svg"; import samandehi from "./samandehi-pic.svg";
import iosIcon from "./IOS.svg"; import iosIcon from "./IOS.svg";
@ -11,6 +11,9 @@ import bazarIcon from "./Bazar.svg";
import lightBlueLine from "./light-blue-line.svg"; import lightBlueLine from "./light-blue-line.svg";
const FooterDesign1 = ({ color, bg, items, hasHeader }) => { const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
useEffect(() => {
console.log(window.location.host);
}, []);
const enamad = 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>'; '<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 ( return (
@ -57,7 +60,11 @@ const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
<ul className="flex flex-col mt-0"> <ul className="flex flex-col mt-0">
{item.links.map((link, index) => ( {item.links.map((link, index) => (
<li className="mt-6"> <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.name}
</Link> </Link>
</li> </li>
@ -67,16 +74,21 @@ const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
))} ))}
</div> </div>
<div className="flex items-center justify-between mt-10 md:mt-0"> <div className="flex items-center justify-between mt-10 md:mt-0">
<div {window.location.host === "www.danovin.ir" ? (
dangerouslySetInnerHTML={{ <div
__html: enamad, dangerouslySetInnerHTML={{
}} __html: enamad,
className="w-28 p-2 rounded-md bg-gray-300 mx-6" }}
></div> className="w-28 p-2 rounded-md bg-gray-300 mx-6"
></div>
) : (
<img src={enamadlogo} alt="" className="w-32" />
)}
<img <img
src={samandehi} src={samandehi}
alt="" 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>
</div> </div>

@ -1,4 +1,4 @@
$primary: #196EC0; $primary: #23C933;
$gray: #dbdbdb; $gray: #dbdbdb;
$danger: #E00A0A; $danger: #E00A0A;
$success: #23C933; $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"> <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)"> <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" 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="#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="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="#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="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="#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="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"/> <path id="Vector-5" data-name="Vector" d="M0,0H45.23V45.23H0Z" fill="none" opacity="0"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -195,7 +195,8 @@ function Navbar({
</div> </div>
) : ( ) : (
<header <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-11/12 mx-auto flex flex-col`}>
<div className="w-full flex flex-row items-center py-3 relative justify-between h-ful"> <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}> <li key={index}>
<Link <Link
to={page.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} {page.name}
</Link> </Link>
@ -227,7 +228,7 @@ function Navbar({
> >
<div className="relative w-full h-full"> <div className="relative w-full h-full">
<div <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)" }} style={{ maxWidth: "calc(100vw / 3)" }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >

@ -18,47 +18,36 @@ import discountImg from "./discount.png";
const ProductDesign = ({ const ProductDesign = ({
grades, grades,
colors,
likeBtn, likeBtn,
discount, discount,
discountPricePercent, discountPricePercent,
discountPrice, discountPrice,
productContent, productContent,
star, star,
productTags,
product, product,
priceDirection, priceDirection,
productTitleAlignment,
priceHolder, priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor, productExcerptTextColor,
productCat, productCat,
productCatTextColor,
rangeHolder, rangeHolder,
verticalImg,
rangeWidth, rangeWidth,
addToCartHolder, addToCartHolder,
productName,
productPrice,
writeGHEIMAT, writeGHEIMAT,
numberOfRegards,
productHolderHoverBorder,
hoverMode, hoverMode,
starRate, starRate,
imageSize, imageSize,
type
}) => { }) => {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
return ( return (
<Link <Link
to={"/products/" + product.id} 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" }} style={{ direction: "rtl" }}
> >
<div className="w-full flex flex-wrap items-center justify-around"> <div className="w-full flex flex-wrap items-center justify-around ">
<div <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)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
> >
@ -86,10 +75,10 @@ const ProductDesign = ({
</div> </div>
{/* img */} {/* img */}
<div <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 <img
src={`https://dnvn.ir/api/v1/file/${product.fileIds}`} src={`https://dnvn.ir/api/v1/file/${product?.fileIds}`}
alt="" alt=""
style={{ style={{
height: `calc(100vh / ${imageSize})`, height: `calc(100vh / ${imageSize})`,
@ -101,11 +90,11 @@ const ProductDesign = ({
</div> </div>
{/* product content */} {/* product content */}
<div className="w-full px-2"> <div className="w-full px-2">
<div className="w-full mt-4"> <div className="w-full mt-4 font-semibold text-base">
<h2 <h2
className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`} className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`}
> >
{product?.product[1]?.name} {product?.product[type]?.name}
</h2> </h2>
{productContent && ( {productContent && (
<p <p
@ -117,7 +106,7 @@ const ProductDesign = ({
)} )}
{productCat && ( {productCat && (
<span className={`text-sm py-1 font-normal text-blueC0`}> <span className={`text-sm py-1 font-normal text-blueC0`}>
{"پایه" + " " + grades[product.gradeId]} {"پایه" + " " + grades[product?.gradeId]}
</span> </span>
)} )}
</div> </div>
@ -151,8 +140,8 @@ const ProductDesign = ({
</p> </p>
)} )}
</div> </div>
<p className="text-lg text-productPrice font-semibold inline text-blue5F"> <p className="text-lg text-productPrice font-semibold inline text-green4F">
{separate(product?.product[1]?.price)} <span>تومان</span> {separate(product.product[type]?.price)} <span>تومان</span>
</p> </p>
</div> </div>
{/* add to cart */} {/* add to cart */}
@ -219,6 +208,7 @@ export default connect(mapStateToProps)(ProductDesign);
ProductDesign.defaultProps = { ProductDesign.defaultProps = {
// icons on product image // icons on product image
type : 0,
colors: false, colors: false,
likeBtn: false, likeBtn: false,
discount: 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"> <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" 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="#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="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="#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="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="#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="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)"> <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-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="#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="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g> </g>
<path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/> <path id="Vector-7" data-name="Vector" d="M0,0H41.268V41.268H0Z" fill="none" opacity="0"/>
</svg> </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"> <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" 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="#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="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="#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="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="#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="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="#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="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="#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="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="#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="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="#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="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"/> <path id="Vector-9" data-name="Vector" d="M0,0H51.463V51.463H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</svg> </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"> <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"> <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 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> </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"/> <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="#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="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="#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="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="#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="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="#3fa7ce" stroke-linecap="round" stroke-width="1"/> <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"/>
<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"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -53,7 +53,7 @@ const ProductStatusCard = ({
</div> </div>
))} ))}
<div className="flex flex-col items-center py-3"> <div className="flex flex-col items-center py-3">
<p className="text-xl text-blue-600"> <p className="text-xl text-green4F">
{separate(price)} {separate(price)}
<span className="text-sm text-gray-700 font-light">تومان</span> <span className="text-sm text-gray-700 font-light">تومان</span>
</p> </p>
@ -66,7 +66,7 @@ const ProductStatusCard = ({
<Button <Button
title="اضافه کردن به سبد خرید" title="اضافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
width="100%" width="100%"
color={"text-white"} color={"text-white"}
selectable={true} selectable={true}
@ -87,7 +87,7 @@ const ProductStatusCard = ({
<img src={arrow} alt="" className="w-20 h-20" /> <img src={arrow} alt="" className="w-20 h-20" />
</div> </div>
<div className="flex flex-col mr-5"> <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> </h2>
<p className="text-xs mt-2 leading-5 text-justify"> <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"> <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" 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="#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="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="#246e8a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <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"/> <path id="Vector-4" data-name="Vector" d="M0,0H31.269V31.269H0Z" fill="none" opacity="0"/>
</svg> </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"> <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" 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="#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="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"/> <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> </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"; import Table from "./table";
const ProductTab = ({ tabs }) => { const ProductTab = ({ tabs }) => {
const [selectedTab, setSelectedTab] = useState(tabs[1]); const [selectedTab, setSelectedTab] = useState(tabs[0]);
return ( return (
<section className="mt-10 flex flex-col w-full"> <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"> <ul className="flex flex-row justify-center gap-16">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<li <li
className={`text-sm cursor-pointer hover:text-blue-400 py-4 transition-all duration-500 ${ className={`text-tiny font-semibold cursor-pointer hover:text-blueC0 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" selectedTab?.title === tab?.title ? "text-blueC0 border-b-4 border-solid border-blueC0" : "border-b-4 border-solid border-transparent"
}`} }`}
onClick={() => setSelectedTab(tab)} onClick={() => setSelectedTab(tab)}
key={index} key={index}
@ -38,11 +38,11 @@ ProductTab.defaultProps = {
}, },
{ {
title: "پرسش", 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: "سوال", 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 React, { useState } from "react";
import './index.css';
const persian = { const persian = {
weight: "وزن", weight: "وزن",
@ -17,14 +16,14 @@ const Table = ({ specifications }) => {
return ( return (
<ul className={`w-full`} > <ul className={`w-full`} >
{Object.keys(specifications).map((specification, index) => ( {Object.keys(specifications).map((specification, index) => (
<li className={`flex my-3 cursor-pointer specifications-li`} > <li className={`flex my-3 cursor-pointer group`}>
<div <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 }} style={{ flex: 2 }}
> >
{persian[specification]} {persian[specification]}
</div> </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]} {specifications[specification]}
</div> </div>
</li> </li>

@ -8,9 +8,9 @@ function Progress({ percent, deskTop }) {
}, 1000); }, 1000);
}, [percent]); }, [percent]);
return ( 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 <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 + "%" }} style={{ width: delayPercent + "%" }}
></div> ></div>
</div> </div>

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

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

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

@ -23,7 +23,7 @@ export default function VerticalExpandableProductFilter(props) {
return ( 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"> <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} {props.title}
</strong> </strong>
{props.searchAble && ( {props.searchAble && (
@ -66,14 +66,14 @@ export default function VerticalExpandableProductFilter(props) {
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<Checkbox <Checkbox
name={`ch${name}_${i}`} name={`ch${name}_${i}`}
checked={false} checked={true}
onclick={(e) => { onclick={(e) => {
checkedBox[i] = !checkedBox[i]; checkedBox[i] = !checkedBox[i];
setChecked(checkedBox); setChecked(checkedBox);
}} }}
onChange={() => props.onChange(name, item1.name)} 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
? props.preName + " " + item1.name ? props.preName + " " + item1.name
: item1} : item1}

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

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

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

@ -14,9 +14,12 @@ const publicApi = {
setFaqActive: (data) => async (dispatch) => setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data }), await dispatch({ type: "public/faq/activate", data }),
bookInfo: bookInfo:
(data = {}) => (data = {}, data2 = {}) =>
async (dispatch) => async (dispatch) => {
await proxy.get("public/vod/bookCourse", data, { dispatch }), await proxy.get("public/vod/bookCourse", data, { dispatch });
await proxy.get("book/info", data2, { dispatch });
},
bookSection: bookSection:
(data = {}) => (data = {}) =>
async (dispatch) => 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 { toast } from "react-toastify";
import filter from "../../utils/filter";
const initialState = { const initialState = {
loading: false, loading: false,
@ -9,12 +10,25 @@ const initialState = {
filterResult: [], filterResult: [],
subjects: [], subjects: [],
levels: [], levels: [],
sortFilters: ["مرتب سازی", "محبوب ترین", "جدیدترین"], sortMethods: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
selectedVideo: null, selectedVideo: null,
gradeFilterBooks: null, gradeFilterBooks: null,
sortFilterCourse: null, sortFilterCourse: null,
selectedGrade: null, selectedGrade: null,
selectedSort: "پربازدید ترین ها", selectedSort: "پربازدید ترین ها",
productTypes : [
"کتاب فیزیکی",
"کتاب دیجیتال",
"دوره ویدئویی",
"بسته های آموزشی",
],
filterOptions : {
grade: '',
subject: '',
productType: null,
available : false,
sort: null,
}
}; };
const grades = [ const grades = [
@ -104,59 +118,8 @@ export default function book(state = initialState, action) {
// return { ...state, loading: false, error: null }; // return { ...state, loading: false, error: null };
// case "book/search": // case "book/search":
// return { ...state }; // return { ...state };
// case "book/filter": case "book/setFilterOptions":
// const realList = state.list; return { ...state, loading: false, error: null, filterOptions : data};
// 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/loading": case "book/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "book/error": case "book/error":

@ -6,6 +6,7 @@ export { default as blog } from "./blog";
export { default as product } from "./product"; export { default as product } from "./product";
export { default as content } from "./content"; export { default as content } from "./content";
export { default as userAddress } from "./userAddress"; export { default as userAddress } from "./userAddress";
export { default as transport } from "./transport";
export { default as faq } from "./faq"; export { default as faq } from "./faq";
export { default as file } from "./file"; export { default as file } from "./file";
export { default as userFactor } from "./userFactor"; 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 }) { function Header({ bg, title }) {
return ( 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%'}} /> <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} {title}
</h1> </h1>
</div> </div>

@ -194,12 +194,6 @@ export const Address = ({
// style={{ minHeight: "calc(100vh - 500px)" }} // style={{ minHeight: "calc(100vh - 500px)" }}
> >
<div className="flex flex-col w-1/2 px-4"> <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 <Input
width="100%" width="100%"
label={"ادرس انتخاب شده در نقشه"} label={"ادرس انتخاب شده در نقشه"}
@ -210,6 +204,36 @@ export const Address = ({
align="text-right" align="text-right"
direction="rtl" 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>
<div className="flex flex-col w-1/2 pl-4"> <div className="flex flex-col w-1/2 pl-4">
<Header <Header
@ -300,30 +324,6 @@ export const Address = ({
direction="ltr" direction="ltr"
maxLength={10} 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> </div>
{dialog.open && <Dialog dialog={dialog} />} {dialog.open && <Dialog dialog={dialog} />}
</div> </div>

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

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

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

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

@ -34,24 +34,24 @@ function TransportDate({ transportDate, isDark, isMobile }) {
</button> </button>
) : ( ) : (
<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 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" : "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`} }`}
onClick={() => setActiveDate(time)} onClick={() => {}}
> >
<strong <strong
className={`text-sm transition-all duration-500 dark:text-white ${ className={`text-tiny transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52" activeDate === time ? "text-green7B" : "text-blue52"
}`} }`}
> >
{time.time} {time.time}
</strong> </strong>
{time.status === "completed" && ( {time.status === "completed" && (
<span <span
className={`text-xs transition-all duration-500 dark:text-white mt-1 ${ className={`text-sm transition-all duration-500 dark:text-white mt-1 ${
activeDate === time ? "text-blueC0" : "text-blue52" 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 { connect } from "react-redux";
import Button from "../../../components/Button"; import { transport } from "../../../redux/actions";
import Radio from "../../../components/Radio"; 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 }) => { const Method = ({ method }) => {
return isMobile ? ( return isMobile ? (
<button <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 ${ 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-blueFD border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5" : "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`} }`}
@ -42,35 +59,50 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
) : ( ) : (
<button <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 ${ 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 factorInfo?.transportId === method?.id
? "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" : "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`} }`}
onClick={() => setActiveMethod(method)} onClick={() =>
factorInfo?.transportId !== method?.id
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
{}
)
: {}
}
> >
<strong {loading ? (
className={`text-tiny transition-all duration-500 ${ <Loading
activeMethod === method size={4}
? "text-blueC0 dark:text-white" color={
: "text-blue52 dark:text-white" factorInfo?.transportId === method?.id
}`} ? "bg-green-500"
> : "bg-gray-500"
{method.name} }
</strong> />
) : (
<strong
className={`text-tiny transition-all duration-500 ${
factorInfo?.transportId === method?.id
? "text-green7B dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
{method.name}
</strong>
)}
<span <span
className={`text-sm transition-all duration-500 mt-2 ${ className={`text-sm transition-all duration-500 mt-2 ${
activeMethod === method factorInfo?.transportId === method?.id
? "text-blueC0 dark:text-white" ? "text-green7B dark:text-white"
: "text-blue52 dark:text-white" : "text-blue52 dark:text-white"
}`} }`}
> >
هزینه ارسال &nbsp; {method.cost} هزینه ارسال &nbsp; {separate(method.price)}
</span> </span>
<img
src={method.icon}
alt={method.name}
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/>
</button> </button>
); );
}; };
@ -80,7 +112,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
لطفا یک روش ارسال انتخاب کنید لطفا یک روش ارسال انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-col"> <ul className="list-none p-0 m-0 flex flex-col">
{transportMethods.map((method, index) => ( {list.map((method, index) => (
<Method method={method} key={index} /> <Method method={method} key={index} />
))} ))}
</ul> </ul>
@ -91,7 +123,7 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
لطفا یک روش ارسال انتخاب کنید لطفا یک روش ارسال انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap"> <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} /> <Method method={method} key={index} />
))} ))}
</ul> </ul>
@ -100,8 +132,17 @@ function TransportMethod({ transportMethods, isDark, isMobile }) {
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
list: state.transport.list,
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile, 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"> <span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
2 2
</span> </span>
<TransportMethod transportMethods={form.transportMethods} /> <TransportMethod />
</div> </div>
<div className="w-full flex flex-row gap-5 mt-8"> <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"> <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"; import { Link } from "react-router-dom";
//assets //assets
import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg"; import arrowLeftWhite from "../../../assets/icons/dropdown-blue.svg";
function NotFound({ title, subTitle, link }) { function NotFound({ title, subTitle, link }) {
return ( return (
<Link <Link
to={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"> <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 <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} {subTitle}
</span> </span>
</div> </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> </Link>
); );
} }

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

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

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "../../../../redux/actions"; import { book } from "../../../../redux/actions";
import { Carousel } from "@trendyol-js/react-carousel"; 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 { Link } from "react-router-dom";
import Product from "../../../../components/Product"; import Product from "../../../../components/Product";
import Button from "../../../../components/Button"; 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="w-full flex justify-between items-center mb-4">
<div className="flex items-center text-4xl font-black text-blue52"> <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> <div className="w-6 h-6 bg-greenDD ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">کتاب های جدید</h1> <h1 className="text-2xl text-blue5F">کتابهای جدید</h1>
</div> </div>
<div> <div>
<Link to="/products"> <Link
<Button to="/products"
title="مشاهده لیست محصولات" className="py-3 px-4 rounded bg-grayF4 text-blue3D text-tiny flex flex-row items-center"
backgroundColor="bg-blue-100" >
border={{ مشاهده بیشتر
color: "#196EC055", <div className="transform rotate-90 translate-y-px mr-1">
width: "0px", <svg
}} id="vuesax_linear_arrow-down"
width="100%" data-name="vuesax/linear/arrow-down"
selectable={true} xmlns="http://www.w3.org/2000/svg"
color="text-blueC0" width="18"
onClick={() => null} height="18"
radius={false} viewBox="0 0 24 24"
twPaddings="py-4 px-12 rounded" >
/> <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> </Link>
</div> </div>
</div> </div>
@ -58,16 +79,18 @@ const Part2 = ({ books, grades }) => {
transition={0.5} transition={0.5}
rightArrow={ rightArrow={
<img <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} src={arrow}
alt="" alt=""
// onClick={(e) => e.stopPropagation()}
/> />
} }
leftArrow={ leftArrow={
<img <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} src={arrow}
alt="" alt=""
// onClick={(e) => e.stopPropagation()}
/> />
} }
> >

@ -2,7 +2,10 @@ import React from "react";
import Button from "../../../../components/Button"; import Button from "../../../../components/Button";
import VodProduct from "../../../../components/VodProduct"; import VodProduct from "../../../../components/VodProduct";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
//assets
import posterImage from "../../../../assets/images/poster.svg"; import posterImage from "../../../../assets/images/poster.svg";
const Part4 = ({ books, grades }) => { const Part4 = ({ books, grades }) => {
const videosData = [ const videosData = [
{ {
@ -59,25 +62,46 @@ const Part4 = ({ books, grades }) => {
<div className="w-full my-6"> <div className="w-full my-6">
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
<div className="flex items-center text-4xl font-black text-blue52"> <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> <div className="w-6 h-6 bg-greenDD ml-4 rounded-full"></div>
<h1 className="text-2xl text-blue5F">جدیدترین دوره های ویدیویی</h1> <h1 className="text-2xl text-blue5F">جدیدترین دورههای ویدئویی</h1>
</div> </div>
<div> <div>
<Link to="/products"> <Link
<Button to="/products"
title="مشاهده لیست محصولات" className="py-3 px-4 rounded bg-grayF4 text-blue3D text-tiny flex flex-row items-center"
backgroundColor="bg-blue-100" >
border={{ مشاهده بیشتر
color: "#196EC055", <div className="transform rotate-90 translate-y-px mr-1">
width: "0px", <svg
}} id="vuesax_linear_arrow-down"
width="100%" data-name="vuesax/linear/arrow-down"
selectable={true} xmlns="http://www.w3.org/2000/svg"
color="text-blueC0" width="18"
onClick={() => null} height="18"
radius={false} viewBox="0 0 24 24"
twPaddings="py-4 px-12" >
/> <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> </Link>
</div> </div>
</div> </div>
@ -86,7 +110,7 @@ const Part4 = ({ books, grades }) => {
style={{}} style={{}}
> >
<ul className="flex flex-wrap justify-center "> <ul className="flex flex-wrap justify-center ">
{books.slice(0, 6).map((video, index) => ( {books?.slice(0,6)?.map((video, index) => (
<li <li
className={`flex flex-col border-solid border-gray-200 ${ className={`flex flex-col border-solid border-gray-200 ${
index != 3 && index != 4 && index != 5 ? "border-b" : null 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 { book, publicApi } from "../../../../redux/actions";
// import ScrollContainer from "react-indiana-drag-scroll"; // import ScrollContainer from "react-indiana-drag-scroll";
import { Carousel } from "@trendyol-js/react-carousel"; 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 { Link } from "react-router-dom";
import Product from "../../../../components/Product"; import Product from "../../../../components/Product";
import "./index.css"; import "./index.css";
//assets
import bookImage from "../../../../assets/images/olum-1.svg";
const SalesContainer = ({ books }) => { const SalesContainer = ({ books }) => {
const [filter, setFilter] = useState({ const [filter, setFilter] = useState({
search: "", search: "",
@ -20,9 +23,12 @@ const SalesContainer = ({ books }) => {
<div className="flex flex-row items-center pl-4"> <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="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div> */}
<div className="text-3xl leading-normal"> <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 <h3
className="mr-4 text-center" className="mr-4 text-center font-semibold px-2 transform -translate-x-4 text-7xl"
style={{ background: "#EFFF00" }} style={{ background: "#EFFF00" }}
> >
{" "} {" "}
@ -31,11 +37,13 @@ const SalesContainer = ({ books }) => {
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<p className="text-md flex">بیش از ۵۰ کتاب تخفیف خورده&nbsp;</p> <p className="text-md flex text-lg font-bold">
<div className="w-6 h-6 bg-blue-300 mr-4 rounded-full"></div> بیش از ۵۰ کتاب تخفیف خورده&nbsp;
</p>
<div className="w-6 h-6 bg-greenDD mr-4 rounded-full"></div>
</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> </div>
{books.length > 0 && ( {books.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}> <div className="relative w-full" style={{ direction: "ltr" }}>
@ -47,7 +55,7 @@ const SalesContainer = ({ books }) => {
transition={0.5} transition={0.5}
rightArrow={ rightArrow={
<img <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} src={arrow}
alt="" alt=""
// onClick={(e) => e.stopPropagation()} // onClick={(e) => e.stopPropagation()}
@ -55,7 +63,7 @@ const SalesContainer = ({ books }) => {
} }
leftArrow={ leftArrow={
<img <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} src={arrow}
alt="" alt=""
// onClick={(e) => e.stopPropagation()} // onClick={(e) => e.stopPropagation()}

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

@ -11,16 +11,16 @@ export default function Book({ book }) {
style={{ width: 60, height: 90 }} style={{ width: 60, height: 90 }}
/> />
<div className="flex flex-col mr-2"> <div className="flex flex-col mr-2">
<strong className="text-xs text-blue5 dark:text-white">علوم اجتماعی</strong> <strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">علوم اجتماعی</strong>
<span className="mt-2 text-xs text-gray70 dark:text-greenBA">پایه دوم</span> <span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">پایه دوم</span>
<span className="mt-1 text-xs text-blue5F dark:text-white">نسخه دیجیتال</span> <span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">نسخه دیجیتال</span>
</div> </div>
</div> </div>
<div className="flex flex-row items-center"> <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 1
</span> </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>
</div> </div>
); );

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

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import leftArrowIcon from "../assets/leftArrow.png"; import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
import _ from "lodash"; import _ from "lodash";
const colors = { const colors = {
@ -20,13 +20,13 @@ const status = {
function Order({ order, isMobile }) { function Order({ order, isMobile }) {
return ( 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="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-blueFF1 dark:bg-blueC0 dark:bg-opacity-10"> <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-blue52 dark:text-white"> <strong className="font-medium text-sm lg:text-tiny text-green4F dark:text-white">
{_.join(["شماره سفارش:", order.number], " ")} {_.join(["شماره سفارش:", order.number], " ")}
</strong> </strong>
<div className="flex flex-row items-center"> <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]} {status[order.status]}
</span> </span>
<div <div
@ -83,7 +83,7 @@ function Order({ order, isMobile }) {
<div className="flex flex-col items-center mr-4"> <div className="flex flex-col items-center mr-4">
<div className="hidden lg:flex w-full"> <div className="hidden lg:flex w-full">
<div <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={{ style={{
fontFamily: "bold", fontFamily: "bold",
backgroundColor : '#F0FFF1' backgroundColor : '#F0FFF1'
@ -102,12 +102,13 @@ function Order({ order, isMobile }) {
</strong> </strong>
<Link <Link
to="/orders/order" 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 <img
src={leftArrowIcon} src={leftArrowIcon}
style={{ width: 18, height: 18, marginRight: 10 }} style={{ width: 18}}
className="transform rotate-90"
/> />
</Link> </Link>
<span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden"> <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 { Link } from "react-router-dom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../../../redux/actions"; import { book, userProduct, publicApi } from "../../../../redux/actions";
import proxy from "../../../../redux/proxy";
import location from "../../../../utils/location";
import Button from "../../../../components/Button"; import Button from "../../../../components/Button";
import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating"; 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 ProductImages from "../../../../components/ProductImage";
import ProductStatusCard from "../../../../components/ProductStatusCard"; import ProductStatusCard from "../../../../components/ProductStatusCard";
import ProductSuggestions from "../../../../components/ProductSuggestion";
export const ProductOverAll = ({ //assets
productType, import arrow from "../../../../assets/icons/dropdown-blue.svg";
getInfo,
book, export const ProductOverAll = ({ book, grades, isDark, loading }) => {
grades,
isDark,
userId,
pushToCart,
headerOptions,
setHeaderOptions,
loading,
}) => {
const [type, setType] = useState("1"); const [type, setType] = useState("1");
return ( return (
<div className="w-full"> <div className="w-full">
@ -54,7 +37,7 @@ export const ProductOverAll = ({
<div className="py-4"> <div className="py-4">
<div className="w-full flex items-center pb-2"> <div className="w-full flex items-center pb-2">
<h1 className="text-base font-bold">نوع کتاب</h1> <h1 className="text-base font-bold">نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8"> <p className=" text-xs px-4 text-blueC0">
به من کمک کن انتخاب کنم به من کمک کن انتخاب کنم
</p> </p>
</div> </div>
@ -63,11 +46,11 @@ export const ProductOverAll = ({
title="نسخه فیزیکی" title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ border={{
color: isDark ? "#ffffff55" : "#196EC055", color: isDark ? "#ffffff55" : "#aaa",
width: "1px", width: "1px",
}} }}
width="38%" width="38%"
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-green7B"}
active={type === "1"} active={type === "1"}
selectable={true} selectable={true}
onClick={() => setType("1")} onClick={() => setType("1")}
@ -86,7 +69,7 @@ export const ProductOverAll = ({
width="38%" width="38%"
selectable={true} selectable={true}
active={type === "0"} active={type === "0"}
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-green7B"}
onClick={() => setType("0")} onClick={() => setType("0")}
borderType="dashed" borderType="dashed"
radius={false} radius={false}
@ -104,20 +87,26 @@ export const ProductOverAll = ({
twPaddings="py-4 px-6" twPaddings="py-4 px-6"
color={isDark ? "text-white" : "font-bold text-red19"} color={isDark ? "text-white" : "font-bold text-red19"}
onClick={() => {}} onClick={() => {}}
disabled={true}
/> />
</div> </div>
</div> </div>
<div className="flex py-4"> <div className="flex py-4">
<Link <Link
to={"/videos/" + book?.id} 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> </Link>
</div> </div>
</div> </div>
<div className="flex flex-col w-1/3"> <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> </div>
</header> </header>
</div> </div>
@ -129,7 +118,7 @@ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
userId: state.user.status.id, userId: state.user.status.id,
loading : state.userProduct.loading loading: state.userProduct.loading,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

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

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

@ -8,120 +8,202 @@ import Product from "../../../components/Product";
import VodProduct from "../../../components/VodProduct"; import VodProduct from "../../../components/VodProduct";
import { book, publicApi, product } from "../../../redux/actions"; import { book, publicApi, product } from "../../../redux/actions";
import posterImage from "../../../assets/images/poster.svg"; 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 = ({ export const Main = ({
books, books,
grades, grades,
gradeFilter,
selectedGrade, selectedGrade,
gradeFilterBooks, gradeFilterBooks,
setHeaderOptions, sortMethods,
headerOptions, filterOptions,
videos,
filter,
}) => { }) => {
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, []); }, []);
const filteringNavItems = [ const Items = (type) => {
{ const { grade, subject, available, sort, productType } = filterOptions;
title: "بیشترین بازدید", let byGradeFilter;
}, let bySubjectFilter;
{ let byAvailableFilter;
title: "پرفروش ترین", if (grade) {
}, byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade);
{ } else {
title: "کمترین قیمت", byGradeFilter = books;
}, }
{ if (subject) {
title: "بیشترین قیمت", bySubjectFilter = byGradeFilter?.filter(
}, (book) => book?.product[type]?.name?.indexOf(subject) !== -1
{ );
title: "محبوب ترین", } 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 ( 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 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"> <div className="flex text-sm items-center mx-2">
<img src={filterIcon} /> <svg
<span>مرتب سازی بر اساس</span> 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> </div>
<ul className="flex justify-between w-3/4 px-4 py-0 "> <ul className="flex py-0 flex-1 gap-4">
{filteringNavItems.map((e) => ( {sortMethods.map((item) => (
<li <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")} onClick={() => console.log("a")}
> >
{e.title} {item}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{books?.length > 0 && ( {books?.length > 0 &&
<div className="relative w-full" style={{ direction: "ltr" }}> (filterOptions?.productType
<Carousel ? filterOptions.productType === "دوره ویدئویی"
show={Math.round(window.innerWidth / 500)} : true) && (
slide={2} <div className="relative " style={{ direction: "ltr" }}>
swiping={true} <Carousel
useArrowKeys={true} show={Math.round(window.innerWidth / 500)}
transition={0.5} slide={2}
className="flex flex-row" swiping={true}
rightArrow={ useArrowKeys={true}
<img infinite={true}
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2" transition={0.5}
src={arrow} className="flex flex-row"
alt="" rightArrow={
/> <img
} className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
leftArrow={ src={arrow}
<img alt=""
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
src={arrow}
alt=""
/>
}
>
{books?.map((video, index) => (
<VodProduct
video={video}
key={index}
index={index}
height={"calc(100vh / 5)"}
grades={grades}
/>
))}
</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> }
))} leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
/>
}
>
{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 gap-4 justify-evenly pt-3">
{Items(1)}
</div> </div>
</div> </div>
); );
@ -134,11 +216,13 @@ Main.defaultProps = {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
sortMethods: state.book.sortMethods,
filterOptions: state.book.filterOptions,
filterResult: state.book.filterResult,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
getList: book.list, getList: book.list,
gradeFilter: book.gradeFilter,
setHeaderOptions: publicApi.setHeaderOptions, setHeaderOptions: publicApi.setHeaderOptions,
}; };

@ -1,36 +1,131 @@
import React from "react"; import React, { useState, useMemo } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "../../../redux/actions";
import Checkbox from "../../../components/Checkbox"; import Checkbox from "../../../components/Checkbox";
import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter"; import Switch from "../../../components/Switch";
export const Sidebar = ({ onChange, grades }) => { //assets
const categories = [ 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">
<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 ( return (
<div className="flex flex-col w-1/4 p-4"> <div
<VerticalExpandableProductFilter 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"
onChange={onChange} style={{
name="grade" height: "fit-content",
list={Object.values(grades)} }}
title="پایه تحصیلی" >
/> <strong className="text-lg text-green4F mb-10">فیلترها</strong>
<VerticalExpandableProductFilter <div className="flex flex-col divide-y divide-solid divide-gray-200">
name="category" <Dropdown
list={categories} list={productTypes}
title="دسته بندی" title="نوع محصول"
/> name="productType"
active={filterOptions.productType}
/>
<Dropdown
list={Object.values(levels)}
title={"پایه تحصیلی"}
name="grade"
active={filterOptions.grade}
/>
<Dropdown
list={subjects}
title={"عنوان کتاب"}
name="subject"
active={filterOptions.subject}
/>
<CkeckItem title="فقط کالاهای موجود" name={"available"} />
</div>
</div> </div>
); );
}; };
const mapStateToProps = (state) => ({ 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); 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 { connect } from "react-redux";
import { userProduct } from "../../../redux/actions"; import { userProduct } from "../../../redux/actions";
import separate from "../../../utils/separate"; import separate from "../../../utils/separate";
@ -119,7 +119,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
</div> </div>
<div className="w-1/4 flex flex-row items-center"> <div className="w-1/4 flex flex-row items-center">
<button <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={() => onClick={() =>
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
@ -130,7 +130,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
> >
+ +
</button> </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} {loading ? <Loading size={2} color="bg-green-500" /> : product.count}
</span> </span>
{ {
@ -154,7 +154,7 @@ function Product({ product, grades, pushToCart, isMobile, loading }) {
/> />
) : ( ) : (
<button <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={() => onClick={() =>
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,

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

@ -15,14 +15,17 @@ const Table = ({ specifications }) => {
return ( return (
<ul className="w-full"> <ul className="w-full">
{Object.keys(specifications).map((specification, index) => ( {Object.keys(specifications).map((specification, index) => (
<li className="flex my-3"> <li className="flex my-3 cursor-pointer group">
<div <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 }} style={{ flex: 2 }}
> >
{persian[specification]} {persian[specification]}
</div> </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]} {specifications[specification]}
</div> </div>
</li> </li>

@ -18,45 +18,14 @@ const Videos = ({ videos }) => {
}, [videos]); }, [videos]);
return ( return (
<div className="flex flex-row gap-5"> <div className="flex flex-row w-full bg-gray-300" style={{height : 'calc(100vh / 1.5)'}}>
<div
className="flex flex-col items-start justify-between" {/* <img
// 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
src={productImg} src={productImg}
alt="" alt=""
style={{ height: "calc(100vh * 9 / 16)", width: "calc(100vh)" }} style={{ height: "calc(100vh)", width: "w-full" }}
className="rounded-md" className="rounded-md"
/> /> */}
</div> </div>
); );
}; };

@ -81,7 +81,7 @@ const Season = ({
// } // }
> >
<div className="flex items-center justify-between w-full"> <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"> <div className="flex items-center gap-4">
<Link <Link
to={ to={
@ -91,9 +91,9 @@ const Season = ({
} }
className={`bg-white border border-solid ${ className={`bg-white border border-solid ${
Number(index) === 0 Number(index) === 0
? "border-blue-300 text-blueC0" ? "border-green-300 text-greenBA"
: "border-gray-300 text-gray70" : "border-gray-300 text-gray70 cursor-not-allowed"
} py-2.5 w-24 text-center text-tiny rounded-sm shadow-sm`} } py-2.5 w-24 text-center text-tiny rounded-sm shadow-md`}
onClick={() => setCategory(season[0].categoryId, unit.name)} onClick={() => setCategory(season[0].categoryId, unit.name)}
> >
{Number(index) === 0 ? "تماشا" : "قفل"} {Number(index) === 0 ? "تماشا" : "قفل"}
@ -128,12 +128,12 @@ const Season = ({
season.map((unit, index) => <Unit unit={unit} key={index} />)} season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div> </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 <header
className="w-full flex flex-row justify-between items-center py-3 px-6" className="w-full flex flex-row justify-between items-center py-3 px-6"
onClick={() => toggle(season[0].categoryId)} 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] realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name .name
@ -148,7 +148,7 @@ const Season = ({
/> />
</header> </header>
<ul <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={{ style={{
height: isMobile height: isMobile
? "auto" ? "auto"

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

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

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

Loading…
Cancel
Save