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 { connect } from "react-redux";
export const ButtonBetween = ({ item, status, onClick, width }) => {
return (
export const ButtonBetween = ({ item, status, onClick, width, active, toggle }) => {
return toggle ? (
<button
className={
"flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500"
}
className={`flex justify-between items-center ${
active ? "bg-green-50 border-green-500" : "bg-gray-50 border-gray-400"
} bg-opacity-80 rounded-sm border-2 border-solid`}
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>
{status && (

@ -86,7 +86,7 @@ function Address({
);
};
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>
@ -101,7 +101,7 @@ function Address({
</ul>
<div className="w-full flex flex-row justify-between items-center mt-4">
<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"
} items-center w-full`}
onClick={() => setPhase("address")}

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

@ -2,7 +2,10 @@ import React, { useEffect } from "react";
import separate from "../../../utils/separate";
import { connect } from "react-redux";
import { transport } from "../../../redux/actions";
//components
import Loading from "../../../components/Loading";
import ButtonBetween from "../../../components/ButtonBetween";
function TransportMethod({
list,
@ -13,23 +16,18 @@ function TransportMethod({
userId,
loading,
}) {
useEffect(() => {
if (list.length === 0) {
getList();
}
}, []);
const Method = ({ method }) => {
const Method = ({ method, active }) => {
return isMobile ? (
<button
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 ${
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"
}`}
<ButtonBetween
width={"100%"}
onClick={() =>
factorInfo?.transportId !== method?.id
!active
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
@ -37,42 +35,11 @@ function TransportMethod({
)
: {}
}
>
{loading && factorInfo?.transportId !== method?.id ? (
<Loading
size={2}
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>
item={"ارسال با" + " " + method.name}
status={separate(method.price) + " " + "تومان"}
active={active}
toggle={true}
/>
) : (
<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 ${
@ -81,7 +48,7 @@ function TransportMethod({
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() =>
factorInfo?.transportId !== method?.id
!active
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
@ -90,19 +57,12 @@ function TransportMethod({
: {}
}
>
{loading && factorInfo?.transportId !== method?.id ? (
<Loading
size={4}
color={
factorInfo?.transportId === method?.id
? "bg-green-500"
: "bg-gray-500"
}
/>
{loading && !active ? (
<Loading size={4} color={active ? "bg-green-500" : "bg-gray-500"} />
) : (
<strong
className={`text-tiny transition-all duration-500 ${
factorInfo?.transportId === method?.id
active
? "text-green7B dark:text-white"
: "text-blue52 dark:text-white"
}`}
@ -113,7 +73,7 @@ function TransportMethod({
<span
className={`text-sm transition-all duration-500 mt-2 ${
factorInfo?.transportId === method?.id
active
? "text-green7B 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>
<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) => (
<Method method={method} key={index} />
<Method
method={method}
key={index}
active={factorInfo?.transportId === method?.id}
/>
))}
</ul>
</section>
@ -141,7 +105,11 @@ function TransportMethod({
</strong>
<ul className="list-none p-0 m-0 flex flex-row gap-5 flex-wrap">
{list.map((method, index) => (
<Method method={method} key={index} />
<Method
method={method}
key={index}
active={factorInfo?.transportId === method?.id}
/>
))}
</ul>
</section>

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

Loading…
Cancel
Save