reza changed cart buttons

temp
Reza_ashrafi 3 years ago
parent 02511fa550
commit 2723cd6446
  1. 37
      src/components/ButtonBetween/index.js
  2. 4
      src/views/DeliveryForm/Address/index.js
  3. 41
      src/views/DeliveryForm/TransportDate/index.js
  4. 88
      src/views/DeliveryForm/TransportMethod/index.js
  5. 8
      src/views/ShoppingCart/index.js

@ -1,14 +1,39 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
export const ButtonBetween = ({ item, status, onClick, width }) => { export const ButtonBetween = ({ item, status, onClick, width, active, toggle }) => {
return ( return toggle ? (
<button <button
className={ className={`flex justify-between items-center ${
"flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500" active ? "bg-green-50 border-green-500" : "bg-gray-50 border-gray-400"
} } bg-opacity-80 rounded-sm border-2 border-solid`}
onClick={() => onClick()} onClick={() => onClick()}
style={{ width, padding : '18px 8px' }} style={{ width, padding: "18px 8px" }}
>
<strong
className={`text-tiny ${
active ? "text-green-700" : "text-gray-700"
} font-semibold`}
>
{item}
</strong>
{status && (
<span
className={`pr-3 border-r border-solid ${
active
? "border-green-600 text-green-700"
: "border-gray-400 text-gray-500"
} text-tiny font-semibold`}
>
{status}
</span>
)}
</button>
) : (
<button
className={`flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500`}
onClick={() => onClick()}
style={{ width, padding: "18px 8px" }}
> >
<strong className="text-tiny text-green-700 font-semibold">{item}</strong> <strong className="text-tiny text-green-700 font-semibold">{item}</strong>
{status && ( {status && (

@ -86,7 +86,7 @@ function Address({
); );
}; };
return isMobile ? ( return isMobile ? (
<section className="mt-2"> <section className="mt-2 w-full">
<strong className="font-bold text-green7B dark:text-white lg:text-tiny"> <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
انتخاب آدرس انتخاب آدرس
</strong> </strong>
@ -101,7 +101,7 @@ function Address({
</ul> </ul>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<button <button
className={`flex justify-center text-tiny py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 ${ className={`flex justify-center text-tiny py-3 rounded-md bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 w-full ${
isDark ? "text-white" : "text-gray70" isDark ? "text-white" : "text-gray70"
} items-center w-full`} } items-center w-full`}
onClick={() => setPhase("address")} onClick={() => setPhase("address")}

@ -1,40 +1,21 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
//components
import ButtonBetween from "../../../components/ButtonBetween";
function TransportDate({ transportDate, isMobile }) { function TransportDate({ transportDate, isMobile }) {
const [activeDate, setActiveDate] = useState(transportDate?.times[0]); const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
const Time = ({ time }) => { const Time = ({ time }) => {
return isMobile ? ( return isMobile ? (
<button <ButtonBetween
className={`flex flex-col border-2 border-solid items-center px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${ item={time.time}
activeDate === time status={"تکمیل ظرفیت"}
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5" width="100%"
: "bg-grayF9 border-gray-200 dark:border-gray-500 dark:bg-opacity-5"
}`}
onClick={() => setActiveDate(time)} onClick={() => setActiveDate(time)}
style={{ width: "48%" }} active={activeDate === time}
> toggle={true}
<strong />
className={`text-tiny transition-all duration-500 dark:text-white ${
activeDate === time
? "text-green7B dark:text-blueC0"
: "text-blue52 dark:text-gray-400"
}`}
>
{time.time}
</strong>
{time.status === "completed" && (
<span
className={`lg:text-xs text-sm mt-1 transition-all duration-500 dark:text-white ${
activeDate === time
? "text-green7B dark:text-blueC0"
: "text-blue52 dark:text-gray-400"
}`}
>
تکمیل ظرفیت
</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 cursor-not-allowed ${ 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 ${
@ -68,7 +49,7 @@ function TransportDate({ transportDate, isMobile }) {
<strong className="font-bold text-green7B dark:text-white lg:text-tiny"> <strong className="font-bold text-green7B dark:text-white lg:text-tiny">
زمان ارسال را انتخاب کنید زمان ارسال را انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full"> <ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap w-full gap-4 mt-4">
{transportDate.times.map((time, index) => ( {transportDate.times.map((time, index) => (
<Time time={time} key={index} /> <Time time={time} key={index} />
))} ))}

@ -2,7 +2,10 @@ import React, { useEffect } from "react";
import separate from "../../../utils/separate"; import separate from "../../../utils/separate";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { transport } from "../../../redux/actions"; import { transport } from "../../../redux/actions";
//components
import Loading from "../../../components/Loading"; import Loading from "../../../components/Loading";
import ButtonBetween from "../../../components/ButtonBetween";
function TransportMethod({ function TransportMethod({
list, list,
@ -13,23 +16,18 @@ function TransportMethod({
userId, userId,
loading, loading,
}) { }) {
useEffect(() => { useEffect(() => {
if (list.length === 0) { if (list.length === 0) {
getList(); getList();
} }
}, []); }, []);
const Method = ({ method }) => { const Method = ({ method, active }) => {
return isMobile ? ( return isMobile ? (
<button <ButtonBetween
className={`flex flex-col border-2 border-solid items-center w-full px-2 py-2 rounded-md mt-4 relative transition-all duration-500 ${ width={"100%"}
factorInfo?.transportId === method?.id
? "bg-blueC0 border-blueC0 bg-opacity-5 dark:bg-opacity-5"
: "bg-grayF9 border-gray-200 dark:border-gray-500 dark:bg-opacity-5"
}`}
onClick={() => onClick={() =>
factorInfo?.transportId !== method?.id !active
? setTransport( ? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id }, { factorId: factorInfo?.id, transportId: method?.id },
{ userId }, { userId },
@ -37,42 +35,11 @@ function TransportMethod({
) )
: {} : {}
} }
> item={"ارسال با" + " " + method.name}
{loading && factorInfo?.transportId !== method?.id ? ( status={separate(method.price) + " " + "تومان"}
<Loading active={active}
size={2} toggle={true}
color={ />
factorInfo?.transportId === method?.id
? "bg-green-500"
: "bg-gray-500"
}
/>
) : (
<strong
className={`text-tiny transition-all duration-500 ${
factorInfo?.transportId === method?.id
? "text-green7B dark:text-blueC0"
: "text-blue52 dark:text-gray-400"
}`}
>
{method.name}
</strong>
)}
<span
className={`lg:text-xs text-tiny mt-2 transition-all duration-500 ${
factorInfo?.transportId === method?.id
? "text-green7B dark:text-blueC0"
: "text-blue52 dark:text-gray-400"
}`}
>
هزینه ارسال &nbsp; {separate(method.price)}
</span>
{/* <img
src={method.icon}
alt={method.name}
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2"
/> */}
</button>
) : ( ) : (
<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 ${
@ -81,7 +48,7 @@ function TransportMethod({
: "bg-grayF9 border-grayDB dark:bg-opacity-5" : "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`} }`}
onClick={() => onClick={() =>
factorInfo?.transportId !== method?.id !active
? setTransport( ? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id }, { factorId: factorInfo?.id, transportId: method?.id },
{ userId }, { userId },
@ -90,19 +57,12 @@ function TransportMethod({
: {} : {}
} }
> >
{loading && factorInfo?.transportId !== method?.id ? ( {loading && !active ? (
<Loading <Loading size={4} color={active ? "bg-green-500" : "bg-gray-500"} />
size={4}
color={
factorInfo?.transportId === method?.id
? "bg-green-500"
: "bg-gray-500"
}
/>
) : ( ) : (
<strong <strong
className={`text-tiny transition-all duration-500 ${ className={`text-tiny transition-all duration-500 ${
factorInfo?.transportId === method?.id active
? "text-green7B dark:text-white" ? "text-green7B dark:text-white"
: "text-blue52 dark:text-white" : "text-blue52 dark:text-white"
}`} }`}
@ -113,7 +73,7 @@ function TransportMethod({
<span <span
className={`text-sm transition-all duration-500 mt-2 ${ className={`text-sm transition-all duration-500 mt-2 ${
factorInfo?.transportId === method?.id active
? "text-green7B dark:text-white" ? "text-green7B dark:text-white"
: "text-blue52 dark:text-white" : "text-blue52 dark:text-white"
}`} }`}
@ -128,9 +88,13 @@ function TransportMethod({
<strong className="text-green7B font-bold dark:text-white text-base"> <strong className="text-green7B font-bold dark:text-white text-base">
لطفا یک روش ارسال انتخاب کنید لطفا یک روش ارسال انتخاب کنید
</strong> </strong>
<ul className="list-none p-0 m-0 flex flex-col w-full"> <ul className="list-none p-0 m-0 flex flex-col gap-4 w-full mt-5">
{list.map((method, index) => ( {list.map((method, index) => (
<Method method={method} key={index} /> <Method
method={method}
key={index}
active={factorInfo?.transportId === method?.id}
/>
))} ))}
</ul> </ul>
</section> </section>
@ -141,7 +105,11 @@ function TransportMethod({
</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">
{list.map((method, index) => ( {list.map((method, index) => (
<Method method={method} key={index} /> <Method
method={method}
key={index}
active={factorInfo?.transportId === method?.id}
/>
))} ))}
</ul> </ul>
</section> </section>

@ -197,17 +197,17 @@ function ShoppingCart({
<div className="flex flex-col w-full border-t border-gray-300 border-b"> <div className="flex flex-col w-full border-t border-gray-300 border-b">
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={factorInfo?.sumPrice} value={productsLength ? factorInfo?.sumPrice : 0}
type="normal" type="normal"
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={factorInfo?.offPrice} value={productsLength ? factorInfo?.offPrice : 0}
type="error" type="error"
/> />
<PriceStatus <PriceStatus
name="مالیات بر ارزش افزوده" name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009} value={productsLength ? factorInfo?.sumPrice * 0.009 : 0}
type="error" type="error"
/> />
</div> </div>
@ -216,7 +216,7 @@ function ShoppingCart({
جمع کل سبد خرید جمع کل سبد خرید
</strong> </strong>
<p className="font-medium text-greenBA text-lg dark:text-white"> <p className="font-medium text-greenBA text-lg dark:text-white">
{separate(factorInfo?.payPrice) + " " + "تومان"} {separate(productsLength ? factorInfo?.payPrice : 0) + " " + "تومان"}
</p> </p>
</div> </div>
<div <div

Loading…
Cancel
Save