|
|
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: "پرداخت در محل", |
|
|
}, |
|
|
], |
|
|
}, |
|
|
};
|
|
|
|