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 ( return (
<button <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 ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${ } ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity
@ -36,3 +36,6 @@ export default function Button({
</button> </button>
); );
} }

@ -228,7 +228,7 @@ function Navbar({
</div> </div>
<div <div
className={`w-full flex flex-col z-20 ${ 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 "> <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 <div
className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${ 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={{ style={{
transition: "all 0.3s", // transition: "all 0.3s",
}} }}
> >
<div className="ml-10 flex flex-row items-center"> <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 }) { function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) {
useEffect(() => { useEffect(() => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (!isMobile) { // if (!isMobile) {
window.addEventListener("scroll", () => { // window.addEventListener("scroll", () => {
if (window.scrollY >= 64) { // if (window.scrollY >= 64) {
setDesktopContentTransform(true); // setDesktopContentTransform(true);
} else { // } else {
setDesktopContentTransform(false); // setDesktopContentTransform(false);
} // }
}); // });
} // }
}); });
}, []); }, []);
return ( return (

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
import Radio from "../../../components/Radio"; import Radio from "../../../components/Radio";
function Address({ addresses, isDark }) { function Address({ addresses, isDark, isMobile }) {
const [activeAddress, setActiveAddress] = useState(addresses[0]); const [activeAddress, setActiveAddress] = useState(addresses[0]);
const Location = ({ address }) => { const Location = ({ address }) => {
return ( return isMobile ? (
<button <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 ${ 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 activeAddress === address
@ -30,9 +30,38 @@ function Address({ addresses, isDark }) {
</li> </li>
</div> </div>
</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 ${
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"> <section className="mt-2">
<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-col"> <ul className="list-none p-0 m-0 flex flex-col">
@ -44,7 +73,26 @@ function Address({ addresses, isDark }) {
<Button <Button
title="یک آدرس جدید اضافه کنید +" title="یک آدرس جدید اضافه کنید +"
backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30" 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" bgOpacity="bg-opacity-100"
width="100%" width="100%"
color={isDark ? "text-white" : "text-gray70"} color={isDark ? "text-white" : "text-gray70"}
@ -56,6 +104,7 @@ function Address({ addresses, isDark }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
}); });
export default connect(mapStateToProps)(Address); export default connect(mapStateToProps)(Address);

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
import Radio from "../../../components/Radio"; import Radio from "../../../components/Radio";
function TransportDate({ transportDate, isDark }) { function TransportDate({ transportDate, isDark, isMobile }) {
const [activeDate, setActiveDate] = useState(transportDate?.times[0]); const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
const Time = ({ time }) => { const Time = ({ time }) => {
return ( return isMobile ? (
<button <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 ${ 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 activeDate === time
@ -32,22 +32,62 @@ function TransportDate({ transportDate, isDark }) {
</span> </span>
)} )}
</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 ${
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"> <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"> <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap">
{transportDate.times.map((time, index) => ( {transportDate.times.map((time, index) => (
<Time time={time} key={index} /> <Time time={time} key={index} />
))} ))}
</ul> </ul>
</section> </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) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
}); });
export default connect(mapStateToProps)(TransportDate); export default connect(mapStateToProps)(TransportDate);

@ -3,10 +3,10 @@ import { connect } from "react-redux";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
import Radio from "../../../components/Radio"; import Radio from "../../../components/Radio";
function TransportMethod({ transportMethods, isDark }) { function TransportMethod({ transportMethods, isDark, isMobile }) {
const [activeMethod, setActiveMethod] = useState(transportMethods[0]); const [activeMethod, setActiveMethod] = useState(transportMethods[0]);
const Method = ({ method }) => { const Method = ({ method }) => {
return ( 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 activeMethod === method
@ -39,9 +39,42 @@ function TransportMethod({ transportMethods, isDark }) {
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2" className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/> />
</button> </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"> <section className="mt-8">
<strong className="font-medium dark:text-white"> <strong className="font-medium dark:text-white">
لطفا یک روش ارسال انتخاب کنید لطفا یک روش ارسال انتخاب کنید
@ -52,11 +85,23 @@ function TransportMethod({ transportMethods, isDark }) {
))} ))}
</ul> </ul>
</section> </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) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
}); });
export default connect(mapStateToProps)(TransportMethod); export default connect(mapStateToProps)(TransportMethod);

@ -9,22 +9,6 @@ import PaymentMethods from "./PaymentMethod";
import ExpressIcon from "../../assets/icons/express.svg"; import ExpressIcon from "../../assets/icons/express.svg";
import PishtazIcon from "../../assets/icons/pishtaz.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 = ({ export const DeliveryForm = ({
setHeaderOptions, setHeaderOptions,
headerOptions, headerOptions,
@ -33,13 +17,33 @@ export const DeliveryForm = ({
getFactorInfo, getFactorInfo,
userId, userId,
isDark, isDark,
isMobile,
}) => { }) => {
useEffect(() => { useEffect(() => {
setHeaderOptions(headerOptions); if (isMobile) {
setHeaderOptions(headerOptions);
}
getFactorInfo({ userId }); 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"> <div className="w-full flex flex-col px-4 pb-10">
<Address addresses={form.addresses} /> <Address addresses={form.addresses} />
<TransportMethod transportMethods={form.transportMethods} /> <TransportMethod transportMethods={form.transportMethods} />
@ -72,6 +76,27 @@ export const DeliveryForm = ({
</div> </div>
<PaymentMethods paymentMethods={form.paymentMethods} /> <PaymentMethods paymentMethods={form.paymentMethods} />
</div> </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, factorInfo: state.userFactor.info,
userId: state.user.status.id, userId: state.user.status.id,
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -8,18 +8,17 @@ 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-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"> <div className="flex flex-col w-3/4 lg:w-full">
{title && <strong className="text-xs text-white">{title}</strong>} {title && <strong className="text-xs text-white lg:text-sm">{title}</strong>}
<span <span
className={`text-xs text-white font-light ${title ? "mt-2" : ""}`} className={`text-xs text-white font-light lg:text-sm ${title ? "mt-2 lg:mt-3" : ""}`}
style={{ fontSize: "calc(100vw / 36)" }}
> >
{subTitle} {subTitle}
</span> </span>
</div> </div>
<img src={arrowLeftWhite} alt="" className="w-7" /> <img src={arrowLeftWhite} alt="" className="w-7 lg:mr-6" />
</Link> </Link>
); );
} }

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

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

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

Loading…
Cancel
Save