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.
 
 
 

94 lines
3.4 KiB

import React, { Component } from "react";
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 { list, parent } = props;
const totalPrice = () => {
let total = 0;
for (let i = 0; i < list.length; i++) {
total += list[i].product.price * list[i].count;
}
return total;
};
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-factor d-flex flex-column">
<div className="d-flex justify-content-between">
<strong>مبلغ سبد خرید</strong>
<span>{totalPrice()} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>هزینه ارسال</strong>
<span>
{props.parent.props.list.length
? props.parent.state.selectedDelivery.price
: 0}{" "}
تومان
</span>
</div>
<div className="d-flex justify-content-between">
<strong>میزان تخفیف</strong>
<span>{props.parent.state.discount} تومان</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 }}>
{totalPrice()} تومان
</span>
</div>
<div className="d-flex justify-content-between">
<strong style={{ fontSize: fontSize.desktop.strong }}>
هزینه ارسال
</strong>
<span style={{ fontSize: fontSize.desktop.span }}>
{props.parent.props.list.length
? props.parent.state.selectedDelivery.price
: 0}{" "}
تومان
</span>
</div>
<div className="d-flex justify-content-between">
<strong style={{ fontSize: fontSize.desktop.strong }}>
میزان تخفیف
</strong>
<span style={{ fontSize: fontSize.desktop.span }}>
{props.parent.state.discount} تومان
</span>
</div>
</div>
) : null}
</>
);
};
export default Factor;