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.
 
 
 

80 lines
2.8 KiB

import React from "react";
import "./index.scss";
import { connect } from "react-redux";
import { userFactor } from "~/Redux/actions";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55,
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
};
const DiscoutCode = ({ codeId, setCodeId }) => {
const [value, setValue] = React.useState(codeId || "");
function setOff() {
setCodeId({ codeId: value });
}
return (
<>
{window.innerWidth > 1000 ? (
<div className="discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید
</p>
<div className="discount-code__box d-flex align-items-center">
<input
style={{ fontSize: fontSize.desktop.input }}
type="text"
defaultValue={codeId}
onChange={(e) => setValue(e.target.value)}
/>
<button
style={{ fontSize: fontSize.desktop.button }}
onClick={setOff}
>
ثبت کد
</button>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید{" "}
</p>
<div className="mobile-discount-code__box d-flex align-items-center">
<input
style={{ fontSize: fontSize.mobile.input }}
type="text"
onChange={(e) => setValue(e.target.value)}
/>
<button
style={{ fontSize: fontSize.mobile.button }}
onClick={setOff}
>
ثبت کد
</button>
</div>
</div>
) : null}
</>
);
};
export default connect((state) => ({ codeId: state.userFactor.codeId }), {
setCodeId: userFactor.update,
})(DiscoutCode);