Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/NewDanovin

Browse Source
temp
Pedram Keshavarzi 3 years ago
parent 89a8d016bc 984374e466
commit 7f4228af61
11 changed files with 294 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 60
      src/views/DeliveryForm/index.js
  8. 11
      src/views/Faq/components/NotFound.js
  9. 12
      src/views/Faq/components/Question.js
  10. 15
      src/views/Faq/index.js
  11. 49
      src/views/ShoppingCart/index.js

5
src/components/Button/index.js
Unescape View File

@ -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>
);
}

6
src/components/Navbar/index.js
Unescape View File

@ -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">

18
src/router.js
Unescape View File

@ -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 (

57
src/views/DeliveryForm/Address/index.js
Unescape View File

@ -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);

48
src/views/DeliveryForm/TransportDate/index.js
Unescape View File

@ -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);

51
src/views/DeliveryForm/TransportMethod/index.js
Unescape View File

@ -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);

60
src/views/DeliveryForm/index.js
Unescape View File

@ -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(() => {
if (isMobile) {
setHeaderOptions(headerOptions);
}
getFactorInfo({ userId });
setHeaderOptions(headerOptions);
}, []);
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 = {

11
src/views/Faq/components/NotFound.js
Unescape View File

@ -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>
);
}

12
src/views/Faq/components/Question.js
Unescape View File

@ -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={{

15
src/views/Faq/index.js
Unescape View File

@ -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,16 +21,22 @@ 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">
<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={"برای ما پیام ارسال کنید"}
@ -38,10 +44,13 @@ function Faq({ headerOptions, setHeaderOptions }) {
/>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,

49
src/views/ShoppingCart/index.js
Unescape View File

@ -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,6 +185,7 @@ function ShoppingCart({
<span className="font-medium text-greenBA text-sm mr-2">تومان</span>
</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" }}
@ -190,13 +195,45 @@ function ShoppingCart({
هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
</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>

Write Preview
Loading…
Cancel
Save