Created
July 28, 2020 05:48
-
-
Save markrowi/4351aa238f16a488d8c1586fac312de2 to your computer and use it in GitHub Desktop.
PropertyHub
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import { Link } from 'react-router-dom'; | |
| import { bindActionCreators } from 'redux'; | |
| import { connect } from 'react-redux'; | |
| import { withRouter } from 'react-router'; | |
| import PropTypes from 'prop-types'; | |
| import _ from 'lodash'; | |
| import Dialog from 'material-ui/Dialog'; | |
| import { fetchActiveAggregators } from 'Actions/actionAggregator'; | |
| import ContentLayout from '../ContentLayout/contentLayout'; | |
| import SingleLineAddressSearch from '../NavigationBar/SubComponents/au/singleLineAddressSearch'; | |
| import SingleLineAddressSearchNZ from '../NavigationBar/SubComponents/nz/singleLineAddressSearchNZ'; | |
| import ErrorNotification from '../../utilities/errorNotification'; | |
| import { ADVANCED_SEARCH } from '../../utilities/routes'; | |
| import { updateStickyHeader } from '../../actions/actionUsers'; | |
| import TermsAndCondition from '../TermsAndConditions/termsAndConditions'; | |
| import MarketInsights from './marketInsights'; | |
| import BrokerAggregator from '../Dashboard/brokerAggregator'; | |
| import RppFreeTrialRemaining from './rppFreeTrialRemaining'; | |
| import { getFilesFromFolder } from '../../utilities/functionsUtil'; | |
| import { setDashboardBgImage } from '../../utilities/apiUtil'; | |
| import { | |
| PROPERTY_RULES_TO_INDEX_MAP, | |
| PROPERTY_RULES_TO_INDEX_MAP_NZ, | |
| } from '../../constants/similarProperties'; | |
| import { setComparableRule } from '../../actions/actionComparables'; | |
| import { setErrorPropertySearch } from '../../actions/actionPropertySearch'; | |
| import UserBrandingModal from './BrandingModal/userBrandingModal'; | |
| export class Dashboard extends Component { | |
| static propTypes = { | |
| userDetails: PropTypes.object, | |
| accountDetails: PropTypes.object, | |
| errorPropertySearch: PropTypes.any, | |
| updateStickyHeader: PropTypes.func, | |
| fetchActiveAggregators: PropTypes.func, | |
| location: PropTypes.object, | |
| setDashboardBgImage: PropTypes.func, | |
| selectedBgImage: PropTypes.string, | |
| showFreeTrialModal: PropTypes.bool, | |
| RPPSubscriptionFreeTrial: PropTypes.object, | |
| region: PropTypes.number, | |
| setComparableRule: PropTypes.func, | |
| setErrorPropertySearch: PropTypes.func, | |
| }; | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| showAggregator: false, | |
| aggregators: [], | |
| }; | |
| } | |
| componentWillMount() { | |
| this.props.updateStickyHeader(true, true); | |
| this.setDashboardBgImage(); | |
| this.props.fetchActiveAggregators().then(({ aggregators }) => { | |
| this.setState({ aggregators }); | |
| }); | |
| } | |
| componentDidMount() { | |
| const { region } = this.props; | |
| let propertyRules = PROPERTY_RULES_TO_INDEX_MAP; | |
| if (region === 2) propertyRules = PROPERTY_RULES_TO_INDEX_MAP_NZ; | |
| const rules = Object.keys(propertyRules); | |
| this.props.setComparableRule(rules[0]); | |
| this.props.setErrorPropertySearch(false); | |
| } | |
| setDashboardBgImage() { | |
| const { selectedBgImage } = this.props; | |
| let dashboardBgSelected; | |
| do { | |
| dashboardBgSelected = this.ramdomizeImage(); | |
| } while (dashboardBgSelected === selectedBgImage); | |
| this.props.setDashboardBgImage(dashboardBgSelected); | |
| } | |
| ramdomizeImage() { | |
| try { | |
| const dashboardImages = getFilesFromFolder( | |
| require.context( | |
| '../../../styles/hcImages/dashboard-bg-images/', | |
| false, | |
| /\.(png|jpe?g|svg)$/, | |
| ), | |
| ); | |
| return dashboardImages[ | |
| Math.floor(Math.random() * dashboardImages.length) | |
| ]; | |
| } catch (err) { | |
| return ''; | |
| } | |
| } | |
| _renderUserBrandingModal = () => { | |
| return <UserBrandingModal />; | |
| }; | |
| renderTermsAndCondition() { | |
| const { userDetails } = this.props; | |
| if (!_.isEmpty(userDetails)) { | |
| const { acceptedTermsAndCondition } = userDetails; | |
| return ( | |
| <Dialog | |
| actions={false} | |
| modal={false} | |
| open={!acceptedTermsAndCondition} | |
| contentClassName={ | |
| window.navigator.userAgent.indexOf('Trident/7.0') >= 0 | |
| ? '' | |
| : 'custom-dialog-terms-and-condition-dashboard' | |
| } | |
| > | |
| <TermsAndCondition /> | |
| </Dialog> | |
| ); | |
| } | |
| return null; | |
| } | |
| renderBrokerAggregatorList() { | |
| const { userDetails } = this.props; | |
| const { showAggregator, aggregators } = this.state; | |
| if (!_.isEmpty(userDetails)) { | |
| const { acceptedTermsAndCondition } = userDetails; | |
| return ( | |
| <Dialog | |
| actions={false} | |
| modal={false} | |
| open={!showAggregator && acceptedTermsAndCondition} | |
| contentClassName={ | |
| window.navigator.userAgent.indexOf('Trident/7.0') >= 0 | |
| ? '' | |
| : 'custom-dialog-broker-aggregators' | |
| } | |
| > | |
| <BrokerAggregator aggregators={aggregators} /> | |
| </Dialog> | |
| ); | |
| } | |
| return null; | |
| } | |
| renderFreeTrialRemaining() { | |
| const { | |
| showFreeTrialModal, | |
| RPPSubscriptionFreeTrial, | |
| userDetails, | |
| } = this.props; | |
| const { isRPPTrialActivated, isRPPTrialUsed } = | |
| RPPSubscriptionFreeTrial || {}; | |
| const { accountSubscribed } = userDetails; | |
| if ( | |
| !accountSubscribed && | |
| showFreeTrialModal && | |
| (isRPPTrialActivated || isRPPTrialUsed) | |
| ) { | |
| return ( | |
| <Dialog actions={false} modal={false} open={showFreeTrialModal}> | |
| <RppFreeTrialRemaining /> | |
| </Dialog> | |
| ); | |
| } | |
| return null; | |
| } | |
| render() { | |
| const { userDetails, accountDetails, selectedBgImage } = this.props; | |
| let firstName = ''; | |
| if (_.isEmpty(userDetails) === false) { | |
| firstName = userDetails.firstName; | |
| } | |
| return ( | |
| <ContentLayout pathname={this.props.location.pathname}> | |
| <div className="inner-50" /> | |
| <div className="inner-100" /> | |
| <div className="DASHBOARD"> | |
| <img | |
| src={selectedBgImage} | |
| className="bg" | |
| alt="" | |
| style={{ objectFit: 'cover' }} | |
| /> | |
| <h1 | |
| className="text-center" | |
| style={{ | |
| color: '#fff', | |
| textShadow: '4px 4px 2px rgba(50, 50, 50, 1)', | |
| }} | |
| > | |
| Hi {firstName}, start your search here | |
| </h1> | |
| <div className="container"> | |
| <div className="row d-flex justify-content-end"> | |
| <div | |
| className={`searchbar-container col-12 col-md-10 d-flex pr-1 p-sm-4 | |
| ${ | |
| accountDetails && | |
| accountDetails.lookUpRegionId === 2 | |
| ? 'nz' | |
| : 'au' | |
| }`} | |
| > | |
| <div className={'container-fluid'}> | |
| <div className="row"> | |
| <div className="col-12 col-sm-9 col-md-10 col-lg-10 ml-2 mr-sm-0 ml-sm-0"> | |
| {accountDetails && | |
| accountDetails.lookUpRegionId === | |
| 2 ? ( | |
| <SingleLineAddressSearchNZ | |
| dashboard="-dash" | |
| dlSize="65px" | |
| /> | |
| ) : ( | |
| <SingleLineAddressSearch dashboard="-dash" /> | |
| )} | |
| </div> | |
| <div | |
| className="d-none d-sm-block col-3 col-sm-3 col-md-2 col-lg-2" | |
| style={{ padding: '0' }} | |
| > | |
| <Link | |
| className="pt-md-4 advance-link-2 btn btn-custom btn-blue waves-effect waves-light" | |
| to={ADVANCED_SEARCH} | |
| > | |
| <img | |
| src="/src/styles/hcImages/Advanced_Icon.svg" | |
| className="advanced-icon" | |
| alt="Advanced Search" | |
| /> | |
| | |
| <span>Advanced</span> | |
| </Link> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {this.props.errorPropertySearch && ( | |
| <ErrorNotification /> | |
| )} | |
| <div className="d-sm-none col-5 d-block p-t-10"> | |
| <Link | |
| className="advance-link-2 btn btn-custom btn-blue waves-effect waves-light" | |
| to={ADVANCED_SEARCH} | |
| > | |
| <img | |
| src="/src/styles/hcImages/Advanced_Icon.svg" | |
| className="advanced-icon" | |
| alt="Advanced Search" | |
| /> | |
| | |
| <span className="advanced-text"> | |
| Advanced | |
| </span> | |
| </Link> | |
| </div> | |
| </div> | |
| {/* <!-- end #navigation --> */} | |
| <MarketInsights accountDetails={accountDetails} /> | |
| </div> | |
| {/* <!-- end container --> */} | |
| </div> | |
| <div className="inner-100" /> | |
| <div className="inner-200" /> | |
| {userDetails.aggregator === 'No Aggregator Selected' && | |
| accountDetails.isAggregatorProvided && | |
| this.renderBrokerAggregatorList()} | |
| {this.renderTermsAndCondition()} | |
| {this._renderUserBrandingModal()} | |
| {this.renderFreeTrialRemaining()} | |
| </ContentLayout> | |
| ); | |
| } | |
| } | |
| function mapStateToProps(state) { | |
| return { | |
| accountDetails: state.nbpUserDetails.accountDetails, | |
| userDetails: state.nbpUserDetails.userDetails, | |
| notifications: state.orders.notifications, | |
| errorPropertySearch: state.propertySearch.errorPropertySearch, | |
| selectedBgImage: state.util.selectedDashboardBgImage, | |
| showFreeTrialModal: state.nbpUserDetails.showFreeTrialModal, | |
| RPPSubscriptionFreeTrial: state.nbpUserDetails.RPPSubscriptionFreeTrial, | |
| region: state.nbpUserDetails.accountDetails.lookUpRegionId, | |
| }; | |
| } | |
| function mapDispatchToProps(dispatch) { | |
| return bindActionCreators( | |
| { | |
| updateStickyHeader, | |
| fetchActiveAggregators, | |
| setDashboardBgImage, | |
| setComparableRule, | |
| setErrorPropertySearch, | |
| }, | |
| dispatch, | |
| ); | |
| } | |
| export default connect( | |
| mapStateToProps, | |
| mapDispatchToProps, | |
| )(withRouter(Dashboard)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment