153 lines
3.7 KiB
JavaScript
153 lines
3.7 KiB
JavaScript
import React from "react"
|
|
import { connect } from "react-redux"
|
|
import { SpinnerCircular } from "spinners-react"
|
|
import Rating from "../Rating"
|
|
import { getImage } from "../../../actions"
|
|
|
|
class Manager extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props)
|
|
this.state = {
|
|
company: {},
|
|
photo: undefined,
|
|
loading: true,
|
|
full: false,
|
|
rate: false,
|
|
}
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
return {
|
|
company: nextProps.company
|
|
}
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
const { company } = this.state;
|
|
this._loadManagerAvatar();
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState)
|
|
{
|
|
if (prevState.company.manager_photo === undefined && this.state.company.manager_photo !== undefined)
|
|
{
|
|
this._loadManagerAvatar();
|
|
}
|
|
}
|
|
|
|
_loadManagerAvatar = () =>
|
|
{
|
|
const { company } = this.state
|
|
|
|
if (company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "")
|
|
{
|
|
getImage({ id: company.manager_photo }).then((result) => {
|
|
this.setState({ photo: result, loading: false });
|
|
});
|
|
}
|
|
else
|
|
{
|
|
if (company.manager_photo !== undefined) {
|
|
this.setState({ photo: null, loading: false });
|
|
}
|
|
}
|
|
}
|
|
|
|
_handle_onFull = () =>
|
|
{
|
|
this.setState({ full: this.state.full ? false : true });
|
|
}
|
|
|
|
_handle_onRate = (rate) =>
|
|
{
|
|
this.setState({ rate });
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { company, loading, photo, full, rate } = this.state
|
|
|
|
return (
|
|
<div className={ `helpBox_wrapper ${ rate && "rate_opened" }` }>
|
|
<div className={`helpBox ${!full ? "hidden" : ""}`}>
|
|
<div className="avatar">
|
|
{ loading ? (
|
|
<SpinnerCircular
|
|
size={24}
|
|
thickness={51}
|
|
speed={100}
|
|
color="rgba(28, 1, 169, 1)"
|
|
secondaryColor="rgba(236, 239, 244, 1)"
|
|
/>
|
|
) : (
|
|
<img
|
|
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
|
loading="lazy"
|
|
alt={company.manager_fio}
|
|
/>
|
|
) }
|
|
</div>
|
|
<div className="content">
|
|
<p className="message">Помогу выбрать новый автомобиль</p>
|
|
<p className="name">{company.manager_fio}</p>
|
|
<p className="position">{company.manager_jobtitle}</p>
|
|
<div className="info">
|
|
<a href={`mailto:${company.manager_email}`}>{company.manager_email}</a>
|
|
{ company.manager_mobilephone !== undefined &&
|
|
company.manager_mobilephone !== null &&
|
|
company.manager_mobilephone !== "" && (
|
|
<a href={`tel:+${company.manager_mobilephone.replace(/[^\d]/gm, "")}`}>
|
|
{company.manager_mobilephone}
|
|
</a>
|
|
) }
|
|
{ company.manager_telegram !== undefined &&
|
|
company.manager_telegram !== null &&
|
|
company.manager_telegram !== "" && (
|
|
<a
|
|
href={`https://telegram.me/${company.manager_telegram.replace("@", "")}`}
|
|
target="_blank"
|
|
>{`@${company.manager_telegram.replace("@", "")}`}</a>
|
|
) }
|
|
</div>
|
|
</div>
|
|
<div className="button" onClick={this._handle_onFull}></div>
|
|
</div>
|
|
<div className={`helpBox_small interactive ${full ? "hidden" : ""}`} onClick={this._handle_onFull}>
|
|
<div className="avatar">
|
|
{loading ? (
|
|
<SpinnerCircular
|
|
size={24}
|
|
thickness={51}
|
|
speed={100}
|
|
color="rgba(28, 1, 169, 1)"
|
|
secondaryColor="rgba(236, 239, 244, 1)"
|
|
/>
|
|
) : (
|
|
<img
|
|
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
|
loading="lazy"
|
|
alt={company.manager_fio}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Оценка */}
|
|
<Rating onRate={ this._handle_onRate }/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps)
|
|
{
|
|
return {
|
|
company: state.company
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Manager);
|