101 lines
3.7 KiB
101 lines
3.7 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
const maxMobileSize = 550; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, |
|
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, |
|
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, |
|
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
|
strong: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 90, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
}, |
|
mobile: { |
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, |
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, |
|
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, |
|
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, |
|
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, |
|
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, |
|
}, |
|
}; |
|
|
|
const Factor = (props) => { |
|
const { factorInfo } = props; |
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<div className="mobile-factor d-flex flex-column"> |
|
<div className="d-flex justify-content-between"> |
|
<strong>مبلغ سبد خرید</strong> |
|
<span>{factorInfo.sumPrice} تومان</span> |
|
</div> |
|
{/* <div className="d-flex justify-content-between"> |
|
<strong>هزینه ارسال</strong> |
|
<span> |
|
{factorInfo.transportPrice} |
|
تومان |
|
</span> |
|
</div> */} |
|
<div className="d-flex justify-content-between"> |
|
<strong>میزان تخفیف</strong> |
|
<span>{factorInfo.offPrice} تومان</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong>مالیات بر ارزش افزوده</strong> |
|
<span>{factorInfo.vatPrice} تومان</span> |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<div className="factor d-flex flex-column"> |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
مبلغ سبد خرید |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{factorInfo.sumPrice} تومان |
|
</span> |
|
</div> |
|
{/* <div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
هزینه ارسال |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{factorInfo.transportPrice} |
|
تومان |
|
</span> |
|
</div> */} |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
میزان تخفیف |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{factorInfo.offPrice} تومان |
|
</span> |
|
</div> |
|
<div className="d-flex justify-content-between"> |
|
<strong style={{ fontSize: fontSize.desktop.strong }}> |
|
مالیات بر ارزش افزوده |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
{factorInfo.vatPrice} تومان |
|
</span> |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
}; |
|
|
|
export default connect( |
|
(state) => ({ |
|
factorInfo: state.userFactor.info, |
|
}), |
|
{} |
|
)(Factor);
|
|
|