119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import { SpinnerCircular } from 'spinners-react';
|
|
|
|
import { getImage } from '../../../actions';
|
|
|
|
class Manager extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
company: {},
|
|
photo: undefined,
|
|
loading: true,
|
|
full: 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 });
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { company, loading, photo, full, } = this.state;
|
|
|
|
return (
|
|
<div className="helpBox_wrapper">
|
|
<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]/mg, '') }` }>{ 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>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state, ownProps)
|
|
{
|
|
return {
|
|
company: state.company,
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Manager); |