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);