You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

148 lines
4.4 KiB

import React, { useEffect, useState } from "react";
import separate from "../../../utils/separate";
import { connect } from "react-redux";
import { transport } from "../../../redux/actions";
import Loading from "../../../components/Loading";
function TransportMethod({
list,
isDark,
isMobile,
setTransport,
getList,
factorInfo,
userId,
loading,
}) {
const [activeMethod, setActiveMethod] = useState(list[0]);
useEffect(() => {
if (list.length === 0) {
getList();
}
}, []);
const Method = ({ method }) => {
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 ${
factorInfo?.transportId === method?.id
? "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={`lg:text-xs text-sm mt-1 transition-all duration-500 ${
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>
) : (
<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 ${
factorInfo?.transportId === method?.id
? "bg-blueC0 bg-opacity-5 border-blueC0 dark:bg-opacity-5"
: "bg-grayF9 border-grayDB dark:bg-opacity-5"
}`}
onClick={() =>
factorInfo?.transportId !== method?.id
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
{}
)
: {}
}
>
{loading && factorInfo?.transportId !== method?.id ? (
<Loading
size={4}
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-white"
: "text-blue52 dark:text-white"
}`}
>
{method.name}
</strong>
)}
<span
className={`text-sm transition-all duration-500 mt-2 ${
factorInfo?.transportId === method?.id
? "text-green7B dark:text-white"
: "text-blue52 dark:text-white"
}`}
>
هزینه ارسال &nbsp; {separate(method.price)}
</span>
</button>
);
};
return isMobile ? (
<section className="mt-8">
<strong className="font-medium dark:text-white text-base">
لطفا یک روش ارسال انتخاب کنید
</strong>
<ul className="list-none p-0 m-0 flex flex-col">
{list.map((method, index) => (
<Method method={method} 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 gap-5 flex-wrap">
{list.map((method, index) => (
<Method method={method} key={index} />
))}
</ul>
</section>
);
}
const mapStateToProps = (state) => ({
list: state.transport.list,
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
factorInfo: state.userFactor.info,
userId: state.user.status?.id,
loading: state.transport.loading,
});
const mapDispatchToProps = {
getList: transport.list,
setTransport: transport.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);