Pedram Keshavarzi 3 years ago
commit 7f4228af61
  1. 5
      src/components/Button/index.js
  2. 6
      src/components/Navbar/index.js
  3. 18
      src/router.js
  4. 57
      src/views/DeliveryForm/Address/index.js
  5. 48
      src/views/DeliveryForm/TransportDate/index.js
  6. 51
      src/views/DeliveryForm/TransportMethod/index.js
  7. 64
      src/views/DeliveryForm/index.js
  8. 11
      src/views/Faq/components/NotFound.js
  9. 12
      src/views/Faq/components/Question.js
  10. 43
      src/views/Faq/index.js
  11. 67
      src/views/ShoppingCart/index.js

@ -17,7 +17,7 @@ export default function Button({
}) {
return (
<button
className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} justify-center text-sm cursor-pointer ${
className={`rounded-md py-3 justify-center text-sm cursor-pointer lg:py-5 ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity
@ -36,3 +36,6 @@ export default function Button({
</button>
);
}

@ -228,7 +228,7 @@ function Navbar({
</div>
<div
className={`w-full flex flex-col z-20 ${
desktopMiddleFix ? "fixed top-0 left-0" : ""
desktopMiddleFix ? "" : ""
}`}
>
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
@ -258,10 +258,10 @@ function Navbar({
<div
className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "-translate-y-10" : ""
desktopEndTransform ? "" : ""
}`}
style={{
transition: "all 0.3s",
// transition: "all 0.3s",
}}
>
<div className="ml-10 flex flex-row items-center">

@ -28,15 +28,15 @@ import Contact from "./views/Contact";
function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) {
useEffect(() => {
window.addEventListener("scroll", () => {
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopContentTransform(true);
} else {
setDesktopContentTransform(false);
}
});
}
// if (!isMobile) {
// window.addEventListener("scroll", () => {
// if (window.scrollY >= 64) {
// setDesktopContentTransform(true);
// } else {
// setDesktopContentTransform(false);
// }
// });
// }
});
}, []);
return (

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
function Address({ addresses, isDark }) {
function Address({ addresses, isDark, isMobile }) {
const [activeAddress, setActiveAddress] = useState(addresses[0]);
const Location = ({ address }) => {
return (
return isMobile ? (
<button
className={`flex flex-row border-2 border-solid items-center w-full px-3 py-4 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${
activeAddress === address
@ -30,9 +30,38 @@ function Address({ addresses, isDark }) {
</li>
</div>
</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 ${
activeAddress === address
? "bg-blueFD border-blueC0"
: "bg-grayF9 border-gray45"
}`}
>
<div className="flex flex-row gap-3 w-2/3">
<Radio />
<div className="flex flex-1 flex-col">
<li className="text-right text-sm text-blue52 dark:text-white leading-4">
آدرس:&nbsp;{address.address}
</li>
<li className="text-right text-sm text-blue52 dark:text-white mt-3">
کد پستی:&nbsp;{address.postalCode}
</li>
</div>
</div>
<div className="flex flex-col w-1/3">
<li className="text-right text-sm text-blue52 dark:text-white">
نام تحویل گیرنده:&nbsp;{address.receiver}
</li>
<li className="text-right text-sm text-blue52 dark:text-white mt-3">
شماره تماس:&nbsp;{address.cellphone}
</li>
</div>
</button>
);
};
return (
return isMobile ? (
<section className="mt-2">
<strong className="font-medium dark:text-white">انتخاب آدرس</strong>
<ul className="list-none p-0 m-0 flex flex-col">
@ -44,7 +73,26 @@ function Address({ addresses, isDark }) {
<Button
title="یک آدرس جدید اضافه کنید +"
backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30"
border={{ color: isDark ? '#DBDBDB22' : "#DBDBDB", width: "1px" }}
border={{ color: isDark ? "#DBDBDB22" : "#DBDBDB", width: "1px" }}
bgOpacity="bg-opacity-100"
width="100%"
color={isDark ? "text-white" : "text-gray70"}
/>
</div>
</section>
) : (
<section className="mt-0.5 w-full">
<strong className="font-medium dark:text-white">انتخاب آدرس</strong>
<ul className="list-none p-0 m-0 flex flex-col">
{addresses.map((address, index) => (
<Location address={address} key={index} />
))}
</ul>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="یک آدرس جدید اضافه کنید +"
backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30"
border={{ color: isDark ? "#DBDBDB22" : "#DBDBDB", width: "1px" }}
bgOpacity="bg-opacity-100"
width="100%"
color={isDark ? "text-white" : "text-gray70"}
@ -56,6 +104,7 @@ function Address({ addresses, isDark }) {
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
export default connect(mapStateToProps)(Address);

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
function TransportDate({ transportDate, isDark }) {
function TransportDate({ transportDate, isDark, isMobile }) {
const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
const Time = ({ time }) => {
return (
return isMobile ? (
<button
className={`flex flex-col border border-solid items-center flex-1 mx-1 px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
activeDate === time
@ -32,22 +32,62 @@ function TransportDate({ transportDate, isDark }) {
</span>
)}
</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 ${
activeDate === time
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => setActiveDate(time)}
>
<strong
className={`text-sm transition-all duration-500 dark:text-white ${
activeDate === time ? "text-blueC0" : "text-blue52"
}`}
>
{time.time}
</strong>
{time.status === "completed" && (
<span
className={`text-xs transition-all duration-500 dark:text-white mt-1 ${
activeDate === time ? "text-blueC0" : "text-blue52"
}`}
>
تکمیل ظرفیت
</span>
)}
</button>
);
};
return (
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white">زمان ارسال را انتخاب کنید</strong>
<strong className="font-medium dark:text-white">
زمان ارسال را انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
{transportDate.times.map((time, index) => (
<Time time={time} key={index} />
))}
</ul>
</section>
) : (
<section className="mt-1 w-full">
<strong className="font-medium dark:text-white">
زمان ارسال را انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row flex-wrap w-full">
{transportDate.times.map((time, index) => (
<Time time={time} key={index} />
))}
</ul>
</section>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
export default connect(mapStateToProps)(TransportDate);

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button";
import Radio from "../../../components/Radio";
function TransportMethod({ transportMethods, isDark }) {
function TransportMethod({ transportMethods, isDark, isMobile }) {
const [activeMethod, setActiveMethod] = useState(transportMethods[0]);
const Method = ({ method }) => {
return (
return isMobile ? (
<button
className={`flex flex-col border border-solid items-center w-full px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${
activeMethod === method
@ -39,9 +39,42 @@ function TransportMethod({ transportMethods, isDark }) {
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/>
</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-1/3 ${
activeMethod === method
? "bg-blueFD border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() => setActiveMethod(method)}
>
<strong
className={`text-sm transition-all duration-500 ${
activeMethod === method
? "text-blueC0 dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
{method.name}
</strong>
<span
className={`text-xs transition-all duration-500 mt-2 ${
activeMethod === method
? "text-blueC0 dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
هزینه ارسال &nbsp; {method.cost}
</span>
<img
src={method.icon}
alt={method.name}
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/>
</button>
);
};
return (
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white">
لطفا یک روش ارسال انتخاب کنید
@ -52,11 +85,23 @@ function TransportMethod({ transportMethods, isDark }) {
))}
</ul>
</section>
) : (
<section className="mt-1 w-full">
<strong className="font-medium dark:text-white">
لطفا یک روش ارسال انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap">
{transportMethods.map((method, index) => (
<Method method={method} key={index} />
))}
</ul>
</section>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
export default connect(mapStateToProps)(TransportMethod);

@ -9,22 +9,6 @@ import PaymentMethods from "./PaymentMethod";
import ExpressIcon from "../../assets/icons/express.svg";
import PishtazIcon from "../../assets/icons/pishtaz.svg";
const PriceStatus = ({ name, value, type, isDark }) => {
return (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
);
};
export const DeliveryForm = ({
setHeaderOptions,
headerOptions,
@ -33,13 +17,33 @@ export const DeliveryForm = ({
getFactorInfo,
userId,
isDark,
isMobile,
}) => {
useEffect(() => {
setHeaderOptions(headerOptions);
if (isMobile) {
setHeaderOptions(headerOptions);
}
getFactorInfo({ userId });
setHeaderOptions(headerOptions);
}, []);
return (
const PriceStatus = ({ name, value, type }) => {
return (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
);
};
return isMobile ? (
<div className="w-full flex flex-col px-4 pb-10">
<Address addresses={form.addresses} />
<TransportMethod transportMethods={form.transportMethods} />
@ -72,6 +76,27 @@ export const DeliveryForm = ({
</div>
<PaymentMethods paymentMethods={form.paymentMethods} />
</div>
) : (
<div className="w-full flex flex-col px-4 pb-10">
<div className="w-full flex flex-row gap-5">
<span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
1
</span>
<Address addresses={form.addresses} />
</div>
<div className="w-full flex flex-row gap-5 mt-8">
<span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
2
</span>
<TransportMethod transportMethods={form.transportMethods} />
</div>
<div className="w-full flex flex-row gap-5 mt-8">
<span className="w-6 h-6 rounded-full bg-grayF4 flex justify-center items-center text-sm">
3
</span>
<TransportDate transportDate={form.transportDate} />
</div>
</div>
);
};
@ -79,6 +104,7 @@ const mapStateToProps = (state) => ({
factorInfo: state.userFactor.info,
userId: state.user.status.id,
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {

@ -8,18 +8,17 @@ function NotFound({ title, subTitle, link }) {
return (
<Link
to={link}
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-md bg-blueC0 mt-4"
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-sm bg-blueC0 mt-4 self-end lg:ml-1/2"
>
<div className="flex flex-col w-3/4">
{title && <strong className="text-xs text-white">{title}</strong>}
<div className="flex flex-col w-3/4 lg:w-full">
{title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
<span
className={`text-xs text-white font-light ${title ? "mt-2" : ""}`}
style={{ fontSize: "calc(100vw / 36)" }}
className={`text-xs text-white font-light lg:text-sm ${title ? "mt-2 lg:mt-3" : ""}`}
>
{subTitle}
</span>
</div>
<img src={arrowLeftWhite} alt="" className="w-7" />
<img src={arrowLeftWhite} alt="" className="w-7 lg:mr-6" />
</Link>
);
}

@ -5,16 +5,14 @@ function Qurestion({}) {
return (
<div
onClick={() => setActive(() => !active)}
className="w-full flex flex-col my-1.5 rounded-md px-4 py-3 border-solid bg-grayF9 dark:bg-opacity-5"
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"
style={{
// backgroundColor: !active ? "#F9F9F9" : "#F6F9FD",
borderColor: !active ? "#DBDBDB22" : "#196EC0",
borderWidth: 1,
transition : 'all 0.5s'
border: `1px ${!active ? "#DBDBDB99" : "#196EC0"} solid`
// transition : 'all 0.5s'
}}
>
<div className="flex flex-row justify-between items-center">
<strong className="flex-1 text-blueC0 text-xs dark:text-white">
<strong className="flex-1 text-blueC0 text-xs dark:text-white lg:text-sm font-medium">
نحوه خرید از سایت چگونه است ؟
</strong>
</div>
@ -25,7 +23,7 @@ function Qurestion({}) {
}}
>
<p
className={`text-right text-blueC0 text-xs dark:text-white ${
className={`text-right text-blueC0 text-xs dark:text-white lg:text-sm lg:leading-6 ${
active ? "h-auto opacity-100 pt-2" : "pt-0 h-0 opacity-0"
}`}
style={{

@ -11,7 +11,7 @@ import Search from "../../components/Search";
import faqBgImage from "./faq-bg.svg";
import searchLight from "../../assets/icons/search-light.svg";
function Faq({ headerOptions, setHeaderOptions }) {
function Faq({ headerOptions, setHeaderOptions, isMobile }) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
@ -21,27 +21,36 @@ function Faq({ headerOptions, setHeaderOptions }) {
style={{ height: "calc(100vh - 145px)" }}
>
<Header bg={faqBgImage} title="پرسشهای متداول" />
<div className="w-full flex flex-col px-4 transform -translate-y-12">
<Search
backgroundColor="bg-grayF9 dark:bg-gray2077"
borderColor="border-grayDB dark:border-gray45"
textColor="text-blueC0 dark:text-white"
icon={searchLight}
/>
{[0, 1, 2, 3, 4].map((item, index) => (
<Question key={index} />
))}
<NotFound
title={"پرسش خود را در لیست بالا پیدا نکردید؟"}
subTitle={"برای ما پیام ارسال کنید"}
link="/contact-us"
/>
<div className="w-full flex flex-col px-4 transform -translate-y-12 items-center">
<div className="lg:w-1/2 w-full">
{isMobile && (
<Search
backgroundColor="bg-grayF9 dark:bg-gray2077"
borderColor="border-grayDB dark:border-gray45"
textColor="text-blueC0 dark:text-white"
icon={searchLight}
/>
)}
{[0, 1, 2, 3, 4].map((item, index) => (
<Question key={index} />
))}
</div>
<div className="w-full flex flex-row lg:w-4/5 justify-end">
<NotFound
title={"پرسش خود را در لیست بالا پیدا نکردید؟"}
subTitle={"برای ما پیام ارسال کنید"}
link="/contact-us"
/>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,

@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { userProduct, userFactor, publicApi } from "../../redux/actions";
import DeliveryForm from "../DeliveryForm";
import Product from "./Product";
import Code from "./Code";
import Button from "../../components/Button";
@ -26,6 +27,8 @@ function ShoppingCart({
setHeaderOptions,
desktopContentTransform,
}) {
const [phase, setPhase] = useState("products");
useEffect(() => {
getList();
getFactorInfo({ userId });
@ -70,11 +73,11 @@ function ShoppingCart({
</div>
) : (
<div className="w-full flex flex-row justify-between py-4">
<strong className="font-light text-base dark:text-white text-blue5F">
<strong className="font-light text-tiny dark:text-white text-blue5F">
{name}
</strong>
<span
className="font-medium text-xl dark:text-white"
className="font-medium text-lg dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
@ -117,7 +120,7 @@ function ShoppingCart({
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-3">
<strong className="font-medium text-sm dark:text-white">
<strong className="font-light text-sm dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xs dark:text-white">
@ -149,7 +152,8 @@ function ShoppingCart({
}`}
>
<div className="flex flex-col w-3/4">
<Table />
{phase === "products" && <Table />}
{phase === "delivery-form" && <DeliveryForm />}
</div>
<div
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
@ -173,7 +177,7 @@ function ShoppingCart({
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
<strong className="font-medium text-base text-blue5F dark:text-white">
<strong className="font-medium text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xl dark:text-white">
@ -181,22 +185,55 @@ function ShoppingCart({
<span className="font-medium text-greenBA text-sm mr-2">تومان</span>
</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
{phase === "products" && (
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
)}
{phase === "delivery-form" && (
<div className="flex flex-col mt-10">
<strong className="text-tiny text-blue52 mb-5 font-medium">
انتخاب شیوه پرداخت
</strong>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-transparent"
border={{ color: "#77777755", width: "1px" }}
width="100%"
color="text-blue52"
onClick={() =>
setPhase(phase === "products" ? "delivery-form" : "")
}
/>
<br />
<Button
title="پرداخت در محل"
backgroundColor="bg-transparent"
border={{ color: "#77777755", width: "1px" }}
width="100%"
color="text-blue52"
onClick={() =>
setPhase(phase === "products" ? "delivery-form" : "")
}
/>
<br/>
<br/>
</div>
)}
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
// onClick={() => }
onClick={() => setPhase(phase === "products" ? "delivery-form" : "")}
/>
</div>
</div>

Loading…
Cancel
Save