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.
 
 
 

186 lines
7.1 KiB

import React, { Component } from "react";
import { connect } from "react-redux";
import { activation } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom";
import analytics from "../../assets/icons/analytics.svg";
import qrcode from "~/assets/icons/drawer-qr.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45,
h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65,
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 24,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25,
},
};
class Activation extends Component {
state = {
value: null,
};
submitAdd() {}
render() {
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="activation d-flex flex-column align-items-center">
<Navbar />
<header className="activation__header d-flex flex-column align-items-center">
<img src={analytics} />
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
فعال سازی کتاب الکترونیک
</h1>
</header>
<div className="activation__description d-flex">
<span>.</span>
<p style={{ fontSize: fontSize.desktop.p }}>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<div className="activation__form d-flex">
<input
id="code"
type="text"
maxLength={30}
autoComplete="off"
onChange={(e) => this.setState({ code: e.target.value })}
style={{ fontSize: fontSize.desktop.form }}
/>
<button
style={{ fontSize: fontSize.desktop.form }}
onClick={() => {
this.props.updateStatus({
activationCode: this.state.code,
});
}}
>
ثبت کد فعال سازی
</button>
</div>
{/* <div className="activation__support d-flex align-center">
<span>
<img src={danger} />
</span>
<p style={{ fontSize: fontSize.desktop.p }}>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div>
<div className="activation__history d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2>
{data.map((item, i) => (
<History data={item} key={i} />
))}
</div> */}
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-activation d-flex flex-column align-items-center">
<Navbar />
<header className="mobile-activation__header d-flex flex-column align-items-center">
<img src={analytics} />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
فعال سازی کتاب الکترونیک
</h1>
<div className="mobile-activation__description d-flex">
<span>.</span>
<p style={{ fontSize: fontSize.mobile.p }}>
برای خدمات هوشمند کتاب کد فعال سازی را اینجا وارد نمایید
</p>
</div>
</header>
{/* <div className="qr-scan__box--select d-flex">
<select
onChange={(e) =>
this.setState({ facingMode: e.target.value })
}
>
<option value="environment">دوربین عقب</option>
<option value="user">دوربین جلو</option>
</select>
</div>
<div className="qr-scan__box--camera d-flex justify-content-center align-items-center">
{this.state.value !== null ? (
<div
style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })}
>
<ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div>
) : (
<Scanner parent={this} />
)}
</div> */}
<div className="mobile-activation__form d-flex flex-column">
<div className="inputBox d-flex">
<Link to="/qr-scan" className="qrb">
<img src={qrcode} alt="qr" />
</Link>
<input
id="code"
type="text"
maxLength={30}
autoComplete="off"
onChange={(e) => this.setState({ code: e.target.value })}
placeholder={"FC5DFD : مثال"}
style={{ fontSize: fontSize.mobile.form }}
/>
</div>
<button
style={{ fontSize: fontSize.mobile.form }}
// type="submit"
onClick={() => {
this.props.updateStatus({ activationCode: this.state.code });
}}
>
ثبت کد فعال سازی
</button>
</div>
{/* <div className="mobile-activation__support d-flex align-center">
<span>
<img src={danger} />
</span>
<p>
کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
وارد تا کتاب الکترونیک آن فعالسازی شود
</p>
</div> */}
{/* <div className="mobile-activation__history d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{data.map((item, i) => (
<History data={item} key={i} />
))}
</div> */}
</div>
) : null}
</>
);
}
}
export default connect((state) => ({}), {
updateStatus: activation.updateStatus,
})(Activation);