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