Skip to content

Instantly share code, notes, and snippets.

@ilhamwahabi

ilhamwahabi/src\containers\DashboardAgent\DashboardAgent.container.js

Created September 17, 2020 03:00
Show Gist options
  • Save ilhamwahabi/6769ab79d57c7701213218e7c966827d to your computer and use it in GitHub Desktop.
Save ilhamwahabi/6769ab79d57c7701213218e7c966827d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
src\containers\DashboardAgent\DashboardAgent.container.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import md5 from 'md5';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { HIQCLIENT_KIND } from '../../modules/utilities/Constants';
import { getWcmsImage } from '../../modules/utilities/wcmsHelper';
import { getCountryCodePrefixedNumber } from '../../modules/utilities/MsisdnHelper';
import { loginActionCreator } from '../../action-creators';
import { actions as ScreenImagesActions } from '../../reducers/ScreenImages/ScreenImages.reducer';
import { actions as DashboardActions } from '../../reducers/Dashboard/Dashboard.reducer';
import { actions as DashboardAgentActions } from '../../reducers/EmployeeDashboard/EmployeeDashboard.reducer';
import { actions as IdentityActions } from '../../reducers/Identity/Identity.reducer';
import { actions as HeaderActions } from '../../reducers/Header/Header.reducer';
import { actions as ProfileActions } from '../../reducers/Profile/Profile.reducer';
import { actions as PackageActions } from '../../reducers/Packages/Packages.reducer';
import { actions as TicketActions } from '../../reducers/TicketOrder/TicketOrder.reducer';
import { actions as SimcardActions } from '../../reducers/Simcard/Simcard.reducer';
import { actions as PopupActions } from '../../reducers/Popup/Popup.reducer';
import { actions as WorklistActions } from '../../reducers/Worklist/Worklist.reducer';
import { actions as CRMActions } from '../../reducers/CRM/CRM.reducer';
import QueueingMachine from '../QueueingMachine/QueueingMachine.container';
import AdvancedSearch from '../AdvancedSearch/AdvancedSearch.container';
import InputSearch from '../../components/General/InputSearch/InputSearch.component';
import LazyLoaderWrapper from '../../components/General/LazyLoaderWrapper/LazyLoaderWrapper.component';
import DashboardWelcomeMessage from '../../components/DashboardWelcomeMessage/DashboardWelcomeMessage.component';
import DashboardPerformanceItem from '../../components/DashboardPerformanceItem/DashboardPerformanceItem.component';
import PopupInfo from '../../components/PopupInfoDashboard/PopupInfoDashboard.component';
import classes from './DashboardAgent.container.scss';
const propTypes = {
browser: PropTypes.object,
empProfile: PropTypes.object,
empPerformance: PropTypes.object,
hiqHeartbeat: PropTypes.object,
hiqLoginData: PropTypes.object,
hiQCounterList: PropTypes.object,
identityProfile: PropTypes.object,
intl: intlShape.isRequired,
isChange: PropTypes.object,
isLoadingEmpPerformance: PropTypes.bool,
isLoadingCustomerSearch: PropTypes.bool,
isMigration: PropTypes.bool,
privileges: PropTypes.string,
popup: PropTypes.object,
searchFrom: PropTypes.string,
screenImages: PropTypes.object,
selectedHiQClientCounter: PropTypes.object,
selectedLanguage: PropTypes.string,
getScreenImagesDispatcher: PropTypes.func,
searchCustomerDispatcher: PropTypes.func,
resetProfileAction: PropTypes.func,
resetProfileActionDispatcher: PropTypes.func,
getPerformanceAgentDispatcher: PropTypes.func,
refreshProfileAgentDispatcher: PropTypes.func,
clearLastUsedMSISDNDispatcher: PropTypes.func,
setSearchFromDispatcher: PropTypes.func,
setSelectedTimelineMonth: PropTypes.func,
resetTcashDetailDispatcher: PropTypes.func,
resetPackageDispatcher: PropTypes.func,
setSelectedHiQClientCounterDispatcher: PropTypes.func,
hiqHeartbeatActionDispatcher: PropTypes.func,
hiqCallActionDispatcher: PropTypes.func,
hiqNextActionDispatcher: PropTypes.func,
hideBurgerMenuDispatcher: PropTypes.func,
setIsChangeDispatcher: PropTypes.func,
checkMigrationPrefixActionDispatcher: PropTypes.func,
showPopupActionDispatcher: PropTypes.func,
updateSimcardProfileNewActionDispatcher: PropTypes.func,
clearInfoPopupDispatcher: PropTypes.func,
resetWorklistDispatcher: PropTypes.func,
resetCustomerInteractionActionDispatcher: PropTypes.func,
resetKIPDetailActionDispatcher: PropTypes.func
};
class DashboardAgent extends Component {
constructor (props) {
super(props);
this.hideBurgerMenu = this.hideBurgerMenu.bind(this);
this.state = {
hcode: '2',
interactionDetail: {},
isShowCategoryForm: false
};
}
hideBurgerMenu (event) {
this.props.hideBurgerMenuDispatcher();
}
componentWillMount () {
const {
refreshProfileAgentDispatcher,
clearLastUsedMSISDNDispatcher,
setSearchFromDispatcher,
searchFrom,
resetTcashDetailDispatcher,
empProfile,
resetPackageDispatcher
} = this.props;
let vaChatData = JSON.parse(localStorage.getItem('vaChat-data')) || {};
let profileName = `${get(empProfile, 'firstName', '')} ${get(empProfile, 'lastName', '')}`;
let language = vaChatData.language || 'id';
vaChatData.agentName = profileName;
vaChatData.agentId = get(empProfile, 'username', '');
vaChatData.language = language;
vaChatData.msisdn = null;
localStorage.setItem('vaChat-data', JSON.stringify(vaChatData));
// reset filteredPackage on localstorage
localStorage.removeItem('allFilteredPackages');
resetPackageDispatcher();
if (searchFrom) {
refreshProfileAgentDispatcher();
resetTcashDetailDispatcher();
}
clearLastUsedMSISDNDispatcher();
setSearchFromDispatcher(null);
this.props.setSelectedTimelineMonth(0);
if (!isEmpty(this.props.isChange)) {
this.props.setIsChangeDispatcher(null);
}
// reset data
this.props.updateSimcardProfileNewActionDispatcher();
this.props.resetWorklistDispatcher();
}
onSelectHiQClientCounter (hiQCounter) {
this.props.setSelectedHiQClientCounterDispatcher(hiQCounter);
this.createEventListener(hiQCounter);
}
createEventListener (hiQCounter) {
const { empProfile, searchCustomerDispatcher } = this.props;
if (window.addEventListener) {
var messagePayload, hiQClientIFrame, strMessagePayload;
window.addEventListener(
'message',
function (e) {
var responseMessage = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
switch (responseMessage.kind) {
case HIQCLIENT_KIND.CONNECT:
messagePayload = {
kind: responseMessage.kind,
ver: '2.0',
cid: hiQCounter.CID
};
hiQClientIFrame = document.getElementById('hiQClientIFrame');
strMessagePayload = JSON.stringify(messagePayload);
hiQClientIFrame.contentWindow.postMessage(strMessagePayload, '*');
break;
case HIQCLIENT_KIND.LOGIN:
messagePayload = {
kind: responseMessage.kind,
code: responseMessage.code,
account_source: 'csdm_account',
user: empProfile.username.toLowerCase(),
pwd: md5(empProfile.username.toLowerCase())
};
hiQClientIFrame = document.getElementById('hiQClientIFrame');
strMessagePayload = JSON.stringify(messagePayload);
hiQClientIFrame.contentWindow.postMessage(strMessagePayload, '*');
break;
case HIQCLIENT_KIND.CALL:
if (responseMessage.returnval) {
searchCustomerDispatcher(responseMessage.params.FUserRemark1, 'agent');
}
break;
case HIQCLIENT_KIND.EDIT:
searchCustomerDispatcher(responseMessage.params.FUserRemark1, 'agent');
break;
default:
}
},
false
);
}
}
componentDidMount () {
const { selectedHiQClientCounter, hiqLoginData } = this.props;
if (selectedHiQClientCounter) {
this.createEventListener(selectedHiQClientCounter);
}
// this is for burger menu click outside handler
// document.addEventListener('mouseup', this.hideBurgerMenu);
if (hiqLoginData) this.hiqNext();
this.timer = setInterval(this.heartbeat, 5500);
}
heartbeat = () => {
const { hiqLoginData } = this.props;
if (hiqLoginData) {
const hbData = {
scode: hiqLoginData.scode,
hcode: this.state.hcode,
accessToken: hiqLoginData.accessToken
};
this.props.hiqHeartbeatActionDispatcher(hbData);
}
};
endHeartbeat = () => {
clearInterval(this.timer);
};
getPerformance () {
const { getPerformanceAgentDispatcher, empProfile } = this.props;
let username = empProfile.employeeCode;
let d = new Date();
let month = d.getMonth() + 1;
if (month < 10) {
month = '0' + month;
} else {
month = month.toString();
}
let year = d.getFullYear();
getPerformanceAgentDispatcher(username, '' + year + month);
}
onMSISDNSearch = async (data) => {
if (!isEmpty(data.mobileNumber)) {
// enable for brigding only
const { searchCustomerDispatcher } = this.props;
this.props.resetProfileActionDispatcher();
this.props.resetCustomerInteractionActionDispatcher();
this.props.resetKIPDetailActionDispatcher();
let msisdn = getCountryCodePrefixedNumber(data.mobileNumber);
searchCustomerDispatcher(msisdn, 'agent', null, null);
}
};
onSearchMsisdn = (msisdn) => {
const { searchCustomerDispatcher } = this.props;
this.props.resetProfileActionDispatcher();
this.props.resetCustomerInteractionActionDispatcher();
this.props.resetKIPDetailActionDispatcher();
searchCustomerDispatcher(getCountryCodePrefixedNumber(msisdn), 'agent', null, null);
}
onAdvanceSearchClick = () => {
this.setState({ isShowCategoryForm: true });
};
onCloseCategoryForm = () => {
this.setState({ isShowCategoryForm: false });
};
onCloseSubscriptionForm = () => {
this.setState({ isShowSubscriptionForm: false });
};
generateSearchMSISDN () {
const { isLoadingCustomerSearch, privileges, intl: { formatMessage } } = this.props;
const { isShowCategoryForm, isShowSubscriptionForm } = this.state;
if (privileges && privileges.indexOf('GRP-DU;') >= 0 && privileges.indexOf('GRP-DA-SRC') >= 0) {
return (
<div className={classes.searchContainer}>
<div className={classes.msisdnSearch}>
<label>{formatMessage({ id: 'search.mobile.number.label' })}</label>
<InputSearch
isLoading={isLoadingCustomerSearch}
placeholder={formatMessage({ id: 'search.mobile.number.placeholder' })}
validation='number'
style={{ width: '23rem' }}
onSearch={this.onSearchMsisdn}
/>
</div>
<div className={classes.advanceSearchSection}>
<div className={classes.advanceSearch} onClick={this.onAdvanceSearchClick}>
<FormattedMessage id="advance.search.label" />
</div>
</div>
<AdvancedSearch
isShowCategoryForm={isShowCategoryForm}
isShowSubscriptionForm={isShowSubscriptionForm}
onCloseCategoryForm={this.onCloseCategoryForm}
onCloseSubscriptionForm={this.onCloseSubscriptionForm}
onMSISDNSearch={this.onMSISDNSearch}
/>
</div>
);
}
}
generateAgentDetail () {
const { empProfile, selectedHiQClientCounter } = this.props;
let profile = empProfile;
let isAgent = true;
const profileName = `${get(profile, 'firstName', '')} ${get(profile, 'lastName', '')}`;
return (
<div className={classes.agentDetailsContainer}>
<div className={classes.agentInforContainer}>
<DashboardWelcomeMessage profileName={profileName} isAgent={isAgent} />
<div className={classes.nik}>
<FormattedMessage id="dashboard.agent.nik" />
{empProfile.employeeCode}
</div>
<div className={classes.agentLabel}>
{empProfile.role}
{/* <FormattedMessage id='dashboard.agent.label' />*/}
</div>
<div className={classes.grapariLocation}>{empProfile.siteName}</div>
</div>
{!isEmpty(selectedHiQClientCounter) && (
<QueueingMachine
startHiqCall={this.startHiqCall}
endHeartbeat={this.endHeartbeat}
onMSISDNSearch={this.onMSISDNSearch}
/>
)}
</div>
);
}
startHiqCall = () => {
const hiqCallData = {
scode: this.props.hiqLoginData.scode,
accessToken: this.props.hiqLoginData.accessToken,
type: 'sequence',
TZO: 0
};
this.props.hiqCallActionDispatcher(hiqCallData);
};
hiqNext = () => {
const hiqNextData = {
scode: this.props.hiqLoginData.scode,
hcode: this.state.hcode,
accessToken: this.props.hiqLoginData.accessToken
};
this.props.hiqNextActionDispatcher(hiqNextData);
};
generatePerformance () {
const { empProfile, privileges } = this.props;
if (empProfile.roleType === 'accountManager' || privileges.indexOf('GRP-DA-PF') < 0) {
return <div className={classes.performanceContainer} />;
}
return <div className={classes.performanceContainer}>{this.generatePerformanceItems()}</div>;
}
generatePerformanceItems () {
const {
selectedLanguage,
empPerformance = {},
intl: { formatMessage },
isLoadingEmpPerformance
} = this.props;
const items = [
{
title: formatMessage({ id: 'dashboard.agent.transaction' }),
value: get(empPerformance, 'data.performance.transactions') || '0',
type: 'count'
},
{
title: formatMessage({ id: 'dashboard.agent.revenue' }),
value: get(empPerformance, 'data.performance.revenue') || '0',
type: 'Rp'
}
];
return items.map((item) => {
return (
<LazyLoaderWrapper
isLoading={isLoadingEmpPerformance}
className={classes.performanceItem}
key={item.title}
>
<DashboardPerformanceItem key={item.title} item={item} language={selectedLanguage} />
</LazyLoaderWrapper>
);
});
}
render () {
const { screenImages, browser, empProfile, popup } = this.props;
// fetching background image from WCMS which is available with us in store now
// For API implementation plz refer to ScreenImages.reducer.js
let backgroundImageUrl = getWcmsImage(
screenImages.dashboardHero,
browser,
'/images/dashboard-hero.jpg'
);
let divStyle = {
backgroundImage: backgroundImageUrl ? 'url(' + backgroundImageUrl + ')' : 'transparent'
};
return (
<div className={classes.dashboardAgentContainer}>
<div className={classes.dashboardAgentMainContainer} style={divStyle}>
<div className={classes.mainContent}>
{empProfile && !empProfile.gtg && this.generateSearchMSISDN()}
{this.generateAgentDetail()}
{this.generatePerformance()}
<PopupInfo
infoText={popup ? popup.formattedHTML : null}
clearInfoPopupDispatcher={this.props.clearInfoPopupDispatcher}
/>
</div>
</div>
</div>
);
}
}
DashboardAgent.propTypes = propTypes;
const mapStateToProps = (state) => {
const tempdashboardAgent = state.employeeDashboard.toJS();
const tempHeader = state.header.toJS();
const tempProfile = state.profile.toJS();
const tempTicket = state.ticketOrder.toJS();
const tempScreenImages = state.screenImages.toJS();
const tempSimcard = state.simcard.toJS();
return {
browser: state.responsive,
identityProfile: state.identity.getIn(['profile', 'user_metadata']),
isChange: tempTicket.isChange,
isLoadingEmpPerformance: tempdashboardAgent.isLoadingEmpPerformance,
isLoadingCustomerSearch: tempProfile.isLoadingCustomerSearch,
isMigration: tempSimcard.isMigration,
empProfile: tempdashboardAgent.empProfile,
empPerformance: tempdashboardAgent.empPerformance,
screenImages: tempScreenImages,
selectedLanguage: state.identity.getIn(['profile', 'user_metadata', 'language']),
searchFrom: tempHeader.searchFrom,
privileges: tempdashboardAgent.privileges,
hiqHeartbeat: tempdashboardAgent.hiqHeartbeat,
hiqLoginData: tempdashboardAgent.hiqLoginData,
selectedHiQClientCounter: tempdashboardAgent.selectedHiQClientCounter,
hiqCall: tempdashboardAgent.hiqCall,
hiQCounterList: tempdashboardAgent.hiQCounterList,
popup: tempdashboardAgent.popup
};
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
{
resetProfileAction: DashboardActions.resetProfileAction,
getScreenImagesDispatcher: ScreenImagesActions.getScreenImages,
searchCustomerDispatcher: loginActionCreator.customerSearchAction,
getPerformanceAgentDispatcher: DashboardAgentActions.getPerformanceAgent,
refreshProfileAgentDispatcher: DashboardAgentActions.refreshProfileAgentAction,
hiqHeartbeatActionDispatcher: DashboardAgentActions.hiqHeartbeatAction,
hiqCallActionDispatcher: DashboardAgentActions.hiqCallAction,
hiqNextActionDispatcher: DashboardAgentActions.hiqNextAction,
clearLastUsedMSISDNDispatcher: IdentityActions.clearLastUsedMSISDN,
setSearchFromDispatcher: HeaderActions.setSearchFromAction,
setSelectedTimelineMonth: ProfileActions.setSelectedTimelineMonthAction,
resetTcashDetailDispatcher: ProfileActions.resetTcashDetailAction,
resetProfileActionDispatcher: ProfileActions.resetProfileAction,
resetPackageDispatcher: PackageActions.resetPackageAction,
setSelectedHiQClientCounterDispatcher: DashboardAgentActions.setSelectedHiQClientCounterAction,
hideBurgerMenuDispatcher: HeaderActions.hideBurgerMenu,
setIsChangeDispatcher: TicketActions.setIsChange,
checkMigrationPrefixActionDispatcher: SimcardActions.checkMigrationPrefixAction,
showPopupActionDispatcher: PopupActions.showPopupAction,
updateSimcardProfileNewActionDispatcher: SimcardActions.updateSimcardProfileNewAction,
clearInfoPopupDispatcher: DashboardAgentActions.clearInfoPopup,
resetWorklistDispatcher: WorklistActions.resetWorklist,
resetCustomerInteractionActionDispatcher: CRMActions.resetCustomerInteractionAction,
resetKIPDetailActionDispatcher: CRMActions.resetKIPDetailAction
},
dispatch
);
};
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DashboardAgent));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment