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
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" |
|
}`} |
|
> |
|
هزینه ارسال {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" |
|
}`} |
|
> |
|
هزینه ارسال {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);
|
|
|