props.onContinueClicked(e)} dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(screen.Description)}} /> \r\n } \r\n
\r\n \r\n \r\n )} \r\n \r\n ); \r\n});\r\n\r\nexport default Screens;\r\n\r\nScreens.propTypes = {\r\n screens: PropTypes.array.isRequired\r\n};","import React from 'react';\r\nimport Screens from '../Screens/Screens';\r\n\r\nconst Page = React.memo(props => { \r\n return(\r\n
\r\n \r\n \r\n ); \r\n});\r\n\r\nexport default Page;","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const DetailSummary = styled.div`\r\n @media (min-width:1201px) { \r\n margin-left: auto;\r\n margin-right: auto;\r\n width: 95%;\r\n padding-top:.5em; \r\n }\r\n`;\r\n\r\nexport const H2 = styled.h2`\r\n font-size:24px !important;\r\n text-align:center;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n @media(min-width:1201px) { \r\n .selected-values { \r\n text-align: right; margin-left: auto; margin-right: auto; \r\n } \r\n }\r\n\r\n @media(max-width:1200px) {\r\n .selected-values {\r\n margin-bottom: 1em; \r\n margin-left:1em !important;\r\n margin-right:1em !important;\r\n }\r\n \r\n .selected-values label { \r\n width:100%; \r\n text-align: left; \r\n }\r\n }\r\n`;\r\n \r\nconst DetailedSummary = React.memo(props => { \r\n if (!props.detailedSummary) return null;\r\n\r\n return(\r\n
\r\n Configuration Summary
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.detailedSummary.map(opt => \r\n \r\n { \r\n if (!opt.Value) return null;\r\n\r\n let val = opt.Type === 5 ? '$' + opt.Value : opt.Value;\r\n \r\n return ( \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n ); \r\n })} \r\n \r\n ); \r\n});\r\n\r\nexport default DetailedSummary;\r\n\r\nDetailedSummary.propTypes = {\r\n detailedSummary: PropTypes.array.isRequired\r\n};","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nexport const ProductPreviewWrapper = styled.div`\r\n @media (min-width: 1201px) { \r\n text-align: center; \r\n }\r\n\r\n @media (max-width: 768px) { \r\n border-top: solid 1px lightgray;\r\n }\r\n`;\r\n\r\nexport const Img = styled.img` \r\n max-width: 550px;\r\n \r\n @media(min-width:1201px) {\r\n position: relative;\r\n top: -1em;\r\n }\r\n \r\n @media(max-width:1200px) {\r\n width:99%;\r\n max-width: 250px;\r\n }\r\n`;\r\n\r\nconst ProductPreview = React.memo(props => { \r\n return (\r\n
\r\n 
\r\n \r\n ); \r\n});\r\n\r\nexport default ProductPreview;","import React, { Component } from 'react';\r\nimport { TabContent, TabPane, Nav, NavItem, NavLink, Container, Row, Col } from 'reactstrap';\r\nimport classnames from 'classnames';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport Page from '../Page/Page';\r\nimport DetailedSummary from '../DetailedSummary/DetailedSummary';\r\nimport ProductPreview from '../ProductPreview/ProductPreview';\r\nimport styled from 'styled-components';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\n\r\nexport const NavItemTabsStyled = styled(Nav)` \r\n border: solid 5px #EEEEEE;\r\n`;\r\n\r\nexport const NavItemStyled = styled(NavItem)`\r\n @media(max-width:1200px) {\r\n &.nav-item a { \r\n padding: 0;\r\n padding-left: 7px;\r\n }\r\n }\r\n`;\r\n\r\nexport const ColScrollable = styled(Col)`\r\n @media(min-width: 1201px) { \r\n overflow-y: visible; \r\n padding: 0px 0px 0px 0px;\r\n }\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n @media(min-width: 1201px) { \r\n border-style: solid;\r\n border-size: 2em;\r\n border-color: #EEEEEE;\r\n padding: 0px 0px 0px 0px;\r\n }\r\n`;\r\n\r\nexport const ColRightTab = styled(Col)`\r\n border-left: 2px solid lightgray;\r\n`;\r\n\r\nexport const ArrowWrapper = styled.div`\r\n cursor: pointer; \r\n`;\r\n\r\nexport const NoMarginRow = styled(Row)`\r\n margin-top: 0 !important;\r\n margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const ButtonStyled = styled.button`\r\n border: 2px solid #e2231a;\r\n border-radius: 5px;\r\n background-color: #FFF;\r\n`;\r\n\r\nexport class TabControl extends Component {\r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n this.props.sessionActions.setActiveTab(0); \r\n\r\n this.state = {\r\n detailsOpen: false\r\n }\r\n }\r\n \r\n toggle(tab) {\r\n if (this.props.session.activeTab !== tab) this.props.sessionActions.setActiveTab(tab); \r\n }\r\n\r\n toggleDetails() {\r\n let isOpen = this.state.detailsOpen;\r\n this.setState({detailsOpen: !isOpen });\r\n }\r\n\r\n getRandomInt(max) {\r\n return Math.floor(Math.random() * Math.floor(max));\r\n }\r\n\r\n render() { \r\n if (!this.props.api.ui) return
\r\n\r\n let arrowCssClass = this.state.detailsOpen ? \"bi bi-arrow-right-square-fill\" : \"bi bi-arrow-left-square-fill\";\r\n let rightColCss = this.props.api.ui.d.ImageUrl === \"\" ? \"d-none\" : \"\";\r\n let imageUrl = this.props.api.ui.d.ImageUrl + '?q=' + this.getRandomInt(99999).toString()\r\n return ( \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n this.toggleDetails()}>\r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {this.props.api.ui.d.Pages.map((page, index) => \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.api.ui.d.ImageUrl !== \"\" && }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )} \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators( apiActions, dispatch),\r\n sessionActions: bindActionCreators( sessionActions, dispatch),\r\n };\r\n} \r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TabControl);","import * as types from './actionTypes';\r\nimport { withRouter } from 'react-router-dom';\r\nimport axios from 'axios';\r\nimport ErrorHandler from '../modules/errorHandler';\r\nimport * as alerts from './alertActions';\r\nimport * as quoteOrderCommonActions from './quoteOrderCommonActions';\r\n\r\nexport const createUser = (selectedLocationsArray, roleId, username, password, firstName, lastName, companyId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/createUser', { selectedLocationsArray: selectedLocationsArray, roleId: roleId, username: username, password: password, firstName: firstName, lastName: lastName, companyId: companyId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n console.log(res.data); \r\n if (res.data.result.includes(\"existing\") === true){\r\n dispatch(alerts.showSuccessAlert(res.data.result));\r\n } else if (res.data.result === \"in use\") {\r\n dispatch(alerts.showFailureAlert(\"Username already in use at the given location.\"));\r\n }\r\n else { \r\n dispatch(alerts.showSuccessAlert(\"User successfully created!\"));\r\n }\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const updateUser = (selectedLocationsArray, roleId, username, firstName, lastName, companyId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/updateUser', { selectedLocationsArray: selectedLocationsArray, roleId: roleId, username: username, firstName: firstName, lastName: lastName, companyId: companyId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n dispatch(alerts.showSuccessAlert(\"User successfully updated!\"));\r\n dispatch(getActiveUsersCompanyLocations(username));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getCompanyLocations = (company, fabricatorId, installerId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getCompanyLocations', { company: company, fabricatorId: fabricatorId, installerId: installerId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n dispatch(getCompanyLocationsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getAdPatchTypes = (company) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getAdPatchTypes', { company: company })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n dispatch(getAdPatchTypesSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const deleteCompanyLocation = (companyLocationId, company, fabricatorId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/deleteCompanyLocation', { companyLocationId: companyLocationId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res); \r\n } else { \r\n dispatch(getCompanyLocations(company, fabricatorId));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getFabricatorLocations = (fabricatorId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getFabricatorLocations', { fabricatorId: fabricatorId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n dispatch(getFabricatorLocationsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getInstallerLocations = (installerId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getInstallerLocations', { installerId: installerId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n alerts.showFailureAlert(res); \r\n } else { \r\n dispatch(getInstallerLocationsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const updateUserCompanyLocation = (locationId, locationValue, locationChecked) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/updateUserCompanyLocation', { locationId: locationId, locationValue: locationValue, locationChecked })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getCompanyLocationAddresses = (companyLocationId) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getCompanyLocationAddresses', { companyLocationId: companyLocationId })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getCompanyLocationAddressesSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const updateCompanyAddress = (id, sqlColumn, value) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/updateCompanyAddress', { id: id, sqlColumn: sqlColumn, value: value })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport const getActiveUsersCompanyLocations = (username) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getActiveUsersCompanyLocations', { username: username })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getActiveUsersCompanyLocationsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getActiveUserRole = (username) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getActiveUserRole', { username: username })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getActiveUserRoleSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getAllProducts = () => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getAllProducts')\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getAllProductsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const updateCompanyLocation = (id, column, value) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/updateCompanyLocation', { id: id, column: column, value: value })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\n// export const updateCompanyBranch = (companyLocationId, branchId) => {\r\n// return dispatch => {\r\n// return axios.post('/api/v1/administration/updateCompanyBranch', { companyLocationId: companyLocationId, branchId: branchId })\r\n// .then(res => { \r\n// if (res.status !== 200) {\r\n// ErrorHandler.logError(res);\r\n// dispatch(alerts.showFailureAlert(res)); \r\n// } \r\n// }).catch(function(error) {\r\n// ErrorHandler.logError(error); \r\n// });\r\n// }\r\n// }\r\n\r\n// export const getAllCompanyBranches = (companyLocationId) => {\r\n// return dispatch => {\r\n// return axios.post('/api/v1/administration/getAllCompanyBranches', { companyLocationId: companyLocationId })\r\n// .then(res => { \r\n// if (res.status !== 200) {\r\n// ErrorHandler.logError(res); \r\n// dispatch(alerts.showFailureAlert(res)); \r\n// } else {\r\n// if (res.data.result.length > 0)\r\n// dispatch(getAllCompanyBranchesesSuccess(res.data.result)); \r\n// } \r\n// }).catch(function(error) {\r\n// ErrorHandler.logError(error); \r\n// });\r\n// }\r\n// }\r\n\r\n// export const getAllCompanyLocationBranch = (company, companyLocationId) => {\r\n// return dispatch => {\r\n// return axios.post('/api/v1/administration/getAllCompanyBranches', { company: company, companyLocationId: companyLocationId })\r\n// .then(res => { \r\n// if (res.status !== 200) {\r\n// ErrorHandler.logError(res); \r\n// dispatch(alerts.showFailureAlert(res)); \r\n// } else {\r\n// if (res.data.result.length > 0)\r\n// dispatch(getAllCompanyBranchesesSuccess(res.data.result)); \r\n// } \r\n// }).catch(function(error) {\r\n// ErrorHandler.logError(error); \r\n// });\r\n// }\r\n// }\r\n\r\nexport const createCompanyLocation = (company, username) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/createCompanyLocation', { company: company, username: username })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else { \r\n dispatch(setActiveCompanyLocation(res.data.result[0].companyLocationId));\r\n dispatch(getCompanyLocationAddresses(res.data.result[0].companyLocationId));\r\n dispatch(getCompanyLocations(company));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const createCompany = (manufacturer) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/createCompany', { manufacturer: manufacturer })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else { \r\n dispatch(setActiveCompany(res.data.result[0].companyId));\r\n dispatch(getAllCompanies(manufacturer));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport const getAllCompanies = (manufacturer, includeFabricators, includeInstallers) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getAllCompanies', { manufacturer: manufacturer, includeFabricators: includeFabricators, includeInstallers: includeInstallers })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getAllCompaniesSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n }\r\n}\r\n\r\nexport const getAllFabricators = (manufacturer) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getAllFabricators', { manufacturer: manufacturer })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getAllFabricatorsSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport const getAllInstallers = (manufacturer) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getAllInstallers', { manufacturer: manufacturer })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(getAllInstallersSuccess(res.data.result));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport const updatePasswordAdmin = (username, password) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/updatePasswordAdmin', { username: username, password: password })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n dispatch(alerts.showSuccessAlert(\"Password updated successfully!\"));\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport const searchByUsername = (username) => {\r\n return dispatch => {\r\n return axios.post('/api/v1/administration/getUserByUsername', { username: username })\r\n .then(res => { \r\n if (res.status !== 200) {\r\n ErrorHandler.logError(res);\r\n dispatch(alerts.showFailureAlert(res)); \r\n } else {\r\n if (res.data.result && res.data.result.length > 0) { \r\n console.log(res.data.result);\r\n dispatch(setActiveUser(res.data.result[0].username)); \r\n dispatch(setActiveCompany(res.data.result[0].companyId));\r\n dispatch(getCompanyLocations(res.data.result[0].company)); \r\n dispatch(getActiveUsersCompanyLocations(res.data.result[0].username));\r\n dispatch(quoteOrderCommonActions.getUsersAssignedToLocation(res.data.result[0].companyLocationId));\r\n } else {\r\n dispatch(alerts.showFailureAlert(`No user found with username ${username}.`));\r\n }\r\n } \r\n }).catch(function(error) {\r\n ErrorHandler.logError(error); \r\n });\r\n } \r\n}\r\n\r\nexport function getAllProductsSuccess(products) {\r\n return { type: types.GET_ALL_PRODUCTS_SUCCESS, products };\r\n}\r\n\r\nexport function getAllCompaniesSuccess(companies) {\r\n return { type: types.GET_ALL_COMPANIES_SUCCESS, companies };\r\n}\r\n\r\nexport function getAllFabricatorsSuccess(fabricators) {\r\n return { type: types.GET_ALL_FABRICATORS_SUCCESS, fabricators };\r\n}\r\n\r\nexport function getAllInstallersSuccess(installers) {\r\n return { type: types.GET_ALL_INSTALLERS_SUCCESS, installers };\r\n}\r\n\r\nexport function getCompanyLocationAddressesSuccess(addresses) {\r\n return { type: types.GET_COMPANY_LOCATION_ADDRESSES_SUCCESS, addresses };\r\n}\r\n\r\nexport function getActiveUsersCompanyLocationsSuccess(activeUserLocations) {\r\n return { type: types.GET_ACTIVE_USERS_COMPANY_LOCATIONS_SUCCESS, activeUserLocations };\r\n}\r\n\r\nexport function setActiveUser(username) {\r\n return { type: types.SET_ACTIVE_USER, username };\r\n}\r\n\r\nexport function setActiveCompanyLocation(companyLocationId) {\r\n return { type: types.SET_ACTIVE_COMPANY_LOCATION, companyLocationId };\r\n}\r\n\r\nexport function getActiveUserRoleSuccess(role) {\r\n return { type: types.GET_ACTIVE_USER_ROLE, role };\r\n}\r\n\r\nexport function getCompanyLocationsSuccess(companyLocations) {\r\n return { type: types.GET_COMPANY_LOCATIONS_SUCCESS, companyLocations };\r\n}\r\n\r\nexport function getFabricatorLocationsSuccess(fabricatorLocations) {\r\n return { type: types.GET_FABRICATOR_LOCATIONS_SUCCESS, fabricatorLocations };\r\n}\r\n\r\nexport function getInstallerLocationsSuccess(installerLocations) {\r\n return { type: types.GET_INSTALLER_LOCATIONS_SUCCESS, installerLocations };\r\n}\r\n\r\n// export function getAllCompanyBranchesesSuccess(branches) {\r\n// return { type: types.GET_COMPANY_LOCATION_BRANCHES_SUCCESS, branches };\r\n// }\r\n\r\nexport function setActiveCompany(companyId) {\r\n return { type: types.SET_ACTIVE_COMPANY, companyId };\r\n}\r\n\r\nexport function getAdPatchTypesSuccess(adPatchTypes) {\r\n return { type: types.GET_AD_PATCH_TYPES_SUCCESS, adPatchTypes };\r\n}","import React from 'react';\r\nimport Button from '../Common/Button/Button';\r\nimport ContinueButton from '../Common/CPQ/ContinueButton';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport formatter from '../../modules/formatter';\r\n\r\nexport const ContainerStyled = styled.div`\r\n padding: 1em; \r\n background-color: #f5f5f5;\r\n height: 54px;\r\n margin-bottom:1em;\r\n\r\n button {\r\n margin-left: 5em;\r\n float:right;\r\n }\r\n \r\n @media(min-width:1201px) { \r\n text-align:left; \r\n \r\n }\r\n`;\r\n\r\nexport const H1 = styled.h1`\r\n font-size:24px !important;\r\n font-weight: 500 !important;\r\n text-align: center; \r\n float:left; \r\n`;\r\n\r\nconst ConfiguratorPriceBar = React.memo(props => { \r\n return (\r\n
\r\n \r\n {(props.showSubmitConfigurationButton === true) ?\r\n \r\n : } \r\n\r\n \r\n \r\n Total Price: ${formatter.currency(props.price)}
\r\n \r\n ); \r\n});\r\n\r\nexport default ConfiguratorPriceBar;\r\n\r\nConfiguratorPriceBar.propTypes = {\r\n showSubmitConfigurationButton: PropTypes.bool,\r\n onSubmitConfiguration: PropTypes.func.isRequired,\r\n price: PropTypes.number.isRequired \r\n};","export const configurator = {\r\n // continue: 'shift+c',\r\n // finish: 'shift+f',\r\n // moveTab: 'shift+t'\r\n}","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport {HotKeys} from 'react-hotkeys';\r\nimport TabControl from '../TabControl/TabControl';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport ConfiguratorPriceBar from './ConfiguratorPriceBar';\r\nimport guid from '../../modules/guid';\r\nimport ErrorHandler from '../../modules/errorHandler';\r\nimport * as keymaps from '../../modules/shortcuts';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport * as constants from '../../modules/constants';\r\nimport styled from 'styled-components';\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\nimport 'react-confirm-alert/src/react-confirm-alert.css'; // Import css\r\nexport const MessageRule = styled.h1`\r\n background-color: red;\r\n color: white;\r\n display: block;\r\n text-align: center; \r\n`;\r\n\r\nclass Configurator extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.onSubmitConfiguration = this.onSubmitConfiguration.bind(this); \r\n this.onCancel = this.onCancel.bind(this); \r\n\r\n loadProgressBar(); \r\n \r\n this.state = {\r\n isLoading: true \r\n }\r\n }\r\n\r\n componentDidMount() { \r\n //this.props.sessionActions.resetApp(); \r\n if (!this.props.quote.id && !this.props.order.id) this.props.history.push(\"/Overview\"); \r\n \r\n this.props.apiActions.reloadConfigurator();\r\n this.props.adminActions.getAdPatchTypes(this.props.session.company).then(() => {\r\n this.loadConfigurator();\r\n }); \r\n }\r\n\r\n // isValidInput() {\r\n // let isValidInput = true;\r\n \r\n // let selects = Array.prototype.slice.call(document.getElementsByTagName(\"Select\"));\r\n // let inputs = Array.prototype.slice.call(document.getElementsByTagName(\"input\"));\r\n \r\n // console.log(selects);\r\n // console.log(inputs);\r\n // this.props.validation.requiredScreenOptions.map(screenOption => {\r\n // let requiredControl; \r\n\r\n // if (screenOption.DisplayType.toLowerCase() === constants.DROPDOWN) {\r\n // requiredControl = selects.filter(i => i.id === screenOption.ID);\r\n // } else {\r\n // requiredControl = inputs.filter(i => i.id === screenOption.ID);\r\n // }\r\n\r\n // if (requiredControl.length > 0) {\r\n // if (!requiredControl[0].value || requiredControl[0].value === constants.DEFAULT_SELECT_OPTION) {\r\n // this.props.alertActions.showFailureAlert(\"Please enter a value for the following field: \" + screenOption.Caption);\r\n // return;\r\n // }\r\n // } \r\n // });\r\n \r\n\r\n // return isValidInput;\r\n // }\r\n\r\n getContinueHotkeyHandler() {\r\n return {\r\n 'continue': (event) => this.continueHotkeyPressed(),\r\n 'finish': (event) => this.onSubmitConfiguration(),\r\n 'moveTab': (event) => this.moveTab() \r\n };\r\n }\r\n\r\n moveTab() {\r\n let activeTab = this.props.session.activeTab;\r\n if (activeTab + 1 < this.props.api.ui.d.Pages.length)\r\n this.props.sessionActions.setActiveTab(activeTab + 1);\r\n }\r\n\r\n continueHotkeyPressed() {\r\n this.props.apiActions.commitUncommittedScreenOptions(this.props.api.sessionId, this.props.api.uncommittedScreenOptions);\r\n }\r\n\r\n onCancel() {\r\n confirmAlert({\r\n title: 'Confirm Cancel',\r\n message: 'Are you sure to cancel?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.apiActions.clearConfigurator();\r\n\r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Quote) { \r\n this.returnToQuote();\r\n } else if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order) {\r\n this.returnToOrder();\r\n } else {\r\n this.props.history.push(\"/QuoteDashboard\"); \r\n }\r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n });\r\n\r\n \r\n }\r\n\r\n onSubmitConfiguration() { \r\n this.props.apiActions.finishInteractiveConfiguration(this.props.api.sessionId).then(() => {\r\n if (!this.props.session.loggedIn) {\r\n this.props.apiActions.storeUncommittedUserConfigurations(this.getUncommittedUserConfigurations()); \r\n this.reloadApp();\r\n return;\r\n }\r\n\r\n if (this.props.session.isReconfigure && this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Default) {\r\n this.props.history.push(\"/MyConfigurations\"); \r\n return;\r\n } \r\n\r\n if (this.props.session.isReconfigure && (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Quote || this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order)) { \r\n let LineId = this.props.location.LineId === undefined ? '' : this.props.location.LineId; \r\n this.updateLine(LineId);\r\n return; \r\n }\r\n\r\n // if (this.props.session.isReconfigure && this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order) { \r\n // let LineId = this.props.location.LineId === undefined ? '' : this.props.location.LineId; \r\n // this.updateLine(LineId);\r\n // return; \r\n // }\r\n\r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Quote) { \r\n this.createLine(this.props.quote.id, null); \r\n return; \r\n } else if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order) {\r\n this.createLine(null, this.props.order.id); \r\n }\r\n else {\r\n this.props.apiActions.saveConfiguration(this.props.session.username, this.props.api.selectedProduct.HeaderId, this.props.api.configurationGUID, this.props.api.ui.d.ImageUrl, this.props.api.selectedProduct.ID); \r\n this.moveToMyConfigurationPage();\r\n } \r\n }); \r\n }\r\n\r\n updateLine(LineId) {\r\n this.props.quoteActions.updateLine(this.props.api.ui.d.ConfiguredPrice, this.props.api.ui.d.ImageUrl, LineId); \r\n \r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order)\r\n this.returnToOrder();\r\n else\r\n this.returnToQuote(); \r\n }\r\n\r\n createLine(quoteId, orderId) { \r\n this.props.quoteActions.createLine(quoteId, this.props.session.username, this.props.api.ui.d.ConfiguredPrice, this.props.api.ui.d.ImageUrl, this.props.api.configurationGUID, constants.HEADER_ID, this.props.api.selectedProduct.ID, orderId).then(() => {\r\n confirmAlert({\r\n title: 'More items to add?',\r\n message: 'Do you have any more items to add?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.reloadApp();\r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => {\r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order)\r\n this.returnToOrder();\r\n else\r\n this.returnToQuote(); \r\n } \r\n } \r\n ]\r\n }); \r\n }); \r\n }\r\n\r\n returnToQuote() {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Default);\r\n this.props.history.push({\r\n pathname: \"/Quote\",\r\n previousPage: \"Configurator\"\r\n });\r\n }\r\n\r\n returnToOrder() {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Default);\r\n this.props.history.push({\r\n pathname: \"/Order\",\r\n previousPage: \"Configurator\"\r\n });\r\n }\r\n\r\n getUncommittedUserConfigurations() {\r\n var uncommittedConfiguration = { \r\n headerId: this.props.api.selectedProduct.HeaderId,\r\n configurationId: this.props.api.configurationGUID,\r\n imageUrl: this.props.api.ui.d.ImageUrl,\r\n productId: this.props.api.selectedProduct.ID \r\n }; \r\n\r\n return uncommittedConfiguration;\r\n }\r\n\r\n moveToMyConfigurationPage() { \r\n this.props.history.push(\"/MyConfigurations\"); \r\n }\r\n \r\n reloadApp() {\r\n //this.props.sessionActions.resetApp(); \r\n this.setState({ isLoading: true });\r\n this.props.apiActions.reloadConfigurator();\r\n this.loadConfigurator(); \r\n }\r\n\r\n runConfigurator(integrationParams) { \r\n try { \r\n let product = this.props.api.selectedProduct;\r\n\r\n if (!product) {\r\n this.props.alertActions.showFailureAlert(\"No product returned or product does not exist.\");\r\n this.returnToQuote();\r\n return;\r\n }\r\n let configurationId = guid.GenerateGUID();\r\n let sourceConfigurationId = this.props.location.configurationId === undefined ? '' : this.props.location.configurationId;\r\n let sourceHeaderId = this.props.location.headerId === undefined ? '' : this.props.location.headerId;\r\n let isReconfigure = sourceConfigurationId === '' || sourceHeaderId === '' ? false : true;\r\n \r\n this.props.sessionActions.reconfigure(isReconfigure); \r\n \r\n \r\n \r\n this.props.apiActions.runConfigurator(product, configurationId, isReconfigure, sourceConfigurationId, sourceHeaderId, integrationParams).then(() => {\r\n this.setState({ isLoading: false });\r\n \r\n // if (this.props.api.ui && this.props.api.ui.d.Messages.length > 0) {\r\n // this.props.alertActions.showFailureAlert(this.props.api.ui.d.Messages[0].Value);\r\n // }\r\n\r\n // if (this.props.api.ui && this.props.api.ui.d.Messages.length > 0) {\r\n // this.props.alertActions.showFailureAlert(this.props.api.ui.d.Messages[0].Value);\r\n // }\r\n }); \r\n \r\n \r\n // const isConfirmed = alert(\"Are you sure you want to remove this burrito?\");\r\n\r\n \r\n\r\n \r\n } catch(error) {\r\n ErrorHandler.logError(error); \r\n } \r\n }\r\n \r\n loadConfigurator() { \r\n var integrationParams;\r\n var lineNumber;\r\n\r\n const promise1 = this.props.apiActions.getCompanyProducts(this.props.session.company);\r\n //const promise2 = this.props.apiActions.getUserActiveProduct(this.props.session.username, this.props.session.company);\r\n \r\n\r\n Promise.all([promise1]).then(() => {\r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Quote || this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order) {\r\n \r\n if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Order) { \r\n let activeCompanyLocation = this.props.admin.companyLocations.filter(c => c.id == this.props.order.companyLocationId)[0];\r\n let adPatchName = this.props.admin.adPatchTypes.filter(p => p.id == activeCompanyLocation.adPatchTypeId)[0].name;\r\n if (!this.props.order.lines || (this.props.order.lines && this.props.order.lines.length === 0)) {\r\n lineNumber = 1;\r\n } else { \r\n lineNumber = this.props.order.lines.length + 1;\r\n } \r\n integrationParams = [\r\n { \"IsNull\": false, \"Name\":\"LineNumber\", \"SimpleValue\":lineNumber, \"Type\":1 },\r\n { \"IsNull\": false, \"Name\":\"QuoteId\", \"SimpleValue\":this.props.order.id.toString(), \"Type\":0 },\r\n { \"IsNull\": false, \"Name\":\"IsOrder\", \"SimpleValue\":true, \"Type\":2 },\r\n { \"IsNull\": false, \"Name\":\"adPatch\", \"SimpleValue\":adPatchName, \"Type\":0 },\r\n ]; \r\n } else if (this.props.session.configuratorMode === constants.CONFIGURATOR_MODES.Quote){\r\n let activeCompanyLocation = this.props.admin.companyLocations.filter(c => c.id == this.props.quote.companyLocationId)[0];\r\n let adPatchName = this.props.admin.adPatchTypes.filter(p => p.id == activeCompanyLocation.adPatchTypeId)[0].name;\r\n if (!this.props.order.lines || (this.props.quote.lines && this.props.quote.lines.length === 0)) {\r\n lineNumber = 1;\r\n } else {\r\n lineNumber = this.props.quote.lines.length + 1;\r\n }\r\n integrationParams = [\r\n { \"IsNull\": false, \"Name\":\"LineNumber\", \"SimpleValue\":lineNumber, \"Type\":1 },\r\n { \"IsNull\": false, \"Name\":\"QuoteId\", \"SimpleValue\":this.props.quote.id.toString(), \"Type\":0 },\r\n { \"IsNull\": false, \"Name\":\"IsOrder\", \"SimpleValue\":false, \"Type\":2 },\r\n { \"IsNull\": false, \"Name\":\"adPatch\", \"SimpleValue\":adPatchName, \"Type\":0 },\r\n ];\r\n } else {\r\n integrationParams = [];\r\n }\r\n \r\n let productId = this.props.location.productId === undefined ? '' : this.props.location.productId; \r\n\r\n if (productId) {\r\n let products = this.props.admin.productList;\r\n let productFilter;\r\n \r\n if (!products) {\r\n this.props.alertActions.showFailureAlert(\"No product returned or product does not exist.\");\r\n this.returnToQuote();\r\n return;\r\n }\r\n productFilter = products.filter(p => p.ID === productId); \r\n \r\n if (!productFilter || productFilter.length === 0) {\r\n this.props.alertActions.showFailureAlert(\"No product returned or product does not exist.\");\r\n this.returnToQuote();\r\n return;\r\n }\r\n\r\n this.props.apiActions.setSelectedProduct(productFilter[0]); \r\n \r\n return;\r\n }\r\n } \r\n \r\n let products = this.props.admin.productList;\r\n let productFilter;\r\n\r\n if (!products || products.length === 0) return;\r\n\r\n if (this.props.api.activeProductId) {\r\n productFilter = products.filter(p => p.ID == this.props.api.activeProductId);\r\n } else { \r\n if (this.props.api.companyProducts) \r\n productFilter = this.props.api.companyProducts.filter(p => p.DefaultProduct === true); \r\n } \r\n \r\n if (!productFilter || !productFilter[0]) {\r\n //this.props.alertActions.showFailureAlert(\"No product returned or product does not exist.\");\r\n console.log(\"No product returned or product does not exist.\");\r\n return;\r\n }\r\n\r\n\r\n this.props.apiActions.setSelectedProduct(productFilter[0]);\r\n \r\n }).then(() => {\r\n if (!this.props.api.selectedProduct) {\r\n //this.props.alertActions.showFailureAlert(\"configurator failed to initialize, please reload the page.\")\r\n return;\r\n }\r\n \r\n this.runConfigurator(integrationParams);\r\n }); \r\n } \r\n\r\n render() {\r\n \r\n if (this.state.isLoading === true || !this.props.api || !this.props.api.ui) {\r\n return ( \r\n
\r\n {/* { this.props.api.ui && this.props.api.ui.d && this.props.api.ui.d.Messages && this.props.api.ui.d.Messages.length > 0 && } */}\r\n \r\n );\r\n }\r\n let message = '';\r\n if (this.props.api.ui && this.props.api.ui.d.Messages.length > 0) {\r\n\r\n this.props.api.ui.d.Messages.map(m => { \r\n message += m.Value;\r\n }); \r\n }\r\n \r\n return ( \r\n
\r\n \r\n \r\n {message}\r\n \r\n \r\n \r\n \r\n );\r\n } \r\n }\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api,\r\n quote: state.quote,\r\n alert: state.alert,\r\n order: state.order,\r\n admin: state.admin, \r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch),\r\n orderActions: bindActionCreators(orderActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Configurator));","import React from 'react';\r\nimport { Alert } from 'reactstrap';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport styled from 'styled-components';\r\n\r\nexport const AlertStyled = styled(Alert)`\r\n button.close {\r\n height:100%;\r\n background-color:transparent !important;\r\n \r\n }\r\n\r\n button.close span {\r\n font-size: 35px !important;\r\n position: relative;\r\n top: -5px;\r\n }\r\n &.alert {\r\n position: fixed !important;\r\n width: 100%;\r\n top: 50px;\r\n z-index: 999;\r\n text-align: center; \r\n }\r\n`;\r\n\r\nexport const AlertWrapper = styled.div`\r\n padding-top:10px;\r\n padding-bottom:10px;\r\n`;\r\n\r\nclass Alerts extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \r\n this.onDismiss = this.onDismiss.bind(this); \r\n }\r\n\r\n onDismiss() {\r\n this.props.actions.hideAlert();\r\n }\r\n\r\n render() {\r\n if (!this.props.alert.showAlert) {\r\n return(\r\n
\r\n );\r\n }\r\n return (\r\n
\r\n {this.props.alert.alertText}\r\n \r\n );\r\n }\r\n} \r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n alert: state.alert\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n actions: bindActionCreators(alertActions, dispatch)\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Alerts);","import React from 'react';\r\nimport Button from '../Common/Button/Button';\r\nimport PropTypes from 'prop-types';\r\nimport { Card, CardImg, CardBody, CardText, Container, Row, Col, ListGroup, ListGroupItem } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\n// border: solid 5px #f5f5f5 !important; \r\nexport const CardStyled = styled(Card)` \r\n margin-bottom:30px !important;\r\n height: 357px;\r\n`;\r\n\r\nexport const CardBodyStyled = styled(CardBody)`\r\n padding: 0px !important; \r\n text-align: center;\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-left:10px !important; \r\n\r\n &.btn { \r\n width: 150px !important;\r\n }\r\n \r\n`;\r\n\r\nexport const CardImgStyled = styled(CardImg)`\r\n height: 150px;\r\n width: auto !important;\r\n margin-left: auto;\r\n margin-right: auto;\r\n cursor: default;\r\n\r\n`;\r\n\r\nexport const SpanStyled = styled.span`\r\n font-weight:bold; \r\n display:inline-block;\r\n`;\r\n\r\nexport const SpanLabelStyled = styled.span`\r\n font-weight:bold; \r\n display:inline-block;\r\n margin-right:5px;\r\n`;\r\n\r\nexport const ListGroupItemStyled = styled(ListGroupItem)`\r\n \r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n \r\n`;\r\n\r\nexport const ButtonWrapper = styled.div` \r\n background-color: #f5f5f5 !important; \r\n position: absolute;\r\n bottom: 0;\r\n width: 100%; \r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n\r\n`;\r\n\r\nconst ConfigurationList = React.memo(props => { \r\n return ( \r\n
\r\n {/* \r\n \r\n \r\n \r\n
*/}\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.configurationList.map(item => { \r\n return( \r\n \r\n \r\n {item.imageUrl !== \"\" ? : \"\" }\r\n \r\n \r\n \r\n {/* ID: {item.id}\r\n Configuration ID: {item.configurationId} */}\r\n Product Name: {item.ProductName} \r\n Description: {item.ComponentAttributeValue} \r\n \r\n \r\n\r\n \r\n props.onReconfigure(e, item.configurationId, item.headerId)}\r\n displayText=\"Modify\" \r\n /> \r\n props.onDelete(item.configurationId, item.headerId)}\r\n displayText=\"Request a Quote\" \r\n /> \r\n \r\n {/* props.onDelete(item.configurationId, item.headerId)}\r\n displayText=\"Delete\" \r\n /> */}\r\n \r\n \r\n \r\n ); \r\n })} \r\n
\r\n \r\n ); \r\n});\r\n\r\nexport default ConfigurationList;\r\n\r\nConfigurationList.propTypes = {\r\n configurationList: PropTypes.array.isRequired,\r\n onReconfigure: PropTypes.func.isRequired,\r\n onDelete: PropTypes.func.isRequired \r\n};","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport ConfigurationList from './ConfigurationList';\r\n\r\nclass MyConfigurations extends Component { \r\n\r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.onReconfigure = this.onReconfigure.bind(this); \r\n this.onDelete = this.onDelete.bind(this);\r\n this.addConfiguration = this.addConfiguration.bind(this);\r\n\r\n let username = this.props.session.username;\r\n\r\n if (this.props.session.username === \"\" || this.props.session.loggedIn === false) { \r\n this.props.apiActions.getUserConfigurations(username); \r\n } \r\n\r\n this.state = {\r\n isLoading: true\r\n }\r\n }\r\n\r\n componentDidMount() { \r\n\r\n if(this.props.session.loggedIn === true && this.props.session.username !== \"\") {\r\n this.props.apiActions.getUserConfigurations(this.props.session.username).then( () => {\r\n this.setState({isLoading: false});\r\n }); \r\n }\r\n \r\n }\r\n\r\n onReconfigure(event, configurationId, headerId) { \r\n this.props.history.push({\r\n pathname: '/Configurator',\r\n configurationId: configurationId,\r\n headerId: headerId\r\n }); \r\n }\r\n\r\n onDelete(configurationId, headerId) {\r\n this.props.apiActions.deleteConfiguration(this.props.session.username, configurationId, headerId);\r\n }\r\n\r\n addConfiguration() {\r\n this.props.history.push({\r\n pathname: '/Configurator'\r\n });\r\n }\r\n\r\n render() { \r\n if (this.state.isLoading || !this.props.api || !this.props.api.userConfigurations) \r\n return (\r\n
\r\n
My Designs
\r\n \r\n\r\n );\r\n \r\n return ( \r\n
\r\n
My Designs
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch)\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyConfigurations));","import React from 'react';\r\nimport Button from '../Common/Button/Button';\r\nimport greenCheck from './checkmark.png';\r\nimport redX from './redX.png';\r\nimport PropTypes from 'prop-types';\r\nimport { Card, CardBody, CardText, Container, Row, Col, ListGroup, ListGroupItem } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const CardStyled = styled(Card)`\r\n border: solid 5px #f5f5f5 !important; \r\n margin-bottom:30px !important; \r\n`;\r\n\r\nexport const CardBodyStyled = styled(CardBody)`\r\n padding: 0px !important; \r\n background-color: #f5f5f5 !important; \r\n text-align: center;\r\n`;\r\n\r\nexport const ListGroupItemStyled = styled(ListGroupItem)`\r\n text-align:left;\r\n &.active {\r\n background-color: ${props => props.theme.buttonColor} !important;\r\n border-color: ${props => props.theme.buttonColor} !important\r\n }\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-left:10px !important;\r\n position: relative;\r\n top: -5px;\r\n`;\r\n\r\nexport const SpanStyled = styled.span`\r\n font-weight:bold;\r\n margin-right:10px;\r\n display:inline-block;\r\n`;\r\n\r\nexport const IsActiveStyled = styled.img`\r\n height: 25px;\r\n cursor: default;\r\n position: relative;\r\n top: -3px;\r\n`;\r\n\r\nconst ProductConfigurationList = React.memo(props => { \r\n return ( \r\n
\r\n \r\n {props.productConfigurationList.map(item => { \r\n return( \r\n \r\n \r\n \r\n \r\n \r\n {item.ID !== props.activeProductId\r\n ? Name: {item.Name}\r\n : Name: {item.Name}\r\n }\r\n {item.ID !== props.activeProductId\r\n ? Is Active: \r\n : Is Active: \r\n } \r\n \r\n Instance: {item.ApplicationInstance}\r\n Application: {item.ApplicationName}\r\n HeaderId: {item.HeaderId}\r\n Profile: {item.Profile}\r\n Ruleset: {item.Ruleset} \r\n Namespace: {item.Namespace}\r\n Server: {item.Server} \r\n \r\n \r\n props.setActiveProduct(item.ID)}\r\n displayText=\"Activate\" \r\n /> \r\n props.editProduct(item)}\r\n displayText=\"Edit\" \r\n /> \r\n props.onDelete(item.ID)}\r\n displayText=\"Delete\" \r\n />\r\n \r\n \r\n \r\n ); \r\n })} \r\n
\r\n \r\n ); \r\n});\r\n\r\nexport default ProductConfigurationList;\r\n\r\nProductConfigurationList.propTypes = {\r\n productConfigurationList: PropTypes.array.isRequired,\r\n setActiveProduct: PropTypes.func.isRequired,\r\n onDelete: PropTypes.func.isRequired \r\n};","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport ProductConfigurationList from './ProductConfigurationList';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport { Container } from 'reactstrap';\r\n\r\nexport const AddButtonWrapper = styled.div`\r\n text-align: right;\r\n display: inline-block;\r\n width: 100%;\r\n`;\r\n\r\nexport const H1 = styled.h1`\r\n text-align: center;\r\n`;\r\n\r\nclass ProductConfigurations extends Component { \r\n\r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.setActiveProduct = this.setActiveProduct.bind(this); \r\n this.onDelete = this.onDelete.bind(this);\r\n this.addProduct = this.addProduct.bind(this);\r\n this.editProduct = this.editProduct.bind(this);\r\n\r\n // let username = this.props.session.username;\r\n\r\n // if (username) {\r\n // if (this.props.session.username === \"\" || this.props.session.loggedIn === false) { \r\n // this.props.apiActions.getProductConfigurations(this.props.session.company); \r\n // } \r\n // }\r\n }\r\n \r\n componentDidMount() { \r\n if(this.props.session.loggedIn === true)\r\n this.props.apiActions.getProductConfigurations(this.props.session.company); \r\n \r\n //this.props.apiActions.getUserActiveProduct(this.props.session.username, this.props.session.company);\r\n }\r\n\r\n setActiveProduct(productId) { \r\n this.props.apiActions.setActiveProduct(this.props.session.username, productId, this.props.session.company); \r\n }\r\n\r\n editProduct(editProduct) { \r\n this.props.history.push({\r\n pathname: '/EditProduct',\r\n state: { editProduct: editProduct }\r\n }); \r\n }\r\n\r\n onDelete(productId) {\r\n this.props.apiActions.deleteUserProduct(this.props.session.username, productId);\r\n }\r\n\r\n addProduct(){\r\n this.props.history.push({\r\n pathname: '/AddProduct'\r\n }); \r\n }\r\n\r\n render() { \r\n if (!this.props.api.productConfigurations) \r\n return (
);\r\n \r\n return ( \r\n
\r\n Products
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n } \r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch)\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProductConfigurations));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Form, FormGroup } from 'reactstrap';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nclass AddProductConfigurations extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.formValueChange = this.formValueChange.bind(this);\r\n this.saveProduct = this.saveProduct.bind(this);\r\n this.cancelAdd = this.cancelAdd.bind(this);\r\n\r\n this.state = ({\r\n server: '',\r\n name: '',\r\n instance: '',\r\n application: '',\r\n headerId: '',\r\n profile: '',\r\n ruleset: '',\r\n namespace: ''\r\n }); \r\n\r\n let username = this.props.session.username; \r\n\r\n if (username) {\r\n if (this.props.session.username === \"\" || this.props.session.loggedIn === false)\r\n this.props.apiActions.getUserConfigurations(username); \r\n } \r\n }\r\n\r\n formValueChange(event) {\r\n switch(event.target.id) {\r\n case \"apServer\":\r\n this.setState({ server: event.target.value }); \r\n break;\r\n \r\n case \"apName\":\r\n this.setState({ name: event.target.value });\r\n break;\r\n\r\n case \"apInstance\":\r\n this.setState({ instance: event.target.value });\r\n break;\r\n\r\n case \"apApplication\":\r\n this.setState({ application: event.target.value }); \r\n break;\r\n \r\n case \"apHeaderId\":\r\n this.setState({ headerId: event.target.value });\r\n break; \r\n\r\n case \"apProfile\":\r\n this.setState({ profile: event.target.value });\r\n break;\r\n\r\n case \"apRuleset\": \r\n this.setState({ ruleset: event.target.value });\r\n break;\r\n\r\n case \"apNamespace\":\r\n this.setState({ namespace: event.target.value });\r\n break; \r\n\r\n default: \r\n break;\r\n } \r\n }\r\n\r\n saveProduct() { \r\n this.props.apiActions.saveProduct(this.state.server, this.state.name, this.state.instance, this.state.application, this.state.headerId, this.state.profile, this.state.ruleset, this.state.namespace, this.props.session.username, this.props.session.company); \r\n this.props.history.push({\r\n pathname: '/ProductConfigurations'\r\n }); \r\n }\r\n\r\n cancelAdd() {\r\n this.props.history.push({\r\n pathname: '/ProductConfigurations'\r\n }); \r\n }\r\n\r\n render() { \r\n return ( \r\n
\r\n Add Product
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api\r\n };\r\n }\r\n \r\n function mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch)\r\n };\r\n } \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(AddProductConfigurations));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Button, Modal, ModalBody } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport styled from 'styled-components';\r\nimport * as constants from '../../modules/constants';\r\nimport { detect } from 'detect-browser';\r\n\r\nexport const EmailLabel = styled.div`\r\n text-align: center;\r\n font-size: 20px !important;\r\n margin-top: 1em;\r\n margin-bottom: .5em; \r\n`;\r\n\r\nexport const PleaseUseLabel = styled.div`\r\n text-align: center;\r\n font-size: 20px !important;\r\n margin-top: 1em;\r\n margin-bottom: .5em; \r\n`;\r\n\r\nexport const NotCompatibleLabel = styled.div`\r\n text-align: center;\r\n font-size: 16px !important;\r\n margin-top: 0em;\r\n margin-bottom: 0em; \r\n font-style: italic;\r\n font-weight: normal;\r\n`;\r\n\r\n\r\nexport const Link = styled.div`\r\n cursor: pointer;\r\n text-decoration: underline;\r\n display:block;\r\n text-align: center;\r\n`;\r\n\r\nexport const CloseModal = styled.div`\r\n position: fixed;\r\n right: 15px;\r\n top: 5px;\r\n font-size: 20px !important;\r\n cursor: pointer;\r\n`;\r\n\r\nexport const TextInputPrimitiveStyled = styled(TextInputPrimitive)`\r\n padding: 5px;\r\n display:block;\r\n margin-left:auto;\r\n margin-right:auto;\r\n margin-bottom: 1em;\r\n width: 300px; \r\n`;\r\n\r\nexport const Img = styled.img`\r\n display: block;\r\n width: 50%; \r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-bottom:2.5em;\r\n background-color: white;\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n background-color: #f5f5f5 !important;\r\n color: #4d4d4d !important;\r\n display: block !important; \r\n margin-left: auto;\r\n margin-right: auto;\r\n border:none !important;\r\n height:42px;\r\n width:120px;\r\n font-size: 20px !important;\r\n padding:0;\r\n\r\n :hover {\r\n background-color: ${props => props.theme.buttonColor} !important;\r\n color:#FFF !important;\r\n }\r\n`;\r\n\r\nexport const FormGroup = styled.div`\r\n margin-bottom: 0;\r\n`;\r\n\r\nexport const ModalBodyStyled = styled(ModalBody)`\r\n padding: .5em !important; \r\n`;\r\n\r\nexport const ModalStyled = styled(Modal)`\r\n .modal-content {\r\n background-color: ${props => props.theme.altButtonColor} !important;\r\n color: #FFF !important;\r\n padding: 1em;\r\n border-radius:15px !important;\r\n padding-left:2em;\r\n padding-right:2em;\r\n }\r\n\r\n &.modal-dialog { \r\n top: 45% !important;\r\n transform: translateY(-50%) !important;\r\n border:none;\r\n max-width:500px !important;\r\n }\r\n`;\r\n\r\nclass SignUpModal extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.onClickSignUp = this.onClickSignUp.bind(this); \r\n this.passwordOnChange = this.passwordOnChange.bind(this); \r\n this.passwordVerifyOnChange = this.passwordVerifyOnChange.bind(this); \r\n this.emailOnChange = this.emailOnChange.bind(this); \r\n this.memberLogin = this.memberLogin.bind(this); \r\n this.memberSignUp = this.memberSignUp.bind(this); \r\n this.onClickLogin = this.onClickLogin.bind(this); \r\n this.closeModal = this.closeModal.bind(this);\r\n this.forgotPassword = this.forgotPassword.bind(this);\r\n this.requestPasswordReset = this.requestPasswordReset.bind(this);\r\n\r\n this.state = {\r\n alreadyMember: true,\r\n username: '',\r\n password: '',\r\n passwordVerify: '',\r\n signupError: '',\r\n passwordResetSent: false,\r\n browserSupported: true\r\n }\r\n } \r\n\r\n componentDidMount() {\r\n let browserSupported = this.isBrowserSupported();\r\n\r\n this.setState({ browserSupported: browserSupported });\r\n }\r\n\r\n memberSignUp() { \r\n this.setState({ alreadyMember: false, signupError: '' });\r\n }\r\n\r\n memberLogin() { \r\n this.setState({ alreadyMember: true, signupError: '' });\r\n }\r\n\r\n passwordOnChange(event) {\r\n this.setState({password: event.target.value });\r\n }\r\n\r\n passwordVerifyOnChange(event) {\r\n this.setState({passwordVerify: event.target.value });\r\n }\r\n\r\n emailOnChange(event) {\r\n this.setState({email: event.target.value });\r\n }\r\n\r\n closeModal() {\r\n this.resetLocalState();\r\n this.props.sessionActions.showSignupModal(false);\r\n }\r\n\r\n forgotPassword() {\r\n if (this.state.email) {\r\n this.props.sessionActions.forgotPassword(this.state.email);\r\n this.setState({ passwordResetSent: true });\r\n }\r\n \r\n }\r\n\r\n requestPasswordReset() { \r\n this.pushHistory('/RequestPasswordReset'); \r\n }\r\n\r\n onKeyPressed(event) { \r\n // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.onClickLogin();\r\n }\r\n }\r\n\r\n pushHistory(url) {\r\n let { history } = this.props;\r\n history.push({\r\n pathname: url,\r\n search: ''\r\n });\r\n }\r\n\r\n resetLocalState() {\r\n this.setState({\r\n alreadyMember: true,\r\n username: '',\r\n password: '',\r\n passwordVerify: '',\r\n signupError: '',\r\n passwordResetSent: false\r\n });\r\n }\r\n\r\n onClickLogin() { \r\n try {\r\n\r\n let email = this.state.email;\r\n let password = this.state.password; \r\n \r\n if (email === '') {\r\n //this.displayEmailError('Please enter your email');\r\n return;\r\n } \r\n\r\n if (password === '') { \r\n //this.displayPasswordError('Please enter your password');\r\n return;\r\n } \r\n \r\n this.props.sessionActions.login(email, password).then(() => {\r\n\r\n if (this.props.session.access === constants.ACCESS.ICE) {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Default);\r\n }\r\n\r\n this.props.quoteOrderCommonActions.getQuoteOrderCommonOverview(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName).then(() => {\r\n this.props.history.push(\"/Overview\");\r\n });\r\n \r\n }); \r\n } catch (error) {\r\n console.log(error);\r\n }\r\n } \r\n\r\n onClickSignUp() { \r\n try {\r\n let email = this.state.email;\r\n\r\n this.clearWarnings();\r\n\r\n if (email === '' || this.validateEmail(email) === false) {\r\n this.setState({signupError: 'Please enter a valid email'});\r\n return;\r\n } \r\n\r\n if (this.validateEmail(email)) { \r\n this.props.sessionActions.signupUser(email, this.props.api.uncommittedUserConfigurations); \r\n } \r\n \r\n } catch (error) {\r\n console.log(error);\r\n }\r\n } \r\n\r\n clearWarnings() {\r\n this.setState({ signupError: '' });\r\n }\r\n\r\n isBrowserSupported() {\r\n const browser = detect();\r\n console.log(browser.name);\r\n switch(browser && browser.name) {\r\n case 'ie':\r\n return false; \r\n \r\n default: \r\n return true;\r\n }\r\n }\r\n \r\n validateEmail(email) {\r\n // eslint-disable-next-line\r\n var re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return re.test(String(email).toLowerCase());\r\n }\r\n\r\n render() { \r\n \r\n if (this.props.session.showSignupModal === false)\r\n return
;\r\n\r\n if (!this.state.alreadyMember) {\r\n return ( \r\n
this.onKeyPressed(e)} > \r\n \r\n \r\n
![\"RenTech\"](\"images/HKmeLogo.png\")
\r\n {/*
X */}\r\n
\r\n Login \r\n {this.state.signupError !== '' ? {this.state.signupError}
: ''}\r\n {this.props.session.signupFailed === true ? Email already in use!
: ''}\r\n \r\n Sign Up!\r\n New User/Password Reset \r\n {this.state.browserSupported === false && \r\n \r\n Please use Microsoft Edge or Google Chrome\r\n HKME is not compatible with Internet Explorer\r\n \r\n }\r\n \r\n
\r\n );\r\n } \r\n\r\n return ( \r\n
this.onKeyPressed(e)}> \r\n \r\n \r\n
\r\n {/*
X */}\r\n
\r\n Login \r\n {this.props.session.loginFailed === true ? Login Failed! Incorrect login/password
: ''}\r\n \r\n \r\n Login\r\n New User/Password Reset \r\n \r\n {this.state.browserSupported === false && \r\n \r\n Please use Microsoft Edge or Google Chrome\r\n HKME is not compatible with Internet Explorer\r\n \r\n }\r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n function mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api,\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n };\r\n }\r\n \r\n function mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators( quoteOrderCommonActions, dispatch),\r\n };\r\n } \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUpModal));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Form, FormGroup } from 'reactstrap';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em;\r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nclass EditProductConfigurations extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.formValueChange = this.formValueChange.bind(this);\r\n this.editProduct = this.editProduct.bind(this);\r\n this.editCancel = this.editCancel.bind(this);\r\n\r\n this.state = ({\r\n server: '',\r\n name: '',\r\n instance: '',\r\n application: '',\r\n headerId: '',\r\n profile: '',\r\n ruleset: '',\r\n namespace: '',\r\n id: ''\r\n }); \r\n\r\n let username = this.props.session.username;\r\n\r\n if (username) {\r\n if (this.props.session.username === \"\" || this.props.session.loggedIn === false) { \r\n this.props.apiActions.getUserConfigurations(username); \r\n }\r\n } \r\n }\r\n\r\n componentDidMount() { \r\n this.setState({\r\n server: this.props.location.state.editProduct.Server,\r\n name: this.props.location.state.editProduct.Name,\r\n instance: this.props.location.state.editProduct.ApplicationInstance,\r\n application: this.props.location.state.editProduct.ApplicationName,\r\n headerId: this.props.location.state.editProduct.HeaderId,\r\n profile: this.props.location.state.editProduct.Profile,\r\n ruleset: this.props.location.state.editProduct.Ruleset,\r\n namespace: this.props.location.state.editProduct.Namespace,\r\n id: this.props.location.state.editProduct.ID\r\n });\r\n }\r\n\r\n formValueChange(event) {\r\n switch(event.target.id) {\r\n case \"epServer\":\r\n this.setState({ server: event.target.value }); \r\n break;\r\n \r\n case \"epName\":\r\n this.setState({ name: event.target.value });\r\n break;\r\n\r\n case \"epInstance\":\r\n this.setState({ instance: event.target.value });\r\n break;\r\n\r\n case \"epApplication\":\r\n this.setState({ application: event.target.value }); \r\n break;\r\n \r\n case \"epHeaderId\":\r\n this.setState({ headerId: event.target.value });\r\n break; \r\n\r\n case \"epProfile\":\r\n this.setState({ profile: event.target.value });\r\n break;\r\n\r\n case \"epRuleset\": \r\n this.setState({ ruleset: event.target.value });\r\n break;\r\n\r\n case \"epNamespace\":\r\n this.setState({ namespace: event.target.value });\r\n break; \r\n \r\n default: \r\n break;\r\n } \r\n }\r\n\r\n editProduct() { \r\n this.props.apiActions.editProduct(this.state.server, this.state.name, this.state.instance, this.state.application, this.state.headerId, this.state.profile, this.state.ruleset, this.state.namespace, this.props.session.username, this.state.id, this.props.session.company); \r\n this.props.history.push({\r\n pathname: '/ProductConfigurations'\r\n }); \r\n }\r\n\r\n editCancel() {\r\n this.props.history.push({\r\n pathname: '/ProductConfigurations'\r\n });\r\n }\r\n\r\n render() { \r\n let server = this.props.location.state.editProduct.Server;\r\n let name = this.props.location.state.editProduct.Name;\r\n let instance = this.props.location.state.editProduct.ApplicationInstance;\r\n let application = this.props.location.state.editProduct.ApplicationName;\r\n let headerId = this.props.location.state.editProduct.HeaderId;\r\n let profile = this.props.location.state.editProduct.Profile;\r\n let ruleset = this.props.location.state.editProduct.Ruleset;\r\n let namespace = this.props.location.state.editProduct.Namespace;\r\n \r\n return ( \r\n
\r\n Edit Product
\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api\r\n };\r\n }\r\n \r\n function mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch)\r\n };\r\n } \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditProductConfigurations));","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nconst ListFilter = React.memo(props => { \r\n let value = props.defaultValue ? props.defaultValue : '';\r\n return( \r\n
props.onFilter(e)} /> \r\n );\r\n});\r\n\r\nexport default ListFilter;\r\n\r\nListFilter.propTypes = { \r\n onFilter: PropTypes.func.isRequired,\r\n defaultValue: PropTypes.string \r\n};","import React from 'react';\r\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default class PaginationControl extends React.Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = { \r\n pageCount: 1, \r\n rowsToFetch: 10, \r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ pageCount: this.props.pageCount, rowsToFetch: this.props.rowsToFetch }); \r\n }\r\n \r\n render() { \r\n var items = [];\r\n\r\n for (var i = 1; i < this.props.pageCount + 1; i++) {\r\n items.push(i);\r\n }\r\n \r\n return (\r\n \r\n {/* \r\n this.props.onPageChange(0))} />\r\n \r\n \r\n this.props.onPageChange(1))} />\r\n */}\r\n { \r\n items.map(i => {\r\n return (\r\n \r\n this.props.onPageChange(i))}>\r\n {i}\r\n \r\n \r\n );\r\n })\r\n } \r\n {/* \r\n this.props.onPageChange(this.state.currentPage))} />\r\n \r\n \r\n this.props.onPageChange(this.state.currentPage))} />\r\n */}\r\n \r\n );\r\n }\r\n}\r\n\r\nPaginationControl.propTypes = { \r\n onPageChange: PropTypes.func.isRequired,\r\n pageCount: PropTypes.number.isRequired,\r\n rowsToFetch: PropTypes.number.isRequired\r\n};","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport dateFormat from 'dateformat';\r\nimport ListFilter from '../QuoteOrderCommon/ListFilter';\r\nimport Pagination from '../Common/Pagination/Pagination';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n font-weight: bold;\r\n margin-top: 1em; \r\n margin-bottom: 1em;\r\n\r\n @media (max-width:1200px) { \r\n display: none !important; \r\n }\r\n`;\r\n\r\nexport const IdColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n font-weight: bold; \r\n &::before {\r\n content: \"\\\\0023\";\r\n }\r\n &::after {\r\n content: \"\\\\003A\";\r\n padding-left: 30px;\r\n }\r\n }\r\n`;\r\n\r\nexport const StatusColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n color: ${props => props.theme.buttonColor} !important;\r\n }\r\n`;\r\n\r\nexport const FirstNameColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n padding-right: 0px !important;\r\n }\r\n`;\r\n\r\nexport const LastNameColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n padding-left: 6px !important;\r\n }\r\n`;\r\n\r\nexport const CreateDateColStyled = styled(Col)`\r\n @media (max-width:1200px) {\r\n color: #7A43B6 !important;\r\n font-size: 13px !important;\r\n }\r\n`;\r\n\r\nexport const BodyRowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nclass QuoteList extends React.Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar(); \r\n \r\n this.onClickNewQuote = this.onClickNewQuote.bind(this);\r\n this.onClickEditQuote = this.onClickEditQuote.bind(this);\r\n this.onFilter = this.onFilter.bind(this);\r\n this.onPageChange = this.onPageChange.bind(this);\r\n this.onPrint = this.onPrint.bind(this);\r\n this.onCopy = this.onCopy.bind(this);\r\n\r\n this.state = {\r\n quoteFilter: null, \r\n offset: 0,\r\n rowsToFetch: 10,\r\n currentPage: 1 \r\n }; \r\n } \r\n \r\n componentDidMount() { \r\n this.getQuotes(); \r\n }\r\n\r\n onFilter(event) {\r\n this.setState({ quoteFilter: event.target.value}, () => {\r\n this.getQuotes(); \r\n }); \r\n }\r\n\r\n getQuotes() { \r\n this.props.quoteActions.getQuotes(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName, this.state.quoteFilter, this.state.offset, this.state.rowsToFetch);\r\n }\r\n\r\n async onClickEditQuote(event, quoteId) {\r\n await this.props.quoteActions.setActiveQuote(quoteId);\r\n \r\n this.props.history.push({ pathname: '/Quote' });\r\n }\r\n\r\n async onClickNewQuote() {\r\n await this.props.quoteActions.createQuote(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Quote' });\r\n } \r\n \r\n async onPrint(event, quoteId) { \r\n event.stopPropagation();\r\n await this.props.quoteActions.setActiveQuote(quoteId);\r\n\r\n this.props.history.push({\r\n pathname: '/QuotePrint' \r\n }); \r\n }\r\n\r\n onCopy(event, quoteId) { \r\n event.stopPropagation();\r\n this.props.quoteOrderCommonActions.copy(quoteId, this.props.session.username, null).then(() => {\r\n this.getQuotes();\r\n });\r\n }\r\n\r\n onPageChange(currentPage) { \r\n let offset = parseInt((currentPage * this.state.rowsToFetch) - this.state.rowsToFetch);\r\n this.setState({ offset: offset, currentPage: currentPage }, () => this.getQuotes()); \r\n }\r\n\r\n render() { \r\n \r\n let pageCount = 1;\r\n \r\n if (this.props.quote && this.props.quote.quoteList) {\r\n pageCount = this.props.quote.quoteList.length > 0 ? (this.props.quote.quoteList[0].totalRows / this.state.rowsToFetch) : 1;\r\n pageCount = Math.ceil(pageCount);\r\n }\r\n \r\n return (\r\n \r\n Quotes
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n Quote #\r\n Description\r\n Status\r\n Location\r\n {/* Branch */}\r\n Store Number\r\n First Name\r\n Last Name\r\n Contact Email\r\n Created Date\r\n Copy\r\n {/* Print */}\r\n \r\n { \r\n (this.props.quote.quoteList) && \r\n this.props.quote.quoteList.map(quote => {\r\n let createdDate = dateFormat(quote.createdDate, \"m/d/yyyy hh:MM TT\", true);\r\n \r\n return(\r\n this.onClickEditQuote(e, quote.id)}>\r\n \r\n {quote.id}\r\n \r\n \r\n {quote.name}\r\n \r\n \r\n {quote.statusName}\r\n \r\n \r\n {quote.companyLocationName}\r\n \r\n {/* \r\n {quote.branchName}\r\n */}\r\n \r\n {quote.companyLocationStoreNumber}\r\n \r\n \r\n {quote.firstName}\r\n \r\n \r\n {quote.lastName}\r\n \r\n \r\n {quote.email}\r\n \r\n \r\n {createdDate}\r\n \r\n \r\n this.onCopy(e, quote.id)}>\r\n \r\n {/* \r\n this.onPrint(e, quote.id)}>\r\n */}\r\n \r\n ); \r\n })\r\n } \r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n quote: state.quote,\r\n quoteOrderCommon: state.quoteOrderCommon\r\n };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators( apiActions, dispatch),\r\n sessionActions: bindActionCreators( sessionActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch)\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(QuoteList));","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport dateFormat from 'dateformat';\r\nimport ListFilter from '../QuoteOrderCommon/ListFilter';\r\nimport Pagination from '../Common/Pagination/Pagination';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n font-weight: bold;\r\n margin-top: 1em; \r\n margin-bottom: 1em;\r\n\r\n @media (max-width:1200px) { \r\n display: none !important; \r\n }\r\n`;\r\n\r\nexport const IdColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n font-weight: bold; \r\n &::before {\r\n content: \"\\\\0023\";\r\n }\r\n &::after {\r\n content: \"\\\\003A\";\r\n padding-left: 30px;\r\n }\r\n }\r\n`;\r\n\r\nexport const StatusColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n color: ${props => props.theme.buttonColor} !important;\r\n }\r\n`;\r\n\r\nexport const FirstNameColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n padding-right: 0px !important;\r\n }\r\n`;\r\n\r\nexport const LastNameColStyled = styled(Col)`\r\n @media (max-width:1200px) { \r\n padding-left: 6px !important;\r\n }\r\n`;\r\n\r\nexport const CreateDateColStyled = styled(Col)`\r\n @media (max-width:1200px) {\r\n color: #7A43B6 !important;\r\n font-size: 13px !important;\r\n }\r\n`;\r\n\r\nexport const BodyRowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nclass OrderList extends React.Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar(); \r\n \r\n this.onClickNewOrder = this.onClickNewOrder.bind(this);\r\n this.onClickEditOrder = this.onClickEditOrder.bind(this);\r\n this.onOrderFilter = this.onOrderFilter.bind(this);\r\n this.onPageChange = this.onPageChange.bind(this);\r\n this.onPrint = this.onPrint.bind(this);\r\n this.onCopy = this.onCopy.bind(this);\r\n \r\n this.state = {\r\n orderFilter: null, \r\n offset: 0,\r\n rowsToFetch: 10,\r\n currentPage: 1 \r\n }; \r\n } \r\n \r\n componentDidMount() { \r\n this.getOrders(); \r\n }\r\n\r\n onOrderFilter(event) {\r\n this.setState({ orderFilter: event.target.value}, () => {\r\n this.getOrders(); \r\n }); \r\n }\r\n\r\n getOrders() { \r\n this.props.orderActions.getOrders(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName, this.state.orderFilter, this.state.offset, this.state.rowsToFetch);\r\n }\r\n\r\n async onClickEditOrder(event, orderId) {\r\n await this.props.orderActions.setActiveOrder(orderId);\r\n \r\n this.props.history.push({ pathname: '/Order' });\r\n }\r\n\r\n async onClickNewOrder() {\r\n await this.props.orderActions.createOrder(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Order' });\r\n } \r\n \r\n async onPrint(event, orderId) { \r\n event.stopPropagation();\r\n await this.props.orderActions.setActiveOrder(orderId);\r\n\r\n this.props.history.push({\r\n pathname: '/QuotePrint' \r\n }); \r\n }\r\n\r\n onCopy(event, orderId) { \r\n event.stopPropagation();\r\n this.props.quoteOrderCommonActions.copy(null, this.props.session.username, orderId).then(() => {\r\n this.getOrders();\r\n });\r\n }\r\n\r\n onPageChange(currentPage) { \r\n let offset = parseInt((currentPage * this.state.rowsToFetch) - this.state.rowsToFetch);\r\n this.setState({ offset: offset, currentPage: currentPage }, () => this.getOrders()); \r\n }\r\n\r\n render() { \r\n let orders = this.props.order.orderList; \r\n\r\n if (!orders) { \r\n return (\r\n \r\n Orders
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n Order #\r\n Description\r\n Status\r\n Location\r\n First Name\r\n Last Name \r\n Contact Email\r\n Created Date \r\n \r\n \r\n ); \r\n }\r\n \r\n let pageCount = 1;\r\n \r\n if (this.props.order && this.props.order.orderList) {\r\n pageCount = this.props.order.orderList.length > 0 ? (this.props.order.orderList[0].totalRows / this.state.rowsToFetch) : 1;\r\n pageCount = Math.ceil(pageCount);\r\n }\r\n\r\n return (\r\n \r\n Orders
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n Order #\r\n Description\r\n Status\r\n Location\r\n {/* Branch */}\r\n Store Number\r\n First Name\r\n Last Name\r\n Contact Email\r\n Created Date\r\n Copy \r\n {/* Print */}\r\n \r\n { \r\n orders.map(order => {\r\n let createdDate = dateFormat(order.createdDate, \"m/d/yyyy hh:MM TT\", true);\r\n \r\n return(\r\n this.onClickEditOrder(e, order.id)}>\r\n \r\n {order.id}\r\n \r\n \r\n {order.name}\r\n \r\n \r\n {order.statusName}\r\n \r\n \r\n {order.companyLocationName}\r\n \r\n {/* \r\n {order.branchName}\r\n */}\r\n \r\n {order.companyLocationStoreNumber}\r\n \r\n \r\n {order.firstName}\r\n \r\n \r\n {order.lastName}\r\n \r\n \r\n {order.email}\r\n \r\n \r\n {createdDate}\r\n \r\n \r\n this.onCopy(e, order.id)}>\r\n \r\n {/* \r\n this.onPrint(e, order.id)}>\r\n */}\r\n \r\n ); \r\n })\r\n } \r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n order: state.order,\r\n QuoteOrderCommon: state.QuoteOrderCommon\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n orderActions: bindActionCreators(orderActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch)\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(OrderList));","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport PropTypes from 'prop-types';\r\nimport { Row, Col, Input } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport formatter from '../../modules/formatter';\r\nimport * as constants from '../../modules/constants';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\n\r\nexport const ImgStyled = styled.img`\r\n max-height: 90px;\r\n position: absolute;\r\n top: -30px;\r\n left: 100px;\r\n transform: scale(3);\r\n clip: rect(25px, 100px, 65px, 0px);\r\n\r\n @media (max-width: 768px) { \r\n max-height: 75px;\r\n top: 0px;\r\n }\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n margin-top: 0; \r\n`;\r\n\r\nexport const RowLineStyled = styled(Row)`\r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n padding-top: 35px;\r\n padding-bottom: 35px;\r\n\r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n \r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n\r\n :hover button, :hover .icon-line { \r\n visibility: visible !important; \r\n }\r\n`;\r\n\r\nexport const RowTotalStyled = styled(Row)`\r\n border-top: 1px solid #4f4f4f; \r\n margin-bottom: .5em;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n font-weight: bold; \r\n text-align: center;\r\n display: inline-block;\r\n\r\n @media(max-width: 1200px) {\r\n margin-right: 15px;\r\n } \r\n`;\r\n\r\nexport const ColAddLine = styled(Col)`\r\n display: inline-block;\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)` \r\n visibility: hidden !important;\r\n \r\n @media(max-width:1200px) { \r\n visibility: visible !important; \r\n margin-top: .5em; \r\n }\r\n`;\r\n\r\nexport const TextInputPrimitiveStyled = styled(TextInputPrimitive)`\r\n width: 50px;\r\n`;\r\n\r\nexport const H1Wrapper = styled.span`\r\n display: block;\r\n width: 100%;\r\n text-align: center;\r\n`;\r\nexport const H1 = styled.h1`\r\n margin-bottom: 0;\r\n text-align: center;\r\n`;\r\n\r\nexport const AddLineGuide = styled.div`\r\n font-style: italic !important;\r\n margin-bottom: .5em;\r\n`;\r\n\r\nexport const LinePlaceHolder = styled.div` \r\n border: dashed 2px lightgray;\r\n padding: 15px;\r\n text-align: center;\r\n color: lightgray;\r\n font-size: 24px !important;\r\n font-weight: 400;\r\n margin-top:.25em;\r\n cursor: pointer;\r\n margin-left: 1%;\r\n margin-right: 1%;\r\n\r\n`;\r\n\r\nexport const AddNewButtonStyled = styled(Button)`\r\n margin-left: 1em;\r\n`;\r\n\r\nexport const AddCountertopButtonStyled = styled(Button)`\r\n \r\n &.btn {\r\n width: 340px !important;\r\n }\r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n margin-bottom: 1em;\r\n`;\r\n\r\nconst Line = React.memo(props => { \r\n \r\n console.log('line: ' + props.readonly);\r\n if (!props.lines || props.lines.length === 0)\r\n return (\r\n \r\n Lines
\r\n {props.readonly != true && \r\n \r\n For Postform tops, please use the \"Click here to start\" button. For Custom Countertops, please use the next button to advance to the Attachments step. For additional information on Postform vs Custom, click here.
\r\n \r\n \r\n props.onAddCountertopClick()} /> \r\n \r\n \r\n \r\n }\r\n {props.readonly != true &&\r\n props.onAddCountertopClick()}>Click here to start or to add another countertop\r\n }\r\n \r\n );\r\n \r\n let totalPrice = 0;\r\n let totalQuantity = 0;\r\n\r\n return ( \r\n \r\n {props.stage === constants.QUOTE_STAGES.Line && props.readonly !== true && \r\n \r\n Lines
\r\n {props.readonly != true && \r\n \r\n For Postform tops, please use the \"Click here to start\" button. For Custom Countertops, please use the next button to advance to the Attachments step. For additional information on Postform vs Custom, click here.
\r\n \r\n \r\n props.onAddCountertopClick()} /> \r\n \r\n \r\n \r\n } \r\n \r\n }\r\n\r\n \r\n Line #\r\n \r\n Part\r\n Quantity \r\n Unit Price \r\n Total Price\r\n { props.readonly !== true && \r\n \r\n \r\n \r\n \r\n \r\n } \r\n \r\n { \r\n props.lines.map(line => {\r\n\r\n totalPrice = totalPrice + (line.productId !== 1 ? line.totalCost : line.price * line.quantity);\r\n totalQuantity = totalQuantity + line.quantity;\r\n let price = line.productId !== 1 ? line.totalCost : line.price;\r\n return ( \r\n \r\n {line.lineNumber}\r\n { line.imgUrl \r\n ? \r\n : }\r\n {line.productName}\r\n props.onQuantityChange(e, line.id)} /> \r\n ${formatter.currency(price)}\r\n ${formatter.currency(price * line.quantity)}
\r\n { props.readonly !== true && \r\n \r\n \r\n props.onReconfigure(line.configurationId, line.headerId, line.id, line.productId)}>\r\n \r\n {/* \r\n props.onCopyLine(line.id, line.configurationId, line.headerId, line.productId)} >\r\n */}\r\n \r\n props.onLineDelete(line.id)} >\r\n \r\n \r\n }\r\n \r\n );\r\n }) \r\n }\r\n \r\n Total \r\n \r\n {totalQuantity} \r\n \r\n ${formatter.currency(totalPrice)}\r\n \r\n \r\n );\r\n});\r\n\r\nexport default Line;\r\n\r\nLine.propTypes = {\r\n lines: PropTypes.array.isRequired,\r\n pageType: PropTypes.string.isRequired,\r\n onReconfigure: PropTypes.func.isRequired,\r\n onQuantityChange: PropTypes.func.isRequired,\r\n onLineDelete: PropTypes.func.isRequired,\r\n onConfigureClick: PropTypes.func.isRequired,\r\n disableAddLine: PropTypes.bool.isRequired,\r\n onProductChange: PropTypes.func.isRequired,\r\n stage: PropTypes.number.isRequired,\r\n companyProducts: PropTypes.array.isRequired,\r\n readonly: PropTypes.bool,\r\n onAddCountertopClick: PropTypes.func.isRequired,\r\n};","\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport stateList from '../../../modules/states';\r\n\r\nconst StateSelect = React.memo(props => { \r\n let states = stateList.getStates();\r\n\r\n return(\r\n \r\n );\r\n\r\n});\r\n\r\nexport default StateSelect;\r\n\r\nStateSelect.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired \r\n};","\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport countryList from '../../../modules/countries';\r\n\r\nconst CountrySelect = React.memo(props => { \r\n let states = countryList.getCountries();\r\n\r\n return(\r\n \r\n );\r\n\r\n});\r\n\r\nexport default CountrySelect;\r\n\r\nCountrySelect.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired \r\n};","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport PropTypes from 'prop-types';\r\nimport { FormGroup, Label, Row, Col } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport StateSelect from '../Common/StateSelect/StateSelect';\r\nimport CountrySelect from '../Common/CountrySelect/CountrySelect';\r\nimport InputLabel from '../Common/InputLabel/InputLabel';\r\nexport const LabelStyled = styled(Label)`\r\n margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n &.form-group { margin-bottom: .25em; }\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n \r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n \r\n @media(max-width:1200px) {\r\n margin-bottom:.5em; \r\n }\r\n`;\r\n\r\nexport const InputLabelStyled = styled(InputLabel)`\r\n font-weight: normal !important;\r\n`;\r\n\r\n/*\r\n READ ME\r\n\r\n The input ID must be the same as the column name in sql. This is used when building the update statements in the node service to reduce the amount of code.\r\n\r\n*/\r\nconst AddressForm = React.memo(props => { \r\n return (\r\n \r\n \r\n {props.title}
\r\n
\r\n \r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={props.address} onBlur={(e) => props.onAddressFieldUpdate(e, props.addressType)} />\r\n \r\n \r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={props.address2} onBlur={(e) => props.onAddressFieldUpdate(e, props.addressType)}/>\r\n \r\n \r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={props.city} onBlur={(e) => props.onAddressFieldUpdate(e, props.addressType)}/>\r\n \r\n \r\n \r\n \r\n \r\n props.onAddressFieldUpdate(e, props.addressType)} addressType={props.addressType} />\r\n \r\n \r\n \r\n \r\n \r\n { props.zip \r\n ? props.onInputFocus(e)} defaultValue={props.zip.toString()} onBlur={(e) => props.onAddressFieldUpdate(e, props.addressType)}/> \r\n : props.onInputFocus(e)} onBlur={(e) => props.onAddressFieldUpdate(e, props.addressType)}/>\r\n } \r\n \r\n \r\n {/* \r\n \r\n Country\r\n \r\n \r\n */}\r\n
\r\n \r\n ); \r\n});\r\n\r\nexport default AddressForm;\r\n\r\nAddressForm.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n addressType: PropTypes.oneOf(['Billing', 'Shipping']).isRequired, \r\n onAddressFieldUpdate: PropTypes.func.isRequired,\r\n address: PropTypes.string,\r\n city: PropTypes.string,\r\n state: PropTypes.string,\r\n address2: PropTypes.string,\r\n country: PropTypes.string,\r\n zip: PropTypes.number,\r\n readonly: PropTypes.bool\r\n};","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport PropTypes from 'prop-types';\r\nimport { Form, FormGroup, Row, Col } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport InputLabel from '../Common/InputLabel/InputLabel';\r\n\r\nexport const HeaderRowStyled = styled(Row)` \r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n\r\n @media(max-width:1200px) {\r\n margin-bottom:.5em; \r\n }\r\n`;\r\n\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-bottom: 1em;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n\r\n @media(max-width:1200px) {\r\n margin-bottom:.5em; \r\n }\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n @media(max-width:1200px) {\r\n margin-bottom:.5em; \r\n }\r\n`;\r\n\r\nexport const ContactRowStyled = styled(Row)`\r\n margin-top: 0 !important;\r\n margin-bottom: 0 !important;\r\n position: relative;\r\n top: -15px;\r\n`;\r\nexport const InputLabelStyled = styled(InputLabel)`\r\n font-weight: normal !important;\r\n`;\r\n\r\n/*\r\n READ ME\r\n\r\n The input ID must be the same as the column name in sql. This is used when building the update statements in the node service to reduce the amount of code.\r\n\r\n*/\r\n\r\nconst ContactInfo = React.memo(props => { \r\n if (!props.contact) {\r\n return \r\n }\r\n\r\n let contactInfo = props.contact;\r\n\r\n \r\n return (\r\n \r\n {contactInfo.map(contact => {\r\n return (\r\n \r\n \r\n {/* \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={contact.email} onBlur={(e) => props.onContactFieldUpdate(e) }/>\r\n \r\n */}\r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={contact.firstName} onBlur={(e) => props.onContactFieldUpdate(e) }/>\r\n \r\n \r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={contact.lastName} onBlur={(e) => props.onContactFieldUpdate(e) }/>\r\n \r\n \r\n\r\n {props.shipToCustomer === true && \r\n \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={contact.phone} onBlur={(e) => props.onContactFieldUpdate(e) }/>\r\n \r\n \r\n }\r\n\r\n {/* \r\n \r\n \r\n props.onInputFocus(e)} defaultValue={contact.altPhone} onBlur={(e) => props.onContactFieldUpdate(e) }/>\r\n \r\n */}\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n );\r\n});\r\n\r\nexport default ContactInfo;\r\n\r\nContactInfo.propTypes = {\r\n contact: PropTypes.array.isRequired,\r\n readonly: PropTypes.bool,\r\n shipToCustomer: PropTypes.bool\r\n};","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport Dropzone from 'react-dropzone'\r\nimport styled from 'styled-components';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport $ from 'jquery';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'reactstrap';\r\n\r\nexport const FileDropArea = styled.div`\r\n .wrapper { \r\n width: 100%;\r\n border: dashed 2px lightgray;\r\n cursor: pointer;\r\n }\r\n\r\n div {\r\n padding: 15px;\r\n text-align: center;\r\n color: lightgray;\r\n font-size: 24px !important;\r\n font-weight: 400;\r\n }\r\n`;\r\n\r\nclass FileUploadContainer extends React.Component {\r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.onImageDrop = this.onImageDrop.bind(this);\r\n }\r\n \r\n onImageDrop(acceptedFiles) {\r\n const data = new FormData();\r\n \r\n for (let i = 0; i < acceptedFiles.length; i += 1) {\r\n\r\n\r\n const allowedTypes = [\"image/png\", \"application/pdf\", \"image/jpeg\", \"application/msword\", \"image/tiff\", \"image/bmp\"];\r\n\r\n if (allowedTypes.includes(acceptedFiles[i].type) === false) { \r\n this.props.alertActions.showFailureAlert(\"Invalid file type.\");\r\n return;\r\n }\r\n\r\n data.append('file', acceptedFiles[i]); \r\n }\r\n\r\n data.append('company', this.props.company);\r\n data.append('quoteId', this.props.quoteId);\r\n data.append('orderId', this.props.orderId);\r\n data.append('attachmentType', this.props.attachmentType);\r\n \r\n \r\n $.ajax({\r\n url: '/api/v1/quoteOrderCommon/uploadAttachment',\r\n data,\r\n processData: false,\r\n contentType: false,\r\n method: 'POST',\r\n dataType: 'json',\r\n success: (response) => {\r\n if (response) {\r\n\r\n // alert('success');\r\n } else {\r\n // alert('failed');\r\n }\r\n\r\n if (this.props.orderId) {\r\n this.props.orderActions.getOrderById(this.props.orderId);\r\n } else {\r\n this.props.quoteActions.getQuoteById(this.props.quoteId);\r\n }\r\n \r\n },\r\n error: (jqXHR) => {\r\n const res = jqXHR.responseJSON;\r\n alert('error: ' + JSON.stringify(res));\r\n },\r\n });\r\n }\r\n \r\n render() {\r\n if (this.props.readonly === true) return ();\r\n return (\r\n \r\n \r\n \r\n this.onImageDrop(acceptedFiles)}>\r\n {({getRootProps, getInputProps}) => (\r\n \r\n \r\n
\r\n
Drag and drop files here or click to select files
\r\n
\r\n );\r\n }\r\n }\r\n \r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n quote: state.quote,\r\n order: state.order,\r\n alert: state.alert\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n quoteActions: bindActionCreators(quoteActions, dispatch),\r\n orderActions: bindActionCreators(orderActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(FileUploadContainer));\r\n\r\nFileUploadContainer.propTypes = {\r\n company: PropTypes.string.isRequired,\r\n quoteId: PropTypes.number,\r\n orderId: PropTypes.number, \r\n readonly: PropTypes.bool \r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport dateFormat from 'dateformat';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const Img = styled.img`\r\n width:25px;\r\n height: auto;\r\n`;\r\nexport const ColStyled = styled(Col)`\r\n text-decoration: underline;\r\n cursor: pointer;\r\n`;\r\n\r\nexport const DownloadLinkStyled = styled.div` \r\n display: inline; \r\n`;\r\n\r\nexport const FaxTemplateLink = styled.span`\r\n cursor: pointer;\r\n text-decoration: underline;\r\n font-size: 17px;\r\n`;\r\n\r\nconst QuoteAttachmentList = React.memo(props => {\r\n let orderMessage = 'drawing and purchase order';\r\n let quoteMessage = 'drawing';\r\n\r\n let message = props.isOrder === true ? orderMessage : quoteMessage;\r\n\r\n return ( \r\n \r\n \r\n Attachments
\r\n \r\n Please add a drawing or PO if the documents were not uploaded or see the comments below. \r\n To fax the {message} to the Fabricator \r\n \r\n {/* props.onClickDownloadFile(`uploads\\\\4dff12de7ef9bb31cba0be396431da9b`, \"Allow CORS requests in IIS 8.docx\", \"application/vnd.open\", \"4dff12de7ef9bb31cba0be396431da9b\")}>\r\n Fax Template\r\n */}\r\n props.faxTemplate(e)}>Click Here\r\n \r\n \r\n
\r\n {props.attachments && props.attachments.length > 0 &&\r\n \r\n {props.attachments.map(file => { \r\n let uploadDate = dateFormat(file.uploadDate, \"m/d/yyyy hh:MM TT\", true); \r\n return( \r\n \r\n \r\n props.onClickDownloadFile(file.path, file.originalName, file.mimetype, file.filename)}>\r\n ![\"renaissancetech\"](\"/images/attachments.png\")
{file.originalName} - {uploadDate} \r\n \r\n\r\n {props.readonly === false && ((file.attachmentTypeId !== 2 && props.isStatusConfirm === true) || props.isStatusConfirm === false) &&\r\n props.onDeleteAttachment(file.id)}>\r\n \r\n \r\n }\r\n \r\n \r\n );\r\n })}\r\n
\r\n }\r\n \r\n
\r\n \r\n );\r\n});\r\n\r\nexport default QuoteAttachmentList;\r\n\r\nQuoteAttachmentList.propTypes = {\r\n attachments: PropTypes.array.isRequired,\r\n onClickDownloadFile: PropTypes.func.isRequired,\r\n companyLocationName: PropTypes.string.isRequired,\r\n companyLocationFax: PropTypes.string.isRequired,\r\n readonly: PropTypes.bool,\r\n faxTemplate: PropTypes.string.isRequired,\r\n isOrder: PropTypes.bool,\r\n isStatusConfirm: PropTypes.bool\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\n\r\nexport const H1 = styled.h1`\r\n cursor: pointer;\r\n`;\r\n\r\nconst AccordionHeader = props => {\r\n let arrowDirection = props.collapsed === true ? \"arrow right\" : \"arrow down\";\r\n\r\n return (\r\n {props.caption}
\r\n );\r\n};\r\n\r\nAccordionHeader.propTypes = {\r\n onClick: PropTypes.func.isRequired,\r\n caption: PropTypes.string.isRequired,\r\n collapsed: PropTypes.bool.isRequired\r\n};\r\n\r\nexport default AccordionHeader;","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport PropTypes from 'prop-types';\r\nimport { Row, Col } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport AccordionHeader from '../Common/Accordion/AccordionHeader';\r\n\r\nexport const JournalWrapper = styled.div`\r\n margin-top: 2em;\r\n margin-bottom: 0em;\r\n display: inline-block;\r\n width: 100%;\r\n background-color:${props => props.theme.lightBackground}; \r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n margin-right: 1em;\r\n`;\r\n\r\nexport const ButtonWide = styled(Button)`\r\n &.btn {\r\n width: 200px !important;\r\n }\r\n`;\r\n\r\nclass Communications extends React.Component { \r\n constructor(props) {\r\n super(props); \r\n \r\n this.journalTextChanged = this.journalTextChanged.bind(this); \r\n \r\n this.state = {\r\n journalText: ''\r\n } \r\n }\r\n\r\n journalTextChanged(event) { \r\n this.setState({ journalText: event.target.value });\r\n }\r\n\r\n clearTextInput() { \r\n document.getElementById('newComment').value = '';\r\n }\r\n\r\n render() {\r\n console.log(this.props.showPendingButton);\r\n return ( \r\n \r\n \r\n \r\n {/* */}\r\n Activity
\r\n \r\n
\r\n\r\n { this.props.collapsed === false && \r\n \r\n \r\n \r\n \r\n
\r\n } \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Communications;\r\n\r\nCommunications.propTypes = { \r\n onAddCommunicationClick: PropTypes.func.isRequired,\r\n collapsed: PropTypes.bool.isRequired,\r\n onCommunicationCollapseClicked: PropTypes.func.isRequired,\r\n onSetToPendingInformationClick: PropTypes.func.isRequired,\r\n showPendingButton: PropTypes.bool,\r\n onSetToDraftClick: PropTypes.func,\r\n showDraftButton: PropTypes.bool\r\n\r\n};","import React from 'react';\nimport { Row, Col } from 'reactstrap';\nimport styled from 'styled-components';\n\nexport const PStyled = styled.p`\n font-size: 14px;\n`;\n\nexport const Img = styled.img`\n width: 200px;\n`;\n\nconst poweredBy = () => { \n return ( \n \n Powered By \n \n \n \n \n ![\"renaissancetech\"](\"/images/RenTechEmail.png\")
\n \n
\n \n ); \n};\n\nexport default poweredBy;","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport Pagination from '../Common/Pagination/Pagination';\r\nimport dateFormat from 'dateformat';\r\nimport Communication from './Communication';\r\nimport PoweredBy from '../Common/PoweredBy/PoweredBy';\r\n\r\nexport const DeleteButton = styled.h2`\r\n visibility: hidden;\r\n font-weight:700;\r\n font-size: 24px !important;\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px; \r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.lightBackground};\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.lightBackground};\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n } \r\n`;\r\n\r\nexport const RowFooter = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px; \r\n background-color: ${props => props.theme.lightBackground};\r\n margin-top: 0 !important;\r\n margin-bottom: 0 !important; \r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n @media(min-width:1200px) { \r\n width: 100%; \r\n } \r\n`;\r\n\r\nexport const LightGrayText = styled.span`\r\n color: darkgray;\r\n`;\r\n\r\n// :hover ${DeleteButton} {\r\n// visibility: visible; \r\n// }\r\n\r\n/* \r\nX\r\n */\r\n\r\nconst CommunicationList = React.memo(props => { \r\n if (!props.communicationHistory || props.collapsed === true) return ;\r\n return ( \r\n \r\n \r\n\r\n {\r\n props.communicationHistory.length !== 0 &&\r\n props.communicationHistory.map(c => {\r\n let createdDate = dateFormat(c.date, \"m/d/yyyy hh:MM TT\", true); \r\n \r\n return(\r\n \r\n \r\n {createdDate}\r\n \r\n \r\n {c.comment} - {c.communicationTypeName === 'User' ? c.username : 'System'}\r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n});\r\n\r\nexport default CommunicationList;\r\n\r\nCommunicationList.propTypes = {\r\n communicationHistory: PropTypes.array.isRequired,\r\n collapsed: PropTypes.bool.isRequired,\r\n onCommunicationCollapseClicked: PropTypes.func.isRequired,\r\n onCommunicationPageChange: PropTypes.func.isRequired,\r\n communicationPageCount: PropTypes.number.isRequired,\r\n communicationOffset: PropTypes.number.isRequired,\r\n currentCommunicationPage: PropTypes.number.isRequired,\r\n communicationRowsToFetch: PropTypes.number.isRequired,\r\n onSetToDraftClick: PropTypes.func,\r\n showDraftButton: PropTypes.bool\r\n};","import React from 'react';\r\nimport Modal from '../Common/CPQ/Modal';\r\nimport useModal from '../Common/Modals/useModal';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport { useState } from 'react';\r\nimport {Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport validator from '../../modules/validation';\r\nimport { FakeXMLHttpRequest } from 'sinon';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n &.btn {\r\n width: 125px !important;\r\n position: relative;\r\n top: 9px;\r\n }\r\n`;\r\n\r\nexport const Labelstyled = styled.label`\r\n display: block;\r\n color: red;\r\n`;\r\nconst AddDesigners = props => {\r\n const [email, setEmail] = useState(\"\");\r\n const [showWarning, setShowWarning] = useState(false);\r\n const {isShowing, toggle} = useModal();\r\n \r\n return ( \r\n \r\n \r\n \r\n \r\n {isShowing === true && \r\n \r\n \r\n {showWarning === true &&\r\n Please enter a valid email address\r\n }\r\n \r\n props.onInputFocus(e)} \r\n onBlur={(e) => setEmail(e.target.value)} /> \r\n \r\n \r\n \r\n } \r\n
\r\n ); \r\n};\r\n\r\nexport default AddDesigners;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport { Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport CheckBoxPrimitive from '../Common/Primitives/CheckBoxPrimitive';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport * as constants from '../../modules/constants';\r\nimport AddDesigners from '../QuoteOrderCommon/AddDesigners';\r\nexport const LabelStyled = styled(Label)`\r\n margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const DatePickerLabel = styled.label`\r\n margin-right: 15px;\r\n`;\r\n\r\nexport const CheckBoxPrimitiveStyled = styled(CheckBoxPrimitive)`\r\n display: block;\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n padding-left: 5px !important;\r\n padding-right: 5px !important;\r\n`;\r\n\r\nconst HeaderDetails = props => { \r\n \r\n return (\r\n \r\n Details
|
\r\n \r\n \r\n \r\n Job Name*\r\n props.onInputFocus(e)} onBlur={(e) => props.onHeaderFieldUpdate(e)} />\r\n \r\n \r\n \r\n \r\n Status*\r\n props.statusChange(e)} autoFocus={false} required={false} />\r\n \r\n \r\n {props.roleName === constants.ROLE.SystemAdmin && \r\n \r\n \r\n Company*\r\n props.onCompanyChange(e)} autoFocus={false} required={false} />\r\n \r\n \r\n }\r\n \r\n \r\n Location*\r\n props.onLocationChange(e)} autoFocus={false} required={false} />\r\n \r\n \r\n \r\n \r\n Fabricator Name\r\n props.onInputFocus(e)} onBlur={(e) => props.onHeaderFieldUpdate(e)} /> \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {props.designers && props.designers.length > 0 && */}\r\n \r\n Designer*\r\n props.onCreatedByChanged(e)} placeHolder=\"Select a Designer\" selectableValues={props.designers} /> \r\n \r\n {/* }\r\n\r\n {!props.designers &&\r\n \r\n Designer Email*\r\n props.onInputFocus(e)} onBlur={(e) => props.onHeaderFieldUpdate(e)} /> \r\n \r\n } */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Order Type*\r\n\r\n {props.companyLocationUsers && props.onHeaderFieldUpdate(e)} placeHolder=\"Select an Install Type\" selectableValues={props.installTypes} /> } \r\n \r\n \r\n {props.installType === constants.INSTALL_TYPES.SOSInstall &&\r\n \r\n \r\n Installer\r\n\r\n {props.companyLocationInstallers && props.onHeaderFieldUpdate(e)} placeHolder=\"Select\" selectableValues={props.companyLocationInstallers} /> } \r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n Ship To*\r\n\r\n props.onShipToStoreChanged(e)} placeHolder=\"Select Ship To\" selectableValues={props.shipToTypes} />\r\n {/* props.onShipToStoreChanged(e.target.checked)} /> */}\r\n \r\n \r\n\r\n {/* { props.isOrder === true && \r\n \r\n \r\n PO Number*\r\n props.onInputFocus(e)} onBlur={(e) => props.onHeaderFieldUpdate(e)} /> \r\n \r\n \r\n } */}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nHeaderDetails.propTypes = {\r\n description: PropTypes.string.isRequired,\r\n onInputFocus: PropTypes.func.isRequired,\r\n statusOptions: PropTypes.array.isRequired,\r\n status: PropTypes.number,\r\n companyLocationId: PropTypes.number,\r\n createdByOptions: PropTypes.array.isRequired,\r\n createdByUserId: PropTypes.number,\r\n onHeaderFieldUpdate: PropTypes.func.isRequired,\r\n onLocationChange: PropTypes.func.isRequired,\r\n statusChange: PropTypes.func.isRequired,\r\n userCompanyLocations: PropTypes.array.isRequired,\r\n companyLocationUsers: PropTypes.array.isRequired,\r\n shipToStoreTypeId: PropTypes.bool.isRequired,\r\n onShipToStoreChanged: PropTypes.func.isRequired,\r\n onCreatedByChanged: PropTypes.func.isRequired,\r\n installerId: PropTypes.number,\r\n companyLocationInstallers: PropTypes.array.isRequired,\r\n installType: PropTypes.string.isRequired, \r\n installTypes: PropTypes.array.isRequired,\r\n readonly: PropTypes.bool,\r\n roleName: PropTypes.string.isRequired,\r\n onCompanyChange: PropTypes.func.isRequired,\r\n shipToTypes: PropTypes.array.isRequired,\r\n poNumber: PropTypes.string.isRequired,\r\n isOrder: PropTypes.bool,\r\n designers: PropTypes.array\r\n};\r\n\r\nexport default HeaderDetails;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label, Row, Col } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const LabelStyled = styled(Label)`\r\n margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-bottom: .5em;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important; \r\n\r\n @media(max-width:1200px) {\r\n margin-bottom:.5em; \r\n }\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n text-align: right;\r\n`;\r\n\r\nexport const CancelButtonStyled = styled(Button)`\r\n &.order-cancel-btn {\r\n padding-left: 7px !important;\r\n background-color: ${props => props.theme.buttonColor} !important;\r\n border-color: ${props => props.theme.buttonColor} !important;\r\n position: relative;\r\n top: 5px;\r\n }\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n \r\n position: relative;\r\n top: 5px;\r\n padding: 4% !important\r\n .btn {\r\n padding: 4% !important;\r\n } \r\n`;\r\n\r\nconst LineActions = props => { \r\n\r\n //let color = props.submitButtonColor === '#e2231a' ? '#FFF' : '#000';\r\n \r\n if (props.orderId) {\r\n return ( \r\n \r\n\r\n {\r\n props.sourceQuoteId ? \r\n Order {props.orderId} - {props.statusName} - Quote {props.sourceQuoteId}
\r\n : \r\n Order {props.orderId} - {props.statusName}
\r\n } \r\n {\r\n props.showInvoiceButton === true && \r\n \r\n {\r\n props.orderInvoiced()} \r\n }/> \r\n \r\n }\r\n \r\n {\r\n props.generateReport(\"C\", \"O\", props.orderId)\r\n } \r\n }/> \r\n \r\n \r\n {\r\n props.generateReport(\"P\", \"O\", props.orderId)} \r\n }/> \r\n \r\n\r\n {\r\n props.showSaveAsDraftButton === true && \r\n \r\n {\r\n props.saveAsDraft()}}\r\n backgroundColor=\"lightgray\"\r\n /> \r\n \r\n }\r\n \r\n props.previousStage()} \r\n backgroundColor=\"lightgray\" /> \r\n \r\n {props.submitDisabled === false && \r\n \r\n props.submit(e)} /> \r\n \r\n }\r\n \r\n props.onQuoteOrderCancel(e)} />\r\n \r\n \r\n ); \r\n } else {\r\n return ( \r\n \r\n \r\n \r\n Quote {props.quoteId} - {props.statusName} {props.quoteConvertedLabel}
\r\n \r\n {\r\n props.showInvoiceButton === true && \r\n \r\n {\r\n props.orderInvoiced()} \r\n }/> \r\n \r\n }\r\n {\r\n props.showSaveAsDraftButton === true && \r\n \r\n {\r\n props.saveAsDraft()}\r\n }/> \r\n \r\n }\r\n \r\n {\r\n props.generateReport(\"C\", \"Q\", props.quoteId)\r\n } \r\n }/> \r\n \r\n \r\n {\r\n props.generateReport(\"P\", \"Q\", props.quoteId)\r\n } \r\n }/> \r\n \r\n \r\n props.previousStage()}\r\n backgroundColor=\"lightgray\" \r\n /> \r\n \r\n {props.submitDisabled === false && \r\n \r\n props.submit(e)} /> \r\n \r\n }\r\n \r\n props.onQuoteOrderCancel(e)} />\r\n \r\n \r\n ); \r\n }\r\n};\r\n\r\nLineActions.propTypes = { \r\n submitDisabled: PropTypes.bool.isRequired,\r\n submit: PropTypes.func.isRequired,\r\n onStageChange: PropTypes.func.isRequired,\r\n showCancelButton: PropTypes.bool.isRequired,\r\n onQuoteOrderCancel: PropTypes.func.isRequired,\r\n cancelButtonLabel: PropTypes.string.isRequired,\r\n stage: PropTypes.number.isRequired,\r\n isLocked: PropTypes.bool,\r\n previousDisabled: PropTypes.bool.isRequired,\r\n showInvoiceButton: PropTypes.bool,\r\n showSaveAsDraftButton: PropTypes.bool,\r\n sourceQuoteId: PropTypes.number,\r\n headerRowWidth: PropTypes.number,\r\n orderId: PropTypes.string,\r\n statusName: PropTypes.string,\r\n quoteConvertedLabel: PropTypes.string,\r\n generateReport: PropTypes.func\r\n\r\n};\r\n\r\nexport default LineActions;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport { Row, Col } from 'reactstrap';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const CircleBg = styled.div` \r\n display: table-cell;\r\n width: 500px;\r\n height: 25px;\r\n margin-right: 75px;\r\n color: ${props => props.theme.inactiveStageForeColor}; \r\n text-align: center;\r\n vertical-align: middle;\r\n font-size: 24px !important; \r\n\r\n @media(max-width:1200px) {\r\n display: block;\r\n width: 100%;\r\n height: 25px;\r\n font-size 16px !important;\r\n }\r\n \r\n &.active {\r\n background-color: ${props => props.theme.activeStageColor}; \r\n color: ${props => props.theme.activeStageForeColor};\r\n }\r\n \r\n &.completed {\r\n background-color: ${props => props.theme.completedStageColor};\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n background-color: ${props => props.theme.incompleteStageColor};\r\n } \r\n`;\r\n\r\nexport const CircleBgSubmit = styled.div` \r\n display: table-cell;\r\n width: 500px;\r\n height: 25px;\r\n margin-right: 75px;\r\n color: ${props => props.theme.inactiveStageForeColor};\r\n text-align: center;\r\n vertical-align: middle;\r\n font-size: 24px !important; \r\n\r\n @media(max-width:1200px) {\r\n display: block;\r\n width: 100%;\r\n height: 25px;\r\n font-size 16px !important;\r\n }\r\n \r\n &.active {\r\n background-color: ${props => props.theme.activeStageColor}; \r\n color: ${props => props.theme.activeStageForeColor};\r\n }\r\n\r\n &.completed {\r\n background-color: ${props => props.theme.completedStageColor};\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n background-color: ${props => props.theme.incompleteStageColor};\r\n } \r\n`;\r\n\r\n// margin-top: 2em;\r\n// margin-bottom: 1em;\r\n\r\nexport const Wrapper = styled.div` \r\n @media(max-width:1200px) {\r\n margin-top: .75em;\r\n margin-bottom: 0;\r\n }\r\n`;\r\n\r\nexport const FigcaptionStyled = styled.figcaption` \r\n display: inline-block;\r\n position: relative; \r\n font-size: 17px !important;\r\n font-weight: 700;\r\n color: ${props => props.theme.inactiveStageForeColor};\r\n margin-top: 8px;\r\n\r\n &#lineStageCaption {\r\n position: relative;\r\n left: 7px;\r\n } \r\n \r\n &#customerStageCaption {\r\n position: relative;\r\n left: -4px;\r\n }\r\n\r\n &#attachmentStageCaption {\r\n position: relative;\r\n left: -15px;\r\n }\r\n\r\n &#addressStageCaption {\r\n position: relative;\r\n left: -2px;\r\n } \r\n\r\n &#detailsStageCaption {\r\n position: relative;\r\n left: 2px;\r\n }\r\n\r\n @media(max-width:1200px) {\r\n display: table-cell;\r\n\r\n &#lineStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n\r\n &#customerStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n\r\n &#attachmentStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n\r\n &#addressStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n\r\n &#detailsStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n }\r\n \r\n &.active {\r\n color: ${props => props.theme.activeStageColor}; \r\n }\r\n\r\n &.completed {\r\n color: ${props => props.theme.completedStageColor};\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n color: ${props => props.theme.incompleteStageColor};\r\n } \r\n`;\r\n\r\nexport const FigcaptionSubmitStyled = styled.figcaption` \r\n display: inline-block;\r\n position: relative; \r\n font-size: 17px !important;\r\n font-weight: 700;\r\n color: ${props => props.theme.altButtonColor};\r\n margin-top: 8px;\r\n\r\n @media(max-width:1200px) {\r\n display: table-cell;\r\n\r\n &#submitStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n }\r\n\r\n &.active {\r\n color: ${props => props.theme.activeStageColor}; \r\n }\r\n\r\n &.completed {\r\n color: ${props => props.theme.completedStageColor};\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n color: ${props => props.theme.incompleteStageColor};\r\n } \r\n`;\r\n\r\nexport const RowStyled = styled(Row)` \r\n @media(max-width:1200px) {\r\n width: 95%;\r\n }\r\n`;\r\n\r\nexport const FigureStyled = styled.figure`\r\n margin: 0;\r\n`;\r\n\r\nconst Stages = props => {\r\n const stage = props.stage;\r\n const completed = \"completed\";\r\n const active = \"active\";\r\n const incomplete = \"incomplete\";\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n stage === constants.QUOTE_STAGES.Details || stage > constants.QUOTE_STAGES.Details || props.isLocked === true\r\n ? props.onStageChange(constants.QUOTE_STAGES.Details) \r\n : null} \r\n className={ props.isLocked === true \r\n ? completed \r\n : stage === constants.QUOTE_STAGES.Details \r\n ? active \r\n : stage > constants.QUOTE_STAGES.Details \r\n ? completed \r\n : incomplete} >\r\n Details\r\n \r\n {/* constants.QUOTE_STAGES.Details ? completed : incomplete, \"d-none d-sm-block\"]}>Details */}\r\n \r\n \r\n \r\n \r\n stage === constants.QUOTE_STAGES.Line || stage > constants.QUOTE_STAGES.Line \r\n ? props.onStageChange(constants.QUOTE_STAGES.Line) \r\n : null} \r\n className={props.isLocked === true ? completed : stage === constants.QUOTE_STAGES.Line ? active : stage > 1 ? completed : incomplete} >\r\n Lines\r\n \r\n {/* constants.QUOTE_STAGES.Line ? completed : incomplete, \"d-none d-sm-block\"]} >Lines */}\r\n \r\n \r\n \r\n {/* \r\n \r\n stage === constants.QUOTE_STAGES.Customer || stage > constants.QUOTE_STAGES.Customer || props.isLocked === true\r\n ? props.onStageChange(constants.QUOTE_STAGES.Customer) \r\n : null} \r\n className={ props.isLocked === true \r\n ? completed \r\n : stage === constants.QUOTE_STAGES.Customer \r\n ? active \r\n : stage > constants.QUOTE_STAGES.Customer \r\n ? completed \r\n : incomplete} >\r\n Customer\r\n \r\n \r\n */}\r\n \r\n \r\n stage === constants.QUOTE_STAGES.Attachments || stage > constants.QUOTE_STAGES.Attachments || props.isLocked === true\r\n ? props.onStageChange(constants.QUOTE_STAGES.Attachments) \r\n : null} \r\n className={ \r\n props.isLocked === true \r\n ? completed \r\n : stage === constants.QUOTE_STAGES.Attachments \r\n ? active \r\n : stage > constants.QUOTE_STAGES.Attachments \r\n ? completed \r\n : incomplete} >\r\n Attachments\r\n \r\n {/* constants.QUOTE_STAGES.Attachments ? completed : incomplete, \"d-none d-sm-block\"]}>Attachments */}\r\n \r\n \r\n {props.showAddressStage === true && \r\n \r\n \r\n stage === constants.QUOTE_STAGES.Address || stage > constants.QUOTE_STAGES.Address || props.isLocked === true\r\n ? props.onStageChange(constants.QUOTE_STAGES.Address) \r\n : null} \r\n className={ \r\n props.isLocked === true \r\n ? completed\r\n : stage === constants.QUOTE_STAGES.Address \r\n ? active \r\n : stage > constants.QUOTE_STAGES.Address \r\n ? completed \r\n : incomplete} >\r\n Address\r\n \r\n {/* constants.QUOTE_STAGES.Address ? completed : incomplete, \"d-none d-sm-block\"]}>Address */}\r\n \r\n } \r\n \r\n \r\n \r\n {props.isLocked === true \r\n ? \"Locked\" \r\n : \"Summary\"}\r\n \r\n {/* \r\n {props.isLocked === true \r\n ? \"Locked\" \r\n : props.checkmarkLabel}\r\n */}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nStages.propTypes = {\r\n onStageChange: PropTypes.func.isRequired,\r\n showAddressStage: PropTypes.bool.isRequired,\r\n allowSubmit: PropTypes.bool.isRequired,\r\n isLocked: PropTypes.bool\r\n};\r\n\r\nexport default Stages;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport { Row, Col } from 'reactstrap';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const CircleBg = styled.div` \r\n display: table-cell;\r\n width: 500px;\r\n height: 25px;\r\n margin-right: 75px;\r\n color: #FFF; \r\n text-align: center;\r\n vertical-align: middle;\r\n font-size: 24px !important;\r\n\r\n @media(max-width:1200px) {\r\n display: block;\r\n width: 25px;\r\n height: 25px;\r\n font-size 16px !important;\r\n }\r\n \r\n &.active {\r\n background-color: ${props => props.theme.buttonColor}; \r\n }\r\n\r\n &.completed {\r\n background-color: #e4e4e4;\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n background-color: ${props => props.theme.altButtonColor};\r\n } \r\n`;\r\n\r\nexport const CircleBgSubmit = styled.div` \r\n display: table-cell;\r\n width: 500px;\r\n height: 25px;\r\n margin-right: 75px;\r\n color: #FFF; \r\n text-align: center;\r\n vertical-align: middle;\r\n font-size: 24px !important;\r\n\r\n @media(max-width:1200px) {\r\n display: block;\r\n width: 25px;\r\n height: 25px;\r\n font-size 16px !important;\r\n }\r\n \r\n &.active {\r\n background-color: ${props => props.theme.altButtonColor}; \r\n }\r\n\r\n &.completed {\r\n background-color: #e4e4e4;\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n background-color: ${props => props.theme.altButtonColor};\r\n } \r\n`;\r\n\r\nexport const Wrapper = styled.div` \r\n margin-top: 2em;\r\n margin-bottom: 1em; \r\n \r\n @media(max-width:1200px) {\r\n margin-top: .75em;\r\n margin-bottom: 0;\r\n }\r\n`;\r\n\r\nexport const FigcaptionStyled = styled.figcaption` \r\n display: inline-block;\r\n position: relative; \r\n font-size: 17px !important;\r\n font-weight: 700;\r\n color: ${props => props.theme.buttonColor};\r\n margin-top: 8px;\r\n\r\n &#poStageCaption {\r\n position: relative;\r\n left: -13px;\r\n } \r\n\r\n &#attachmentStageCaption {\r\n position: relative;\r\n left: -15px;\r\n } \r\n \r\n @media(max-width:1200px) {\r\n display: table-cell;\r\n\r\n &#poStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n\r\n &#attachmentStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n }\r\n \r\n &.active {\r\n color: ${props => props.theme.buttonColor}; \r\n }\r\n\r\n &.completed {\r\n color: #e4e4e4;\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n color: ${props => props.theme.altButtonColor};\r\n } \r\n`;\r\n\r\nexport const FigcaptionSubmitStyled = styled.figcaption` \r\n display: inline-block;\r\n position: relative; \r\n font-size: 17px !important;\r\n font-weight: 700;\r\n color: ${props => props.theme.buttonColor};\r\n margin-top: 8px;\r\n\r\n &#submitStageCaption { \r\n position: relative;\r\n left: -25px; \r\n }\r\n\r\n @media(max-width:1200px) {\r\n display: table-cell;\r\n\r\n &#submitStageCaption { \r\n position: relative;\r\n left: 20px;\r\n top: 15px;\r\n }\r\n }\r\n\r\n &.active {\r\n color: ${props => props.theme.altButtonColor}; \r\n }\r\n\r\n &.completed {\r\n color: #e4e4e4;\r\n cursor: pointer;\r\n }\r\n\r\n &.incomplete {\r\n color: ${props => props.theme.altButtonColor};\r\n } \r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n width: 80%;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n\r\n @media(max-width:1200px) {\r\n width: 95%;\r\n }\r\n`;\r\n\r\nconst StagesConfirmed = props => {\r\n const stage = props.stage;\r\n const active = \"active\";\r\n const completed = \"completed\";\r\n const incomplete = \"incomplete\";\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n stage === constants.QUOTE_STAGES.PoNumber || stage > constants.QUOTE_STAGES.PoNumber ? props.onStageChange(constants.QUOTE_STAGES.PoNumber) : null} className={ stage === constants.QUOTE_STAGES.PoNumber ? active : stage > 1 ? completed : incomplete} >\r\n {constants.QUOTE_STAGES.PoNumber}\r\n \r\n constants.QUOTE_STAGES.PoNumber ? completed : incomplete, \"d-none d-sm-block\"]} >PO Number\r\n \r\n \r\n \r\n \r\n stage === constants.QUOTE_STAGES.AdditionalAttachments || stage > constants.QUOTE_STAGES.AdditionalAttachments ? props.onStageChange(constants.QUOTE_STAGES.AdditionalAttachments) : null} className={ stage === constants.QUOTE_STAGES.AdditionalAttachments ? active : stage > constants.QUOTE_STAGES.AdditionalAttachments ? completed : incomplete} >\r\n {constants.QUOTE_STAGES.AdditionalAttachments}\r\n \r\n constants.QUOTE_STAGES.AdditionalAttachments ? completed : incomplete, \"d-none d-sm-block\"]}>Additional Attachments\r\n \r\n \r\n \r\n \r\n \r\n ✔︎\r\n \r\n Convert To Order\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nStagesConfirmed.propTypes = {\r\n onStageChange: PropTypes.func.isRequired, \r\n allowSubmit: PropTypes.bool.isRequired\r\n};\r\n\r\nexport default StagesConfirmed;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport formatter from '../../modules/formatter';\r\nimport * as constants from '../../modules/constants';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\nimport Button from '../Common/Button/Button';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nexport const ImgStyled = styled.img`\r\n max-height: 90px;\r\n position: absolute;\r\n top: -30px;\r\n left: 50px;\r\n \r\n @media (max-width: 768px) { \r\n max-height: 75px;\r\n top: 0px;\r\n }\r\n`;\r\n\r\nexport const RowTotalStyled = styled(Row)`\r\n border-top: 1px solid #4f4f4f; \r\n margin-bottom: .5em;\r\n\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n font-weight: bold;\r\n padding: 0 !important;\r\n text-align: center;\r\n\r\n @media(max-width: 1200px) {\r\n margin-right: 15px;\r\n } \r\n`;\r\n\r\nexport const SummaryLabel = styled.span`\r\n width: 150px;\r\n font-weight: bold;\r\n margin-right: 15px; \r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n\r\n margin-top: .25em; \r\n`;\r\n\r\nexport const SummaryRowStyled = styled(Row)`\r\n \r\n margin-top: 1em; \r\n margin-bottom: 1em; \r\n border-bottom: 1px solid lightgray;\r\n`;\r\n\r\nexport const RowLineStyled = styled(Row)`\r\n \r\n padding-top: 35px;\r\n padding-bottom: 35px;\r\n\r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n \r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n\r\n :hover button, :hover .icon-line { \r\n visibility: visible !important; \r\n }\r\n`;\r\n\r\n\r\nexport const TextInputPrimitiveStyled = styled(TextInputPrimitive)`\r\n width: 50px;\r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n margin-top: 1em;\r\n margin-bottom: 1em;\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\n\r\nconst Summary = props => {\r\n let totalPrice = 0;\r\n let totalQuantity = 0;\r\n \r\n return (\r\n \r\n Summary
\r\n\r\n \r\n Job Name:{props.description} \r\n Status:{props.statusName} \r\n {/* Company:{props.company} */}\r\n \r\n\r\n \r\n Line #\r\n \r\n Part\r\n Quantity \r\n Unit Price \r\n Total Price \r\n \r\n\r\n\r\n\r\n { \r\n (props.lines && props.lines.length > 0) && \r\n props.lines.map(line => {\r\n\r\n totalPrice = totalPrice + line.price * line.quantity;\r\n totalQuantity = totalQuantity + line.quantity;\r\n return ( \r\n \r\n {line.lineNumber}\r\n { line.imgUrl \r\n ? \r\n : }\r\n {line.productName}\r\n props.onQuantityChange(e, line.id)} /> \r\n ${formatter.currency(line.price)}\r\n ${formatter.currency(line.price * line.quantity)}
\r\n \r\n );\r\n }) \r\n }\r\n \r\n Total \r\n \r\n {totalQuantity} \r\n \r\n ${formatter.currency(totalPrice)}\r\n \r\n \r\n );\r\n};\r\n\r\nSummary.propTypes = {\r\n lines: PropTypes.array.isRequired,\r\n description: PropTypes.string.isRequired, \r\n statusName: PropTypes.string.isRequired,\r\n company: PropTypes.string.isRequired\r\n};\r\n\r\nexport default Summary;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Row, Col } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nconst PoNumber = props => {\r\n return ( \r\n \r\n \r\n \r\n props.onBlur(e)} defaultValue={props.defaultValue} />\r\n \r\n
\r\n );\r\n};\r\n\r\nPoNumber.propTypes = {\r\n onBlur: PropTypes.func.isRequired,\r\n id: PropTypes.string.isRequired,\r\n defaultValue: PropTypes.string.isRequired\r\n};\r\n\r\nexport default PoNumber;","\r\nimport * as constants from './constants';\r\nimport moment from 'moment';\r\n\r\nexport function isLocked(role, statusId) { \r\n if (role === constants.ROLE.User) {\r\n if (statusId === constants.STATUS_TYPES.InProgressAccepted || statusId === constants.STATUS_TYPES.Sent || statusId === constants.STATUS_TYPES.ConvertedToOrder || statusId === constants.STATUS_TYPES.Shipped || statusId === constants.STATUS_TYPES.Completed || statusId === constants.STATUS_TYPES.SubmittedForApproval) {\r\n return true;\r\n }\r\n }\r\n else if (role === constants.ROLE.Fabricator) {\r\n if (statusId === constants.STATUS_TYPES.Completed || statusId === constants.STATUS_TYPES.ConvertedToOrder) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n else { \r\n return false;\r\n }\r\n}\r\n\r\nexport function convertToDate(dateString) {\r\n if (dateString)\r\n return moment(dateString).toDate();\r\n}\r\n\r\nexport function getCheckmarkLabel(status, roleName) {\r\n let submitLabel;\r\n \r\n if (status === constants.STATUS_TYPES.InProgressAccepted) {\r\n\r\n submitLabel = roleName === constants.ROLE.User ? constants.STAGES_BUTTON_LABELS.Locked : constants.STAGES_BUTTON_LABELS.Shipped;\r\n } else if (status === constants.STATUS_TYPES.SubmittedForApproval) {\r\n submitLabel = constants.STAGES_BUTTON_LABELS.Accept; \r\n } else if (status === constants.STATUS_TYPES.Sent) {\r\n submitLabel = constants.STAGES_BUTTON_LABELS.Confirm; \r\n }\r\n else {\r\n submitLabel = constants.STAGES_BUTTON_LABELS.Submit;\r\n }\r\n\r\n return submitLabel;\r\n}\r\n\r\nexport function getCompanyType(companyList, companyName) {\r\n if (!companyList || !companyName) return;\r\n\r\n let company = companyList.filter(x => x.name === companyName);\r\n\r\n if (company.length > 0) {\r\n let c = company[0];\r\n \r\n if (c.fabricatorId)\r\n return constants.COMPANY_TYPES.Fabricator;\r\n\r\n if (c.installerId)\r\n return constants.COMPANY_TYPES.Installer;\r\n } \r\n}\r\n\r\nexport function isEmail(email) {\r\n var re = /\\S+@\\S+\\.\\S+/;\r\n return re.test(email);\r\n}","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nexport const Wrapper = styled.div` \r\n position: absolute;\r\n display: flex;\r\n height: 100%;\r\n width: 100%; \r\n align-items: center; \r\n justify-content: center;\r\n`;\r\n\r\nconst Loading = React.memo(() => { \r\n return ( \r\n \r\n ![\"Loading\"](\"/images/loading.svg\")
\r\n \r\n ); \r\n}); \r\n\r\nexport default Loading; ","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport guid from '../../modules/guid';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\n//import * as workflowActions from '../../actions/workflowActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport * as constants from '../../modules/constants';\r\nimport Lines from '../QuoteOrderCommon/Line';\r\nimport styled from 'styled-components';\r\nimport AddressForm from '../QuoteOrderCommon/AddressForm';\r\nimport ContactInfo from '../QuoteOrderCommon/ContactInfo';\r\nimport Attachments from '../QuoteOrderCommon/Attachments';\r\nimport AttachmentList from '../QuoteOrderCommon/AttachmentList';\r\nimport CommunicationList from '../QuoteOrderCommon/CommunicationList';\r\nimport HeaderDetails from '../QuoteOrderCommon/HeaderDetails';\r\nimport LineActions from '../QuoteOrderCommon/LineActions';\r\nimport Stages from '../QuoteOrderCommon/Stages';\r\nimport StagesConfirmed from '../QuoteOrderCommon/StagesConfirmed';\r\nimport Summary from '../QuoteOrderCommon/Summary';\r\nimport PoNumber from '../QuoteOrderCommon/PoNumber';\r\nimport * as QuoteOrderCommon from '../../modules/quoteOrderCommon';\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\nimport 'react-confirm-alert/src/react-confirm-alert.css'; // Import css\r\nimport Loading from '../Common/Loading/Loading';\r\n\r\nexport const DatePickerLabel = styled.label`\r\n margin-right: 15px;\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n margin-top: .5em;\r\n margin-bottom: 2em;\r\n height: 70px;\r\n`;\r\n\r\nexport const statusLabel = styled.div`\r\n font-size: 20px !important;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)` \r\n @media(min-width:1200px) {\r\n min-height:440px;\r\n }\r\n`;\r\n\r\nclass Quote extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar();\r\n\r\n this.onConfigureClick = this.onConfigureClick.bind(this);\r\n this.onProductChange = this.onProductChange.bind(this);\r\n this.onQuantityChange = this.onQuantityChange.bind(this);\r\n this.onReconfigure = this.onReconfigure.bind(this);\r\n this.onLineDelete = this.onLineDelete.bind(this);\r\n this.onAddressFieldUpdate = this.onAddressFieldUpdate.bind(this);\r\n this.onContactFieldUpdate = this.onContactFieldUpdate.bind(this);\r\n this.onInputFocus = this.onInputFocus.bind(this);\r\n this.onFieldUpdate = this.onFieldUpdate.bind(this);\r\n this.submitQuote = this.submitQuote.bind(this);\r\n this.sendEmail = this.sendEmail.bind(this);\r\n this.onQuoteCancel = this.onQuoteCancel.bind(this);\r\n this.onPrint = this.onPrint.bind(this);\r\n this.onCopy = this.onCopy.bind(this);\r\n this.onAddCommunicationClick = this.onAddCommunicationClick.bind(this);\r\n this.onCopyLine = this.onCopyLine.bind(this);\r\n this.onClickDownloadFile = this.onClickDownloadFile.bind(this);\r\n this.statusChange = this.statusChange.bind(this); \r\n this.onCreatedByChanged = this.onCreatedByChanged.bind(this);\r\n this.onLocationChange = this.onLocationChange.bind(this);\r\n this.onCommunicationCollapseClicked = this.onCommunicationCollapseClicked.bind(this);\r\n this.onHeaderFieldUpdate = this.onHeaderFieldUpdate.bind(this);\r\n this.onShipToStoreChanged = this.onShipToStoreChanged.bind(this);\r\n this.onStageChange = this.onStageChange.bind(this);\r\n this.poNumberChanged = this.poNumberChanged.bind(this);\r\n this.onCommunicationPageChange = this.onCommunicationPageChange.bind(this);\r\n this.previousStage = this.previousStage.bind(this);\r\n this.onCompanyChange = this.onCompanyChange.bind(this);\r\n this.onDeleteAttachment = this.onDeleteAttachment.bind(this); \r\n this.shipToCustomer = this.shipToCustomer.bind(this); \r\n this.saveAsDraft = this.saveAsDraft.bind(this); \r\n this.onfaxTemplateOpen = this.onfaxTemplateOpen.bind(this);\r\n this.generateReport = this.generateReport.bind(this);\r\n this.onAddCountertopClick = this.onAddCountertopClick.bind(this);\r\n this.onSetToPendingInformationClick = this.onSetToPendingInformationClick.bind(this);\r\n this.onSetToDraftClick = this.onSetToDraftClick.bind(this);\r\n \r\n this.updateHeader = this.updateHeader.bind(this);\r\n\r\n this.state = {\r\n selectedProduct: '',\r\n disableAddLine: true,\r\n onFocusValue: '', \r\n updatedRequired: false,\r\n loading: true,\r\n status: null,\r\n accepted: false,\r\n shipDate: '',\r\n createdByUserId: null,\r\n createdByEmail: null,\r\n companyLocationId: null,\r\n communicationCollapsed: false, \r\n allowHomeDelivery: false,\r\n stage: 1,\r\n submitButtonLabel: constants.STAGES_BUTTON_LABELS.Next,\r\n submitButtonColor: constants.rentechTheme.callToActionColor,\r\n checkmarkLabel: '',\r\n requiredStages: 3,\r\n shipToStoreTotalRequiredStages: 3,\r\n shipToCustomerTotalRequiredStages: 4,\r\n confirmedTotalRequiredStages: 7,\r\n isLocked: false,\r\n communicationOffset: 0,\r\n communicationRowsToFetch: 5,\r\n currentCommunicationPage: 1,\r\n allowSOSInstall: false,\r\n allowedShipToTypes: null,\r\n showAddDesignerModal: false\r\n }; \r\n }\r\n\r\n componentDidMount() { \r\n if (this.props.quote.id) { \r\n const promise1 = this.props.apiActions.getCompanyProducts(this.props.session.company); \r\n const promise2 = this.getQuoteById(this.props.quote.id);\r\n const promise3 = this.props.quoteOrderCommonActions.getUserCompanyLocations(this.props.session.userCompanyLocationIdCSV, this.props.session.username, this.props.session.company);\r\n const promise4 = this.props.adminActions.getAllCompanies(this.props.session.manufacturer, constants.GET_ALL_COMPANIES_PARAMS.excludeFabricators, constants.GET_ALL_COMPANIES_PARAMS.excludeInstallers);\r\n const promise5 = this.props.adminActions.getCompanyLocations(this.props.session.company);\r\n const promise6 = this.props.quoteOrderCommonActions.getShipToTypes(this.props.session.manufacturer, this.props.quote.id);\r\n const promise7 = this.props.adminActions.getAllProducts(); \r\n\r\n Promise.all([promise1, promise2, promise3, promise4, promise5, promise6, promise7]).then(() => { \r\n let shipToStoreTypeId = this.props.quote.shipToTypeId;\r\n let allowHomeDelivery = false;\r\n let allowSOSInstall = false;\r\n let allowedShipToTypes;\r\n\r\n \r\n if (this.props.admin.companyLocations) {\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == this.props.quote.companyLocationId);\r\n \r\n if (locations.length > 0) {\r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes;\r\n \r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n\r\n allowHomeDelivery = locations[0].allowHomeDelivery; \r\n allowSOSInstall = locations[0].allowSOSInstall ? locations[0].allowSOSInstall : false; \r\n } else {\r\n allowedShipToTypes = this.props.quoteOrderCommon.shipToTypes;\r\n }\r\n }\r\n \r\n this.setState({ \r\n status: this.props.quote.statusTypeId ? this.props.quote.statusTypeId : constants.STATUS_TYPES.Draft, \r\n createdByUserId: this.props.quote.createdByUserId, \r\n createdByEmail: this.props.quote.createdByEmail, \r\n companyLocationId: this.props.quote.companyLocationId,\r\n //shipToStoreTypeId: shipToStoreTypeId,\r\n allowHomeDelivery: allowHomeDelivery,\r\n stage: this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed ? constants.QUOTE_STAGES.PoNumber : constants.QUOTE_STAGES.Details,\r\n isLocked: QuoteOrderCommon.isLocked(this.props.session.roleName, this.props.quote.statusTypeId),\r\n allowSOSInstall: allowSOSInstall,\r\n allowedShipToTypes: allowedShipToTypes \r\n }); \r\n \r\n let shipToCustomer = shipToStoreTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n this.setRequiredStages(shipToCustomer);\r\n\r\n if (!this.props.quote.companyLocationId) {\r\n if (this.props.quoteOrderCommon.userCompanyLocations.length === 1) {\r\n this.props.quoteOrderCommonActions.updateField(this.props.quote.id, constants.ORDER_SQL_COLUMNS.CompanyLocationId, this.props.quoteOrderCommon.userCompanyLocations[0].id, constants.TABLES.Quote).then(() => { \r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n this.props.quoteActions.updateCompanyLocation(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n this.props.quoteOrderCommonActions.getCompanyLocationFabricator(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == this.props.quote.companyLocationId);\r\n \r\n if (locations.length > 0) {\r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes;\r\n \r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n\r\n this.setState({allowedShipToTypes: allowedShipToTypes});\r\n\r\n }\r\n }); \r\n }\r\n } else {\r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(this.props.quote.companyLocationId);\r\n } \r\n\r\n if (this.props.quote.companyLocationId) { \r\n if (this.props.quote.installType === constants.INSTALL_TYPES.SOSInstall) {\r\n this.getDefaultInstaller(this.props.quote.companyLocationId); \r\n }\r\n\r\n this.props.adminActions.getCompanyLocationAddresses(this.props.quote.companyLocationId);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(this.props.quote.companyLocationId);\r\n } \r\n\r\n if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Pending)\r\n this.setState({ stage: constants.QUOTE_STAGES.Attachments });\r\n\r\n this.setSubmitButtonText();\r\n\r\n if (this.props.location.previousPage && this.props.location.previousPage === 'Configurator') {\r\n this.onStageChange(constants.QUOTE_STAGES.Line);\r\n } \r\n \r\n this.props.apiActions.clearConfigurator();\r\n\r\n if (!this.props.quote.contact || this.props.quote.contact.length === 0)\r\n this.props.quoteOrderCommonActions.getContact(this.props.quote.id, null);\r\n\r\n if (!this.props.quote.attachments || this.props.quote.attachments.length === 0)\r\n this.props.quoteOrderCommonActions.getAttachments(this.props.quote.id, null, null);\r\n }); \r\n }\r\n else {\r\n this.props.history.push({ pathname: '/Overview' }); \r\n } \r\n }\r\n\r\n shipToCustomer(shipToStoreTypeId) {\r\n return shipToStoreTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n }\r\n\r\n onfaxTemplateOpen() {\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderFax, \"C\", \"Q\", this.props.quote.id);\r\n }\r\n \r\n onDeleteAttachment(fileId) { \r\n confirmAlert({\r\n title: 'Confirm delete',\r\n message: 'Are you sure to delete?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.quoteOrderCommonActions.deleteAttachment(fileId, this.props.quote.id); \r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n }); \r\n }\r\n\r\n previousStage(event) {\r\n if (this.state.stage === 1 || (this.state.status === constants.STATUS_TYPES.Confirmed && this.state.stage === 6)) return;\r\n\r\n this.onStageChange(this.state.stage - 1);\r\n }\r\n\r\n saveAsDraft() { \r\n this.props.history.push({\r\n pathname: '/Overview' \r\n }); \r\n }\r\n\r\n poNumberChanged(event) {\r\n this.updateHeader(event.target.id, event.target.value); \r\n \r\n this.props.quoteActions.updatePoNumber(event.target.value);\r\n }\r\n\r\n onStageChange(stage) { \r\n this.setState({ stage: stage }, this.setSubmitButtonText(stage)); \r\n \r\n this.setRequiredStages(this.shipToCustomer(this.props.quote.shipToTypeId));\r\n\r\n if (stage === constants.QUOTE_STAGES.Address) {\r\n if (!this.props.quote.attachments || this.props.quote.attachments.length === 0) {\r\n this.props.alertActions.showFailureAlert(\"Warning: if no drawing is uploaded one will need to be faxed in. See attachment section for the document to fax\");\r\n }\r\n }\r\n\r\n }\r\n\r\n setSubmitButtonText(stage) {\r\n let defaultLabel = constants.STAGES_BUTTON_LABELS.Next;\r\n let submitLabel = constants.STAGES_BUTTON_LABELS.Submit;\r\n \r\n submitLabel = this.getSubmitButtonLabel(stage);\r\n\r\n this.setState({ \r\n submitButtonLabel: stage > this.state.requiredStages ? submitLabel : defaultLabel,\r\n //submitButtonColor: stage > this.state.requiredStages ? '#e2231a' : '#00AA0B',\r\n checkmarkLabel: QuoteOrderCommon.getCheckmarkLabel(this.state.status)\r\n });\r\n }\r\n\r\n getSubmitButtonLabel(stage) { \r\n return stage > this.state.requiredStages ? QuoteOrderCommon.getCheckmarkLabel(this.state.status) : constants.STAGES_BUTTON_LABELS.Submit; \r\n }\r\n\r\n setRequiredStages(shipToCustomer) {\r\n if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed) {\r\n this.setState({ requiredStages: this.state.confirmedTotalRequiredStages });\r\n } else {\r\n this.setState({ requiredStages: shipToCustomer === true ? this.state.shipToCustomerTotalRequiredStages : this.state.shipToStoreTotalRequiredStages });\r\n } \r\n }\r\n\r\n onShipToStoreChanged(event) {\r\n if (event.target.value === constants.PLACEHOLDER) return; \r\n\r\n this.setRequiredStages(this.shipToCustomer(this.props.quote.shipToTypeId)); \r\n this.onStageChange(constants.QUOTE_STAGES.Details);\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.ShipToStore, event.target.value);\r\n\r\n if (event.target.value === constants.SHIP_TO_TYPES.Store) \r\n this.setShipAddressToLocationShipTo();\r\n\r\n if (event.target.value.toString() === constants.SHIP_TO_TYPES.Customer.toString()) {\r\n this.addHomeDeliveryCharge();\r\n } else {\r\n this.removeHomeDeliveryCharge();\r\n }\r\n }\r\n\r\n addHomeDeliveryCharge() {\r\n let location = this.props.admin.companyLocations.filter(l => l.id === this.props.quote.companyLocationId); \r\n let homeDeliveryProduct = this.props.admin.productList.filter(p => p.Name === constants.HOME_DELIVERY);\r\n let locationHomeDeliveryCharge = location[0].homeDeliveryCharge ? location[0].homeDeliveryCharge : homeDeliveryProduct[0].defaultPrice;\r\n \r\n let newConfigId = guid.GenerateGUID();\r\n\r\n if (homeDeliveryProduct.length > 0)\r\n this.props.quoteOrderCommonActions.createLine(this.props.quote.id, this.props.session.username, locationHomeDeliveryCharge, homeDeliveryProduct[0].ImageUrl, newConfigId, \"ICE\", homeDeliveryProduct[0].ID, null);\r\n }\r\n\r\n removeHomeDeliveryCharge() {\r\n if (!this.props.quote.lines || this.props.quote.lines.length === 0) return;\r\n\r\n let homeDeliveryProduct = this.props.quote.lines.filter(l => l.productName === constants.HOME_DELIVERY);\r\n\r\n if (homeDeliveryProduct.length > 0)\r\n this.props.quoteOrderCommonActions.deleteLine(homeDeliveryProduct[0].id, this.props.quote.id, null);\r\n }\r\n\r\n setShipAddressToLocationShipTo() {\r\n if (this.props.quote.shippingAddress && this.props.quote.companyLocationId && this.props.admin.activeCompanyLocationShippingAddress) {\r\n\r\n let locationShip = this.props.admin.activeCompanyLocationShippingAddress;\r\n this.updateAddress(\"address\", locationShip.address, \"shipping\");\r\n this.updateAddress(\"address2\", locationShip.address2, \"shipping\");\r\n this.updateAddress(\"city\", locationShip.city, \"shipping\");\r\n this.updateAddress(\"state\", locationShip.state, \"shipping\");\r\n this.updateAddress(\"zip\", locationShip.zip, \"shipping\"); \r\n }\r\n } \r\n\r\n onCommunicationCollapseClicked() {\r\n let collapsed = !this.state.communicationCollapsed;\r\n this.setState({ communicationCollapsed: collapsed });\r\n }\r\n\r\n onCreatedByChanged(event) {\r\n let value = event.target.value === constants.PLACEHOLDER ? null : event.target.value;\r\n this.setState({ createdByUserId: value });\r\n\r\n if (value) {\r\n this.updateHeader(event.target.id, value); \r\n }\r\n } \r\n\r\n statusChange(event) { \r\n if (event.target.value === constants.PLACEHOLDER) return;\r\n \r\n if (event.target.value) {\r\n let selectedStatus = this.props.quoteOrderCommon.statusTypes.filter(status => status.id.toString() === event.target.value); \r\n //this.runStatusChangeWorkflows(selectedStatus[0].name);\r\n\r\n this.updateQuoteStatus(selectedStatus[0].id);\r\n this.onAddCommunicationClick(`Quote status changed to ${selectedStatus[0].name}.`, false);\r\n //this.createSystemCommunication(`Quote status changed to ${selectedStatus[0].name}.`);\r\n\r\n if (selectedStatus[0].id === constants.STATUS_TYPES.Confirmed) {\r\n this.setState({ stage: constants.QUOTE_STAGES.PoNumber }, this.setState({ requiredStages: this.state.confirmedTotalRequiredStages })); \r\n }\r\n \r\n if (selectedStatus[0].id !== constants.STATUS_TYPES.Draft)\r\n this.sendEmail(constants.EMAIL_TYPES.StatusChange, selectedStatus[0].name);\r\n }\r\n }\r\n\r\n // runStatusChangeWorkflows(status) {\r\n // if (this.props.workflows.onQuoteStatusChange && this.props.workflows.onQuoteStatusChange.length > 0 && this.props.quoteOrderCommon.userCompanyLocations.length > 0) {\r\n\r\n // this.props.workflows.onQuoteStatusChange.forEach(workflow => {\r\n // switch(workflow.actionTypeId) {\r\n\r\n // case constants.WORKFLOW_ACTION_TYPES.sendEmail: \r\n // this.props.workflowActions.emailStatusUpdate(status, this.props.quoteOrderCommon.userCompanyLocations[0].quoteSubmitEmailList, workflow.actionSubject, workflow.actionBody);\r\n // break; \r\n \r\n // default:\r\n // console.log('no matching workflow id');\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n async getQuoteById(quoteId) {\r\n await this.props.quoteActions.getQuoteById(quoteId); \r\n this.setState({ loading: false });\r\n }\r\n\r\n getCommunications() {\r\n this.props.quoteOrderCommonActions.getCommunications(this.props.quote.id, null, this.state.communicationOffset, this.state.communicationRowsToFetch); \r\n }\r\n\r\n onAddCommunicationClick(comment, sendEmail = true) {\r\n this.props.quoteOrderCommonActions.createCommunication(this.props.quote.id, this.props.session.username, comment, 1, null);\r\n \r\n if (sendEmail === true)\r\n this.sendEmail(constants.EMAIL_TYPES.UserCommunication, comment);\r\n }\r\n\r\n onSetToPendingInformationClick(comment) {\r\n if (!comment) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a comment to set the quote to pending.\");\r\n return;\r\n }\r\n this.updateQuoteStatus(constants.STATUS_TYPES.Pending);\r\n this.props.quoteOrderCommonActions.createCommunication(this.props.quote.id, this.props.session.username, comment, 1, null);\r\n this.sendEmail(constants.EMAIL_TYPES.PendingInformation, constants.STATUS_TYPES.Pending, comment);\r\n }\r\n\r\n onSetToDraftClick(comment) {\r\n if (!comment) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a comment to set the quote to draft.\");\r\n return;\r\n }\r\n this.updateQuoteStatus(constants.STATUS_TYPES.Draft);\r\n this.props.quoteOrderCommonActions.createCommunication(this.props.quote.id, this.props.session.username, comment, 1, null);\r\n this.sendEmail(constants.EMAIL_TYPES.StatusChange, constants.STATUS_TYPES.Draft, comment);\r\n }\r\n \r\n onQuoteCancel() {\r\n this.updateQuoteStatus(constants.STATUS_TYPES.Cancelled);\r\n\r\n this.onAddCommunicationClick(`The quote has been cancelled.`, false);\r\n //this.createSystemCommunication(`The quote has been cancelled.`);\r\n\r\n this.sendEmail(constants.EMAIL_TYPES.QuoteCancel);\r\n\r\n this.props.alertActions.showSuccessAlert(`Quote #${this.props.quote.id} has been cancelled.`);\r\n this.props.history.push({ pathname: '/QuoteList' }); \r\n } \r\n\r\n onCopyLine(LineId, configurationId, headerId, productId) {\r\n let newConfigId = guid.GenerateGUID();\r\n let products = this.props.admin.productList;\r\n\r\n if (products) {\r\n // eslint-disable-next-line\r\n let lineProduct = products.filter(p => p.ID == productId)[0];\r\n this.props.quoteOrderCommonActions.CopyLineConfiguration(lineProduct.ApplicationInstance, lineProduct.ApplicationName, \"http://hkplt01/PCM/ConfiguratorService/v2/ProductConfigurator.svc\", headerId, configurationId, headerId, newConfigId);\r\n }\r\n\r\n this.props.quoteOrderCommonActions.copyLine(LineId, newConfigId, this.props.quote.id, null);\r\n }\r\n\r\n onAddCountertopClick() {\r\n let products = this.props.admin.productList;\r\n let productId;\r\n if (products) {\r\n // auto load counter top from lowes\r\n let selectedProduct = products.filter(p => p.ID == 1)[0]; \r\n\r\n if (!selectedProduct) {\r\n this.props.alertActions.showFailureAlert(\"No product found\");\r\n return;\r\n }\r\n\r\n this.props.apiActions.setSelectedProduct(selectedProduct); \r\n \r\n productId = selectedProduct.ID; \r\n }\r\n\r\n this.props.apiActions.setActiveProduct(this.props.session.username, productId, this.props.session.company).then(() => {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Quote); \r\n this.props.history.push({ pathname: '/Configurator' }); \r\n });\r\n }\r\n\r\n onPrint() { \r\n this.props.history.push({\r\n pathname: '/QuotePrint' \r\n }); \r\n }\r\n\r\n onCopy() {\r\n this.props.quoteOrderCommonActions.copy(this.props.quote.id, this.props.session.username, null).then(() => {\r\n this.props.history.push({ pathname: '/QuoteList' });\r\n });\r\n }\r\n\r\n \r\n\r\n getDesignerEmail() {\r\n let designer = this.props.quoteOrderCommon.designers.filter(d => d.userId === this.props.quote.createdByUserId);\r\n let email = '';\r\n \r\n if (designer && designer.length > 0)\r\n email = designer[0].email;\r\n \r\n return email;\r\n }\r\n\r\n sendEmail(emailType, newStatus, comment) {\r\n let locations = this.props.admin.companyLocations.filter(l => l.id === this.props.quote.companyLocationId);\r\n let sendToEmail = \"\";\r\n \r\n if (locations.length > 0) {\r\n sendToEmail = this.props.quote.installType === constants.INSTALL_TYPES.SOS ? \r\n locations[0].orderSubmitEmailList :\r\n locations[0].orderSubmitAltEmailList; \r\n }\r\n\r\n if (!sendToEmail) {\r\n alertActions.showFailureAlert(\"Email failed to send. No email configured for this location\");\r\n return;\r\n } else {\r\n let designerEmail = this.getDesignerEmail();\r\n \r\n // if (this.props.quoteOrderCommon.companyLocationUsers && this.props.quoteOrderCommon.companyLocationUsers.length > 0) {\r\n // designerEmail = this.props.quoteOrderCommon.companyLocationUsers.filter(u => u.id === this.props.quote.createdByUserId)[0].username;\r\n // }\r\n \r\n sendToEmail = sendToEmail + ', ' + designerEmail;\r\n\r\n console.log(sendToEmail);\r\n if (emailType === constants.EMAIL_TYPES.QuoteOrder)\r\n this.props.quoteOrderCommonActions.emailQuoteOrder(this.getEmailDTO(locations, sendToEmail, newStatus)); \r\n else if (emailType === constants.EMAIL_TYPES.StatusChange)\r\n this.props.quoteOrderCommonActions.emailStatusChange(this.getEmailDTO(locations, sendToEmail, newStatus));\r\n else if (emailType === constants.EMAIL_TYPES.QuoteCancel) \r\n this.props.quoteOrderCommonActions.emailQuoteCancelled(this.props.quote.id, sendToEmail, newStatus, this.props.quote.fabricatorPhone); \r\n else if (emailType === constants.EMAIL_TYPES.UserCommunication)\r\n this.props.quoteOrderCommonActions.emailUserCommunication(this.getEmailDTO(locations, sendToEmail, newStatus)); \r\n else if (emailType === constants.EMAIL_TYPES.PendingInformation)\r\n this.props.quoteOrderCommonActions.emailPendingInformation(this.getEmailDTO(locations, sendToEmail, newStatus, comment)); \r\n }\r\n }\r\n\r\n getEmailDTO(locations, sendToEmail, newStatus, comment){ \r\n let locationName = 'n/a';\r\n let fabricatorPhone = this.props.quote.fabricatorPhone;\r\n\r\n if (this.props.quote.companyLocationId)\r\n if (this.props.admin.companyLocations && this.props.admin.companyLocations.length > 0) {\r\n locationName = this.props.admin.companyLocations.filter(l => l.id === this.props.quote.companyLocationId)[0].name; \r\n }\r\n\r\n let status = 'n/a'\r\n if (this.props.quote.statusTypeId && this.props.quoteOrderCommon.statusTypes) {\r\n status = this.props.quoteOrderCommon.statusTypes.filter(s => s.id === this.props.quote.statusTypeId)[0].name;\r\n }\r\n \r\n var emailData = {\r\n quoteId: this.props.quote.id,\r\n lines: this.props.quote.lines,\r\n billingAddress: this.props.quote.billingAddress[0],\r\n shippingAddress: this.props.quote.shippingAddress[0],\r\n shipToTypeId: this.props.quote.shipToTypeId,\r\n installType: this.props.quote.installType,\r\n fabricator: locations[0].fabricatorName,\r\n installer: this.props.quote.installType === constants.INSTALL_TYPES.SOS ? '' : locations[0].installerName,\r\n contact: this.props.quote.contact,\r\n description: this.props.quote.name,\r\n sendToEmail: sendToEmail,\r\n orderId: this.props.quote.orderConvertedTo,\r\n locationName: locationName,\r\n firstName: this.props.quote.contact[0].firstName,\r\n lastName: this.props.quote.contact[0].lastName,\r\n status: status,\r\n newStatus: newStatus,\r\n oldStatus: status,\r\n designerEmail: this.getDesignerEmail(), \r\n comment: comment,\r\n fabricatorPhone: fabricatorPhone,\r\n isOrder: false \r\n }\r\n\r\n return emailData;\r\n }\r\n\r\n getStatusName(statusId) {\r\n if (this.props.quoteOrderCommon.statusTypes && this.props.quoteOrderCommon.statusTypes.length > 0) {\r\n return this.props.quoteOrderCommon.statusTypes.filter(s => s.id === statusId)[0].name;\r\n }\r\n }\r\n\r\n submitQuote() { \r\n if (this.state.stage > this.state.requiredStages) { \r\n if (this.state.isLocked === true) {\r\n this.props.alertActions.showFailureAlert('Quote is locked, no action can be taken.');\r\n return;\r\n }\r\n\r\n let communicationText;\r\n let newStatus;\r\n\r\n if (this.state.stage === constants.QUOTE_STAGES.ConvertToOrder) {\r\n communicationText = `The quote was converted to an order by ${this.props.session.username}`;\r\n \r\n this.props.quoteActions.convertQuoteToOrder(this.props.quote.id, this.props.session.username).then(() => {\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.SubmittedForApproval);\r\n this.updateQuoteStatus(constants.STATUS_TYPES.ConvertedToOrder); \r\n \r\n this.sendEmail(constants.EMAIL_TYPES.QuoteOrder, newStatus);\r\n this.onAddCommunicationClick(communicationText, false);\r\n ///this.createSystemCommunication(communicationText); \r\n \r\n this.props.history.push({ pathname: '/OrderDashboard' }); \r\n }); \r\n return;\r\n \r\n }\r\n else if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Pending) {\r\n if (!this.props.quote.attachments || this.props.quote.attachments.length === 0) { \r\n this.props.alertActions.showFailureAlert('Please attach a drawing to update the quote');\r\n return;\r\n } else {\r\n communicationText = `Quote has been submitted for approval`;\r\n this.updateQuoteStatus(constants.STATUS_TYPES.Sent); \r\n\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Sent);\r\n\r\n this.sendEmail(constants.EMAIL_TYPES.QuoteOrder, newStatus);\r\n this.onAddCommunicationClick(communicationText, false);\r\n //this.createSystemCommunication(communicationText);\r\n return; \r\n }\r\n } \r\n else {\r\n let newStatus = this.props.quoteOrderCommon.statusTypes.filter(s => s.id === constants.STATUS_TYPES.Sent);\r\n if (!this.props.quote.attachments || this.props.quote.attachments.length === 0) {\r\n communicationText = `Quote submitted without attachments. Status set to pending.`; \r\n this.updateQuoteStatus(constants.STATUS_TYPES.Pending);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Pending);\r\n }\r\n else if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n communicationText = `Quote confirmed by ${this.props.session.username}`; \r\n this.updateQuoteStatus(constants.STATUS_TYPES.Confirmed); \r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Confirmed);\r\n } else {\r\n communicationText = `The quote was submitted by ${this.props.session.username}`;\r\n this.updateQuoteStatus(constants.STATUS_TYPES.Sent); \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.IsLocked, true); \r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Sent); \r\n }\r\n \r\n this.sendEmail(constants.EMAIL_TYPES.QuoteOrder, newStatus);\r\n this.onAddCommunicationClick(communicationText, false);\r\n // this.createSystemCommunication(communicationText);\r\n } \r\n\r\n this.props.history.push({ pathname: '/QuoteDashboard' });\r\n\r\n } else {\r\n \r\n if (this.validateStage() === true)\r\n this.onStageChange(this.state.stage + 1); \r\n } \r\n }\r\n\r\n validateStage() {\r\n let stage = this.state.stage;\r\n\r\n if (stage === constants.QUOTE_STAGES.Line) \r\n return true; //return this.validateLineStage();\r\n else if (stage === constants.QUOTE_STAGES.Details) {\r\n let validDetails = this.validateDetailsStage();\r\n let validCustomer = this.validateCustomerStage();\r\n\r\n if (validDetails === false) return validDetails;\r\n if (validCustomer === false) return validCustomer;\r\n\r\n return true;\r\n } \r\n \r\n else if (stage === constants.QUOTE_STAGES.Address)\r\n return this.validateAddressStage();\r\n else if (stage === constants.QUOTE_STAGES.PoNumber)\r\n return this.validatePO(); \r\n \r\n return true; \r\n }\r\n\r\n validatePO(){\r\n if (!this.props.quote.poNumber) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a PO number\");\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n validateAddressStage() {\r\n if (this.shipToCustomer(this.props.quote.shipToTypeId) !== true) return true;\r\n\r\n let shippingAddress = this.props.quote.shippingAddress[0];\r\n\r\n if (!shippingAddress) {\r\n this.props.alertActions.showFailureAlert(\"No shipping address found\");\r\n return false;\r\n }\r\n\r\n if (!shippingAddress.Address) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the address field\");\r\n return false;\r\n } \r\n \r\n if (!shippingAddress.City) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the City field\");\r\n return false;\r\n } \r\n\r\n if (!shippingAddress.State) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the State field\");\r\n return false;\r\n }\r\n \r\n // if (!shippingAddress.Country) {\r\n // this.props.alertActions.showFailureAlert(\"Please enter a value in the Country field\");\r\n // return false;\r\n // } \r\n\r\n return true;\r\n }\r\n\r\n validateDetailsStage() {\r\n if (!this.props.quote.name) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a job name\");\r\n return false;\r\n }\r\n\r\n // if (!this.props.quote.createdByEmail) {\r\n // this.props.alertActions.showFailureAlert(\"Please enter a designer\");\r\n // return false;\r\n // } \r\n\r\n if (!this.props.quote.companyLocationId || this.props.quote.companyLocationId === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a location\");\r\n return false;\r\n }\r\n\r\n if (!this.props.quote.createdByUserId || this.props.quote.createdByUserId === constants.PLACEHOLDER || this.props.quote.createdByUserId === -1) {\r\n this.props.alertActions.showFailureAlert(\"Please select a designer\");\r\n return false;\r\n }\r\n\r\n \r\n\r\n if (!this.props.quote.installType || this.props.quote.installType === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select an install type\");\r\n return false;\r\n }\r\n\r\n if (this.props.quote.installType === constants.INSTALL_TYPES.SOSInstall) {\r\n if (!this.props.quote.installerId) {\r\n this.props.alertActions.showFailureAlert(\"An installer is required when install type SOS Install is selected\");\r\n return false;\r\n }\r\n }\r\n\r\n if (!this.props.quote.shipToTypeId || this.props.quote.shipToTypeId === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select a ship to\");\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n validateLineStage() {\r\n if (this.props.quote.lines.length === 0) {\r\n this.props.alertActions.showFailureAlert(\"At least one line must be added to the quote to continue\");\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n validateCustomerStage() {\r\n const contact = this.props.quote.contact[0];\r\n \r\n if (!contact.firstName || !contact.lastName ) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a first and last name.\");\r\n return false;\r\n }\r\n else if (this.shipToCustomer(this.props.quote.shipToTypeId) === true && !contact.phone) {\r\n this.props.alertActions.showFailureAlert(\"Phone number is required when ship to customer is selected.\");\r\n return false;\r\n }\r\n else\r\n return true\r\n }\r\n\r\n createSystemCommunication(message) {\r\n this.props.quoteOrderCommonActions.createCommunication(this.props.quote.id, this.props.session.username, message, constants.QUOTE_COMMUNICATION_TYPES.system, null);\r\n }\r\n\r\n // runQuoteSubmitWorkflows() {\r\n // let stopWorkflows = false;\r\n\r\n // if (this.props.workflows.onQuoteSubmit && this.props.workflows.onQuoteSubmit.length > 0) { \r\n // this.props.workflows.onQuoteSubmit.forEach(workflow => {\r\n\r\n // if (stopWorkflows === true) return;\r\n\r\n // switch(workflow.actionTypeId) {\r\n\r\n // case constants.WORKFLOW_ACTION_TYPES.validateRequiredAttachments:\r\n // if (this.props.quote.attachments.length < workflow.actionMinAttachments) {\r\n // this.createSystemCommunication(`The required number of attachments is ${workflow.actionMinAttachments}. The quote was not submmitted and the status will be set to pending`);\r\n // this.props.alertActions.showFailureAlert(`The required number of attachments is ${workflow.actionMinAttachments}. Please fax drawing.`);\r\n // if (workflow.actionBreakWorkflowOnFail === true) {\r\n // stopWorkflows = true;\r\n // } \r\n // } else {\r\n // if (workflow.actionBreakWorkflowOnTrue === true) {\r\n // stopWorkflows = true;\r\n // } \r\n // }\r\n \r\n // break; \r\n\r\n // case constants.WORKFLOW_ACTION_TYPES.updateStatus:\r\n // this.updateQuoteStatus(workflow.actionNewStatus);\r\n\r\n // break;\r\n \r\n // default:\r\n // console.log('no matching workflow id');\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n updateQuoteStatus(statusTypeId) { \r\n this.setState({ status: statusTypeId });\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.Status, statusTypeId); \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.IsLocked, (statusTypeId === constants.STATUS_TYPES.Sent || constants.STATUS_TYPES.ConvertedToOrder)); \r\n }\r\n \r\n onConfigureClick() {\r\n let products = this.props.admin.productList;\r\n\r\n if (products) {\r\n let selectedProduct = products.filter(p => p.ID == this.state.selectedProduct)[0];\r\n \r\n if (selectedProduct.isNonConfigurable === true) {\r\n this.props.quoteOrderCommonActions.createLine(this.props.quote.id, this.props.session.username, selectedProduct.defaultPrice, selectedProduct.ImageUrl, \"\", \"\", this.state.selectedProduct, null);\r\n return;\r\n }\r\n }\r\n\r\n this.props.apiActions.setActiveProduct(this.props.session.username, this.state.selectedProduct, this.props.session.company).then(() => {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Quote); \r\n this.props.history.push({ pathname: '/Configurator' }); \r\n });\r\n \r\n }\r\n\r\n onProductChange(event) {\r\n this.setState({ selectedProduct: event.target.value, disableAddLine: event.target.value === '' ? true : false });\r\n }\r\n\r\n onQuantityChange(event, id) { \r\n if (event.nativeEvent.explicitOriginalTarget &&\r\n event.nativeEvent.explicitOriginalTarget == event.nativeEvent.originalTarget) {\r\n return;\r\n }\r\n\r\n this.props.quoteOrderCommonActions.updateLineQuantity(id, event.target.value, this.props.quote.id, null);\r\n }\r\n\r\n onAddressFieldUpdate(event, addressType) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.updateAddress(event.target.id, event.target.value, addressType);\r\n } \r\n\r\n onContactFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.updateContact(event.target.id, event.target.value);\r\n }\r\n\r\n onHeaderFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value || event.target.value === constants.PLACEHOLDER) return;\r\n \r\n this.updateHeader(event.target.id, event.target.value);\r\n\r\n if (event.target.id === constants.ORDER_SQL_COLUMNS.InstallType) {\r\n if (event.target.value === constants.INSTALL_TYPES.SOS) {\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.VendorNumber, constants.VENDOR_NUMBERS.SOS); \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, null); \r\n } else {\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.VendorNumber, constants.VENDOR_NUMBERS.SOS_INSTALL);\r\n\r\n this.getDefaultInstaller(this.props.quote.companyLocationId);\r\n }\r\n } \r\n\r\n // if (event.target.id === constants.ORDER_SQL_COLUMNS.InstallType && this.props.quote.installerId) {\r\n // this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, null); \r\n // }\r\n }\r\n\r\n onFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.updateField(event.target.id, event.target.value);\r\n }\r\n\r\n onCompanyChange(event) {\r\n if (event.target.value === constants.PLACEHOLDER) return; \r\n event.persist();\r\n const companyId = event.target.value;\r\n this.props.quoteOrderCommonActions.updateHeaderField(this.props.quote.id, event.target.id, parseInt(event.target.value), constants.TABLES.Quote).then(() => {\r\n let companyName = this.props.admin.companyList.filter(c => c.id == companyId)[0].company;\r\n this.getCompanyLocations(companyName);\r\n }); \r\n }\r\n\r\n getCompanyLocations(companyName) { \r\n this.props.adminActions.getCompanyLocations(companyName).then(() => {\r\n if (this.props.session.roleName === constants.ROLE.User) {\r\n const userLocation = this.props.session.userCompanyLocationIdCSV.split(',');\r\n let defaultLocation = this.props.admin.companyLocations.filter(l => l.id = userLocation[0]);\r\n\r\n this.setState({ companyLocationId: defaultLocation });\r\n }\r\n });\r\n }\r\n\r\n getCurrentLocation(locationId) {\r\n let location = this.props.admin.companyLocations.filter(l => l.id == locationId);\r\n\r\n if (location && location.length > 0)\r\n return location[0]; \r\n }\r\n\r\n onLocationChange(event) {\r\n this.setState({ companyLocationId: event.target.value });\r\n \r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes; \r\n let allowedShipToTypes;\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == event.target.value);\r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n\r\n this.setState({ allowedShipToTypes: allowedShipToTypes });\r\n \r\n event.persist();\r\n \r\n if (event.target.value !== constants.PLACEHOLDER) {\r\n this.updateHeader(event.target.id, event.target.value);\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, null);\r\n this.updateHeader(\"createdByEmail\", \"\");\r\n this.updateHeader(\"createdByUserId\", -1);\r\n \r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(event.target.value);\r\n this.props.adminActions.getCompanyLocationAddresses(event.target.value);\r\n this.props.quoteOrderCommonActions.getCompanyLocationFabricator(event.target.value);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(event.target.value);\r\n \r\n //this.getDefaultInstaller(event.target.value); \r\n this.props.quoteOrderCommonActions.getCompanyLocationInstallers(event.target.value).then(() => { \r\n if (this.props.session.roleName === constants.ROLE.User && this.props.quoteOrderCommon.companyLocationInstallers) {\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, this.props.quoteOrderCommon.companyLocationInstallers[0].id);\r\n } \r\n }); \r\n }\r\n }\r\n\r\n onInputFocus(event) {\r\n this.setState({onFocusValue: event.target.value});\r\n }\r\n\r\n async onReconfigure(configurationId, headerId, id, productId) { \r\n\r\n let products = this.props.admin.productList;\r\n\r\n if (products) {\r\n let selectedProduct = products.filter(p => p.ID == productId)[0];\r\n\r\n if (selectedProduct.isNonConfigurable === true) {\r\n this.props.alertActions.showFailureAlert(\"Cannot reconfigure non configurable part\");\r\n return;\r\n }\r\n }\r\n\r\n await this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Quote);\r\n\r\n this.props.history.push({\r\n pathname: '/Configurator',\r\n configurationId: configurationId,\r\n headerId: headerId,\r\n LineId: id,\r\n productId: productId\r\n }); \r\n }\r\n\r\n getDefaultInstaller(locationId) {\r\n this.props.quoteOrderCommonActions.getCompanyLocationInstallers(locationId).then(() => { \r\n if (this.props.session.roleName === constants.ROLE.User && !this.props.quote.installerId \r\n && this.props.quoteOrderCommon.companyLocationInstallers && this.props.quoteOrderCommon.companyLocationInstallers.length > 0) { \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, this.props.quoteOrderCommon.companyLocationInstallers[0].id); \r\n } \r\n });\r\n }\r\n\r\n onCommunicationPageChange(currentPage) {\r\n let communicationOffset = parseInt((currentPage * this.state.communicationRowsToFetch) - this.state.communicationRowsToFetch);\r\n this.setState({ communicationOffset: communicationOffset, currentCommunicationPage: currentPage }, () => this.getCommunications()); \r\n }\r\n\r\n onLineDelete(LineId) { \r\n this.props.quoteOrderCommonActions.deleteLine(LineId, this.props.quote.id, null);\r\n } \r\n \r\n onClickDownloadFile(path, originalName, mimetype, filename) {\r\n if (path && originalName && mimetype && filename)\r\n this.props.quoteOrderCommonActions.downloadFile(path, originalName, mimetype, filename); \r\n } \r\n\r\n updateAddress(column, value, addressType) {\r\n this.props.quoteOrderCommonActions.updateAddressField(this.props.quote.id, addressType, column, value, constants.TABLES.Address, constants.TABLES.Quote, this.props.quote.id, null);\r\n }\r\n \r\n updateContact(column, value) {\r\n this.props.quoteOrderCommonActions.updateContactField(this.props.quote.id, column, value, constants.TABLES.Contact, constants.TABLES.Quote);\r\n }\r\n\r\n updateHeader(column, value) { \r\n this.props.quoteOrderCommonActions.updateHeaderField(this.props.quote.id, column, value, constants.TABLES.Quote);\r\n\r\n if (column === constants.ORDER_SQL_COLUMNS.createdByEmail) {\r\n this.props.quoteOrderCommonActions.createCompanyLocationDesigner(value, this.props.quote.companyLocationId);\r\n } \r\n }\r\n\r\n updateField(column, value) { \r\n this.props.quoteOrderCommonActions.updateField(this.props.quote.id, column, value, constants.TABLES.Quote);\r\n }\r\n\r\n generateReport(costOrPrice, quoteOrOrder, id) {\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, costOrPrice, quoteOrOrder, id);\r\n }\r\n \r\n render() {\r\n\r\n if (this.state.loading === true || !this.props.quoteOrderCommon.userCompanyLocations) return ( );\r\n \r\n let submitDisabled = false; \r\n let previousDisabled = false;\r\n let shippingAddress = [];\r\n let contact = null;\r\n \r\n // let preventSubmitStatuses = [constants.STATUS_TYPES.Sent, constants.STATUS_TYPES.Draft];\r\n \r\n // submitDisabled = this.props.quote.statusTypeId && preventSubmitStatuses.includes(this.props.quote.statusTypeId) && this.state.submitButtonLabel === 'Submit';\r\n if (this.state.stage > this.state.requiredStages) {\r\n if (this.props.session.roleName === constants.ROLE.User) {\r\n switch (this.state.status) {\r\n case constants.STATUS_TYPES.Sent: \r\n submitDisabled = true;\r\n break;\r\n case constants.STATUS_TYPES.CancellationRequested:\r\n submitDisabled = true;\r\n break;\r\n case constants.STATUS_TYPES.ConvertedToOrder:\r\n submitDisabled = true;\r\n break;\r\n\r\n case constants.STATUS_TYPES.Shipped:\r\n submitDisabled = true;\r\n break;\r\n\r\n default:\r\n submitDisabled = false;\r\n break;\r\n }\r\n }\r\n else {\r\n switch (this.state.status) { \r\n case constants.STATUS_TYPES.ConvertedToOrder:\r\n submitDisabled = true;\r\n break;\r\n\r\n case constants.STATUS_TYPES.Shipped:\r\n submitDisabled = true;\r\n break;\r\n\r\n default:\r\n submitDisabled = false;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n if (this.state.stage === 1) previousDisabled = true;\r\n \r\n\r\n if (this.props.quote.shippingAddress)\r\n shippingAddress = this.props.quote.shippingAddress[0];\r\n\r\n if (this.props.quote.contact)\r\n contact = this.props.quote.contact;\r\n \r\n //let companyLocation = [];\r\n let companyLocationName = '';\r\n let companyLocationFax = '';\r\n\r\n // if (this.props.admin.companyLocations) {\r\n // companyLocation = this.props.admin.companyLocations.filter(c => c.id == this.props.quote.companyLocationId);\r\n // companyLocationName= companyLocation[0].name;\r\n // companyLocationFax = companyLocation[0].faxNumber;\r\n // }\r\n \r\n // const locationList = this.props.admin.companyLocations; \r\n // if (this.props.admin.companyLocations && companyLocationId) { \r\n // companyLocationName = locationList.filter(l => l.id == this.state.companyLocationId)[0].companyLocationName;\r\n // companyLocationFax = locationList.filter(l => l.id == this.state.companyLocationId)[0].faxNumber;\r\n // }\r\n\r\n // if (!companyLocationId && this.props.quoteOrderCommon.userCompanyLocations.length === 1) {\r\n // companyLocationId = this.props.quoteOrderCommon.userCompanyLocations[0].id; \r\n // }\r\n\r\n // let location = this.props.quoteOrderCommon.userCompanyLocations.filter(l => l.id = this.props.quote.companyLocationId);\r\n\r\n // let allowHomeDelivery = location[0].allowHomeDelivery;\r\n \r\n let attachments = this.props.quote.attachments;\r\n\r\n let communicationPageCount = 1;\r\n \r\n if (this.props.quote && this.props.quote.communicationHistory) {\r\n communicationPageCount = this.props.quote.communicationHistory.length > 0 ? (this.props.quote.communicationHistory[0].totalRows / this.state.communicationRowsToFetch) : 1;\r\n communicationPageCount = Math.ceil(communicationPageCount);\r\n } \r\n let statusOptions = this.props.quoteOrderCommon.statusTypes.filter(status => status.roleLevel >= this.props.session.roleLevel && status.allowOnQuote === true); \r\n\r\n let headerDetailLocations = [];\r\n // if (this.props.session.roleName === constants.ROLE.Fabricator && this.props.admin.companyLocations) {\r\n // let userLocations = this.props.session.userCompanyLocationIdCSV.split(',');\r\n // headerDetailLocations = this.props.admin.companyLocations.filter(loc => userLocations.includes(loc.id.toString()));\r\n if (this.props.session.roleName === constants.ROLE.Fabricator && this.props.admin.companyLocations) {\r\n let userLocations = this.props.session.userCompanyLocationIdCSV.split(',');\r\n headerDetailLocations = this.props.quoteOrderCommon.userCompanyLocations.filter(loc => userLocations.includes(loc.id.toString()));\r\n } else if (this.props.session.roleName === constants.ROLE.User && this.props.quoteOrderCommon.userCompanyLocations) {\r\n headerDetailLocations = this.props.quoteOrderCommon.userCompanyLocations;\r\n } else if ((this.props.session.roleName === constants.ROLE.CompanyAdmin || this.props.session.roleName === constants.ROLE.SystemAdmin) && this.props.admin.companyLocations) {\r\n headerDetailLocations = this.props.admin.companyLocations;\r\n }\r\n\r\n let headerRowWidth = 8;\r\n\r\n if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Draft)\r\n headerRowWidth = headerRowWidth - 1;\r\n\r\n let showAddressStage = (this.props.quote.shipToTypeId !== constants.SHIP_TO_TYPES.Customer ? false : true);\r\n let orderLabel = this.props.quote.statusTypeId === constants.STATUS_TYPES.ConvertedToOrder ? ' - Order #: ' + this.props.quote.orderConvertedTo : '';\r\n let shipToCustomer = this.props.quote.shipToTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n\r\n let showDraftButton = false;\r\n\r\n if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed || this.props.quote.statusTypeId === constants.STATUS_TYPES.Pending || this.props.quote.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval || this.props.quote.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n if (this.props.session.roleName === constants.ROLE.Fabricator || this.props.session.roleName === constants.ROLE.SystemAdmin)\r\n showDraftButton = true;\r\n } \r\n \r\n let showPendingButton = false;\r\n\r\n if (this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed || this.props.quote.statusTypeId === constants.STATUS_TYPES.Pending || this.props.quote.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval || this.props.quote.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n if (this.props.session.roleName === constants.ROLE.Fabricator || this.props.session.roleName === constants.ROLE.SystemAdmin)\r\n showPendingButton = true;\r\n } \r\n \r\n return (\r\n \r\n \r\n \r\n {/* \r\n Quote #: {this.props.quote.id} - {this.props.quote.statusName} {orderLabel}
\r\n */}\r\n \r\n \r\n \r\n\r\n {this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed \r\n ? \r\n \r\n this.state.requiredStages ? true : false } /> \r\n \r\n \r\n \r\n \r\n : \r\n this.state.requiredStages ? true : false }\r\n isLocked={this.state.isLocked}\r\n submitLabel={this.getSubmitButtonLabel(this.state.stage) }\r\n checkmarkLabel={this.state.checkmarkLabel} />\r\n } \r\n\r\n {this.state.stage === constants.QUOTE_STAGES.Details && \r\n \r\n \r\n\r\n \r\n \r\n }\r\n \r\n {this.state.stage === constants.QUOTE_STAGES.Line && \r\n \r\n } \r\n\r\n {this.state.stage === constants.QUOTE_STAGES.Details && \r\n \r\n }\r\n \r\n {(this.state.stage === constants.QUOTE_STAGES.Attachments || this.state.stage === constants.QUOTE_STAGES.AdditionalAttachments) && \r\n \r\n \r\n \r\n \r\n } \r\n\r\n {showAddressStage === true && \r\n this.state.stage === constants.QUOTE_STAGES.Address && \r\n \r\n } \r\n\r\n {this.state.stage === constants.QUOTE_STAGES.PoNumber && \r\n \r\n }\r\n\r\n {/* {(this.props.quote.statusTypeId === constants.STATUS_TYPES.Confirmed || this.state.stage !== constants.QUOTE_STAGES.Submit) &&\r\n \r\n } */}\r\n\r\n {(this.state.stage === constants.QUOTE_STAGES.Submit \r\n || (shipToCustomer === false && this.state.stage > this.state.shipToStoreTotalRequiredStages) \r\n || (shipToCustomer === true && this.state.stage > this.state.shipToCustomerTotalRequiredStages)) &&\r\n \r\n }\r\n\r\n {\r\n (this.state.stage === constants.QUOTE_STAGES.ConvertToOrder && this.props.session.roleName === constants.ROLE.SystemAdmin) ?\r\n \r\n :\r\n \r\n }\r\n \r\n \r\n {/* */}\r\n\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n quote: state.quote, \r\n alert: state.alert,\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n admin: state.admin \r\n };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch), \r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch), \r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Quote));","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col, Label } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-bottom: 1em;\r\n`;\r\nexport const LabelStyled = styled(Label)`\r\n color: red;\r\n`;\r\n\r\nexport const AcceptColStyled = styled(Col)`\r\n margin-right: 50px !important;\r\n`;\r\n\r\nexport const RejectButtonStyled = styled(Button)`\r\n&.order-cancel-reject-btn {\r\n width: 150px !important;\r\n background-color: #e2231a !important;\r\n border: none !important;\r\n}\r\n`;\r\n\r\nexport const AcceptButtonStyled = styled(Button)`\r\n&.order-cancel-accept-btn {\r\n width: 150px !important;\r\n background-color: #28a745 !important;\r\n opacity: 0.8 !important;\r\n border: none !important;\r\n margin-right: 50px !important;\r\n}\r\n`;\r\n\r\nclass OrderManageCancelRequest extends React.Component { \r\n constructor(props) {\r\n super(props); \r\n \r\n this.rejectMessageChanged = this.rejectMessageChanged.bind(this); \r\n this.onOrderCancelReject = this.onOrderCancelReject.bind(this);\r\n \r\n this.state = {\r\n rejectMessage: '',\r\n showEnterCommentWarning: false\r\n } \r\n }\r\n\r\n rejectMessageChanged(event) { \r\n this.setState({ rejectMessage: event.target.value });\r\n if (event.target.value) \r\n this.setState({ showEnterCommentWarning: false });\r\n }\r\n\r\n onOrderCancelReject(comment) {\r\n if (!this.state.showEnterCommentWarning && comment) {\r\n this.props.onOrderCancelReject(comment); \r\n } else {\r\n this.setState({ showEnterCommentWarning: true });\r\n }\r\n }\r\n\r\n render() {\r\n return ( \r\n \r\n \r\n \r\n this.props.onOrderCancelAccept(e)} />\r\n \r\n \r\n this.onOrderCancelReject(this.state.rejectMessage)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default OrderManageCancelRequest;\r\n\r\nOrderManageCancelRequest.propTypes = {\r\n onOrderCancelAccept: PropTypes.func.isRequired,\r\n onOrderCancelReject: PropTypes.func.isRequired\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport styled from 'styled-components';\r\nimport { Container, Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport CheckBoxPrimitive from '../Common/Primitives/CheckBoxPrimitive';\r\nimport DatePicker from \"react-datepicker\";\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nexport const DatePickerLabel = styled.label`\r\n margin-right: 15px;\r\n`;\r\n\r\nexport const LabelWarning = styled(Label)`\r\n color: red;\r\n`;\r\n\r\nconst AcceptOrder = props => {\r\n return ( \r\n \r\n \r\n \r\n \r\n \r\n props.onOrderAccepted(e.target.checked)} /> \r\n \r\n \r\n \r\n \r\n { \r\n props.accepted ? \r\n \r\n Estimated Ship Date\r\n \r\n \r\n : '' \r\n }\r\n \r\n \r\n \r\n \r\n { \r\n props.accepted ? \r\n \r\n Actual Ship Date\r\n \r\n \r\n : '' \r\n }\r\n \r\n \r\n
\r\n {props.showRejectOption === true && \r\n \r\n \r\n \r\n \r\n props.onOrderRejected(e.target.checked)} /> \r\n \r\n \r\n {props.rejected === true && \r\n
\r\n }\r\n\r\n \r\n );\r\n}\r\n\r\nAcceptOrder.propTypes = {\r\n onEstimatedShipDateSet: PropTypes.func.isRequired,\r\n estimatedShipDate: PropTypes.instanceOf(Date).isRequired,\r\n accepted: PropTypes.bool.isRequired,\r\n rejected: PropTypes.bool.isRequired,\r\n showRejectOption: PropTypes.bool.isRequired,\r\n onOrderAccepted: PropTypes.func.isRequired,\r\n onOrderRejected: PropTypes.func.isRequired,\r\n onRejectMessageChanged: PropTypes.func.isRequired,\r\n actualShipDate: PropTypes.instanceOf(Date).isRequired,\r\n onActualShipDateChanged: PropTypes.func.isRequired,\r\n acceptOrderReadonly: PropTypes.bool.isRequired\r\n};\r\n\r\nexport default AcceptOrder;\r\n","import React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport guid from '../../modules/guid';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\n//import * as workflowActions from '../../actions/workflowActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport * as constants from '../../modules/constants';\r\nimport Lines from '../QuoteOrderCommon/Line';\r\nimport styled from 'styled-components';\r\nimport AddressForm from '../QuoteOrderCommon/AddressForm';\r\nimport ContactInfo from '../QuoteOrderCommon/ContactInfo';\r\nimport PoNumber from '../QuoteOrderCommon/PoNumber';\r\nimport Attachments from '../QuoteOrderCommon/Attachments';\r\nimport AttachmentList from '../QuoteOrderCommon/AttachmentList';\r\nimport OrderManageCancelRequest from './OrderManageCancelRequest';\r\nimport Stages from '../QuoteOrderCommon/Stages';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport CommunicationList from '../QuoteOrderCommon/CommunicationList';\r\nimport HeaderDetails from '../QuoteOrderCommon/HeaderDetails';\r\nimport LineActions from '../QuoteOrderCommon/LineActions';\r\nimport AcceptOrder from '../Order/AcceptOrder';\r\nimport Summary from '../QuoteOrderCommon/Summary';\r\nimport * as QuoteOrderCommon from '../../modules/quoteOrderCommon';\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\nimport 'react-confirm-alert/src/react-confirm-alert.css'; // Import css\r\nimport Loading from '../Common/Loading/Loading';\r\nimport AddDesigners from '../QuoteOrderCommon/AddDesigners';\r\n\r\nexport const ContainerStyled = styled(Container)` \r\n @media(min-width:1200px) {\r\n min-height:440px;\r\n }\r\n`;\r\n\r\nexport const DatePickerLabel = styled.label`\r\n margin-right: 15px;\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n margin-top: 0px !important;\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n background-color: #EEEEEE;\r\n height: 70px;\r\n\r\n @media(max-width:1200px) {\r\n height: 120px;\r\n }\r\n`;\r\nclass Order extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar();\r\n\r\n this.onConfigureClick = this.onConfigureClick.bind(this);\r\n this.onProductChange = this.onProductChange.bind(this);\r\n this.onQuantityChange = this.onQuantityChange.bind(this);\r\n this.onReconfigure = this.onReconfigure.bind(this);\r\n this.onLineDelete = this.onLineDelete.bind(this);\r\n this.onAddressFieldUpdate = this.onAddressFieldUpdate.bind(this);\r\n this.onContactFieldUpdate = this.onContactFieldUpdate.bind(this);\r\n this.onInputFocus = this.onInputFocus.bind(this);\r\n this.onFieldUpdate = this.onFieldUpdate.bind(this);\r\n this.submitOrder = this.submitOrder.bind(this);\r\n this.onOrderCancel = this.onOrderCancel.bind(this);\r\n this.onOrderCancelAccept = this.onOrderCancelAccept.bind(this);\r\n this.onOrderCancelReject = this.onOrderCancelReject.bind(this);\r\n this.sendEmail = this.sendEmail.bind(this);\r\n this.onPrint = this.onPrint.bind(this);\r\n this.onCopy = this.onCopy.bind(this);\r\n this.onAddCommunicationClick = this.onAddCommunicationClick.bind(this);\r\n this.onCopyLine = this.onCopyLine.bind(this);\r\n this.onClickDownloadFile = this.onClickDownloadFile.bind(this);\r\n this.statusChange = this.statusChange.bind(this);\r\n this.onHeaderFieldUpdate = this.onHeaderFieldUpdate.bind(this);\r\n this.onEstimatedShipDateSet = this.onEstimatedShipDateSet.bind(this);\r\n this.onOrderAccepted = this.onOrderAccepted.bind(this);\r\n this.onOrderRejected = this.onOrderRejected.bind(this);\r\n this.onRejectMessageChanged = this.onRejectMessageChanged.bind(this);\r\n this.onCreatedByChanged = this.onCreatedByChanged.bind(this);\r\n this.onLocationChange = this.onLocationChange.bind(this);\r\n this.onCommunicationCollapseClicked = this.onCommunicationCollapseClicked.bind(this);\r\n this.onShipToStoreChanged = this.onShipToStoreChanged.bind(this);\r\n this.onStageChange = this.onStageChange.bind(this);\r\n this.onCommunicationPageChange = this.onCommunicationPageChange.bind(this);\r\n this.onActualShipDateChanged = this.onActualShipDateChanged.bind(this);\r\n this.previousStage = this.previousStage.bind(this);\r\n this.onCompanyChange = this.onCompanyChange.bind(this);\r\n this.onDeleteAttachment = this.onDeleteAttachment.bind(this);\r\n this.orderInvoiced = this.orderInvoiced.bind(this);\r\n this.shipToCustomer = this.shipToCustomer.bind(this);\r\n this.saveAsDraft = this.saveAsDraft.bind(this);\r\n this.onfaxTemplateOpen = this.onfaxTemplateOpen.bind(this);\r\n this.generateReport = this.generateReport.bind(this);\r\n this.onAddCountertopClick = this.onAddCountertopClick.bind(this);\r\n this.onSetToPendingInformationClick = this.onSetToPendingInformationClick.bind(this);\r\n this.onSetToDraftClick = this.onSetToDraftClick.bind(this);\r\n this.poNumberChanged = this.poNumberChanged.bind(this);\r\n this.updateHeader = this.updateHeader.bind(this);\r\n //this.deleteAttachment = this.deleteAttachment.bind(this);\r\n\r\n this.state = {\r\n selectedProduct: '',\r\n disableAddLine: true,\r\n onFocusValue: '', \r\n updatedRequired: false,\r\n loading: true,\r\n status: '',\r\n accepted: false,\r\n rejected: false,\r\n showRejectOption: false, \r\n rejectMessage: '',\r\n estimatedShipDate: '',\r\n actualShipDate: '',\r\n createdByUserId: '',\r\n createdByEmail: '',\r\n companyLocationId: '', \r\n communicationCollapsed: false, \r\n allowHomeDelivery: false,\r\n stage: 1,\r\n submitButtonLabel: constants.STAGES_BUTTON_LABELS.Next,\r\n submitButtonColor: '#e2231a',\r\n checkmarkLabel: '',\r\n requiredStages: 4,\r\n shipToStoreTotalRequiredStages: 3,\r\n shipToCustomerTotalRequiredStages: 4,\r\n isLocked: false,\r\n communicationOffset: 0,\r\n communicationRowsToFetch: 5,\r\n currentCommunicationPage: 1,\r\n allowSOSInstall: false, \r\n allowedShipToTypes: null \r\n }; \r\n }\r\n\r\n componentDidMount() { \r\n if (this.props.order.id) { \r\n const promise1 = this.props.apiActions.getCompanyProducts(this.props.session.company); \r\n const promise2 = this.getOrderById(this.props.order.id);\r\n const promise3 = this.props.quoteOrderCommonActions.getUserCompanyLocations(this.props.session.userCompanyLocationIdCSV, this.props.session.username)\r\n const promise4 = this.props.adminActions.getAllCompanies(this.props.session.manufacturer, constants.GET_ALL_COMPANIES_PARAMS.excludeFabricators, constants.GET_ALL_COMPANIES_PARAMS.excludeInstallers);\r\n const promise5 = this.props.adminActions.getCompanyLocations(this.props.session.company);\r\n const promise6 = this.props.quoteOrderCommonActions.getShipToTypes(this.props.session.manufacturer, null, this.props.order.id);\r\n const promise7 = this.props.adminActions.getAllProducts();\r\n \r\n Promise.all([promise1, promise2, promise3, promise4, promise5, promise6, promise7]).then(() => { \r\n let shipToStoreTypeId = this.props.order.shipToTypeId;\r\n let allowHomeDelivery = false;\r\n let allowSOSInstall = false;\r\n let allowedShipToTypes;\r\n\r\n if (this.props.admin.companyLocations) {\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == this.props.order.companyLocationId);\r\n \r\n if (locations.length > 0) {\r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes; \r\n \r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n \r\n allowHomeDelivery = locations[0].allowHomeDelivery; \r\n allowSOSInstall = locations[0].allowSOSInstall ? locations[0].allowSOSInstall : false; \r\n }\r\n else {\r\n allowedShipToTypes = this.props.quoteOrderCommon.shipToTypes;\r\n }\r\n }\r\n\r\n let isLocked = QuoteOrderCommon.isLocked(this.props.session.roleName, this.props.order.statusTypeId); \r\n\r\n this.setState({ \r\n status: this.props.order.statusTypeId, \r\n createdByUserId: this.props.order.createdByUserId, \r\n createdByEmail: this.props.order.createdByEmail,\r\n companyLocationId: this.props.order.companyLocationId, \r\n allowHomeDelivery: allowHomeDelivery, \r\n isLocked: isLocked,\r\n estimatedShipDate: this.props.order.estimatedShipDate ? QuoteOrderCommon.convertToDate(this.props.order.estimatedShipDate) : null,\r\n actualShipDate: this.props.order.actualShipDate ? QuoteOrderCommon.convertToDate(this.props.order.actualShipDate) : null,\r\n accepted: this.props.order.estimatedShipDate ? true : false,\r\n allowSOSInstall: allowSOSInstall, \r\n allowedShipToTypes: allowedShipToTypes \r\n });\r\n \r\n let shipToCustomer = shipToStoreTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n this.setRequiredStages(shipToCustomer);\r\n \r\n if (!this.props.order.companyLocationId) {\r\n if (this.props.quoteOrderCommon.userCompanyLocations.length === 1) {\r\n this.props.quoteOrderCommonActions.updateField(this.props.order.id, constants.ORDER_SQL_COLUMNS.CompanyLocationId, this.props.quoteOrderCommon.userCompanyLocations[0].id, constants.TABLES.Order).then(() => { \r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n this.props.orderActions.updateCompanyLocation(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n this.props.quoteOrderCommonActions.getCompanyLocationFabricator(this.props.quoteOrderCommon.userCompanyLocations[0].id, true);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(this.props.quoteOrderCommon.userCompanyLocations[0].id);\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == this.props.order.companyLocationId);\r\n \r\n if (locations.length > 0) {\r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes;\r\n \r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n\r\n this.setState({allowedShipToTypes: allowedShipToTypes});\r\n\r\n }\r\n }); \r\n }\r\n } else {\r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(this.props.order.companyLocationId);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(this.props.order.companyLocationId);\r\n } \r\n \r\n if (this.props.order.companyLocationId) \r\n this.getDefaultInstaller(this.props.order.companyLocationId); \r\n \r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.InProgressAccepted)\r\n this.setState({ stage: constants.QUOTE_STAGES.Submit });\r\n\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.Pending)\r\n this.setState({ stage: constants.QUOTE_STAGES.Attachments });\r\n\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval)\r\n this.setState({ showRejectOption: true });\r\n\r\n this.setSubmitButtonText(this.state.stage);\r\n\r\n if (this.props.location.previousPage && this.props.location.previousPage === 'Configurator') {\r\n this.onStageChange(constants.QUOTE_STAGES.Line);\r\n }\r\n\r\n this.props.apiActions.clearConfigurator();\r\n if (!this.props.order.contact || this.props.order.contact.length === 0)\r\n this.props.quoteOrderCommonActions.getContact(null, this.props.order.id);\r\n\r\n if (!this.props.order.attachments || this.props.order.contact.length === 0)\r\n this.props.quoteOrderCommonActions.getAttachments(null, this.props.order.id, null);\r\n }); \r\n \r\n }\r\n else {\r\n this.props.history.push({\r\n pathname: '/Overview' \r\n }); \r\n } \r\n } \r\n\r\n setRequiredStages(shipToCustomer) {\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.Confirmed) {\r\n this.setState({ requiredStages: this.state.confirmedTotalRequiredStages });\r\n } else {\r\n this.setState({ requiredStages: shipToCustomer === false ? this.state.shipToStoreTotalRequiredStages : this.state.shipToCustomerTotalRequiredStages });\r\n } \r\n }\r\n\r\n shipToCustomer(shipToStoreTypeId) {\r\n return shipToStoreTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n }\r\n\r\n poNumberChanged(event) {\r\n this.updateHeader(event.target.id, event.target.value); \r\n \r\n this.props.orderActions.updatePoNumber(event.target.value);\r\n }\r\n\r\n orderInvoiced() { \r\n // this.updateField(constants.ORDER_SQL_COLUMNS.Invoiced, true); \r\n let isLocked = QuoteOrderCommon.isLocked(this.props.session.roleName, this.props.order.statusTypeId);\r\n \r\n this.props.history.push({\r\n pathname: '/Invoice',\r\n orderId: this.props.order.id, \r\n company: this.props.session.company,\r\n isLocked: isLocked \r\n }); \r\n }\r\n\r\n saveAsDraft() { \r\n this.props.history.push({\r\n pathname: '/Overview' \r\n }); \r\n }\r\n \r\n onDeleteAttachment(fileId) { \r\n confirmAlert({\r\n title: 'Confirm Delete',\r\n message: 'Are you sure to delete?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.quoteOrderCommonActions.deleteAttachment(fileId, null, this.props.order.id); \r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n }); \r\n }\r\n\r\n // onDeleteAttachment(fileId) {\r\n // this.props.quoteOrderCommonActions.deleteAttachment(fileId, null, this.props.order.id); \r\n // }\r\n\r\n previousStage() {\r\n if (this.state.stage === 1) return;\r\n\r\n this.onStageChange(this.state.stage - 1);\r\n }\r\n\r\n onStageChange(stage) { \r\n this.setState({ stage: stage }, this.setSubmitButtonText(stage));\r\n \r\n this.setRequiredStages(this.shipToCustomer(this.props.order.shipToTypeId));\r\n \r\n if (stage === constants.QUOTE_STAGES.Address) {\r\n if (!this.props.order.attachments || this.props.order.attachments.length === 0) {\r\n this.props.alertActions.showFailureAlert(\"Warning: if no drawing is uploaded one will need to be faxed in. See attachment section for the document to fax\");\r\n }\r\n }\r\n }\r\n \r\n onCommunicationCollapseClicked() {\r\n let collapsed = !this.state.communicationCollapsed;\r\n this.setState({ communicationCollapsed: collapsed });\r\n }\r\n\r\n onCreatedByChanged(event) {\r\n let value = event.target.value === constants.PLACEHOLDER ? null : event.target.value; \r\n this.setState({ createdByUserId: value });\r\n this.updateHeader(event.target.id, value); \r\n }\r\n\r\n statusChange(event) { \r\n if (event.target.value.toLowerCase() === constants.PLACEHOLDER) return;\r\n\r\n if (event.target.value) {\r\n let selectedStatus = this.props.quoteOrderCommon.statusTypes.filter(status => status.id.toString() === event.target.value); \r\n //this.runStatusChangeWorkflows(selectedStatus[0].name);\r\n this.updateOrderStatus(selectedStatus[0].id); \r\n this.onAddCommunicationClick(`Order status changed to ${selectedStatus[0].name}.`, false);\r\n //this.createSystemCommunication(`Order status changed to ${selectedStatus[0].name}.`);\r\n\r\n console.log(selectedStatus);\r\n \r\n if (selectedStatus[0].id !== constants.STATUS_TYPES.Draft)\r\n this.sendEmail(constants.EMAIL_TYPES.StatusChange, selectedStatus[0].name);\r\n\r\n if (selectedStatus[0].id === constants.STATUS_TYPES.QuoteVerificationRequested)\r\n this.runCommunicationUpdates(`Quote verification requested.`);\r\n }\r\n }\r\n\r\n // runStatusChangeWorkflows(status) {\r\n // if (this.props.workflows.onOrderStatusChange && this.props.workflows.onOrderStatusChange.length > 0 && this.props.quoteOrderCommon.userCompanyLocations.length > 0) {\r\n\r\n // this.props.workflows.onOrderStatusChange.forEach(workflow => {\r\n // switch(workflow.actionTypeId) {\r\n\r\n // case constants.WORKFLOW_ACTION_TYPES.sendEmail: \r\n // this.props.workflowActions.emailStatusUpdate(status, this.props.quoteOrderCommon.userCompanyLocations[0].orderSubmitEmailList, workflow.actionSubject, workflow.actionBody);\r\n // break; \r\n \r\n // default:\r\n // console.log('no matching workflow id');\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n // runOrderCancellationRequestWorkflowsrunOrderCancellationRequestWorkflows(order) {\r\n // if (this.props.workflows.onOrderCancellationRequest && this.props.workflows.onOrderCancellationRequest.length > 0) {\r\n \r\n // this.props.workflows.onOrderCancellationRequest.forEach(workflow => {\r\n // switch(workflow.actionTypeId) {\r\n\r\n // case constants.WORKFLOW_ACTION_TYPES.SendOrderCancelRequestEmail:\r\n // this.props.workflowActions.submitCancellationRequest(order, workflow.actionEmail, workflow.actionSubject, workflow.actionBody);\r\n // break; \r\n \r\n // case constants.WORKFLOW_ACTION_TYPES.UpdateStatusAfterOrderCancelRequest: \r\n // this.updateOrderStatus(workflow.actionNewStatus);\r\n // break;\r\n \r\n // default:\r\n // console.log('no matching workflow id');\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n runCommunicationUpdates(message) {\r\n let locations = this.props.quoteOrderCommon.userCompanyLocations.filter(l => l.id === this.props.order.companyLocationId);\r\n let sendToEmail = \"\";\r\n \r\n if (locations.length > 0) {\r\n sendToEmail = this.props.order.installType === constants.INSTALL_TYPES.SOS ? \r\n locations[0].orderSubmitAltEmailList :\r\n locations[0].orderSubmitEmailList; \r\n }\r\n\r\n if (!sendToEmail) \r\n alertActions.showFailureAlert(\"Order updated but failed to email. No send-to email configured for the location\");\r\n else\r\n this.props.quoteOrderCommonActions.emailQuoteOrder(null, this.props.order.lines, this.props.order.billingAddress, this.props.order.shippingAddress, this.props.order.contact, this.props.order.shipToStore, this.props.order.installType, locations[0].fabricatorName, locations[0].installerName, this.props.order.contact, this.props.order.name, sendToEmail, this.props.order.id); \r\n \r\n this.onAddCommunicationClick(message, false);\r\n //this.createSystemCommunication(message);\r\n }\r\n\r\n onOrderCancel() {\r\n //this.runOrderCancellationRequestWorkflows(this.props.order);\r\n this.updateOrderStatus(constants.STATUS_TYPES.CancellationRequested);\r\n\r\n this.runCommunicationUpdates('A request to cancel the order has been submitted.');\r\n\r\n this.props.alertActions.showSuccessAlert(`A cancellation request has been sent for Order #${this.props.order.id}.`);\r\n this.props.history.push({ pathname: '/OrderList' }); \r\n }\r\n\r\n runOrderCancellationAcceptWorkflows(order) {\r\n if (this.props.workflows.onOrderCancellationAccept && this.props.workflows.onOrderCancellationAccept.length > 0) {\r\n \r\n this.props.workflows.onOrderCancellationAccept.forEach(workflow => {\r\n switch(workflow.actionTypeId) {\r\n\r\n case constants.WORKFLOW_ACTION_TYPES.SendOrderCancelAcceptEmail:\r\n this.props.workflowActions.orderCancellationAccept(order, workflow.actionEmail, workflow.actionSubject, workflow.actionBody);\r\n break; \r\n \r\n case constants.WORKFLOW_ACTION_TYPES.UpdateStatusAfterOrderCancelAccept: \r\n this.updateOrderStatus(workflow.actionNewStatus);\r\n break;\r\n \r\n default:\r\n console.log('no matching workflow id');\r\n }\r\n });\r\n }\r\n }\r\n\r\n onOrderCancelAccept() {\r\n //this.runOrderCancellationAcceptWorkflows(this.props.order);\r\n this.updateOrderStatus(constants.STATUS_TYPES.Cancelled);\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.IsLocked, false);\r\n\r\n this.runCommunicationUpdates(`The cancellation request has been accepted.`);\r\n\r\n this.props.alertActions.showSuccessAlert(`The cancellation request for Order #${this.props.order.id} has been accepted.`);\r\n this.props.history.push({ pathname: '/OrderList' }); \r\n }\r\n\r\n runOrderCancellationRejectWorkflows(order) {\r\n if (this.props.workflows.onOrderCancellationReject && this.props.workflows.onOrderCancellationReject.length > 0) {\r\n \r\n this.props.workflows.onOrderCancellationReject.forEach(workflow => {\r\n switch(workflow.actionTypeId) {\r\n\r\n case constants.WORKFLOW_ACTION_TYPES.SendOrderCancelRejectEmail:\r\n this.props.workflowActions.orderCancellationReject(order, workflow.actionEmail, workflow.actionSubject, workflow.actionBody);\r\n break; \r\n \r\n case constants.WORKFLOW_ACTION_TYPES.UpdateStatusAfterOrderCancelReject: \r\n this.updateOrderStatus(workflow.actionNewStatus);\r\n break;\r\n \r\n default:\r\n console.log('no matching workflow id');\r\n }\r\n });\r\n }\r\n } \r\n\r\n onOrderCancelReject(comment) {\r\n //this.runOrderCancellationRejectWorkflows(this.props.order);\r\n this.updateOrderStatus(constants.STATUS_TYPES.CancellationRejected);\r\n\r\n this.runCommunicationUpdates(`Cancellation rejected: ${comment}`);\r\n \r\n this.props.alertActions.showSuccessAlert(`The cancellation request for Order #${this.props.order.id} has been rejected.`);\r\n this.props.history.push({ pathname: '/OrderList' }); \r\n }\r\n\r\n sendEmail(emailType, newStatus, comment) {\r\n let locations = this.props.admin.companyLocations.filter(l => l.id === this.props.order.companyLocationId);\r\n let sendToEmail = \"\";\r\n \r\n if (locations.length > 0) {\r\n sendToEmail = this.props.order.installType === constants.INSTALL_TYPES.SOS ? \r\n locations[0].orderSubmitEmailList :\r\n locations[0].orderSubmitAltEmailList; \r\n }\r\n\r\n if (!sendToEmail) {\r\n alertActions.showFailureAlert(\"Email failed to send. No email configured for this location\");\r\n return;\r\n } else {\r\n let designerEmail = this.getDesignerEmail();\r\n \r\n sendToEmail = sendToEmail + ', ' + designerEmail;\r\n\r\n console.log(sendToEmail);\r\n if (emailType === constants.EMAIL_TYPES.QuoteOrder)\r\n this.props.quoteOrderCommonActions.emailQuoteOrder(this.getEmailDTO(locations, sendToEmail, newStatus)); \r\n else if (emailType === constants.EMAIL_TYPES.StatusChange)\r\n this.props.quoteOrderCommonActions.emailStatusChange(this.getEmailDTO(locations, sendToEmail, newStatus));\r\n else if (emailType === constants.EMAIL_TYPES.QuoteCancel) \r\n this.props.quoteOrderCommonActions.emailQuoteCancelled(this.props.quote.id, sendToEmail, newStatus, this.props.order.fabricatorPhone); \r\n else if (emailType === constants.EMAIL_TYPES.UserCommunication)\r\n this.props.quoteOrderCommonActions.emailUserCommunication(this.getEmailDTO(locations, sendToEmail, newStatus)); \r\n else if (emailType === constants.EMAIL_TYPES.PendingInformation)\r\n this.props.quoteOrderCommonActions.emailPendingInformation(this.getEmailDTO(locations, sendToEmail, newStatus, comment)); \r\n }\r\n }\r\n\r\n // sendEmail(emailType, newStatus) {\r\n // let sendToEmail = this.props.order.installType === constants.INSTALL_TYPES.SOS ? \r\n // this.props.quoteOrderCommon.userCompanyLocations[0].orderSubmitEmailList :\r\n // this.props.quoteOrderCommon.userCompanyLocations[0].orderSubmitAltEmailList;\r\n\r\n // if (!sendToEmail) {\r\n // alertActions.showFailureAlert(\"Email failed to send. No email configured for this location\");\r\n // return;\r\n // }\r\n\r\n // let locations = this.props.admin.companyLocations.filter(l => l.id === this.props.order.companyLocationId);\r\n\r\n // let designerEmail = this.getDesignerEmail();\r\n \r\n // // if (this.props.quoteOrderCommon.companyLocationUsers && this.props.quoteOrderCommon.companyLocationUsers.length > 0) {\r\n // // designerEmail = this.props.quoteOrderCommon.companyLocationUsers.filter(u => u.id === this.props.order.createdByUserId)[0].username;\r\n // // }\r\n\r\n // sendToEmail = sendToEmail + ', ' + designerEmail;\r\n\r\n // if (emailType === constants.EMAIL_TYPES.QuoteOrder)\r\n // this.props.quoteOrderCommonActions.emailQuoteOrder(this.getEmailDTO(locations, sendToEmail, newStatus)); \r\n // else if (emailType === constants.EMAIL_TYPES.StatusChange)\r\n // this.props.quoteOrderCommonActions.emailStatusChange(this.getEmailDTO(locations, sendToEmail, newStatus));\r\n // else if (emailType === constants.EMAIL_TYPES.UserCommunication)\r\n // this.props.quoteOrderCommonActions.emailUserCommunication(this.getEmailDTO(locations, sendToEmail, newStatus));\r\n // }\r\n \r\n onfaxTemplateOpen() {\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderFax, \"C\", \"O\", this.props.order.id);\r\n }\r\n\r\n getEmailDTO(locations, sendToEmail, newStatus, comment){ \r\n let locationName = 'n/a';\r\n let fabricatorPhone = this.props.order.fabricatorPhone;\r\n\r\n if (this.props.order.companyLocationId)\r\n if (this.props.admin.companyLocations && this.props.admin.companyLocations.length > 0) {\r\n locationName = this.props.admin.companyLocations.filter(l => l.id === this.props.order.companyLocationId)[0].name; \r\n }\r\n\r\n let status = 'n/a'\r\n if (this.props.order.statusTypeId && this.props.quoteOrderCommon.statusTypes) {\r\n status = this.props.quoteOrderCommon.statusTypes.filter(s => s.id === this.props.order.statusTypeId)[0].name;\r\n }\r\n\r\n var emailData = {\r\n quoteId: null,\r\n lines: this.props.order.lines,\r\n billingAddress: this.props.order.billingAddress[0],\r\n shippingAddress: this.props.order.shippingAddress[0],\r\n shipToTypeId: this.props.order.shipToTypeId,\r\n installType: this.props.order.installType,\r\n fabricator: locations[0].fabricatorName,\r\n installer: locations[0].installerName,\r\n contact: this.props.order.contact,\r\n description: this.props.order.name,\r\n sendToEmail: sendToEmail,\r\n orderId: this.props.order.id,\r\n locationName: locationName,\r\n firstName: this.props.order.contact[0].firstName,\r\n lastName: this.props.order.contact[0].lastName,\r\n newStatus: newStatus,\r\n designerEmail: this.getDesignerEmail(),\r\n comment: comment,\r\n fabricatorPhone: fabricatorPhone,\r\n isOrder: true\r\n }\r\n\r\n return emailData;\r\n }\r\n\r\n async getOrderById(orderId) {\r\n await this.props.orderActions.getOrderById(orderId); \r\n this.setState({ loading: false });\r\n } \r\n\r\n getCommunications() {\r\n this.props.quoteOrderCommonActions.getCommunications(null, this.props.order.id, this.state.communicationOffset, this.state.communicationRowsToFetch);\r\n } \r\n\r\n setSubmitButtonText(stage) {\r\n let defaultLabel = constants.STAGES_BUTTON_LABELS.Next;\r\n let submitLabel = constants.STAGES_BUTTON_LABELS.Submit;\r\n \r\n submitLabel = this.getSubmitButtonLabel(stage);\r\n\r\n this.setState({ \r\n submitButtonLabel: stage > this.state.requiredStages ? submitLabel : defaultLabel,\r\n submitButtonColor: stage > this.state.requiredStages ? '#e2231a' : '#e2231a',\r\n checkmarkLabel: QuoteOrderCommon.getCheckmarkLabel(this.state.status)\r\n });\r\n }\r\n\r\n getSubmitButtonLabel(stage) { \r\n return stage > this.state.requiredStages ? QuoteOrderCommon.getCheckmarkLabel(this.state.status, this.props.session.roleName) : constants.STAGES_BUTTON_LABELS.Submit; \r\n }\r\n\r\n setRequiredStages(shipToCustomer) {\r\n this.setState({ requiredStages: shipToCustomer === true ? this.state.shipToCustomerTotalRequiredStages : this.state.shipToStoreTotalRequiredStages });\r\n }\r\n\r\n completedRequiredStages() {\r\n return (this.state.stage > this.stage.requiredStages);\r\n }\r\n\r\n onShipToStoreChanged(event) {\r\n\r\n if (event.target.value === constants.PLACEHOLDER) return;\r\n \r\n this.setRequiredStages(this.shipToCustomer(this.props.order.shipToTypeId)); \r\n this.onStageChange(constants.QUOTE_STAGES.Details);\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.ShipToStore, event.target.value);\r\n \r\n if (event.target.value === constants.SHIP_TO_TYPES.Store) \r\n this.setShipAddressToLocationShipTo();\r\n\r\n if (event.target.value.toString() === constants.SHIP_TO_TYPES.Customer.toString()) {\r\n this.addHomeDeliveryCharge();\r\n } else {\r\n this.removeHomeDeliveryCharge();\r\n }\r\n }\r\n\r\n addHomeDeliveryCharge() {\r\n let location = this.props.admin.companyLocations.filter(l => l.id === this.props.order.companyLocationId); \r\n let homeDeliveryProduct = this.props.admin.productList.filter(p => p.Name === constants.HOME_DELIVERY);\r\n let locationHomeDeliveryCharge = location[0].homeDeliveryCharge ? location[0].homeDeliveryCharge : homeDeliveryProduct[0].defaultPrice;\r\n\r\n let newConfigId = guid.GenerateGUID();\r\n\r\n if (homeDeliveryProduct.length > 0)\r\n this.props.quoteOrderCommonActions.createLine(null, this.props.session.username, locationHomeDeliveryCharge, homeDeliveryProduct[0].ImageUrl, newConfigId, \"ICE\", homeDeliveryProduct[0].ID, this.props.order.id);\r\n }\r\n\r\n removeHomeDeliveryCharge() {\r\n if (!this.props.order.lines || this.props.order.lines.length === 0) return;\r\n\r\n let homeDeliveryProduct = this.props.order.lines.filter(l => l.productName === constants.HOME_DELIVERY);\r\n\r\n if (homeDeliveryProduct.length > 0)\r\n this.props.quoteOrderCommonActions.deleteLine(homeDeliveryProduct[0].id, null, this.props.order.id);\r\n }\r\n\r\n setShipAddressToLocationShipTo() {\r\n if (this.props.order.shippingAddress && this.props.order.companyLocationId && this.props.admin.activeCompanyLocationShippingAddress) {\r\n\r\n let locationShip = this.props.admin.activeCompanyLocationShippingAddress;\r\n this.updateAddress(\"address\", locationShip.address, \"shipping\");\r\n this.updateAddress(\"address2\", locationShip.address2, \"shipping\");\r\n this.updateAddress(\"city\", locationShip.city, \"shipping\");\r\n this.updateAddress(\"state\", locationShip.state, \"shipping\");\r\n this.updateAddress(\"zip\", locationShip.zip, \"shipping\"); \r\n }\r\n } \r\n\r\n onAddCommunicationClick(comment, sendEmail = true) {\r\n this.props.quoteOrderCommonActions.createCommunication(null, this.props.session.username, comment, 1, this.props.order.id);\r\n\r\n if (sendEmail === true)\r\n this.sendEmail(constants.EMAIL_TYPES.UserCommunication, comment);\r\n }\r\n\r\n onPrint() { \r\n this.props.history.push({\r\n pathname: '/OrderPrint' \r\n }); \r\n }\r\n\r\n onCopy() {\r\n this.props.quoteOrderCommonActions.copy(null, this.props.session.username, this.props.order.id).then(() => {\r\n this.props.history.push({ pathname: '/OrderList' });\r\n });\r\n }\r\n\r\n submitOrder() { \r\n if (this.state.stage > this.state.requiredStages) { \r\n if (this.isLastStage() === true) {\r\n let poEntered = this.validatePoNumber(); \r\n \r\n if (poEntered === false) return;\r\n \r\n } \r\n \r\n let communicationText;\r\n let newStatus;\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.InProgressAccepted) { \r\n\r\n if (this.isOrderShipDateSet() === false) return;\r\n\r\n communicationText = `Order has been shipped`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.Shipped);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Shipped);\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.Pending) {\r\n if (this.props.order.attachments.length < 1) { \r\n this.props.alertActions.showFailureAlert('Please attach a drawing & purchase order to update the order');\r\n return;\r\n } else {\r\n communicationText = `Order has been submitted for approval`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.SubmittedForApproval);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.SubmittedForApproval);\r\n }\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval) { \r\n\r\n if (this.state.rejected === true) {\r\n if(this.isOrderRejected() === false) return;\r\n\r\n communicationText = `Order rejected: ${this.state.rejectMessage}`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.Rejected);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Rejected);\r\n } else {\r\n if (this.isOrderAccepted() === false) return;\r\n\r\n communicationText = `Order has been accepted`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.InProgressAccepted);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.InProgressAccepted);\r\n }\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.Confirmed) {\r\n communicationText = `Order has been submitted for approval`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.SubmittedForApproval);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.SubmittedForApproval);\r\n }\r\n else if (!this.props.order.attachments || this.props.order.attachments.length < 1) {\r\n communicationText = `Order submitted without attachments. Status set to pending`; \r\n this.updateOrderStatus(constants.STATUS_TYPES.Pending);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Pending);\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.Draft) {\r\n communicationText = `Order Submitted by ${this.props.session.username}`; \r\n this.updateOrderStatus(constants.STATUS_TYPES.SubmittedForApproval);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.SubmittedForApproval);\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval) {\r\n communicationText = `Order Accepted by ${this.props.session.username}`; \r\n this.updateOrderStatus(constants.STATUS_TYPES.InProgressAccepted);\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.InProgressAccepted);\r\n }\r\n else if (this.props.order.statusTypeId === constants.STATUS_TYPES.Completed) {\r\n return;\r\n }\r\n // else if (this.props.order.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n // communicationText = `Order Confirmed by ${this.props.session.username}`; \r\n // this.updateOrderStatus(constants.STATUS_TYPES.Confirmed); \r\n //} \r\n else {\r\n communicationText = `Order was submitted by ${this.props.session.username}`;\r\n this.updateOrderStatus(constants.STATUS_TYPES.SubmittedForApproval); \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.IsLocked, true); \r\n newStatus = this.getStatusName(constants.STATUS_TYPES.SubmittedForApproval); \r\n }\r\n\r\n if (this.state.rejected === true) {\r\n newStatus = this.getStatusName(constants.STATUS_TYPES.Rejected);\r\n this.sendEmail(constants.EMAIL_TYPES.StatusChange, newStatus);\r\n } else {\r\n this.sendEmail(constants.EMAIL_TYPES.QuoteOrder, newStatus);\r\n }\r\n\r\n this.onAddCommunicationClick(communicationText, false);\r\n //this.createSystemCommunication(communicationText);\r\n\r\n this.props.history.push({ pathname: '/OrderDashboard' });\r\n\r\n } else {\r\n \r\n if (this.validateStage() === true)\r\n this.onStageChange(this.state.stage + 1); \r\n } \r\n }\r\n\r\n getStatusName(statusId) {\r\n if (this.props.quoteOrderCommon.statusTypes && this.props.quoteOrderCommon.statusTypes.length > 0) {\r\n return this.props.quoteOrderCommon.statusTypes.filter(s => s.id === statusId)[0].name;\r\n }\r\n }\r\n\r\n isOrderAccepted() {\r\n if (!this.state.estimatedShipDate) {\r\n let message = this.props.session.roleName === constants.ROLE.User ? \"No estimated ship date has been set yet. Please check back later.\" : \"Please enter an estimated ship date.\";\r\n this.props.alertActions.showFailureAlert(message);\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n isOrderRejected() {\r\n if(!this.state.rejectMessage) {\r\n this.props.alertActions.showFailureAlert(\"Must enter a reason for rejecting order.\");\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n isOrderShipDateSet() {\r\n if (!this.state.actualShipDate) {\r\n let message = this.props.session.roleName === constants.ROLE.User ? \"No actual ship date has been set yet. Please check back later.\" : \"Please enter the actual ship date.\";\r\n this.props.alertActions.showFailureAlert(message);\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n validateStage() {\r\n let stage = this.state.stage;\r\n\r\n if (stage === constants.QUOTE_STAGES.Line) \r\n return true; //return this.validateLineStage();\r\n else if (stage === constants.QUOTE_STAGES.Details) {\r\n let validDetails = this.validateDetailsStage();\r\n let validCustomer = this.validateCustomerStage();\r\n\r\n if (validDetails === false) return validDetails;\r\n if (validCustomer === false) return validCustomer;\r\n\r\n return true;\r\n } \r\n else if (stage === constants.QUOTE_STAGES.Address)\r\n return this.validateAddressStage(); \r\n \r\n return true; \r\n }\r\n\r\n isLastStage() {\r\n let shipToCustomer = this.props.order.shipToTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n\r\n if (this.state.stage === constants.QUOTE_STAGES.Submit || (shipToCustomer === false && this.state.stage > this.state.shipToStoreTotalRequiredStages) \r\n || (shipToCustomer === true && this.state.stage > this.state.shipToCustomerTotalRequiredStages)) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n validateLineStage() {\r\n if (this.props.order.lines.length === 0) {\r\n this.props.alertActions.showFailureAlert(\"At least one line must be added to the quote to continue\");\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n validatePoNumber() {\r\n if (!this.props.order.poNumber) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a purchase order number in the summary section. For Genesis Item Numbers, please use the Retail/Genesis report button.\");\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n\r\n getDesignerEmail() {\r\n let designer = this.props.quoteOrderCommon.designers.filter(d => d.userId === this.props.order.createdByUserId);\r\n let email = '';\r\n \r\n if (designer && designer.length > 0)\r\n email = designer[0].email;\r\n \r\n return email;\r\n }\r\n\r\n validateDetailsStage() {\r\n if (!this.props.order.name) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a job name\");\r\n return false;\r\n }\r\n\r\n if (!this.props.order.companyLocationId || this.props.order.companyLocationId === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a location\");\r\n return false;\r\n }\r\n \r\n // if (!this.props.order.createdByEmail) {\r\n // this.props.alertActions.showFailureAlert(\"Please enter a designer\");\r\n // return false;\r\n // } \r\n\r\n if (!this.props.order.createdByUserId || this.props.order.createdByUserId === constants.PLACEHOLDER || this.props.order.createdByUserId === -1) {\r\n this.props.alertActions.showFailureAlert(\"Please select a designer\");\r\n return false;\r\n }\r\n\r\n if (!this.props.order.installType || this.props.order.installType === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select an install type\");\r\n return false;\r\n }\r\n\r\n if (!this.props.order.shipToTypeId || this.props.order.shipToTypeId === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select a ship to type\");\r\n return false;\r\n }\r\n\r\n if (this.props.order.installType === constants.INSTALL_TYPES.SOSInstall) {\r\n if (!this.props.order.installerId) {\r\n this.props.alertActions.showFailureAlert(\"An installed is required when install type SOS Install is selected\");\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n }\r\n\r\n validateCustomerStage() {\r\n const contact = this.props.order.contact[0];\r\n \r\n if (!contact.firstName || !contact.lastName) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a first and last name.\");\r\n return false;\r\n }\r\n else if (this.shipToCustomer(this.props.order.shipToTypeId) === true && !contact.phone) {\r\n this.props.alertActions.showFailureAlert(\"Phone number is required when ship to customer is selected.\");\r\n return false;\r\n }\r\n else \r\n return true\r\n }\r\n\r\n validateAddressStage() {\r\n if (this.shipToCustomer(this.props.order.shipToTypeId) !== true) return true;\r\n\r\n let shippingAddress = this.props.order.shippingAddress[0];\r\n\r\n if (!shippingAddress) {\r\n this.props.alertActions.showFailureAlert(\"No shipping address found\");\r\n return false;\r\n }\r\n\r\n if (!shippingAddress.Address) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the address field\");\r\n return false;\r\n } \r\n \r\n if (!shippingAddress.City) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the City field\");\r\n return false;\r\n } \r\n\r\n if (!shippingAddress.State) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a value in the State field\");\r\n return false;\r\n }\r\n \r\n // if (!shippingAddress.Country) {\r\n // this.props.alertActions.showFailureAlert(\"Please enter a value in the Country field\");\r\n // return false;\r\n // } \r\n\r\n return true;\r\n }\r\n\r\n createSystemCommunication(message) {\r\n this.props.quoteOrderCommonActions.createCommunication(null, this.props.session.username, message, constants.QUOTE_COMMUNICATION_TYPES.system, this.props.order.id);\r\n } \r\n\r\n runOrderSubmitWorkflows() {\r\n let stopWorkflows = false;\r\n\r\n if (this.props.workflows.onOrderSubmit && this.props.workflows.onOrderSubmit.length > 0) { \r\n this.props.workflows.onOrderSubmit.forEach(workflow => {\r\n\r\n if (stopWorkflows === true) return;\r\n\r\n switch(workflow.actionTypeId) {\r\n\r\n case constants.WORKFLOW_ACTION_TYPES.validateRequiredAttachments:\r\n \r\n if (this.props.order.attachments.length < workflow.actionMinAttachments) {\r\n this.onAddCommunicationClick(`The required number of attachments is ${workflow.actionMinAttachments}. The order was not submmitted and the status will be set to pending`, false); \r\n //this.createSystemCommunication(`The required number of attachments is ${workflow.actionMinAttachments}. The order was not submmitted and the status will be set to pending`);\r\n this.props.alertActions.showFailureAlert(`The required number of attachments is ${workflow.actionMinAttachments}. The order was not submmitted and the status will be set to pending`);\r\n if (workflow.actionBreakWorkflowOnFail === true) {\r\n stopWorkflows = true;\r\n } \r\n } else {\r\n if (workflow.actionBreakWorkflowOnTrue === true) {\r\n stopWorkflows = true;\r\n } \r\n }\r\n \r\n break; \r\n\r\n case constants.WORKFLOW_ACTION_TYPES.updateStatus:\r\n this.updateOrderStatus(workflow.actionNewStatus);\r\n\r\n break;\r\n \r\n default:\r\n console.log('no matching workflow id');\r\n }\r\n });\r\n }\r\n }\r\n\r\n updateOrderStatus(statusTypeId) { \r\n this.setState({ status: statusTypeId });\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.Status, statusTypeId);\r\n }\r\n \r\n onConfigureClick() {\r\n let products = this.props.api.companyProducts;\r\n\r\n if (products) {\r\n let selectedProduct = products.filter(p => p.ID == this.state.selectedProduct)[0];\r\n\r\n if (selectedProduct.isNonConfigurable === true) {\r\n this.props.quoteOrderCommonActions.createLine(null, this.props.session.username, selectedProduct.defaultPrice, selectedProduct.ImageUrl, \"\", \"\", this.state.selectedProduct, this.props.order.id);\r\n return;\r\n }\r\n }\r\n \r\n this.props.apiActions.setActiveProduct(this.props.session.username, this.state.selectedProduct, this.props.session.company).then(() => {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Order);\r\n this.props.history.push({ pathname: '/Configurator' }); \r\n \r\n }); \r\n }\r\n\r\n onAddCountertopClick() {\r\n let products = this.props.admin.productList;\r\n let productId;\r\n if (products) {\r\n // auto load counter top from lowes\r\n let selectedProduct = products.filter(p => p.ID == 1)[0]; \r\n\r\n if (!selectedProduct) {\r\n this.props.alertActions.showFailureAlert(\"No product found\");\r\n return;\r\n }\r\n\r\n this.props.apiActions.setSelectedProduct(selectedProduct); \r\n \r\n productId = selectedProduct.ID; \r\n }\r\n\r\n this.props.apiActions.setActiveProduct(this.props.session.username, productId, this.props.session.company).then(() => {\r\n this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Order); \r\n this.props.history.push({ pathname: '/Configurator' }); \r\n });\r\n }\r\n\r\n onCommunicationPageChange(currentPage) {\r\n let communicationOffset = parseInt((currentPage * this.state.communicationRowsToFetch) - this.state.communicationRowsToFetch);\r\n this.setState({ communicationOffset: communicationOffset, currentCommunicationPage: currentPage }, () => this.getCommunications()); \r\n } \r\n\r\n onProductChange(event) {\r\n this.setState({ selectedProduct: event.target.value });\r\n\r\n this.setState({ disableAddLine: event.target.value === '' ? true : false });\r\n }\r\n\r\n onQuantityChange(event, id) { \r\n if (event.nativeEvent.explicitOriginalTarget &&\r\n event.nativeEvent.explicitOriginalTarget == event.nativeEvent.originalTarget) {\r\n return;\r\n }\r\n \r\n this.props.quoteOrderCommonActions.updateLineQuantity(id, event.target.value, null, this.props.order.id);\r\n }\r\n\r\n onAddressFieldUpdate(event, addressType) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.props.quoteOrderCommonActions.updateAddressField(this.props.order.id, addressType, event.target.id, event.target.value, constants.TABLES.Address, constants.TABLES.Order, null, this.props.order.id);\r\n }\r\n\r\n onContactFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.props.quoteOrderCommonActions.updateContactField(this.props.order.id, event.target.id, event.target.value, constants.TABLES.Contact, constants.TABLES.Order);\r\n }\r\n\r\n onHeaderFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value || event.target.value === constants.PLACEHOLDER) return;\r\n\r\n this.updateHeader(event.target.id, event.target.value);\r\n\r\n if (event.target.id === constants.ORDER_SQL_COLUMNS.InstallType) {\r\n if (event.target.value === constants.INSTALL_TYPES.SOS) {\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.VendorNumber, constants.VENDOR_NUMBERS.SOS); \r\n this.getDefaultInstaller(null); \r\n } else {\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.VendorNumber, constants.VENDOR_NUMBERS.SOS_INSTALL);\r\n\r\n this.getDefaultInstaller(this.props.order.companyLocationId);\r\n }\r\n } \r\n\r\n if(event.target.id === constants.ORDER_SQL_COLUMNS.InstallType && this.props.order.installerId)\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, null); \r\n }\r\n\r\n onFieldUpdate(event) {\r\n if (this.state.onFocusValue === event.target.value) return;\r\n\r\n this.updateField(event.target.id, event.target.value); \r\n }\r\n\r\n onCompanyChange(event) {\r\n if (event.target.value === constants.PLACEHOLDER) return; \r\n event.persist();\r\n const companyId = event.target.value;\r\n this.props.quoteOrderCommonActions.updateHeaderField(this.props.order.id, event.target.id, event.target.value, constants.TABLES.Order).then(() => {\r\n let companyName = this.props.admin.companyList.filter(c => c.id == companyId)[0].company;\r\n this.getCompanyLocations(companyName);\r\n }); \r\n }\r\n\r\n getCompanyLocations(companyName) { \r\n this.props.adminActions.getCompanyLocations(companyName).then(() => {\r\n if (this.props.session.roleName === constants.ROLE.User) {\r\n const userLocation = this.props.session.userCompanyLocationIdCSV.split(',');\r\n let defaultLocation = this.props.admin.companyLocations.filter(l => l.id = userLocation[0]);\r\n\r\n this.setState({ companyLocationId: defaultLocation });\r\n }\r\n });\r\n }\r\n\r\n onLocationChange(event) {\r\n this.setState({ companyLocationId: event.target.value });\r\n \r\n let shipToStoreTypes = this.props.quoteOrderCommon.shipToTypes; \r\n let allowedShipToTypes;\r\n let locations = this.props.admin.companyLocations.filter(l => l.id == event.target.value);\r\n if (shipToStoreTypes)\r\n allowedShipToTypes = locations[0].allowHomeDelivery !== true ? shipToStoreTypes.filter(x => x.id !== constants.SHIP_TO_TYPES.Customer) : shipToStoreTypes;\r\n else \r\n allowedShipToTypes = [];\r\n\r\n this.setState({ allowedShipToTypes: allowedShipToTypes });\r\n \r\n\r\n event.persist();\r\n \r\n if (event.target.value !== constants.PLACEHOLDER) {\r\n this.updateHeader(event.target.id, event.target.value);\r\n this.updateHeader(\"createdByEmail\", \"\");\r\n this.updateHeader(\"createdByUserId\", -1);\r\n if(this.props.order.installerId)\r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, null);\r\n\r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(event.target.value); \r\n \r\n this.getDefaultInstaller(event.target.value); \r\n \r\n this.props.quoteOrderCommonActions.getCompanyLocationFabricator(event.target.value, true);\r\n this.props.quoteOrderCommonActions.getCompanyLocationDesigners(event.target.value);\r\n \r\n }\r\n }\r\n\r\n getDefaultInstaller(locationId) {\r\n this.props.quoteOrderCommonActions.getCompanyLocationInstallers(locationId).then(() => { \r\n if (this.props.quoteOrderCommon.companyLocationInstallers && this.props.quoteOrderCommon.companyLocationInstallers.length > 0) { \r\n this.updateHeader(constants.ORDER_SQL_COLUMNS.InstallerId, this.props.quoteOrderCommon.companyLocationInstallers[0].id); \r\n } \r\n });\r\n }\r\n\r\n onInputFocus(event) {\r\n this.setState({onFocusValue: event.target.value});\r\n }\r\n\r\n async onReconfigure(configurationId, headerId, id, productId) { \r\n let products = this.props.admin.productList;\r\n\r\n if (products) {\r\n let selectedProduct = products.filter(p => p.ID == productId)[0];\r\n\r\n if (selectedProduct.isNonConfigurable === true) {\r\n this.props.alertActions.showFailureAlert(\"Cannot reconfigure non configurable part\");\r\n return;\r\n }\r\n }\r\n\r\n await this.props.sessionActions.setConfiguratorMode(constants.CONFIGURATOR_MODES.Order);\r\n\r\n this.props.history.push({\r\n pathname: '/Configurator',\r\n configurationId: configurationId,\r\n headerId: headerId,\r\n LineId: id,\r\n productId: productId\r\n }); \r\n }\r\n\r\n onLineDelete(lineId) { \r\n this.props.quoteOrderCommonActions.deleteLine(lineId, null, this.props.order.id);\r\n } \r\n\r\n onCopyLine(lineId, configurationId, headerId, productId) {\r\n let newConfigId = guid.GenerateGUID();\r\n let products = this.props.admin.productList;\r\n\r\n if (products) {\r\n let lineProduct = products.filter(p => p.ID == productId)[0];\r\n this.props.quoteOrderCommonActions.CopyLineConfiguration(lineProduct.ApplicationInstance, lineProduct.ApplicationName, \"http://hkplt01/PCM/ConfiguratorService/v2/ProductConfigurator.svc\", headerId, configurationId, headerId, newConfigId);\r\n }\r\n\r\n this.props.quoteOrderCommonActions.copyLine(lineId, newConfigId, null, this.props.order.id); \r\n }\r\n\r\n onClickDownloadFile(path, originalName, mimetype, filename) {\r\n this.props.quoteOrderCommonActions.downloadFile(path, originalName, mimetype, filename); \r\n } \r\n\r\n onOrderAccepted(isAccepted) {\r\n if (isAccepted === false) {\r\n this.setState({ accepted: isAccepted, estimatedShipDate: null, actualShipDate: null }); \r\n this.updateField(constants.ORDER_SQL_COLUMNS.EstimatedShipDate, null); \r\n this.updateField(constants.ORDER_SQL_COLUMNS.ActualShipDate, null); \r\n } else {\r\n this.setState({ accepted: isAccepted, estimatedShipDate: null, rejected: false }); \r\n } \r\n }\r\n\r\n onOrderRejected(isRejected) {\r\n if (isRejected === true) {\r\n //update a field somewhere; send an email at some point \r\n this.setState({ \r\n rejected: true,\r\n accepted: false\r\n });\r\n } else {\r\n //update a field somewhere\r\n this.setState({ \r\n rejected: false,\r\n rejectMessage: ''\r\n });\r\n }\r\n }\r\n\r\n onRejectMessageChanged(event) { \r\n this.setState({ rejectMessage: event.target.value });\r\n if (event.target.value) \r\n this.setState({ showEnterCommentWarning: false });\r\n }\r\n\r\n onEstimatedShipDateSet(date) { \r\n if (!date) { \r\n this.setState({ estimatedShipDate: '', accepted: false });\r\n this.updateField(constants.ORDER_SQL_COLUMNS.EstimatedShipDate, null); \r\n return;\r\n } else {\r\n this.setState({ estimatedShipDate: date, accepted: true });\r\n this.updateField(constants.ORDER_SQL_COLUMNS.EstimatedShipDate, date) \r\n } \r\n }\r\n\r\n onActualShipDateChanged(date) {\r\n if (!date) { \r\n this.setState({ actualShipDate: '' });\r\n this.updateField(constants.ORDER_SQL_COLUMNS.ActualShipDate, null); \r\n return;\r\n } else {\r\n this.setState({ actualShipDate: date });\r\n this.updateField(constants.ORDER_SQL_COLUMNS.ActualShipDate, date) \r\n } \r\n }\r\n\r\n updateHeader(column, value) {\r\n this.props.quoteOrderCommonActions.updateHeaderField(this.props.order.id, column, value, constants.TABLES.Order);\r\n\r\n if (column === constants.ORDER_SQL_COLUMNS.createdByEmail) {\r\n this.props.quoteOrderCommonActions.createCompanyLocationDesigner(value, this.props.order.companyLocationId);\r\n } \r\n }\r\n\r\n updateField(column, value) { \r\n this.props.quoteOrderCommonActions.updateField(this.props.order.id, column, value, constants.TABLES.Order); \r\n }\r\n\r\n generateReport(costOrPrice, quoteOrOrder, id) {\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, costOrPrice, quoteOrOrder, id);\r\n }\r\n\r\n onSetToPendingInformationClick(comment) {\r\n if (!comment) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a comment to set the quote to pending.\");\r\n return;\r\n }\r\n this.updateOrderStatus(constants.STATUS_TYPES.Pending);\r\n this.props.quoteOrderCommonActions.createCommunication(null, this.props.session.username, comment, 1, this.props.order.id);\r\n this.sendEmail(constants.EMAIL_TYPES.PendingInformation, constants.STATUS_TYPES.Pending, comment);\r\n }\r\n\r\n onSetToDraftClick(comment) {\r\n if (!comment) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a comment to set the quote to draft.\");\r\n return;\r\n }\r\n\r\n this.updateOrderStatus(constants.STATUS_TYPES.Draft);\r\n this.props.quoteOrderCommonActions.createCommunication(null, this.props.session.username, comment, 1, this.props.order.id);\r\n this.sendEmail(constants.EMAIL_TYPES.StatusChange, constants.STATUS_TYPES.Draft, comment);\r\n }\r\n \r\n render() {\r\n\r\n if (this.state.loading === true || !this.props.quoteOrderCommon.userCompanyLocations) return ( );\r\n \r\n let submitDisabled = false; \r\n let previousDisabled = false; \r\n let shippingAddress = [];\r\n let contact = null;\r\n \r\n if (this.state.stage > this.state.requiredStages) {\r\n if (this.props.session.roleName === constants.ROLE.User) {\r\n switch (this.state.status) {\r\n case constants.STATUS_TYPES.Sent: \r\n submitDisabled = true;\r\n break;\r\n case constants.STATUS_TYPES.CancellationRequested:\r\n submitDisabled = true;\r\n break;\r\n case constants.STATUS_TYPES.ConvertedToOrder:\r\n submitDisabled = true;\r\n break;\r\n\r\n case constants.STATUS_TYPES.Shipped:\r\n submitDisabled = true;\r\n break;\r\n\r\n case constants.STATUS_TYPES.SubmittedForApproval:\r\n submitDisabled = true;\r\n break;\r\n\r\n default:\r\n submitDisabled = false;\r\n break;\r\n }\r\n } else {\r\n switch (this.state.status) { \r\n case constants.STATUS_TYPES.ConvertedToOrder:\r\n submitDisabled = true;\r\n break;\r\n\r\n case constants.STATUS_TYPES.Shipped:\r\n submitDisabled = true;\r\n break;\r\n\r\n default:\r\n submitDisabled = false;\r\n break;\r\n }\r\n }\r\n } \r\n\r\n let showInvoiceButton = (this.state.status === constants.STATUS_TYPES.Shipped && (this.props.session.roleName === constants.ROLE.SystemAdmin || this.props.session.roleName === constants.ROLE.Fabricator)) === true ? true : false;\r\n \r\n if (this.state.stage === 1) previousDisabled = true;\r\n \r\n if (this.props.order.shippingAddress)\r\n shippingAddress = this.props.order.shippingAddress[0];\r\n\r\n if (this.props.order.contact)\r\n contact = this.props.order.contact; \r\n\r\n let companyLocationName = ''; // companyLocation[0].name;\r\n let companyLocationFax = ''; //companyLocation[0].faxNumber; \r\n let attachments;\r\n\r\n if (this.props.order.attachments && this.props.order.attachments.length > 0)\r\n attachments = this.props.session.roleName === constants.ROLE.User ? this.props.order.attachments.filter(a => a.attachmentTypeId != 3) : this.props.order.attachments;\r\n \r\n let communicationPageCount = 1;\r\n \r\n if (this.props.order && this.props.order.communicationHistory) {\r\n communicationPageCount = this.props.order.communicationHistory.length > 0 ? (this.props.order.communicationHistory[0].totalRows / this.state.communicationRowsToFetch) : 1;\r\n communicationPageCount = Math.ceil(communicationPageCount);\r\n } \r\n \r\n let fabricatorCompanyLocations = [];\r\n if (this.props.session.roleName === constants.ROLE.Fabricator && this.props.admin.companyLocations) {\r\n let userLocations = this.props.session.userCompanyLocationIdCSV.split(',');\r\n fabricatorCompanyLocations = this.props.admin.companyLocations.filter(loc => userLocations.includes(loc.id.toString()));\r\n }\r\n\r\n let headerDetailLocations = [];\r\n if (this.props.session.roleName === constants.ROLE.Fabricator && this.props.admin.companyLocations) {\r\n let userLocations = this.props.session.userCompanyLocationIdCSV.split(',');\r\n headerDetailLocations = this.props.admin.companyLocations.filter(loc => userLocations.includes(loc.id.toString()));\r\n } else if (this.props.session.roleName === constants.ROLE.User && this.props.quoteOrderCommon.userCompanyLocations) {\r\n headerDetailLocations = this.props.quoteOrderCommon.userCompanyLocations;\r\n } else if ((this.props.session.roleName === constants.ROLE.CompanyAdmin || this.props.session.roleName === constants.ROLE.SystemAdmin) && this.props.admin.companyLocations) {\r\n headerDetailLocations = this.props.admin.companyLocations;\r\n }\r\n \r\n let showAddressStage = (this.props.order.shipToTypeId !== constants.SHIP_TO_TYPES.Customer ? false : true);\r\n let shipToCustomer = this.props.order.shipToTypeId === constants.SHIP_TO_TYPES.Customer ? true : false;\r\n let acceptOrderReadonly = this.props.session.roleName === constants.ROLE.User ? true : false;\r\n\r\n let headerRowWidth = 8;\r\n\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.Draft)\r\n headerRowWidth = headerRowWidth - 1;\r\n\r\n if (showInvoiceButton === true)\r\n headerRowWidth = headerRowWidth - 1;\r\n\r\n let statusOptions = this.props.quoteOrderCommon.statusTypes.filter(status => status.roleLevel >= this.props.session.roleLevel && status.allowOnOrder === true); \r\n \r\n let showDraftButton = false;\r\n\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.Pending || this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval || this.props.order.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n if (this.props.session.roleName === constants.ROLE.Fabricator || this.props.session.roleName === constants.ROLE.SystemAdmin)\r\n showDraftButton = true;\r\n } \r\n \r\n let showPendingButton = false;\r\n\r\n if (this.props.order.statusTypeId === constants.STATUS_TYPES.Pending || this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval || this.props.order.statusTypeId === constants.STATUS_TYPES.Sent) {\r\n if (this.props.session.roleName === constants.ROLE.Fabricator || this.props.session.roleName === constants.ROLE.SystemAdmin)\r\n showPendingButton = true;\r\n } \r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.order.statusTypeId === constants.STATUS_TYPES.CancellationRequested && \r\n (this.props.session.roleName === constants.ROLE.ManufacturerAdmin || this.props.session.roleName === constants.ROLE.SystemAdmin || this.props.session.roleName === constants.ROLE.Fabricator) &&\r\n } \r\n\r\n this.state.requiredStages ? true : false } \r\n isLocked={this.state.isLocked}\r\n submitLabel={this.getSubmitButtonLabel(this.state.stage) }\r\n checkmarkLabel={this.state.checkmarkLabel} \r\n \r\n />\r\n\r\n {this.state.stage === constants.QUOTE_STAGES.Details &&\r\n \r\n \r\n \r\n \r\n \r\n } \r\n\r\n {this.state.stage === constants.QUOTE_STAGES.Line && \r\n \r\n } \r\n\r\n {this.state.stage === constants.QUOTE_STAGES.Details &&\r\n \r\n }\r\n \r\n {this.state.stage === constants.QUOTE_STAGES.Attachments &&\r\n \r\n \r\n \r\n \r\n } \r\n \r\n {this.state.stage === constants.QUOTE_STAGES.Address && showAddressStage === true && \r\n \r\n } \r\n\r\n {(this.state.stage === constants.QUOTE_STAGES.Submit \r\n || (shipToCustomer === false && this.state.stage > this.state.shipToStoreTotalRequiredStages) \r\n || (shipToCustomer === true && this.state.stage > this.state.shipToCustomerTotalRequiredStages)) \r\n && (this.props.order.statusTypeId === constants.STATUS_TYPES.SubmittedForApproval \r\n || this.props.order.statusTypeId === constants.STATUS_TYPES.InProgressAccepted \r\n || this.props.order.statusTypeId === constants.STATUS_TYPES.Shipped) \r\n && \r\n \r\n }\r\n\r\n {(this.state.stage === constants.QUOTE_STAGES.Submit \r\n || (shipToCustomer === false && this.state.stage > this.state.shipToStoreTotalRequiredStages) \r\n || (shipToCustomer === true && this.state.stage > this.state.shipToCustomerTotalRequiredStages)) && \r\n \r\n }\r\n\r\n {(this.state.stage === constants.QUOTE_STAGES.Submit \r\n || (shipToCustomer === false && this.state.stage > this.state.shipToStoreTotalRequiredStages) \r\n || (shipToCustomer === true && this.state.stage > this.state.shipToCustomerTotalRequiredStages)) &&\r\n \r\n }\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n order: state.order, \r\n alert: state.alert,\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n admin: state.admin\r\n };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n orderActions: bindActionCreators(orderActions, dispatch), \r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch), \r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Order));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Jumbotron } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport styled from 'styled-components';\r\nimport queryString from 'query-string';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n display: block !important;\r\n`;\r\n\r\nexport const JumbotronStyled = styled(Jumbotron)`\r\n background-color: #f5f5f5 !important;\r\n`;\r\n\r\nexport const TextInputWithLabelStyled = styled(TextInputWithLabel)`\r\n input { background-color: #FFF !important; }\r\n`;\r\n\r\nclass ResetPassword extends Component { \r\n\r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n this.changePassword = this.changePassword.bind(this);\r\n this.passwordUpdated = this.passwordUpdated.bind(this);\r\n this.password2Updated = this.password2Updated.bind(this);\r\n\r\n this.state = {\r\n isLoading: true,\r\n password: '',\r\n password2: '',\r\n requestId: ''\r\n }\r\n }\r\n\r\n componentDidMount() { \r\n const params = queryString.parse(this.props.location.search);\r\n\r\n this.setState({ isLoading: false, requestId: params.request }); \r\n }\r\n\r\n changePassword() {\r\n \r\n let passwordValid = this.validatePasswords();\r\n\r\n if (passwordValid === false) return;\r\n \r\n this.props.sessionActions.updatePassword(this.state.requestId, this.state.password).then(() => {\r\n if (this.props.session.loggedIn === true) \r\n this.props.history.push(\"/MyConfigurations\");\r\n });\r\n }\r\n\r\n validatePasswords() {\r\n let password = this.state.password;\r\n let password2 = this.state.password2;\r\n\r\n if (!password || !password2) { \r\n this.props.alertActions.showFailureAlert('Please enter and re-enter password.');\r\n return false;\r\n }\r\n\r\n if (password !== password2) {\r\n this.props.alertActions.showFailureAlert('Passwords do not match');\r\n return false;\r\n }\r\n }\r\n\r\n passwordUpdated(event) {\r\n this.setState({ password: event.target.value });\r\n }\r\n\r\n password2Updated(event) {\r\n this.setState({ password2: event.target.value });\r\n }\r\n \r\n render() { \r\n if (this.state.isLoading) \r\n return ();\r\n \r\n return ( \r\n \r\n \r\n Reset Password
\r\n \r\n this.passwordUpdated(e)} />\r\n this.password2Updated(e)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api,\r\n alert: state.alert\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ResetPassword));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Jumbotron } from 'reactstrap';\r\nimport Button from '../Common/Button/Button';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport styled from 'styled-components';\r\nimport queryString from 'query-string';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n display: block !important;\r\n`;\r\n\r\nexport const JumbotronStyled = styled(Jumbotron)`\r\n background-color: #f5f5f5 !important;\r\n`;\r\n\r\nexport const TextInputWithLabelStyled = styled(TextInputWithLabel)`\r\n input { background-color: #FFF !important; }\r\n`;\r\n\r\nclass RequestPasswordReset extends Component { \r\n\r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n this.submitRequest = this.submitRequest.bind(this); \r\n\r\n this.state = {\r\n isLoading: true,\r\n email: '', \r\n storeNumber: '' \r\n }\r\n }\r\n\r\n componentDidMount() { \r\n this.props.sessionActions.showSignupModal(false);\r\n this.setState({ isLoading: false }); \r\n }\r\n\r\n pushHistory(url) {\r\n let { history } = this.props;\r\n history.push({\r\n pathname: url,\r\n search: ''\r\n });\r\n }\r\n\r\n submitRequest() { \r\n if (!this.state.email || !this.state.storeNumber) {\r\n this.props.alertActions.showFailureAlert(\"Please enter all fields to submit request\");\r\n return;\r\n }\r\n \r\n this.props.sessionActions.emailPasswordResetRequest(this.state.storeNumber, this.state.email).then(() => {\r\n this.props.alertActions.showSuccessAlert(\"Password Reset Request Sent!\");\r\n this.props.sessionActions.showSignupModal(true);\r\n this.pushHistory(\"/Login\"); \r\n });\r\n } \r\n \r\n render() { \r\n if (this.state.isLoading) \r\n return ();\r\n \r\n return ( \r\n \r\n \r\n Password Reset Request
\r\n \r\n this.setState({ email: e.target.value })} /> \r\n this.setState({ storeNumber: e.target.value })} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session,\r\n api: state.api,\r\n alert: state.alert\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(RequestPasswordReset));","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport dateFormat from 'dateformat';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const RowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n cursor: pointer; \r\n margin: 0 !important;\r\n \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nexport const IdColStyled = styled(Col)`\r\n text-align: center;\r\n @media (max-width:1200px) { \r\n font-weight: bold; \r\n &::before {\r\n content: \"\\\\0023\";\r\n }\r\n }\r\n`;\r\n\r\nexport const CreateDateColStyled = styled(Col)`\r\n text-align: center;\r\n @media (max-width:1200px) {\r\n color: #7A43B6 !important;\r\n font-size: 13px !important;\r\n }\r\n`;\r\n\r\nexport const NameColStyled = styled(Col)`\r\n text-align: center;\r\n @media (max-width:1200px) {\r\n color: ${props => props.theme.buttonColor} !important;\r\n }\r\n`;\r\n\r\nexport const FirstNameColStyled = styled(Col)`\r\n text-align: center;\r\n @media (max-width:1200px) { \r\n padding-right: 0px !important;\r\n }\r\n`;\r\n\r\nexport const LastNameColStyled = styled(Col)`\r\n text-align: center;\r\n @media (max-width:1200px) { \r\n padding-left: 6px !important;\r\n }\r\n`;\r\n\r\nexport const HeaderCol = styled(Col)`\r\n font-weight: bold;\r\n text-align: center;\r\n cursor: pointer;\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n text-align:center;\r\n`;\r\n\r\nconst DashboardGrid = React.memo(props => { \r\n let optionalColumnsDisplay = 0;\r\n let descriptionWidth = \"1\"; \r\n\r\n if (props.showInvoicedColumn === true) optionalColumnsDisplay += 1;\r\n if (props.showSourceQuote === true) optionalColumnsDisplay += 1;\r\n if (optionalColumnsDisplay === 0) descriptionWidth = \"2\"; \r\n\r\n return ( \r\n \r\n \r\n props.sort('id')}>Id\r\n props.sort('createdDate')}>Created \r\n props.sort('statusName')}>Status \r\n props.sort('companyLocationName')}>Location\r\n props.sort('fabricatorName')}>Fabricator\r\n props.sort('companyLocationStoreNumber')}>Store # \r\n {props.showSourceQuote === true && props.sort('estimatedShipDate')}>Estimated Ship }\r\n props.sort('customerName')}>Customer \r\n\r\n {props.showSourceQuote !== true && \r\n props.sort('name')}>Description \r\n }\r\n\r\n {props.showSourceQuote === true && \r\n props.sort('poNumber')}>PO Number \r\n }\r\n {props.showInvoicedColumn === true && \r\n props.sort('InvoicedYesNo')}>Invoiced \r\n }\r\n {props.showSourceQuote === true && \r\n props.sort('sourceQuoteId')}>Source Quote \r\n }\r\n
\r\n { \r\n props.quotes.map(quote => { \r\n let createdDate = dateFormat(quote.createdDate, \"m/d/yyyy hh:MM TT\", true); \r\n let estimatedShipDate = '';\r\n if (quote.estimatedShipDate)\r\n estimatedShipDate = dateFormat(quote.estimatedShipDate, \"m/d/yyyy hh:MM TT\", true); \r\n \r\n let allowDelete = quote.companyLocationId;\r\n let actions = props.showInvoicedColumn === true ? constants.ORDER_GRID_ACTIONS : constants.GRID_ACTIONS;\r\n\r\n if (props.isAdmin === false && quote.statusTypeId !== constants.STATUS_TYPES.Draft) { \r\n actions = actions.filter(a => a.Value !== 'delete'); \r\n }\r\n\r\n let customerName = (quote.firstName ? quote.firstName : \"\") + \" \" + (quote.lastName ? quote.lastName : \"\");\r\n return ( \r\n props.onListItemClick(e, quote.id)}> \r\n \r\n {quote.id}\r\n \r\n \r\n {createdDate}\r\n \r\n \r\n {quote.statusName}\r\n \r\n \r\n {quote.companyLocationName}\r\n \r\n \r\n {quote.fabricatorName}\r\n \r\n \r\n {quote.companyLocationStoreNumber}\r\n \r\n {props.showSourceQuote === true && \r\n \r\n {estimatedShipDate}\r\n \r\n }\r\n \r\n {customerName}\r\n \r\n {props.showSourceQuote !== true && \r\n \r\n {quote.name}\r\n \r\n } \r\n\r\n {props.showSourceQuote === true && \r\n \r\n {quote.poNumber}\r\n \r\n } \r\n {props.showInvoicedColumn === true && \r\n \r\n {quote.InvoicedYesNo}\r\n \r\n }\r\n {props.showSourceQuote === true && \r\n \r\n {quote.sourceQuoteId}\r\n \r\n }\r\n \r\n props.onActionChange(e, quote.id)} onClick={e => props.stopPropagation(e)} id=\"gridActions\" selectableValues={actions}/>\r\n \r\n \r\n );\r\n }) \r\n } \r\n \r\n );\r\n});\r\n\r\nDashboardGrid.propTypes = {\r\n quotes: PropTypes.array.isRequired, \r\n onListItemClick: PropTypes.func.isRequired,\r\n stopPropagation: PropTypes.func.isRequired,\r\n onActionChange: PropTypes.func.isRequired,\r\n showInvoicedColumn: PropTypes.bool,\r\n showSourceQuote: PropTypes.bool, \r\n isAdmin: PropTypes.bool,\r\n sort: PropTypes.func.isRequired\r\n\r\n\r\n};\r\n\r\nexport default DashboardGrid;","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport QuoteDashboardGrid from '../QuoteOrderCommon/DashboardGrid';\r\nimport ListFilter from '../QuoteOrderCommon/ListFilter';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport Pagination from '../Common/Pagination/Pagination';\r\nimport Button from '../Common/Button/Button';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport * as constants from '../../modules/constants';\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\nimport Loading from '../Common/Loading/Loading';\r\n\r\nexport const H1 = styled.h1`\r\n margin-top: 1em;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n background-color: ${props => props.theme.lightBackground};\r\n margin-top: 0px !important;\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n`;\r\n\r\nexport const GridRow = styled(Row)`\r\n margin-top: 0px !important;\r\n`;\r\n\r\nexport const SearchRow = styled(Row)`\r\n margin-bottom: 0px !important;\r\n @media (max-width:1200px) { \r\n margin-bottom: 1em !important;\r\n }\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n color: #FFF !important;\r\n`;\r\n\r\nclass QuoteDashboard extends Component { \r\n constructor(props, context) {\r\n super(props, context);\r\n\r\n loadProgressBar();\r\n \r\n this.onClickEditQuote = this.onClickEditQuote.bind(this);\r\n this.onFilter = this.onFilter.bind(this);\r\n this.onPageChange = this.onPageChange.bind(this);\r\n this.onClickNewQuote = this.onClickNewQuote.bind(this);\r\n this.stopPropagation = this.stopPropagation.bind(this);\r\n this.onActionChange = this.onActionChange.bind(this);\r\n this.sort = this.sort.bind(this);\r\n\r\n this.state = {\r\n statusList: [],\r\n quoteFilter: null,\r\n offset: 0,\r\n rowsToFetch: 20,\r\n currentPage: 1,\r\n loading: true,\r\n sortDirection: null,\r\n sortByColumn: null,\r\n }\r\n } \r\n\r\n componentDidMount() { \r\n if (this.props.location.state && this.props.location.state.overviewStatus) {\r\n this.setState({ quoteFilter: this.props.location.state.overviewStatus }, () => {\r\n this.getQuotes();\r\n })\r\n } else {\r\n this.getQuotes(); \r\n } \r\n }\r\n\r\n async onClickEditQuote(event, quoteId) {\r\n await this.props.quoteActions.setActiveQuote(quoteId);\r\n \r\n this.props.history.push({ pathname: '/Quote' });\r\n }\r\n\r\n async onClickNewQuote() {\r\n this.props.quoteActions.clearQuote();\r\n await this.props.quoteActions.createQuote(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Quote' });\r\n } \r\n\r\n sort(sortByColumn) { \r\n let direction = this.state.sortDirection === \"desc\" ? \"asc\" : \"desc\";\r\n this.setState({sortDirection: direction, sortByColumn: sortByColumn}, this.getQuotes()); \r\n }\r\n\r\n stopPropagation(event) {\r\n event.stopPropagation();\r\n }\r\n\r\n onFilter(event) { \r\n this.setState({ quoteFilter: event.target.value }, () => {\r\n this.getQuotes(); \r\n }); \r\n }\r\n\r\n onActionChange(event, id) {\r\n switch (event.target.value) {\r\n case constants.GRID_ACTION_OPTIONS.Copy:\r\n\r\n break;\r\n\r\n case constants.GRID_ACTION_OPTIONS.Delete:\r\n confirmAlert({\r\n title: 'Confirm Delete',\r\n message: 'Are you sure to delete?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.quoteOrderCommonActions.deleteDraft(id, null).then(() => {\r\n this.getQuotes();\r\n });\r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n }); \r\n break;\r\n\r\n case constants.GRID_ACTION_OPTIONS.QuoteCost:\r\n this.setState({ loading: true});\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, \"C\", \"Q\", id).then(() => {\r\n this.setState({ loading: false});\r\n }); \r\n break;\r\n\r\n case constants.GRID_ACTION_OPTIONS.QuotePrice:\r\n this.setState({ loading: true});\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, \"P\", \"Q\", id).then(() => {\r\n this.setState({ loading: false});\r\n }); \r\n break; \r\n \r\n case constants.GRID_ACTION_OPTIONS.DownloadAttachments:\r\n this.getAllAttachments(id);\r\n break;\r\n }\r\n }\r\n\r\n getAllAttachments(id) {\r\n this.props.quoteOrderCommonActions.getAttachments(id, null, null).then(() => {\r\n this.downloadAttachments();\r\n });\r\n }\r\n\r\n downloadAttachments() {\r\n let attachments = this.props.quote.attachments;\r\n if (attachments) {\r\n attachments.forEach(attachment => {\r\n console.log(`download ${attachment.originalName}, ${attachment.path}, ${attachment.mimetype}`);\r\n this.props.quoteOrderCommonActions.downloadFile(attachment.path, attachment.originalName, attachment.mimetype);\r\n });\r\n } else {\r\n this.props.alertActions.showFailureAlert(\"No attachments found\"); \r\n }\r\n }\r\n\r\n getQuotes() { \r\n this.props.quoteActions.getQuotes(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName, this.state.quoteFilter, this.state.offset, this.state.rowsToFetch, this.state.sortByColumn, this.state.sortDirection).then(() => {\r\n this.getAllQuoteStatuses();\r\n this.setState({ loading: false });\r\n });\r\n }\r\n \r\n getAllQuoteStatuses() { \r\n this.setState({ statusList: [] }, () => {\r\n let quotes = this.props.quote.quoteList; \r\n let allStatuses = this.state.statusList;\r\n \r\n if (!quotes) return;\r\n \r\n quotes.forEach(quote => {\r\n if (!allStatuses.includes(quote.statusName))\r\n allStatuses.push(quote.statusName);\r\n });\r\n \r\n this.setState({ statusList: allStatuses }); \r\n }); \r\n }\r\n\r\n onPageChange(currentPage) { \r\n let offset = parseInt((currentPage * this.state.rowsToFetch) - this.state.rowsToFetch);\r\n this.setState({ offset: offset, currentPage: currentPage }, () => this.getQuotes()); \r\n } \r\n\r\n render() { \r\n if (this.state.loading === true) return ();\r\n\r\n let quotes = this.props.quote.quoteList;\r\n\r\n let pageCount = 1;\r\n \r\n if (this.props.quote && quotes) {\r\n pageCount = quotes.length > 0 ? (quotes[0].totalRows / this.state.rowsToFetch) : 1;\r\n pageCount = Math.ceil(pageCount);\r\n } \r\n \r\n return ( \r\n \r\n \r\n Quotes
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {quotes && \r\n \r\n \r\n \r\n \r\n \r\n \r\n } \r\n {/* {quotes && \r\n \r\n \r\n { \r\n this.state.statusList.map(status => { \r\n let quotesByStatus = quotes.filter(quote => quote.statusName === status);\r\n \r\n return (\r\n \r\n
{status}
\r\n \r\n \r\n );\r\n })\r\n } \r\n \r\n \r\n \r\n } */}\r\n \r\n );\r\n } \r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n quote: state.quote, \r\n alert: state.alert,\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch), \r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(QuoteDashboard));","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport DashboardGrid from '../QuoteOrderCommon/DashboardGrid';\r\nimport ListFilter from '../QuoteOrderCommon/ListFilter';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport Pagination from '../Common/Pagination/Pagination';\r\nimport styled from 'styled-components';\r\nimport Button from '../Common/Button/Button';\r\nimport * as constants from '../../modules/constants';\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\nimport Loading from '../Common/Loading/Loading';\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n color: #FFF !important;\r\n`;\r\n\r\nexport const H1 = styled.h1`\r\n margin-top: 1em;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n background-color: ${props => props.theme.lightBackground};\r\n margin-top: 0px !important;\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n`;\r\n\r\nexport const GridRow = styled(Row)`\r\n margin-top: 0px !important;\r\n`;\r\n\r\nexport const SearchRow = styled(Row)`\r\n margin-bottom: 0px !important;\r\n @media (max-width:1200px) { \r\n margin-bottom: 1em !important;\r\n }\r\n`;\r\n\r\nclass OrderDashboard extends Component { \r\n constructor(props, context) {\r\n super(props, context);\r\n \r\n this.onClickNewOrder = this.onClickNewOrder.bind(this);\r\n this.onClickEditOrder = this.onClickEditOrder.bind(this);\r\n this.onFilter = this.onFilter.bind(this);\r\n this.onPageChange = this.onPageChange.bind(this);\r\n this.stopPropagation = this.stopPropagation.bind(this);\r\n this.onActionChange = this.onActionChange.bind(this);\r\n this.sort = this.sort.bind(this);\r\n \r\n this.state = {\r\n statusList: [],\r\n orderFilter: null, \r\n offset: 0,\r\n rowsToFetch: 10,\r\n currentPage: 1,\r\n loading: true,\r\n sortDirection: null,\r\n sortByColumn: null,\r\n }\r\n } \r\n\r\n componentDidMount() { \r\n if (this.props.location.state && this.props.location.state.overviewStatus) {\r\n this.setState({ orderFilter: this.props.location.state.overviewStatus }, () => {\r\n this.getOrders();\r\n })\r\n } else {\r\n this.getOrders();\r\n }\r\n }\r\n\r\n async onClickEditOrder(event, orderId) {\r\n await this.props.orderActions.setActiveOrder(orderId);\r\n \r\n this.props.history.push({ pathname: '/Order' });\r\n }\r\n\r\n async onClickNewOrder() {\r\n this.props.orderActions.clearOrder();\r\n await this.props.orderActions.createOrder(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Order' });\r\n }\r\n\r\n onFilter(event) { \r\n this.setState({ orderFilter: event.target.value }, () => {\r\n this.getOrders(); \r\n }); \r\n }\r\n\r\n onActionChange(event, id) {\r\n switch (event.target.value) {\r\n case constants.GRID_ACTION_OPTIONS.Copy:\r\n\r\n break;\r\n\r\n case constants.GRID_ACTION_OPTIONS.Delete:\r\n confirmAlert({\r\n title: 'Confirm Delete',\r\n message: 'Are you sure to delete?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.quoteOrderCommonActions.deleteDraft(null, id).then(() => {\r\n this.getOrders();\r\n });\r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n }); \r\n break;\r\n\r\n case constants.ORDER_GRID_ACTION_OPTIONS.OrderCost: \r\n this.setState({ loading: true});\r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, \"C\", \"O\", id).then(() => {\r\n this.setState({ loading: false});\r\n }); \r\n break; \r\n\r\n case constants.ORDER_GRID_ACTION_OPTIONS.OrderPrice: \r\n this.setState({ loading: true}); \r\n this.props.quoteOrderCommonActions.generateReport(constants.REPORT_URLS.OrderCost, \"P\", \"O\", id).then(() => {\r\n this.setState({ loading: false});\r\n }); \r\n break; \r\n \r\n case constants.GRID_ACTION_OPTIONS.DownloadAttachments:\r\n this.getAllAttachments(id);\r\n break;\r\n } \r\n }\r\n\r\n getAllAttachments(id) {\r\n this.props.quoteOrderCommonActions.getAttachments(null, id, null).then(() => {\r\n this.downloadAttachments();\r\n });\r\n }\r\n\r\n downloadAttachments() {\r\n let attachments = this.props.order.attachments;\r\n if (attachments) {\r\n attachments.forEach(attachment => { \r\n this.props.quoteOrderCommonActions.downloadFile(attachment.path, attachment.originalName, attachment.mimetype);\r\n });\r\n } else {\r\n this.props.alertActions.showFailureAlert(\"No attachments found\"); \r\n }\r\n }\r\n\r\n stopPropagation(event) {\r\n event.stopPropagation();\r\n }\r\n\r\n sort(sortByColumn) { \r\n let direction = this.state.sortDirection === \"desc\" ? \"asc\" : \"desc\";\r\n this.setState({sortDirection: direction, sortByColumn: sortByColumn}, this.getOrders()); \r\n }\r\n\r\n getOrders() { \r\n this.props.orderActions.getOrders(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName, this.state.orderFilter, this.state.offset, this.state.rowsToFetch, this.state.sortByColumn, this.state.sortDirection).then(() => {\r\n this.getAllOrderStatuses();\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n getAllOrderStatuses() {\r\n this.setState({ statusList: [] }, () => {\r\n let orders = this.props.order.orderList;\r\n let allStatuses = this.state.statusList;\r\n \r\n if (!orders) return;\r\n\r\n orders.forEach(order => {\r\n if (!allStatuses.includes(order.statusName))\r\n allStatuses.push(order.statusName);\r\n });\r\n\r\n this.setState({ statusList: allStatuses }); \r\n }); \r\n }\r\n\r\n onPageChange(currentPage) { \r\n let offset = parseInt((currentPage * this.state.rowsToFetch) - this.state.rowsToFetch);\r\n this.setState({ offset: offset, currentPage: currentPage }, () => this.getOrders()); \r\n } \r\n\r\n render() { \r\n if (this.state.loading === true) return (); \r\n let orders = this.props.order.orderList;\r\n\r\n let pageCount = 1;\r\n \r\n if (this.props.order && orders) {\r\n pageCount = orders.length > 0 ? (orders[0].totalRows / this.state.rowsToFetch) : 1;\r\n pageCount = Math.ceil(pageCount);\r\n } \r\n \r\n if (!orders) {\r\n return ( \r\n \r\n \r\n \r\n Orders
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n ); \r\n }\r\n return ( \r\n \r\n \r\n \r\n Orders
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {orders &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n );\r\n } \r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n order: state.order, \r\n alert: state.alert,\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators(apiActions, dispatch),\r\n sessionActions: bindActionCreators(sessionActions, dispatch),\r\n orderActions: bindActionCreators(orderActions, dispatch), \r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(OrderDashboard));","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport { Container, Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport * as constants from '../../modules/constants';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n font-weight: bold;\r\n margin-top: 1em; \r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const TextInputPrimitiveStyled = styled(TextInputPrimitive)`\r\n width: 300px;\r\n`;\r\n\r\nexport const BodyRowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass UserList extends React.Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar(); \r\n \r\n this.onClickNewUser = this.onClickNewUser.bind(this);\r\n this.onClickEditUser = this.onClickEditUser.bind(this);\r\n this.onClickSearchUser = this.onClickSearchUser.bind(this);\r\n this.onLocationChange = this.onLocationChange.bind(this);\r\n this.onCompanyChange = this.onCompanyChange.bind(this);\r\n this.userSearchChanged = this.userSearchChanged.bind(this);\r\n this.onRoleChange = this.onRoleChange.bind(this);\r\n\r\n this.state = { \r\n companyLocationId: null, \r\n companyId: null,\r\n activeUser: null,\r\n loading: true,\r\n userSearchText: '',\r\n roleId: null\r\n }; \r\n } \r\n \r\n componentDidMount() { \r\n this.props.adminActions.getAllCompanies(this.props.session.manufacturer).then(() => {\r\n if (!this.props.quoteOrderCommon.roles) {\r\n this.props.quoteOrderCommonActions.getRoles(this.props.session.roleName).then( () => {\r\n this.setState({ loading: false }) \r\n });\r\n } else {\r\n this.setState({ loading: false }) \r\n } \r\n }); \r\n }\r\n\r\n onCompanyChange(event) {\r\n const companyId = event.target.value;\r\n\r\n if (companyId === constants.PLACEHOLDER) return;\r\n\r\n this.setState({ companyId: companyId }, () => {\r\n\r\n if(this.props.admin.companyList) {\r\n let companyName = this.props.admin.companyList.filter(c => c.id == companyId)[0].company;\r\n this.props.adminActions.getCompanyLocations(companyName);\r\n this.props.quoteOrderCommonActions.clearUsersAssignedToLocation();\r\n this.props.adminActions.setActiveCompany(this.state.companyId); \r\n } else {\r\n this.props.alertActions.showFailureAlert(\"no company found\");\r\n } \r\n });\r\n }\r\n\r\n onLocationChange(event) {\r\n this.setState({ companyLocationId: event.target.value }, this.getUsers(event.target.value, this.state.roleId)); \r\n }\r\n\r\n onRoleChange(event) {\r\n this.setState({ roleId: event.target.value }, this.getUsers(this.state.companyLocationId, event.target.value)); \r\n }\r\n\r\n userSearchChanged(event) { \r\n this.setState({ userSearchText: event.target.value });\r\n }\r\n\r\n onClickSearchUser() {\r\n this.props.adminActions.searchByUsername(this.state.userSearchText).then(() => {\r\n if (this.props.admin.activeUser === this.state.userSearchText) {\r\n this.props.history.push({ pathname: '/AddUser' }); \r\n } \r\n });\r\n }\r\n\r\n onClickEditUser(event, userId, username) { \r\n this.setState({ activeUser: userId }, this.editUser(username)); \r\n }\r\n\r\n editUser(username) {\r\n this.props.adminActions.setActiveUser(username, this.state.companyId, this.state.companyLocationId);\r\n this.props.history.push({ pathname: '/AddUser' }); \r\n }\r\n\r\n onClickNewUser() { \r\n this.props.adminActions.setActiveUser(null); \r\n this.props.history.push({ pathname: '/AddUser' });\r\n } \r\n\r\n getUsers(companyLocationId, roleId) {\r\n if (companyLocationId !== constants.PLACEHOLDER)\r\n this.props.quoteOrderCommonActions.getUsersAssignedToLocation(companyLocationId, roleId);\r\n }\r\n\r\n render() { \r\n \r\n if (this.state.loading === true) return ;\r\n let users = !this.state.companyLocationId ? null : this.props.quoteOrderCommon.companyLocationUsers;\r\n\r\n if (!users) { \r\n return (\r\n \r\n Users
\r\n \r\n \r\n \r\n this.userSearchChanged(e)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n Company\r\n this.onCompanyChange(e)} autoFocus={false} required={true} /> \r\n\r\n Location\r\n this.onLocationChange(e)} autoFocus={false} required={true} /> \r\n\r\n Role\r\n this.onRoleChange(e)} autoFocus={false} required={true} /> \r\n \r\n Username \r\n First Name\r\n Last Name \r\n \r\n \r\n ); \r\n }\r\n \r\n return (\r\n \r\n Users
\r\n\r\n \r\n \r\n
\r\n\r\n Company\r\n this.onCompanyChange(e)} autoFocus={false} required={true} /> \r\n\r\n Location\r\n this.onLocationChange(e)} autoFocus={false} required={true} /> \r\n\r\n Role\r\n this.onRoleChange(e)} autoFocus={false} required={true} /> \r\n \r\n \r\n Username \r\n First Name\r\n Last Name \r\n \r\n { \r\n users.map(user => { \r\n return(\r\n this.onClickEditUser(e, user.id, user.username)}>\r\n \r\n {user.username}\r\n \r\n \r\n {user.firstName}\r\n \r\n \r\n {user.lastName}\r\n \r\n {/* \r\n \r\n ); \r\n })\r\n } \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n session: state.session,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch), \r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch) \r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(UserList));","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport { Container, Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport * as constants from '../../modules/constants';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\nimport { confirmAlert } from 'react-confirm-alert';\r\nimport 'react-confirm-alert/src/react-confirm-alert.css';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input { width: 100% !important; }\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n font-weight: bold;\r\n margin-top: 1em; \r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const BodyRowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n margin-top: 0 !important;\r\n margin-bottom: 0 !important;\r\n\r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass CompanyLocationList extends React.Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar(); \r\n \r\n this.onClickNewCompanyLocation = this.onClickNewCompanyLocation.bind(this);\r\n this.onClickEditCompanyLocation = this.onClickEditCompanyLocation.bind(this); \r\n this.onCompanyChange = this.onCompanyChange.bind(this);\r\n this.onDeleteClick = this.onDeleteClick.bind(this);\r\n\r\n this.state = {\r\n companyId: null\r\n }\r\n } \r\n \r\n componentDidMount() { \r\n this.props.adminActions.getAllCompanies(this.props.session.manufacturer).then(() => {\r\n this.setState({ loading: false });\r\n }); \r\n }\r\n\r\n onCompanyChange(event) {\r\n if (event.target.value === constants.PLACEHOLDER) return; \r\n\r\n const companyId = event.target.value;\r\n\r\n this.setState({ companyId: companyId }, () => {\r\n let companyName = this.props.admin.companyList.filter(c => c.id == companyId)[0].company;\r\n\r\n this.props.adminActions.getCompanyLocations(companyName); \r\n this.props.adminActions.setActiveCompany(this.state.companyId); \r\n });\r\n }\r\n \r\n onClickEditCompanyLocation(locationId) { \r\n this.props.adminActions.setActiveCompanyLocation(locationId);\r\n this.props.history.push({ pathname: '/ModifyCompanyLocation' }); \r\n }\r\n\r\n onClickNewCompanyLocation() { \r\n if (!this.state.companyId || this.state.companyId === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select a company\");\r\n return;\r\n }\r\n\r\n const activeCompany = this.props.admin.companyList.filter(c => c.id == this.state.companyId)[0].company;\r\n \r\n this.props.adminActions.createCompanyLocation(activeCompany, this.props.session.username).then(() => {\r\n this.props.history.push({ pathname: '/ModifyCompanyLocation' });\r\n }); \r\n } \r\n\r\n stopPropagation(event) {\r\n event.stopPropagation();\r\n }\r\n\r\n onDeleteClick(event, locationId) \r\n {\r\n this.stopPropagation(event);\r\n\r\n confirmAlert({\r\n title: 'Confirm delete',\r\n message: 'Are you sure to delete?',\r\n buttons: [\r\n {\r\n label: 'Yes',\r\n onClick: () => {\r\n this.props.adminActions.deleteCompanyLocation(locationId, this.getActiveCompany());\r\n }\r\n },\r\n {\r\n label: 'No',\r\n onClick: () => ''\r\n }\r\n ]\r\n }); \r\n }\r\n\r\n getActiveCompany() {\r\n if (this.props.admin.companyList && this.props.admin.companyList.length > 0)\r\n return this.props.admin.companyList.filter(c => c.id == this.state.companyId)[0].company;\r\n \r\n return null; \r\n }\r\n\r\n render() { \r\n let locations = this.props.admin.companyLocations;\r\n \r\n return (\r\n \r\n Locations
\r\n\r\n \r\n \r\n
\r\n\r\n Company\r\n this.onCompanyChange(e)} autoFocus={false} required={true} /> \r\n\r\n \r\n Location \r\n Fabricator \r\n \r\n\r\n\r\n { locations && \r\n locations.map(location => { \r\n return( \r\n this.onClickEditCompanyLocation(location.id)}>\r\n \r\n {location.name}\r\n \r\n \r\n {location.fabricatorName}\r\n \r\n \r\n \r\n this.onDeleteClick(e, location.id)} >\r\n \r\n \r\n ); \r\n })\r\n } \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n session: state.session,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return { \r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch) \r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(CompanyLocationList));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Form, FormGroup, Label, Row, Col } from 'reactstrap';\r\n\r\nimport InputLabel from '../Common/InputLabel/InputLabel';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport CheckBoxWithLabel from '../Common/CheckBoxWithLabel/CheckBoxWithLabel';\r\nimport CheckBoxPrimitive from '../Common/Primitives/CheckBoxPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport Address from '../QuoteOrderCommon/AddressForm';\r\nimport * as constants from '../../modules/constants';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 1.5em;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const SelectLabelStyled = styled(InputLabel)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nexport const PasswordResetButton = styled(Button)`\r\n &#passwordReset {\r\n width: 160px !important; \r\n }\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\nmargin-bottom: 25px;\r\n`\r\n\r\nexport const CheckBoxWithLabelStyled = styled(CheckBoxWithLabel)`\r\n margin-bottom: 15px;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass ModifyCompanyLocations extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n loadProgressBar();\r\n \r\n this.formValueChange = this.formValueChange.bind(this); \r\n this.cancel = this.cancel.bind(this);\r\n this.onInputFocus = this.onInputFocus.bind(this);\r\n this.onAddressFieldUpdate = this.onAddressFieldUpdate.bind(this);\r\n this.updateField = this.updateField.bind(this);\r\n this.onCheckBoxChange = this.onCheckBoxChange.bind(this);\r\n //this.onBranchChange = this.onBranchChange.bind(this);\r\n\r\n this.state = ({\r\n id: '', \r\n name: '',\r\n quoteSubmitEmailList: '',\r\n orderEmailList: '',\r\n quoteSubmitAltEmailList: '',\r\n orderSubmitAltEmailList: '',\r\n editMode: false,\r\n loading: true,\r\n onFocusValue: '',\r\n allowHomeDelivery: false,\r\n activeCompany: '',\r\n allowSOSInstall: false,\r\n storeNumber: null,\r\n phoneNumber: null,\r\n faxNumber: null,\r\n fabricatorId: null,\r\n installerId: null,\r\n fabricatorLocationId: null,\r\n isFabricatorLocation: false,\r\n installerLocationId: null,\r\n isInstallerLocation: false,\r\n homeDeliveryCharge: null,\r\n billingAddress: '',\r\n billingCity: '',\r\n billingState: '',\r\n billingZip: '',\r\n billingCountry: '',\r\n billingAddress2: '',\r\n shippingAddress: '',\r\n shippingCity: '',\r\n shippingState: '',\r\n shippingZip: '',\r\n shippingCountry: '',\r\n shippingAddress2: '',\r\n activeCompanyTypeId: null,\r\n adPatchTypeId: null \r\n }); \r\n }\r\n\r\n componentDidMount() { \r\n if (this.props.admin.activeCompanyLocation === null) {\r\n this.setState({ loading: false });\r\n return;\r\n }\r\n \r\n let locations = this.props.admin.companyLocations;\r\n\r\n if (!locations) {\r\n \r\n let activeCompany = this.props.admin.companyList.filter(c => c.id == this.props.admin.activeCompanyId)[0];\r\n\r\n this.setState({ \r\n activeCompany: activeCompany.company,\r\n activeCompanyTypeId: activeCompany.companyTypeId, \r\n isFabricatorLocation: activeCompany.companyTypeId == constants.COMPANY_TYPES.Fabricator ? true : false, \r\n isInstallerLocation: activeCompany.companyTypeId == constants.COMPANY_TYPES.Installer ? true : false \r\n }); \r\n return;\r\n }\r\n\r\n let activeLocation = locations.filter(location => location.id == this.props.admin.activeCompanyLocation);\r\n let activeCompany = this.props.admin.companyList.filter(c => c.id == this.props.admin.activeCompanyId)[0];\r\n\r\n this.setState({ \r\n activeCompany: activeCompany.company,\r\n activeCompanyTypeId: activeCompany.companyTypeId, \r\n isFabricatorLocation: activeCompany.companyTypeId == constants.COMPANY_TYPES.Fabricator ? true : false, \r\n isInstallerLocation: activeCompany.companyTypeId == constants.COMPANY_TYPES.Installer ? true : false \r\n });\r\n \r\n if (activeLocation.length > 0 ) {\r\n this.setState({ \r\n name: activeLocation[0].name, \r\n loading: false, editMode: true, \r\n quoteSubmitEmailList: activeLocation[0].quoteSubmitEmailList, \r\n orderSubmitEmailList: activeLocation[0].orderSubmitEmailList,\r\n allowHomeDelivery: activeLocation[0].allowHomeDelivery,\r\n quoteSubmitAltEmailList: activeLocation[0].quoteSubmitAltEmailList,\r\n orderSubmitAltEmailList: activeLocation[0].orderSubmitAltEmailList, \r\n allowSOSInstall: activeLocation[0].allowSOSInstall,\r\n storeNumber: activeLocation[0].storeNumber,\r\n phoneNumber: activeLocation[0].phoneNumber,\r\n faxNumber: activeLocation[0].faxNumber,\r\n fabricatorId: activeLocation[0].fabricatorId,\r\n installerId: activeLocation[0].installerId,\r\n fabricatorLocationId: activeLocation[0].fabricatorLocationId,\r\n installerLocationId: activeLocation[0].installerLocationId,\r\n adPatchTypeId: activeLocation[0].adPatchTypeId,\r\n homeDeliveryCharge: activeLocation[0].homeDeliveryChargeCost \r\n });\r\n\r\n this.props.adminActions.getCompanyLocationAddresses(activeLocation[0].id).then(() => {\r\n this.setState({\r\n billingAddress: this.props.admin.activeCompanyLocationBillingAddress.address,\r\n billingCity: this.props.admin.activeCompanyLocationBillingAddress.city,\r\n billingState: this.props.admin.activeCompanyLocationBillingAddress.state,\r\n billingZip: this.props.admin.activeCompanyLocationBillingAddress.zip,\r\n billingCountry: this.props.admin.activeCompanyLocationBillingAddress.country,\r\n billingAddress2: this.props.admin.activeCompanyLocationBillingAddress.address2,\r\n shippingAddress: this.props.admin.activeCompanyLocationShippingAddress.address,\r\n shippingCity: this.props.admin.activeCompanyLocationShippingAddress.city,\r\n shippingState: this.props.admin.activeCompanyLocationShippingAddress.state,\r\n shippingZip: this.props.admin.activeCompanyLocationShippingAddress.zip,\r\n shippingCountry: this.props.admin.activeCompanyLocationShippingAddress.country,\r\n shippingAddress2: this.props.admin.activeCompanyLocationShippingAddress.address2\r\n })\r\n }); \r\n //this.props.adminActions.getAllCompanyBranches(activeCompany);\r\n\r\n if (activeLocation[0].fabricatorId && activeCompany.companyTypeId !== constants.COMPANY_TYPES.Fabricator)\r\n this.props.adminActions.getFabricatorLocations(activeLocation[0].fabricatorId);\r\n \r\n if (activeLocation[0].installerId && activeCompany.companyTypeId !== constants.COMPANY_TYPES.Installer)\r\n this.props.adminActions.getInstallerLocations(activeLocation[0].installerId);\r\n \r\n } \r\n\r\n this.props.adminActions.getAllInstallers(this.props.session.manufacturer);\r\n this.props.adminActions.getAllFabricators(this.props.session.manufacturer);\r\n this.props.adminActions.getAdPatchTypes(this.props.session.company);\r\n}\r\n\r\n // onBranchChange(event) {\r\n // this.props.adminActions.updateCompanyBranch(this.props.admin.activeCompanyLocation, event.target.value).then(() => {\r\n // this.props.adminActions.getCompanyLocations(this.state.activeCompany);\r\n // });\r\n // }\r\n \r\n formValueChange(event) { \r\n let value;\r\n if (event.target.type === \"checkbox\") {\r\n value = event.target.checked;\r\n this.onCheckBoxChange(event);\r\n } else \r\n value = event.target.value;\r\n \r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.FabricatorId) {\r\n this.setState({ fabricatorId: value, fabricatorLocationId: null });\r\n this.props.adminActions.getFabricatorLocations(value);\r\n }\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.AdPatchTypeId) {\r\n this.setState({ adPatchTypeId: value }); \r\n }\r\n \r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.InstallerId) {\r\n this.setState({ installerId: value, installerLocationId: null });\r\n this.props.adminActions.getInstallerLocations(value);\r\n }\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.InstallerId)\r\n this.setState({ installerId: value });\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.FabricatorLocationId)\r\n this.setState({ fabricatorLocationId: value });\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.InstallerLocationId)\r\n this.setState({ installerLocationId: value });\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.HomeDeliveryCharge)\r\n this.setState({ HomeDeliveryCharge: value });\r\n\r\n this.updateField(this.props.admin.activeCompanyLocation, event.target.id, value, constants.TABLES.CompanyLocations);\r\n } \r\n \r\n onCheckBoxChange(event) {\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.AllowHomeDelivery) \r\n this.setState({ allowHomeDelivery: event.target.checked })\r\n\r\n if (event.target.id === constants.COMPANY_LOCATIONS_SQL_COLUMNS.AllowSOSInstall) \r\n this.setState({ allowSOSInstall: event.target.checked })\r\n }\r\n\r\n cancel() {\r\n this.props.history.push({ pathname: '/CompanyLocationList' });\r\n }\r\n\r\n validate() {\r\n if (!this.state.name) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a location name\");\r\n return false;\r\n }\r\n\r\n return true;\r\n } \r\n \r\n onInputFocus(event) { \r\n this.setState({onFocusValue: event.target.value});\r\n }\r\n\r\n onAddressFieldUpdate(event, addressType) {\r\n if (this.state.onFocusValue === event.target.value) return; \r\n\r\n this.updateAddress(event.target.id, event.target.value, addressType); \r\n if (event.target.id === 'State') {\r\n if (addressType === constants.ADDRESS_TYPES.Billing)\r\n this.setState({ billingState: event.target.value });\r\n else \r\n this.setState({ shippingState: event.target.value }); \r\n }\r\n }\r\n\r\n updateAddress(column, value, type) { \r\n let id = type === constants.ADDRESS_TYPES.Billing ? this.props.admin.activeCompanyLocationBillingAddress.addressId : this.props.admin.activeCompanyLocationShippingAddress.addressId;\r\n\r\n this.props.adminActions.updateCompanyAddress(id, column, value).then(() => {\r\n this.reloadAddresses();\r\n });\r\n }\r\n\r\n updateField(id, column, value, table) {\r\n this.props.quoteOrderCommonActions.updateField(id, column, value, table).then(() => {\r\n this.reloadAddresses(); \r\n this.props.adminActions.getCompanyLocations(this.state.activeCompany);\r\n \r\n });\r\n }\r\n \r\n reloadAddresses() { \r\n this.props.adminActions.getCompanyLocationAddresses(this.props.admin.activeCompanyLocation);\r\n }\r\n\r\n render() { \r\n if (!this.state.loading && this.state.editMode && !this.props.admin.companyLocations && !this.props.admin.activeCompanyLocationBillingAddress) return \r\n \r\n // let allowHomeDelivery = false; \r\n // let branchId;\r\n\r\n if (this.state.editMode === true) { \r\n let activeLocation = this.props.admin.companyLocations.filter(l => l.id === this.props.admin.activeCompanyLocation)[0];\r\n // allowHomeDelivery = activeLocation.allowHomeDelivery;\r\n \r\n // branchId = activeLocation.branchId;\r\n }\r\n\r\n let companyType = this.state.activeCompanyTypeId == constants.COMPANY_TYPES.Fabricator ? 'Fabricator' : this.state.activeCompanyTypeId == constants.COMPANY_TYPES.Installer ? 'Installer' : 'Store';\r\n\r\n \r\n return ( \r\n \r\n {companyType} Location Admin
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session, \r\n quoteOrderCommon: state.quoteOrderCommon,\r\n alert: state.alert,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ModifyCompanyLocations));","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport { Container, Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport * as constants from '../../modules/constants';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input { width: 100% !important; }\r\n`;\r\n\r\nexport const HeaderRowStyled = styled(Row)`\r\n font-weight: bold;\r\n margin-top: 1em; \r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const BodyRowStyled = styled(Row)`\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n margin-top: 0 !important;\r\n margin-bottom: 0 !important;\r\n cursor: pointer; \r\n :nth-child(even) {\r\n background-color: ${props => props.theme.gridRowBackgroundColor};\r\n }\r\n :nth-child(odd) {\r\n background-color: ${props => props.theme.gridRowAlternateBackgroundColor};\r\n }\r\n :hover {\r\n background-color: ${props => props.theme.gridLineHoverBackgroundColor};\r\n color: ${props => props.theme.gridLineHoverColor};\r\n opacity: ${props => props.theme.gridLineHoverOpacity};\r\n }\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass CompanyList extends React.Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n loadProgressBar(); \r\n \r\n this.onClickNewCompany = this.onClickNewCompany.bind(this);\r\n this.onClickEditCompany = this.onClickEditCompany.bind(this); \r\n } \r\n \r\n componentDidMount() { \r\n this.props.adminActions.getAllCompanies(this.props.session.manufacturer).then(() => {\r\n this.setState({ loading: false });\r\n }); \r\n }\r\n \r\n onClickEditCompany(companyId) { \r\n this.props.adminActions.setActiveCompany(companyId);\r\n this.props.history.push({ pathname: '/ModifyCompany' }); \r\n }\r\n\r\n onClickNewCompany() { \r\n this.props.adminActions.createCompany(this.props.session.manufacturer).then(() => {\r\n this.props.history.push({ pathname: '/ModifyCompany' });\r\n }); \r\n } \r\n\r\n render() { \r\n let companies = this.props.admin.companyList;\r\n \r\n return (\r\n \r\n Companies
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n Company \r\n \r\n\r\n { companies && \r\n companies.map(company => { \r\n return( \r\n this.onClickEditCompany(company.id)}>\r\n \r\n {company.company}\r\n \r\n \r\n ); \r\n })\r\n } \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n session: state.session,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return { \r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch) \r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(CompanyList));","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Form, FormGroup, Label, Row, Col } from 'reactstrap';\r\n\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport CheckBoxWithLabel from '../Common/CheckBoxWithLabel/CheckBoxWithLabel';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport * as constants from '../../modules/constants';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport Address from '../QuoteOrderCommon/AddressForm';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 1.5em;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nexport const PasswordResetButton = styled(Button)`\r\n &#passwordReset {\r\n width: 160px !important; \r\n }\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\nmargin-bottom: 25px;\r\n`\r\n\r\nexport const CheckBoxWithLabelStyled = styled(CheckBoxWithLabel)`\r\n margin-bottom: 15px;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass ModifyCompany extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n loadProgressBar();\r\n \r\n this.formValueChange = this.formValueChange.bind(this); \r\n this.cancel = this.cancel.bind(this);\r\n this.onInputFocus = this.onInputFocus.bind(this);\r\n this.onAddressFieldUpdate = this.onAddressFieldUpdate.bind(this);\r\n this.updateField = this.updateField.bind(this);\r\n this.getSelectableValuesFromConstants = this.getCompanyTypeValues.bind(this);\r\n\r\n this.state = ({\r\n id: '', \r\n name: '',\r\n companyTypeId: '',\r\n billingId: '',\r\n billingAddress: '',\r\n billingAddress2: '',\r\n billingCity: '',\r\n billingState: '',\r\n billingZip: '',\r\n billingCountry: '',\r\n shippingId: '',\r\n shippingAddress: '',\r\n shippingAddress2: '',\r\n shippingCity: '',\r\n shippingState: '',\r\n shippingZip: '',\r\n shippingCountry: '',\r\n manufacturer: '',\r\n editMode: false,\r\n loading: true,\r\n onFocusValue: ''\r\n }); \r\n }\r\n\r\n componentDidMount() { \r\n if (this.props.admin.activeCompanyId === null) {\r\n this.setState({ loading: false });\r\n return;\r\n }\r\n\r\n this.props.adminActions.getAllCompanies(this.props.session.manufacturer).then(() => {\r\n let companies = this.props.admin.companyList;\r\n if (!companies) return;\r\n \r\n let activeCompany = companies.filter(company => company.id === this.props.admin.activeCompanyId);\r\n if (activeCompany.length > 0 ) {\r\n this.setState({ \r\n id: activeCompany[0].id,\r\n name: activeCompany[0].company, \r\n companyTypeId: activeCompany[0].companyTypeId,\r\n billingId: activeCompany[0].billingId,\r\n billingAddress: activeCompany[0].billingAddress,\r\n billingAddress2: activeCompany[0].billingAddress2,\r\n billingCity: activeCompany[0].billingCity,\r\n billingState: activeCompany[0].billingState,\r\n billingZip: activeCompany[0].billingZip,\r\n billingCountry: activeCompany[0].billingCountry,\r\n shippingId: activeCompany[0].shippingId,\r\n shippingAddress: activeCompany[0].shippingAddress,\r\n shippingAddress2: activeCompany[0].shippingAddress2,\r\n shippingCity: activeCompany[0].shippingCity,\r\n shippingState: activeCompany[0].shippingState,\r\n shippingZip: activeCompany[0].shippingZip,\r\n shippingCountry: activeCompany[0].shippingCountry,\r\n manufacturer: this.props.session.manufacturer,\r\n loading: false, editMode: true\r\n });\r\n } \r\n }); \r\n }\r\n \r\n formValueChange(event) { \r\n let value = event.target.value; \r\n this.updateField(this.props.admin.activeCompanyId, event.target.id, value, constants.TABLES.Company);\r\n\r\n if (event.target.id === constants.COMPANY_SQL_COLUMNS.CompanyTypeId) {\r\n this.setState({ companyTypeId: value }) \r\n }\r\n } \r\n \r\n cancel() {\r\n this.props.history.push({ pathname: '/CompanyList' });\r\n }\r\n\r\n validate() {\r\n if (!this.state.name) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a company name\");\r\n return false;\r\n }\r\n\r\n return true;\r\n } \r\n \r\n onInputFocus(event) { \r\n this.setState({onFocusValue: event.target.value});\r\n }\r\n\r\n updateField(id, column, value, table) {\r\n this.props.quoteOrderCommonActions.updateField(id, column, value, table).then(() => {\r\n this.props.adminActions.getAllCompanies(this.props.session.manufacturer);\r\n });\r\n }\r\n\r\n onAddressFieldUpdate(event, addressType) {\r\n if (this.state.onFocusValue === event.target.value) return; \r\n\r\n this.updateAddress(event.target.id, event.target.value, addressType); \r\n if (event.target.id === 'State') {\r\n if (addressType === constants.ADDRESS_TYPES.Billing)\r\n this.setState({ billingState: event.target.value });\r\n else \r\n this.setState({ shippingState: event.target.value });\r\n } \r\n }\r\n\r\n updateAddress(column, value, type) { \r\n let id = type === constants.ADDRESS_TYPES.Billing ? this.state.billingId : this.state.shippingId;\r\n\r\n this.props.adminActions.updateCompanyAddress(id, column, value);\r\n }\r\n\r\n getCompanyTypeValues(companyTypes) {\r\n let types = [];\r\n for (var i = 0; i < Object.keys(companyTypes).length; i++) {\r\n let opt = {\r\n Value: companyTypes[Object.keys(companyTypes)[i]].toString(),\r\n Caption: Object.keys(companyTypes)[i].toString()\r\n }\r\n \r\n types.push(opt);\r\n } \r\n return types; \r\n }\r\n\r\n render() { \r\n if (!this.state.loading && this.state.editMode && !this.props.admin.companyList) return ;\r\n \r\n let companyTypes = this.getCompanyTypeValues(constants.COMPANY_TYPES);\r\n \r\n return ( \r\n \r\n Company
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session, \r\n quoteOrderCommon: state.quoteOrderCommon,\r\n alert: state.alert,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ModifyCompany));","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport CheckBoxPrimitive from '../Common/Primitives/CheckBoxPrimitive';\r\nimport styled from 'styled-components';\r\nimport { Row, Col, Label } from 'reactstrap';\r\n\r\nexport const CheckBoxPrimitiveStyled = styled(CheckBoxPrimitive)`\r\n width: 70% !important;\r\n`;\r\n\r\nconst LocationConfiguration = props => {\r\n return (\r\n \r\n \r\n { props.locations.map(location => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n props.onLocationConfigurationChanged(e)} checked={location.checked} />\r\n \r\n \r\n );\r\n })} \r\n
\r\n \r\n );\r\n};\r\n\r\nLocationConfiguration.propTypes = {\r\n locations: PropTypes.array.isRequired,\r\n onLocationConfigurationChanged: PropTypes.func.isRequired\r\n};\r\n\r\nexport default LocationConfiguration;","import React, { Component } from 'react';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as adminActions from '../../actions/adminActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { Container, Form, FormGroup, Label, Col, Row } from 'reactstrap';\r\nimport TextInputWithLabel from '../Common/TextInputWithLabel/TextInputWithLabel';\r\nimport CheckBoxPrimitive from '../Common/Primitives/CheckBoxPrimitive';\r\nimport Button from '../Common/Button/Button';\r\nimport styled from 'styled-components';\r\nimport SelectPrimitive from '../Common/Primitives/SelectPrimitive';\r\nimport * as constants from '../../modules/constants';\r\nimport * as validation from '../../modules/validation';\r\nimport LocationConfiguration from './LocationConfiguration';\r\nimport { loadProgressBar } from 'axios-progress-bar';\r\nimport 'axios-progress-bar/dist/nprogress.css';\r\nimport Loading from '../Common/Loading/Loading';\r\n\r\nexport const SelectPrimitiveStyled = styled(SelectPrimitive)`\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n font-weight: bold; \r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-bottom: 1em;\r\n`;\r\n\r\nexport const ButtonStyled = styled(Button)`\r\n margin-right: 1em; \r\n`;\r\n\r\nexport const FormGroupStyled = styled(FormGroup)`\r\n input {width: 100% !important; }\r\n`;\r\n\r\nexport const PasswordResetButton = styled(Button)`\r\n &.btn { \r\n width: 160px !important;\r\n margin-top: .5em;\r\n }\r\n`;\r\n\r\nexport const PasswordWrapper = styled.div`\r\n padding: .5em;\r\n border: 2px solid lightgray;\r\n margin-top: 1em;\r\n`;\r\n\r\nexport const ContainerStyled = styled(Container)`\r\n padding-left: 1% !important;\r\n padding-right: 1% !important;\r\n`;\r\n\r\nclass Users extends Component { \r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n loadProgressBar();\r\n \r\n this.formValueChange = this.formValueChange.bind(this);\r\n this.save = this.save.bind(this);\r\n this.cancel = this.cancel.bind(this);\r\n this.onLocationChange = this.onLocationChange.bind(this);\r\n this.onRoleChange = this.onRoleChange.bind(this);\r\n this.resetPassword = this.resetPassword.bind(this);\r\n this.onCompanyChange = this.onCompanyChange.bind(this);\r\n this.onFabricatorChange = this.onFabricatorChange.bind(this);\r\n this.updatePassword = this.updatePassword.bind(this);\r\n\r\n this.state = ({\r\n id: '',\r\n username: '',\r\n password: '',\r\n reenterPassword: '', \r\n role: '',\r\n selectedLocationsArray: [],\r\n firstName: '',\r\n lastName: '',\r\n editMode: false,\r\n loading: true,\r\n companyId: null,\r\n fabricatorId: null,\r\n hideFabricatorDropdown: false \r\n }); \r\n }\r\n\r\n componentDidMount() { \r\n let promises = [];\r\n\r\n const promise1 = this.props.quoteOrderCommonActions.getUserCompanyLocations(this.props.session.userCompanyLocationIdCSV, this.props.session.username);\r\n const promise2 = this.props.quoteOrderCommonActions.getRoles(this.props.session.roleName);\r\n const promise3 = this.props.adminActions.getActiveUsersCompanyLocations(this.props.admin.activeUser);\r\n const promise4 = this.props.adminActions.getActiveUserRole(this.props.admin.activeUser);\r\n const promise5 = this.props.adminActions.getAllFabricators(this.props.session.manufacturer);\r\n // if (!this.props.quoteOrderCommon.userCompanyLocations) \r\n promises.push(promise1);\r\n\r\n // if (!this.props.quoteOrderCommon.roles)\r\n promises.push(promise2);\r\n\r\n // if (!this.props.admin.activeUserLocations)\r\n promises.push(promise3);\r\n\r\n // if (!this.props.admin.activeUserRole) \r\n promises.push(promise4);\r\n\r\n // if (!this.props.admin.fabricatorList)\r\n promises.push(promise5);\r\n\r\n // if (promises.length === 0) {\r\n // this.setState({ loading: false });\r\n // return;\r\n // }\r\n Promise.all(promises).then(() => {\r\n if (this.props.admin && this.props.admin.activeUser) {\r\n \r\n let user = this.props.quoteOrderCommon.companyLocationUsers.filter(u => u.username === this.props.admin.activeUser);\r\n\r\n if (user.length > 0) {\r\n console.log('if');\r\n this.setState({ \r\n id: user[0].id,\r\n username: user[0].username,\r\n firstName: user[0].firstName,\r\n lastName: user[0].lastName,\r\n editMode: true,\r\n loading: false \r\n });\r\n \r\n let initialLocations = [];\r\n \r\n this.props.admin.activeUserLocations.forEach(l => {\r\n initialLocations.push(l.companyLocationId);\r\n });\r\n\r\n this.setState({ \r\n role: this.props.admin.activeUserRole, \r\n loading: false, \r\n selectedLocationsArray: initialLocations,\r\n companyId: this.props.admin.activeCompanyId,\r\n loading: false \r\n }); \r\n } \r\n } else {\r\n console.log('else');\r\n this.setState({ loading: false });\r\n if (this.props.admin) {\r\n this.props.adminActions.getCompanyLocationsSuccess(null);\r\n }\r\n } \r\n \r\n \r\n\r\n // if (this.props.admin.companyList) {\r\n // let activeCompany = this.props.admin.companyList.filter(c => c.id.toString() === this.props.admin.activeCompanyId);\r\n\r\n // if (activeCompany.length > 0) {\r\n // this.setState({\r\n // hideFabricatorDropdown: activeCompany[0].companyTypeId === constants.COMPANY_TYPES.Store ? false : true,\r\n // loading: false\r\n // });\r\n // }\r\n // }\r\n });\r\n \r\n }\r\n\r\n updatePassword() {\r\n if (!this.state.username) { \r\n this.props.alertActions.showFailureAlert(\"Please enter a username to reset password.\");\r\n return;\r\n }\r\n if (!this.state.password) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a password to reset password.\");\r\n return;\r\n } \r\n\r\n if (this.state.password != this.state.reenterPassword) {\r\n this.props.alertActions.showFailureAlert(\"Passwords do now match.\");\r\n return;\r\n }\r\n\r\n this.props.adminActions.updatePasswordAdmin(this.state.username, this.state.password);\r\n }\r\n\r\n onCompanyChange(event) {\r\n if (event.target.value === constants.PLACEHOLDER) {\r\n this.setState({ companyId: null });\r\n return;\r\n }\r\n\r\n const companyId = event.target.value;\r\n\r\n this.setState({ companyId: companyId }, () => {\r\n this.props.adminActions.setActiveCompany(companyId);\r\n\r\n let company = this.props.admin.companyList.filter(c => c.id == companyId)[0];\r\n let companyName = company.company;\r\n let companyTypeId = company.companyTypeId;\r\n \r\n // this.setState({\r\n // hideFabricatorDropdown: companyTypeId === constants.COMPANY_TYPES.Store ? false : true\r\n // });\r\n \r\n this.props.adminActions.getCompanyLocations(companyName, this.state.fabricatorId); \r\n });\r\n\r\n if (!this.props.admin.activeUser) {\r\n //default new users to role based on selected company type\r\n let companyTypeId = this.props.admin.companyList.filter(c => c.id == companyId)[0].companyTypeId;\r\n switch(companyTypeId) {\r\n case constants.COMPANY_TYPES.Fabricator:\r\n this.setState({ role: constants.ROLE_ID.Fabricator });\r\n break; \r\n default:\r\n this.setState({ role: constants.ROLE_ID.User });\r\n break;\r\n }\r\n }\r\n }\r\n\r\n formValueChange(event) {\r\n switch(event.target.id) { \r\n case \"username\":\r\n this.setState({ username: event.target.value });\r\n break;\r\n\r\n case \"password\":\r\n this.setState({ password: event.target.value });\r\n break; \r\n \r\n case \"role\":\r\n this.setState({ role: event.target.value });\r\n break; \r\n\r\n case \"reenterPassword\":\r\n this.setState({ reenterPassword: event.target.value });\r\n break; \r\n \r\n case \"firstName\":\r\n this.setState({ firstName: event.target.value });\r\n break; \r\n\r\n case \"lastName\":\r\n this.setState({ lastName: event.target.value });\r\n break; \r\n default: \r\n break;\r\n } \r\n } \r\n\r\n save() { \r\n if (this.validate() !== true) {\r\n return;\r\n } \r\n\r\n if (this.state.editMode === true) {\r\n this.props.adminActions.updateUser(this.state.selectedLocationsArray, this.state.role, this.state.username, this.state.firstName, this.state.lastName, this.state.companyId).then(() => {\r\n this.props.history.push(\"/UserList\");\r\n });\r\n } else {\r\n this.props.adminActions.createUser(this.state.selectedLocationsArray, this.state.role, this.state.username, this.state.password, this.state.firstName, this.state.lastName, this.state.companyId).then(() => {\r\n this.props.history.push(\"/UserList\");\r\n });\r\n } \r\n }\r\n\r\n cancel() {\r\n this.props.history.push({ pathname: '/UserList' });\r\n }\r\n\r\n validate() {\r\n\r\n if (!this.state.companyId) {\r\n this.props.alertActions.showFailureAlert(\"Please select a company\");\r\n return false;\r\n }\r\n\r\n if (!this.state.selectedLocationsArray) {\r\n this.props.alertActions.showFailureAlert(\"Please select a location\");\r\n return false;\r\n }\r\n\r\n if (!this.state.role === constants.PLACEHOLDER) {\r\n this.props.alertActions.showFailureAlert(\"Please select a role\");\r\n return false;\r\n } \r\n\r\n if (!this.state.username) { \r\n this.props.alertActions.showFailureAlert(\"Please enter a username\");\r\n return false;\r\n }\r\n\r\n if (this.state.editMode === false && (!this.state.password || !this.state.reenterPassword || validation.passwordsMatch(this.state.password, this.state.reenterPassword)) === false) {\r\n this.props.alertActions.showFailureAlert(\"Password is blank or passwords do not match.\");\r\n return false;\r\n } \r\n\r\n if (!this.state.firstName) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a first name\");\r\n return false;\r\n }\r\n \r\n if (!this.state.lastName) {\r\n this.props.alertActions.showFailureAlert(\"Please enter a last name\");\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n onSelectAllChange(event) {\r\n let locations = this.state.selectedLocationsArray;\r\n\r\n if (event.target.checked) {\r\n //add all locations in props.admin.companyLocations to this.state.selectedLocationArray\r\n if (this.props.admin.companyLocations && this.props.admin.companyLocations.length > 0) {\r\n this.props.admin.companyLocations.forEach(cl => {\r\n if (!locations.includes(cl.id)) {\r\n locations.push(cl.id);\r\n }\r\n });\r\n }\r\n \r\n this.setState({ selectedLocationsArray: locations }); \r\n } else {\r\n //remove all locations in props.admin.companyLocations from this.state.selectedLocationArray\r\n let companyLocations = this.props.admin.companyLocations.map(l => l.id);\r\n let newLocations = locations.filter(l => !companyLocations.includes(l));\r\n this.setState({ selectedLocationsArray: newLocations });\r\n }\r\n }\r\n\r\n onFabricatorChange(event) {\r\n let fabricatorId;\r\n if (event.target.value === constants.PLACEHOLDER) {\r\n fabricatorId = 0;\r\n } else {\r\n fabricatorId = event.target.value;\r\n }\r\n \r\n const companyId = this.state.companyId; \r\n if (!companyId)\r\n return;\r\n\r\n let companyName = this.props.admin.companyList.filter(c => c.id == companyId)[0].company;\r\n\r\n this.setState({ fabricatorId: fabricatorId }, () => {\r\n this.props.adminActions.getCompanyLocations(companyName, fabricatorId);\r\n })\r\n } \r\n\r\n onLocationChange(event) { \r\n let locations = this.state.selectedLocationsArray;\r\n let newId = parseInt(event.target.id);\r\n\r\n if (event.target.checked) {\r\n if (locations.includes(newId)) \r\n return;\r\n else \r\n locations.push(newId);\r\n } else { \r\n let xlocations = locations.filter(l => l != newId);\r\n this.setState({ selectedLocationsArray: xlocations }); \r\n return; \r\n }\r\n \r\n this.setState({ selectedLocationsArray: locations }); \r\n }\r\n\r\n onRoleChange(event) { \r\n this.setState({ role: event.target.value }); \r\n }\r\n\r\n resetPassword() {\r\n this.props.sessionActions.forgotPassword(this.state.username);\r\n }\r\n\r\n formatLocationsForCheckboxSelect(arr) { \r\n let options = []; \r\n //if (this.props.admin.activeUserLocations)\r\n \r\n if (arr) {\r\n for (var i = 0; i < arr.length; i++) { \r\n let checked = this.checkIfUserAssignedToLocation(arr[i][Object.keys(arr[i])[0]].toString());\r\n let opt = {\r\n id: arr[i][Object.keys(arr[i])[0]],\r\n label: arr[i][Object.keys(arr[i])[1]].toString(),\r\n checked: checked\r\n }\r\n \r\n options.push(opt);\r\n }\r\n } \r\n \r\n return options;\r\n } \r\n\r\n checkIfUserAssignedToLocation(locationId) {\r\n if (this.state.editMode === true && !this.props.admin.activeUserLocations) return false;\r\n \r\n let isMatch = this.state.selectedLocationsArray.includes(parseInt(locationId));\r\n return isMatch; \r\n } \r\n\r\n render() { \r\n if (this.state.loading === true) return(\r\n \r\n );\r\n \r\n let locations = this.formatLocationsForCheckboxSelect(this.props.admin.companyLocations);\r\n\r\n return ( \r\n \r\n User
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n session: state.session, \r\n quoteOrderCommon: state.quoteOrderCommon,\r\n alert: state.alert,\r\n admin: state.admin\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n sessionActions: bindActionCreators(sessionActions, dispatch), \r\n quoteOrderCommonActions: bindActionCreators(quoteOrderCommonActions, dispatch),\r\n adminActions: bindActionCreators(adminActions, dispatch),\r\n alertActions: bindActionCreators(alertActions, dispatch),\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Users));","import formatter from '../../modules/formatter'; \r\nimport React, { Component } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as constants from '../../modules/constants';\r\n\r\nclass QuotePrint extends Component { \r\n\r\n buildLineHTML(Lines) {\r\n let totalPrice = 0; \r\n let totalQuantity = 0;\r\n let LinesHTML = `\r\n \r\n | Product | \r\n Quantity | \r\n Unit Price | \r\n Total Price | \r\n
\r\n `;\r\n \r\n Lines.forEach(line => { \r\n totalPrice = totalPrice + (line.price * line.quantity);\r\n let totalLinePrice = line.price * line.quantity;\r\n totalQuantity = totalQuantity + line.quantity;\r\n LinesHTML = LinesHTML + ` \r\n \r\n | ${line.productName} | \r\n ${line.quantity} | \r\n ${formatter.currency(line.price)} | \r\n ${formatter.currency(totalLinePrice)} | \r\n
\r\n `});\r\n \r\n LinesHTML = LinesHTML + `\r\n \r\n | Total | \r\n ${totalQuantity} | \r\n | \r\n ${formatter.currency(totalPrice)} | \r\n
\r\n `;\r\n \r\n return LinesHTML;\r\n }\r\n \r\n buildAddressesHTML(Addresses) {\r\n let AddressesHTML = `\r\n \r\n | Address Type | \r\n Address | \r\n Address2 | \r\n City | \r\n State | \r\n Country | \r\n Zip | \r\n
\r\n `;\r\n \r\n Addresses.forEach(address => { \r\n let addressType = address.AddressType === constants.ADDRESS_TYPES.Billing ? \"Billing\" : \"Shipping\";\r\n \r\n AddressesHTML = AddressesHTML + ` \r\n \r\n | ${addressType} | \r\n ${address.Address} | \r\n ${address.Address2} | \r\n ${address.City} | \r\n ${address.State} | \r\n ${address.Country} | \r\n ${address.Zip} | \r\n
\r\n `});\r\n \r\n return AddressesHTML;\r\n }\r\n \r\n buildQuoteEmailBody() { \r\n let LinesHTML = this.buildLineHTML(this.props.quote.currentLines);\r\n let AddressesHTML = this.buildAddressesHTML(this.props.quote.currentAddresses);\r\n let contactFullName = this.props.quote.currentContact[0].firstName + \" \" + this.props.quote.currentContact[0].lastName;\r\n // - ${this.props.quote.quoteName}\r\n let body = \r\n `\r\n \r\n \r\n \r\n \r\n \r\n \r\n Quote ID: ${this.props.quote.currentQuoteId}
\r\n Prepared For: ${contactFullName}
\r\n \r\n Addresses
\r\n \r\n\r\n Quote Lines
\r\n \r\n \r\n \r\n `;\r\n \r\n return body;\r\n }\r\n\r\n render() { \r\n\r\n if (!this.props.quote || !this.props.quote.currentContact) \r\n return ;\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n api: state.api,\r\n session: state.session,\r\n quote: state.quote\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n apiActions: bindActionCreators( apiActions, dispatch),\r\n sessionActions: bindActionCreators( sessionActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch)\r\n };\r\n} \r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(QuotePrint));","import React, { Component } from 'react';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport Button from '../Common/Button/Button';\r\nimport * as constants from '../../modules/constants';\r\nimport styled from 'styled-components';\r\nimport Loading from '../Common/Loading/Loading';\r\nimport ListFilter from './ListFilter';\r\n\r\nexport const Wrapper = styled.div`\r\n padding: 1em; \r\n cursor: pointer;\r\n margin-top: 1em;\r\n margin-bottom: 1em;\r\n background-color: ${props => props.theme.buttonColor};\r\n border-radius: 15px;\r\n height: 104px;\r\n width: 95%;\r\n\r\n :hover {\r\n background-color: ${props => props.theme.gridRowBackgroundColor}; \r\n }\r\n`;\r\n\r\nexport const Heading = styled.div`\r\n font-size: 24px !important;\r\n text-align: center; \r\n`;\r\n\r\nexport const Count = styled.div`\r\n font-size: 24px !important;\r\n text-align: center; \r\n`;\r\n\r\nexport const NewButtonWrapper = styled.div`\r\n width: 100%;\r\n`;\r\n\r\nexport const ActionRequiredLabel = styled.div`\r\n position: absolute;\r\n top: 15px;\r\n left: 38%;\r\n color: #e2231a;\r\n font-weight: bold;\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n margin-bottom: 0px !important;\r\n margin-top: 0px !important;\r\n`; \r\n\r\nexport const ButtonStyled = styled(Button)`\r\n \r\n`; \r\n\r\nexport const ContainerStyled = styled(Container)`\r\n background-image: url(/images/WidePlankedWalnut.jpg);\r\n min-height: 756px;\r\n`;\r\n\r\nexport class Overview extends Component {\r\n constructor(props, context) {\r\n super(props, context); \r\n\r\n this.pushHistory = this.pushHistory.bind(this);\r\n this.onClickNewQuote = this.onClickNewQuote.bind(this);\r\n this.onClickNewOrder = this.onClickNewOrder.bind(this);\r\n this.onFilter = this.onFilter.bind(this);\r\n\r\n this.state = {\r\n loading: true,\r\n filter: ''\r\n } \r\n }\r\n\r\n componentDidMount() {\r\n this.props.quoteOrderCommonActions.getQuoteOrderCommonOverview(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName).then(() => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n async onClickNewQuote() {\r\n this.props.quoteActions.clearQuote();\r\n await this.props.quoteActions.createQuote(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Quote' });\r\n } \r\n\r\n async onClickNewOrder() {\r\n this.props.orderActions.clearOrder();\r\n await this.props.orderActions.createOrder(this.props.session.username, this.props.session.company); \r\n \r\n this.props.history.push({ pathname: '/Order' });\r\n }\r\n\r\n pushHistory(status, type) {\r\n if (type === 'Quote') {\r\n this.props.history.push({\r\n pathname: `/QuoteDashboard`,\r\n state: { overviewStatus: this.state.filter ? this.state.filter : status }\r\n });\r\n } \r\n\r\n if (type === 'Order') {\r\n this.props.history.push({\r\n pathname: `/OrderDashboard`,\r\n state: { overviewStatus: this.state.filter ? this.state.filter : status }\r\n });\r\n } \r\n }\r\n\r\n onFilter(event) {\r\n this.setState({ loading: true, filter: event.target.value });\r\n \r\n this.props.quoteOrderCommonActions.getQuoteOrderCommonOverview(this.props.session.company, this.props.session.userCompanyLocationIdCSV, this.props.session.roleName, event.target.value).then(() => {\r\n this.setState({ loading: false });\r\n });\r\n }\r\n\r\n render() { \r\n if (!this.props.session.company) return ;\r\n \r\n const quotes = this.props.quoteOrderCommon.overview ? this.props.quoteOrderCommon.overview.filter(q => q.type === 'Quote') : [];\r\n const orders = this.props.quoteOrderCommon.overview ? this.props.quoteOrderCommon.overview.filter(o => o.type === 'Order') : [];\r\n\r\n return ( \r\n \r\n \r\n Orders
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n orders.map(o => { \r\n return ( \r\n \r\n this.pushHistory(o.name, o.type)}>\r\n {o.name}\r\n {(o.id === constants.STATUS_TYPES.Pending || o.id === constants.STATUS_TYPES.Rejected) && \r\n Action Required\r\n }\r\n {o.total}\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n Quotes
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n quotes.map(q => { \r\n return ( \r\n \r\n this.pushHistory(q.name, q.type)}>\r\n {q.name}\r\n {(q.id === constants.STATUS_TYPES.Pending || q.id === constants.STATUS_TYPES.Rejected) && \r\n Action Required\r\n }\r\n {q.total}\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nfunction mapStateToProps(state, ownProps) { \r\n return {\r\n quoteOrderCommon: state.quoteOrderCommon,\r\n session: state.session,\r\n quote: state.quote, \r\n order: state.order,\r\n };\r\n }\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n quoteOrderCommonActions: bindActionCreators( quoteOrderCommonActions, dispatch),\r\n sessionActions: bindActionCreators( sessionActions, dispatch),\r\n quoteActions: bindActionCreators(quoteActions, dispatch), \r\n orderActions: bindActionCreators(orderActions, dispatch),\r\n };\r\n} \r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Overview);","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport styled from 'styled-components';\r\nimport dateFormat from 'dateformat';\r\nimport Icon from '../QuoteOrderCommon/Icon';\r\nimport * as constants from '../../modules/constants';\r\n\r\nexport const Img = styled.img`\r\n width:25px;\r\n height: auto;\r\n`;\r\nexport const ColStyled = styled(Col)`\r\n text-decoration: underline;\r\n cursor: pointer;\r\n`;\r\n\r\nexport const DownloadLinkStyled = styled.div` \r\n display: inline; \r\n`;\r\n\r\nexport const FaxTemplateLink = styled.span`\r\n cursor: pointer;\r\n text-decoration: underline;\r\n font-size: 17px;\r\n`;\r\n\r\nconst InvoiceList = React.memo(props => { \r\n return ( \r\n \r\n {props.invoices && props.invoices.length > 0 &&\r\n \r\n {props.invoices.map(file => { \r\n let uploadDate = dateFormat(file.uploadDate, \"m/d/yyyy hh:MM TT\", true); \r\n return( \r\n \r\n \r\n props.onClickDownloadFile(file.path, file.originalName, file.mimetype, file.filename)}>\r\n {file.originalName} - {uploadDate} \r\n \r\n\r\n {props.readonly === false && \r\n props.onDeleteAttachment(file.id)}>\r\n \r\n \r\n }\r\n \r\n \r\n );\r\n })}\r\n
\r\n }\r\n \r\n );\r\n});\r\n\r\nexport default InvoiceList;\r\n\r\nInvoiceList.propTypes = {\r\n invoices: PropTypes.array.isRequired,\r\n onClickDownloadFile: PropTypes.func.isRequired, \r\n readonly: PropTypes.bool,\r\n orderId: PropTypes.number\r\n};","import React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport Dropzone from 'react-dropzone'\r\nimport styled from 'styled-components';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as orderActions from '../../actions/orderActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport $ from 'jquery';\r\nimport PropTypes from 'prop-types';\r\nimport * as constants from '../../modules/constants';\r\nimport InvoiceList from './InvoiceList';\r\nimport Button from '../Common/Button/Button';\r\nimport { Row, Col, FormGroup, Label } from 'reactstrap';\r\nimport TextInputPrimitive from '../Common/Primitives/TextInputPrimitive';\r\n\r\nexport const FileDropArea = styled.div`\r\n .wrapper { \r\n width: 100%;\r\n border: dashed 2px lightgray;\r\n cursor: pointer;\r\n }\r\n\r\n div {\r\n padding: 15px;\r\n text-align: center;\r\n color: lightgray;\r\n font-size: 24px !important;\r\n font-weight: 400;\r\n }\r\n`;\r\n\r\nexport const LabelStyled = styled(Label)`\r\n margin-bottom: 0 !important;\r\n`;\r\n\r\nexport const ColStyled = styled(Col)`\r\n padding-left: 5px !important;\r\n padding-right: 5px !important;\r\n`;\r\n\r\nexport const RowStyled = styled(Row)`\r\n width:95%;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n margin-bottom: .5em !important;\r\n`;\r\n\r\nexport const FormGroupLeft = styled(FormGroup)`\r\n button { float: left !important; }\r\n`;\r\n\r\nexport const FormGroupRight = styled(FormGroup)`\r\n button { float: right !important; } \r\n`;\r\n\r\nclass Invoices extends React.Component {\r\n constructor(props, context) {\r\n super(props, context); \r\n \r\n this.onImageDrop = this.onImageDrop.bind(this); \r\n this.onClickDownloadFile = this.onClickDownloadFile.bind(this); \r\n this.returnToOrder = this.returnToOrder.bind(this);\r\n this.updateHeader = this.updateHeader.bind(this);\r\n this.submitInvoice = this.submitInvoice.bind(this);\r\n\r\n this.state = {\r\n orderId: null,\r\n onFocusValue: null,\r\n isLocked: false\r\n }\r\n }\r\n\r\n componentDidMount() { \r\n this.props.orderActions.getInvoices(this.props.location.orderId, constants.ATTACHMENT_TYPES.Invoices);\r\n \r\n this.setState({ orderId: this.props.location.orderId, isLocked: this.props.location.isLocked });\r\n }\r\n\r\n onClickDownloadFile(path, originalName, mimetype, filename) {\r\n this.props.quoteOrderCommonActions.downloadFile(path, originalName, mimetype, filename); \r\n }\r\n \r\n onInputFocus(event) {\r\n this.setState({onFocusValue: event.target.value});\r\n }\r\n\r\n updateHeader(column, value) {\r\n this.props.quoteOrderCommonActions.updateHeaderField(this.props.order.id, column, value, constants.TABLES.Order);\r\n }\r\n \r\n onImageDrop(acceptedFiles) {\r\n const data = new FormData();\r\n \r\n for (let i = 0; i < acceptedFiles.length; i += 1) {\r\n\r\n\r\n // const allowedTypes = [\"image/png\", \"application/pdf\", \"image/jpeg\", \"application/msword\", \"image/tiff\", \"image/bmp\"];\r\n\r\n // if (allowedTypes.includes(acceptedFiles[i].type) === false) { \r\n // this.props.alertActions.showFailureAlert(\"Invalid file type.\");\r\n // return;\r\n // }\r\n\r\n data.append('file', acceptedFiles[i]); \r\n }\r\n\r\n data.append('company', this.props.location.company);\r\n data.append('quoteId', null);\r\n data.append('orderId', this.props.location.orderId);\r\n data.append('attachmentType', 3);\r\n \r\n \r\n $.ajax({\r\n url: '/api/v1/quoteOrderCommon/uploadAttachment',\r\n data,\r\n processData: false,\r\n contentType: false,\r\n method: 'POST',\r\n dataType: 'json',\r\n success: (response) => {\r\n if (response) { \r\n this.props.orderActions.getInvoices(this.props.location.orderId, constants.ATTACHMENT_TYPES.Invoices);\r\n this.props.quoteOrderCommonActions.getAttachments(null, this.props.order.id); \r\n } \r\n },\r\n error: (jqXHR) => {\r\n const res = jqXHR.responseJSON;\r\n alert('error: ' + JSON.stringify(res));\r\n },\r\n });\r\n }\r\n\r\n returnToOrder() {\r\n this.props.history.push({\r\n pathname: \"/Order\", \r\n });\r\n }\r\n\r\n submitInvoice() {\r\n if (this.props.order.attachments.length < 1) {\r\n this.props.alertActions.showFailureAlert(\"Please upload the drawing, purchase order, and invoice documents.\");\r\n return;\r\n } else if (!this.props.order.poNumber) {\r\n this.props.alertActions.showFailureAlert(\"Please enter the purchase order number.\");\r\n return;\r\n } else if (!this.props.order.poCostTotal) {\r\n this.props.alertActions.showFailureAlert(\"Please enter the purchase order cost total.\");\r\n return; \r\n } else if (!this.props.order.invoiceNumber) {\r\n this.props.alertActions.showFailureAlert(\"Please enter an invoice number.\");\r\n return; \r\n }\r\n\r\n // mike - order completed\r\n const promise1 = this.props.quoteOrderCommonActions.updateField(this.props.order.id, 'invoiced', true, constants.TABLES.Order); \r\n const promise2 = this.props.quoteOrderCommonActions.updateHeaderField(this.props.order.id, constants.ORDER_SQL_COLUMNS.Status, constants.STATUS_TYPES.Completed, constants.TABLES.Order);\r\n const promise3 = this.props.orderActions.saveCompletedOrderAttachmentsToDirectory(this.props.order.id, this.props.order.contact[0].lastName);\r\n //const promise3 = addNew Action(thunk) to download all files to folders for given order\r\n //this.props.orderActions.NewFunction\r\n Promise.all([promise1, promise2]).then(() => {\r\n this.props.history.push({\r\n pathname: \"/Order\", \r\n });\r\n }); \r\n }\r\n \r\n render() { \r\n return (\r\n \r\n \r\n \r\n \r\n Invoice - Order # {this.props.order.id}
\r\n \r\n Please upload an POD and any other documents by dragging and dropping the file in the box below.\r\n\r\n Please verify the PO # and enter the PO Amt before submitting the invoice. \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n PO Number*\r\n this.onInputFocus(e)} onBlur={(e) => this.updateHeader(e.target.id, e.target.value)} /> \r\n \r\n \r\n \r\n \r\n PO Cost Total*\r\n this.onInputFocus(e)} onBlur={(e) => this.updateHeader(e.target.id, e.target.value)} /> \r\n \r\n \r\n \r\n \r\n Invoice Number*\r\n this.onInputFocus(e)} onBlur={(e) => this.updateHeader(e.target.id, e.target.value)} /> \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n this.onImageDrop(acceptedFiles)}>\r\n {({getRootProps, getInputProps}) => (\r\n \r\n \r\n
\r\n
Drag and drop files here or click to select files
\r\n
Something went wrong. {this.state.error} {this.state.info}
;\r\n }\r\n return this.props.children;\r\n }\r\n }\r\n\r\n export default ErrorBoundary;","import React from 'react';\r\n\r\nconst LoggedOut = React.memo(({caption, isRequired, ...props}) => { \r\n return ( \r\n \r\n ); \r\n}); \r\n\r\nexport default LoggedOut; ","import React, { Component } from 'react';\r\nimport { Route, Switch, withRouter } from 'react-router-dom';\r\nimport Header from '../Header/Header';\r\nimport Configurator from '../Configurator/Configurator';\r\nimport Alerts from '../Alerts/Alerts';\r\nimport MyConfigurations from '../MyConfigurations/MyConfigurations';\r\nimport ProductConfigurations from '../ProductConfigurations/ProductConfigurations';\r\nimport AddProduct from '../ProductConfigurations/AddProductConfiguration';\r\nimport SignUpModal from '../SignUpModal/SignUpModal';\r\nimport EditProduct from '../ProductConfigurations/EditProductConfigurations';\r\nimport QuoteList from '../Quote/QuoteList';\r\nimport OrderList from '../Order/OrderList';\r\nimport Quote from '../Quote/Quote';\r\nimport Order from '../Order/Order';\r\nimport ResetPassword from '../SignUpModal/ResetPassword';\r\nimport RequestPasswordReset from '../SignUpModal/RequestPasswordReset';\r\nimport QuoteDashboard from '../Quote/QuoteDashboard';\r\nimport OrderDashboard from '../Order/OrderDashboard';\r\nimport UserList from '../Administration/UserList';\r\nimport CompanyLocationList from '../Administration/CompanyLocationList';\r\nimport ModifyCompanyLocation from '../Administration/ModifyCompanyLocation';\r\nimport CompanyList from '../Administration/CompanyList';\r\nimport ModifyCompany from '../Administration/ModifyCompany';\r\nimport AddUser from '../Administration/ModifyUser';\r\nimport QuotePrint from '../Quote/QuotePrint';\r\nimport QuoteOrderCommonOverview from '../QuoteOrderCommon/Overview';\r\nimport Invoice from '../Order/Invoice';\r\nimport {ThemeProvider} from 'styled-components';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport * as sessionActions from '../../actions/sessionActions';\r\nimport * as apiActions from '../../actions/apiActions';\r\nimport * as quoteActions from '../../actions/quoteActions';\r\nimport * as quoteOrderCommonActions from '../../actions/quoteOrderCommonActions';\r\nimport * as alertActions from '../../actions/alertActions';\r\nimport ErrorBoundary from '../ErrorBoundary/ErrorBoundary';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport './App.css';\r\nimport * as constants from '../../modules/constants';\r\nimport LoggedOut from '../Common/LoggedOut/LoggedOut';\r\n\r\n\r\n// const rentechTheme = { \r\n// buttonColor: '#EEEEEE',\r\n// altButtonColor: '#6D6E71',\r\n// buttonTextWhite:'#FFF',\r\n// activeStageColor: '#13cdfd',\r\n// inactiveStageForeColor:'#000',\r\n// activeStageForeColor:'#FFF',\r\n// completedStageColor: '#EEEEEE',\r\n// incompleteStageColor: '#EEEEEE',\r\n// accentColor: '#ffdd00',\r\n// darkBackground: '#6D6E71',\r\n// lightBackground: '#EEEEEE',\r\n// gridLineHoverBackgroundColor: '#4d4d4d', \r\n// gridLineHoverOpacity: .7,\r\n// gridLineHoverColor: '#FFF',\r\n// gridRowBackgroundColor: '#f5f5f5', //offwhite\r\n// gridRowAlternateBackgroundColor: '#FFF' //FDB813\r\n\r\n// };\r\n\r\n\r\n\r\n\r\nclass App extends Component {\r\n \r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = { \r\n theme: constants.rentechTheme, \r\n hasError: false \r\n };\r\n\r\n //this.props.quoteActions.getQuotes(this.props.session.company, this.props.session.userCompanyLocationIdCSV);\r\n\r\n this.getStatusTypes();\r\n } \r\n\r\n async getStatusTypes() { \r\n await this.props.quoteOrderCommonActions.getStatusTypes(); \r\n } \r\n\r\n render() { \r\n if (this.state.hasError) {\r\n // You can render any custom fallback UI\r\n return Something went wrong.
;\r\n }\r\n \r\n return ( \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Powered By
*/}\r\n \r\n \r\n
![\"renaissancetech\"](\"/images/logo.png\"){kind=logo}
![\"renaissancetech\"](\"/images/hartson-kennedy-logo.png\"){kind=logo}
this.pushHistory('/Overview') } />\r\n ![\"HK\"](\"http://www.hartson-kennedy.com/wp-content/uploads/2018/07/hartson-kennedy-logo-600x81.png\"){kind=logo}