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.
 
 
 

172 lines
4.7 KiB

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi, userFactor, userAddress } from "../../redux/actions";
import Address from "./Address";
import TransportMethod from "./TransportMethod";
import TransportDate from "./TransportDate";
import PaymentMethods from "./PaymentMethod";
//assets
import ExpressIcon from "../../assets/icons/express.svg";
import PishtazIcon from "../../assets/icons/pishtaz.svg";
export const DeliveryForm = ({
getList,
list,
setHeaderOptions,
headerOptions,
form,
factorInfo,
getFactorInfo,
userId,
isDark,
isMobile,
setPhase,
}) => {
useEffect(() => {
if (isMobile) {
setHeaderOptions(headerOptions);
}
getFactorInfo({ userId });
getList();
}, []);
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">
<Address addresses={form.addresses} />
<TransportMethod transportMethods={form.transportMethods} />
<TransportDate transportDate={form.transportDate} />
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
<PriceStatus
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
isDark={isDark}
/>
<PriceStatus
name="هزینه ارسال"
value={factorInfo?.transportPrice}
type="normal"
isDark={isDark}
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
isDark={isDark}
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
isDark={isDark}
/>
</div>
<PaymentMethods paymentMethods={form.paymentMethods} />
</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={list} setPhase={setPhase} />
</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 />
</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>
);
};
const mapStateToProps = (state) => ({
factorInfo: state.userFactor.info,
userId: state.user.status.id,
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
list : state.userAddress.list
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getFactorInfo: userFactor.info,
getList: userAddress.list
};
export default connect(mapStateToProps, mapDispatchToProps)(DeliveryForm);
DeliveryForm.defaultProps = {
form: {
addresses: [
{
address:
" تهران میدان احمد آباد خیابان شریعتی بعد از میدان فجر بن بست شکوفه پلاک 4 زنگ 12",
receiver: "احمد نام آور",
postalCode: "54352432",
cellphone: "09123456789",
},
],
transportMethods: [
{
name: "ارسال اکسپرس مخصوص شهر تهران",
cost: "25.000",
icon: ExpressIcon,
},
{
name: "ارسال با پست پیشتاز",
cost: "25.000",
icon: PishtazIcon,
},
],
transportDate: {
day: new Date(),
times: [
{
time: "ساعت 9 تا 12",
status: "completed",
},
{
time: "ساعت 12 تا 15",
status: "free",
},
{
time: "ساعت 15 تا 18",
status: "free",
},
],
},
paymentMethods: [
{
name: "پرداخت آنلاین با کلیه کارتهای عضو شبکه شتاب",
},
{
name: "پرداخت در محل",
},
],
},
};